@kws3/ui 1.8.4 → 1.9.2

package/CHANGELOG.mdx

@@ -1,3 +1,17 @@
+## 1.9.2
+ - Bug fix with fuzzy.js and Vite prebundling
+ - Debounce fuzzy searches
+ - Expose `@kws3/ui/utils/fuzzysearch` as a reusable function
+
+## 1.9.1
+ - `SearchableSelect` and `MultiSelect`: match colors of dropdown area to theme color when dropdown area is inside a `Portal`
+ - `AutoComplete`: match colors of dropdown area to theme color when dropdown area is inside a `Portal`
+
+## 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: `""`
@@ -65,7 +66,9 @@ Default value: `<span>{option.label}</span>`
       class="button is-paddingless delete is-medium is-loading" />
   {/if}
   {#if rootContainer}
-    <div class="kws-autocomplete" use:portal={dropdown_portal}>
+    <div
+      class="kws-autocomplete is-{color || 'primary'}"
+      use:portal={dropdown_portal}>
       <ul bind:this={dropdown} class="options" class:hidden={!show_options}>
         {#each filtered_options as option}
           <li
@@ -97,7 +100,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, fuzzysearch } from "../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -154,6 +157,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'}
@@ -254,31 +262,11 @@ Default value: `<span>{option.label}</span>`
   }
 
   function triggerSearch(filters) {
-    let cache = {};
-    //TODO - can optimize more for very long lists
-    filters.forEach((word, idx) => {
-      // 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);
-          }
-        });
-      }
-
-      cache[idx] = opts; // storing options to current index on cache
-    });
-
-    filtered_options = Object.values(cache) // get values from cache
-      .flat() // flatten array
-      .filter((v, i, self) => self.indexOf(v) === i); // remove duplicates
-
-    if (highlighted_results) {
-      filtered_options = highlightMatches(filtered_options, filters);
+    if (allow_fuzzy_match) {
+      debouncedFuzzySearch(filters, [...normalised_options]);
+    } else {
+      searchInStrictMode(filters, [...normalised_options]);
     }
-    setOptionsVisible(true);
   }
 
   function triggerExternalSearch(filters) {
@@ -312,6 +300,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 +385,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 +396,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 +418,58 @@ Default value: `<span>{option.label}</span>`
   function sanitizeFilters(v) {
     return v && v.trim() ? v.toLowerCase().trim().split(/\s+/) : [];
   }
+
+  const debouncedFuzzySearch = debounce(searchInFuzzyMode, 200, false);
+
+  function searchInFuzzyMode(filters, options) {
+    let cache = {};
+    //TODO - can optimize more for very long lists
+    filters.forEach((word, idx) => {
+      // iterate over each word in the search query
+      let opts = [];
+      if (word) {
+        let result = fuzzysearch(word, options, {
+          search_key: "label",
+          scoreThreshold,
+        });
+        opts = result;
+      }
+
+      cache[idx] = opts; // storing options to current index on cache
+    });
+    setFilteredOptions(cache);
+  }
+
+  function searchInStrictMode(filters, options) {
+    let cache = {};
+    filters.forEach((word, idx) => {
+      // iterate over each word in the search query
+      let opts = [];
+      if (word) {
+        opts = 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
+    });
+    setFilteredOptions(cache, filters);
+  }
+
+  function setFilteredOptions(cache, filters) {
+    filtered_options = Object.values(cache) // get values from cache
+      .flat() // flatten array
+      .filter((v, i, self) => i === self.findIndex((t) => t.value === v.value)); // remove duplicates
+
+    if (highlighted_results && !allow_fuzzy_match) {
+      filtered_options = highlightMatches(filtered_options, filters);
+    }
+    setOptionsVisible(true);
+  }
 </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: `""`
@@ -119,7 +120,9 @@ Default value: `<span>{option[search_key] || option}</span>`
       style={shouldShowClearAll ? "" : "display: none;"} />
   {/if}
   {#if rootContainer}
-    <div class="kws-searchableselect" use:portal={dropdown_portal}>
+    <div
+      class="kws-searchableselect is-{color || 'primary'}"
+      use:portal={dropdown_portal}>
       <ul
         bind:this={dropdown}
         class="options {single ? 'is-single' : 'is-multi'}"
@@ -161,7 +164,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, fuzzysearch } from "../../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -230,6 +233,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 +365,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 +406,30 @@ 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) {
+        fuzzySearch(filter, [...normalisedOptions]);
+      } else {
+        filteredOptions = strictSearch(filter, [...normalisedOptions]);
+      }
+    }
+  }
+
+  function updateActiveOption() {
+    if (
+      (activeOption &&
+        searching &&
+        !filteredOptions.some(
+          (fo) => fo[used_value_key] === activeOption[used_value_key]
+        )) ||
+      (!activeOption && searchText)
+    ) {
+      activeOption = filteredOptions[0];
+    } else {
+      if (allow_fuzzy_match) {
+        activeOption = filteredOptions.find((opts) =>
+          matchesValue(activeOption, opts)
+        );
+      }
     }
   }
 
@@ -474,6 +485,13 @@ Default value: `<span>{option[search_key] || option}</span>`
       modifiers: [sameWidthPopperModifier],
     });
 
+    if (allow_fuzzy_match && fuzzy) {
+      fuzzy.analyzeSubTerms = true;
+      fuzzy.analyzeSubTermDepth = 10;
+      fuzzy.highlighting.before = "";
+      fuzzy.highlighting.after = "";
+    }
+
     //normalize value for single versus multiselect
     if (value === null || typeof value == "undefined") {
       value = single ? null : [];
@@ -674,16 +692,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 +721,40 @@ Default value: `<span>{option[search_key] || option}</span>`
       searching = false;
     });
   };
+
+  const fuzzySearch = debounce(searchInFuzzyMode, 200, false);
+
+  function searchInFuzzyMode(filter, options) {
+    if (!filter) {
+      filteredOptions = options;
+      return;
+    }
+    if (options.length) {
+      let result = fuzzysearch(filter, options, {
+        search_key: used_search_key,
+        scoreThreshold,
+      });
+      filteredOptions = result;
+    }
+  }
+
+  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.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -29,5 +29,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "440bdaf5e02a0a7ab0b69c2122c2c56da3485c1f"
+  "gitHead": "9e6e5f8d4dbb1e5f0a40e3dade66bdfd5f31fd4d"
 }

package/styles/Select.scss

@@ -187,7 +187,7 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
   $color-invert: nth($pair, 2);
   $color-light: findLightColor($color);
   $color-dark: findDarkColor($color);
-  .searchableselect {
+  .kws-searchableselect {
     &.is-#{$name} {
       border-color: $color;
       &:focus-within {

package/utils/fuzzy.js

@@ -0,0 +1,117 @@
+/**
+ * fuzzy.js v0.1.0
+ * (c) 2016 Ben Ripkens
+ * @license: MIT
+ */
+/**
+ *
+ * Adapted from fuzzy.js for @kws3/ui to work with vite prebundling
+ */
+
+var fuzzy = function fuzzy(term, query) {
+  var max = calcFuzzyScore(term, query);
+  var termLength = term.length;
+
+  if (fuzzy.analyzeSubTerms) {
+    for (var i = 1; i < termLength && i < fuzzy.analyzeSubTermDepth; i++) {
+      var subTerm = term.substring(i);
+      var score = calcFuzzyScore(subTerm, query);
+      if (score.score > max.score) {
+        // we need to correct 'term' and 'matchedTerm', as calcFuzzyScore
+        // does not now that it operates on a substring. Doing it only for
+        // new maximum score to save some performance.
+        score.term = term;
+        score.highlightedTerm = term.substring(0, i) + score.highlightedTerm;
+        max = score;
+      }
+    }
+  }
+
+  return max;
+};
+
+var calcFuzzyScore = function calcFuzzyScore(term, query) {
+  var score = 0;
+  var termLength = term.length;
+  var queryLength = query.length;
+  var highlighting = "";
+  var ti = 0;
+  // -1 would not work as this would break the calculations of bonus
+  // points for subsequent character matches. Something like
+  // Number.MIN_VALUE would be more appropriate, but unfortunately
+  // Number.MIN_VALUE + 1 equals 1...
+  var previousMatchingCharacter = -2;
+
+  for (var qi = 0; qi < queryLength && ti < termLength; qi++) {
+    var qc = query.charAt(qi);
+    var lowerQc = qc.toLowerCase();
+
+    for (; ti < termLength; ti++) {
+      var tc = term.charAt(ti);
+
+      if (lowerQc === tc.toLowerCase()) {
+        score++;
+
+        if (previousMatchingCharacter + 1 === ti) {
+          score += 2;
+        }
+
+        highlighting +=
+          fuzzy.highlighting.before + tc + fuzzy.highlighting.after;
+        previousMatchingCharacter = ti;
+        ti++;
+        break;
+      } else {
+        highlighting += tc;
+      }
+    }
+  }
+
+  highlighting += term.substring(ti, term.length);
+
+  return {
+    score: score,
+    term: term,
+    query: query,
+    highlightedTerm: highlighting,
+  };
+};
+
+fuzzy.matchComparator = function matchComparator(m1, m2) {
+  return m2.score - m1.score !== 0
+    ? m2.score - m1.score
+    : m1.term.length - m2.term.length;
+};
+
+/*
+ * Whether or not fuzzy.js should analyze sub-terms, i.e. also
+ * check term starting positions != 0.
+ *
+ * Example:
+ * Given the term 'Halleluja' and query 'luja'
+ *
+ * Fuzzy.js scores this combination with an 8, when analyzeSubTerms is
+ * set to false, as the following matching string will be calculated:
+ * Ha[l]lel[uja]
+ *
+ * If you activate sub temr analysis though, the query will reach a score
+ * of 10, as the matching string looks as following:
+ * Halle[luja]
+ *
+ * Naturally, the second version is more expensive than the first one.
+ * You should therefore configure how many sub terms you which to analyse.
+ * This can be configured through fuzzy.analyzeSubTermDepth = 10.
+ */
+fuzzy.analyzeSubTerms = false;
+
+/*
+ * How many sub terms should be analyzed.
+ */
+fuzzy.analyzeSubTermDepth = 10;
+
+fuzzy.highlighting = {
+  before: "<em>",
+  after: "</em>",
+};
+
+export default fuzzy;

package/utils/fuzzysearch.js

@@ -1,20 +1,42 @@
-export default function fuzzysearch(needle, haystack) {
-  var tlen = haystack.length;
-  var qlen = needle.length;
-  if (qlen > tlen) {
-    return false;
-  }
-  if (qlen === tlen) {
-    return needle === haystack;
-  }
-  outer: for (var i = 0, j = 0; i < qlen; i++) {
-    var nch = needle.charCodeAt(i);
-    while (j < tlen) {
-      if (haystack.charCodeAt(j++) === nch) {
-        continue outer;
+import fuzzy from "./fuzzy.js";
+
+export function fuzzysearch(needle, haystack, opts) {
+  let search_key = defaultValue(opts, "search_key", "value");
+  let scoreThreshold = defaultValue(opts, "scoreThreshold", 5);
+
+  let OPTS = haystack.map((option) => {
+    let item = { ...option };
+    item.original = { ...option };
+    if (typeof item === "object") {
+      if (!Array.isArray(search_key)) {
+        search_key = [search_key];
       }
+
+      search_key.forEach((s_key) => {
+        if (`${s_key}` in item) {
+          let output = fuzzy(option[s_key], needle);
+          item.original[s_key] = output.highlightedTerm;
+          item.score =
+            !item.score || (item.score && item.score < output.score)
+              ? output.score
+              : item.score || 0;
+        }
+      });
     }
-    return false;
-  }
-  return true;
+    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.map((i) => i.original);
 }
+
+function defaultValue(opts, key, value) {
+  return opts && opts[key] ? opts[key] : value;
+}
+
+export { fuzzy };