mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
- bump version to 2.0
- add vue 2.x as a peer dependency - update readme for v2.0
This commit is contained in:
@@ -1,42 +1,36 @@
|
|||||||
# vue-select [](https://travis-ci.org/sagalbot/vue-select) [](https://codeclimate.com/github/sagalbot/vue-select) [](https://gemnasium.com/github.com/sagalbot/vue-select)  
|
# vue-select [](https://travis-ci.org/sagalbot/vue-select) [](https://codeclimate.com/github/sagalbot/vue-select) [](https://gemnasium.com/github.com/sagalbot/vue-select)  
|
||||||
|
|
||||||
> A native Vue.js 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.
|
||||||
|
|
||||||
Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no JavaScript dependencies other than Vue, and is designed to mimic [Select2](https://github.com/select2/select2).
|
|
||||||
|
|
||||||
|
|
||||||
#### Features
|
#### Features
|
||||||
|
- AJAX Support
|
||||||
- **AJAX Support +v1.2.0**
|
- Tagging
|
||||||
- Tagging Support **+v.1.1.0**
|
- No JS Dependenciesp
|
||||||
- No JS Dependencies
|
|
||||||
- List Filtering/Searching
|
- List Filtering/Searching
|
||||||
- Supports Vuex
|
- Supports Vuex
|
||||||
- Select Single/Multiple Options
|
- Select Single/Multiple Options
|
||||||
- Bootstrap Friendly Markup
|
- Bootstrap Friendly Markup
|
||||||
- +95% Test Coverage
|
- +95% Test Coverage
|
||||||
|
|
||||||
#### Upcoming/In Progress
|
## Documentation
|
||||||
|
|
||||||
- ~~Tagging (adding options not present in list, see `taggable` branch)~~ **+v.1.1.0**
|
|
||||||
- ~~Asyncronous Option Loading~~ **+v.1.2.0**
|
|
||||||
- Rich Option Templating
|
|
||||||
|
|
||||||
## Live Examples & Docs
|
|
||||||
- [Demo & Docs](http://sagalbot.github.io/vue-select/)
|
- [Demo & Docs](http://sagalbot.github.io/vue-select/)
|
||||||
- [Live Example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output)
|
- [Live Example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output)
|
||||||
|
|
||||||
## Install / Usage
|
## Install / Usage
|
||||||
|
|
||||||
#### NPM Based WorkFlows
|
**Vue Compatability**
|
||||||
|
Version `2.x` of vue-select is compatible with Vue `2.x`. If you are on Vue `1.x`, you will need to use `1.x` of vue-select.
|
||||||
|
|
||||||
|
#### NPM
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
$ npm install vue-select
|
$ npm install vue-select
|
||||||
```
|
```
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div id="myApp">
|
<div>
|
||||||
<v-select :value.sync="selected" :options="options"></v-select>
|
<v-select v-model="select" :options="options"></v-select>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -54,17 +48,15 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Browser Globals
|
#### Browser Globals `v1.3.0+`
|
||||||
|
|
||||||
`v1.3.0+` no longer requires any toolchain to use the component:
|
Just include `vue` & `vue-select.js` - I recommend using [unpkg](https://unpkg.com/#/).
|
||||||
|
|
||||||
Just include `vue` & `vue-select.js` - I recommend using [npmcdn](https://npmcdn.com/#/).
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- use the latest release -->
|
<!-- use the latest release -->
|
||||||
<script src="https://npmcdn.com/vue-select@latest"></script>
|
<script src="https://unpkg.com/vue-select@latest"></script>
|
||||||
<!-- or point to a specific release -->
|
<!-- or point to a specific release -->
|
||||||
<script src="https://npmcdn.com/vue-select@1.30"></script>
|
<script src="https://unpkg.com/vue-select@1.3.3"></script>
|
||||||
```
|
```
|
||||||
Then register the component in your javascript:
|
Then register the component in your javascript:
|
||||||
|
|
||||||
@@ -74,154 +66,4 @@ 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).
|
From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output).
|
||||||
|
|
||||||
## Parameters
|
**For more information, please visit the [documentation](https://sagalbot.github.io/vue-select)
|
||||||
```javascript
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
* @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 {Object}
|
|
||||||
*/
|
|
||||||
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: 'expand'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Enables/disables clearing the search text when an option is selected.
|
|
||||||
* @type {Boolean}
|
|
||||||
*/
|
|
||||||
clearSearchOnSelect: {
|
|
||||||
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'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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: Function,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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: function (newOption) {
|
|
||||||
if (typeof this.options[0] === 'object') {
|
|
||||||
return {[this.label]: newOption}
|
|
||||||
}
|
|
||||||
return newOption
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Build Setup for Contributing
|
|
||||||
|
|
||||||
If there's a feature you'd like to see or you find a bug, feel free to fork and submit a PR. If your adding functionality, add tests to go with it.
|
|
||||||
|
|
||||||
``` bash
|
|
||||||
# install dependencies
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# serve with hot reload at localhost:8080
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# run unit tests
|
|
||||||
npm test
|
|
||||||
|
|
||||||
# run unit tests on save
|
|
||||||
npm run test-watch
|
|
||||||
```
|
|
||||||
|
|||||||
+4
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-select",
|
"name": "vue-select",
|
||||||
"version": "2.0.0-alpha",
|
"version": "2.0.0",
|
||||||
"description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
|
"description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
|
||||||
"author": "Jeff Sagal <sagalbot@gmail.com>",
|
"author": "Jeff Sagal <sagalbot@gmail.com>",
|
||||||
"private": false,
|
"private": false,
|
||||||
@@ -24,6 +24,9 @@
|
|||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/sagalbot/vue-select.git"
|
"url": "https://github.com/sagalbot/vue-select.git"
|
||||||
},
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "~1.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-core": "^6.0.0",
|
"babel-core": "^6.0.0",
|
||||||
"babel-loader": "^6.0.0",
|
"babel-loader": "^6.0.0",
|
||||||
|
|||||||
Reference in New Issue
Block a user