2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00

- better background color for 'active' dropdown option

- simplify conditional logic in select()
	- less nested conditionals
	- tagging logic moved to createOption method
	- add option:created event
	- pull up push tags logic to it's own method
- improve isOptionSelected so that functionality is exactly the same as v1
	- hitting enter on an already added tag will remove it from the value instead of doing nothing
This commit is contained in:
Jeff Sagal
2017-02-02 16:40:11 -08:00
parent 201e135964
commit cbeffafb17
2 changed files with 638 additions and 619 deletions
+31 -13
View File
@@ -119,8 +119,9 @@
.v-select .highlight a, .v-select .highlight a,
.v-select li:hover > a { .v-select li:hover > a {
background: #f0f0f0; background: #337ab7;
color: #333; background: rgba(51, 122, 183, .75);
color: #fff;
} }
.v-select .spinner { .v-select .spinner {
@@ -383,8 +384,9 @@
type: Function, type: Function,
default: function (newOption) { default: function (newOption) {
if (typeof this.mutableOptions[0] === 'object') { if (typeof this.mutableOptions[0] === 'object') {
return {[this.label]: newOption} newOption = {[this.label]: newOption}
} }
this.$emit('option:created', newOption)
return newOption return newOption
} }
}, },
@@ -471,10 +473,16 @@
} }
}, },
/**
* Clone props into mutable values,
* attach any event listeners.
*/
created() { created() {
this.mutableValue = this.value this.mutableValue = this.value
this.mutableOptions = this.options.slice(0) this.mutableOptions = this.options.slice(0)
this.mutableLoading = this.loading this.mutableLoading = this.loading
this.$on('option:created', this.maybePushTag)
}, },
methods: { methods: {
@@ -486,22 +494,16 @@
*/ */
select(option) { select(option) {
if (this.isOptionSelected(option)) { if (this.isOptionSelected(option)) {
this.taggable ? null : this.deselect(option) this.deselect(option)
} else { } else {
if (this.taggable && !this.optionExists(option)) { if (this.taggable && !this.optionExists(option)) {
option = this.createOption(option) option = this.createOption(option)
if (this.pushTags) {
this.mutableOptions.push(option)
}
} }
if (this.multiple) { if (this.multiple && !this.mutableValue) {
if (!this.mutableValue) {
this.mutableValue = [option] this.mutableValue = [option]
} else { } else if (this.multiple) {
this.mutableValue.push(option) this.mutableValue.push(option)
}
} else { } else {
this.mutableValue = option this.mutableValue = option
} }
@@ -573,7 +575,10 @@
this.mutableValue.forEach(opt => { this.mutableValue.forEach(opt => {
if (typeof opt === 'object' && opt[this.label] === option[this.label]) { if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
selected = true selected = true
} else if (opt === option) { } else if (typeof opt === 'object' && opt[this.label] === option) {
selected = true
}
else if (opt === option) {
selected = true selected = true
} }
}) })
@@ -626,6 +631,19 @@
}) })
return exists return exists
},
/**
* If push-tags is true, push the
* given option to mutableOptions.
*
* @param {Object || String} option
* @return {void}
*/
maybePushTag(option) {
if (this.pushTags) {
this.mutableOptions.push(option)
}
} }
}, },
+3 -2
View File
@@ -813,6 +813,7 @@ describe('Select.vue', () => {
}) })
}) })
}) })
it('should not reset the selected value when the options property changes', (done) => { it('should not reset the selected value when the options property changes', (done) => {
const vm = new Vue({ const vm = new Vue({
template: '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>', template: '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
@@ -841,7 +842,7 @@ describe('Select.vue', () => {
vm.$refs.select.search = 'one' vm.$refs.select.search = 'one'
searchSubmit(vm) searchSubmit(vm)
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual(['one']) expect(vm.$refs.select.mutableValue).toEqual([])
expect(vm.$refs.select.search).toEqual('') expect(vm.$refs.select.search).toEqual('')
done() done()
}) })
@@ -860,7 +861,7 @@ describe('Select.vue', () => {
vm.$refs.select.search = 'one' vm.$refs.select.search = 'one'
searchSubmit(vm) searchSubmit(vm)
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual(['one']) expect(vm.$refs.select.mutableValue).toEqual([])
expect(vm.$refs.select.search).toEqual('') expect(vm.$refs.select.search).toEqual('')
done() done()
}) })