@kws3/ui 1.9.1 → 2.0.0

package/forms/select/SearchableSelect.svelte

@@ -12,8 +12,8 @@ Used to populate the list of options in the dropdown, Default: `[]`
 this property of each object will be searched, Default: `"name"`
   @param {string} [value_key="id"] - If `options` is an array of objects,
 this property of each object will be returned as the value, Default: `"id"`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {function|null} [search=null] - Async function to fetch options
@@ -88,6 +88,7 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Value of the Input
    *
    * This property can be bound to, to fetch the current value
+   * @type {object}
    */
   export let value = null;
   /**
@@ -112,12 +113,12 @@ Default value: `<span>{option[search_key] || option}</span>`
   export let value_key = "id";
   /**
    * Size of the input
-   *  @type {''|'small'|'medium'|'large'}
+   *  @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "";
   /**
    * Color of the input
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "";
   /**
@@ -140,7 +141,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   /**
    * Filtered options to be displayed strictly based on search text or perform a fuzzy match.
    * Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching.
-   * @type {'fuzzy'|'strict'}
+   * @type {string|'fuzzy'|'strict'}
    */
   export let search_strategy = "fuzzy";
   /**

package/helpers/CardModal.svelte

@@ -37,6 +37,7 @@ Only visible when the
     <div
       transition:scale={{
         duration: transitionDuration,
+        // @ts-ignore
         from: 0.8,
         to: 1,
         delay: transitionDelay,
@@ -116,7 +117,7 @@ Only visible when the
   export let title = "",
     /**
      * Size of the modal
-     * @type {'small'|'medium'|'large'}
+     * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "small",
     /**

package/helpers/ClipboardCopier.svelte

@@ -41,6 +41,9 @@ If `''` is selected, Icon will not change colour after copying, Default: `"succe
   import { tick } from "svelte";
   import { Icon } from "@kws3/ui";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
   /**
    * Default tooltip text
    */
@@ -70,7 +73,7 @@ If `''` is selected, Icon will not change colour after copying, Default: `"succe
      *
      * If `''` is selected, Icon will not change colour after copying
      *
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {import('@kws3/ui/types').ColorOptions}
      */
     copied_icon_color = "success";
 

package/helpers/Dialog/Dialog.svelte

@@ -87,12 +87,17 @@ For internal use only - not part of config object, Default: `""`
 
 <script>
   import { tick, onMount, createEventDispatcher } from "svelte";
-  import { Icon } from "@kws3/ui";
-  import { CardModal } from "@kws3/ui";
-  import { isEnterKey, isEscKey, capitaliseFirstLetter } from "@kws3/ui/utils";
+  import { Icon, CardModal } from "@kws3/ui";
+  import { capitaliseFirstLetter } from "@kws3/ui/utils";
+  import { isEnterKey, isEscKey } from "../../internal";
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Title text of the Dialog box
    * @type {string}
@@ -104,7 +109,7 @@ For internal use only - not part of config object, Default: `""`
     help_text = "",
     /**
      * Size of the Dialog box
-     * @type {'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "small",
     /**
@@ -118,12 +123,12 @@ For internal use only - not part of config object, Default: `""`
     icon = "",
     /**
      * Color of the Icon in the Dialog box
-     * @type {'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     icon_color = "primary",
     /**
      * Size of the Icon in the Dialog box
-     * @type {'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     icon_size = "",
     /**
@@ -132,7 +137,7 @@ For internal use only - not part of config object, Default: `""`
     ok_button_text = "Ok",
     /**
      * Color of OK button
-     * @type {'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions} ok_button_color
      */
     ok_button_color = "primary",
     /**
@@ -146,7 +151,7 @@ For internal use only - not part of config object, Default: `""`
     cancel_button_text = "Cancel",
     /**
      * Color of Cancel button
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     cancel_button_color = "",
     /**

package/helpers/Dialog/index.js

@@ -4,16 +4,19 @@ function createDialog(msg, props) {
   props = Object.assign(props, { _text: msg });
 
   const promise = new Promise((fulfil) => {
+    //@ts-ignore
     const dialog = new Dialog({
       target: document.body,
       props,
       intro: true,
     });
 
+    //@ts-ignore
     dialog.$on("_done", ({ detail }) => {
       fulfil(detail);
       //Does not outro out because of
       //https://github.com/sveltejs/svelte/issues/4056
+      //@ts-ignore
       dialog.$destroy();
     });
   });
@@ -39,8 +42,11 @@ export function confirm(msg, props) {
   return createDialog(msg, props);
 }
 
+//@ts-ignore
 Dialog.alert = alert;
+//@ts-ignore
 Dialog.confirm = confirm;
+//@ts-ignore
 Dialog.prompt = prompt;
 
 export default Dialog;

package/helpers/Divider.svelte

@@ -25,7 +25,7 @@
 <script>
   /**
    * Color of the Divider lines
-   * @type {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "",
     /**
@@ -38,7 +38,7 @@
     vertical = false,
     /**
      * Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers
-     * @type {'center' | 'left' | 'right' | 'top' | 'bottom'}
+     * @type {string|'center' | 'left' | 'right' | 'top' | 'bottom'}
      */
     alignment = "center",
     /**

package/helpers/FloatingUI/Floatie.svelte

@@ -10,7 +10,6 @@
   @param {boolean} [light=false] - Inverted colors for notification box and contents, Default: `false`
   @param {boolean} [dismissable=true] - Determines if notification is dismissable, Default: `true`
   @param {boolean} [persistent=false] - A persistent notification without duration, stays till dismissed, Default: `false`
-  @param {string} [context=""] - Context value, Default: `""`
   @param {object} [component=null] - Custom component, Default: `null`
   @param {function} [beforeClose(props)] - Callback function call before close event
   @param {function} [afterClose(props)] - Callback function call after close event
@@ -66,6 +65,10 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Title/Heading of the notification
    */
@@ -85,7 +88,7 @@
     duration = 3000,
     /**
      * Toast notification background color
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     color = "primary",
     /**
@@ -100,10 +103,6 @@
      * A persistent notification without duration, stays till dismissed
      */
     persistent = false,
-    /**
-     * Context value
-     */
-    context = "",
     /**
      * Custom component
      */
@@ -131,6 +130,7 @@
     let defaults = { text: "Ok", color: "", click: () => {} },
       obj = b;
     if (typeof b == "string") {
+      // @ts-ignore
       obj = { text: b };
     }
     return Object.assign({}, defaults, obj);

package/helpers/FloatingUI/index.js

@@ -1,4 +1,4 @@
-import { FloatingUIOutput } from "@kws3/ui";
+import FloatingUIOutput from "./FloatingUIOutput.svelte";
 import { writable, get } from "svelte/store";
 import {
   defaultToastPlacement,
@@ -19,6 +19,7 @@ function ensureOutputIsOnPage() {
     return;
   }
 
+  //@ts-ignore
   OUTPUT_IS_ON_PAGE = new FloatingUIOutput({
     target: document.body,
   });

package/helpers/Icon.svelte

@@ -2,10 +2,10 @@
   @component
 
 
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Icon, Default: `""`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Icon, Default: `""`
+  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the Icon, Default: `""`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Icon, Default: `""`
   @param {string} [icon=""] - The name of the icon that is to be displayed, from the relevant icon family, Default: `""`
-  @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [family=""] - Icon family, can be modified globally in framework settings
+  @param {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'} [family=""] - Icon family, can be modified globally in framework settings
 
 Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
   @param {string} [style=""] - Inline CSS for icon container, Default: `""`
@@ -18,7 +18,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 <span class="icon is-{size} has-text-{color} {klass}" {style}>
   <i
     class="icon-i {familyClass}{icon} {internal_size} {inner_class}"
-    style={inner_style} />
+    style={inner_style}>{inner_icon}</i>
 </span>
 
 <style>
@@ -47,6 +47,19 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
   .icon .uil.fa-3x {
     font-size: 3em;
   }
+
+  .icon .material-icons {
+    font-size: 1.25em;
+  }
+  .icon .material-icons.fa-lg {
+    font-size: 1.5em;
+  }
+  .icon .material-icons.fa-2x {
+    font-size: 2em;
+  }
+  .icon .material-icons.fa-3x {
+    font-size: 3em;
+  }
 </style>
 
 <script>
@@ -54,12 +67,12 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 
   /**
    * Size of the Icon
-   *  @type {''|'small'|'medium'|'large'}
+   *  @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "",
     /**
      * Color of the Icon
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
      */
     color = "",
     /**
@@ -70,7 +83,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
      * Icon family, can be modified globally in framework settings
      *
      * Ultimately defaults to `fa`, if family is not set anywhere
-     * @type {''|'fa'|'lar'|'las'|'gg'|'unicons'}
+     * @type {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'}
      */
     family = "",
     /**
@@ -97,9 +110,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
     internal_size,
     usedFamily;
 
+  $: inner_icon = family === "material" ? icon : "";
   $: {
-    usedFamily =
-      family && family !== "" ? family : globalFamily ? globalFamily : "fa";
+    usedFamily = family !== "" ? family : globalFamily ? globalFamily : "fa";
 
     switch (usedFamily) {
       case "lar":
@@ -117,6 +130,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
       case "unicons":
         familyClass = "uil uil-";
         break;
+      case "material":
+        familyClass = "material-icons material-symbols-outlined ";
+        break;
       default:
         familyClass = "fa fa-";
         break;

package/helpers/Loader.svelte

@@ -31,20 +31,27 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
 </div>
 
 <script>
+  /**
+
+   * @typedef {import('@kws3/ui/types').SpinnerColorOptions} SpinnerColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').BGColorOptions} BGColorOptions
+   *
+   */
   /**
    * Color of the Spinner
    * @link https://bulma.io/documentation/helpers/color-helpers/
-   * @type {'grey' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+   * @type {SpinnerColorOptions}
    */
   export let spinner_color = "grey",
     /**
      * Size of the Spinner
-     * @type {'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     spinner_size = "medium",
     /**
      * Backgound color of the Spinner container
-     * @type {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     * @type {BGColorOptions}
      */
     background_color = "transparent",
     /**

package/helpers/Message.svelte

@@ -70,12 +70,12 @@ The parent can then decide what to do with the component
 
   /**
    * Size of the Message
-   * @type {''|'small'|'medium'|'large'}
+   * @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "",
     /**
      * Color of the Message box
-     * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
      */
     color = "info",
     /**

package/helpers/Modal.svelte

@@ -29,6 +29,7 @@ Only programmatic closing is possible, Default: `true`
     <div
       transition:scale={{
         duration: transitionDuration,
+        // @ts-ignore
         from: 0.8,
         to: 1,
         delay: transitionDelay,
@@ -75,7 +76,7 @@ Only programmatic closing is possible, Default: `true`
   import { hasTransitions } from "../settings";
   /**
    * Size of the modal
-   * @type {'small'|'medium'|'large'}
+   * @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "small",
     /**

package/helpers/Notification.svelte

@@ -35,7 +35,7 @@ The parent can then decide what to do with the component
 
   /**
    * Color of the Notification box
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'light'|'dark'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "info";
 

package/helpers/Popover.svelte

@@ -3,8 +3,8 @@
 
 
   @param {string} [icon="info-circle"] - Icon used when default slot has no content, Default: `"info-circle"`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [icon_color="primary"] - Colour of the trigger icon displayed when default slot has no content, Default: `"primary"`
-  @param {''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [icon_color="primary"] - Colour of the trigger icon displayed when default slot has no content, Default: `"primary"`
+  @param {string|''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
   @param {string} [trigger="click"] - Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
 
 **Examples:** `click`, `mouseenter`, `mouseenter focus`
@@ -85,12 +85,12 @@ It can be any CSS value associated with `max-width` property, including `"none"`
   export let icon = "info-circle";
   /**
    * Colour of the trigger icon displayed when default slot has no content
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
    */
   export let icon_color = "primary";
   /**
    * Size of the trigger icon displayed when default slot has no content
-   * @type {''|'small'|'medium'|'large'}
+   * @type {import('@kws3/ui/types').SizeOptions}
    */
   export let icon_size = "small";
   /**

package/helpers/ScrollableList.svelte

@@ -8,6 +8,7 @@
   @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 {number} [padding_threshold=5] - render 'n' number of items on outside the viewport (top and bottom) to avoid visible glitches on scrolling., Default: `5`
   @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
   @param {string} [class=""] - CSS classes for scroller container, Default: `""`
 
@@ -77,10 +78,7 @@ while more items are loading
 <script>
   import { onMount, tick } from "svelte";
   import { createEventDispatcher } from "svelte";
-  import {
-    resizeObserver,
-    hasResizeObserver,
-  } from "@kws3/ui/utils/resizeObserver";
+  import { resizeObserver, hasResizeObserver } from "@kws3/ui/resizeObserver";
 
   const fire = createEventDispatcher();
   /**
@@ -108,6 +106,10 @@ while more items are loading
      *  `end` event will be fired when the list reaches this many items before the end of the list.
      */
     end_threshold = 10,
+    /**
+     *  render 'n' number of items on outside the viewport (top and bottom) to avoid visible glitches on scrolling.
+     */
+    padding_threshold = 5,
     /**
      * Inline CSS for scroller container
      */
@@ -132,9 +134,11 @@ while more items are loading
     average_height,
     items_count = 0;
 
-  $: visible = items.slice(start, end).map((data, i) => {
-    return { index: i + start, data };
-  });
+  $: padStart = start > padding_threshold ? start - padding_threshold : start;
+  $: padEnd = end + padding_threshold;
+  $: visible = items
+    .slice(padStart, padEnd)
+    .map((data, i) => ({ index: i + padStart, data }));
 
   // whenever `items` changes, invalidate the current heightmap
   $: items, viewport_height, item_height, mounted, refresh();
@@ -176,7 +180,7 @@ while more items are loading
       const row_height = height_map[i] || average_height;
       if (y + row_height > scrollTop) {
         start = i;
-        top = y;
+        top = y - row_height * padding_threshold;
         break;
       }
       y += row_height;

package/helpers/Skeleton.svelte

@@ -25,6 +25,9 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
 {/each}
 
 <script>
+  /**
+   * @typedef {import('@kws3/ui/types').BGColorOptions} BGColorOptions
+   */
   export let /**
      * Number of lines of text to display.
      */
@@ -51,7 +54,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
     circle = false,
     /**
      * Color of the Skeleton lines
-     * @type {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     * @type {BGColorOptions}
      */
     color = "";
 

package/helpers/Timeline/Timeline.svelte

@@ -16,7 +16,7 @@
 <script>
   /**
    * Alignment of the Timeline child items
-   * @type {'left'|'center'|'right'}
+   * @type {string|'left'|'center'|'right'}
    */
   export let align = "left";
 

package/helpers/Timeline/TimelineItem.svelte

@@ -3,8 +3,8 @@
 
 
   @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of marker and border, Default: `"primary"`
-  @param {string} [marker_icon="null"] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
-  @param {string} [marker_image="null"] - Any image URL, the image will be placed inside the marker, Default: `"null"`
+  @param {string} [marker_icon=""] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
+  @param {string} [marker_image=""] - Any image URL, the image will be placed inside the marker, Default: `"null"`
   @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
 
   ### Slots
@@ -48,19 +48,19 @@
 
   /**
    * Color of marker and border
-   * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "primary";
   /**
    * Any icon name accepted by the Icon component, icon will be placed inside the marker
    * @type {string}
    */
-  export let marker_icon = null;
+  export let marker_icon = "";
   /**
    * Any image URL, the image will be placed inside the marker
    * @type {string}
    */
-  export let marker_image = null;
+  export let marker_image = "";
 
   /**
    * CSS classes for the TimelineItem container

package/helpers/Tooltip.js

@@ -5,7 +5,7 @@ import tippy, { delegate } from "tippy.js";
  * @param {string} container - CSS selector of container
  * @param {object} opts - tooltip options
  */
-export function activateTooltips(container, opts) {
+export function activateTooltips(container, opts = {}) {
   let _opts = Object.assign(
     {
       target: "[data-tooltip]",

package/index.js

@@ -1,6 +1,6 @@
-export { applySettings } from "./settings";
+export { applySettings } from "./settings.js";
 
-export { activateTooltips, tooltip, popover } from "./helpers/Tooltip";
+export { activateTooltips, tooltip, popover } from "./helpers/Tooltip.js";
 export { default as Popover } from "./helpers/Popover.svelte";
 export { default as Icon } from "./helpers/Icon.svelte";
 export { default as Message } from "./helpers/Message.svelte";
@@ -18,13 +18,18 @@ export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.sve
 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 {
+  alert,
+  confirm,
+  prompt,
+  default as Dialog,
+} from "./helpers/Dialog/index.js";
 export {
   Notifications,
   Toasts,
   Snackbars,
   FloatiesStore,
-} from "./helpers/FloatingUI";
+} from "./helpers/FloatingUI/index.js";
 export { default as FloatingUIOutput } from "./helpers/FloatingUI/FloatingUIOutput.svelte";
 export { default as Floatie } from "./helpers/FloatingUI/Floatie.svelte";
 export { portal } from "svelte-portal";
@@ -56,6 +61,7 @@ export { default as MaskedInput } from "./forms/MaskedInput.svelte";
 export { default as Colorpicker } from "./forms/colorpicker/Colorpicker.svelte";
 export { default as Datepicker } from "./forms/Datepicker.svelte";
 export { default as Timepicker } from "./forms/Timepicker.svelte";
+export { default as SearchInput } from "./forms/SearchInput.svelte";
 export { datepicker as DatepickerAction } from "./forms/actions.js";
 export { timepicker as TimepickerAction } from "./forms/actions.js";
 export { default as PasswordValidator } from "./forms/PasswordValidator/PasswordValidator.svelte";