diff --git a/src/components/Select.vue b/src/components/Select.vue
index be9f45e..1ff37a5 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -23,6 +23,10 @@
.v-select.rtl .dropdown-menu {
text-align: right;
}
+ .v-select.rtl .dropdown-toggle .clear {
+ left: 30px;
+ right: auto;
+ }
/* Open Indicator */
.v-select .open-indicator {
position: absolute;
@@ -80,6 +84,22 @@
clear: both;
height: 0;
}
+
+ /* Clear Button */
+ .v-select .dropdown-toggle .clear {
+ position: absolute;
+ bottom: 7px;
+ right: 30px;
+ font-size: 23px;
+ font-weight: 700;
+ line-height: 1;
+ color: rgba(60, 60, 60, .5);
+ padding: 0;
+ border: 0;
+ background-color: transparent;
+ cursor: pointer;
+ }
+
/* Dropdown Toggle States */
.v-select.searchable .dropdown-toggle {
cursor: text;
@@ -244,6 +264,7 @@
/* Disabled state */
.v-select.disabled .dropdown-toggle,
+ .v-select.disabled .dropdown-toggle .clear,
.v-select.disabled .dropdown-toggle input,
.v-select.disabled .selected-tag .close,
.v-select.disabled .open-indicator {
@@ -316,6 +337,17 @@
aria-label="Search for option"
>
+
+
@@ -689,6 +721,14 @@
}
},
+ /**
+ * Clears the currently selected value(s)
+ * @return {void}
+ */
+ clearSelection() {
+ this.mutableValue = this.multiple ? [] : null
+ },
+
/**
* Called from this.select after each selection.
* @param {Object|String} option
@@ -935,6 +975,14 @@
}
return []
+ },
+
+ /**
+ * Determines if the clear button should be displayed.
+ * @return {Boolean}
+ */
+ showClearButton() {
+ return !this.multiple && !this.open && this.mutableValue != null
}
},