Merge branch 'master' into master

README.md

@@ -16,6 +16,8 @@
 ## Documentation
 - **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
 - **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)**
+- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
+- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
 
 ## Install
 

dev.html

@@ -7,7 +7,7 @@
     <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
     <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
     <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
-    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> -->
     <style>
         html,
         body,
@@ -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>
 

docs/components/Params.vue

@@ -88,7 +88,20 @@
      * @type {Function}
      * @default {null}
      */
-    onChange: Function
+     onChange: {
+       type: Function,
+       default: function (val) {
+         this.$emit('input', val)
+       }
+     },
+
+    /**
+     * Sets the id of the input element.
+     * @type {String}
+     * @default {null}
+     */
+    inputId: {
+      type: String
     }
 
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-select",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
   "author": "Jeff Sagal <sagalbot@gmail.com>",
   "private": false,

src/components/Select.vue

@@ -89,6 +89,7 @@
   }
   /* Dropdown Menu */
   .v-select .dropdown-menu {
+    display:block;
     position: absolute;
     top: 100%;
     left: 0;
@@ -282,6 +283,7 @@
               :placeholder="searchPlaceholder"
               :readonly="!searchable"
               :style="{ width: isValueEmpty ? '100%' : 'auto' }"
+              :id="inputId"
       >
 
       <i v-if="!noDrop" ref="openIndicator" role="presentation" :class="[{'disabled': disabled}, 'open-indicator']"></i>
@@ -496,6 +498,15 @@
       noDrop: {
         type: Boolean,
         default: false
+      },
+
+      /**
+       * Sets the id of the input element.
+       * @type {String}
+       * @default {null}
+       */
+      inputId: {
+        type: String
       }
     },
 
@@ -504,8 +515,7 @@
         search: '',
         open: false,
         mutableValue: null,
-        mutableOptions: [],
+        mutableOptions: []
-				mutableLoading: false
       }
     },
 
@@ -783,7 +793,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

@@ -1077,6 +1077,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', () => {