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

Merge branch 'stevenharman-flexbox-based-layout'

Browse Source 
# Conflicts:
#	src/components/Select.vue
#	test/unit/specs/Select.spec.js
This commit is contained in:
Jeff
2018-08-07 20:50:57 -07:00
parent b0f58d7793 adb1c88220
commit 3d819e55f7
2 changed files with 129 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+129 -132
View File
@@ -3,42 +3,41 @@
position: relative; position: relative;
font-family: inherit; 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,44 +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);
min-height: 36px;
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 */
@@ -138,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;
@@ -195,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;
@@ -215,17 +215,13 @@
cursor: pointer; cursor: pointer;
} }
.v-select input[type="search"].hidden { .v-select input[type="search"].hidden {
width: 0px; border: none;
height: 0;
padding: 0; padding: 0;
} width: 0;
.v-select input[type="search"].shrunk {
width: auto;
}
.v-select input[type="search"].empty {
width: 100%;
} }
/* List Items */ /* List Items */
.v-select li { .v-select li {
line-height: 1.42857143; /* Normalize line height */ line-height: 1.42857143; /* Normalize line height */
} }
@@ -256,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;
@@ -322,60 +316,64 @@
<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" @blur="onSearchBlur"
@focus="onSearchFocus" @focus="onSearchFocus"
type="search" type="search"
class="form-control" class="form-control"
:class="inputClasses" :class="inputClasses"
autocomplete="off" autocomplete="off"
:disabled="disabled" :disabled="disabled"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
:tabindex="tabindex" :tabindex="tabindex"
:readonly="!searchable" :readonly="!searchable"
:id="inputId" :id="inputId"
role="combobox" role="combobox"
:aria-expanded="dropdownOpen" :aria-expanded="dropdownOpen"
aria-label="Search for option" 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">
@@ -726,12 +724,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
}, },
/** /**
@@ -740,7 +738,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 {
@@ -759,24 +757,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
} }
}, },
@@ -785,9 +783,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)
}, },
@@ -875,7 +873,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 === this.$refs.selectedOptions || 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 {
@@ -1035,7 +1034,7 @@
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
} }
}, },
@@ -1046,9 +1045,7 @@
*/ */
inputClasses() { inputClasses() {
return { return {
hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen, hidden: !this.isValueEmpty && !this.dropdownOpen
shrunk: this.multiple && !this.isValueEmpty,
empty: this.isValueEmpty,
} }
}, },
test/unit/specs/Select.spec.js
-47
View File
@@ -249,36 +249,6 @@ describe('Select.vue', () => {
expect(vm.$children[0].isOptionSelected('foo')).toEqual(true) expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
}), }),
it('applies the "empty" class to the search input when no value is selected', () => {
const vm = new Vue({
template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: null,
options: [{label: 'one'}]
}
}).$mount()
expect(vm.$children[0].inputClasses.empty).toEqual(true)
expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
expect(vm.$children[0].inputClasses.hidden).toEqual(false)
}),
it('applies the "shrunk" class to the search input when one or more value is selected', () => {
const vm = new Vue({
template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: [{label: 'one'}],
options: [{label: 'one'}]
}
}).$mount()
expect(vm.$children[0].inputClasses.shrunk).toEqual(true)
expect(vm.$children[0].inputClasses.empty).toEqual(false)
expect(vm.$children[0].inputClasses.hidden).toEqual(false)
}),
describe('change Event', () => { describe('change Event', () => {
it('will trigger the input event when the selection changes', (done) => { it('will trigger the input event when the selection changes', (done) => {
const vm = new Vue({ const vm = new Vue({
@@ -1585,19 +1555,6 @@ describe('Select.vue', () => {
}) })
}) })
it('should apply the "empty" class to the search input when it does not have a selected value', () => {
const vm = new Vue({
template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
data: {
value: '',
options: ['one', 'two', 'three']
}
}).$mount()
expect(vm.$children[0].inputClasses.empty).toEqual(true)
expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
expect(vm.$children[0].inputClasses.hidden).toEqual(false)
})
it('should apply the "hidden" class to the search input when a value is present', () => { it('should apply the "hidden" class to the search input when a value is present', () => {
const vm = new Vue({ const vm = new Vue({
template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>', template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
@@ -1608,8 +1565,6 @@ describe('Select.vue', () => {
}).$mount() }).$mount()
expect(vm.$children[0].inputClasses.hidden).toEqual(true) expect(vm.$children[0].inputClasses.hidden).toEqual(true)
expect(vm.$children[0].inputClasses.empty).toEqual(false)
expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
}) })
@@ -1627,8 +1582,6 @@ describe('Select.vue', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$children[0].open).toEqual(true) expect(vm.$children[0].open).toEqual(true)
expect(vm.$children[0].inputClasses.hidden).toEqual(false) expect(vm.$children[0].inputClasses.hidden).toEqual(false)
expect(vm.$children[0].inputClasses.empty).toEqual(false)
expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
done() done()
}) })
}) })