mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-04 06:32:23 +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:
+29
-10
@@ -115,13 +115,17 @@
|
||||
float: left;
|
||||
line-height: 24px;
|
||||
}
|
||||
.v-select .selected-tag.single {
|
||||
.v-select.single .selected-tag {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.v-select.open .selected-tag.single {
|
||||
.v-select.single.open .selected-tag {
|
||||
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 {
|
||||
float: none;
|
||||
@@ -139,6 +143,9 @@
|
||||
filter: alpha(opacity=20);
|
||||
opacity: .2;
|
||||
}
|
||||
.v-select.single.searching:not(.open):not(.loading) input[type="search"] {
|
||||
opacity: .2;
|
||||
}
|
||||
/* Search Input */
|
||||
.v-select input[type="search"]::-webkit-search-decoration,
|
||||
.v-select input[type="search"]::-webkit-search-cancel-button,
|
||||
@@ -262,7 +269,7 @@
|
||||
<div class="dropdown v-select" :class="dropdownClasses">
|
||||
<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) }}
|
||||
<button v-if="multiple" @click="deselect(option)" type="button" class="close">
|
||||
<span aria-hidden="true">×</span>
|
||||
@@ -702,6 +709,9 @@
|
||||
* @return {void}
|
||||
*/
|
||||
onSearchBlur() {
|
||||
if (this.clearSearchOnBlur) {
|
||||
this.search = ''
|
||||
}
|
||||
this.open = false
|
||||
this.$emit('search:blur')
|
||||
},
|
||||
@@ -771,6 +781,8 @@
|
||||
dropdownClasses() {
|
||||
return {
|
||||
open: this.dropdownOpen,
|
||||
single: !this.multiple,
|
||||
searching: this.searching,
|
||||
searchable: this.searchable,
|
||||
unsearchable: !this.searchable,
|
||||
loading: this.mutableLoading
|
||||
@@ -778,13 +790,20 @@
|
||||
},
|
||||
|
||||
/**
|
||||
* Classes to be output on .selected-tag
|
||||
* @return {Object}
|
||||
* If search text should clear on blur
|
||||
* @return {Boolean} True when single and clearSearchOnSelect
|
||||
*/
|
||||
selectedTagClasses() {
|
||||
return {
|
||||
single: !this.multiple
|
||||
}
|
||||
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
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user