@kws3/ui 1.8.3 → 1.8.4

package/CHANGELOG.mdx

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

package/forms/AutoComplete.svelte

@@ -0,0 +1,426 @@
+<!--
+  @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 {''|'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 fuzzysearch from "@kws3/ui/utils/fuzzysearch";
+
+  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;
+  /**
+   * 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) {
+        opts = [...normalised_options].filter((item) => {
+          // filter out items that don't match `filter`
+          if (typeof item === "object" && item.value) {
+            return typeof item.value === "string" && match(word, item.value);
+          }
+        });
+      }
+
+      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) => self.indexOf(v) === i); // remove duplicates
+
+    if (highlighted_results) {
+      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],
+    });
+
+    //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 match = (needle, haystack) => {
+    let _hayStack = haystack.toLowerCase();
+    return allow_fuzzy_match
+      ? fuzzysearch(needle, _hayStack)
+      : _hayStack.indexOf(needle) > -1;
+  };
+
+  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("")}]`, "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+/) : [];
+  }
+</script>

package/forms/select/MultiSelect.svelte

@@ -131,6 +131,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 +146,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}
@@ -322,6 +323,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
@@ -603,6 +610,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;
 

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.3",
+  "version": "1.8.4",
   "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": "b211043d95c9b0f3e4184624ccd84b0a99687e50"
+  "gitHead": "440bdaf5e02a0a7ab0b69c2122c2c56da3485c1f"
 }

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;
+  }
+}