BaseSearch

A basic text search to filter entries or files

Props

Prop name	Description	Type	Values	Default
modelValue	set input value from outside for searchType daterange this needs to be an object with date_from and date_to properties!	string|object	-	''
selectedChips	if input searchType is chips this is the prop to pass selected options (chips). you may use the v-model directive 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	-	''
inputId	specify a field id for identification of the input field if none is specified an internal id will be assigned	string	-	''
searchType	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
addChipsInputDirectly	for searchType 'chips': set this false if you want to add the chip manually e.g. if option is selected from a dropdown, true is mainly just useful if BaseSearch is a standalone element	boolean	-	false
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) clearInput: text read for remove input icon if prop clearable is set true optionAdded: text read when an option was added to selected list (for type chips) optionToRemoveSelected: text read when a selected option is in focus to be removed (for type chips) optionRemoved: text read when an option was removed from selected list (for type chips) 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.', clearInput: 'Clear input', optionAdded: 'option {label} added to selected list.', optionToRemoveSelected: 'option {label} from selected list marked for removal. Press delete or backspace to remove.', optionRemoved: 'option {label} removed.', results: '' }
dateFieldDelay	use this prop to set a delay in ms before date input calendar is displayed	number	-	0

Events

Event name	Properties	Description
update:model-value	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.