@kws3/ui 1.9.2 → 2.0.1

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, fuzzysearch } from "../utils/fuzzysearch";
+  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",
@@ -276,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);
@@ -297,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
@@ -357,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;
@@ -428,10 +476,7 @@ Default value: `<span>{option.label}</span>`
       // iterate over each word in the search query
       let opts = [];
       if (word) {
-        let result = fuzzysearch(word, options, {
-          search_key: "label",
-          scoreThreshold,
-        });
+        let result = fuzzysearch(word, options);
         opts = result;
       }
 

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>

package/forms/Timepicker.svelte

@@ -14,6 +14,10 @@ This property can be bound to, to fetch the selected time. Output is in the same
   @param {'primary'|'warning'|'info'|'danger'|'dark'|'light'} [ui_color="primary"] - Colour of popup time selection UI, Default: `"primary"`
   @param {boolean} [time_24hr=false] - Display time selection UI in 24hr format, Default: `false`
   @param {object} [options={}] - Extended set of options as supported by Flatpicker
+  @param {any} [min_time=null] - Set earliest selectable time as string
+  **Example:** `"12:00 PM"` Default: `null`
+  @param {any} [max_time=null] - Set latest selectable time as string
+  **Example:** `"12:00 AM"` Default: `null`
 
 See: https://flatpickr.js.org/options/, Default: `{}`
   @param {string} [class=""] - CSS classes for the input, Default: `""`
@@ -43,11 +47,15 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   on:close={fireClose} />
 
 <script>
-  import { timepicker } from "./actions";
   import { createEventDispatcher } from "svelte";
+  import { timepicker } from "./actions";
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Accepts a date value in the format `H:i`
    *
@@ -62,7 +70,7 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let style = "";
   /**
    * Colour of the Time picker input
-   * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {ColorOptions} color
    */
   export let color = "";
   /**
@@ -75,7 +83,7 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let placeholder = "Select Time..";
   /**
    * Colour of popup time selection UI
-   * @type {'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {Exclude<ColorOptions, ''>}
    */
   export let ui_color = "primary";
 
@@ -84,23 +92,64 @@ See: https://flatpickr.js.org/options/, Default: `{}`
    */
   export let time_24hr = false;
 
+  /**
+   * Set earliest selectable time as string
+   *
+   * **Example:** `"01:00 PM"` or "13:00"`
+   * @type {any}
+   */
+  export let min_time = null;
+  /**
+   * Set latest selectable time as string
+   *
+   * **Example:** `"03:00 PM"` or "15:00"`
+   * @type {any}
+   */
+  export let max_time = null;
+
   /**
    * Extended set of options as supported by Flatpicker
    *
    * See: https://flatpickr.js.org/options/
    */
   export let options = {};
+
+  /**
+   * Make input value read-only
+   */
+  export let readonly = false;
+
   /**
    * CSS classes for the input
    */
+
   let klass = "";
   export { klass as class };
 
   let opts;
 
-  $: ui_color, options, time_24hr, fillOptions();
+  $: ui_color, options, time_24hr, min_time, max_time, readonly, fillOptions();
+
+  const convertTime12to24 = (time12h) => {
+    const [time, modifier] = time12h.split(" ");
+    let [hours, minutes] = time.split(":");
+    if (hours === "12") {
+      hours = "00";
+    }
+    if (modifier === "PM") {
+      hours = parseInt(hours, 10) + 12;
+    }
+    return {
+      hour: String(hours),
+      minute: String(minutes),
+      time: `${hours}:${minutes}`,
+    };
+  };
 
   function fillOptions() {
+    /**
+     * @type {object}
+     */
     let _opts = Object.assign(
       {
         color: ui_color,
@@ -109,6 +158,22 @@ See: https://flatpickr.js.org/options/, Default: `{}`
       options
     );
 
+    if (min_time) {
+      let _minTime24 = convertTime12to24(min_time);
+      _opts.minTime = _minTime24.time;
+      _opts.defaultHour = _minTime24.hour;
+      _opts.defaultMinute = _minTime24.minute;
+    }
+
+    if (max_time) {
+      let _maxTime24 = convertTime12to24(max_time);
+      _opts.maxTime = _maxTime24.time;
+    }
+
+    _opts.clickOpens = true;
+    if (readonly) {
+      _opts.clickOpens = false;
+    }
     opts = _opts;
   }