mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-26 04:34:04 +03:00
Code Activity

fixes:

Browse Source 
- change currentSelection to mutableValue
- change currentOptions to mutableOptions
- change showLoading to mutableLoading
- add default onChange function that emits an input event
	- allows the use of v-model syntax on the component
- since spies on props throw warnings because they are now immutable, refactor tests so spies aren't required

todo:
- update docs
- 1 failing test from inject-loader issue
This commit is contained in:
Jeff Sagal
2016-12-20 10:53:49 -08:00
parent 4a7614e368
commit f5e3e25dc0
7 changed files with 199 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -3,4 +3,5 @@ node_modules
npm-debug.log
.idea
test/unit/coverage
.coveralls.yml
.coveralls.yml
.flowconfig
build/webpack.base.conf.js
+2 -2
View File
@@ -19,8 +19,8 @@ module.exports = {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../docs/assets'),
'mixins': path.resolve(__dirname, '../src/mixins'),
'components': path.resolve(__dirname, '../docs/components'),
'vue$': 'vue/dist/vue.js'
'components': path.resolve(__dirname, '../src/components'),
'vue$': 'vue/dist/vue.common.js',
}
},
resolveLoader: {
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "vue-select",
"version": "1.3.3",
"version": "2.0.0-alpha",
"description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
"author": "Jeff Sagal <sagalbot@gmail.com>",
"private": false,
@@ -62,7 +62,7 @@
"vue": "^2.0.3",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^9.6.0",
"vue-loader": "^9.9.5",
"vue-resource": "^1.0.3",
"vue-style-loader": "^1.0.0",
"vuex": "^0.6.3",
src/components/Select.vue
+96 -57
View File
@@ -202,7 +202,7 @@
<i ref="openIndicator" role="presentation" class="open-indicator"></i>
<slot name="spinner">
<div class="spinner" v-show="showLoading">Loading...</div>
<div class="spinner" v-show="mutableLoading">Loading...</div>
</slot>
</div>
@@ -237,7 +237,7 @@
/**
* 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
* using 'change' event using v-on
* @type {Object||String||null}
*/
value: {
@@ -349,8 +349,12 @@
* @type {Function}
* @default {null}
*/
onChange: Function,
onChange: {
type: Function,
default: function(val) {
this.$emit('input', val)
}
},
/**
* Enable/disable creating options from searchInput.
@@ -378,7 +382,7 @@
createOption: {
type: Function,
default: function (newOption) {
if (typeof this.currentOptions[0] === 'object') {
if (typeof this.mutableOptions[0] === 'object') {
return {[this.label]: newOption}
}
return newOption
@@ -399,45 +403,80 @@
return {
search: '',
open: false,
currentSelection: null,
currentOptions: [],
showLoading: false
mutableValue: null,
mutableOptions: [],
mutableLoading: false
}
},
watch: {
value(val, old) {
this.currentSelection = val
/**
* When the value prop changes, update
* the internal mutableValue.
* @param {mixed} val
* @return {void}
*/
value(val) {
this.mutableValue = val
},
currentSelection(val, old) {
/**
* Maybe run the onChange callback.
* @param {string|object} val
* @param {string|object} old
* @return {void}
*/
mutableValue(val, old) {
if (this.multiple) {
this.onChange ? this.onChange(val) : null
this.$emit('change', val)
} else {
if(val !== old) {
this.onChange? this.onChange(val) : null
this.$emit('change', val)
}
this.onChange && val !== old ? this.onChange(val) : null
}
},
/**
* When options change, update
* the internal mutableOptions.
* @param {array} val
* @return {void}
*/
options(val) {
this.currentOptions = val
this.mutableOptions = val
},
currentOptions() {
/**
* Maybe reset the mutableValue
* when mutableOptions change.
* @return {[type]} [description]
*/
mutableOptions() {
if (!this.taggable && this.resetOnOptionsChange) {
this.currentSelection = this.multiple ? [] : null
this.mutableValue = this.multiple ? [] : null
}
},
multiple(val) {
this.currentSelection = val ? [] : null
/**
* Always reset the mutableValue when
* the multiple prop changes.
* @param {Boolean} val
* @return {void}
*/
multiple(val) {
this.mutableValue = val ? [] : null
}
},
created() {
this.mutableValue = this.value
this.mutableOptions = this.options.slice(0)
this.mutableLoading = this.loading
},
methods: {
/**
* Select a given option.
* @param {Object||String} option
* @param {Object|String} option
* @return {void}
*/
select(option) {
@@ -448,19 +487,18 @@
option = this.createOption(option)
if (this.pushTags) {
console.log("adding " + option +" to "+ this.currentOptions)
this.currentOptions.push(option)
this.mutableOptions.push(option)
}
}
if (this.multiple) {
if (!this.currentSelection) {
this.currentSelection = [option]
if (!this.mutableValue) {
this.mutableValue = [option]
} else {
this.currentSelection.push(option)
this.mutableValue.push(option)
}
} else {
this.currentSelection = option
this.mutableValue = option
}
}
@@ -469,27 +507,27 @@
/**
* De-select a given option.
* @param {Object||String} option
* @param {Object|String} option
* @return {void}
*/
deselect(option) {
if (this.multiple) {
let ref = -1
this.currentSelection.forEach((val) => {
this.mutableValue.forEach((val) => {
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
ref = val
}
})
var index = this.currentSelection.indexOf(ref)
this.currentSelection.splice(index, 1)
var index = this.mutableValue.indexOf(ref)
this.mutableValue.splice(index, 1)
} else {
this.currentSelection = null
this.mutableValue = null
}
},
/**
* Called from this.select after each selection.
* @param {Object||String} option
* @param {Object|String} option
* @return {void}
*/
onAfterSelect(option) {
@@ -521,13 +559,13 @@
/**
* Check if the given option is currently selected.
* @param {Object||String} option
* @return {Boolean} True when selected || False otherwise
* @param {Object|String} option
* @return {Boolean} True when selected | False otherwise
*/
isOptionSelected(option) {
if (this.multiple && this.currentSelection) {
if (this.multiple && this.mutableValue) {
let selected = false
this.currentSelection.forEach(opt => {
this.mutableValue.forEach(opt => {
if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
selected = true
} else if (opt === option) {
@@ -537,7 +575,7 @@
return selected
}
return this.currentSelection === option
return this.mutableValue === option
},
/**
@@ -559,14 +597,14 @@
* @return {this.value}
*/
maybeDeleteValue() {
if (!this.$refs.search.value.length && this.currentSelection) {
return this.multiple ? this.currentSelection.pop() : this.currentSelection = null
if (!this.$refs.search.value.length && this.mutableValue) {
return this.multiple ? this.mutableValue.pop() : this.mutableValue = null
}
},
/**
* Determine if an option exists
* within this.currentOptions array.
* within this.mutableOptions array.
*
* @param {Object || String} option
* @return {boolean}
@@ -574,7 +612,7 @@
optionExists(option) {
let exists = false
this.currentOptions.forEach(opt => {
this.mutableOptions.forEach(opt => {
if (typeof opt === 'object' && opt[this.label] === option) {
exists = true
} else if (opt === option) {
@@ -596,7 +634,7 @@
return {
open: this.open,
searchable: this.searchable,
loading: this.showLoading
loading: this.mutableLoading
}
},
@@ -620,7 +658,13 @@
* @return {array}
*/
filteredOptions() {
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.currentOptions, this.search):this.currentOptions
let options = this.mutableOptions.filter((option) => {
if( typeof option === 'object' ) {
return option[this.label].indexOf(this.search) > -1
}
return option.indexOf(this.search) > -1
})
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
options.unshift(this.search)
}
@@ -632,11 +676,11 @@
* @return {Boolean}
*/
isValueEmpty() {
if (this.currentSelection) {
if (typeof this.currentSelection === 'object') {
return !Object.keys(this.currentSelection).length
if (this.mutableValue) {
if (typeof this.mutableValue === 'object') {
return !Object.keys(this.mutableValue).length
}
return !this.currentSelection.length
return !this.mutableValue.length
}
return true;
@@ -648,19 +692,14 @@
*/
valueAsArray() {
if (this.multiple) {
return this.currentSelection
} else if (this.currentSelection) {
return [this.currentSelection]
return this.mutableValue
} else if (this.mutableValue) {
return [this.mutableValue]
}
return []
}
},
created: function() {
this.currentSelection = this.value
this.currentOptions = this.options.slice(0)
this.showLoading = this.loading
}
}
</script>
src/dev.js
+8 -2
View File
@@ -1,5 +1,6 @@
import Vue from 'vue'
import vSelect from '../src/components/Select.vue'
import vSelect from './components/Select.vue'
import countries from '../old_docs/data/advanced.js'
Vue.component('v-select', vSelect)
@@ -7,5 +8,10 @@ Vue.config.devtools = true
/* eslint-disable no-new */
new Vue({
el: 'body'
el: '#app',
data: {
placeholder: "placeholder",
value: null,
options: countries
}
})
src/mixins/ajax.js
+1 -1
View File
@@ -64,4 +64,4 @@ module.exports = {
return this.showLoading = toggle
}
}
}
}
test/unit/specs/Select.spec.js
+88 -78
View File
@@ -64,11 +64,11 @@ describe('Select.vue', () => {
template: '<div><v-select :options="options" :value="value"></v-select></div>',
components: {vSelect},
data: {
value: ['one'],
value: 'one',
options: ['one', 'two', 'three']
}
}).$mount()
expect(vm.$children[0].currentSelection).toEqual(vm.value)
expect(vm.$children[0].mutableValue).toEqual(vm.value)
})
it('can accept an array of objects and pre-selected value (single)', () => {
@@ -80,7 +80,7 @@ describe('Select.vue', () => {
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
}
}).$mount()
expect(vm.$children[0].currentSelection).toEqual(vm.value)
expect(vm.$children[0].mutableValue).toEqual(vm.value)
})
it('can accept an array of objects and pre-selected values (multiple)', () => {
@@ -92,7 +92,7 @@ describe('Select.vue', () => {
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
}
}).$mount()
expect(vm.$children[0].currentSelection).toEqual(vm.value)
expect(vm.$children[0].mutableValue).toEqual(vm.value)
})
it('can deselect a pre-selected object', () => {
@@ -104,7 +104,7 @@ describe('Select.vue', () => {
}
}).$mount()
vm.$children[0].select({label: 'This is Foo', value: 'foo'})
expect(vm.$children[0].currentSelection.length).toEqual(1)
expect(vm.$children[0].mutableValue.length).toEqual(1)
})
it('can deselect a pre-selected string', () => {
@@ -116,7 +116,7 @@ describe('Select.vue', () => {
}
}).$mount()
vm.$children[0].select('foo')
expect(vm.$children[0].currentSelection.length).toEqual(1)
expect(vm.$children[0].mutableValue.length).toEqual(1)
})
it('can determine if the value prop is empty', () => {
@@ -164,10 +164,10 @@ describe('Select.vue', () => {
vm.multiple = false
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual(null)
expect(vm.$children[0].mutableValue).toEqual(null)
vm.multiple = true
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual([])
expect(vm.$children[0].mutableValue).toEqual([])
done()
})
})
@@ -175,20 +175,20 @@ describe('Select.vue', () => {
it('can retain values present in a new array of options', () => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: ['one'],
options: ['one', 'two', 'three']
}
}).$mount()
vm.$children[0].options = ['one', 'five', 'six']
expect(vm.$children[0].currentSelection).toEqual(['one'])
vm.options = ['one', 'five', 'six']
expect(vm.$children[0].mutableValue).toEqual(['one'])
})
it('can determine if an object is already selected', () => {
const vm = new Vue({
template: '<div><v-select :options="options" multiple :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: [{label: 'one'}],
@@ -199,54 +199,57 @@ describe('Select.vue', () => {
expect(vm.$children[0].isOptionSelected({label: 'one'})).toEqual(true)
})
it('can use v-model syntax for a two way binding to a parent component', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: 'foo',
options: ['foo','bar','baz']
}
}).$mount()
expect(vm.$children[0].value).toEqual('foo')
expect(vm.$children[0].mutableValue).toEqual('foo')
vm.$children[0].mutableValue = 'bar'
Vue.nextTick(() => {
expect(vm.value).toEqual('bar')
done()
})
})
describe('change Event', () => {
it('can run a callback when the selection changes', (done) => {
it('will trigger the input event when the selection changes', (done) => {
const vm = new Vue({
template: `<div><v-select :value="['foo']" :options="['foo','bar','baz']" v-on:change="cb"></v-select></div>`,
components: {vSelect},
methods: {
cb(val) {
console.log("Value Changed to "+val)
}
template: `<div><v-select ref="select" :value="['foo']" :options="['foo','bar','baz']" v-on:input="foo = arguments[0]"></v-select></div>`,
data: {
foo: ''
}
}).$mount()
spyOn(vm, 'cb')
vm.$children[0].select('bar')
vm.$refs.select.select('bar')
Vue.nextTick(() => {
expect(vm.cb).toHaveBeenCalledWith('bar')
vm.$children[0].select('baz')
Vue.nextTick(() => {
expect(vm.cb).toHaveBeenCalledWith('baz')
done()
})
expect(vm.foo).toEqual('bar')
done()
})
})
it('should run change when multiple is true and the value changes', (done) => {
const vm = new Vue({
template: `<div><v-select ref="select" :value="['foo']" :options="['foo','bar','baz']" multiple v-on:change="cb"></v-select></div>`,
methods: {
cb(val) {
}
template: `<div><v-select ref="select" :value="['foo']" :options="['foo','bar','baz']" multiple v-on:input="foo = arguments[0]"></v-select></div>`,
data: {
foo: ''
}
}).$mount()
spyOn(vm, 'cb')
vm.$children[0].select('bar')
vm.$refs.select.select('bar')
Vue.nextTick(() => {
expect(vm.cb).toHaveBeenCalledWith(['foo','bar'])
vm.$children[0].select('baz')
Vue.nextTick(() => {
expect(vm.cb).toHaveBeenCalledWith(['foo','bar','baz'])
done()
})
expect(vm.foo).toEqual(['foo','bar'])
done()
})
})
@@ -487,12 +490,14 @@ describe('Select.vue', () => {
return {top: 0, bottom: 1}
}
})
let mock = Mock({
'../mixins/pointerScroll': {methods}
})
const vm = new Vue({
template: '<div><v-select :options="[\'one\', \'two\', \'three\']"></v-select></div>',
template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`,
components: {
'v-select': Mock({
'../mixins/pointerScroll': {methods}
})
'v-select': mock
},
}).$mount()
@@ -525,7 +530,7 @@ describe('Select.vue', () => {
describe('Removing values', () => {
it('can remove the given tag when its close icon is clicked', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select :options="options" v-model="value" :multiple="true"></v-select></div>',
components: {vSelect},
data: {
value: ['one'],
@@ -534,7 +539,7 @@ describe('Select.vue', () => {
}).$mount()
vm.$children[0].$refs.toggle.querySelector('.close').click()
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual([])
expect(vm.$children[0].mutableValue).toEqual([])
done()
})
})
@@ -542,7 +547,7 @@ describe('Select.vue', () => {
it('should remove the last item in the value array on delete keypress when multiple is true', () => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select :options="options" v-model="value" :multiple="true"></v-select></div>',
components: {vSelect},
data: {
value: ['one', 'two'],
@@ -551,13 +556,13 @@ describe('Select.vue', () => {
}).$mount()
vm.$children[0].maybeDeleteValue()
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual(['one'])
expect(vm.$children[0].mutableValue).toEqual(['one'])
})
})
it('should set value to null on delete keypress when multiple is false', () => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: 'one',
@@ -566,7 +571,7 @@ describe('Select.vue', () => {
}).$mount()
vm.$children[0].maybeDeleteValue()
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual(null)
expect(vm.$children[0].mutableValue).toEqual(null)
})
})
})
@@ -574,7 +579,7 @@ describe('Select.vue', () => {
describe('Labels', () => {
it('can generate labels using a custom label key', () => {
const vm = new Vue({
template: '<div><v-select label="name" :options="options" :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select label="name" :options="options" v-model="value" :multiple="true"></v-select></div>',
components: {vSelect},
data: {
value: [{name: 'Baz'}],
@@ -594,13 +599,11 @@ describe('Select.vue', () => {
}).$mount()
expect(vm.$children[0].searchPlaceholder).toEqual('foo')
vm.$children[0].currentSelection = {label: 'one'}
vm.$children[0].mutableValue = {label: 'one'}
Vue.nextTick(() => {
expect(vm.$children[0].searchPlaceholder).not.toBeDefined()
done()
})
// expect(vm.$children[0].searchPlaceholder()).toEqual('foo')
})
})
@@ -670,7 +673,7 @@ describe('Select.vue', () => {
searchSubmit(vm, 'three')
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual(['one', 'three'])
expect(vm.$children[0].mutableValue).toEqual(['one', 'three'])
done()
})
})
@@ -687,7 +690,7 @@ describe('Select.vue', () => {
searchSubmit(vm, 'two')
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual([{label: 'one'}, {label: 'two'}])
expect(vm.$children[0].mutableValue).toEqual([{label: 'one'}, {label: 'two'}])
done()
})
})
@@ -703,7 +706,7 @@ describe('Select.vue', () => {
}).$mount()
searchSubmit(vm, 'three')
expect(vm.$children[0].currentOptions).toEqual(['one', 'two', 'three'])
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
})
it('wont add a freshly created option/tag to the options list when pushTags is false', () => {
@@ -717,7 +720,7 @@ describe('Select.vue', () => {
}).$mount()
searchSubmit(vm, 'three')
expect(vm.$children[0].currentOptions).toEqual(['one', 'two'])
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
})
it('should select an existing option if the search string matches a string from options', (done) => {
@@ -735,7 +738,7 @@ describe('Select.vue', () => {
searchSubmit(vm)
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection[0]).toBe(two)
expect(vm.$children[0].mutableValue[0]).toBe(two)
done()
})
})
@@ -757,7 +760,7 @@ describe('Select.vue', () => {
// This needs to be wrapped in nextTick() twice so that filteredOptions can
// calculate after setting the search text, and move the typeAheadPointer index to 0.
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection.label).toBe(two.label)
expect(vm.$children[0].mutableValue.label).toBe(two.label)
done()
})
})
@@ -771,9 +774,9 @@ describe('Select.vue', () => {
options: [{label: 'one'}]
}
}).$mount()
vm.$children[0].options = [{label: 'two'}]
vm.$children[0].mutableOptions = [{label: 'two'}]
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual([{label: 'one'}])
expect(vm.$children[0].mutableValue).toEqual([{label: 'one'}])
done()
})
})
@@ -795,17 +798,20 @@ describe('Select.vue', () => {
it('should trigger the onSearch callback when the search text changes', (done) => {
const vm = new Vue({
template: '<div><v-select ref="select" :on-search="foo"></v-select></div>',
data: {
called: false
},
methods: {
foo() {
foo(val) {
this.called = val
}
}
}).$mount()
spyOn(vm.$refs.select, 'onSearch')
vm.$refs.select.search = 'foo'
Vue.nextTick(() => {
expect(vm.$refs.select.onSearch).toHaveBeenCalledWith('foo', vm.$refs.select.toggleLoading)
expect(vm.called).toEqual('foo')
done()
})
})
@@ -813,18 +819,22 @@ describe('Select.vue', () => {
it('should not trigger the onSearch callback if the search text is empty', (done) => {
const vm = new Vue({
template: '<div><v-select ref="select" search="foo" :on-search="foo"></v-select></div>',
data: { called: false },
methods: {
foo() {
foo(val) {
this.called = ! this.called
}
}
}).$mount()
spyOn(vm.$refs.select, 'onSearch')
vm.$refs.select.search = ''
vm.$refs.select.search = 'foo'
Vue.nextTick(() => {
expect(vm.$refs.select.onSearch).not.toHaveBeenCalled()
done()
expect(vm.called).toBe(true)
vm.$refs.select.search = ''
Vue.nextTick(() => {
expect(vm.called).toBe(true)
done()
})
})
})
@@ -874,9 +884,9 @@ describe('Select.vue', () => {
options: ['one', 'two', 'three']
}
}).$mount()
vm.$children[0].options = ['four', 'five', 'six']
vm.$children[0].mutableOptions = ['four', 'five', 'six']
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual('one')
expect(vm.$children[0].mutableValue).toEqual('one')
done()
})
})
@@ -890,9 +900,9 @@ describe('Select.vue', () => {
options: ['one', 'two', 'three']
}
}).$mount()
vm.$children[0].options = ['four', 'five', 'six']
vm.$children[0].mutableOptions = ['four', 'five', 'six']
Vue.nextTick(() => {
expect(vm.$children[0].currentSelection).toEqual(null)
expect(vm.$children[0].mutableValue).toEqual(null)
done()
})
})