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
+70 -73
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;
@@ -196,17 +189,24 @@
-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,14 +215,10 @@
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 */
@@ -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,8 +316,9 @@
<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">
<div class="vs__selected-options" ref="selectedOptions">
<slot v-for="option in valueAsArray" name="selected-option-container" <slot v-for="option in valueAsArray" name="selected-option-container"
:option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled"> :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
<span class="selected-tag" v-bind:key="option.index"> <span class="selected-tag" v-bind:key="option.index">
@@ -360,6 +355,8 @@
aria-label="Search for option" aria-label="Search for option"
> >
</div>
<div class="vs__actions">
<button <button
v-show="showClearButton" v-show="showClearButton"
:disabled="disabled" :disabled="disabled"
@@ -377,6 +374,7 @@
<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 }" role="listbox"> <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" role="listbox">
@@ -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()
}) })
}) })