Merge branch 'feature/custom-filter'

Jeff · Jeff · commit a3f62ad7333b · 2018-01-15T20:02:51.000-08:00
# Conflicts:
#	dev.html
#	yarn.lock
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,7 @@
 language: node_js
 node_js:
-  - "5"
-  - "5.1"
+  - node
+  - 8
+  - 6
 after_success:
   - codeclimate-test-reporter < ./test/unit/coverage/lcov.info
diff --git a/dev.html b/dev.html
@@ -31,6 +31,7 @@
     <div id="app">
         <v-select placeholder="default" :options="options"></v-select>
         <v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
+        <v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></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>
@@ -47,8 +48,14 @@
             </template>
         </v-select>
         <v-select placeholder="disabled" disabled  value="disabled"></v-select>
-        <v-select placeholder="disabled multiple" disabled multiple  :value="['disabled', 'multiple']"></v-select>
+        <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
         <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
+        <v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
+            <template slot="option" scope="option">
+                <strong>{{ option.title }}</strong><br>
+                <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
+            </template>
+        </v-select>
     </div>
 </body>
 
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.4",
     "function-bind": "^1.0.2",
+    "fuse.js": "^3.2.0",
     "gh-pages": "^0.11.0",
     "gitbook-plugin-codepen": "^0.1.2",
     "gitbook-plugin-edit-link": "^2.0.2",
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -525,21 +525,6 @@
         }
       },
 
-      /**
-       * Callback to filter the search result the label text.
-       * @type   {Function}
-       * @param  {Object || String} option
-       * @param  {String} label
-       * @param  {String} search
-       * @return {Boolean}
-       */
-      filterFunction: {
-        type: Function,
-        default(option, label, search) {
-          return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
-        }
-      },
-
       /**
        * An optional callback function that is called each time the selected
        * value(s) change. When integrating with Vuex, use this callback to trigger
@@ -593,6 +578,47 @@
         default: true
       },
 
+      /**
+       * Callback to determine if the provided option should
+       * match the current search text. Used to determine
+       * if the option should be displayed.
+       * @type   {Function}
+       * @param  {Object || String} option
+       * @param  {String} label
+       * @param  {String} search
+       * @return {Boolean}
+       */
+      filterBy: {
+        type: Function,
+        default(option, label, search) {
+          return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
+        }
+      },
+
+      /**
+       * Callback to filter results when search text
+       * is provided. Default implementation loops
+       * each option, and returns the result of
+       * this.filterBy.
+       * @type   {Function}
+       * @param  {Array} list of options
+       * @param  {String} search text
+       * @param  {Object} vSelect instance
+       * @return {Boolean}
+       */
+      filter: {
+        "type": Function,
+        default(options, search) {
+          return options.filter((option) => {
+            let label = this.getOptionLabel(option)
+            if (typeof label === 'number') {
+              label = label.toString()
+            }
+            return this.filterBy(option, label, search)
+          });
+        }
+      },
+
       /**
        * User defined function for adding Options
        * @type {Function}
@@ -988,13 +1014,7 @@
         if (!this.filterable && !this.taggable) {
           return this.mutableOptions.slice()
         }
-        let options = this.mutableOptions.filter((option) => {
-          let label = this.getOptionLabel(option)
-          if (typeof label === 'number') {
-            label = label.toString()
-          }
-          return this.filterFunction(option, label, this.search)
-        })
+        let options = this.search.length ? this.filter(this.mutableOptions, this.search, this) : this.mutableOptions;
         if (this.taggable && this.search.length && !this.optionExists(this.search)) {
           options.unshift(this.search)
         }
diff --git a/src/dev.js b/src/dev.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
-import vSelect from './components/Select.vue'
-import countries from 'docs/data/advanced.js'
+import Fuse from 'fuse.js'
 import debounce from 'lodash/debounce'
 import resource from 'vue-resource'
+import vSelect from './components/Select.vue'
+import countries from 'docs/data/advanced.js'
+import fuseSearchOptions from './fuseSearchOptions'
 
 Vue.use(resource)
 
@@ -18,11 +20,12 @@ new Vue({
     value: null,
     options: countries,
     ajaxRes: [],
-    people: []
+    people: [],
+    fuseSearchOptions
   },
   methods: {
     search(search, loading) {
-      loading(true)
+      loading(true);
       this.getRepositories(search, loading, this)
     },
     searchPeople(search, loading) {
@@ -37,9 +40,14 @@ new Vue({
     }, 250),
     getRepositories: debounce((search, loading, vm) => {
       vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
-        vm.ajaxRes = res.data.items
+        vm.ajaxRes = res.data.items;
         loading(false)
       })
-    }, 250)
+    }, 250),
+    fuseSearch(options, search) {
+      return new Fuse(options, {
+        keys: ['title', 'author.firstName', 'author.lastName'],
+      }).search(search);
+    }
   }
-})
+});
diff --git a/src/fuseSearchOptions.js b/src/fuseSearchOptions.js
@@ -0,0 +1,163 @@
+export default [
+  {
+    title: "Old Man's War",
+    author: {
+      firstName: "John",
+      lastName: "Scalzi"
+    }
+  },
+  {
+    title: "The Lock Artist",
+    author: {
+      firstName: "Steve",
+      lastName: "Hamilton"
+    }
+  },
+  {
+    title: "HTML5",
+    author: {
+      firstName: "Remy",
+      lastName: "Sharp"
+    }
+  },
+  {
+    title: "Right Ho Jeeves",
+    author: {
+      firstName: "P.D",
+      lastName: "Woodhouse"
+    }
+  },
+  {
+    title: "The Code of the Wooster",
+    author: {
+      firstName: "P.D",
+      lastName: "Woodhouse"
+    }
+  },
+  {
+    title: "Thank You Jeeves",
+    author: {
+      firstName: "P.D",
+      lastName: "Woodhouse"
+    }
+  },
+  {
+    title: "The DaVinci Code",
+    author: {
+      firstName: "Dan",
+      lastName: "Brown"
+    }
+  },
+  {
+    title: "Angels & Demons",
+    author: {
+      firstName: "Dan",
+      lastName: "Brown"
+    }
+  },
+  {
+    title: "The Silmarillion",
+    author: {
+      firstName: "J.R.R",
+      lastName: "Tolkien"
+    }
+  },
+  {
+    title: "Syrup",
+    author: {
+      firstName: "Max",
+      lastName: "Barry"
+    }
+  },
+  {
+    title: "The Lost Symbol",
+    author: {
+      firstName: "Dan",
+      lastName: "Brown"
+    }
+  },
+  {
+    title: "The Book of Lies",
+    author: {
+      firstName: "Brad",
+      lastName: "Meltzer"
+    }
+  },
+  {
+    title: "Lamb",
+    author: {
+      firstName: "Christopher",
+      lastName: "Moore"
+    }
+  },
+  {
+    title: "Fool",
+    author: {
+      firstName: "Christopher",
+      lastName: "Moore"
+    }
+  },
+  {
+    title: "Incompetence",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant"
+    }
+  },
+  {
+    title: "Fat",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant"
+    }
+  },
+  {
+    title: "Colony",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant"
+    }
+  },
+  {
+    title: "Backwards, Red Dwarf",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant"
+    }
+  },
+  {
+    title: "The Grand Design",
+    author: {
+      firstName: "Stephen",
+      lastName: "Hawking"
+    }
+  },
+  {
+    title: "The Book of Samson",
+    author: {
+      firstName: "David",
+      lastName: "Maine"
+    }
+  },
+  {
+    title: "The Preservationist",
+    author: {
+      firstName: "David",
+      lastName: "Maine"
+    }
+  },
+  {
+    title: "Fallen",
+    author: {
+      firstName: "David",
+      lastName: "Maine"
+    }
+  },
+  {
+    title: "Monster 1959",
+    author: {
+      firstName: "David",
+      lastName: "Maine"
+    }
+  }
+]
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
@@ -322,9 +322,9 @@ describe('Select.vue', () => {
 			expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify([{label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]))
 		})
 
-		it('can use a custom filterFunction passed via props', ()=>{
+		it('can determine if a given option should match the current search text', () => {
 			const vm = new Vue({
-				template: `<div><v-select ref="select" :filterFunction="customFn" :options="[{label: 'Aoo', value: 'foo'}, {label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]" v-model="value"></v-select></div>`,
+				template: `<div><v-select ref="select" :filter-by="customFn" :options="[{label: 'Aoo', value: 'foo'}, {label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]" v-model="value"></v-select></div>`,
 				data: {value: 'foo'},
 				methods:{
 					customFn: (option, label, search) => label.match(new RegExp('^' + search, 'i'))
@@ -333,6 +333,35 @@ describe('Select.vue', () => {
 			vm.$refs.select.search = 'a'
 			expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify([{label: 'Aoo', value: 'foo'}]))
 		})
+
+		it('can use a custom filtering method', () => {
+      const vm = new Vue({
+        template: `<div><v-select ref="select" :filter="customFn" :options="options" v-model="value"></v-select></div>`,
+        data: {
+        	options: ['foo','bar','baz'],
+        	value: 'foo'
+				},
+        methods:{
+          customFn(options, search, vm) {
+          	return options.filter(option => option.indexOf(search) > 0)
+					}
+        }
+      }).$mount()
+      vm.$refs.select.search = 'a'
+      expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify(['bar','baz']))
+		})
+
+		it('can filter arrays of numbers', () => {
+      const vm = new Vue({
+        template: `<div><v-select ref="select" :options="options"></v-select></div>`,
+        data: {
+        	options: [1,5,10],
+        	value: 'foo'
+				},
+      }).$mount()
+      vm.$refs.select.search = '5'
+      expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify([5]))
+		})
 	})
 
 	describe('Toggling Dropdown', () => {
@@ -780,6 +809,7 @@ describe('Select.vue', () => {
 			const vm = new Vue({
 				template: '<div><v-select :options="[{}]"></v-select></div>',
 			}).$mount()
+			vm.$children[0].open = true
 			Vue.nextTick(() => {
 				expect(console.warn).toHaveBeenCalledWith(
 						'[vue-select warn]: Label key "option.label" does not exist in options object {}.' +
diff --git a/yarn.lock b/yarn.lock
