@nextcloud/vueNcMultiselect
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| value | - | function() { return [] } | ||
| closeOnSelect | Close the Multiselect when selecting an item. Will be overwritten by !multiple if undefined. | boolean | - | undefined |
| multiple | Allow multiple select ? | boolean | - | false |
| limit | Limit the number of results | number | - | 99999 |
| label | key to use as label on object options | string | - | '' |
| trackBy | key to use as id on object options | string | - | '' |
| options | Array of available options: Objects, Strings or Integers. If array of objects, visible label will default to option.label. If labal prop is passed, label will equal option['label'] | array | - | |
| userSelect | Enable the big user selector w/ avatar Make sure your objects fit the requirements | boolean | - | false |
| loading | Overriding the default slot. Only showing a spiner. | boolean | - | false |
| autoLimit | Enable the automatic limit and width calculation Only works on multiple | boolean | - | true |
| tagWidth | If autoLimit, allow to specify the min-width of every selected option when calculating the number of options to show. This needs to be a positive integer. | number | - | 150 |
Events
| Event name | Properties | Description |
|---|---|---|
| change | ||
| update:value |
Slots
| Name | Description | Bindings |
|---|---|---|
| option | ||
| slot | ||
| noResult |
NcMultiselect
Use NcSelect instead
We're wrapping the awesome vue-multiselect library to add our own styling and default props/methods You can use all the properties from https://vue-multiselect.js.org that are not declared/overrided here.
Simple examples
loading...
Simple example with objects
You can either use the exact object or the track-by key to match against your options
loading...
Limit with automated tooltip
loading...
User layout
By specifying :user-select="true", you can benefit from a fully formatted layout. The singleLabel slot here is optional of course and here for demonstration purposes The NcListItemIcon title will be provided by the option key refering to the label prop. Example here: displayName
Note: Any extra binding from the object will be added as attribute (
$attrs) on the NcListItemIcon component used here
loading...