mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

Merge branch 'master' into master

Browse Source
This commit is contained in:
Adi Sahar
2018-08-09 19:23:52 +03:00
committed by GitHub
parent 874f948790 e8e5eff553
commit da5c6baa28
6 changed files with 576 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6
View File
@@ -2,6 +2,8 @@
> A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
Want to help out as a primary contributor? [Get in touch](https://github.com/sagalbot/vue-select/issues/581)!
#### Features
- AJAX Support
- Tagging
@@ -104,3 +106,7 @@ When provided an array of objects, `vue-select` will display a single value of t
```
### For more information, please visit the [vue-select documentation.](https://sagalbot.github.io/vue-select)
## License
[MIT](https://github.com/sagalbot/vue-select/blob/master/LICENSE.md)
dev/dev.html
+2 -2
View File
@@ -9,7 +9,7 @@
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
<style>
#app {
height: 95vh;
display: flex;
@@ -67,7 +67,7 @@
</button>
</span>
</v-select>
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
<v-select placeholder="disabled" disabled value="disabled"></v-select>
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
docs/gitbook/Basics/Options.md
+21
View File
@@ -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 `[]`.
docs/gitbook/README.md
+2 -1
View File
@@ -22,4 +22,5 @@
#### Resources
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
- **[GitHub](https://github.com/sagalbot/vue-select)**
src/components/Select.vue
+238 -140
View File
@@ -1,44 +1,43 @@
<style>
.v-select {
position: relative;
font-family: sans-serif;
font-family: inherit;
}
.v-select,
.v-select * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Rtl support */
.v-select.rtl .open-indicator {
left: 10px;
right: auto;
/* Rtl support - Because we're using a flexbox-based layout, the `dir="rtl"` HTML
attribute does most of the work for us by rearranging the child elements visually.
*/
.v-select[dir="rtl"] .vs__actions {
padding: 0 3px 0 4px;
}
.v-select.rtl .selected-tag {
float: right;
margin-right: 3px;
margin-left: 1px;
.v-select[dir="rtl"] .dropdown-toggle .clear {
margin-left: 6px;
margin-right: 0;
}
.v-select.rtl .dropdown-menu {
.v-select[dir="rtl"] .selected-tag .close {
margin-left: 0;
margin-right: 2px;
}
.v-select[dir="rtl"] .dropdown-menu {
text-align: right;
}
.v-select.rtl .dropdown-toggle .clear {
left: 30px;
right: auto;
}
/* Open Indicator */
.v-select .open-indicator {
position: absolute;
bottom: 6px;
right: 10px;
display: inline-block;
display: flex;
align-items: center;
cursor: pointer;
pointer-events: all;
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
opacity: 1;
height: 20px; width: 10px;
width: 12px; /* To account for extra width from rotating. */
}
.v-select .open-indicator:before {
border-color: rgba(60, 60, 60, .5);
@@ -48,7 +47,7 @@
display: inline-block;
height: 10px;
width: 10px;
vertical-align: top;
vertical-align: text-top;
transform: rotate(133deg);
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
@@ -61,43 +60,43 @@
.v-select.loading .open-indicator {
opacity: 0;
}
.v-select.open .open-indicator {
bottom: 1px;
}
/* Dropdown Toggle */
.v-select .dropdown-toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
padding: 0;
display: flex;
padding: 0 0 4px 0;
background: none;
border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4px;
white-space: normal;
}
.v-select .dropdown-toggle:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
.v-select .vs__selected-options {
display: flex;
flex-basis: 100%;
flex-grow: 1;
flex-wrap: wrap;
padding: 0 2px;
}
.v-select .vs__actions {
display: flex;
align-items: stretch;
padding: 0 6px 0 3px;
}
/* Clear Button */
.v-select .dropdown-toggle .clear {
position: absolute;
bottom: 9px;
right: 30px;
font-size: 23px;
font-weight: 700;
line-height: 1;
color: rgba(60, 60, 60, .5);
color: rgba(60, 60, 60, 0.5);
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
margin-right: 6px;
}
/* Dropdown Toggle States */
@@ -137,32 +136,27 @@
}
/* Selected Tags */
.v-select .selected-tag {
color: #333;
display: flex;
align-items: center;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
height: 26px;
margin: 4px 1px 0px 3px;
padding: 1px 0.25em;
float: left;
line-height: 24px;
color: #333;
line-height: 1.42857143; /* Normalize line height */
margin: 4px 2px 0px 2px;
padding: 0 0.25em;
}
.v-select.single .selected-tag {
background-color: transparent;
border-color: transparent;
}
.v-select.single.open .selected-tag {
position: absolute;
opacity: .5;
}
.v-select.single.open.searching .selected-tag,
.v-select.single.open .selected-tag,
.v-select.single.loading .selected-tag {
display: none;
}
.v-select .selected-tag .close {
float: none;
margin-right: 0;
font-size: 20px;
margin-left: 2px;
font-size: 1.25em;
appearance: none;
padding: 0;
cursor: pointer;
@@ -194,18 +188,25 @@
-webkit-appearance: none;
-moz-appearance: none;
line-height: 1.42857143;
font-size:1em;
height: 34px;
font-size: 1em;
display: inline-block;
border: none;
border: 1px solid transparent;
outline: none;
margin: 0;
padding: 0 .5em;
width: 10em;
margin: 4px 0 0 0;
padding: 0 0.5em;
max-width: 100%;
background: none;
position: relative;
box-shadow: none;
/* `flex-grow` will stretch the input to take all remaining space, but We
need to ensure a small amount of space so there's room to type input. We'll
set the input to "hidden" (via width: 0) when the dropdown is closed, to
prevent adding a "blank" line (see: https://github.com/sagalbot/vue-select/pull/512).
In that case, the flex-grow will still stretch the input to take any
available space, on the same "line."
*/
flex-grow: 1;
width: 4em;
}
.v-select.unsearchable input[type="search"] {
opacity: 0;
@@ -213,7 +214,14 @@
.v-select.unsearchable input[type="search"]:hover {
cursor: pointer;
}
/* List Items */
.v-select input[type="search"].hidden {
border: none;
height: 0;
padding: 0;
width: 0;
}
/* List Items */
.v-select li {
line-height: 1.42857143; /* Normalize line height */
}
@@ -244,10 +252,8 @@
}
/* Loading Spinner */
.v-select .spinner {
align-self: center;
opacity: 0;
position: absolute;
top: 5px;
right: 10px;
font-size: 5px;
text-indent: -9999em;
overflow: hidden;
@@ -310,63 +316,70 @@
<template>
<div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
<div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
<slot v-for="option in valueAsArray" name="selected-option-container"
:option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
<span class="selected-tag" v-bind:key="option.index">
<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }}
</slot>
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
<span aria-hidden="true">&times;</span>
</button>
</span>
</slot>
<div class="vs__selected-options" ref="selectedOptions">
<slot v-for="option in valueAsArray" name="selected-option-container"
:option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
<span class="selected-tag" v-bind:key="option.index">
<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }}
</slot>
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
<span aria-hidden="true">&times;</span>
</button>
</span>
</slot>
<input
ref="search"
v-model="search"
@keydown.delete="maybeDeleteValue"
@keyup.esc="onEscape"
@keydown.up.prevent="typeAheadUp"
@keydown.down.prevent="typeAheadDown"
@keydown.enter.prevent="typeAheadSelect"
@blur="onSearchBlur"
@focus="onSearchFocus"
type="search"
class="form-control"
autocomplete="off"
:disabled="disabled"
:placeholder="searchPlaceholder"
:tabindex="tabindex"
:readonly="!searchable"
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
:id="inputId"
aria-label="Search for option"
>
<input
ref="search"
v-model="search"
@keydown.delete="maybeDeleteValue"
@keyup.esc="onEscape"
@keydown.up.prevent="typeAheadUp"
@keydown.down.prevent="typeAheadDown"
@keydown.enter.prevent="typeAheadSelect"
@keydown.tab="onTab"
@blur="onSearchBlur"
@focus="onSearchFocus"
type="search"
class="form-control"
:class="inputClasses"
autocomplete="off"
:disabled="disabled"
:placeholder="searchPlaceholder"
:tabindex="tabindex"
:readonly="!searchable"
:id="inputId"
role="combobox"
:aria-expanded="dropdownOpen"
aria-label="Search for option"
>
<button
v-show="showClearButton"
:disabled="disabled"
@click="clearSelection"
type="button"
class="clear"
title="Clear selection"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="vs__actions">
<button
v-show="showClearButton"
:disabled="disabled"
@click="clearSelection"
type="button"
class="clear"
title="Clear selection"
>
<span aria-hidden="true">&times;</span>
</button>
<i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
<i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
<slot name="spinner">
<div class="spinner" v-show="mutableLoading">Loading...</div>
</slot>
<slot name="spinner">
<div class="spinner" v-show="mutableLoading">Loading...</div>
</slot>
</div>
</div>
<transition :name="transition">
<ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" @mousedown="onMousedown">
<li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
<ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" role="listbox" @mousedown="onMousedown">
<li role="option" v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
<a @mousedown.prevent.stop="select(option)">
<slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }}
@@ -508,9 +521,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}
@@ -518,6 +547,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(
@@ -526,9 +559,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;
}
@@ -548,6 +579,18 @@
}
},
/**
* Select the current value if selectOnTab is enabled
*/
onTab: {
type: Function,
default: function () {
if (this.selectOnTab) {
this.typeAheadSelect();
}
},
},
/**
* Enable/disable creating options from searchInput.
* @type {Boolean}
@@ -680,6 +723,14 @@
type: String,
default: 'auto'
},
/**
* When true, hitting the 'tab' key will select the current select value
* @type {Boolean}
*/
selectOnTab: {
type: Boolean,
default: false
}
},
data() {
@@ -694,12 +745,12 @@
watch: {
/**
* When the value prop changes, update
* the internal mutableValue.
* the internal mutableValue.
* @param {mixed} val
* @return {void}
*/
value(val) {
this.mutableValue = val
this.mutableValue = val
},
/**
@@ -708,7 +759,7 @@
* @param {string|object} old
* @return {void}
*/
mutableValue(val, old) {
mutableValue(val, old) {
if (this.multiple) {
this.onChange ? this.onChange(val) : null
} else {
@@ -727,24 +778,24 @@
},
/**
* Maybe reset the mutableValue
* Maybe reset the mutableValue
* when mutableOptions change.
* @return {[type]} [description]
*/
mutableOptions() {
if (!this.taggable && this.resetOnOptionsChange) {
this.mutableValue = this.multiple ? [] : null
this.mutableValue = this.multiple ? [] : null
}
},
/**
* Always reset the mutableValue when
* Always reset the mutableValue when
* the multiple prop changes.
* @param {Boolean} val
* @return {void}
*/
multiple(val) {
this.mutableValue = val ? [] : null
this.mutableValue = val ? [] : null
}
},
@@ -753,9 +804,9 @@
* attach any event listeners.
*/
created() {
this.mutableValue = this.value
this.mutableValue = this.value
this.mutableOptions = this.options.slice(0)
this.mutableLoading = this.loading
this.mutableLoading = this.loading
this.$on('option:created', this.maybePushTag)
},
@@ -772,7 +823,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) {
@@ -794,7 +853,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
}
})
@@ -835,7 +894,8 @@
* @return {void}
*/
toggleDropdown(e) {
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle ||
e.target.classList.contains('selected-tag') || e.target === this.$el) {
if (this.open) {
this.$refs.search.blur() // dropdown will close on blur
} else {
@@ -853,22 +913,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
},
/**
@@ -982,11 +1070,21 @@
searchable: this.searchable,
unsearchable: !this.searchable,
loading: this.mutableLoading,
rtl: this.dir === 'rtl',
rtl: this.dir === 'rtl', // This can be removed - styling is handled by `dir="rtl"` attribute
disabled: this.disabled
}
},
/**
* Classes to be output on input.form-control
* @return {Object}
*/
inputClasses() {
return {
hidden: !this.isValueEmpty && !this.dropdownOpen
}
},
/**
* If search text should clear on blur
* @return {Boolean} True when single and clearSearchOnSelect
@@ -1050,9 +1148,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;
@@ -1063,7 +1161,7 @@
* @return {Array}
*/
valueAsArray() {
if (this.multiple) {
if (this.multiple && this.mutableValue) {
return this.mutableValue
} else if (this.mutableValue) {
return [].concat(this.mutableValue)
test/unit/specs/Select.spec.js
+307 -4
View File
@@ -109,6 +109,22 @@ describe('Select.vue', () => {
expect(vm.$children[0].mutableValue).toEqual(vm.value)
})
it('can select an option on tab', (done) => {
const vm = new Vue({
template: `<div><v-select :options="['one','two']" select-on-tab></v-select></div>`,
components: {vSelect},
}).$mount()
vm.$children[0].typeAheadPointer = 0
trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 9)
Vue.nextTick(() => {
expect(vm.$children[0].mutableValue).toEqual('one');
done();
})
})
it('can deselect a pre-selected object', () => {
const vm = new Vue({
template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
@@ -403,6 +419,26 @@ describe('Select.vue', () => {
})
})
it('should open the dropdown when the selected tag is clicked', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" :value="value"></v-select></div>',
components: {vSelect},
data: {
value: [{label: 'one'}],
options: [{label: 'one'}]
}
}).$mount()
const selectedTag = vm.$children[0].$el.getElementsByClassName('selected-tag')[0]
vm.$children[0].toggleDropdown({target: selectedTag})
Vue.nextTick(() => {
Vue.nextTick(() => {
expect(vm.$children[0].open).toEqual(true)
done()
})
})
})
it('can close the dropdown when the el is clicked', (done) => {
const vm = new Vue({
template: '<div><v-select></v-select></div>',
@@ -837,6 +873,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({
@@ -1318,7 +1589,39 @@ describe('Select.vue', () => {
expect(vm.$refs.select.search).toEqual('')
done()
})
})
})
it('should apply the "hidden" class to the search input when a value is present', () => {
const vm = new Vue({
template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
data: {
value: 'one',
options: ['one', 'two', 'three']
}
}).$mount()
expect(vm.$children[0].inputClasses.hidden).toEqual(true)
})
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: {
value: 'one',
options: ['one', 'two', 'three'],
open: true
}
}).$mount()
vm.$children[0].toggleDropdown({target: vm.$children[0].$refs.search})
Vue.nextTick(() => {
Vue.nextTick(() => {
expect(vm.$children[0].open).toEqual(true)
expect(vm.$children[0].inputClasses.hidden).toEqual(false)
done()
})
})
})
it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
const vm = new Vue({
@@ -1342,7 +1645,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 )
@@ -1377,7 +1680,7 @@ describe('Select.vue', () => {
value: 'foo'
}
}).$mount()
expect(vm.mutableValue).toEqual('foo')
vm.$el.querySelector( 'button.clear' ).click()
expect(vm.mutableValue).toEqual(null)
@@ -1396,6 +1699,6 @@ describe('Select.vue', () => {
const buttonEl = vm.$el.querySelector( 'button.clear' )
expect(buttonEl.disabled).toEqual(true);
})
});
})