From e9ea2d99f319b5fd18bebce3a95cdfc36a14f675 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Fri, 13 Mar 2020 09:19:28 -0700
Subject: [PATCH] docs(filtering): Add Filtering Docs (#1017)

docs(infinite-scroll): improve example (#1017)
---
 .../components/ClearButtonOverride.vue        |  3 +-
 docs/.vuepress/components/FuseFilter.vue      | 31 +++++++++++++++++++
 docs/.vuepress/components/InfiniteScroll.vue  | 20 +++++-------
 docs/.vuepress/components/Sandbox.vue         |  5 ---
 docs/.vuepress/config.js                      |  3 +-
 docs/guide/filtering.md                       | 19 ++++++++++++
 docs/guide/infinite-scroll.md                 |  4 +--
 7 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 docs/.vuepress/components/FuseFilter.vue
 create mode 100644 docs/guide/filtering.md

diff --git a/docs/.vuepress/components/ClearButtonOverride.vue b/docs/.vuepress/components/ClearButtonOverride.vue
index 837ea68..c533883 100644
--- a/docs/.vuepress/components/ClearButtonOverride.vue
+++ b/docs/.vuepress/components/ClearButtonOverride.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
     <v-select
+            placeholder="choose a country"
             v-model="selected"
-            :options="['Canada', 'United States']"
             :components="{Deselect}"
+            :options="['Canada', 'United States']"
     />
   </div>
 </template>
diff --git a/docs/.vuepress/components/FuseFilter.vue b/docs/.vuepress/components/FuseFilter.vue
new file mode 100644
index 0000000..a73e277
--- /dev/null
+++ b/docs/.vuepress/components/FuseFilter.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-select :filter="fuseSearch" :options="books" :getOptionLabel="option => option.title">
+    <template #option="{author, title}">
+      {{ title }} <br>
+      <cite>{{ author.firstName }} {{ author.lastName }}</cite>
+    </template>
+  </v-select>
+</template>
+
+<script>
+import Fuse from 'fuse.js';
+import books from '../data/books';
+
+export default {
+  computed: {
+    books: () => books,
+  },
+  methods: {
+    fuseSearch (options, search) {
+      const fuse = new Fuse(options, {
+        keys: ['title', 'author.firstName', 'author.lastName'],
+        shouldSort: true,
+      });
+      return search.length ? fuse.search(search) : fuse.list;
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/docs/.vuepress/components/InfiniteScroll.vue b/docs/.vuepress/components/InfiniteScroll.vue
index f3fdd8b..677d8fb 100644
--- a/docs/.vuepress/components/InfiniteScroll.vue
+++ b/docs/.vuepress/components/InfiniteScroll.vue
@@ -5,7 +5,6 @@
     @open="onOpen"
     @close="onClose"
     @search="query => search = query"
-    ref="select"
   >
     <template #list-footer v-if="hasNextPage">
       <li ref="load" class="loader">
@@ -17,16 +16,16 @@
 
 <script>
 import countries from '../data/countries';
-import vSelect from '../../../src/components/Select'
 
 export default {
   name: "InfiniteScroll",
-  components: {vSelect},
-  data: () => ({
-    observer: null,
-    limit: 10,
-    search: ''
-  }),
+  data () {
+    return {
+      observer: new IntersectionObserver(this.infiniteScroll),
+      limit: 10,
+      search: ''
+    }
+  },
   computed: {
     filtered () {
       return countries.filter(country => country.includes(this.search));
@@ -35,12 +34,9 @@ export default {
       return this.filtered.slice(0, this.limit);
     },
     hasNextPage () {
-      return this.paginated.length + 10 < this.filtered.length;
+      return this.paginated.length < this.filtered.length;
     },
   },
-  mounted () {
-    this.observer = new IntersectionObserver(this.infiniteScroll);
-  },
   methods: {
     async onOpen () {
       if (this.hasNextPage) {
diff --git a/docs/.vuepress/components/Sandbox.vue b/docs/.vuepress/components/Sandbox.vue
index 7e7126c..4b5a777 100644
--- a/docs/.vuepress/components/Sandbox.vue
+++ b/docs/.vuepress/components/Sandbox.vue
@@ -226,11 +226,6 @@ export default {
           loading(false);
         });
     }, 250),
-    fuseSearch (options, search) {
-      return new Fuse(options, {
-        keys: ['title', 'author.firstName', 'author.lastName'],
-      }).search(search);
-    },
   },
 };
 </script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 9cff15a..a7cd0d0 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -131,7 +131,8 @@ module.exports = {
           collapsable: false,
           children: [
             ['guide/keydown', 'Keydown Events'],
-            ['guide/positioning', 'Dropdown Position']
+            ['guide/positioning', 'Dropdown Position'],
+            ['guide/filtering', 'Option Filtering'],
           ],
         },
         {
diff --git a/docs/guide/filtering.md b/docs/guide/filtering.md
new file mode 100644
index 0000000..c05bd8c
--- /dev/null
+++ b/docs/guide/filtering.md
@@ -0,0 +1,19 @@
+Vue Select provides two props accepting `functions` that can be used to implement custom filtering
+algorithms.
+
+- `filter` <Badge text="v2.5.0+" />
+- `filterBy` <Badge text="v2.5.0+" />
+
+By default, the component will perform a very basic check to see if an options label includes
+the current search text. If you're using scoped slots, you might have information within the
+option templates that should be searchable. Or maybe you just want a better search algorithm that
+can do fuzzy search matching.
+
+## Filtering with Fuse.js
+
+You can use the `filter` and `filterBy` props to hook right into something like
+[Fuse.js](https://fusejs.io/) that can handle searching multiple object keys with fuzzy matchings.
+
+<FuseFilter />
+
+<<< @/.vuepress/components/FuseFilter.vue
diff --git a/docs/guide/infinite-scroll.md b/docs/guide/infinite-scroll.md
index 2444581..6583d16 100644
--- a/docs/guide/infinite-scroll.md
+++ b/docs/guide/infinite-scroll.md
@@ -4,8 +4,8 @@ by hooking into the `open`, `close`, and `search` events, along with the `filter
 
 Let's break down the example below, starting with the `data`.
 
-- `observer` - when the component is mounted, a new `IntersectionObserver` will be set here
-- `limit` - the number of options to display 'per page'
+- `observer` - a new `IntersectionObserver` with `infiniteScroll` set as the callback
+- `limit` - the number of options to display
 - `search` - since we've disabled Vue Selects filtering, we'll need to filter options ourselves
 
 When Vue Select opens, the `open` event is emitted and `onOpen` will be called. We wait for