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

- add include-csv plugin

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -5,5 +5,5 @@ npm-debug.log
test/unit/coverage test/unit/coverage
.coveralls.yml .coveralls.yml
.flowconfig .flowconfig
docs/_book docs/gitbook/_book
docs/node_modules docs/node_modules
book.json
+5 -2
View File
@@ -2,14 +2,17 @@
"title": "vue-select", "title": "vue-select",
"gitbook": ">3.0.0", "gitbook": ">3.0.0",
"root": "./docs/gitbook", "root": "./docs/gitbook",
"plugins": ["edit-link", "-fontsettings", "github", "codepen"], "plugins": ["edit-link", "-fontsettings", "codepen", "include-csv"],
"pluginsConfig": { "pluginsConfig": {
"edit-link": { "edit-link": {
"base": "https://github.com/sagalbot/vue-select/edit/master/docs", "base": "https://github.com/sagalbot/vue-select/edit/gitbook/docs/gitbook",
"label": "Edit This Page" "label": "Edit This Page"
}, },
"github": { "github": {
"url": "https://github.com/sagalbot/vue-select/" "url": "https://github.com/sagalbot/vue-select/"
},
"codepen": {
"theme": 32252
} }
}, },
"links": { "links": {
docs/gitbook/Api/Props.md
+6 -223
View File
@@ -1,223 +1,6 @@
```js {%
/** includeCsv
* Contains the currently selected value. Very similar to a src="./props.csv",
* `value` attribute on an <input>. linkSrc="false",
* @type {Object||String||null} useHeader="true"
*/ %}{% endincludeCsv %}
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){}
}
```
docs/gitbook/Api/props.csv
+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
docs/gitbook/Basics/Localization.md
+17
View File
@@ -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).
docs/gitbook/Basics/Options.md
+2
View File
@@ -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> <v-select label="countryName" :options="countries"></v-select>
``` ```
[](codepen://sagalbot/aEjLPB?height=500)
### Null / Empty Options {#emptyOptions} ### 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 `[]`. `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 `[]`.
docs/gitbook/Basics/Values.md
+4
View File
@@ -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> <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: If you don't require the `value` to be synced, you can also pass the prop directly:
```html ```html
@@ -21,3 +23,5 @@ By default, `vue-select` supports choosing a single value. If you need multiple
```html ```html
<v-select multiple v-model="selected"></v-select> <v-select multiple v-model="selected"></v-select>
``` ```
[](codepen://sagalbot/opMGro?height=250)
docs/gitbook/Examples.md
+1 -1
View File
@@ -10,7 +10,7 @@
## Vuex {#vuex} ## Vuex {#vuex}
[](codepen://sagalbot/aJQJyp?height=500&theme=0) [](codepen://sagalbot/aJQJyp?height=500)
## AJAX {#ajax} ## AJAX {#ajax}
docs/gitbook/Install.md
+18 -4
View File
@@ -2,12 +2,26 @@
- `vue ~2.0` use `vue-select ~2.0` - `vue ~2.0` use `vue-select ~2.0`
- `vue ~1.0` use `vue-select ~1.0` - `vue ~1.0` use `vue-select ~1.0`
## NPM Based WorkFlows ## Yarn / NPM
Install with yarn:
```bash ```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/#/). 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); 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)
docs/gitbook/Introduction.md
-26
View File
@@ -1,26 +0,0 @@
# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Score](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://lima.codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square)
> 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`
docs/gitbook/README.md
+14 -6
View File
@@ -1,10 +1,6 @@
# vue-select # vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Score](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://lima.codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square)
[![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Score](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://lima.codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) > A Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
> 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.
#### Features #### Features
- AJAX Support - AJAX Support
@@ -16,3 +12,15 @@ Vue Select was designed to be the Select2 replacement for VueJS.
- +95% Test Coverage - +95% Test Coverage
- ~33kb minified with CSS - ~33kb minified with CSS
- Zero dependencies - 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`
docs/gitbook/SUMMARY.md
+13 -16
View File
@@ -1,25 +1,22 @@
# Summary # Summary
- [Introduction](README.md) - Getting Started
- [Installation](Install.md) - [Installation](Install.md)
- [npm/yarn](Install.md#npm) - [Dropdown Options](Basics/Options.md)
- [cdn](Install.md#cdn) - [Option Labels](Basics/Options.md#labels)
- [Getting Started](Basics.md) - [Null Options](Basics/Options.md#null)
- [Dropdown Options](Basics/Options.md) - [Selecting Values](Basics/Values.md#values)
- [Option Labels](Basics/Options.md#labels) - [Tagging](Basics/Values.md#tagging)
- [Null Options](Basics/Options.md#null) - [Multiple](Basics/Values.md#multiple)
- [Selecting Values](Basics/Values.md#values)
- [Tagging](Basics/Values.md#tagging)
- [Multiple](Basics/Values.md#multiple)
- [Localization](Basics/Localization.md) - [Localization](Basics/Localization.md)
- Digging Deeper - Digging Deeper
- [Templating](Advanced/Templating.md) - [Templating](Advanced/Templating.md)
- [Vuex](Basics.md#options) - [Vuex](Basics.md#options)
- [AJAX](Basics.md#options) - [AJAX](Basics.md#options)
- [Mixins](Basics.md#options) - [Mixins](Basics.md#options)
- [Validation](Basics.md#options) - [Validation](Basics.md#options)
- [Examples](Examples.md) - [Examples](Examples.md)
- API - API
- [Props](Api/Props.md) - [Props](Api/Props.md)
docs/gitbook/styles/website.css
-6
View File
@@ -45,12 +45,6 @@ li a {
font-weight: 600; 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-search-input { background-color: #fafafa; }
.book-summary { background-color: #fff; } .book-summary { background-color: #fff; }
package.json
+2 -2
View File
@@ -9,8 +9,8 @@
"scripts": { "scripts": {
"start": "npm run dev", "start": "npm run dev",
"dev": "node build/dev-server.js", "dev": "node build/dev-server.js",
"dev:docs": "node build/dev-server.js --docs", "dev:homepage": "node build/dev-server.js --docs",
"docs": "gitbook serve docs/gitbook", "dev:docs": "gitbook serve docs/gitbook",
"build": "node build/build.js", "build": "node build/build.js",
"lint": "eslint --ext .js,.vue src test/unit/specs", "lint": "eslint --ext .js,.vue src test/unit/specs",
"test": "karma start test/unit/karma.conf.js --single-run", "test": "karma start test/unit/karma.conf.js --single-run",