@kws3/ui 1.8.0 → 1.8.3

package/CHANGELOG.mdx

@@ -1,3 +1,18 @@
+## 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`
+ - Forward `focus`, `blur` input events for `NumberInput`
+ - Use custom version of `fuzzysearch` for `SearchableSelect` and `MultiSelect`
+ 
+## 1.8.1
+ - New `ScrollableList` component
+
 ## 1.8.0
  - `Modal`, `CardModal` and `ActionSheet` components now play an outro transition instead of abruptly disappearing.
  - Usability fixes for `SearchableSelect` and `MultiSelect`.

package/controls/NumberInput.svelte

@@ -20,52 +20,84 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {string} [plus_icon="plus"] - Name of the icon that is to be displayed in the plus button, Default: `"plus"`
   @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_icon_color="success"] - Color of the Plus Icon, Default: `"success"`
   @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_button_color=""] - Color of the Plus Button, Default: `""`
+  @param {boolean} [input_only=false] - Show input without controls, Default: `false`
+  @param {boolean} [force_integer=false] - Prevent decimal numbers such as `1.5`, Default: `false`
+  @param {string} [style=""] - Inline CSS for component, Default: `""`
+  @param {string} [class=""] - CSS classes for component, Default: `""`
 
   ### Events
   - `change` - Triggered when value changes
+  - `blur`
+  - `focus`
 
 -->
-<div class="field has-addons">
-  <div class="control">
-    <button
-      type="button"
-      class="button is-{size} is-{minus_button_color}"
-      style="box-shadow:none;"
-      on:click={count(-1)}
-      disabled={disabled || value <= min}>
-      <Icon
-        icon={minus_icon}
-        size="small"
-        class="has-text-{minus_icon_color}" />
-    </button>
+{#if input_only}
+  <input
+    {style}
+    data-testid="input"
+    class="input has-text-centered {klass} is-{size} is-{value < min ||
+    value > max
+      ? 'danger'
+      : ''}"
+    type="number"
+    min
+    max
+    {step}
+    {disabled}
+    readonly={!typeable}
+    bind:value
+    on:blur={isBlurred}
+    on:blur
+    on:focus={isFocused}
+    on:focus />
+{:else}
+  <div class="field has-addons {klass}" {style}>
+    <div class="control">
+      <button
+        type="button"
+        class="button is-{size} is-{minus_button_color}"
+        style="box-shadow:none;"
+        on:click={count(-1)}
+        disabled={disabled || value <= min}>
+        <Icon
+          icon={minus_icon}
+          size="small"
+          class="has-text-{minus_icon_color}" />
+      </button>
+    </div>
+    <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
+      <input
+        data-testid="input"
+        class="input has-text-centered is-{size} is-{value < min || value > max
+          ? 'danger'
+          : ''}"
+        type="number"
+        min
+        max
+        {step}
+        {disabled}
+        readonly={!typeable}
+        bind:value
+        on:blur={isBlurred}
+        on:blur
+        on:focus={isFocused}
+        on:focus />
+    </div>
+    <div class="control">
+      <button
+        type="button"
+        class="button is-{size} is-{plus_button_color}"
+        style="box-shadow:none;"
+        on:click|preventDefault={count(+1)}
+        disabled={disabled || value >= max}>
+        <Icon
+          icon={plus_icon}
+          size="small"
+          class="has-text-{plus_icon_color}" />
+      </button>
+    </div>
   </div>
-  <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
-    <input
-      data-testid="input"
-      class="input has-text-centered is-{size} is-{value < min || value > max
-        ? 'danger'
-        : ''}"
-      type="number"
-      min
-      max
-      step
-      {disabled}
-      readonly={!typeable}
-      bind:value
-      on:blur={isBlurred()}
-      on:focus={isFocused()} />
-  </div>
-  <div class="control">
-    <button
-      type="button"
-      class="button is-{size} is-{plus_button_color}"
-      style="box-shadow:none;"
-      on:click|preventDefault={count(+1)}
-      disabled={disabled || value >= max}>
-      <Icon icon={plus_icon} size="small" class="has-text-{plus_icon_color}" />
-    </button>
-  </div>
-</div>
+{/if}
 
 <style>
   input[type="number"]::-webkit-inner-spin-button,
@@ -158,7 +190,25 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * Color of the Plus Button
      * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
      */
-    plus_button_color = "";
+    plus_button_color = "",
+    /**
+     * Show input without controls
+     */
+    input_only = false,
+    /**
+     * Prevent decimal numbers such as `1.5`
+     */
+    force_integer = false,
+    /**
+     * Inline CSS for component
+     */
+    style = "";
+
+  /**
+   * CSS classes for component
+   */
+  let klass = "";
+  export { klass as class };
 
   let _has_focus = false,
     _old_value = null;
@@ -189,6 +239,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 
     if (typeof value == "undefined" || value === null) value = min;
 
+    if (force_integer) value = Math.floor(Number(value));
+
     if (value < min) value = min;
     if (value > max) value = max;
 

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/select/MultiSelect.svelte

@@ -160,7 +160,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 "fuzzysearch";
+  import fuzzysearch from "@kws3/ui/utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",

package/helpers/ScrollableList.svelte

@@ -0,0 +1,231 @@
+<!--
+  @component
+
+
+  @param {array} [items=[]] - Array of items, Default: `[]`
+  @param {string} [height="100%"] - Height of the wrapper, CSS String, Default: `"100%"`
+  @param {number | null} [item_height=null] - Height of each list item. If not set, height will be calculated automatically based on each item's offsetHeight, Default: `null`
+  @param {number} [start=0] - First item index rendered inside viewport - readonly, Default: `0`
+  @param {number} [end=0] - Last item index rendered inside viewport - readonly, Default: `0`
+  @param {number} [end_threshold=10] - `end` event will be fired when the list reaches this many items before the end of the list., Default: `10`
+  @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
+  @param {string} [class=""] - CSS classes for scroller container, Default: `""`
+
+  ### Events
+  - `end` - Fired when the list reaches `end_threshold` items before the end of the list.
+
+  ### Slots
+  - `<slot name="default" {item} {index} />` - Default slot for list view items
+  - `<slot name="loader"  />` - Optional slot to display a loading graphic at the bottom of the list
+while more items are loading
+
+-->
+{#if hasResizeObserver}
+  <div
+    bind:this={viewport}
+    class="kws-scrollable-list with-resize-observer {klass}"
+    on:scroll={handle_scroll}
+    style="height:{height};{style}"
+    use:resizeObserver
+    on:resize={resize}>
+    <div
+      bind:this={contents}
+      style="padding-top: {top}px; padding-bottom: {bottom}px;">
+      {#each visible as item (item.index)}
+        <div class="row">
+          <!--Default slot for list view items-->
+          <slot item={item.data} index={item.index} />
+        </div>
+      {/each}
+      <!--Optional slot to display a loading graphic at the bottom of the list
+        while more items are loading-->
+      <slot name="loader" />
+    </div>
+  </div>
+{:else}
+  <div
+    bind:this={viewport}
+    class="kws-scrollable-list {klass}"
+    on:scroll={handle_scroll}
+    style="height:{height};{style}"
+    bind:offsetHeight={viewport_height}>
+    <div
+      bind:this={contents}
+      style="padding-top: {top}px; padding-bottom: {bottom}px;">
+      {#each visible as item (item.index)}
+        <div class="row">
+          <!--Default slot for list view items-->
+          <slot item={item.data} index={item.index} />
+        </div>
+      {/each}
+      <!--Optional slot to display a loading graphic at the bottom of the list
+        while more items are loading-->
+      <slot name="loader" />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .kws-scrollable-list {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
+    height: 100%;
+  }
+</style>
+
+<script>
+  import { onMount, tick } from "svelte";
+  import { createEventDispatcher } from "svelte";
+  import {
+    resizeObserver,
+    hasResizeObserver,
+  } from "@kws3/ui/utils/resizeObserver";
+
+  const fire = createEventDispatcher();
+  /**
+   * Array of items
+   */
+  export let items = [],
+    /**
+     * Height of the wrapper, CSS String
+     */
+    height = "100%",
+    /**
+     * Height of each list item. If not set, height will be calculated automatically based on each item's offsetHeight
+     * @type {number | null}
+     */
+    item_height = null,
+    /**
+     * First item index rendered inside viewport - readonly
+     */
+    start = 0,
+    /**
+     * Last item index rendered inside viewport - readonly
+     */
+    end = 0,
+    /**
+     *  `end` event will be fired when the list reaches this many items before the end of the list.
+     */
+    end_threshold = 10,
+    /**
+     * Inline CSS for scroller container
+     */
+    style = "";
+
+  /**
+   * CSS classes for scroller container
+   */
+  let klass = "";
+  export { klass as class };
+
+  // local state
+  let height_map = [],
+    rows,
+    viewport,
+    contents,
+    viewport_height = 0,
+    visible,
+    mounted,
+    top = 0,
+    bottom = 0,
+    average_height,
+    items_count = 0;
+
+  $: visible = items.slice(start, end).map((data, i) => {
+    return { index: i + start, data };
+  });
+
+  // whenever `items` changes, invalidate the current heightmap
+  $: items, viewport_height, item_height, mounted, refresh();
+
+  async function refresh() {
+    if (!mounted) return;
+    const scrollTop = viewport.scrollTop;
+    await tick(); // wait until the DOM is up to date
+    let content_height = top - scrollTop;
+    let i = start;
+    while (content_height < viewport_height && i < items.length) {
+      let row = rows[i - start];
+      if (!row) {
+        end = i + 1;
+        await tick(); // render the newly visible row
+        row = rows[i - start];
+      }
+      const row_height = (height_map[i] =
+        item_height || (row ? row.offsetHeight : 0));
+      content_height += row_height;
+      i += 1;
+    }
+    end = i;
+    const remaining = items.length - end;
+    average_height = (top + content_height) / end;
+    bottom = remaining * average_height;
+    height_map.length = items.length;
+  }
+
+  async function handle_scroll() {
+    const scrollTop = viewport.scrollTop;
+    const old_start = start;
+    for (let v = 0; v < rows.length; v += 1) {
+      height_map[start + v] = item_height || rows[v].offsetHeight;
+    }
+    let i = 0;
+    let y = 0;
+    while (i < items.length) {
+      const row_height = height_map[i] || average_height;
+      if (y + row_height > scrollTop) {
+        start = i;
+        top = y;
+        break;
+      }
+      y += row_height;
+      i += 1;
+    }
+    while (i < items.length) {
+      y += height_map[i] || average_height;
+      i += 1;
+      if (y > scrollTop + viewport_height) break;
+    }
+    end = i;
+    const remaining = items.length - end;
+    average_height = y / end;
+    while (i < items.length) height_map[i++] = average_height;
+    bottom = remaining * average_height;
+    // prevent jumping if we scrolled up into unknown territory
+    if (start < old_start) {
+      await tick();
+      let expected_height = 0;
+      let actual_height = 0;
+      for (let i = start; i < old_start; i += 1) {
+        if (rows[i - start]) {
+          expected_height += height_map[i];
+          actual_height += item_height || rows[i - start].offsetHeight;
+        }
+      }
+      const d = actual_height - expected_height;
+      viewport.scrollTo(0, scrollTop + d);
+    }
+    // fire on:end event if we scrolled past the end of the list
+    if (end > items.length - end_threshold) {
+      if (items_count !== items.length) {
+        items_count = items.length;
+        await tick();
+        /**
+         * Fired when the list reaches `end_threshold` items before the end of the list.
+         */
+        fire("end", { start, end });
+      }
+    }
+  }
+
+  const resize = () => {
+    viewport_height = viewport.offsetHeight;
+  };
+
+  // trigger initial refresh
+  onMount(() => {
+    rows = contents.getElementsByClassName("row");
+    mounted = true;
+  });
+</script>

package/index.js

@@ -17,6 +17,7 @@ export { default as TimelineItem } from "./helpers/Timeline/TimelineItem.svelte"
 export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.svelte";
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
+export { default as ScrollableList } from "./helpers/ScrollableList.svelte";
 export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";
 export {
   Notifications,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,10 +25,9 @@
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
-    "fuzzysearch": "^1.0.3",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "8da0698c240f93ae1b371a9279d2473409646b10"
+  "gitHead": "b211043d95c9b0f3e4184624ccd84b0a99687e50"
 }

package/sliding-panes/SlidingPane.svelte

@@ -25,6 +25,8 @@ This will work only when `track_height` is set to `true`
       : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
     {style}>
     <div
+      use:resizeObserver
+      on:resize={debouncedFireSizeChange}
       bind:this={slideInner}
       class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
         ? 'h-centered'
@@ -52,6 +54,10 @@ This will work only when `track_height` is set to `true`
 <script>
   import { onMount, createEventDispatcher } from "svelte";
   import { debounce } from "@kws3/ui/utils";
+  import {
+    resizeObserver,
+    hasResizeObserver,
+  } from "@kws3/ui/utils/resizeObserver";
 
   const fire = createEventDispatcher();
 
@@ -76,8 +82,7 @@ This will work only when `track_height` is set to `true`
      */
     track_height = true;
 
-  const hasResizeObserver = typeof window.ResizeObserver != "undefined";
-  let _height, slideInner, Observer;
+  let _height, slideInner;
 
   /**
    * CSS classes for the panel
@@ -91,18 +96,22 @@ This will work only when `track_height` is set to `true`
     }
   }
 
+  const max_retries_for_render = 10;
+  let try_count = 0;
   function pollForRender() {
     if (slideInner && typeof slideInner != "undefined") {
       init();
     } else {
       setTimeout(() => {
-        pollForRender();
+        try_count++;
+        if (try_count < max_retries_for_render) {
+          pollForRender();
+        }
       }, 50);
     }
   }
 
   function init() {
-    setupResizeObserver();
     fireSizeChange();
   }
 
@@ -129,23 +138,7 @@ This will work only when `track_height` is set to `true`
 
   const debouncedFireSizeChange = debounce(fireSizeChange, 150, false);
 
-  const setupResizeObserver = () => {
-    if (hasResizeObserver) {
-      if (!slideInner || typeof slideInner == "undefined") {
-        pollForRender();
-      } else {
-        Observer = new ResizeObserver(() => {
-          debouncedFireSizeChange();
-        });
-        Observer.observe(slideInner);
-      }
-    }
-  };
-
   onMount(() => {
     pollForRender();
-    return () => {
-      Observer && Observer.disconnect();
-    };
   });
 </script>

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

package/utils/fuzzysearch.js

@@ -0,0 +1,20 @@
+export default function fuzzysearch(needle, haystack) {
+  var tlen = haystack.length;
+  var qlen = needle.length;
+  if (qlen > tlen) {
+    return false;
+  }
+  if (qlen === tlen) {
+    return needle === haystack;
+  }
+  outer: for (var i = 0, j = 0; i < qlen; i++) {
+    var nch = needle.charCodeAt(i);
+    while (j < tlen) {
+      if (haystack.charCodeAt(j++) === nch) {
+        continue outer;
+      }
+    }
+    return false;
+  }
+  return true;
+}

package/utils/resizeObserver.js

@@ -0,0 +1,24 @@
+export const hasResizeObserver = typeof window.ResizeObserver != "undefined";
+
+/**
+ * Usage: `<div use:resizeObserver on:resize={resizeHandler}>`
+ * @param {HTMLElement} node
+ * @returns {Object}
+ */
+export function resizeObserver(node) {
+  let ro;
+  if (hasResizeObserver) {
+    ro = new ResizeObserver(() => {
+      const e = new CustomEvent("resize", { bubbles: false });
+      node.dispatchEvent(e);
+    });
+
+    ro.observe(node);
+  }
+
+  return {
+    destroy() {
+      hasResizeObserver && ro.disconnect();
+    },
+  };
+}