@kws3/ui 1.9.0 → 1.9.3

package/CHANGELOG.mdx

@@ -1,3 +1,15 @@
+## 1.9.3
+ - Bug fix with fuzzy.js initial config hoisting
+
+## 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.

package/forms/AutoComplete.svelte

@@ -66,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
@@ -98,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 fuzzy from "fuzzy.js";
+  import { fuzzysearch } from "../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -223,7 +225,8 @@ Default value: `<span>{option.label}</span>`
     filtered_options = [], //list of options filtered by search query
     normalised_options = [], //list of options normalised
     options_loading = false, //indictaes whether async search function is running
-    mounted = false; //indicates whether component is mounted
+    mounted = false, //indicates whether component is mounted
+    fuzzyOpts = {}; // fuzzy.js lib options
 
   let list_text_size = {
     small: "7",
@@ -260,38 +263,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) {
-        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
-    });
-
-    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);
+    if (allow_fuzzy_match) {
+      debouncedFuzzySearch(filters, [...normalised_options]);
+    } else {
+      searchInStrictMode(filters, [...normalised_options]);
     }
-    setOptionsVisible(true);
   }
 
   function triggerExternalSearch(filters) {
@@ -325,14 +301,18 @@ 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 (allow_fuzzy_match) {
+      fuzzyOpts = {
+        analyzeSubTerms: true,
+        analyzeSubTermDepth: 10,
+        highlighting: {
+          after: "",
+          before: "",
+        },
+      };
       if (highlighted_results) {
-        fuzzy.highlighting.before = `<span class="h">`;
-        fuzzy.highlighting.after = "</span>";
+        fuzzyOpts.highlighting.before = `<span class="h">`;
+        fuzzyOpts.highlighting.after = "</span>";
       }
     }
 
@@ -444,25 +424,58 @@ Default value: `<span>{option.label}</span>`
     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;
+  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,
+          fuzzyOpts,
+        });
+        opts = result;
+      }
+
+      cache[idx] = opts; // storing options to current index on cache
     });
+    setFilteredOptions(cache);
+  }
 
-    let maxScore = Math.max(...OPTS.map((i) => i.score));
-    let calculatedLimit = maxScore - scoreThreshold;
+  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
+            );
+          }
+        });
+      }
 
-    OPTS = OPTS.filter(
-      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
-    );
+      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
 
-    return OPTS;
+    if (highlighted_results && !allow_fuzzy_match) {
+      filtered_options = highlightMatches(filtered_options, filters);
+    }
+    setOptionsVisible(true);
   }
 </script>

package/forms/select/MultiSelect.svelte

@@ -120,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'}"
@@ -162,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 fuzzy from "fuzzy.js";
+  import { fuzzysearch } from "../../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -324,6 +326,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     searchText = "",
     searching = false,
     showOptions = false,
+    fuzzyOpts = {}, // fuzzy.js lib options
     filteredOptions = [], //list of options filtered by search query
     normalisedOptions = [], //list of options normalised
     selectedOptions = [], //list of options that are selected
@@ -405,7 +408,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       debouncedTriggerSearch(filter);
     } else {
       if (allow_fuzzy_match) {
-        filteredOptions = fuzzySearch(filter, [...normalisedOptions]);
+        fuzzySearch(filter, [...normalisedOptions]);
       } else {
         filteredOptions = strictSearch(filter, [...normalisedOptions]);
       }
@@ -414,7 +417,11 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   function updateActiveOption() {
     if (
-      (activeOption && searching && !filteredOptions.includes(activeOption)) ||
+      (activeOption &&
+        searching &&
+        !filteredOptions.some(
+          (fo) => fo[used_value_key] === activeOption[used_value_key]
+        )) ||
       (!activeOption && searchText)
     ) {
       activeOption = filteredOptions[0];
@@ -479,9 +486,15 @@ Default value: `<span>{option[search_key] || option}</span>`
       modifiers: [sameWidthPopperModifier],
     });
 
-    if (allow_fuzzy_match && fuzzy) {
-      fuzzy.analyzeSubTerms = true;
-      fuzzy.analyzeSubTermDepth = 10;
+    if (allow_fuzzy_match) {
+      fuzzyOpts = {
+        analyzeSubTerms: true,
+        analyzeSubTermDepth: 10,
+        highlighting: {
+          after: "",
+          before: "",
+        },
+      };
     }
 
     //normalize value for single versus multiselect
@@ -714,27 +727,20 @@ Default value: `<span>{option[search_key] || option}</span>`
     });
   };
 
-  function fuzzySearch(filter, options) {
-    if (!filter) return options;
+  const fuzzySearch = debounce(searchInFuzzyMode, 200, false);
+
+  function searchInFuzzyMode(filter, options) {
+    if (!filter) {
+      filteredOptions = options;
+      return;
+    }
     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 result = fuzzysearch(filter, options, {
+        search_key: used_search_key,
+        scoreThreshold,
+        fuzzyOpts,
       });
-
-      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;
+      filteredOptions = result;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.9.0",
+  "version": "1.9.3",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,10 +25,9 @@
   "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": "8862e5927943ef0610fe5f2f37630d977aff411f"
+  "gitHead": "c6a60f59d36f7bb3a6e4475c6c727c036d235581"
 }

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,116 @@
+/**
+ * fuzzy.js v0.1.0
+ * (c) 2016 Ben Ripkens
+ * @license: MIT
+ * @params
+ *  term : haystack
+ *  query : needle
+ *  opts: {
+ *   analyzeSubTerms,
+ *   analyzeSubTermDepth
+ *   highlighting
+ *  }
+ */
+/**
+ *
+ * Adapted from fuzzy.js for @kws3/ui to work with vite prebundling
+ */
+
+/*
+ * 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 opts.analyzeSubTermDepth = 10.
+ */
+
+export default function fuzzy(term, query, opts = {}) {
+  let analyzeSubTerms = opts.analyzeSubTerms ? opts.analyzeSubTerms : false;
+  let analyzeSubTermDepth = opts.analyzeSubTermDepth
+    ? opts.analyzeSubTermDepth
+    : 10;
+  let highlighting = opts.highlighting
+    ? opts.highlighting
+    : {
+        before: "<em>",
+        after: "</em>",
+      };
+
+  let max = calcFuzzyScore(term, query, highlighting);
+  let termLength = term.length;
+
+  if (analyzeSubTerms) {
+    for (let i = 1; i < termLength && i < analyzeSubTermDepth; i++) {
+      let subTerm = term.substring(i);
+      let score = calcFuzzyScore(subTerm, query, highlighting);
+      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;
+}
+
+function calcFuzzyScore(term, query, highlighting) {
+  let score = 0;
+  let termLength = term.length;
+  let queryLength = query.length;
+  let _highlighting = "";
+  let 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...
+  let previousMatchingCharacter = -2;
+
+  for (let qi = 0; qi < queryLength && ti < termLength; qi++) {
+    let qc = query.charAt(qi);
+    let lowerQc = qc.toLowerCase();
+
+    for (; ti < termLength; ti++) {
+      let tc = term.charAt(ti);
+
+      if (lowerQc === tc.toLowerCase()) {
+        score++;
+
+        if (previousMatchingCharacter + 1 === ti) {
+          score += 2;
+        }
+
+        _highlighting += highlighting.before + tc + highlighting.after;
+        previousMatchingCharacter = ti;
+        ti++;
+        break;
+      } else {
+        _highlighting += tc;
+      }
+    }
+  }
+
+  _highlighting += term.substring(ti, term.length);
+
+  return {
+    score: score,
+    term: term,
+    query: query,
+    highlightedTerm: _highlighting,
+  };
+}

package/utils/fuzzysearch.js

@@ -1,20 +1,41 @@
-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 fuzzyOpts = opts.fuzzyOpts ? opts.fuzzyOpts : {};
+
+  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, fuzzyOpts);
+          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;
 }