mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +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. > 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 #### Features
- AJAX Support - AJAX Support
- Tagging - 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) ### 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 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">--> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
<style> <style>
#app { #app {
height: 95vh; height: 95vh;
display: flex; display: flex;
@@ -67,7 +67,7 @@
</button> </button>
</span> </span>
</v-select> </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" disabled value="disabled"></v-select>
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></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> <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) [](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} ### 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 `[]`. `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 #### Resources
- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)** - **[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> <style>
.v-select { .v-select {
position: relative; position: relative;
font-family: sans-serif; font-family: inherit;
} }
.v-select, .v-select,
.v-select * { .v-select * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* Rtl support */
.v-select.rtl .open-indicator { /* Rtl support - Because we're using a flexbox-based layout, the `dir="rtl"` HTML
left: 10px; attribute does most of the work for us by rearranging the child elements visually.
right: auto; */
.v-select[dir="rtl"] .vs__actions {
padding: 0 3px 0 4px;
} }
.v-select.rtl .selected-tag { .v-select[dir="rtl"] .dropdown-toggle .clear {
float: right; margin-left: 6px;
margin-right: 3px; margin-right: 0;
margin-left: 1px;
} }
.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; text-align: right;
} }
.v-select.rtl .dropdown-toggle .clear {
left: 30px;
right: auto;
}
/* Open Indicator */ /* Open Indicator */
.v-select .open-indicator { .v-select .open-indicator {
position: absolute; display: flex;
bottom: 6px; align-items: center;
right: 10px;
display: inline-block;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855); 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); transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
opacity: 1; opacity: 1;
height: 20px; width: 10px; width: 12px; /* To account for extra width from rotating. */
} }
.v-select .open-indicator:before { .v-select .open-indicator:before {
border-color: rgba(60, 60, 60, .5); border-color: rgba(60, 60, 60, .5);
@@ -48,7 +47,7 @@
display: inline-block; display: inline-block;
height: 10px; height: 10px;
width: 10px; width: 10px;
vertical-align: top; vertical-align: text-top;
transform: rotate(133deg); transform: rotate(133deg);
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855); 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); transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
@@ -61,43 +60,43 @@
.v-select.loading .open-indicator { .v-select.loading .open-indicator {
opacity: 0; opacity: 0;
} }
.v-select.open .open-indicator {
bottom: 1px;
}
/* Dropdown Toggle */ /* Dropdown Toggle */
.v-select .dropdown-toggle { .v-select .dropdown-toggle {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
display: block; display: flex;
padding: 0; padding: 0 0 4px 0;
background: none; background: none;
border: 1px solid rgba(60, 60, 60, .26); border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4px; border-radius: 4px;
white-space: normal; white-space: normal;
} }
.v-select .dropdown-toggle:after { .v-select .vs__selected-options {
visibility: hidden; display: flex;
display: block; flex-basis: 100%;
font-size: 0; flex-grow: 1;
content: " "; flex-wrap: wrap;
clear: both; padding: 0 2px;
height: 0; }
.v-select .vs__actions {
display: flex;
align-items: stretch;
padding: 0 6px 0 3px;
} }
/* Clear Button */ /* Clear Button */
.v-select .dropdown-toggle .clear { .v-select .dropdown-toggle .clear {
position: absolute;
bottom: 9px;
right: 30px;
font-size: 23px; font-size: 23px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
color: rgba(60, 60, 60, .5); color: rgba(60, 60, 60, 0.5);
padding: 0; padding: 0;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
margin-right: 6px;
} }
/* Dropdown Toggle States */ /* Dropdown Toggle States */
@@ -137,32 +136,27 @@
} }
/* Selected Tags */ /* Selected Tags */
.v-select .selected-tag { .v-select .selected-tag {
color: #333; display: flex;
align-items: center;
background-color: #f0f0f0; background-color: #f0f0f0;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
height: 26px; color: #333;
margin: 4px 1px 0px 3px; line-height: 1.42857143; /* Normalize line height */
padding: 1px 0.25em; margin: 4px 2px 0px 2px;
float: left; padding: 0 0.25em;
line-height: 24px;
} }
.v-select.single .selected-tag { .v-select.single .selected-tag {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
.v-select.single.open .selected-tag { .v-select.single.open .selected-tag,
position: absolute;
opacity: .5;
}
.v-select.single.open.searching .selected-tag,
.v-select.single.loading .selected-tag { .v-select.single.loading .selected-tag {
display: none; display: none;
} }
.v-select .selected-tag .close { .v-select .selected-tag .close {
float: none; margin-left: 2px;
margin-right: 0; font-size: 1.25em;
font-size: 20px;
appearance: none; appearance: none;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
@@ -194,18 +188,25 @@
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
line-height: 1.42857143; line-height: 1.42857143;
font-size:1em; font-size: 1em;
height: 34px;
display: inline-block; display: inline-block;
border: none; border: 1px solid transparent;
outline: none; outline: none;
margin: 0; margin: 4px 0 0 0;
padding: 0 .5em; padding: 0 0.5em;
width: 10em;
max-width: 100%; max-width: 100%;
background: none; background: none;
position: relative;
box-shadow: none; 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"] { .v-select.unsearchable input[type="search"] {
opacity: 0; opacity: 0;
@@ -213,7 +214,14 @@
.v-select.unsearchable input[type="search"]:hover { .v-select.unsearchable input[type="search"]:hover {
cursor: pointer; cursor: pointer;
} }
/* List Items */ .v-select input[type="search"].hidden {
border: none;
height: 0;
padding: 0;
width: 0;
}
/* List Items */
.v-select li { .v-select li {
line-height: 1.42857143; /* Normalize line height */ line-height: 1.42857143; /* Normalize line height */
} }
@@ -244,10 +252,8 @@
} }
/* Loading Spinner */ /* Loading Spinner */
.v-select .spinner { .v-select .spinner {
align-self: center;
opacity: 0; opacity: 0;
position: absolute;
top: 5px;
right: 10px;
font-size: 5px; font-size: 5px;
text-indent: -9999em; text-indent: -9999em;
overflow: hidden; overflow: hidden;
@@ -310,63 +316,70 @@
<template> <template>
<div :dir="dir" class="dropdown v-select" :class="dropdownClasses"> <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" <div class="vs__selected-options" ref="selectedOptions">
:option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled"> <slot v-for="option in valueAsArray" name="selected-option-container"
<span class="selected-tag" v-bind:key="option.index"> :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
<slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}"> <span class="selected-tag" v-bind:key="option.index">
{{ getOptionLabel(option) }} <slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
</slot> {{ getOptionLabel(option) }}
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option"> </slot>
<span aria-hidden="true">&times;</span> <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
</button> <span aria-hidden="true">&times;</span>
</span> </button>
</slot> </span>
</slot>
<input <input
ref="search" ref="search"
v-model="search" v-model="search"
@keydown.delete="maybeDeleteValue" @keydown.delete="maybeDeleteValue"
@keyup.esc="onEscape" @keyup.esc="onEscape"
@keydown.up.prevent="typeAheadUp" @keydown.up.prevent="typeAheadUp"
@keydown.down.prevent="typeAheadDown" @keydown.down.prevent="typeAheadDown"
@keydown.enter.prevent="typeAheadSelect" @keydown.enter.prevent="typeAheadSelect"
@blur="onSearchBlur" @keydown.tab="onTab"
@focus="onSearchFocus" @blur="onSearchBlur"
type="search" @focus="onSearchFocus"
class="form-control" type="search"
autocomplete="off" class="form-control"
:disabled="disabled" :class="inputClasses"
:placeholder="searchPlaceholder" autocomplete="off"
:tabindex="tabindex" :disabled="disabled"
:readonly="!searchable" :placeholder="searchPlaceholder"
:style="{ width: isValueEmpty ? '100%' : 'auto' }" :tabindex="tabindex"
:id="inputId" :readonly="!searchable"
aria-label="Search for option" :id="inputId"
> role="combobox"
:aria-expanded="dropdownOpen"
aria-label="Search for option"
>
<button </div>
v-show="showClearButton" <div class="vs__actions">
:disabled="disabled" <button
@click="clearSelection" v-show="showClearButton"
type="button" :disabled="disabled"
class="clear" @click="clearSelection"
title="Clear selection" type="button"
> class="clear"
<span aria-hidden="true">&times;</span> title="Clear selection"
</button> >
<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"> <slot name="spinner">
<div class="spinner" v-show="mutableLoading">Loading...</div> <div class="spinner" v-show="mutableLoading">Loading...</div>
</slot> </slot>
</div>
</div> </div>
<transition :name="transition"> <transition :name="transition">
<ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" @mousedown="onMousedown"> <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" role="listbox" @mousedown="onMousedown">
<li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index"> <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)"> <a @mousedown.prevent.stop="select(option)">
<slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}"> <slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
{{ getOptionLabel(option) }} {{ getOptionLabel(option) }}
@@ -508,9 +521,25 @@
default: 'label' 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} * Callback to generate the label text. If {option}
* is an object, returns option[this.label] by default. * 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} * @type {Function}
* @param {Object || String} option * @param {Object || String} option
* @return {String} * @return {String}
@@ -518,6 +547,10 @@
getOptionLabel: { getOptionLabel: {
type: Function, type: Function,
default(option) { default(option) {
if( this.index ) {
option = this.findOptionByIndexValue(option)
}
if (typeof option === 'object') { if (typeof option === 'object') {
if (!option.hasOwnProperty(this.label)) { if (!option.hasOwnProperty(this.label)) {
return console.warn( return console.warn(
@@ -526,9 +559,7 @@
'http://sagalbot.github.io/vue-select/#ex-labels' 'http://sagalbot.github.io/vue-select/#ex-labels'
) )
} }
if (this.label && option[this.label]) { return option[this.label]
return option[this.label]
}
} }
return option; 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. * Enable/disable creating options from searchInput.
* @type {Boolean} * @type {Boolean}
@@ -680,6 +723,14 @@
type: String, type: String,
default: 'auto' default: 'auto'
}, },
/**
* When true, hitting the 'tab' key will select the current select value
* @type {Boolean}
*/
selectOnTab: {
type: Boolean,
default: false
}
}, },
data() { data() {
@@ -694,12 +745,12 @@
watch: { watch: {
/** /**
* When the value prop changes, update * When the value prop changes, update
* the internal mutableValue. * the internal mutableValue.
* @param {mixed} val * @param {mixed} val
* @return {void} * @return {void}
*/ */
value(val) { value(val) {
this.mutableValue = val this.mutableValue = val
}, },
/** /**
@@ -708,7 +759,7 @@
* @param {string|object} old * @param {string|object} old
* @return {void} * @return {void}
*/ */
mutableValue(val, old) { mutableValue(val, old) {
if (this.multiple) { if (this.multiple) {
this.onChange ? this.onChange(val) : null this.onChange ? this.onChange(val) : null
} else { } else {
@@ -727,24 +778,24 @@
}, },
/** /**
* Maybe reset the mutableValue * Maybe reset the mutableValue
* when mutableOptions change. * when mutableOptions change.
* @return {[type]} [description] * @return {[type]} [description]
*/ */
mutableOptions() { mutableOptions() {
if (!this.taggable && this.resetOnOptionsChange) { 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. * the multiple prop changes.
* @param {Boolean} val * @param {Boolean} val
* @return {void} * @return {void}
*/ */
multiple(val) { multiple(val) {
this.mutableValue = val ? [] : null this.mutableValue = val ? [] : null
} }
}, },
@@ -753,9 +804,9 @@
* attach any event listeners. * 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) this.$on('option:created', this.maybePushTag)
}, },
@@ -772,7 +823,15 @@
if (this.taggable && !this.optionExists(option)) { if (this.taggable && !this.optionExists(option)) {
option = this.createOption(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) { if (this.multiple && !this.mutableValue) {
this.mutableValue = [option] this.mutableValue = [option]
} else if (this.multiple) { } else if (this.multiple) {
@@ -794,7 +853,7 @@
if (this.multiple) { if (this.multiple) {
let ref = -1 let ref = -1
this.mutableValue.forEach((val) => { 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 ref = val
} }
}) })
@@ -835,7 +894,8 @@
* @return {void} * @return {void}
*/ */
toggleDropdown(e) { 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) { if (this.open) {
this.$refs.search.blur() // dropdown will close on blur this.$refs.search.blur() // dropdown will close on blur
} else { } else {
@@ -853,22 +913,50 @@
* @return {Boolean} True when selected | False otherwise * @return {Boolean} True when selected | False otherwise
*/ */
isOptionSelected(option) { isOptionSelected(option) {
if (this.multiple && this.mutableValue) {
let selected = false let selected = false
this.mutableValue.forEach(opt => { this.valueAsArray.forEach(value => {
if (typeof opt === 'object' && opt[this.label] === option[this.label]) { if (typeof value === 'object') {
selected = true selected = this.optionObjectComparator(value, option)
} else if (typeof opt === 'object' && opt[this.label] === option) { } else if (value === option || value === option[this.index]) {
selected = true
}
else if (opt === option) {
selected = true selected = true
} }
}) })
return selected 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, searchable: this.searchable,
unsearchable: !this.searchable, unsearchable: !this.searchable,
loading: this.mutableLoading, 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 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 * If search text should clear on blur
* @return {Boolean} True when single and clearSearchOnSelect * @return {Boolean} True when single and clearSearchOnSelect
@@ -1050,9 +1148,9 @@
isValueEmpty() { isValueEmpty() {
if (this.mutableValue) { if (this.mutableValue) {
if (typeof this.mutableValue === 'object') { 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; return true;
@@ -1063,7 +1161,7 @@
* @return {Array} * @return {Array}
*/ */
valueAsArray() { valueAsArray() {
if (this.multiple) { if (this.multiple && this.mutableValue) {
return this.mutableValue return this.mutableValue
} else if (this.mutableValue) { } else if (this.mutableValue) {
return [].concat(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) 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', () => { it('can deselect a pre-selected object', () => {
const vm = new Vue({ const vm = new Vue({
template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>', 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) => { it('can close the dropdown when the el is clicked', (done) => {
const vm = new Vue({ const vm = new Vue({
template: '<div><v-select></v-select></div>', 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', () => { describe('When Tagging Is Enabled', () => {
it('can determine if a given option string already exists', () => { it('can determine if a given option string already exists', () => {
const vm = new Vue({ const vm = new Vue({
@@ -1318,7 +1589,39 @@ describe('Select.vue', () => {
expect(vm.$refs.select.search).toEqual('') expect(vm.$refs.select.search).toEqual('')
done() 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) => { it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
const vm = new Vue({ 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', () => { it( 'should be displayed on single select when value is selected', () => {
const VueSelect = Vue.extend( vSelect ) const VueSelect = Vue.extend( vSelect )
@@ -1377,7 +1680,7 @@ describe('Select.vue', () => {
value: 'foo' value: 'foo'
} }
}).$mount() }).$mount()
expect(vm.mutableValue).toEqual('foo') expect(vm.mutableValue).toEqual('foo')
vm.$el.querySelector( 'button.clear' ).click() vm.$el.querySelector( 'button.clear' ).click()
expect(vm.mutableValue).toEqual(null) expect(vm.mutableValue).toEqual(null)
@@ -1396,6 +1699,6 @@ describe('Select.vue', () => {
const buttonEl = vm.$el.querySelector( 'button.clear' ) const buttonEl = vm.$el.querySelector( 'button.clear' )
expect(buttonEl.disabled).toEqual(true); expect(buttonEl.disabled).toEqual(true);
}) })
}); });
}) })