@kws3/ui 1.8.4 → 1.9.0

package/CHANGELOG.mdx

@@ -1,3 +1,8 @@
+## 1.9.0
+ - Use new fuzzy algorithm for `AutoComplete`,`MultiSelect` and `SearchableSelect` component
+ - Add property `scoreThreshold` in `AutoComplete`,`MultiSelect` and `SearchableSelect` component to control search accuracy.
+ - Bugfix: Keep `SubmitButton` disabled while it's not ready to submit yet
+
 ## 1.8.4
  - New `AutoComplete` component
  - Make options text size match the input `size` in `MultiSelect` and `SearchableSelect`.

package/buttons/SubmitButton.svelte

@@ -33,7 +33,7 @@
     : tracker.saved
     ? 'is-success'
     : 'is-' + color}"
-  {disabled}
+  disabled={tracker.saved || tracker.saving || tracker.error || disabled}
   data-cy={cy}>
   {#if tracker.saved}
     <Icon icon="check" size={icon_size} />

package/forms/AutoComplete.svelte

@@ -15,6 +15,7 @@ Only send this prop if you want to fetch `options` asynchronously.
   @param {'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
   @param {boolean} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
+  @param {number} [scoreThreshold=5] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `5`
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
   @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
@@ -97,7 +98,7 @@ Default value: `<span>{option.label}</span>`
   import { debounce } from "@kws3/ui/utils";
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
-  import fuzzysearch from "@kws3/ui/utils/fuzzysearch";
+  import fuzzy from "fuzzy.js";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -154,6 +155,11 @@ Default value: `<span>{option.label}</span>`
    * Whether to show the highlighted or plain results in the dropdown.
    */
   export let highlighted_results = true;
+
+  /**
+   * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   */
+  export let scoreThreshold = 5;
   /**
    * Size of the input
    *  @type {''|'small'|'medium'|'large'}
@@ -260,12 +266,19 @@ Default value: `<span>{option.label}</span>`
       // iterate over each word in the search query
       let opts = [];
       if (word) {
-        opts = [...normalised_options].filter((item) => {
-          // filter out items that don't match `filter`
-          if (typeof item === "object" && item.value) {
-            return typeof item.value === "string" && match(word, item.value);
-          }
-        });
+        if (allow_fuzzy_match) {
+          opts = fuzzySearch(word, normalised_options);
+        } else {
+          opts = [...normalised_options].filter((item) => {
+            // filter out items that don't match `filter`
+            if (typeof item === "object" && item.value) {
+              return (
+                typeof item.value === "string" &&
+                item.value.toLowerCase().indexOf(word) > -1
+              );
+            }
+          });
+        }
       }
 
       cache[idx] = opts; // storing options to current index on cache
@@ -273,9 +286,9 @@ Default value: `<span>{option.label}</span>`
 
     filtered_options = Object.values(cache) // get values from cache
       .flat() // flatten array
-      .filter((v, i, self) => self.indexOf(v) === i); // remove duplicates
+      .filter((v, i, self) => i === self.findIndex((t) => t.value === v.value)); // remove duplicates
 
-    if (highlighted_results) {
+    if (highlighted_results && !allow_fuzzy_match) {
       filtered_options = highlightMatches(filtered_options, filters);
     }
     setOptionsVisible(true);
@@ -312,6 +325,17 @@ Default value: `<span>{option.label}</span>`
       modifiers: [sameWidthPopperModifier],
     });
 
+    if (allow_fuzzy_match && fuzzy) {
+      fuzzy.analyzeSubTerms = true;
+      fuzzy.analyzeSubTermDepth = 10;
+      fuzzy.highlighting.before = "";
+      fuzzy.highlighting.after = "";
+      if (highlighted_results) {
+        fuzzy.highlighting.before = `<span class="h">`;
+        fuzzy.highlighting.after = "</span>";
+      }
+    }
+
     //normalize value
     if (value === null || typeof value == "undefined") {
       value = null;
@@ -386,13 +410,6 @@ Default value: `<span>{option.label}</span>`
     fire("blur");
   }
 
-  const match = (needle, haystack) => {
-    let _hayStack = haystack.toLowerCase();
-    return allow_fuzzy_match
-      ? fuzzysearch(needle, _hayStack)
-      : _hayStack.indexOf(needle) > -1;
-  };
-
   const normaliseArraysToObjects = (arr) =>
     [...arr].map((item) =>
       typeof item === "object" ? item : { label: item, value: item }
@@ -404,7 +421,10 @@ Default value: `<span>{option.label}</span>`
     let common_chars = [...filters.join("")].filter(
       (v, i, self) => self.indexOf(v) === i
     );
-    let pattern = new RegExp(`[${common_chars.join("")}]`, "gi");
+    let pattern = new RegExp(
+      `[${common_chars.join("").replace(/\\/g, "&#92;")}]`,
+      "gi"
+    );
     return options.map((item) => {
       return {
         ...item,
@@ -423,4 +443,26 @@ Default value: `<span>{option.label}</span>`
   function sanitizeFilters(v) {
     return v && v.trim() ? v.toLowerCase().trim().split(/\s+/) : [];
   }
+
+  function fuzzySearch(word, options) {
+    let OPTS = options.map((item) => {
+      let output = fuzzy(item.value, word);
+      item = { ...output, ...item };
+      item.label = output.highlightedTerm;
+      item.score =
+        !item.score || (item.score && item.score < output.score)
+          ? output.score
+          : item.score || 0;
+      return item;
+    });
+
+    let maxScore = Math.max(...OPTS.map((i) => i.score));
+    let calculatedLimit = maxScore - scoreThreshold;
+
+    OPTS = OPTS.filter(
+      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
+    );
+
+    return OPTS;
+  }
 </script>

package/forms/select/MultiSelect.svelte

@@ -22,6 +22,7 @@ Only send this prop if you want to fetch `options` asynchronously.
 `options` prop will be ignored if this prop is set., Default: `null`
   @param {'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
+  @param {number} [scoreThreshold=3] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `3`
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
   @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
@@ -161,7 +162,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   import { debounce } from "@kws3/ui/utils";
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
-  import fuzzysearch from "@kws3/ui/utils/fuzzysearch";
+  import fuzzy from "fuzzy.js";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -230,6 +231,11 @@ Default value: `<span>{option[search_key] || option}</span>`
    * @type {'fuzzy'|'strict'}
    */
   export let search_strategy = "fuzzy";
+
+  /**
+   * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   */
+  export let scoreThreshold = 3;
   /**
    * Size of the input
    *  @type {''|'small'|'medium'|'large'}
@@ -357,11 +363,7 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   $: value, single, fillSelectedOptions();
 
-  $: if (
-    (activeOption && !filteredOptions.includes(activeOption)) ||
-    (!activeOption && searchText)
-  )
-    activeOption = filteredOptions[0];
+  $: activeOption, searchText, filteredOptions, updateActiveOption();
 
   //TODO: optimise isSelected function
   $: isSelected = (option) => {
@@ -402,23 +404,26 @@ Default value: `<span>{option[search_key] || option}</span>`
     if (asyncMode && searching) {
       debouncedTriggerSearch(filter);
     } else {
-      filteredOptions = normalisedOptions.slice().filter((item) => {
-        // filter out items that don't match `filter`
-        if (typeof item === "object") {
-          if (used_search_key) {
-            return (
-              typeof item[used_search_key] === "string" &&
-              match(filter, item[used_search_key])
-            );
-          } else {
-            for (var key in item) {
-              return typeof item[key] === "string" && match(filter, item[key]);
-            }
-          }
-        } else {
-          return match(filter, item);
-        }
-      });
+      if (allow_fuzzy_match) {
+        filteredOptions = fuzzySearch(filter, [...normalisedOptions]);
+      } else {
+        filteredOptions = strictSearch(filter, [...normalisedOptions]);
+      }
+    }
+  }
+
+  function updateActiveOption() {
+    if (
+      (activeOption && searching && !filteredOptions.includes(activeOption)) ||
+      (!activeOption && searchText)
+    ) {
+      activeOption = filteredOptions[0];
+    } else {
+      if (allow_fuzzy_match) {
+        activeOption = filteredOptions.find((opts) =>
+          matchesValue(activeOption, opts)
+        );
+      }
     }
   }
 
@@ -474,6 +479,11 @@ Default value: `<span>{option[search_key] || option}</span>`
       modifiers: [sameWidthPopperModifier],
     });
 
+    if (allow_fuzzy_match && fuzzy) {
+      fuzzy.analyzeSubTerms = true;
+      fuzzy.analyzeSubTermDepth = 10;
+    }
+
     //normalize value for single versus multiselect
     if (value === null || typeof value == "undefined") {
       value = single ? null : [];
@@ -674,16 +684,15 @@ Default value: `<span>{option[search_key] || option}</span>`
     if (_value === null || typeof _value == "undefined") {
       return false;
     }
-    return (
-      `${_value[used_value_key] || _value}` === `${_option[used_value_key]}`
-    );
+    let value =
+      typeof _value === "object" && `${used_value_key}` in _value
+        ? _value[used_value_key]
+        : _value;
+    return `${value}` === `${_option[used_value_key]}`;
   };
 
   const match = (needle, haystack) => {
-    let _hayStack = haystack.toLowerCase();
-    return allow_fuzzy_match
-      ? fuzzysearch(needle, _hayStack)
-      : _hayStack.indexOf(needle) > -1;
+    return haystack.toLowerCase().indexOf(needle) > -1;
   };
 
   const normaliseArraysToObjects = (arr) => {
@@ -704,4 +713,48 @@ Default value: `<span>{option[search_key] || option}</span>`
       searching = false;
     });
   };
+
+  function fuzzySearch(filter, options) {
+    if (!filter) return options;
+    if (options.length) {
+      let OPTS = options.map((item) => {
+        let output = fuzzy(item[used_search_key], filter);
+        item = { ...output, original: item };
+        item.score =
+          !item.score || (item.score && item.score < output.score)
+            ? output.score
+            : item.score || 0;
+        return item;
+      });
+
+      let maxScore = Math.max(...OPTS.map((i) => i.score));
+      let calculatedLimit = maxScore - scoreThreshold;
+
+      OPTS = OPTS.filter(
+        (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
+      ).map((o) => o.original);
+
+      return OPTS;
+    }
+  }
+
+  function strictSearch(filter, options) {
+    return options.filter((item) => {
+      // filter out items that don't match `filter`
+      if (typeof item === "object") {
+        if (used_search_key) {
+          return (
+            typeof item[used_search_key] === "string" &&
+            match(filter, item[used_search_key])
+          );
+        } else {
+          for (var key in item) {
+            return typeof item[key] === "string" && match(filter, item[key]);
+          }
+        }
+      } else {
+        return match(filter, item);
+      }
+    });
+  }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,9 +25,10 @@
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
+    "fuzzy.js": "^0.1.0",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "440bdaf5e02a0a7ab0b69c2122c2c56da3485c1f"
+  "gitHead": "8862e5927943ef0610fe5f2f37630d977aff411f"
 }