# 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 then 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 only a single or multiple options can be selected 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
additionalPropOptions Additional property options will set the drop down available for the selected entries
needs to be an object with at least a label and an identifier property, using names set in
identifierPropertyName and labelPropertyName
array - []
additionalPropPlaceholder specify a placeholder of the additional property input field string - 'Select role(s)'
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
(for dynamically fetched entries that need to do backend requests)
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 (currently only used for aria-required) 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
inputClass specify additional input field styling string - ''

# Events

Event name Properties Description
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

# Demo

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

Last Updated: 3/27/2023, 4:42:24 PM