2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-04 06:32:23 +03:00

- add include-csv plugin

- adjust default codepen theme
- update github edit base
- doc content overhaul up to localization
This commit is contained in:
Jeff
2018-01-14 20:12:26 -08:00
parent b862761cbf
commit 7e859dca18
14 changed files with 108 additions and 287 deletions
+6 -223
View File
@@ -1,223 +1,6 @@
```js
/**
* Contains the currently selected value. Very similar to a
* `value` attribute on an <input>.
* @type {Object||String||null}
*/
value: {
default: null
}
/**
* 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: 'This is Foo', value: 'foo'}]). A
* custom label key can be set with the `label` prop.
* @type {Array}
*/
options: {
type: Array,
default() {
return []
},
}
/**
* Sets the max-height property on the dropdown list.
* @deprecated
* @type {String}
*/
maxHeight: {
type: String,
default: '400px'
},
/**
* Enable/disable filtering the options.
* @type {Boolean}
*/
searchable: {
type: Boolean,
default: true
},
/**
* Equivalent to the `multiple` attribute on a `<select>` input.
* @type {Object}
*/
multiple: {
type: Boolean,
default: false
},
/**
* Equivalent to the `placeholder` attribute on an `<input>`.
* @type {Object}
*/
placeholder: {
type: String,
default: ''
},
/**
* Sets a Vue transition property on the `.dropdown-menu`. vue-select
* does not include CSS for transitions, you'll need to add them yourself.
* @type {String}
*/
transition: {
type: String,
default: 'fade'
},
/**
* Enables/disables clearing the search text when an option is selected.
* @type {Boolean}
*/
clearSearchOnSelect: {
type: Boolean,
default: true
},
/**
* Close a dropdown when an option is chosen. Set to false to keep the dropdown
* open (useful when combined with multi-select, for example)
* @type {Boolean}
*/
closeOnSelect: {
type: Boolean,
default: true
},
/**
* Tells vue-select what key to use when generating option
* labels when each `option` is an object.
* @type {String}
*/
label: {
type: String,
default: 'label'
},
/**
* Callback to generate the label text. If {option}
* is an object, returns option[this.label] by default.
* @param {Object || String} option
* @return {String}
*/
getOptionLabel: {
type: Function,
default(option) {
if (typeof option === 'object') {
if (this.label && option[this.label]) {
return option[this.label]
}
}
return option;
}
},
/**
* An optional callback function that is called each time the selected
* value(s) change. When integrating with Vuex, use this callback to trigger
* an action, rather than using :value.sync to retreive the selected value.
* @type {Function}
* @default {null}
*/
onChange: {
type: Function,
default: function (val) {
this.$emit('input', val)
}
},
/**
* Enable/disable creating options from searchInput.
* @type {Boolean}
*/
taggable: {
type: Boolean,
default: false
},
/**
* When true, newly created tags will be added to
* the options list.
* @type {Boolean}
*/
pushTags: {
type: Boolean,
default: false
},
/**
* User defined function for adding Options
* @type {Function}
*/
createOption: {
type: Function,
default(newOption) {
if (typeof this.mutableOptions[0] === 'object') {
newOption = {[this.label]: newOption}
}
this.$emit('option:created', newOption)
return newOption
}
},
/**
* When false, updating the options will not reset the select value
* @type {Boolean}
*/
resetOnOptionsChange: {
type: Boolean,
default: false
},
/**
* Disable the dropdown entirely.
* @type {Boolean}
*/
noDrop: {
type: Boolean,
default: false
},
/**
* Sets the id of the input element.
* @type {String}
* @default {null}
*/
inputId: {
type: String
}
```
# AJAX {#ajax}
```js
/**
* Toggles the adding of a 'loading' class to the main
* .v-select wrapper. Useful to control UI state when
* results are being processed through AJAX.
*/
loading: {
type: Boolean,
default: false
},
/**
* Accept a callback function that will be
* run when the search text changes.
*
* loading() accepts a boolean value, and can
* be used to toggle a loading class from
* the onSearch callback.
*
* @param {search} String Current search text
* @param {loading} Function(bool) Toggle loading class
*/
onSearch: {
type: Function,
default: function(search, loading){}
}
```
{%
includeCsv
src="./props.csv",
linkSrc="false",
useHeader="true"
%}{% endincludeCsv %}
+25
View File
@@ -0,0 +1,25 @@
name,type,default
value,Object || String || null,
options,Array,
disabled,Boolean,
maxHeight,String,
searchable,Boolean,
multiple,Boolean,
placeholder,String,
transition,String,
clearSearchOnSelect,Boolean,
closeOnSelect,Boolean,
label,String,
getOptionLabel,Function,
filterFunction,Function,
filter,Function,
onChange,Function,
taggable,Boolean,
tabindex,Number,
pushTags,Boolean,
filterable,Boolean,
createOption,Function,
resetOnOptionsChange,Boolean,
noDrop,Boolean,
inputId,String,
dir,String,
1 name type default
2 value Object || String || null
3 options Array
4 disabled Boolean
5 maxHeight String
6 searchable Boolean
7 multiple Boolean
8 placeholder String
9 transition String
10 clearSearchOnSelect Boolean
11 closeOnSelect Boolean
12 label String
13 getOptionLabel Function
14 filterFunction Function
15 filter Function
16 onChange Function
17 taggable Boolean
18 tabindex Number
19 pushTags Boolean
20 filterable Boolean
21 createOption Function
22 resetOnOptionsChange Boolean
23 noDrop Boolean
24 inputId String
25 dir String