@kws3/ui 4.1.2 → 4.1.4

package/CHANGELOG.mdx

@@ -1,85 +1,98 @@
-# 4.1.2
+## 4.1.4
+  - add `black` and `white` as valid color types
+  
+## 4.1.3
+  - Ensure transitions are global for `Modal`, `CardModal` and `ActionSheet` components
+  - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
+
+## 4.1.2
   - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
   - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
   - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
   - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
 
-# 4.1.1
+## 4.1.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow
   - `DatePicker` - bug fix on date range selection colors
 
-# 4.1.0
+## 4.1.0
   - New component `InfiniteList` Added
 
-# 4.0.3
+## 4.0.3
   - `ScrollableList` - bugfixes, and add support for removing items without affecting scroll position
 
-# 4.0.2
+## 4.0.2
   - `ToggleButtons` - add support for count tags, and fix css not applying
 
-# 4.0.1
+## 4.0.1
   - `ScrollableList` - add support for custom iteration key for keyed each block
 
-# 4.0.0
+## 4.0.0
   - add svelte 4 compatibility
   
 --------------
-# 2.3.2
+## 2.3.4
+  - add `black` and `white` as valid color types
+
+## 2.3.3
+  - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
+
+## 2.3.2
   - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
   - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
   - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
   - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
 
 
-# 2.3.1
+## 2.3.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow
   - `DatePicker` - bug fix on date range selection colors
 
-# 2.3.0
+## 2.3.0
   - New component `InfiniteList` Added
 
-# 2.2.5
+## 2.2.5
   - `ScrollableList` - bugfixes, and add support for removing items without affecting scroll position
 
-# 2.2.4
+## 2.2.4
   - `ToggleButtons` - add support for count tags, and fix css not applying
 
-# 2.2.3
+## 2.2.3
   - `ScrollableList` - add support for custom iteration key for keyed each block
 
-# 2.2.2
+## 2.2.2
   - `ScrollableList` - fix jumping issue when edge of scrollable regions are reached
 
-# 2.2.1
+## 2.2.1
   - `Icon` fix icon sizes when line-awesome icons are loaded
   - `Icon` fix material icons when icon family is set globally
   - `Icon` add support for adding custom icon families
   - `Chart` fix, ensure ApexCharts is loaded before trying to initialise it
 
-# 2.2.0
+## 2.2.0
   - Fix bug where `ScrollableList` component puts extra padding on top of list when fast scroll to top
   - `ScrollableList` - Fix bug to reset internal positioning props when data changes
   - fix Popperjs position strategy to work better on mobile by default, affects `SearchableSelect`, `MultiSelect` and `AutoComplete` components
   - `ActionSheet` - Update styling to make it wokr better visually on desktop
 
-# 2.1.4
+## 2.1.4
   - Fix bug where disabled `Checkbox` components wrongly appeared as if they were checked
   - Allow adding CSS classes to the input field in `NumberInput` component
 
-# 2.1.3
+## 2.1.3
  - `PasswordInput` - add support for field `autocomplete` and `required`
  - `PasswordValidator` - fix `valid` field binding
 
-# 2.1.2
+## 2.1.2
  - `PasswordInput` - add support for field `name`
  - `PasswordInput` - fix spacing when icons are turned off
 
-# 2.1.1
+## 2.1.1
  - Package `text-mask-core` moved to @kws3 namespace.
 
-# 2.1.0
+## 2.1.0
  - Bugfix with Colorpicker component, where colors could not be typed in manually.
  - Extended typing and typescript support
  - New Components added `Canvas`, `ESignature`, `PenInput` and `PenControls`

package/charts/Chart.svelte

@@ -16,7 +16,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
 <div class="kws-chart {klass}" bind:this={canvas} />
 
 <script>
-  import { createEventDispatcher, onMount } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
   import { merge } from "./utils";
 
   const fire = createEventDispatcher();
@@ -88,12 +88,11 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
     const module = await import("apexcharts/dist/apexcharts.esm");
     ApexCharts = module.default;
     window.ApexCharts = ApexCharts;
-
     init();
+  });
 
-    return () => {
-      chart && chart.destroy();
-    };
+  onDestroy(() => {
+    if (chart) chart.destroy();
   });
 
   let Events;

package/datagrid/GridView/GridCell.svelte

@@ -11,7 +11,7 @@
 -->
 
 <td class={classNames(column, row)} style={styles(column, row)}>
-  <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+  <!--  eslint-disable-next-line svelte/no-at-html-tags -->
   {@html transforms(column, row)}
 </td>
 

package/datagrid/TileView/TileViewItem.svelte

@@ -23,7 +23,7 @@
   {#each column_keys as column}
     {#if isVisible(column)}
       <div class={classNames(column, row)} style={styles(column, row)}>
-        <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html transforms(column, row)}
       </div>
     {/if}

package/form/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 export function makeForms(items: any): any[] | {
     formData: import("svelte/store").Writable<any>;
     errors: import("svelte/store").Readable<any>;

package/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAGA;;;;;;;;;;EAWC;AA2ID,0CAA4C;AAE5C,0CAAqC;AAErC,8EAA8E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";AAGA;;;;;;;;;;EAWC;AA2ID,0CAA4C;AAE5C,0CAAqC;AAErC,8EAA8E"}

package/helpers/ActionSheet.svelte

@@ -23,11 +23,11 @@ If `false` , the component won't have a close button, and will not close on clic
   class="modal kws-action-sheet-outer {klass} {is_active ? 'is-active' : ''}"
   {style}>
   {#if is_active}<div
-      transition:fade={{ duration: transitionDuration }}
+      transition:fade|global={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
     <div
-      transition:fly={{
+      transition:fly|global={{
         duration: transitionDuration,
         y: 300,
         delay: transitionDelay,

package/helpers/CardModal.svelte

@@ -31,11 +31,11 @@ Only visible when the
 -->
 <div class="modal {klass} {is_active ? 'is-active' : ''}" {style} data-cy={cy}>
   {#if is_active}<div
-      transition:fade={{ duration: transitionDuration }}
+      transition:fade|global={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
     <div
-      transition:scale={{
+      transition:scale|global={{
         duration: transitionDuration,
         // @ts-ignore
         from: 0.8,

package/helpers/Dialog/Dialog.svelte

@@ -38,7 +38,7 @@ For internal use only - not part of config object, Default: `""`
       {/if}
       <div class="column">
         <div>
-          <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           <span class="is-block">{@html _text}</span>
           {#if _type === "prompt"}
             <div class="field" style="margin-top:0.5rem;">

package/helpers/FloatingUI/Floatie.svelte

@@ -49,7 +49,7 @@
         <h4 class="title is-5 is-marginless">{title}</h4>
       {/if}
 
-      <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       <p>{@html message}</p>
 
       {#if !persistent}

package/helpers/FloatingUI/FloatingUIOutput.svelte

@@ -13,7 +13,7 @@
           class="kws-floatie-item has-{variant} is-{item.position}"
           id={item.id}
           animate:flip={{ easing: sineOut }}
-          transition:fly={{
+          transition:fly|global={{
             y: transitionDistance(item.position),
             duration: transitionDuration,
             easing: sineOut,

package/helpers/FloatingUI/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 export namespace FloatiesStore {
     export { create };
     export { remove };
@@ -35,7 +36,7 @@ declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
         snackbar: any[];
         toast: any[];
     };
-}>, invalidate?: (value?: {
+}>, invalidate?: import("svelte/store").Invalidator<{
     top: {
         notification: any[];
         snackbar: any[];
@@ -46,6 +47,6 @@ declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
         snackbar: any[];
         toast: any[];
     };
-}) => void) => import("svelte/store").Unsubscriber;
+}>) => import("svelte/store").Unsubscriber;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/helpers/FloatingUI/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;AA4GA;;GAEG;AAEH;;GAEG;AACH,4BAFU,WAAW,CAgBnB;AAEF;;GAEG;AACH,qBAFU,WAAW,CAiBnB;AAEF;;GAEG;AACH,wBAFU,WAAW,CAiBnB;0BA5DW,OAAO,gBAAgB,EAAE,WAAW;AAxD/C;;;EA6BC;AAED,0CAYC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;;AA4GA;;GAEG;AAEH;;GAEG;AACH,4BAFU,WAAW,CAgBnB;AAEF;;GAEG;AACH,qBAFU,WAAW,CAiBnB;AAEF;;GAEG;AACH,wBAFU,WAAW,CAiBnB;0BA5DW,OAAO,gBAAgB,EAAE,WAAW;AAxD/C;;;EA6BC;AAED,0CAYC"}

package/helpers/InfiniteList.svelte

@@ -131,6 +131,5 @@ while more items are loading
 
   const resize = () => {
     viewport_height = viewport.offsetHeight;
-    handle_scroll();
   };
 </script>

package/helpers/Modal.svelte

@@ -23,11 +23,11 @@ Only programmatic closing is possible, Default: `true`
 
 <div class="modal {klass} {is_active ? 'is-active' : ''}" {style} data-cy={cy}>
   {#if is_active}<div
-      transition:fade={{ duration: transitionDuration }}
+      transition:fade|global={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
     <div
-      transition:scale={{
+      transition:scale|global={{
         duration: transitionDuration,
         // @ts-ignore
         from: 0.8,

package/helpers/Panel.svelte

@@ -48,7 +48,7 @@ This will not work if there is no title area
       <div class="level is-mobile">
         <div class="level-left">
           <div class="level-item">
-            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             <h2 class="subtitle">{@html title}</h2>
           </div>
         </div>
@@ -74,7 +74,7 @@ This will not work if there is no title area
             </div>
           {/if}
           <div class="level-item">
-            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             <h2 class="subtitle is-6">{@html subtitle}</h2>
           </div>
           <span class="collapsor level-item">

package/internal/DrawingPad.d.ts

@@ -69,14 +69,14 @@ export class DrawingPad {
     setColor(color: any): void;
 }
 export namespace Pen {
-    const name: string;
-    const icon: string;
+    let name: string;
+    let icon: string;
     function draw(instance: any): void;
 }
 export namespace Eraser {
-    const name_1: string;
+    let name_1: string;
     export { name_1 as name };
-    const icon_1: string;
+    let icon_1: string;
     export { icon_1 as icon };
     export function draw_1(instance: any): void;
     export { draw_1 as draw };

package/internal/DrawingPad.js

@@ -153,7 +153,7 @@ export class DrawingPad {
       0,
       0,
       this.canvas.width,
-      this.canvas.height
+      this.canvas.height,
     );
   }
 
@@ -179,7 +179,7 @@ export class DrawingPad {
           0,
           0,
           this.canvas.width,
-          this.canvas.height
+          this.canvas.height,
         );
         if (callBackFn) {
           callBackFn();

package/internal/UndoManager.d.ts

@@ -4,11 +4,11 @@ declare class UndoManager {
     index: number;
     isExecuting: boolean;
     callback: any;
-    execute(command: any, action: any): UndoManager;
-    add(command: any): UndoManager;
+    execute(command: any, action: any): this;
+    add(command: any): this;
     setCallback(callbackFunc: any): void;
-    undo(): UndoManager;
-    redo(): UndoManager;
+    undo(): this;
+    redo(): this;
     clear(): void;
     hasUndo(): boolean;
     hasRedo(): boolean;

package/internal/UndoManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UndoManager.d.ts","sourceRoot":"","sources":["UndoManager.js"],"names":[],"mappings":";AAAA;IAEI,gBAAkB;IAClB,cAAe;IACf,qBAAwB;IACxB,cAAoB;IAGtB,gDAQC;IAED,+BAcC;IAED,qCAEC;IAED,oBAWC;IAED,oBAWC;IAED,cAOC;IACD,mBAEC;IACD,mBAEC;IACD,qBAEC;CACF"}
+{"version":3,"file":"UndoManager.d.ts","sourceRoot":"","sources":["UndoManager.js"],"names":[],"mappings":";AAAA;IAEI,gBAAkB;IAClB,cAAe;IACf,qBAAwB;IACxB,cAAoB;IAGtB,yCAQC;IAED,wBAcC;IAED,qCAEC;IAED,aAWC;IAED,aAWC;IAED,cAOC;IACD,mBAEC;IACD,mBAEC;IACD,qBAEC;CACF"}

package/keyboard/index.d.ts

@@ -1,19 +1,20 @@
+/// <reference types="svelte" />
 /**
  * @param {string | number} definition - can be a string like 'Enter', 'Tab' or number as keyCode, also allow combination key like 'ctrl+d', 'ctrl+alt+x'
  * @param {boolean} CommandKey - if true, in mac 'ctrl' key binding will be shift on 'command' key.
  * @returns {import("svelte/action").Action} .
  */
 export function makeKeyDefinition(definition: string | number, CommandKey?: boolean): import("svelte/action").Action;
-export let enter: import("svelte/action").Action<HTMLElement, any, any>;
-export let tab: import("svelte/action").Action<HTMLElement, any, any>;
-export let escape: import("svelte/action").Action<HTMLElement, any, any>;
-export let space: import("svelte/action").Action<HTMLElement, any, any>;
-export let leftarrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let rightarrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let downarrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let uparrow: import("svelte/action").Action<HTMLElement, any, any>;
-export let backspace: import("svelte/action").Action<HTMLElement, any, any>;
-export let del: import("svelte/action").Action<HTMLElement, any, any>;
+export let enter: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let tab: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let escape: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let space: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let leftarrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let rightarrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let downarrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let uparrow: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let backspace: import("svelte/action").Action<HTMLElement, undefined, any>;
+export let del: import("svelte/action").Action<HTMLElement, undefined, any>;
 declare namespace _default {
     export { enter };
     export { tab };

package/keyboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,8CALW,MAAM,GAAG,MAAM,eACf,OAAO,GACL,OAAO,eAAe,EAAE,MAAM,CA0D1C;AAED,wEAA8C;AAC9C,sEAA0C;AAC1C,yEAAgD;AAChD,wEAA0C;AAC1C,4EAAsD;AACtD,6EAAwD;AACxD,4EAAsD;AACtD,0EAAkD;AAClD,4EAAsD;AACtD,sEAA6C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";AAQA;;;;GAIG;AAEH,8CALW,MAAM,GAAG,MAAM,eACf,OAAO,GACL,OAAO,eAAe,EAAE,MAAM,CA2D1C;AAED,8EAA8C;AAC9C,4EAA0C;AAC1C,+EAAgD;AAChD,8EAA0C;AAC1C,kFAAsD;AACtD,mFAAwD;AACxD,kFAAsD;AACtD,gFAAkD;AAClD,kFAAsD;AACtD,4EAA6C"}

package/keyboard/index.js

@@ -54,7 +54,8 @@ export function makeKeyDefinition(definition, CommandKey = false) {
         valid = true;
       }
 
-      if (valid) {
+      if (valid && fire) {
+        // @ts-ignore
         fire(event);
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -26,14 +26,14 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@kws3/text-mask-core": "^5.1.2",
+    "@kws3/text-mask-core": "^5.1.3",
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
     "svelte-portal": "^2.1.2",
     "tippy.js": "^6.3.1"
   },
   "devDependencies": {
-    "typescript": "^5.0.4"
+    "typescript": "^5.2.2"
   },
-  "gitHead": "1f27bb086a10679e03f1657dd1f86800fffe1ab5"
+  "gitHead": "69ffd54529ddc0d7ccddbc0304d48acff0724c4c"
 }

package/settings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 /**
  * - `defaultIconFamily`: `"fa"` - default icon family
  * - `defaultToastPlacement`: `"bottom"` - default placement of toast notifications

package/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["settings.js"],"names":[],"mappings":"AAsCA;;;;;;;;;GASG;AAEH,mCAJW,cAAc,QAQxB;6BAlDY,OAAO,gBAAgB,EAAE,cAAc;AADpD;;GAEG;AAEH,wEAAyC;AACzC,4EAAiD;AACjD,+EAA0D;AAC1D,mFAA2D;AAC3D,sEAAsC;AACtC,2EAOG"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["settings.js"],"names":[],"mappings":";AAsCA;;;;;;;;;GASG;AAEH,mCAJW,cAAc,QAQxB;6BAlDY,OAAO,gBAAgB,EAAE,cAAc;AADpD;;GAEG;AAEH,wEAAyC;AACzC,4EAAiD;AACjD,+EAA0D;AAC1D,mFAA2D;AAC3D,sEAAsC;AACtC,2EAOG"}

package/tsconfig.json

@@ -5,6 +5,8 @@
     "lib": ["es2020", "DOM"],
     "skipLibCheck": true,
     "checkJs": true,
+    "jsx": "react",
+    "esModuleInterop": true,
     // Tells TypeScript to read JS files, as
     // normally they are ignored as source files
     "allowJs": true,

package/types/index.d.ts

@@ -56,7 +56,7 @@ export type SearchOptions = {
 
 export type SearchHelper = (
   needle: string,
-  haystack: Array<string>
+  haystack: Array<string>,
 ) => Array<any>;
 
 export type ValidatePasswordOptions = {

package/types/type-defs/index.d.ts

@@ -7,6 +7,8 @@ export const Colors = [
   "danger",
   "dark",
   "light",
+  "white",
+  "black",
   "link",
 ] as const;
 

package/utils/index.js

@@ -143,7 +143,7 @@ export function randomIntegerFromInterval(min = 0, max = Infinity) {
  * @param {number} [max=100] - Maximum Number, Default: `100`
  */
 export function randomPercent(min = 1, max = 100) {
-  return randomIntegerFromInterval(min, max) + "%";
+  return `${randomIntegerFromInterval(min, max)}%`;
 }
 
 /**