# 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)
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)
object - {}
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 undefined boolean - is component active to keep active state of component in sync

# 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.

Last Updated: 5/17/2023, 3:45:47 PM