[6.x] Replace fuse.js with fuzzysort (#11713)

Co-authored-by: Jason Varga <[email protected]>

Author: jesseleite

package-lock.json

@@ -60,7 +60,7 @@
     "codemirror": "5.65.12",
     "cookies-js": "^1.2.2",
     "floating-vue": "^5.2.2",
-    "fuse.js": "^7.0.0",
+    "fuzzysort": "^3.1.0",
     "highlight.js": "^11.7.0",
     "imask": "^7.6.1",
     "laravel-echo": "^1.16.0",

package.json

@@ -1,5 +1,5 @@
 <script>
-import Fuse from 'fuse.js';
+import fuzzysort from 'fuzzysort';
 import { sortBy } from 'lodash-es';
 
 export default {
@@ -125,14 +125,12 @@ export default {
         filterBySearch(rows) {
             if (!this.searchQuery) return rows;
 
-            const fuse = new Fuse(rows, {
-                findAllMatches: true,
-                threshold: 0.1,
-                minMatchCharLength: 2,
-                keys: this.searchableColumns,
-            });
-
-            return fuse.search(this.searchQuery).map((result) => result.item);
+            return fuzzysort
+                .go(this.searchQuery, rows, {
+                    all: true,
+                    keys: this.searchableColumns,
+                })
+                .map((result) => result.obj);
         },
 
         sortRows(rows) {

resources/js/components/data-list/DataList.vue

@@ -52,7 +52,7 @@
 <script>
 import Validator from '../field-conditions/Validator.js';
 import PublishField from '../publish/Field.vue';
-import { sortBy } from 'lodash-es';
+import { sortBy, mapValues } from 'lodash-es';
 import debounce from '@statamic/util/debounce.js';
 
 export default {
@@ -103,20 +103,18 @@ export default {
         isFilterComplete() {
             if (!this.filter) return false;
 
-            let visibleFields = _.chain(this.filter.fields)
-                .filter(function (field) {
-                    let validator = new Validator(field, this.fieldValues);
-                    return validator.passesConditions();
-                }, this)
-                .mapObject((field) => field.handle)
-                .values()
-                .value();
+            let visibleFields = this.filter.fields.filter(function (field) {
+                let validator = new Validator(field, this.fieldValues);
+                return validator.passesConditions();
+            }, this);
+
+            visibleFields = mapValues(visibleFields, (field) => field.handle);
+            visibleFields = Object.values(visibleFields);
 
             let allFieldsFilled =
-                _.chain(this.fieldValues)
-                    .filter((value, handle) => visibleFields.includes(handle) && value)
-                    .values()
-                    .value().length === visibleFields.length;
+                Object.entries(this.fieldValues || {}).filter(
+                    ([handle, value]) => visibleFields.includes(handle) && value,
+                ).length === visibleFields.length;
 
             return this.field !== null && allFieldsFilled;
         },

resources/js/components/data-list/FieldFilter.vue

@@ -3,7 +3,7 @@
         type="text"
         ref="input"
         :placeholder="__(placeholder)"
-        :value="value"
+        :value="modelValue"
         @input="emitEvent"
         @keyup.esc="reset"
         autofocus
@@ -15,26 +15,24 @@
 import debounce from '@statamic/util/debounce.js';
 
 export default {
-    props: ['value'],
-
     props: {
         placeholder: {
             type: String,
             default: 'Search...',
         },
-        value: {
+        modelValue: {
             type: String,
             default: '',
         },
     },
 
     methods: {
         emitEvent: debounce(function (event) {
-            this.$emit('input', event.target.value);
+            this.$emit('update:model-value', event.target.value);
         }, 300),
 
         reset() {
-            this.$emit('input', '');
+            this.$emit('update:model-value', '');
         },
 
         focus() {

resources/js/components/data-list/Search.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import Fuse from 'fuse.js';
+import fuzzysort from 'fuzzysort';
 import { ref } from 'vue';
 import { mapValues } from 'lodash-es';
 const loadedFieldtypes = ref(null);
@@ -198,17 +198,18 @@ export default {
             let options = this.allFieldtypes;
 
             if (this.search) {
-                const fuse = new Fuse(options, {
-                    findAllMatches: true,
-                    threshold: 0.1,
-                    keys: [
-                        { name: 'text', weight: 1 },
-                        { name: 'categories', weight: 0.1 },
-                        { name: 'keywords', weight: 0.4 },
-                    ],
-                });
-
-                options = fuse.search(this.search).map((result) => result.item);
+                return fuzzysort
+                    .go(this.search, this.allFieldtypes, {
+                        all: true,
+                        keys: ['text', (obj) => obj.categories?.join(), (obj) => obj.keywords?.join()],
+                        scoreFn: (scores) => {
+                            const textScore = scores[0]?.score * 1;
+                            const categoriesScore = scores[1]?.score * 0.1;
+                            const keywordsScore = scores[2]?.score * 0.4;
+                            return Math.max(textScore, categoriesScore, keywordsScore);
+                        },
+                    })
+                    .map((result) => result.obj);
             }
 
             return options;