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;
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,44 +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);
min-height: 36px;
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 */
@@ -138,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;
@@ -196,17 +189,24 @@
-moz-appearance: none;
line-height: 1.42857143;
font-size: 1em;
height: 34px;
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;
@@ -215,14 +215,10 @@
cursor: pointer;
}
.v-select input[type="search"].hidden {
width: 0px;
border: none;
height: 0;
padding: 0;
}
.v-select input[type="search"].shrunk {
width: auto;
}
.v-select input[type="search"].empty {
width: 100%;
width: 0;
}
/* List Items */
@@ -256,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;
@@ -322,8 +316,9 @@
<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">
<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">
@@ -360,6 +355,8 @@
aria-label="Search for option"
>
</div>
<div class="vs__actions">
<button
v-show="showClearButton"
:disabled="disabled"
@@ -377,6 +374,7 @@
<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 }" role="listbox">
@@ -875,7 +873,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 === this.$refs.selectedOptions || e.target === this.$el) {
if (this.open) {
this.$refs.search.blur() // dropdown will close on blur
} else {
@@ -1035,7 +1034,7 @@
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
}
},
@@ -1046,9 +1045,7 @@
*/
inputClasses() {
return {
hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
shrunk: this.multiple && !this.isValueEmpty,
empty: this.isValueEmpty,
hidden: !this.isValueEmpty && !this.dropdownOpen
}
},
test/unit/specs/Select.spec.js
-47
View File
@@ -249,36 +249,6 @@ describe('Select.vue', () => {
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', () => {
it('will trigger the input event when the selection changes', (done) => {
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', () => {
const vm = new Vue({
template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
@@ -1608,8 +1565,6 @@ describe('Select.vue', () => {
}).$mount()
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(() => {
expect(vm.$children[0].open).toEqual(true)
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()
})
})