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:
+31
-13
@@ -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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -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()
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user