# 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 andadditionalPropertyName | 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 ispresent 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 stringtype 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