BaseChipsBelow

A very specialized component based on BaseChipsInput in order to assign additional values (e.g. roles) to selected entries)]

Props

Prop name	Description	Type	Values	Default
list	list of selectable options objects with at least an identifier and a label property. property names can be set with props identifierPropertyName and labelPropertyName	array	-	[]
v-model	list of already selected options objects with at least an identifier and a label property and a property to use for the secondary drop down ('additional property'), displayed as chips. property names can be set with props identifierPropertyName, labelPropertyName and additionalPropertyName	array	-	[]
id	if field is occurring more than once - set an id	string	-	''
label	input field label	string	-
showLabel	define if label should be visible	boolean	-	true
placeholder	input field placeholder	string	-	null
dropDownNoOptionsInfo	message displayed when no selectable options are available	string	-	'No options available'
allowUnknownEntries	define if the user can add an option that is not in the list	boolean	-	false
allowMultipleEntries	define whether one or more entries can be selected from the drop-down menu	boolean	-	true
allowDynamicDropDownEntries	define if selectable list options should be fetched every time of if the list passed in the beginning is used	boolean	-	false
addSelectedEntryDirectly	this prop was added because there was some action needed to be done before entry was added so this is possible if entry is not added to selectedList directly but only in parent component	boolean	-	true
additionalPropAllowMultipleEntries	define whether one or more options can be selected from the drop-down menu	boolean	-	true
additionalPropOptions	Additional property options will set the drop down available for the selected entries needs to be an object with following attributes: label|* string: the label of the default option - use the property name set via prop labelPropertyName id|* string?: (optional) identifier of the default option - use the property name set via prop identifierPropertyName	array	-	[]
additionalPropDefaultOption	define a default option for additional props see defaultEntry at BaseChipsInput props for more details	object|null	-	null
additionalPropRequired	specify additional options as required	boolean	-	false
additionalPropPlaceholder	specify a placeholder of the additional property input field	string	-	'Select role(s)'
validationTexts	define validation messages	object	-	{ required: 'Select an option.' }
hoverboxContent	set content for the info box activatable by click see BaseHoverBox for more details	object	-	{}
isLoading	show spinner to indicate that something is loading. This is meant for dynamically fetching entries from a backend and will only have an effect if prop allowDynamicDropDownEntries is set true!	boolean	-	false
sortText	if sorting is enabled this will be the text shown in the button	string	-	'Sort A – Z'
sortName	if true sorting will consider the last string in a label or if a comma is present the string before the comma	boolean	-	false
language	set a language (ISO 639-1)	string	-	''
addNewChipText	set a chips text for adding a new chip (alternatively add a 'form.Add' value to your localization files). if allowUnknownEntries is true please add this in one form or another!	string	-	''
identifierPropertyName	specify the object property that should be used as identifier	string	-	'id'
labelPropertyName	specify the object property that should be used as value to be displayed	string	-	'label'
additionalPropertyName	define the name of the property that is relevant for the additional drop down once a value was selected from the primary drop down	string	-	'roles'
required	mark as required field	boolean	-	false
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
disabled	set true if input field should be disabled. for an example see BaseInput	boolean	-	false
errorMessage	add an error message to be displayed below form field if field is invalid for an example see BaseInput	string	-	''
showErrorIcon	define if error icon should be shown. for an example see BaseInput	boolean	-	false
clearable	if true a remove icon will be shown allowing to remove all input at once. for an example see BaseInput	boolean	-	false
closeDropdownOnOptionSelect	set false if dropdown should be still open after selecting an option	boolean	-	true
inputClass	specify additional input field styling	string	-	''
sortable	define if a button for sorting the entries is visible	boolean	-	true
draggable	define if chips should be draggable	boolean	-	true
highlightStringMatch	set this flag to true to highlight autocomplete option characters that match the current search input string this will only have effect when the slot drop-down-entry is not used	boolean	-	false
highlightStringTags	if highlightAutocompleteMatch is set true provide tag names to style the matched characters (without '<' and '>', e.g. ['b'] for <b>) this will only have effect when the slot drop-down-entry is not used	array	-	[]
assistiveText	this prop gives the option to add assistive text for screen readers properties: loaderActive: text that is announced when results are being fetched (prop isLoading is set true) resultsRetrieved: text that is announced when results were retrieved (drop down list changed) optionAdded: text read when option was added to the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) optionRemoved: text read when option was removed from the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName])	object	-	{ loaderActive: 'loading.', resultsRetrieved: '{number} options in drop down.', optionAdded: 'option {label} added to selected list.', optionRemoved: 'option {label} removed.' }

Methods

validate

Validation can be triggered by executing e.g. this.$refs.baseChipsBelow.validate(); from parent.
Therefore, the component must have a reference set.

Return

Type	Description
boolean	components error state

Events

Event name	Properties	Description
additional-property-changed	obj Object - changed object	propagate additional-property-changed change event to parent Note: useful when validation is done from the parent
selected-changed	undefined Object - the altered list	propagate list change from dragging event to parent
fetch-dropdown-entries	value string - the input string type string - the labelPropertyName that was specified	if drop down entries dynamically set - fetch new entries on input
hoverbox-active	value boolean - value describing if hoverbox active is true or false option Object - the option for which the hoverbox was activated	event emitted on show / hide hoverbox

Slots

Name	Description	Bindings
drop-down-entry	a slot to provide customized drop down options	item Object - an option in the options list
label-addition	Slot to allow for additional elements on the right side of the label row <div> (e.g. language tabs)). for an example see BaseChipsInputField
input-field-addition-before	Slot to allow for additional elements in the input field <div> (before <input>). for an example see BaseChipsInputField
input-field-addition-after	for adding elements after input
post-input-field	for adding elements at the end covering the whole height. for an example see BaseChipsInputField
error-icon	use a custom icon instead of standard error/warning icon. for an example see BaseChipsInputField
remove-icon	use a custom icon instead of standard remove icon. for an example see BaseChipsInputField
no-options	a slot to customize messages in case of no options present in drop down
below-input

---

Demo

A simple chips input form field with chips displayed below and default (base project specific) role selection

Demo with optional validation

A chips input form field with chips displayed below and optional validation