mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-16 09:10:33 +03:00
Merge commit 'b92428101f1c6d4aa1fe864a88eb7079c245e009'
# Conflicts: # test/unit/specs/Select.spec.js
This commit is contained in:
Jeff
@@ -33,6 +33,27 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
|
||||
|
||||
[](codepen://sagalbot/aEjLPB?height=500)
|
||||
|
||||
|
||||
### Option index {#values}
|
||||
|
||||
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
|
||||
|
||||
For example, consider an object with `value` and `label` properties:
|
||||
|
||||
```json
|
||||
{
|
||||
value: "CA",
|
||||
label: "Canada"
|
||||
}
|
||||
```
|
||||
|
||||
If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
|
||||
|
||||
```html
|
||||
<v-select index="value" :options="countries"></v-select>
|
||||
```
|
||||
|
||||
|
||||
### Null / Empty Options {#null}
|
||||
|
||||
`vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.
|
||||
|
||||
+78
-24
@@ -360,13 +360,13 @@
|
||||
aria-label="Search for option"
|
||||
>
|
||||
|
||||
<button
|
||||
v-show="showClearButton"
|
||||
:disabled="disabled"
|
||||
<button
|
||||
v-show="showClearButton"
|
||||
:disabled="disabled"
|
||||
@click="clearSelection"
|
||||
type="button"
|
||||
class="clear"
|
||||
title="Clear selection"
|
||||
type="button"
|
||||
class="clear"
|
||||
title="Clear selection"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
@@ -522,9 +522,25 @@
|
||||
default: 'label'
|
||||
},
|
||||
|
||||
/**
|
||||
* Tells vue-select what key to use when generating option
|
||||
* values when each `option` is an object.
|
||||
* @type {String}
|
||||
*/
|
||||
index: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* Callback to generate the label text. If {option}
|
||||
* is an object, returns option[this.label] by default.
|
||||
*
|
||||
* Label text is used for filtering comparison and
|
||||
* displaying. If you only need to adjust the
|
||||
* display, you should use the `option` and
|
||||
* `selected-option` slots.
|
||||
*
|
||||
* @type {Function}
|
||||
* @param {Object || String} option
|
||||
* @return {String}
|
||||
@@ -532,6 +548,10 @@
|
||||
getOptionLabel: {
|
||||
type: Function,
|
||||
default(option) {
|
||||
if( this.index ) {
|
||||
option = this.findOptionByIndexValue(option)
|
||||
}
|
||||
|
||||
if (typeof option === 'object') {
|
||||
if (!option.hasOwnProperty(this.label)) {
|
||||
return console.warn(
|
||||
@@ -540,9 +560,7 @@
|
||||
'http://sagalbot.github.io/vue-select/#ex-labels'
|
||||
)
|
||||
}
|
||||
if (this.label && option[this.label]) {
|
||||
return option[this.label]
|
||||
}
|
||||
return option[this.label]
|
||||
}
|
||||
return option;
|
||||
}
|
||||
@@ -786,7 +804,15 @@
|
||||
if (this.taggable && !this.optionExists(option)) {
|
||||
option = this.createOption(option)
|
||||
}
|
||||
|
||||
if(this.index) {
|
||||
if (!option.hasOwnProperty(this.index)) {
|
||||
return console.warn(
|
||||
`[vue-select warn]: Index key "option.${this.index}" does not` +
|
||||
` exist in options object ${JSON.stringify(option)}.`
|
||||
)
|
||||
}
|
||||
option = option[this.index]
|
||||
}
|
||||
if (this.multiple && !this.mutableValue) {
|
||||
this.mutableValue = [option]
|
||||
} else if (this.multiple) {
|
||||
@@ -808,7 +834,7 @@
|
||||
if (this.multiple) {
|
||||
let ref = -1
|
||||
this.mutableValue.forEach((val) => {
|
||||
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
|
||||
if (val === option || (this.index && val === option[this.index]) || (typeof val === 'object' && val[this.label] === option[this.label])) {
|
||||
ref = val
|
||||
}
|
||||
})
|
||||
@@ -867,22 +893,50 @@
|
||||
* @return {Boolean} True when selected | False otherwise
|
||||
*/
|
||||
isOptionSelected(option) {
|
||||
if (this.multiple && this.mutableValue) {
|
||||
let selected = false
|
||||
this.mutableValue.forEach(opt => {
|
||||
if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
|
||||
selected = true
|
||||
} else if (typeof opt === 'object' && opt[this.label] === option) {
|
||||
selected = true
|
||||
}
|
||||
else if (opt === option) {
|
||||
this.valueAsArray.forEach(value => {
|
||||
if (typeof value === 'object') {
|
||||
selected = this.optionObjectComparator(value, option)
|
||||
} else if (value === option || value === option[this.index]) {
|
||||
selected = true
|
||||
}
|
||||
})
|
||||
return selected
|
||||
}
|
||||
},
|
||||
|
||||
return this.mutableValue === option
|
||||
/**
|
||||
* Determine if two option objects are matching.
|
||||
*
|
||||
* @param value {Object}
|
||||
* @param option {Object}
|
||||
* @returns {boolean}
|
||||
*/
|
||||
optionObjectComparator(value, option) {
|
||||
if (this.index && value === option[this.index]) {
|
||||
return true
|
||||
} else if ((value[this.label] === option[this.label]) || (value[this.label] === option)) {
|
||||
return true
|
||||
} else if (this.index && value[this.index] === option[this.index]) {
|
||||
return true
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Finds an option from this.options
|
||||
* where option[this.index] matches
|
||||
* the passed in value.
|
||||
*
|
||||
* @param value {Object}
|
||||
* @returns {*}
|
||||
*/
|
||||
findOptionByIndexValue(value) {
|
||||
this.options.forEach(_option => {
|
||||
if (JSON.stringify(_option[this.index]) === JSON.stringify(value)) {
|
||||
value = _option
|
||||
}
|
||||
})
|
||||
return value
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -1061,9 +1115,9 @@
|
||||
isValueEmpty() {
|
||||
if (this.mutableValue) {
|
||||
if (typeof this.mutableValue === 'object') {
|
||||
return !Object.keys(this.mutableValue).length
|
||||
return ! Object.keys(this.mutableValue).length
|
||||
}
|
||||
return !this.mutableValue.length
|
||||
return ! this.valueAsArray.length
|
||||
}
|
||||
|
||||
return true;
|
||||
@@ -1074,7 +1128,7 @@
|
||||
* @return {Array}
|
||||
*/
|
||||
valueAsArray() {
|
||||
if (this.multiple) {
|
||||
if (this.multiple && this.mutableValue) {
|
||||
return this.mutableValue
|
||||
} else if (this.mutableValue) {
|
||||
return [].concat(this.mutableValue)
|
||||
|
||||
@@ -867,6 +867,241 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('When index prop is defined', () => {
|
||||
it('can accept an array of objects and pre-selected value (single)', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :index="index" :options="options" :value="value"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
index: 'value',
|
||||
value: 'foo',
|
||||
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
|
||||
}
|
||||
}).$mount()
|
||||
expect(vm.$children[0].mutableValue).toEqual(vm.value)
|
||||
})
|
||||
|
||||
it('can determine if an object is pre-selected', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="options" v-model="value" index="id"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
value: 'foo',
|
||||
options: [{
|
||||
id: 'foo',
|
||||
label: 'This is Foo'
|
||||
}]
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
expect(vm.$children[0].isOptionSelected({
|
||||
id: 'foo',
|
||||
label: 'This is Foo'
|
||||
})).toEqual(true)
|
||||
})
|
||||
|
||||
it('can determine if an object is selected after it has been chosen', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="options" index="id"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
options: [{id: 'foo', label: 'FooBar'}]
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].select({id: 'foo', label: 'FooBar'});
|
||||
|
||||
// Vue.nextTick(() => {
|
||||
expect(vm.$children[0].isOptionSelected({
|
||||
id: 'foo',
|
||||
label: 'This is Foo'
|
||||
})).toEqual(true)
|
||||
// done()
|
||||
// })
|
||||
})
|
||||
|
||||
it('can accept an array of objects and pre-selected values (multiple)', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
index: 'value',
|
||||
value: ['foo', 'bar'],
|
||||
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
|
||||
}
|
||||
}).$mount()
|
||||
expect(vm.$children[0].mutableValue).toEqual(vm.value)
|
||||
})
|
||||
|
||||
it('can deselect a pre-selected object', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
data: {
|
||||
index: 'value',
|
||||
value: ['foo', 'bar'],
|
||||
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
|
||||
}
|
||||
}).$mount()
|
||||
vm.$children[0].deselect('foo')
|
||||
expect(vm.$children[0].mutableValue.length).toEqual(1)
|
||||
expect(vm.$children[0].mutableValue).toEqual(['bar'])
|
||||
})
|
||||
|
||||
it('can deselect an option when multiple is false', () => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select :index="index" :options="options" :value="value"></v-select></div>`,
|
||||
data: {
|
||||
index: 'value',
|
||||
value: 'foo',
|
||||
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
|
||||
}
|
||||
}).$mount()
|
||||
vm.$children[0].deselect('foo')
|
||||
expect(vm.$children[0].mutableValue).toEqual(null)
|
||||
})
|
||||
|
||||
it('can use v-model syntax for a two way binding to a parent component', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :index="index" :options="options" v-model="value"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
index: 'value',
|
||||
value: 'foo',
|
||||
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: '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()
|
||||
})
|
||||
}),
|
||||
|
||||
it('can work with an array of integers', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="[1,2,3,4,5]" v-model="value"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
value: 5,
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
expect(vm.$children[0].isOptionSelected(5)).toEqual(true)
|
||||
expect(vm.$children[0].isValueEmpty).toEqual(false)
|
||||
})
|
||||
|
||||
it('can generate labels using a custom label key', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :index="index" label="name" :options="options" v-model="value" :multiple="true"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
index: 'value',
|
||||
value: ['baz'],
|
||||
options: [{value: 'foo', name: 'Foo'}, {value: 'baz', name: 'Baz'}]
|
||||
}
|
||||
}).$mount()
|
||||
expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
|
||||
})
|
||||
|
||||
it('will console.warn when attempting to select an option with an undefined index', () => {
|
||||
spyOn(console, 'warn')
|
||||
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select index="value" :options="options"></v-select></div>',
|
||||
data: {
|
||||
options: [{label: 'Foo'}]
|
||||
}
|
||||
}).$mount()
|
||||
vm.$children[0].select({label: 'Foo'})
|
||||
expect(console.warn).toHaveBeenCalledWith(
|
||||
`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
|
||||
)
|
||||
})
|
||||
|
||||
it('can find the original option within this.options', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select index="id" :options="options"></v-select></div>',
|
||||
data: {
|
||||
options: [{id: 1, label: 'Foo'},{id:2, label: 'Bar'}]
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({id: 1, label: 'Foo'})
|
||||
expect(vm.$children[0].findOptionByIndexValue({id: 1, label: 'Foo'})).toEqual({id: 1, label: 'Foo'})
|
||||
})
|
||||
|
||||
describe('And when option[index] is a nested object', () => {
|
||||
it('can determine if an object is pre-selected', () => {
|
||||
const nestedOption = {
|
||||
value: {
|
||||
nested: true
|
||||
},
|
||||
label: 'foo'
|
||||
};
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
value: {
|
||||
nested: true
|
||||
},
|
||||
options: [nestedOption]
|
||||
}
|
||||
}).$mount()
|
||||
expect(vm.$children[0].isOptionSelected({
|
||||
nested: true
|
||||
})).toEqual(true)
|
||||
})
|
||||
|
||||
it('can determine if an object is selected after it is chosen', () => {
|
||||
const nestedOption = {
|
||||
value: {
|
||||
nested: true
|
||||
},
|
||||
label: 'foo'
|
||||
};
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select index="value" :options="options"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
options: [nestedOption]
|
||||
}
|
||||
}).$mount()
|
||||
vm.$children[0].select(nestedOption)
|
||||
expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true)
|
||||
})
|
||||
|
||||
it('can determine a selected values label', () => {
|
||||
const nestedOption = {
|
||||
value: {
|
||||
nested: true
|
||||
},
|
||||
label: 'foo'
|
||||
};
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
|
||||
components: {vSelect},
|
||||
data: {
|
||||
value: {
|
||||
nested: true
|
||||
},
|
||||
options: [nestedOption]
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
expect(vm.$children[0].getOptionLabel({
|
||||
nested: true
|
||||
})).toEqual('foo')
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
describe('When Tagging Is Enabled', () => {
|
||||
it('can determine if a given option string already exists', () => {
|
||||
const vm = new Vue({
|
||||
@@ -1378,7 +1613,7 @@ describe('Select.vue', () => {
|
||||
})
|
||||
|
||||
|
||||
it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', () => {
|
||||
it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
|
||||
data: {
|
||||
@@ -1421,7 +1656,7 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe( 'Clear button', () => {
|
||||
describe('Clear button', () => {
|
||||
|
||||
it( 'should be displayed on single select when value is selected', () => {
|
||||
const VueSelect = Vue.extend( vSelect )
|
||||
@@ -1456,7 +1691,7 @@ describe('Select.vue', () => {
|
||||
value: 'foo'
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
|
||||
expect(vm.mutableValue).toEqual('foo')
|
||||
vm.$el.querySelector( 'button.clear' ).click()
|
||||
expect(vm.mutableValue).toEqual(null)
|
||||
@@ -1475,6 +1710,6 @@ describe('Select.vue', () => {
|
||||
const buttonEl = vm.$el.querySelector( 'button.clear' )
|
||||
expect(buttonEl.disabled).toEqual(true);
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user