Merge pull request sagalbot#171 from fidgetwidget/non-multiple-improvements

sagalbot · web-flow · commit 072bf4160dd0 · 2017-04-24T11:23:34.000-07:00
Added features to non multiple selects
diff --git a/dev.html b/dev.html
@@ -31,6 +31,7 @@
 
 <body>
     <div id="app">
+        <v-select placeholder="default" :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, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -115,6 +115,18 @@
     float: left;
     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 {
     float: none;
     margin-right: 0;
@@ -131,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,
@@ -704,6 +719,9 @@
        * @return {void}
        */
       onSearchBlur() {
+        if (this.clearSearchOnBlur) {
+          this.search = ''
+        }
         this.open = false
         this.$emit('search:blur')
       },
@@ -773,12 +791,31 @@
       dropdownClasses() {
         return {
           open: this.dropdownOpen,
+          single: !this.multiple,
+          searching: this.searching,
           searchable: this.searchable,
           unsearchable: !this.searchable,
           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
        * dropdown menu.
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -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()
+			})
+		})
+	})
 })
