- add dev example

Jeff · Jeff · commit 73e67a673b3a · 2017-12-09T09:50:30.000-08:00
- rename `filterOptions` prop to `filterable`
- update tests
diff --git a/dev.html b/dev.html
@@ -50,6 +50,7 @@
         </v-select>
         <v-select disabled placeholder="disabled" value="disabled"></v-select>
         <v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>
+        <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
     </div>
 </body>
 
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -526,7 +526,7 @@
        * with taggable.
        * @type {Boolean}
        */
-      filterOptions: {
+      filterable: {
         type: Boolean,
         default: true
       },
@@ -915,7 +915,7 @@
        * @return {array}
        */
       filteredOptions() {
-        if (!this.filterOptions && !this.taggable) {
+        if (!this.filterable && !this.taggable) {
           return this.mutableOptions.slice()
         }
         let options = this.mutableOptions.filter((option) => {
diff --git a/src/dev.js b/src/dev.js
@@ -17,13 +17,24 @@ new Vue({
     placeholder: "placeholder",
     value: null,
     options: countries,
-    ajaxRes: []
+    ajaxRes: [],
+    people: []
   },
   methods: {
     search(search, loading) {
       loading(true)
       this.getRepositories(search, loading, this)
     },
+    searchPeople(search, loading) {
+      loading(true)
+      this.getPeople(loading, this)
+    },
+    getPeople: debounce((loading, vm) => {
+      vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
+        vm.people = res.data.data
+        loading(false)
+      })
+    }, 250),
     getRepositories: debounce((search, loading, vm) => {
       vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
         vm.ajaxRes = res.data.items
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -295,9 +295,9 @@ describe('Select.vue', () => {
 			expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
 		})
 
-		it('should not filter the array of strings if filterOptions is false', () => {
+		it('should not filter the array of strings if filterable is false', () => {
 			const vm = new Vue({
-				template: `<div><v-select ref="select" :filter-options="false" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
+				template: `<div><v-select ref="select" :filterable="false" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
 				data: {value: 'foo'}
 			}).$mount()
 			vm.$refs.select.search = 'ba'
@@ -897,9 +897,9 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
 		})
 
-		it('should add a freshly created option/tag to the options list when pushTags is true and filterOptions is false', () => {
+		it('should add a freshly created option/tag to the options list when pushTags is true and filterable is false', () => {
 			const vm = new Vue({
-				template: '<div><v-select :options="options" push-tags :value="value" :filter-options="false" :multiple="true" :taggable="true"></v-select></div>',
+				template: '<div><v-select :options="options" push-tags :value="value" :filterable="false" :multiple="true" :taggable="true"></v-select></div>',
 				components: {vSelect},
 				data: {
 					value: ['one'],
@@ -926,9 +926,9 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
 		})
 
-		it('wont add a freshly created option/tag to the options list when pushTags is false and filterOptions is false', () => {
+		it('wont add a freshly created option/tag to the options list when pushTags is false and filterable is false', () => {
 			const vm = new Vue({
-				template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" :taggable="true"></v-select></div>',
+				template: '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" :taggable="true"></v-select></div>',
 				components: {vSelect},
 				data: {
 					value: ['one'],
@@ -985,7 +985,7 @@ describe('Select.vue', () => {
 		it('should select an existing option if the search string matches an objects label from options when filter-options is false', (done) => {
 			let two = {label: 'two'}
 			const vm = new Vue({
-				template: '<div><v-select :options="options" taggable :filter-options="false"></v-select></div>',
+				template: '<div><v-select :options="options" taggable :filterable="false"></v-select></div>',
 				data: {
 					options: [{label: 'one'}, two]
 				}
@@ -1020,9 +1020,9 @@ describe('Select.vue', () => {
 			})
 		})
 
-		it('should not reset the selected value when the options property changes when filterOptions is false', (done) => {
+		it('should not reset the selected value when the options property changes when filterable is false', (done) => {
 			const vm = new Vue({
-				template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" taggable></v-select></div>',
+				template: '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" taggable></v-select></div>',
 				components: {vSelect},
 				data: {
 					value: [{label: 'one'}],
