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
+297 -264
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,
default() {
return [];
}
},
```
## disabled
Disable the entire component.
```js
disabled: {
type: Boolean,
default: false
},
```
## clearable
Can the user clear the selected property?
```js
clearable: {
type: Boolean, type: Boolean,
default: true 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: Function,
default(newOption) {
if (typeof this.optionList[0] === 'object') {
newOption = {[this.label]: newOption}
}
this.$emit('option:created', newOption)
return newOption
}
},
```
## dir
Sets RTL support. Accepts `ltr`, `rtl`, `auto`.
```js
dir: {
type: String, type: String,
default: "label" default: "auto"
}, },
``` ```
## reduce
When working with objects, the reduce ## disabled
prop allows you to transform a given
object to only the information you Disable the entire component.
want passed to a v-model binding
or @input event.
```js ```js
reduce: { disabled: {
type: Function, type: Boolean,
default: option => option, default: false
}, },
``` ```
## getOptionLabel
Callback to generate the label text. If `{option}` ## filter
is an object, returns `option[this.label]` by default.
Label text is used for filtering comparison and Callback to filter results when search text
displaying. If you only need to adjust the is provided. Default implementation loops
display, you should use the `option` and each option, and returns the result of
`selected-option` slots. this.filterBy.
```js ```js
getOptionLabel: { filter: {
type: Function, type: Function,
default(option) { default(options, search) {
if (typeof option === 'object') { return options.filter(option => {
if (!option.hasOwnProperty(this.label)) { let label = this.getOptionLabel(option);
return console.warn( if (typeof label === "number") {
`[vue-select warn]: Label key "option.${this.label}" does not` + label = label.toString();
` exist in options object ${JSON.stringify(option)}.\n` +
'https://vue-select.org/api/props.html#getoptionlabel'
)
} }
return option[this.label] return this.filterBy(option, label, search);
} });
return option;
} }
}, },
``` ```
## 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
},
```