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

Adjustments based on discussion with component owner

- Moved the single class up to the root .v-select tag
- Added a searching class when there is text in the search input
- Added clearing of search text on single when clear on select is set to true, 
otherwise dim the search text (for single, where clear on select is false)
This commit is contained in:
Brandon Bey
2017-03-31 12:35:42 -07:00
parent 536606e0fa
commit 4bd8cc83cc
+29 -10
View File
@@ -115,13 +115,17 @@
float: left; float: left;
line-height: 24px; line-height: 24px;
} }
.v-select .selected-tag.single { .v-select.single .selected-tag {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
.v-select.open .selected-tag.single { .v-select.single.open .selected-tag {
position: absolute; position: absolute;
opacity: 0.5; 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;
@@ -139,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,
@@ -262,7 +269,7 @@
<div class="dropdown v-select" :class="dropdownClasses"> <div class="dropdown v-select" :class="dropdownClasses">
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle"> <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
<span class="selected-tag" :class="selectedTagClasses" v-for="option in valueAsArray" v-bind:key="option.index"> <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
{{ getOptionLabel(option) }} {{ getOptionLabel(option) }}
<button v-if="multiple" @click="deselect(option)" type="button" class="close"> <button v-if="multiple" @click="deselect(option)" type="button" class="close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
@@ -702,6 +709,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')
}, },
@@ -771,6 +781,8 @@
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
@@ -778,13 +790,20 @@
}, },
/** /**
* Classes to be output on .selected-tag * If search text should clear on blur
* @return {Object} * @return {Boolean} True when single and clearSearchOnSelect
*/ */
selectedTagClasses() { clearSearchOnBlur() {
return { return this.clearSearchOnSelect && !this.multiple
single: !this.multiple },
}
/**
* Return the current state of the
* search input
* @return {Boolean} True if non empty value
*/
searching() {
return !!this.search
}, },
/** /**