mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +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
+6
-223
@@ -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 %}
|
||||
@@ -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,
|
||||
|
@@ -0,0 +1,17 @@
|
||||
All of the text within the component has been wrapped within [slots](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) and can be replaced in your app.
|
||||
|
||||
#### Loading Spinner
|
||||
|
||||
```html
|
||||
<slot name="spinner">
|
||||
<div class="spinner" v-show="mutableLoading">Loading...</div>
|
||||
</slot>
|
||||
```
|
||||
|
||||
#### No Options Text
|
||||
|
||||
```html
|
||||
<slot name="no-options">Sorry, no matching options.</slot>
|
||||
```
|
||||
|
||||
For a full list of component slots, view the [slots API docs](Api/Slots.md).
|
||||
@@ -31,6 +31,8 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
|
||||
<v-select label="countryName" :options="countries"></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/aEjLPB?height=500)
|
||||
|
||||
### Null / Empty Options {#emptyOptions}
|
||||
|
||||
`vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.
|
||||
|
||||
@@ -6,6 +6,8 @@ The most common use case for `vue-select` is to have the chosen value synced wit
|
||||
<v-select v-model="selected"></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/Kqxbjw?height=250)
|
||||
|
||||
If you don't require the `value` to be synced, you can also pass the prop directly:
|
||||
|
||||
```html
|
||||
@@ -21,3 +23,5 @@ By default, `vue-select` supports choosing a single value. If you need multiple
|
||||
```html
|
||||
<v-select multiple v-model="selected"></v-select>
|
||||
```
|
||||
|
||||
[](codepen://sagalbot/opMGro?height=250)
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
## Vuex {#vuex}
|
||||
|
||||
[](codepen://sagalbot/aJQJyp?height=500&theme=0)
|
||||
[](codepen://sagalbot/aJQJyp?height=500)
|
||||
|
||||
## AJAX {#ajax}
|
||||
|
||||
|
||||
+18
-4
@@ -2,12 +2,26 @@
|
||||
- `vue ~2.0` use `vue-select ~2.0`
|
||||
- `vue ~1.0` use `vue-select ~1.0`
|
||||
|
||||
## NPM Based WorkFlows
|
||||
## Yarn / NPM
|
||||
Install with yarn:
|
||||
```bash
|
||||
$ npm install vue-select
|
||||
yarn add vue-select
|
||||
```
|
||||
or, using NPM:
|
||||
```
|
||||
npm install vue-select
|
||||
```
|
||||
|
||||
## Browser Globals
|
||||
Then, import and register the component:
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import vSelect from './components/Select.vue'
|
||||
|
||||
Vue.component('v-select', vSelect)
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
Include `vue` & `vue-select.js` - I recommend using [unpkg.com](https://unpkg.com/#/).
|
||||
|
||||
@@ -26,4 +40,4 @@ Then register the component in your javascript:
|
||||
Vue.component('v-select', VueSelect.VueSelect);
|
||||
```
|
||||
|
||||
From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output).
|
||||
[](codepen://sagalbot/dJjzeP)
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
# vue-select [](https://travis-ci.org/sagalbot/vue-select) [](https://lima.codeclimate.com/github/sagalbot/vue-select) [](https://codeclimate.com/github/sagalbot/vue-select) [](https://gemnasium.com/github.com/sagalbot/vue-select)  
|
||||
|
||||
> A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
|
||||
|
||||
#### Features
|
||||
- AJAX Support
|
||||
- Tagging
|
||||
- List Filtering/Searching
|
||||
- Supports Vuex
|
||||
- Select Single/Multiple Options
|
||||
- Tested with Bootstrap 3/4, Bulma, Foundation
|
||||
- +95% Test Coverage
|
||||
- ~33kb minified with CSS
|
||||
- Zero dependencies
|
||||
|
||||
## Documentation
|
||||
- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
|
||||
- **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)**
|
||||
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
|
||||
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
|
||||
|
||||
## Install
|
||||
|
||||
###### Vue Compatibility
|
||||
- `vue ~2.0` use `vue-select ~2.0`
|
||||
- `vue ~1.0` use `vue-select ~1.0`
|
||||
+14
-6
@@ -1,10 +1,6 @@
|
||||
# vue-select
|
||||
# vue-select [](https://travis-ci.org/sagalbot/vue-select) [](https://lima.codeclimate.com/github/sagalbot/vue-select) [](https://codeclimate.com/github/sagalbot/vue-select) [](https://gemnasium.com/github.com/sagalbot/vue-select)  
|
||||
|
||||
[](https://travis-ci.org/sagalbot/vue-select) [](https://lima.codeclimate.com/github/sagalbot/vue-select) [](https://codeclimate.com/github/sagalbot/vue-select) [](https://gemnasium.com/github.com/sagalbot/vue-select)  
|
||||
|
||||
> A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
|
||||
|
||||
Vue Select was designed to be the Select2 replacement for VueJS.
|
||||
> A Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
|
||||
|
||||
#### Features
|
||||
- AJAX Support
|
||||
@@ -16,3 +12,15 @@ Vue Select was designed to be the Select2 replacement for VueJS.
|
||||
- +95% Test Coverage
|
||||
- ~33kb minified with CSS
|
||||
- Zero dependencies
|
||||
|
||||
## Documentation
|
||||
- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
|
||||
- **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)**
|
||||
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
|
||||
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
|
||||
|
||||
## Install
|
||||
|
||||
###### Vue Compatibility
|
||||
- `vue ~2.0` use `vue-select ~2.0`
|
||||
- `vue ~1.0` use `vue-select ~1.0`
|
||||
+13
-16
@@ -1,25 +1,22 @@
|
||||
# Summary
|
||||
|
||||
- [Introduction](README.md)
|
||||
- Getting Started
|
||||
- [Installation](Install.md)
|
||||
- [npm/yarn](Install.md#npm)
|
||||
- [cdn](Install.md#cdn)
|
||||
- [Getting Started](Basics.md)
|
||||
- [Dropdown Options](Basics/Options.md)
|
||||
- [Option Labels](Basics/Options.md#labels)
|
||||
- [Null Options](Basics/Options.md#null)
|
||||
- [Selecting Values](Basics/Values.md#values)
|
||||
- [Tagging](Basics/Values.md#tagging)
|
||||
- [Multiple](Basics/Values.md#multiple)
|
||||
- [Dropdown Options](Basics/Options.md)
|
||||
- [Option Labels](Basics/Options.md#labels)
|
||||
- [Null Options](Basics/Options.md#null)
|
||||
- [Selecting Values](Basics/Values.md#values)
|
||||
- [Tagging](Basics/Values.md#tagging)
|
||||
- [Multiple](Basics/Values.md#multiple)
|
||||
- [Localization](Basics/Localization.md)
|
||||
|
||||
- Digging Deeper
|
||||
- [Templating](Advanced/Templating.md)
|
||||
- [Vuex](Basics.md#options)
|
||||
- [AJAX](Basics.md#options)
|
||||
- [Mixins](Basics.md#options)
|
||||
- [Validation](Basics.md#options)
|
||||
- [Examples](Examples.md)
|
||||
- [Templating](Advanced/Templating.md)
|
||||
- [Vuex](Basics.md#options)
|
||||
- [AJAX](Basics.md#options)
|
||||
- [Mixins](Basics.md#options)
|
||||
- [Validation](Basics.md#options)
|
||||
- [Examples](Examples.md)
|
||||
|
||||
- API
|
||||
- [Props](Api/Props.md)
|
||||
|
||||
@@ -45,12 +45,6 @@ li a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* remove gitbook link and divider */
|
||||
.book-summary ul.summary li a.gitbook-link,
|
||||
.book-summary ul.summary li:nth-last-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#book-search-input { background-color: #fafafa; }
|
||||
.book-summary { background-color: #fff; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user