@kws3/ui 1.9.1 → 2.0.0

package/forms/AutoComplete.svelte

@@ -2,9 +2,9 @@
   @component
 
 
-  @param {string} [value=""] - Value of the Input
+  @param {?string} [value=] - Value of the Input
 
-This property can be bound to, to fetch the current value, Default: `""`
+This property can be bound to, to fetch the current value, Default: ``
   @param {string} [placeholder=""] - Placeholder text for the input, Default: `""`
   @param {array} [options=[]] - Array of strings, or objects.
 Used to populate the list of options in the dropdown, Default: `[]`
@@ -12,12 +12,12 @@ Used to populate the list of options in the dropdown, Default: `[]`
 
 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.
+  @param {string|'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|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
@@ -75,8 +75,22 @@ Default value: `<span>{option.label}</span>`
             on:mousedown|preventDefault|stopPropagation={() =>
               handleOptionMouseDown(option)}
             on:mouseenter|preventDefault|stopPropagation={() => {
+              if (mouseTracker.preventSelect) return;
               active_option = option;
             }}
+            on:mousemove|preventDefault|stopPropagation={(e) => {
+              let { preventSelect, lastX, lastY } = mouseTracker;
+              if (
+                preventSelect &&
+                (lastX !== e.clientX || lastY !== e.clientY)
+              ) {
+                mouseTracker.preventSelect = false;
+                active_option = option;
+              }
+              // mouse x,y is not in same position after the scrolling
+              mouseTracker.lastX = e.clientX;
+              mouseTracker.lastY = e.clientY;
+            }}
             class="is-size-{list_text_size[size]}"
             class:active={active_option === option}>
             <!--
@@ -100,7 +114,8 @@ 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 { makeSearchEngine } from "@kws3/ui/search";
+  import { scrollIntoActiveElement } from "../internal";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -120,10 +135,16 @@ Default value: `<span>{option.label}</span>`
 
   const rootContainerId = "kws-overlay-root";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Value of the Input
    *
    * This property can be bound to, to fetch the current value
+   * @type {?string}
    */
   export let value = "";
 
@@ -149,7 +170,7 @@ Default value: `<span>{option.label}</span>`
   /**
    * 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.
-   * @type {'fuzzy'|'strict'}
+   * @type {string|'fuzzy'|'strict'}
    */
   export let search_strategy = "fuzzy";
 
@@ -160,16 +181,17 @@ Default value: `<span>{option.label}</span>`
 
   /**
    * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   * @type {number}
    */
   export let scoreThreshold = 5;
   /**
    * Size of the input
-   *  @type {''|'small'|'medium'|'large'}
+   *  @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "";
   /**
    * Color of the input
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "";
   /**
@@ -222,10 +244,16 @@ Default value: `<span>{option.label}</span>`
     active_option = "",
     searching = true,
     show_options = false,
+    mouseTracker = {
+      lastX: 0,
+      lastY: 0, //  to check actual mouse is moving or not, for WebKit compatibility,
+      preventSelect: false, //prevent select by mouse when up or down key is pressed
+    },
     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
+    fuzzysearch = null;
 
   let list_text_size = {
     small: "7",
@@ -262,38 +290,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) {
@@ -303,19 +304,20 @@ Default value: `<span>{option.label}</span>`
       return;
     }
     options_loading = true;
-    // filtered_options = [];
-    search(filters).then((_options) => {
-      searching = false;
-      options_loading = false;
-      tick().then(() => {
-        filtered_options = normaliseArraysToObjects(_options);
-
-        if (highlighted_results) {
-          filtered_options = highlightMatches(filtered_options, filters);
-        }
-        setOptionsVisible(true);
+    if (search) {
+      search(filters).then((_options) => {
+        searching = false;
+        options_loading = false;
+        tick().then(() => {
+          filtered_options = normaliseArraysToObjects(_options);
+
+          if (highlighted_results) {
+            filtered_options = highlightMatches(filtered_options, filters);
+          }
+          setOptionsVisible(true);
+        });
       });
-    });
+    }
   }
 
   const debouncedTriggerSearch = debounce(triggerExternalSearch, 150, false);
@@ -324,18 +326,29 @@ Default value: `<span>{option.label}</span>`
     POPPER = createPopper(el, dropdown, {
       strategy: "fixed",
       placement: "bottom-start",
+      // @ts-ignore
       modifiers: [sameWidthPopperModifier],
     });
 
-    if (allow_fuzzy_match && fuzzy) {
-      fuzzy.analyzeSubTerms = true;
-      fuzzy.analyzeSubTermDepth = 10;
-      fuzzy.highlighting.before = "";
-      fuzzy.highlighting.after = "";
+    if (allow_fuzzy_match) {
+      let 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>";
       }
+      let searchOptions = {
+        search_key: "label",
+        scoreThreshold,
+        fuzzyOpts,
+      };
+      fuzzysearch = makeSearchEngine(searchOptions);
     }
 
     //normalize value
@@ -384,6 +397,14 @@ Default value: `<span>{option.label}</span>`
           active_option = filtered_options[0];
         else active_option = filtered_options[newActiveIdx];
       }
+
+      tick().then(() => {
+        if (dropdown) {
+          mouseTracker.preventSelect = true;
+          let activeElem = dropdown.querySelector(".active");
+          scrollIntoActiveElement(dropdown, activeElem);
+        }
+      });
     } else {
       active_option = "";
       searching = true;
@@ -446,25 +467,54 @@ 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);
+        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
+            );
+          }
+        });
+      }
 
-    let maxScore = Math.max(...OPTS.map((i) => i.score));
-    let calculatedLimit = maxScore - scoreThreshold;
+      cache[idx] = opts; // storing options to current index on cache
+    });
+    setFilteredOptions(cache, filters);
+  }
 
-    OPTS = OPTS.filter(
-      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
-    );
+  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/Datepicker.svelte

@@ -8,10 +8,10 @@ In `range_mode`, the expected format is `yyyy-mm-dd to yyyy-mm-dd`
 
 This property can be bound to, to fetch the selected date or date range. Output is in the same format as input., Default: `""`
   @param {string} [style=""] - Inline CSS for the input, Default: `""`
-  @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the Date picker input, Default: `""`
+  @param {string|''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the Date picker input, Default: `""`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [placeholder="Select Date.."] - Placeholder text for the input, Default: `"Select Date.."`
-  @param {'primary'|'warning'|'info'|'danger'|'dark'|'light'} [calendar_color="primary"] - Colour of the Calendar, Default: `"primary"`
+  @param {string|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [calendar_color="primary"] - Colour of the Calendar, Default: `"primary"`
   @param {any} [min_date=null] - Set earliest selectable date as an object or string
 
 **Example:** `"2021-06-06"` or `"(new Date('2021-01-01'))"`, Default: `null`
@@ -55,11 +55,15 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   on:yearChange={fireYearChange} />
 
 <script>
-  import { datepicker } from "./actions";
   import { createEventDispatcher } from "svelte";
+  import { datepicker } from "./actions";
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Accepts a date value in the format `yyyy-mm-dd`
    *
@@ -74,20 +78,24 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let style = "";
   /**
    * Colour of the Date picker input
-   * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {ColorOptions} color
    */
   export let color = "";
   /**
    * Disables the component
    */
   export let disabled = false;
+  /**
+   * Make input value read-only
+   */
+  export let readonly = false;
   /**
    * Placeholder text for the input
    */
   export let placeholder = "Select Date..";
   /**
    * Colour of the Calendar
-   * @type {'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {Exclude<ColorOptions, ''>}
    */
   export let calendar_color = "primary";
   /**
@@ -140,9 +148,13 @@ See: https://flatpickr.js.org/options/, Default: `{}`
     min_date,
     max_date,
     options,
+    readonly,
     fillOptions();
 
   function fillOptions() {
+    /**
+     * @type {object}
+     */
     let _opts = Object.assign(
       {
         color: calendar_color,
@@ -164,6 +176,11 @@ See: https://flatpickr.js.org/options/, Default: `{}`
     if (max_date) {
       _opts.maxDate = max_date;
     }
+
+    _opts.clickOpens = true;
+    if (readonly) {
+      _opts.clickOpens = false;
+    }
     opts = _opts;
   }
 

package/forms/PasswordValidator/PasswordValidator.svelte

@@ -30,22 +30,22 @@ Should be used with `bind` from parent component, Default: `false`
       <li>
         <span class="help expanded">
           <span
-            class="tag is-small is-normal is-light pv-identifier {opt.passed
+            class="tag is-small is-normal is-light pv-identifier {opt['passed']
               ? 'is-success'
-              : 'is-danger'}">{opt.identifier}</span>
-          <span class="pv-text">{opt.text}</span>
+              : 'is-danger'}">{opt["identifier"]}</span>
+          <span class="pv-text">{opt["text"]}</span>
           <Icon
             class="pv-icon"
-            icon={opt.passed ? "check" : "ban"}
-            color={opt.passed ? "success" : "danger"} />
+            icon={opt["passed"] ? "check" : "ban"}
+            color={opt["passed"] ? "success" : "danger"} />
         </span>
         <span class="summarized">
           <span
-            data-tooltip={opt.text}
+            data-tooltip={opt["text"]}
             data-tippy-hideOnClick="false"
-            class="tag is-small is-normal is-light pv-identifier {opt.passed
+            class="tag is-small is-normal is-light pv-identifier {opt['passed']
               ? 'is-success'
-              : 'is-danger'}">{opt.identifier}</span>
+              : 'is-danger'}">{opt["identifier"]}</span>
         </span>
       </li>
     {/each}

package/forms/PasswordValidator/validatePassword.js

@@ -4,11 +4,20 @@ export default function (password, options) {
     overall: false,
   };
 
+  /**
+   * @typedef {import('@kws3/ui/types').ValidatePasswordOptions} ValidatePasswordOptions - contains ValidatePassword options
+   */
+
   result.items = (options || []).slice().map((_opt) => {
+    /** @type {ValidatePasswordOptions} */
     const opt = Object.assign({}, _opt);
     if (opt && opt.active) {
       if (opt.name === "kws_pv_min_length") {
-        if (password && password.length >= opt.value) {
+        if (
+          typeof opt.value != "undefined" &&
+          password &&
+          password.length >= opt.value
+        ) {
           opt.passed = true;
         }
       } else {
@@ -24,7 +33,9 @@ export default function (password, options) {
   });
 
   result.overall =
-    result.items.filter((el) => el.passed).length === result.items.length;
+    result.items.filter(
+      (/** @type {ValidatePasswordOptions} */ el) => el.passed
+    ).length === result.items.length;
 
   return result;
 }

package/forms/SearchInput.svelte

@@ -0,0 +1,180 @@
+<!--
+  @component
+
+
+  @param {string|''|'small'|'medium'|'large'} [size="small"] - Size of the input, Default: `"small"`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {string} [placeholder="Search"] - Placeholder text for the input, Default: `"Search"`
+  @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
+  @param {boolean} [disabled=false] - Disables the component, Default: `false`
+  @param {array} [options=[]] - Array of objects., Default: `[]`
+  @param {array} [searchableKeys=[]] - array of object properties to search in., Default: `[]`
+  @param {boolean} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
+  @param {number} [scoreThreshold=2] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `2`
+  @param {boolean} [word_match=false] - Whether to match against each word seperatly or whole sentence in flow., Default: `false`
+  @param {string} [style=""] - Inline CSS for the input, Default: `""`
+  @param {string} [class=""] - CSS classes for the input, Default: `""`
+
+-->
+<div
+  class="
+  field has-addons is-marginless
+  {readonly ? 'is-readonly' : ''}
+  {disabled ? 'is-disabled' : ''}
+  ">
+  <div class="control is-expanded has-icons-left">
+    <input
+      class="input is-{size} is-{color} {klass}"
+      {placeholder}
+      {disabled}
+      {readonly}
+      {style}
+      bind:value={keywords}
+      on:keyup={debouncedSearch} />
+    <Icon icon="search" size="small" class="is-left" />
+  </div>
+  {#if keywords}
+    <div class="control">
+      <button class="button is-danger is-{size}" type="button" on:click={reset}>
+        <Icon icon="times" size="small" />
+      </button>
+    </div>
+  {/if}
+</div>
+
+<script>
+  import { Icon } from "@kws3/ui";
+  import { debounce } from "@kws3/ui/utils";
+  import { onDestroy, onMount } from "svelte";
+  import { makeSearchEngine } from "@kws3/ui/search";
+
+  /**
+   * Size of the input
+   *  @type {import('@kws3/ui/types').SizeOptions} size
+   */
+  export let size = "small";
+  /**
+   * Color of the input
+   * @type {import('@kws3/ui/types').ColorOptions} color
+   */
+  export let color = "";
+  /**
+   * Placeholder text for the input
+   */
+  export let placeholder = "Search";
+  /**
+   * Marks component as read-only
+   */
+  export let readonly = false;
+  /**
+   * Disables the component
+   */
+  export let disabled = false;
+  /**
+   * Array of objects.
+   * @type {array}
+   */
+  export let options = [];
+  /**
+   * array of object properties to search in.
+   * @type {array}
+   */
+  export let searchableKeys = [];
+  /**
+   * 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.
+   *  @type {number}
+   */
+  export let scoreThreshold = 2;
+  /**
+   * Whether to match against each word seperatly or whole sentence in flow.
+   */
+  export let word_match = false;
+  /**
+   * Inline CSS for the input
+   */
+  export let style = "";
+  /**
+   * CSS classes for the input
+   */
+  let klass = "";
+  export { klass as class };
+
+  let keywords = "",
+    orginalItems = [],
+    fuzzysearch = null;
+
+  const debouncedSearch = debounce(search, 300);
+
+  const sanitizeValue = (v) =>
+    v && v.trim() ? v.toLowerCase().trim().split(/\s+/) : [];
+
+  onMount(() => {
+    let fuzzyOpts = {
+      analyzeSubTerms: true,
+      analyzeSubTermDepth: 10,
+      highlighting: {
+        after: "",
+        before: "",
+      },
+    };
+    if (highlighted_results) {
+      fuzzyOpts.highlighting.before = `<span class="h">`;
+      fuzzyOpts.highlighting.after = "</span>";
+    }
+
+    let searchOptions = {
+      search_key: searchableKeys,
+      scoreThreshold,
+      fuzzyOpts,
+    };
+
+    fuzzysearch = makeSearchEngine(searchOptions);
+
+    if (word_match) {
+      options.forEach((item, i) => {
+        item._uid = i;
+      });
+      orginalItems = [...options];
+    } else {
+      orginalItems = [...options];
+    }
+  });
+
+  onDestroy(reset);
+
+  function search() {
+    if (!keywords) {
+      reset();
+      return;
+    }
+    let result = [];
+
+    if (word_match) {
+      let cache = {},
+        filters = sanitizeValue(keywords);
+      filters.forEach((word, idx) => {
+        // iterate over each word in the search query
+        let opts = [];
+        if (word) opts = fuzzysearch(word, orginalItems);
+        cache[idx] = opts; // storing options to current index on cache
+      });
+
+      result = Object.values(cache) // get values from cache
+        .flat()
+        .filter((v, i, self) => i === self.findIndex((t) => t._uid === v._uid)); // flatten array
+    } else {
+      result = fuzzysearch(keywords, orginalItems);
+    }
+    options = result;
+  }
+
+  function reset() {
+    keywords = "";
+    options = [...orginalItems];
+  }
+</script>