diff --git a/documentation/v2/index.html b/documentation/v2/index.html index da1094e8..d79ad28d 100644 --- a/documentation/v2/index.html +++ b/documentation/v2/index.html @@ -665,7 +665,7 @@ <pre>Multiselect Open: {{ isOpen }}</pre> <label class="typo__label">Controlling multiselect programmatically</label> <multiselect ref="multiselect" placeholder="Pick at least one" :value="value" :options="options" :multiple="true" :searchable="true" :allow-empty="false" :hide-selected="true" :max-height="150" :max="3" @open="isOpen = true" @close="isOpen = false"></multiselect> -</div>

Props

NameTypeDefaultDescription
multiselectMixin.js
idInteger||StringUsed to identify the component in events.
optionsArrayArray of available options: Objects, Strings or Integers. If array of objects, visible label will default to option.label.
valueObject||Array||String||IntegerPresets the selected options.
multipleBooleanfalseEquivalent to the multiple attribute on a <select> input.
trackByStringUsed to compare objects. Only use if options are objects.
labelStringLabel from option Object, that will be visible in the dropdown.
searchableBooleantrueAdd / removes search input.
clearOnSelectBooleantrueClear the search input after select(). Use only when multiple is true.
hideSelectedBooleanfalseHide already selected options
placeholderString'Select option'Equivalent to the placeholder attribute on a <select> input.
allowEmptyBooleantrueAllows to remove all selected values. Otherwise one must be left selected.
resetAfterBooleanfalseReset this.value, this.search, this.selected after this.value changes.
closeOnSelectBooleantrueEnable/disable closing after selecting an option
customLabelFunction => StringFunction used to create a custom label
taggableBooleanfalseDisable / Enable tagging
tagPlaceholderString'Press enter to create a tag'String to show when highlighting a potential tag
tagPositionString'top'By default new tags will appear above the search results. Changing to 'bottom' will revert this behaviour and will proritize the search results
maxNumberNumber of allowed selected options.
optionsLimitNumber1000Limits the options displayed in the dropdown to the first X options.
groupValuesStringName of the property containing the group values
groupLabelStringName of the property containing the group label
groupSelectBooleanfalseAllow to select all group values by selecting the group label
blockKeysArray[]Array of keyboard key aliases to block when selecting
internalSearchBooleantrueDecide whether to filter the results internally based on search query. Useful for async filtering, where we search through more complex data.
preserveSearchBooleanfalseIf set to true, will preserve the search query when opening/closing the component.
preselectFirstBooleanfalseSelects the first option if initial value is empty
preventAutofocusBooleanfalseDisabled the search input focusing when the multiselect opens
Multiselect.vue
nameString''Name attribute to match optional label element
selectLabelString'Press enter to select'String to show when pointing to an option
selectGroupLabelString'Press enter to select group'String to show when pointing to an option
selectedLabelString'Selected'String to show next to selected option
deselectLabelString'Press enter to remove'String to show when pointing to an already selected option
deselectGroupLabelString'Press enter to deselect group'String to show when pointing to an already selected group
showLabelsBooleantrueDecide whether to show labels on highlighted options
limitNumber99999Limit the display of selected options. The rest will be hidden within the limitText string.
limitTextFunction => Stringcount => `and ${count} more`Function that process the message shown when selected elements pass the defined limit.
loadingBooleanfalseShow/hide the loading spinner.
disabledBooleanfalseEnable/disable the multiselect.
maxHeightInteger300Sets max-height style value of the dropdown
openDirectionString''Fixed opening direction (instead of auto). Options are "above"/"top" or "below"/"bottom"
showNoOptionsBooleantrueShow the showNoOptions slot if list is empty.
showNoResultsBooleantrueShow the noResult slot if no results are found.
tabindexNumber0Specify the tabindex of the Multiselect component
pointerMixin.js
showPointerBooleantrueEnable/disable highlighting of the pointed value.
optionHeightNumber40The height of the option element. Required for proper scrolling.

Events

NameAttributesListen toDescription
Input(value, id)@inputEmitted after this.value changes
Select(selectedOption, id)@selectEmitted after selecting an option
Remove(removedOption, id)@removeEmitted after removing an option
SearchChange(searchQuery, id)@search-changeEmitted after the search query changes
Tag(searchQuery, id)@tagEmitted after user attempts to add a tag
Open(id)@openEmitted when the dropdown opens. Useful for detecting when touched.
Close(value, id)@closeEmitted when the dropdown closes

Slots

NameDescription
optionSlot for custom option template. See example.
Default: Shows option label
Slot-scope
  • option – option
  • search – current search value
maxElementsShows when the maximum options have been selected. Defaults to string:
Default: Maximum of <max> options selected. First remove a selected option to select another.
noResultShows when no elements match the search query. Defaults to string:
Default: No elements found. Consider changing the search query.
noOptionsShows when no elements in options empty. Defaults to string:
Default: List is empty.
beforeListShows before the list, when dropdown is open.
afterListShows after the list, when dropdown is open.
caretElement for opening and closing the dropdown.
Slot-scope
  • toggle: Function – toggles the dropdown.
singleLabelSlot for custom label template for single select
placeholderSlot for the placeholder (is not displayed when the dropdown is open and `searchable` is true)
limitSlot to display when the number of selected options is greater than `optionsLimit`.
clearSlot located before the tags
Slot-scope
  • search – the search value
tagSlot that is used for each selected option (tags)
Slot-scope
  • option – selected option
  • search – the search value
  • remove – method to remove the slot (pass the option)
selectionSlot that can be used to show all selected tags. The main different between theselectionslot and thetagslot is that thetagslot renders per tag, however this slot renders just once, leaving the display of each tag to you (if you wish to display each one)
Slot-scope
  • search – the search value
  • removeElement – method to remove the slot (pass the option)
  • values – Array of selected values
  • is-open – Boolean if the select is open

Created by Damian Dulisz @DamianDulisz