@kws3/ui 1.7.2 → 1.8.0

package/forms/select/SearchableSelect.svelte

@@ -16,9 +16,16 @@ this property of each object will be returned as the value, Default: `"id"`
   @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 {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} [disabled=false] - Disables the component, Default: `false`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
+  @param {string} [async_search_prompt="Start typing to search..."] - Message to display in dropdown when async search can be performed, Default: `"Start typing to search..."`
   @param {string} [remove_all_tip="Clear Selection"] - Tooltip text for the Clear selection button, Default: `"Clear Selection"`
   @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.
@@ -44,13 +51,16 @@ Default value: `<span>{option[search_key] || option}</span>`
   {options}
   {search_key}
   {value_key}
+  {search_strategy}
   {size}
   {color}
   {style}
   {readonly}
   {disabled}
+  {search}
   {selected_icon}
   {remove_all_tip}
+  async_search_prompt={value ? "Backspace to clear" : async_search_prompt}
   {no_options_msg}
   {dropdown_portal}
   on:change={change}
@@ -118,6 +128,21 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Marks component as read-only
    */
   export let readonly = false;
+  /**
+   * 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";
   /**
    * Disables the component
    */
@@ -130,6 +155,10 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Message to display when no matching options are found
    */
   export let no_options_msg = "No matching options";
+  /**
+   * Message to display in dropdown when async search can be performed
+   */
+  export let async_search_prompt = "Start typing to search...";
   /**
    * Tooltip text for the Clear selection button
    */

package/helpers/ActionSheet.svelte

@@ -19,7 +19,9 @@ If `false` , the component won't have a close button, and will not close on clic
 
 -->
 
-<div class="modal {klass} {is_active ? 'is-active' : ''}" {style}>
+<div
+  class="modal kws-action-sheet-outer {klass} {is_active ? 'is-active' : ''}"
+  {style}>
   {#if is_active}<div
       transition:fade={{ duration: transitionDuration }}
       class="modal-background"

package/helpers/CardModal.svelte

@@ -34,7 +34,6 @@ Only visible when the
       transition:fade={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
-
     <div
       transition:scale={{
         duration: transitionDuration,
@@ -83,6 +82,17 @@ Only visible when the
 </div>
 
 <style lang="scss">
+  .modal {
+    display: flex;
+    visibility: hidden;
+    &.is-active {
+      visibility: visible;
+    }
+    .modal-card,
+    .modal-background {
+      transition: all 0.3s;
+    }
+  }
   @media screen and (min-width: 769px), print {
     .modal-card {
       min-width: 640px;

package/helpers/Dialog/index.js

@@ -12,6 +12,8 @@ function createDialog(msg, props) {
 
     dialog.$on("_done", ({ detail }) => {
       fulfil(detail);
+      //Does not outro out because of
+      //https://github.com/sveltejs/svelte/issues/4056
       dialog.$destroy();
     });
   });

package/helpers/Modal.svelte

@@ -26,7 +26,6 @@ Only programmatic closing is possible, Default: `true`
       transition:fade={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
-
     <div
       transition:scale={{
         duration: transitionDuration,
@@ -47,9 +46,19 @@ Only programmatic closing is possible, Default: `true`
 </div>
 
 <style lang="scss">
-  @media screen and (min-width: 769px), print {
+  .modal {
+    display: flex;
+    visibility: hidden;
+    &.is-active {
+      visibility: visible;
+    }
     .modal-content,
-    .modal-card {
+    .modal-background {
+      transition: all 0.3s;
+    }
+  }
+  @media screen and (min-width: 769px), print {
+    .modal-content {
       min-width: 640px;
       &.is-medium {
         width: 70%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -23,11 +23,12 @@
     "access": "public"
   },
   "dependencies": {
-    "apexcharts": "^3.32.0",
+    "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": "227e2a0e081adad79a4a46096d1f846bd307d6e3"
+  "gitHead": "8da0698c240f93ae1b371a9279d2473409646b10"
 }

package/sliding-panes/SlidingPane.svelte

@@ -18,24 +18,40 @@ This will work only when `track_height` is set to `true`
   - `<slot name="default"  />` - Used to display content
 
 -->
-<div
-  bind:clientHeight={_height}
-  class="sliding-pane {v_center ? 'v-centered' : ''} {h_center
-    ? 'h-centered'
-    : ''} {active ? 'is-active' : ''} {klass}"
-  {style}>
+{#if hasResizeObserver}
   <div
-    bind:this={slideInner}
-    class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
-      ? 'h-centered'
-      : ''}">
-    <!--Used to display content--><slot />
+    class="sliding-pane with-resize-observer {v_center
+      ? 'v-centered'
+      : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
+    {style}>
+    <div
+      bind:this={slideInner}
+      class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
+        ? 'h-centered'
+        : ''}">
+      <!--Used to display content--><slot />
+    </div>
   </div>
-</div>
+{:else}
+  <div
+    bind:clientHeight={_height}
+    class="sliding-pane with-legacy-observer {v_center
+      ? 'v-centered'
+      : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
+    {style}>
+    <div
+      bind:this={slideInner}
+      class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
+        ? 'h-centered'
+        : ''}">
+      <!--Used to display content--><slot />
+    </div>
+  </div>
+{/if}
 
 <script>
   import { onMount, createEventDispatcher } from "svelte";
-  import { rAF } from "../utils";
+  import { debounce } from "@kws3/ui/utils";
 
   const fire = createEventDispatcher();
 
@@ -60,7 +76,8 @@ This will work only when `track_height` is set to `true`
      */
     track_height = true;
 
-  let _height, slideInner;
+  const hasResizeObserver = typeof window.ResizeObserver != "undefined";
+  let _height, slideInner, Observer;
 
   /**
    * CSS classes for the panel
@@ -68,15 +85,9 @@ This will work only when `track_height` is set to `true`
   let klass = "";
   export { klass as class };
 
-  onMount(() => {
-    pollForRender();
-  });
-
   $: {
     if (active && track_height && (active || _height)) {
-      rAF(() => {
-        fireSizeChange();
-      });
+      fireSizeChange();
     }
   }
 
@@ -86,11 +97,12 @@ This will work only when `track_height` is set to `true`
     } else {
       setTimeout(() => {
         pollForRender();
-      }, 200);
+      }, 50);
     }
   }
 
   function init() {
+    setupResizeObserver();
     fireSizeChange();
   }
 
@@ -99,21 +111,41 @@ This will work only when `track_height` is set to `true`
       if (!slideInner || typeof slideInner == "undefined") {
         pollForRender();
       } else {
-        rAF(() => {
-          if (!slideInner || typeof slideInner == "undefined") {
-            return;
-          }
-          var h1 = slideInner.scrollHeight,
-            h2 = slideInner.clientHeight;
-          var new_height = Math.max(h1, h2);
-          /**
-           * Event fired when the height of the pane changes
-           *
-           * This will work only when `track_height` is set to `true`
-           */
-          fire("heightChange", { height: new_height });
-        });
+        if (!slideInner || typeof slideInner == "undefined") {
+          return;
+        }
+        var h1 = slideInner.scrollHeight,
+          h2 = slideInner.clientHeight;
+        var new_height = Math.max(h1, h2);
+        /**
+         * Event fired when the height of the pane changes
+         *
+         * This will work only when `track_height` is set to `true`
+         */
+        fire("heightChange", { height: new_height });
       }
     }
   }
+
+  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/ActionSheet.scss

@@ -2,6 +2,16 @@ $kws-actionsheet-background: $background !default;
 $kws-actionsheet-box-shadow: $card-shadow !default;
 $kws-actionsheet-box-radius: $radius !default;
 
+.kws-action-sheet-outer {
+  display: flex;
+  visibility: hidden;
+  &.is-active {
+    visibility: visible;
+  }
+  .modal-background {
+    transition: all 0.3s;
+  }
+}
 .kws-action-sheet {
   border-radius: $kws-actionsheet-box-radius $kws-actionsheet-box-radius 0 0;
   box-shadow: $kws-actionsheet-box-shadow;