Merge pull request #167 from sagalbot/mutableloading

Mutableloading

dev.html

@@ -35,7 +35,7 @@
         <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="unsearchable" :options="options" :searchable="false"></v-select>
-        <v-select placeholder="loading" loading></v-select>
+        <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
     </div>
 </body>
 

src/components/Select.vue

@@ -489,8 +489,7 @@
         search: '',
         open: false,
         mutableValue: null,
-        mutableOptions: [],
-				mutableLoading: false
+        mutableOptions: []
       }
     },
 
@@ -766,7 +765,7 @@
        * @return {Boolean} True if open
        */
       dropdownOpen() {
-        return this.noDrop ? false : this.open
+        return this.noDrop ? false : this.open && !this.mutableLoading
       },
 
       /**

src/dev.js

@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import vSelect from './components/Select.vue'
 import countries from 'docs/data/advanced.js'
+import debounce from 'lodash/debounce'
+import resource from 'vue-resource'
+
+Vue.use(resource)
 
 Vue.component('v-select', vSelect)
 
@@ -12,6 +16,19 @@ new Vue({
   data: {
     placeholder: "placeholder",
     value: null,
-    options: countries
+    options: countries,
+    ajaxRes: []
+  },
+  methods: {
+    search(search, loading) {
+      loading(true)
+      this.getRepositories(search, loading, this)
+    },
+    getRepositories: debounce((search, loading, vm) => {
+      vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
+        vm.ajaxRes = res.data.items
+        loading(false)
+      })
+    }, 250)
   }
 })

src/mixins/ajax.js

@@ -27,6 +27,12 @@ module.exports = {
 		}
 	},
 
+	data() {
+		return {
+      mutableLoading: false
+    }
+	},
+
 	watch: {
 		/**
 		 * If a callback & search text has been provided,
@@ -38,6 +44,14 @@ module.exports = {
         this.$emit('search', this.search, this.toggleLoading)
       }
 		},
+    /**
+		 * Sync the loading prop with the internal
+		 * mutable loading value.
+     * @param val
+     */
+		loading(val) {
+			this.mutableLoading = val
+		}
 	},
 
 	methods: {

test/unit/specs/Select.spec.js

@@ -1058,6 +1058,18 @@ describe('Select.vue', () => {
 				done()
 			})
 		})
+
+		it('will sync mutable loading with the loading prop', (done) => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" :loading="loading"></v-select></div>',
+				data: {loading:false}
+      }).$mount()
+			vm.loading = true
+			Vue.nextTick(() => {
+      	expect(vm.$refs.select.mutableLoading).toEqual(true)
+				done()
+			})
+		})
 	})
 
 	describe('Reset on options change', () => {