@hashrytech/quick-components-kit 0.20.0 → 0.20.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hashrytech/quick-components-kit
 
+## 0.20.3
+
+### Patch Changes
+
+- add: adding navigation-state class
+
+## 0.20.2
+
+### Patch Changes
+
+- fix: adding step to input and null type to value of text area
+
+## 0.20.1
+
+### Patch Changes
+
+- fix: text breaking in toast
+
 ## 0.20.0
 
 ### Minor Changes

package/dist/components/text-area/TextArea.svelte

@@ -33,7 +33,7 @@
     export type TextInputProps = {
         id: string;        
         name?: string;
-        value?: string|number;        
+        value?: string|number|null;        
         placeholder?: string;
         labelText?: string;
         labelPosition?: "top" | "left" | "right" | "bottom";

package/dist/components/text-area/TextArea.svelte.d.ts

@@ -30,7 +30,7 @@ export type InputMode = "none" | "text" | "decimal" | "numeric" | "tel" | "searc
 export type TextInputProps = {
     id: string;
     name?: string;
-    value?: string | number;
+    value?: string | number | null;
     placeholder?: string;
     labelText?: string;
     labelPosition?: "top" | "left" | "right" | "bottom";

package/dist/components/text-input/TextInput.svelte

@@ -193,7 +193,7 @@
             
             {#if leftIcon}<div class="h-full flex flex-col items-center justify-center {size == 'lg' ? 'pl-3' : 'pl-2.5'}">{@render leftIcon()}</div>{/if}
             
-            <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {pattern} {onmouseup} bind:value {autocomplete} {inputmode} {min} {max} oninput={handleInput}
+            <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {pattern} {onmouseup} bind:value {autocomplete} {inputmode} {step} {min} {max} oninput={handleInput}
                 class={twMerge("border-0 focus:border-0 focus:ring-0 active:border-0 outline-none p-0 bg-transparent placeholder:text-neutral-600/50 h-full w-full rounded-primary", sizeStyle[size], restProps.class)} />
 
             {#if rightIcon}<div class="h-full flex flex-col items-center justify-center {size == 'lg' ? 'pr-3' : 'pr-2.5'}">{@render rightIcon()}</div>{/if}

package/dist/components/toast/Toast.svelte

@@ -42,16 +42,16 @@
 {#if open}
 <div transition:fly={{ delay: toastOptions.transitionDelay, duration: toastOptions.transitionDuration, y: toastOptions.transitionY, easing: toastOptions.transitionEasing }} class="flex flex-row rounded-lg mt-2 py-0.5 h-full min-h-[4rem] shadow-lg w-full max-w-md ring-1 
   border-none pointer-events-auto text-neutral-700 {toastTypeClasses[toastType]}">
-  <div class="flex flex-row gap-4 items-center w-full justify-center rounded-sm mx-4">          
+  <div class="flex flex-row gap-4 items-center w-full justify-center rounded-sm px-4">          
       
       <div class="flex flex-row items-center justify-center">
           <span class="{toastIcons[toastType]} {toastTypeIconColours[toastType]} size-8 outline-hidden"></span>
       </div>
       
-      <div class="flex flex-col gap-1 px-2 w-full rounded-sm p-2">
-          <p class="text-sm font-medium break-all xs:break-word">{@html message}</p>
+      <div class="flex flex-col gap-1 rounded-sm py-2 flex-1 min-w-0">
+          <p class="text-sm font-medium break-words overflow-wrap-anywhere hyphens-auto">{@html message}</p>
           {#if subMessage}
-          <p class="text-xs font-light break-all xs:break-word">{@html subMessage}</p>
+          <p class="text-xs font-light break-words whitespace-normal hyphens-auto">{@html subMessage}</p>
           {/if}
       </div>
 

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from './modules/fetch-client.js';
 export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';
 export * from './modules/problem-details.js';
+export * from './modules/navigation-state.js';
 export * from './functions/object-to-form-data.js';
 export * from './functions/compare-objects.js';
 export * from './functions/click-outside.js';

package/dist/index.js

@@ -27,6 +27,7 @@ export * from './modules/fetch-client.js';
 export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';
 export * from './modules/problem-details.js';
+export * from './modules/navigation-state.js';
 // Functions
 export * from './functions/object-to-form-data.js';
 export * from './functions/compare-objects.js';

package/dist/modules/navigation-state.d.ts

@@ -0,0 +1,28 @@
+export type NavigationStateOptions = {
+    init?: string[][] | Record<string, string> | string | URLSearchParams;
+    onNavigateFns?: Array<(queryString?: string) => void | Promise<void>>;
+    defaultParams?: Record<string, string | number | boolean>;
+};
+export declare class NavigationState extends URLSearchParams {
+    static readonly SEARCH_PARAM: string;
+    static readonly LIMIT_PARAM: string;
+    static readonly OFFSET_PARAM: string;
+    private listeners;
+    private defaultParams?;
+    private onNavigateFns?;
+    constructor(opts?: NavigationStateOptions);
+    private emit;
+    onNavigate: (fn: (queryString?: string) => void) => () => boolean;
+    navigate: () => Promise<void>;
+    /** Make a copy (so we can return new instances for Svelte reactivity) */
+    clone: () => NavigationState;
+    /** Clear the specified keys (or everything if no keys passed) */
+    clear: (keyList?: string[]) => void;
+    setDefaultParam: (key: string, value: string) => void;
+    setDefaultParams: (params: Record<string, string | number | boolean>) => void;
+    clearPagination: () => void;
+    paginate: (values: Record<string, string>) => Promise<void>;
+    search: (term: string | number | null) => Promise<void>;
+    filter: (key: string, value: string | number | boolean | null | undefined | Array<string | number | boolean>) => Promise<void>;
+    removeFilter: (key: string, value?: string | number | boolean | null | undefined | Array<string | number | boolean>) => Promise<void>;
+}

package/dist/modules/navigation-state.js

@@ -0,0 +1,84 @@
+export class NavigationState extends URLSearchParams {
+    static SEARCH_PARAM = "q";
+    static LIMIT_PARAM = "limit";
+    static OFFSET_PARAM = "offset";
+    listeners = new Set();
+    defaultParams;
+    onNavigateFns;
+    constructor(opts = {}) {
+        super(opts.init);
+        this.defaultParams = opts.defaultParams ?? {};
+        this.onNavigateFns = opts.onNavigateFns ?? [];
+        if (opts.onNavigateFns) {
+            opts.onNavigateFns.forEach(fn => this.onNavigate(fn));
+        }
+        this.setDefaultParams(this.defaultParams);
+    }
+    /* NOTE we use arrow functions because we want to preserve 'this' context when using it as svelte 5 bindings or to pass as functions to components */
+    emit = () => {
+        //console.log("Nav Listeners: ", this.listeners.size);
+        for (const fn of this.listeners)
+            fn(this.toString());
+    };
+    onNavigate = (fn) => {
+        this.listeners.add(fn);
+        return () => this.listeners.delete(fn); // unsubscribe
+    };
+    navigate = async () => {
+        this.emit();
+    };
+    /** Make a copy (so we can return new instances for Svelte reactivity) */
+    clone = () => {
+        return new NavigationState({ init: this, onNavigateFns: this.onNavigateFns, defaultParams: this.defaultParams });
+    };
+    /** Clear the specified keys (or everything if no keys passed) */
+    clear = (keyList) => {
+        const all_keys = keyList && keyList.length > 0 ? keyList : Array.from(this.keys());
+        for (const akey in all_keys) {
+            const isDefaultkey = this.defaultParams && akey in this.defaultParams;
+            if (!isDefaultkey)
+                this.delete(akey);
+        }
+    };
+    setDefaultParam = (key, value) => {
+        this.set(key, value);
+    };
+    setDefaultParams = (params) => {
+        for (const key in params) {
+            this.set(key, String(params[key]));
+        }
+    };
+    clearPagination = () => {
+        this.delete(NavigationState.LIMIT_PARAM);
+        this.delete(NavigationState.OFFSET_PARAM);
+    };
+    /* The below emit events after performing their actions */
+    paginate = async (values) => {
+        this.clearPagination();
+        for (const key in values) {
+            this.set(key, values[key]);
+        }
+        this.emit();
+    };
+    search = async (term) => {
+        this.clearPagination();
+        this.delete(NavigationState.SEARCH_PARAM);
+        if (term)
+            this.set(NavigationState.SEARCH_PARAM, String(term));
+        this.emit();
+    };
+    filter = async (key, value) => {
+        this.clearPagination();
+        this.set(key, String(value));
+        this.emit();
+    };
+    removeFilter = async (key, value) => {
+        this.clearPagination();
+        this.getAll(key).forEach((v) => {
+            if (v === String(value)) {
+                this.delete(key);
+            }
+        });
+        this.emit();
+    };
+}

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.20.0",
+  "version": "0.20.3",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [