@kws3/ui 1.9.2 → 1.9.3

package/CHANGELOG.mdx

@@ -1,3 +1,6 @@
+## 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

package/forms/AutoComplete.svelte

@@ -100,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, fuzzysearch } from "../utils/fuzzysearch";
+  import { fuzzysearch } from "../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -225,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",
@@ -300,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>";
       }
     }
 
@@ -431,6 +436,7 @@ Default value: `<span>{option.label}</span>`
         let result = fuzzysearch(word, options, {
           search_key: "label",
           scoreThreshold,
+          fuzzyOpts,
         });
         opts = result;
       }

package/forms/select/MultiSelect.svelte

@@ -164,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, fuzzysearch } from "../../utils/fuzzysearch";
+  import { fuzzysearch } from "../../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -326,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
@@ -485,11 +486,15 @@ 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 = "";
+    if (allow_fuzzy_match) {
+      fuzzyOpts = {
+        analyzeSubTerms: true,
+        analyzeSubTermDepth: 10,
+        highlighting: {
+          after: "",
+          before: "",
+        },
+      };
     }
 
     //normalize value for single versus multiselect
@@ -733,6 +738,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       let result = fuzzysearch(filter, options, {
         search_key: used_search_key,
         scoreThreshold,
+        fuzzyOpts,
       });
       filteredOptions = result;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "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": "9e6e5f8d4dbb1e5f0a40e3dade66bdfd5f31fd4d"
+  "gitHead": "c6a60f59d36f7bb3a6e4475c6c727c036d235581"
 }

package/utils/fuzzy.js

@@ -2,20 +2,59 @@
  * 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
  */
 
-var fuzzy = function fuzzy(term, query) {
-  var max = calcFuzzyScore(term, query);
-  var termLength = 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 opts.analyzeSubTermDepth = 10.
+ */
 
-  if (fuzzy.analyzeSubTerms) {
-    for (var i = 1; i < termLength && i < fuzzy.analyzeSubTermDepth; i++) {
-      var subTerm = term.substring(i);
-      var score = calcFuzzyScore(subTerm, query);
+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
@@ -28,26 +67,26 @@ var fuzzy = function fuzzy(term, query) {
   }
 
   return max;
-};
-
-var calcFuzzyScore = function calcFuzzyScore(term, query) {
-  var score = 0;
-  var termLength = term.length;
-  var queryLength = query.length;
-  var highlighting = "";
-  var ti = 0;
+}
+
+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...
-  var previousMatchingCharacter = -2;
+  let previousMatchingCharacter = -2;
 
-  for (var qi = 0; qi < queryLength && ti < termLength; qi++) {
-    var qc = query.charAt(qi);
-    var lowerQc = qc.toLowerCase();
+  for (let qi = 0; qi < queryLength && ti < termLength; qi++) {
+    let qc = query.charAt(qi);
+    let lowerQc = qc.toLowerCase();
 
     for (; ti < termLength; ti++) {
-      var tc = term.charAt(ti);
+      let tc = term.charAt(ti);
 
       if (lowerQc === tc.toLowerCase()) {
         score++;
@@ -56,62 +95,22 @@ var calcFuzzyScore = function calcFuzzyScore(term, query) {
           score += 2;
         }
 
-        highlighting +=
-          fuzzy.highlighting.before + tc + fuzzy.highlighting.after;
+        _highlighting += highlighting.before + tc + highlighting.after;
         previousMatchingCharacter = ti;
         ti++;
         break;
       } else {
-        highlighting += tc;
+        _highlighting += tc;
       }
     }
   }
 
-  highlighting += term.substring(ti, term.length);
+  _highlighting += term.substring(ti, term.length);
 
   return {
     score: score,
     term: term,
     query: query,
-    highlightedTerm: highlighting,
+    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

@@ -3,6 +3,7 @@ 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 };
@@ -14,7 +15,7 @@ export function fuzzysearch(needle, haystack, opts) {
 
       search_key.forEach((s_key) => {
         if (`${s_key}` in item) {
-          let output = fuzzy(option[s_key], needle);
+          let output = fuzzy(option[s_key], needle, fuzzyOpts);
           item.original[s_key] = output.highlightedTerm;
           item.score =
             !item.score || (item.score && item.score < output.score)
@@ -38,5 +39,3 @@ export function fuzzysearch(needle, haystack, opts) {
 function defaultValue(opts, key, value) {
   return opts && opts[key] ? opts[key] : value;
 }
-
-export { fuzzy };