@nextcloud/vueNcSelect
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| appendToBody | Append the dropdown element to the end of the body and size/position it dynamically.<br/> @see https://vue-select.org/api/props.html#appendtobody | boolean | - | true |
| calculatePosition | When appendToBody is true, this function is responsible forpositioning the drop down list. If a function is returned from calculatePosition, it willbe called when the drop down list is removed from the DOM. This allows for any garbage collection you may need to do.<br/> @see https://vue-select.org/api/props.html#calculateposition | func | - | null |
| closeOnSelect | Close the dropdown when selecting an option<br/>@see https://vue-select.org/api/props.html#closeonselect | boolean | - | true |
| components | Replace default vue-select components<br/>@see https://vue-select.org/api/props.html#components | object | - | { Deselect: { render: createElement => createElement(Close, { props: { size: 20, fillColor: 'var(--vs-controls-color)', }, style: { cursor: 'pointer', }, }), } } |
| disabled | Disable the component<br/>@see https://vue-select.org/api/props.html#disabled | boolean | - | false |
| filterBy | Callback to determine if the provided option should match the current search text. Used to determine if the option should be displayed. Defaults to the internal vue-select function documented at the link below Enabling userSelect will automatically set this to filter by thedisplayName and subtitle properties of the user option objectunless this prop is set explicitly<br/> @see https://vue-select.org/api/props.html#filterby | func | - | null |
| inputId | Input element id<br/>@see https://vue-select.org/api/props.html#inputid | string | - | null |
| label | Key of the displayed label for object options Defaults to 'label'Enabling userSelect will automatically set this to 'displayName'unless this prop is set explicitly<br/> @see https://vue-select.org/api/props.html#label | string | - | null |
| loading | Show the loading icon<br/>@see https://vue-select.org/api/props.html#loading | boolean | - | false |
| multiple | Allow selection of multiple options<br/>@see https://vue-select.org/api/props.html#multiple | boolean | - | false |
| noWrap | Disable automatic wrapping when selected options overflow the width | boolean | - | false |
| options | Array of options<br/>@see https://vue-select.org/api/props.html#options | Array<string | number | { [key: string | number]: any }> | - | [] |
| placeholder | Placeholder text<br/>@see https://vue-select.org/api/props.html#placeholder | string | - | '' |
| placement | When appendToBody is true, this sets the placement of the dropdown | string | bottom, top | 'bottom' |
| userSelect | Enable the user selector with avatars Objects must contain the data expected by the NcAvatar component | boolean | - | false |
| value | Currently selected value The v-model directive may be used for two-way data binding<br/>@see https://vue-select.org/api/props.html#value | string | number | { [key: string | number]: any } | Array<any> | - | null |
Any available prop<br/>@see https://vue-select.org/api/props.html | - |
Events
| Event name | Properties | Description |
|---|---|---|
| All events from https://vue-select.org/api/events.html |
Slots
| Name | Description | Bindings |
|---|---|---|
| name | Any combination of slots from https://vue-select.org/api/slots.html |
Description
General purpose multiselect component.
Basic examples
loading...
No wrap example
The noWrap prop is set to true and the max-width of the multiselect parent container is limited to 350px
loading...
User select examples
loading...