Skip to content

Commit 79a586c

Browse files
sagalbotsagalbot
committed
merge vue2 into master 🚀🚀🚀🚀
2 parents bafc873 + 3aa7761 commit 79a586c

39 files changed

+1514
-1151
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ node_modules
33
npm-debug.log
44
.idea
55
test/unit/coverage
6-
.coveralls.yml
6+
.coveralls.yml
7+
.flowconfig

‎.travis.yml

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,5 @@ language: node_js
22
node_js:
33
- "5"
44
- "5.1"
5-
- "4"
6-
- "4.2"
7-
- "4.1"
8-
- "4.0"
95
after_success:
10-
- codeclimate-test-reporter < ./test/unit/coverage/lcov.info
6+
- codeclimate-test-reporter < ./test/unit/coverage/lcov.info

‎README.md

Lines changed: 19 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,36 @@
11
# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/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)
22

3-
> A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.
4-
5-
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).
6-
3+
> A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
74
85
#### Features
9-
10-
- **AJAX Support +v1.2.0**
11-
- Tagging Support **+v.1.1.0**
12-
- No JS Dependencies
6+
- AJAX Support
7+
- Tagging
138
- List Filtering/Searching
149
- Supports Vuex
1510
- Select Single/Multiple Options
1611
- Bootstrap Friendly Markup
1712
- +95% Test Coverage
1813

19-
#### Upcoming/In Progress
14+
## Documentation
15+
- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
16+
- **[Example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output)**
2017

21-
- ~~Tagging (adding options not present in list, see `taggable` branch)~~ **+v.1.1.0**
22-
- ~~Asyncronous Option Loading~~ **+v.1.2.0**
23-
- Rich Option Templating
18+
## Install & Basic Usage
2419

25-
## Live Examples & Docs
26-
- [Demo & Docs](http://sagalbot.github.io/vue-select/)
27-
- [Live Example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output)
20+
#### Vue Compatability
21+
- `vue-select ~2.0` is compatible with `vue ~2.0`
22+
- `vue-select ~1.0` is compatible with `vue ~1.0`
2823

29-
## Install / Usage
24+
#### NPM
3025

31-
#### NPM Based WorkFlows
32-
``` bash
26+
```bash
3327
$ npm install vue-select
3428
```
3529

3630
```html
3731
<template>
38-
<div id="myApp">
39-
<v-select :value.sync="selected" :options="options"></v-select>
32+
<div>
33+
<v-select v-model="select" :options="options"></v-select>
4034
</div>
4135
</template>
4236

@@ -54,17 +48,15 @@ export default {
5448
</script>
5549
```
5650

57-
#### Browser Globals
58-
59-
`v1.3.0+` no longer requires any toolchain to use the component:
51+
#### CDN/Browser Globals
6052

61-
Just include `vue` & `vue-select.js` - I recommend using [npmcdn](https://npmcdn.com/#/).
53+
Just include `vue` & `vue-select.js` - I recommend using [unpkg](https://unpkg.com/#/).
6254

6355
```html
6456
<!-- use the latest release -->
65-
<script src="https://npmcdn.com/vue-select@latest"></script>
57+
<script src="https://unpkg.com/vue-select@latest"></script>
6658
<!-- or point to a specific release -->
67-
<script src="https://npmcdn.com/vue-select@1.30"></script>
59+
<script src="https://unpkg.com/vue-select@1.3.3"></script>
6860
```
6961
Then register the component in your javascript:
7062

@@ -74,156 +66,4 @@ Vue.component('v-select', VueSelect.VueSelect);
7466

7567
From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output).
7668

77-
## Parameters
78-
```javascript
79-
/**
80-
* Contains the currently selected value. Very similar to a
81-
* `value` attribute on an <input>. In most cases, you'll want
82-
* to set this as a two-way binding, using :value.sync. However,
83-
* this will not work with Vuex, in which case you'll need to use
84-
* the onChange callback property.
85-
* @type {Object||String||null}
86-
*/
87-
value: {
88-
default: null
89-
},
90-
91-
/**
92-
* An array of strings or objects to be used as dropdown choices.
93-
* If you are using an array of objects, vue-select will look for
94-
* a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
95-
* custom label key can be set with the `label` prop.
96-
* @type {Object}
97-
*/
98-
options: {
99-
type: Array,
100-
default() { return [] },
101-
},
102-
103-
/**
104-
* Sets the max-height property on the dropdown list.
105-
* @deprecated
106-
* @type {String}
107-
*/
108-
maxHeight: {
109-
type: String,
110-
default: '400px'
111-
},
112-
113-
/**
114-
* Enable/disable filtering the options.
115-
* @type {Boolean}
116-
*/
117-
searchable: {
118-
type: Boolean,
119-
default: true
120-
},
121-
122-
/**
123-
* Equivalent to the `multiple` attribute on a `<select>` input.
124-
* @type {Object}
125-
*/
126-
multiple: {
127-
type: Boolean,
128-
default: false
129-
},
130-
131-
/**
132-
* Equivalent to the `placeholder` attribute on an `<input>`.
133-
* @type {Object}
134-
*/
135-
placeholder: {
136-
type: String,
137-
default: ''
138-
},
139-
140-
/**
141-
* Sets a Vue transition property on the `.dropdown-menu`. vue-select
142-
* does not include CSS for transitions, you'll need to add them yourself.
143-
* @type {String}
144-
*/
145-
transition: {
146-
type: String,
147-
default: 'expand'
148-
},
149-
150-
/**
151-
* Enables/disables clearing the search text when an option is selected.
152-
* @type {Boolean}
153-
*/
154-
clearSearchOnSelect: {
155-
type: Boolean,
156-
default: true
157-
},
158-
159-
/**
160-
* Tells vue-select what key to use when generating option
161-
* labels when each `option` is an object.
162-
* @type {String}
163-
*/
164-
label: {
165-
type: String,
166-
default: 'label'
167-
},
168-
169-
/**
170-
* An optional callback function that is called each time the selected
171-
* value(s) change. When integrating with Vuex, use this callback to trigger
172-
* an action, rather than using :value.sync to retreive the selected value.
173-
* @type {Function}
174-
* @default {null}
175-
*/
176-
onChange: Function,
177-
178-
/**
179-
* Enable/disable creating options from searchInput.
180-
* @type {Boolean}
181-
*/
182-
taggable: {
183-
type: Boolean,
184-
default: false
185-
},
186-
187-
/**
188-
* When true, newly created tags will be added to
189-
* the options list.
190-
* @type {Boolean}
191-
*/
192-
pushTags: {
193-
type: Boolean,
194-
default: false
195-
},
196-
197-
/**
198-
* User defined function for adding Options
199-
* @type {Function}
200-
*/
201-
createOption: {
202-
type: Function,
203-
default: function (newOption) {
204-
if (typeof this.options[0] === 'object') {
205-
return {[this.label]: newOption}
206-
}
207-
return newOption
208-
}
209-
}
210-
```
211-
212-
213-
## Build Setup for Contributing
214-
215-
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.
216-
217-
``` bash
218-
# install dependencies
219-
npm install
220-
221-
# serve with hot reload at localhost:8080
222-
npm run dev
223-
224-
# run unit tests
225-
npm test
226-
227-
# run unit tests on save
228-
npm run test-watch
229-
```
69+
### For more information, please visit the [vue-select documentation.](https://sagalbot.github.io/vue-select)

‎build/webpack.base.conf.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
55

66
module.exports = {
77
entry: {
8-
app: './src/dev.js'
8+
app: process.argv.indexOf('--docs') > 0 ? './docs/docs.js' : './src/dev.js',
99
},
1010
output: {
1111
path: config.build.assetsRoot,
@@ -19,7 +19,9 @@ module.exports = {
1919
'src': path.resolve(__dirname, '../src'),
2020
'assets': path.resolve(__dirname, '../docs/assets'),
2121
'mixins': path.resolve(__dirname, '../src/mixins'),
22-
'components': path.resolve(__dirname, '../docs/components')
22+
'components': path.resolve(__dirname, '../src/components'),
23+
'docs': path.resolve(__dirname, '../docs'),
24+
'vue$': 'vue/dist/vue.common.js',
2325
}
2426
},
2527
resolveLoader: {
@@ -29,21 +31,21 @@ module.exports = {
2931
loaders: [
3032
{
3133
test: /\.vue$/,
32-
loader: 'vue'
34+
loader: 'vue-loader'
3335
},
3436
{
3537
test: /\.js$/,
36-
loader: 'babel',
38+
loader: 'babel-loader',
3739
include: projectRoot,
3840
exclude: /node_modules/
3941
},
4042
{
4143
test: /\.json$/,
42-
loader: 'json'
44+
loader: 'json-loader'
4345
},
4446
{
4547
test: /\.html$/,
46-
loader: 'vue-html'
48+
loader: 'vue-html-loader'
4749
},
4850
{
4951
test: /\.(png|jpe?g|gif)(\?.*)?$/,

‎build/webpack.dev.conf.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
1212

1313
module.exports = merge(baseWebpackConfig, {
1414
module: {
15-
loaders: utils.styleLoaders()
15+
loaders: utils.styleLoaders().concat({ test: /\.md$/, loader: "html!markdown" })
1616
},
1717
// eval-source-map is faster for development
1818
devtool: '#eval-source-map',
@@ -27,8 +27,13 @@ module.exports = merge(baseWebpackConfig, {
2727
// https://github.com/ampedandwired/html-webpack-plugin
2828
new HtmlWebpackPlugin({
2929
filename: 'index.html',
30-
template: 'index.html',
30+
template: process.argv.indexOf('--docs') > 0 ? './docs/docs.html' : 'dev.html',
3131
inject: true
3232
})
33-
]
33+
],
34+
markdownLoader: {
35+
highlight: function (code) {
36+
return require('highlight.js').highlightAuto(code).value;
37+
}
38+
}
3439
})

‎dev.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Vue Select Dev</title>
7+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
8+
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> -->
9+
<style>
10+
html,
11+
body,
12+
#app {
13+
height: 100vh;
14+
}
15+
16+
#app {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
.v-select {
24+
width: 25em;
25+
margin: 1em;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id="app">
32+
<v-select placeholder="multiple" multiple :options="options"></v-select>
33+
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
34+
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
35+
</div>
36+
</body>
37+
38+
</html>

‎dist/vue-select.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-select.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)