@kws3/ui 1.8.2 → 1.9.0

package/CHANGELOG.mdx

@@ -1,3 +1,19 @@
+## 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`.
+ - Prevent default arrow up/down behaviour on `MultiSelect` and `SearchableSelect` when options dropdown is open.
+ 
+## 1.8.3
+ - Allow `clickableRows` and `bulk_actions` to work at the same time on `GridView`
+ - Various bugfixes on `GridRow`
+ - New `visualActivationOnClick` prop for `GridView` and `TileView`
+ - Change the way click activation works on `GridView` and `TileView` rows. Now only one row can be activated at a time
+
 ## 1.8.2
  - Usability fixes for `NumberInput`
  - New `input_only`, `force_integer`, `style` and `class` props for `NumberInput`

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/datagrid/GridView/GridRow.svelte

@@ -4,7 +4,8 @@
 
   @param {number} [row_index=0] - Row index value, Default: `0`
   @param {object} [row={}] - Contains all the column values in a row, Default: `{}`
-  @param {boolean} [rowActive=false] - Determines whether the row is selected or not, Default: `false`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {object} [isVisible={}] - Determines whether column is visible or not, Default: `{}`
   @param {boolean} [clickableRows=false] - Determines whether the row is clickable or not, Default: `false`
   @param {object} [transforms={}] - Contains all custom values for each columns, Default: `{}`
@@ -29,10 +30,14 @@
   <tr
     in:fly={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}
+    class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>
     {#if bulk_actions}
-      <td style="vertical-align:middle;">
+      <td
+        style="vertical-align:middle;"
+        on:click={(e) => {
+          clickableRows && e.stopImmediatePropagation();
+        }}>
         <Checkbox
           size={selectCheckboxSize}
           color={selectCheckboxColor}
@@ -58,7 +63,7 @@
 {:else}
   <tr
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}
+    class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
@@ -103,9 +108,13 @@
      */
     row = {},
     /**
-     * Determines whether the row is selected or not
+     * Determines whether clickable rows activate visually on click
+     */
+    visualActivationOnClick = true,
+    /**
+     * Unique id of row that is activated
      */
-    rowActive = false,
+    activatedId = null,
     /**
      * Determines whether column is visible or not
      */
@@ -161,6 +170,7 @@
   };
 
   $: selectedIds, setCheckedValue();
+  $: activated = activatedId === row.id;
 
   function setCheckedValue() {
     checked = false;
@@ -175,7 +185,6 @@
 
   function rowClick() {
     if (clickableRows) {
-      rowActive = true;
       fire("rowClick", { row });
     }
   }

package/datagrid/GridView/GridView.svelte

@@ -5,9 +5,11 @@
   @param {string} [iteration_key="id"] - Iteration key, Default: `"id"`
   @param {array} [data=[]] - Contains all the results that needs to be displayed, Default: `[]`
   @param {object} [columns={}] - Table column names. {db_field_name: column_name}, Default: `{}`
-  @param {boolean} [transition=false] - Determines if a transision effect is used, Default: `false`
+  @param {boolean} [transition=false] - Determines if a transition effect is used, Default: `false`
   @param {boolean} [is_striped=true] - Determines whether to use alternating row shading in the table view, Default: `true`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
   @param {boolean} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {boolean} [bulk_actions=false] - Determines if selecting multiple rows and doing multiple actions is allowed, Default: `false`
   @param {boolean} [selectAll=false] - Determines if all rows are selected, Default: `false`
   @param {array} [selectedIds=[]] - List of unique IDs of all the selected rows, Default: `[]`
@@ -64,6 +66,7 @@
           {transition}
           {column_keys}
           {clickableRows}
+          {visualActivationOnClick}
           {isVisible}
           {transforms}
           {classNames}
@@ -71,6 +74,7 @@
           {cellComponent}
           {row}
           {bulk_actions}
+          {activatedId}
           {selectedIds}
           {selectCheckboxColor}
           {selectCheckboxSize}
@@ -100,7 +104,7 @@
      */
     columns = {},
     /**
-     * Determines if a transision effect is used
+     * Determines if a transition effect is used
      */
     transition = false,
     /**
@@ -108,10 +112,18 @@
      * @link https://bulma.io/documentation/elements/table/#modifiers
      */
     is_striped = true,
+    /**
+     * Determines whether clickable rows activate visually on click
+     */
+    visualActivationOnClick = true,
     /**
      * Determines whether rows are clickable or not
      */
     clickableRows = false,
+    /**
+     * Unique id of row that is activated
+     */
+    activatedId = null,
     /**
      * Determines if selecting multiple rows and doing multiple actions is allowed
      */

package/datagrid/TileView/TileView.svelte

@@ -8,7 +8,9 @@
   @param {object} [tileItemComponent=null] - Contains a custom component, Default: `null`
   @param {number} [per_row=3] - Sets how many items to display in a row, Default: `3`
   @param {object} [columns={}] - Column names for the displayed table {db_field_name: column_name}, Default: `{}`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
   @param {boolean} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {object} [valueTransformers={}] - Contains all custom values for each column, Default: `{}`
   @param {object} [classTransformers={}] - CSS class names for each column, Default: `{}`
   @param {object} [styleTransformers={}] - CSS styles for each column, Default: `{}`
@@ -31,6 +33,7 @@
           on:_forwardEvent
           {row_index}
           {column_keys}
+          {visualActivationOnClick}
           {clickableRows}
           {isVisible}
           {transforms}
@@ -38,6 +41,7 @@
           {styles}
           {row}
           {bulk_actions}
+          {activatedId}
           {selectedIds}
           {selectCheckboxColor}
           {selectCheckboxSize}
@@ -75,10 +79,18 @@
      * Column names for the displayed table {db_field_name: column_name}
      */
     columns = {},
+    /**
+     * Determines whether clickable rows activate visually on click
+     */
+    visualActivationOnClick = true,
     /**
      * Determines whether rows are clickable or not
      */
     clickableRows = false,
+    /**
+     * Unique id of row that is activated
+     */
+    activatedId = null,
     /**
      * Contains all custom values for each column
      */

package/datagrid/TileView/TileViewItem.svelte

@@ -3,7 +3,8 @@
 
 
   @param {object} [row={}] - List of all values in a row, Default: `{}`
-  @param {boolean} [rowActive=false] - Determines whether the row is selected or not, Default: `false`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {boolean} [clickableRows=false] - Determines whether the row is clickable or not, Default: `false`
   @param {function} [isVisible()] - Returns whether a column can be visible or not
   @param {function} [transforms()] - Returns column custom value
@@ -16,7 +17,7 @@
 
 -->
 <div
-  class:is-selected={rowActive}
+  class:is-selected={activated && visualActivationOnClick}
   class="box {clickableRows ? 'is-hoverable' : ''}"
   on:click|stopPropagation={rowClick}>
   {#each column_keys as column}
@@ -39,9 +40,13 @@
    */
   export let row = {},
     /**
-     * Determines whether the row is selected or not
+     * Determines whether clickable rows activate visually on click
      */
-    rowActive = false,
+    visualActivationOnClick = true,
+    /**
+     * Unique id of row that is activated
+     */
+    activatedId = null,
     /**
      * Determines whether the row is clickable or not
      */
@@ -67,9 +72,10 @@
      */
     column_keys = [];
 
+  $: activated = activatedId === row.id;
+
   function rowClick() {
     if (clickableRows) {
-      rowActive = true;
       /**
        * Fires an event when a row is clicked
        */

package/forms/AutoComplete.svelte

@@ -0,0 +1,468 @@
+<!--
+  @component
+
+
+  @param {string} [value=""] - Value of the Input
+
+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: `[]`
+  @param {function|null} [search=null] - Async function to fetch options
+
+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 {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: `""`
+  @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
+  @param {boolean} [disabled=false] - Disables the component, Default: `false`
+  @param {HTMLElement|string} [dropdown_portal=undefined] - Where to render the dropdown list.
+Can be a DOM element or a `string` with the CSS selector of the element.
+
+By default it renders in a custom container appended to `document.body`., Default: `undefined`
+  @param {string} [class=""] - CSS classes for input container, Default: `""`
+
+  ### Events
+  - `change`
+  - `blur` - Triggered when the input loses focus
+
+  ### Slots
+  - `<slot name="default" {option} />` - Slot containing text for each selectable item
+
+Default value: `<span>{option.label}</span>`
+
+-->
+<div
+  bind:this={el}
+  class="
+     kws-autocomplete input
+    {disabled ? 'is-disabled' : ''}
+    {readonly ? 'is-readonly' : ''}
+    is-{size} is-{color} {klass}
+  "
+  class:readonly
+  {style}
+  on:click|stopPropagation={() => input && input.focus()}>
+  <input
+    class="input is-{size}"
+    bind:this={input}
+    autocomplete="off"
+    {disabled}
+    {readonly}
+    bind:value
+    on:keydown={handleKeydown}
+    on:blur={blurEvent}
+    on:blur={() => setOptionsVisible(false)}
+    {placeholder} />
+  {#if search && options_loading}
+    <button
+      type="button"
+      style="border: none;"
+      class="button is-paddingless delete is-medium is-loading" />
+  {/if}
+  {#if rootContainer}
+    <div class="kws-autocomplete" use:portal={dropdown_portal}>
+      <ul bind:this={dropdown} class="options" class:hidden={!show_options}>
+        {#each filtered_options as option}
+          <li
+            on:mousedown|preventDefault|stopPropagation={() =>
+              handleOptionMouseDown(option)}
+            on:mouseenter|preventDefault|stopPropagation={() => {
+              active_option = option;
+            }}
+            class="is-size-{list_text_size[size]}"
+            class:active={active_option === option}>
+            <!--
+              Slot containing text for each selectable item
+
+              Default value: `<span>{option.label}</span>`
+            -->
+            <slot {option}>
+              <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+              {@html option.label}
+            </slot>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</div>
+
+<script>
+  import { portal } from "@kws3/ui";
+  import { debounce } from "@kws3/ui/utils";
+  import { createEventDispatcher, onMount, tick } from "svelte";
+  import { createPopper } from "@popperjs/core";
+  import fuzzy from "fuzzy.js";
+
+  const sameWidthPopperModifier = {
+    name: "sameWidth",
+    enabled: true,
+    phase: "beforeWrite",
+    requires: ["computeStyles"],
+    fn: ({ state }) => {
+      state.styles.popper.width = `${Math.max(
+        200,
+        state.rects.reference.width
+      )}px`;
+    },
+    effect: ({ state }) => {
+      state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+    },
+  };
+
+  const rootContainerId = "kws-overlay-root";
+
+  /**
+   * Value of the Input
+   *
+   * This property can be bound to, to fetch the current value
+   */
+  export let value = "";
+
+  /**
+   * Placeholder text for the input
+   */
+  export let placeholder = "";
+  /**
+   * Array of strings, or objects.
+   * Used to populate the list of options in the dropdown
+   */
+  export let options = [];
+  /**
+   * Async function to fetch options
+   *
+   * Only send this prop if you want to fetch `options` asynchronously.
+   * `options` prop will be ignored if this prop is set.
+   *
+   * @type {function|null}
+   */
+  export let search = null;
+
+  /**
+   * 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'}
+   */
+  export let search_strategy = "fuzzy";
+
+  /**
+   * 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'}
+   */
+  export let size = "";
+  /**
+   * Color of the input
+   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   */
+  export let color = "";
+  /**
+   * Inline CSS for input container
+   */
+  export let style = "";
+  /**
+   * Marks component as read-only
+   */
+  export let readonly = false;
+  /**
+   * Disables the component
+   */
+  export let disabled = false;
+
+  /**
+   * Where to render the dropdown list.
+   * Can be a DOM element or a `string` with the CSS selector of the element.
+   *
+   * By default it renders in a custom container appended to `document.body`.
+   *
+   * @type { HTMLElement|string}
+   */
+  export let dropdown_portal = "#" + rootContainerId;
+
+  /**
+   * CSS classes for input container
+   */
+  let klass = "";
+  export { klass as class };
+
+  if (!search && (!options || !options.length))
+    console.error(`Missing options`);
+
+  //ensure we have a root container for all our hoisitng related stuff
+
+  let rootContainer = document.getElementById(rootContainerId);
+  if (!rootContainer) {
+    rootContainer = document.createElement("div");
+    rootContainer.id = rootContainerId;
+    document.body.appendChild(rootContainer);
+  }
+
+  const fire = createEventDispatcher();
+
+  let el, //whole wrapping element
+    dropdown, //dropdown ul
+    input, //the textbox to type in
+    POPPER,
+    active_option = "",
+    searching = true,
+    show_options = false,
+    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
+
+  let list_text_size = {
+    small: "7",
+    medium: "5",
+    large: "4",
+  };
+
+  $: asyncMode = search && typeof search === "function";
+
+  $: options, normaliseOptions();
+  $: searching, updateFilteredOptions(value);
+
+  $: allow_fuzzy_match = !search && search_strategy === "fuzzy";
+
+  //convert arrays of strings into normalised arrays of objects
+  function normaliseOptions() {
+    let _items = options || [];
+    if (!_items || !(_items instanceof Array)) {
+      normalised_options = [];
+      return;
+    }
+
+    normalised_options = normaliseArraysToObjects(_items);
+  }
+
+  function updateFilteredOptions(value) {
+    if (!mounted) return;
+
+    if (asyncMode) {
+      searching && debouncedTriggerSearch(sanitizeFilters(value));
+    } else {
+      searching && triggerSearch(sanitizeFilters(value));
+    }
+  }
+
+  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);
+    }
+    setOptionsVisible(true);
+  }
+
+  function triggerExternalSearch(filters) {
+    if (!filters.length) {
+      //do not trigger async search if filters are empty
+      clearDropDownResults();
+      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);
+      });
+    });
+  }
+
+  const debouncedTriggerSearch = debounce(triggerExternalSearch, 150, false);
+
+  onMount(() => {
+    POPPER = createPopper(el, dropdown, {
+      strategy: "fixed",
+      placement: "bottom-start",
+      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;
+    }
+    mounted = true;
+
+    return () => {
+      POPPER.destroy();
+    };
+  });
+
+  function setOptionsVisible(show) {
+    if (readonly || disabled || show === show_options) return;
+    if (!value || !filtered_options.length) {
+      show = false;
+    }
+    show_options = show;
+    if (!show) {
+      clearDropDownResults();
+    }
+    POPPER && POPPER.update();
+  }
+
+  function handleKeydown(event) {
+    if (event.key === `Enter`) {
+      show_options && event.preventDefault();
+
+      if (active_option) {
+        handleOptionMouseDown(active_option);
+      } else {
+        // no active option means no option is selected and the actual value should be what typed in input.
+        setOptionsVisible(false);
+      }
+    } else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
+      show_options && event.preventDefault();
+
+      const increment = event.key === `ArrowUp` ? -1 : 1;
+      const newActiveIdx = filtered_options.indexOf(active_option) + increment;
+
+      if (newActiveIdx < 0) {
+        active_option = filtered_options[filtered_options.length - 1];
+      } else {
+        if (newActiveIdx === filtered_options.length)
+          active_option = filtered_options[0];
+        else active_option = filtered_options[newActiveIdx];
+      }
+    } else {
+      active_option = "";
+      searching = true;
+    }
+  }
+
+  function handleOptionMouseDown(option) {
+    add(option);
+  }
+
+  function add(token) {
+    if (readonly || disabled) {
+      return;
+    }
+
+    value = token.value;
+    fire("change", { token, type: `add` });
+
+    setOptionsVisible(false);
+  }
+
+  function blurEvent() {
+    /**
+     * Triggered when the input loses focus
+     */
+    fire("blur");
+  }
+
+  const normaliseArraysToObjects = (arr) =>
+    [...arr].map((item) =>
+      typeof item === "object" ? item : { label: item, value: item }
+    );
+
+  const highlightMatches = (options, filters) => {
+    if (!filters.length) return options;
+    // join all filter parts and split into chars and filter out duplicates
+    let common_chars = [...filters.join("")].filter(
+      (v, i, self) => self.indexOf(v) === i
+    );
+    let pattern = new RegExp(
+      `[${common_chars.join("").replace(/\\/g, "&#92;")}]`,
+      "gi"
+    );
+    return options.map((item) => {
+      return {
+        ...item,
+        label: item.value.replace(
+          pattern,
+          (match) => `<span class="h">${match}</span>`
+        ),
+      };
+    });
+  };
+
+  const clearDropDownResults = () => {
+    filtered_options = [];
+    searching = false;
+  };
+  function sanitizeFilters(v) {
+    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;
+    });
+
+    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;
+  }
+</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: `""`
@@ -131,6 +132,7 @@ Default value: `<span>{option[search_key] || option}</span>`
             on:mouseenter|preventDefault|stopPropagation={() => {
               activeOption = option;
             }}
+            class="is-size-{list_text_size[size]}"
             class:selected={isSelected(option)}
             class:active={activeOption === option}>
             <span class="kws-selected-icon"
@@ -145,7 +147,7 @@ Default value: `<span>{option[search_key] || option}</span>`
           </li>
         {:else}
           {#if !options_loading}
-            <li class="no-options">
+            <li class="no-options is-size-{list_text_size[size]}">
               {searchText ? no_options_msg : async_search_prompt}
             </li>
           {/if}
@@ -160,7 +162,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 from "fuzzy.js";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -229,6 +231,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'}
@@ -322,6 +329,12 @@ Default value: `<span>{option[search_key] || option}</span>`
     selectedOptions = [], //list of options that are selected
     options_loading = false; //indictaes whether async search function is running
 
+  let list_text_size = {
+    small: "7",
+    medium: "5",
+    large: "4",
+  };
+
   $: single = max === 1;
   $: asyncMode = search && typeof search === "function";
   $: hasValue = single
@@ -350,11 +363,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) => {
@@ -395,23 +404,26 @@ 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) {
+        filteredOptions = fuzzySearch(filter, [...normalisedOptions]);
+      } else {
+        filteredOptions = strictSearch(filter, [...normalisedOptions]);
+      }
+    }
+  }
+
+  function updateActiveOption() {
+    if (
+      (activeOption && searching && !filteredOptions.includes(activeOption)) ||
+      (!activeOption && searchText)
+    ) {
+      activeOption = filteredOptions[0];
+    } else {
+      if (allow_fuzzy_match) {
+        activeOption = filteredOptions.find((opts) =>
+          matchesValue(activeOption, opts)
+        );
+      }
     }
   }
 
@@ -467,6 +479,11 @@ Default value: `<span>{option[search_key] || option}</span>`
       modifiers: [sameWidthPopperModifier],
     });
 
+    if (allow_fuzzy_match && fuzzy) {
+      fuzzy.analyzeSubTerms = true;
+      fuzzy.analyzeSubTermDepth = 10;
+    }
+
     //normalize value for single versus multiselect
     if (value === null || typeof value == "undefined") {
       value = single ? null : [];
@@ -603,6 +620,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         setOptionsVisible(true);
       }
     } else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
+      showOptions && event.preventDefault();
       const increment = event.key === `ArrowUp` ? -1 : 1;
       const newActiveIdx = filteredOptions.indexOf(activeOption) + increment;
 
@@ -666,16 +684,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) => {
@@ -696,4 +713,48 @@ Default value: `<span>{option[search_key] || option}</span>`
       searching = false;
     });
   };
+
+  function fuzzySearch(filter, options) {
+    if (!filter) return options;
+    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 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;
+    }
+  }
+
+  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/index.js

@@ -49,6 +49,7 @@ export { default as Transition } from "./transitions/Transition.svelte";
 export { default as SlidingPane } from "./sliding-panes/SlidingPane.svelte";
 export { default as SlidingPaneSet } from "./sliding-panes/SlidingPaneSet.svelte";
 
+export { default as AutoComplete } from "./forms/AutoComplete.svelte";
 export { default as SearchableSelect } from "./forms/select/SearchableSelect.svelte";
 export { default as MultiSelect } from "./forms/select/MultiSelect.svelte";
 export { default as MaskedInput } from "./forms/MaskedInput.svelte";

package/package.json

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

package/styles/AutoComplete.scss

@@ -0,0 +1,132 @@
+$kws-theme-colors: $colors !default;
+$kws-autocomplete-radius: $radius !default;
+$kws-autocomplete-border-color: $input-border-color !default;
+$kws-autocomplete-box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%),
+  0 0px 0 1px rgb(10 10 10 / 2%) !default;
+$kws-autocomplete-focus-border-color: $input-focus-border-color !default;
+$kws-autocomplete-focus-box-shadow-size: $input-focus-box-shadow-size !default;
+$kws-autocomplete-focus-box-shadow-color: $input-focus-box-shadow-color !default;
+$kws-autocomplete-disabled-background-color: $input-disabled-background-color !default;
+$kws-autocomplete-disabled-border-color: $input-disabled-border-color !default;
+$kws-autocomplete-disabled-color: $input-disabled-color !default;
+$kws-autocomplete-selecting-color: $primary-invert !default;
+$kws-autocomplete-selecting-background: $primary !default;
+$kws-autocomplete-text-matches-color: currentColor !default;
+$kws-autocomplete-text-matches-background: transparent !default;
+$kws-autocomplete-text-matches-font-weight: $weight-bold !default;
+
+$__modal-z: 41 !default;
+@if $modal-z {
+  $__modal-z: $modal-z;
+}
+
+$kws-autocomplete-options-z-index: $__modal-z + 1 !default;
+
+.kws-autocomplete {
+  position: relative;
+  align-items: center;
+  display: flex;
+  cursor: text;
+  height: auto;
+  min-height: 2.5em;
+  padding-top: calc(0.4em - 1px);
+  padding-bottom: calc(0.4em - 1px);
+  &:focus-within {
+    border-color: $kws-autocomplete-focus-border-color;
+    box-shadow: $kws-autocomplete-focus-box-shadow-size
+      $kws-autocomplete-focus-box-shadow-color;
+  }
+  &.is-disabled {
+    background-color: $kws-autocomplete-disabled-background-color;
+    border-color: $kws-autocomplete-disabled-border-color;
+    color: $kws-autocomplete-disabled-color;
+    cursor: not-allowed;
+  }
+  &.is-readonly {
+    box-shadow: none;
+  }
+
+  input {
+    border: none !important;
+    outline: none !important;
+    background: none !important;
+    /* needed to hide red shadow around required inputs in some browsers */
+    box-shadow: none !important;
+    color: inherit;
+    flex: 1;
+    padding: 1pt;
+    height: auto;
+    min-height: 0;
+  }
+
+  ul.options {
+    list-style: none;
+    max-height: 50vh;
+    padding: 0;
+    cursor: pointer;
+    overflow: auto;
+    background: #fff;
+    border: 1px solid $kws-autocomplete-border-color;
+    box-shadow: $kws-autocomplete-box-shadow;
+    position: relative;
+    z-index: 4;
+    &[data-popper-placement="top"] {
+      border-radius: $kws-autocomplete-radius $kws-autocomplete-radius 0 0;
+      box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4);
+    }
+    &.hidden {
+      display: none;
+    }
+
+    li {
+      padding: 0.3em 0.5em;
+      position: relative;
+      word-break: break-all;
+      &.active {
+        // keyboard focused item
+        color: $kws-autocomplete-selecting-color;
+        background: $kws-autocomplete-selecting-background;
+      }
+      span.h {
+        // highlight text matches
+        font-weight: $kws-autocomplete-text-matches-font-weight;
+        color: $kws-autocomplete-text-matches-color;
+        background: $kws-autocomplete-text-matches-background;
+      }
+    }
+  }
+}
+
+@each $name, $pair in $kws-theme-colors {
+  $color: nth($pair, 1);
+  $color-invert: nth($pair, 2);
+  $color-light: findLightColor($color);
+  $color-dark: findDarkColor($color);
+  .kws-autocomplete {
+    &.is-#{$name} {
+      border-color: $color;
+      &:focus-within {
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+      }
+      ul.options {
+        li {
+          &.selected {
+            color: $color-dark;
+            background: $color-light;
+          }
+          &.active {
+            color: $color-invert;
+            background: $color;
+          }
+        }
+      }
+    }
+  }
+}
+
+#kws-overlay-root {
+  .kws-autocomplete {
+    position: absolute;
+    z-index: $kws-autocomplete-options-z-index;
+  }
+}

package/styles/Grid.scss

@@ -51,6 +51,7 @@ $kws-gridview-checked-row-background: $primary-light !default;
     background-color: $kws-gridview-checked-row-background !important;
     td {
       background-color: $kws-gridview-checked-row-background !important;
+      color: findColorInvert($kws-gridview-checked-row-background) !important;
     }
   }
 }