mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

docs: sort props alphabetically (#1334)

Browse Source
This commit is contained in:
Sølve Tornøe
2020-12-18 22:55:30 +01:00
committed by GitHub
parent f11d8b781b
commit 423973badf
1 changed files with 313 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/api/props.md
+313 -280
View File
@@ -1,29 +1,3 @@
## autoscroll <Badge text="v3.10.0+" />
When true, the dropdown will automatically scroll to ensure
that the option highlighted is fully within the dropdown viewport
when navigating with keyboard arrows.
```js
autoscroll: {
type: Boolean,
default: true
}
```
## autocomplete
The value provided here will be bound to the [autocomplete
HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
on the search input. Defaults to `off`.
```js
autocomplete: {
type: String,
default: 'off'
},
```
## appendToBody <Badge text="v3.7.0+" /> ## appendToBody <Badge text="v3.7.0+" />
Append the dropdown element to the end of the body Append the dropdown element to the end of the body
@@ -39,133 +13,34 @@ appendToBody: {
}, },
``` ```
## value
Contains the currently selected value. Very similar to a ## autocomplete
`value` attribute on an `<input>`. You can listen for changes
using 'change' event using v-on. The value provided here will be bound to the [autocomplete
HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
on the search input. Defaults to `off`.
```js ```js
value: { autocomplete: {
default: null type: String,
default: 'off'
}, },
``` ```
## options
An array of strings or objects to be used as dropdown choices. ## autoscroll <Badge text="v3.10.0+" />
If you are using an array of objects, vue-select will look for
a `label` key (ex. `[{label: 'Canada', value: 'CA'}]`). A When true, the dropdown will automatically scroll to ensure
custom label key can be set with the `label` prop. that the option highlighted is fully within the dropdown viewport
when navigating with keyboard arrows.
```js ```js
options: { autoscroll: {
type: Array, type: Boolean,
default() { default: true
return []; }
}
},
``` ```
## disabled
Disable the entire component.
```js
disabled: {
type: Boolean,
default: false
},
```
## clearable
Can the user clear the selected property?
```js
clearable: {
type: Boolean,
default: true
},
```
## maxHeight
::: warning Deprecated in `v2.x` & Removed in `v3.0`
This prop was removed in `v3.0`. You can use the `$vs-dropdown-max-height`
SCSS variable to adjust this setting in `v3.x`.
:::
Sets the max-height property on the dropdown list.
```js
maxHeight: {
type: String,
default: "400px"
},
```
## searchable
Enable/disable filtering the options.
```js
searchable: {
type: Boolean,
default: true
},
```
## selectable <Badge text="v3.3.0+" />
The `selectable` prop determines if an option is selectable or not. If `selectable` returns false
for a given option, it will be displayed with a `vs__dropdown-option--disabled` class. The option
will be disabled and unable to be selected.
```js
selectable: {
type: Function,
/**
* @param {Object|String} option
* @return {boolean}
*/
default: option => true,
},
```
## multiple
Equivalent to the `multiple` attribute on a `<select>` input.
```js
multiple: {
type: Boolean,
default: false
},
```
## placeholder
Equivalent to the `placeholder` attribute on an `<input>`.
```js
placeholder: {
type: String,
default: ""
},
```
## transition
Sets a Vue transition property on the `.dropdown-menu`. vue-select
does not include CSS for transitions, you'll need to add them yourself.
```js
transition: {
type: String,
default: "fade"
},
```
## calculatePosition <Badge text="v3.7.0+" /> ## calculatePosition <Badge text="v3.7.0+" />
@@ -195,17 +70,19 @@ calculatePosition: {
} }
``` ```
## clearSearchOnSelect
Enables/disables clearing the search text when an option is selected. ## clearable
Can the user clear the selected property?
```js ```js
clearSearchOnSelect: { clearable: {
type: Boolean, type: Boolean,
default: true default: true
}, },
``` ```
## clearSearchOnBlur ## clearSearchOnBlur
Enables/disables clearing the search text when the search input is blurred. Enables/disables clearing the search text when the search input is blurred.
@@ -219,6 +96,19 @@ clearSearchOnBlur: {
}, },
``` ```
## clearSearchOnSelect
Enables/disables clearing the search text when an option is selected.
```js
clearSearchOnSelect: {
type: Boolean,
default: true
},
```
## closeOnSelect ## closeOnSelect
Close a dropdown when an option is chosen. Set to false to keep the dropdown Close a dropdown when an option is chosen. Set to false to keep the dropdown
@@ -231,62 +121,103 @@ closeOnSelect: {
}, },
``` ```
## label
Tells vue-select what key to use when generating option ## createOption
labels when each `option` is an object.
User defined function for adding Options
```js ```js
label: { createOption: {
type: String,
default: "label"
},
```
## reduce
When working with objects, the reduce
prop allows you to transform a given
object to only the information you
want passed to a v-model binding
or @input event.
```js
reduce: {
type: Function, type: Function,
default: option => option, default(newOption) {
}, if (typeof this.optionList[0] === 'object') {
``` newOption = {[this.label]: newOption}
## getOptionLabel
Callback to generate the label text. If `{option}`
is an object, returns `option[this.label]` by default.
Label text is used for filtering comparison and
displaying. If you only need to adjust the
display, you should use the `option` and
`selected-option` slots.
```js
getOptionLabel: {
type: Function,
default(option) {
if (typeof option === 'object') {
if (!option.hasOwnProperty(this.label)) {
return console.warn(
`[vue-select warn]: Label key "option.${this.label}" does not` +
` exist in options object ${JSON.stringify(option)}.\n` +
'https://vue-select.org/api/props.html#getoptionlabel'
)
}
return option[this.label]
} }
return option;
this.$emit('option:created', newOption)
return newOption
} }
}, },
``` ```
## dir
Sets RTL support. Accepts `ltr`, `rtl`, `auto`.
```js
dir: {
type: String,
default: "auto"
},
```
## disabled
Disable the entire component.
```js
disabled: {
type: Boolean,
default: false
},
```
## filter
Callback to filter results when search text
is provided. Default implementation loops
each option, and returns the result of
this.filterBy.
```js
filter: {
type: Function,
default(options, search) {
return options.filter(option => {
let label = this.getOptionLabel(option);
if (typeof label === "number") {
label = label.toString();
}
return this.filterBy(option, label, search);
});
}
},
```
## filterable
When true, existing options will be filtered
by the search text. Should not be used in conjunction
with taggable.
```js
filterable: {
type: Boolean,
default: true
},
```
## filterBy
Callback to determine if the provided option should
match the current search text. Used to determine
if the option should be displayed.
```js
filterBy: {
type: Function,
default(option, label, search) {
return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
}
},
```
## getOptionKey ## getOptionKey
Callback to get an option key. If `option` Callback to get an option key. If `option`
@@ -319,6 +250,102 @@ getOptionKey: {
}, },
``` ```
## getOptionLabel
Callback to generate the label text. If `{option}`
is an object, returns `option[this.label]` by default.
Label text is used for filtering comparison and
displaying. If you only need to adjust the
display, you should use the `option` and
`selected-option` slots.
```js
getOptionLabel: {
type: Function,
default(option) {
if (typeof option === 'object') {
if (!option.hasOwnProperty(this.label)) {
return console.warn(
`[vue-select warn]: Label key "option.${this.label}" does not` +
` exist in options object ${JSON.stringify(option)}.\n` +
'https://vue-select.org/api/props.html#getoptionlabel'
)
}
return option[this.label]
}
return option;
}
},
```
## inputId
Sets the id of the input element.
```js
inputId: {
type: String
},
```
## label
Tells vue-select what key to use when generating option
labels when each `option` is an object.
```js
label: {
type: String,
default: "label"
},
```
## maxHeight
::: warning Deprecated in `v2.x` & Removed in `v3.0`
This prop was removed in `v3.0`. You can use the `$vs-dropdown-max-height`
SCSS variable to adjust this setting in `v3.x`.
:::
Sets the max-height property on the dropdown list.
```js
maxHeight: {
type: String,
default: "400px"
},
```
## multiple
Equivalent to the `multiple` attribute on a `<select>` input.
```js
multiple: {
type: Boolean,
default: false
},
```
## noDrop
Disable the dropdown entirely.
```js
noDrop: {
type: Boolean,
default: false
},
```
## onTab ## onTab
Select the current value if `selectOnTab` is enabled Select the current value if `selectOnTab` is enabled
@@ -334,28 +361,36 @@ onTab: {
}, },
``` ```
## taggable
Enable/disable creating options from searchInput. ## options
An array of strings or objects to be used as dropdown choices.
If you are using an array of objects, vue-select will look for
a `label` key (ex. `[{label: 'Canada', value: 'CA'}]`). A
custom label key can be set with the `label` prop.
```js ```js
taggable: { options: {
type: Boolean, type: Array,
default: false default() {
return [];
}
}, },
``` ```
## tabindex
Set the tabindex for the input field. ## placeholder
Equivalent to the `placeholder` attribute on an `<input>`.
```js ```js
tabindex: { placeholder: {
type: Number, type: String,
default: null default: ""
}, },
``` ```
## pushTags ## pushTags
When true, newly created tags will be added to When true, newly created tags will be added to
@@ -368,73 +403,22 @@ pushTags: {
}, },
``` ```
## filterable
When true, existing options will be filtered ## reduce
by the search text. Should not be used in conjunction
with taggable. When working with objects, the reduce
prop allows you to transform a given
object to only the information you
want passed to a v-model binding
or @input event.
```js ```js
filterable: { reduce: {
type: Boolean,
default: true
},
```
## filterBy
Callback to determine if the provided option should
match the current search text. Used to determine
if the option should be displayed.
```js
filterBy: {
type: Function, type: Function,
default(option, label, search) { default: option => option,
return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
}
}, },
``` ```
## filter
Callback to filter results when search text
is provided. Default implementation loops
each option, and returns the result of
this.filterBy.
```js
filter: {
type: Function,
default(options, search) {
return options.filter(option => {
let label = this.getOptionLabel(option);
if (typeof label === "number") {
label = label.toString();
}
return this.filterBy(option, label, search);
});
}
},
```
## createOption
User defined function for adding Options
```js
createOption: {
type: Function,
default(newOption) {
if (typeof this.optionList[0] === 'object') {
newOption = {[this.label]: newOption}
}
this.$emit('option:created', newOption)
return newOption
}
},
```
## resetOnOptionsChange ## resetOnOptionsChange
@@ -457,37 +441,36 @@ resetOnOptionsChange: {
}, },
``` ```
## noDrop
Disable the dropdown entirely. ## searchable
Enable/disable filtering the options.
```js ```js
noDrop: { searchable: {
type: Boolean, type: Boolean,
default: false default: true
}, },
``` ```
## inputId
Sets the id of the input element. ## selectable <Badge text="v3.3.0+" />
The `selectable` prop determines if an option is selectable or not. If `selectable` returns false
for a given option, it will be displayed with a `vs__dropdown-option--disabled` class. The option
will be disabled and unable to be selected.
```js ```js
inputId: { selectable: {
type: String type: Function,
/**
* @param {Object|String} option
* @return {boolean}
*/
default: option => true,
}, },
``` ```
## dir
Sets RTL support. Accepts `ltr`, `rtl`, `auto`.
```js
dir: {
type: String,
default: "auto"
},
```
## selectOnTab ## selectOnTab
@@ -499,3 +482,53 @@ selectOnTab: {
default: false default: false
} }
``` ```
## tabindex
Set the tabindex for the input field.
```js
tabindex: {
type: Number,
default: null
},
```
## taggable
Enable/disable creating options from searchInput.
```js
taggable: {
type: Boolean,
default: false
},
```
## transition
Sets a Vue transition property on the `.dropdown-menu`. vue-select
does not include CSS for transitions, you'll need to add them yourself.
```js
transition: {
type: String,
default: "fade"
},
```
## value
Contains the currently selected value. Very similar to a
`value` attribute on an `<input>`. You can listen for changes
using 'change' event using v-on.
```js
value: {
default: null
},
```