BaseSearch

A basic text search to filter entries or files

Props

Prop name	Description	Type	Values	Default
v-model	set input value from outside for type daterange this needs to be an object with date_from and date_to properties!	string|object	-	''
selectedChips	if input type is chips this is the prop to pass selected options (chips). you may use the .sync modifier on this prop	array	-	[]
placeholder	placeholder to show for input; either just a string or an object with different text for each search type (text, chips, date)	string|object	-	'Search your works and events'
label	label connected with input (will not be visible but for usability!)	string	-	'Search'
showPreInputIcon	define if the magnifier glass (in front of input field) should be shown	boolean	-	true
dropDownListId	specify the id of a linked drop down list	string	-	''
id	specify a field id for identification of the input field if none is specified an internal id will be assigned	string	-	''
type	specify the type of input field	string	text, chips, controlled, date, daterange, chipssingle	'text'
linkedListOption	specify a linked list option (e.g. drop down) (will be used in aria-activedescendant attribute)	number|string	-	null
loadable	if true space is reserved for a loader that can be activated with the 'isLoading' prop	boolean	-	false
isLoading	is loading indicator - showing loader if true	boolean	-	false
language	set the language (ISO 639-1)	string	-	'en'
identifierPropertyName	specify the object property that should be used as identifier (only needed for type chips	string	-	'id'
labelPropertyName	specify the object property that should be used as value to be displayed (only needed for type chips	string	-	'label'
invalid	mark the form field as invalid and ideally also provide an error message to display below the form field. for an example see BaseInput	boolean	-	false
showErrorIcon	define if error icon should be shown for an example see BaseInput	boolean	-	true
clearable	if true a remove icon will be shown allowing to remove all input at once. for an example see BaseInput	boolean	-	true
isActive	set active state from outside	boolean	-	false
setFocusOnActive	use this prop to deactivate automatic setting of focus as soon as input element becomes active - this might require external handling of focus setting!	boolean	-	true
assistiveText	this prop gives the option to add assistive text for screen readers properties: selectedOption: text read when a selected option is focused (currently only working for type chips) loaderActive: text that is announced when results are being fetched (prop isLoading is set true) results: provide text that should be announced when the search has yielded results (or not). Caveat: results has a watcher attached to trigger the announcement so make sure the property values are reset after filling them by using update:assistive-text or resetting it manually (after a timeout)	object	-	{ selectedOption: '', loaderActive: 'loading.', results: '' }
dateFieldDelay	use this prop to set a delay in ms before date input calender is displayed	number	-	0

Events

Event name	Properties	Description
input	undefined string, Object - the altered input values	inform parent of changed input values (v-model)
update:selected-chips	undefined Array - the updated selected options list	inform parent of changes in selected chips
update:is-active		inform parent if is active has changed internally
update:assistive-text

Slots

Name	Description	Bindings
pre-input-field	add elements within search but before all other elements. for an example see BaseInput
input-field-addition-before	add elements within search but before all other elements. for an example see BaseInput
input-field-inline-before	a slot to exchange the magnifier icon with other elements
input-field-addition-after	for adding elements after input. for an example see BaseChipsInputField
post-input-field	elements after the actual input element but within the input field container. for an example see BaseChipsInputField
error-icon	use a custom icon instead of standard error/warning icon. for an example see BaseChipsInputField
remove-icon	for adding custom input remove icon. for an example see BaseChipsInputField
below-input	below-input slot added to e.g. add drop down

---

Demo

A simple Search Component

A component with more custom settings. Also demonstrating the different types available.

For slot demonstrations see BaseChipsInput or BaseInput.