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 pull request #171 from fidgetwidget/non-multiple-improvements

Browse Source 
Added features to non multiple selects
This commit is contained in:
Jeff
2017-04-24 11:23:34 -07:00
committed by GitHub
parent aabc43c903 1f8b30164e
commit 072bf4160d
3 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev.html
+1
View File
@@ -31,6 +31,7 @@
<body> <body>
<div id="app"> <div id="app">
<v-select placeholder="default" :options="options"></v-select>
<v-select placeholder="multiple" multiple :options="options"></v-select> <v-select placeholder="multiple" multiple :options="options"></v-select>
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select> <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select> <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
src/components/Select.vue
+37
View File
@@ -115,6 +115,18 @@
float: left; float: left;
line-height: 24px; line-height: 24px;
} }
.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.loading .selected-tag {
display: none;
}
.v-select .selected-tag .close { .v-select .selected-tag .close {
float: none; float: none;
margin-right: 0; margin-right: 0;
@@ -131,6 +143,9 @@
filter: alpha(opacity=20); filter: alpha(opacity=20);
opacity: .2; opacity: .2;
} }
.v-select.single.searching:not(.open):not(.loading) input[type="search"] {
opacity: .2;
}
/* Search Input */ /* Search Input */
.v-select input[type="search"]::-webkit-search-decoration, .v-select input[type="search"]::-webkit-search-decoration,
.v-select input[type="search"]::-webkit-search-cancel-button, .v-select input[type="search"]::-webkit-search-cancel-button,
@@ -704,6 +719,9 @@
* @return {void} * @return {void}
*/ */
onSearchBlur() { onSearchBlur() {
if (this.clearSearchOnBlur) {
this.search = ''
}
this.open = false this.open = false
this.$emit('search:blur') this.$emit('search:blur')
}, },
@@ -773,12 +791,31 @@
dropdownClasses() { dropdownClasses() {
return { return {
open: this.dropdownOpen, open: this.dropdownOpen,
single: !this.multiple,
searching: this.searching,
searchable: this.searchable, searchable: this.searchable,
unsearchable: !this.searchable, unsearchable: !this.searchable,
loading: this.mutableLoading loading: this.mutableLoading
} }
}, },
/**
* If search text should clear on blur
* @return {Boolean} True when single and clearSearchOnSelect
*/
clearSearchOnBlur() {
return this.clearSearchOnSelect && !this.multiple
},
/**
* Return the current state of the
* search input
* @return {Boolean} True if non empty value
*/
searching() {
return !!this.search
},
/** /**
* Return the current state of the * Return the current state of the
* dropdown menu. * dropdown menu.
test/unit/specs/Select.spec.js
+43
View File
@@ -1144,4 +1144,47 @@ describe('Select.vue', () => {
}) })
}) })
}) })
describe('Single value options', () => {
it('should reset the search input on focus lost', (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']
}
}).$mount()
vm.$children[0].open = true
vm.$refs.select.search = "t"
expect(vm.$refs.select.search).toEqual('t')
vm.$children[0].onSearchBlur()
Vue.nextTick(() => {
expect(vm.$refs.select.search).toEqual('')
done()
})
})
it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
const vm = new Vue({
template: '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',
data: {
value: 'one',
options: ['one', 'two', 'three']
}
}).$mount()
expect(vm.$refs.select.clearSearchOnSelect).toEqual(false)
vm.$children[0].open = true
vm.$refs.select.search = "t"
expect(vm.$refs.select.search).toEqual('t')
vm.$children[0].onSearchBlur()
Vue.nextTick(() => {
expect(vm.$refs.select.search).toEqual('t')
done()
})
})
})
}) })