@ims360/svelte-ivory 0.0.54 → 0.0.56

package/README.md

@@ -20,3 +20,8 @@ _You may need to adjust the path if your `app.css` is not located in `/src`_
 - [x] Basic layout components (modal, tabs, popover, etc.)
 - [x] Table
 - [ ] Input components
+
+## TODOs
+
+- [ ] Bindings to exported functions
+- [ ] Replace `<Portal>` with `<dialog>` element in Modal, Popover and Drawer

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -41,10 +41,10 @@
     )}
     open
     use:focusTrap={true}
-    use:shortcut={{
+    {@attach shortcut({
         code: 'Escape',
         callback: onclose ?? (() => {})
-    }}
+    })}
     onclick={onclose}
     in:inTransition
     out:outTransition

package/dist/components/layout/modal/Modal.svelte

@@ -53,7 +53,6 @@
     }: Props = $props();
 
     function close() {
-        if (preventClosing) return;
         b_open = false;
     }
 
@@ -70,7 +69,10 @@
 {#if b_open}
     <Portal>
         <HiddenBackground
-            onclose={close}
+            onclose={() => {
+                if (preventClosing) return;
+                close();
+            }}
             class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
         >
             {#if modal}

package/dist/components/layout/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAsFL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAwFL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/utils/actions/index.d.ts

@@ -2,6 +2,6 @@ export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
 export { portal } from './portal';
 export { resize } from './resize';
-export { shortcut } from './shortcut';
+export { shortcut } from './shortcut.svelte';
 export { onFirstVisible } from './visible';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/actions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/dist/utils/actions/index.js

@@ -2,5 +2,5 @@ export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
 export { portal } from './portal';
 export { resize } from './resize';
-export { shortcut } from './shortcut';
+export { shortcut } from './shortcut.svelte';
 export { onFirstVisible } from './visible';

package/dist/utils/actions/shortcut.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Attachment } from 'svelte/attachments';
+export interface ShortcutParams {
+    alt?: boolean;
+    shift?: boolean;
+    control?: boolean;
+    code: string;
+    callback: () => void;
+}
+export declare function shortcut(params: ShortcutParams): Attachment;
+//# sourceMappingURL=shortcut.svelte.d.ts.map

package/dist/utils/actions/shortcut.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/shortcut.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AA4CD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,CAQ3D"}

package/dist/utils/actions/shortcut.svelte.js

@@ -0,0 +1,43 @@
+import { browser } from '$app/environment';
+import { pseudoRandomId } from '../functions';
+// eslint-disable-next-line svelte/prefer-svelte-reactivity
+const callbacks = new Map();
+function setupListener() {
+    if (!browser)
+        return;
+    window.addEventListener('keydown', (e) => {
+        const key = mapKey({
+            code: e.code,
+            alt: e.altKey,
+            shift: e.shiftKey,
+            control: e.ctrlKey
+        });
+        const value = callbacks.get(key);
+        if (!value || value.length === 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        value[value.length - 1].callback();
+    });
+}
+setupListener();
+function mapKey(config) {
+    return `${config.alt ? 'alt' : ''}${config.shift ? 'shift' : ''}${config.control ? 'ctrl' : ''}${config.code}`;
+}
+function registerCallback(config) {
+    const key = mapKey(config);
+    callbacks.set(key, [...(callbacks.get(key) || []), config]);
+}
+function unregisterCallback(config) {
+    const key = mapKey(config);
+    callbacks.set(key, callbacks.get(key)?.filter((c) => c.id !== config.id) ?? []);
+}
+export function shortcut(params) {
+    const id = pseudoRandomId();
+    return (_node) => {
+        registerCallback({ ...params, id });
+        return () => {
+            unregisterCallback({ ...params, id });
+        };
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.0.54",
+    "version": "0.0.56",
     "keywords": [
         "svelte"
     ],

package/src/lib/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -41,10 +41,10 @@
     )}
     open
     use:focusTrap={true}
-    use:shortcut={{
+    {@attach shortcut({
         code: 'Escape',
         callback: onclose ?? (() => {})
-    }}
+    })}
     onclick={onclose}
     in:inTransition
     out:outTransition

package/src/lib/components/layout/modal/Modal.svelte

@@ -53,7 +53,6 @@
     }: Props = $props();
 
     function close() {
-        if (preventClosing) return;
         b_open = false;
     }
 
@@ -70,7 +69,10 @@
 {#if b_open}
     <Portal>
         <HiddenBackground
-            onclose={close}
+            onclose={() => {
+                if (preventClosing) return;
+                close();
+            }}
             class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
         >
             {#if modal}

package/src/lib/utils/actions/index.ts

@@ -2,5 +2,5 @@ export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
 export { portal } from './portal';
 export { resize } from './resize';
-export { shortcut } from './shortcut';
+export { shortcut } from './shortcut.svelte';
 export { onFirstVisible } from './visible';

package/src/lib/utils/actions/shortcut.svelte.ts

@@ -0,0 +1,63 @@
+import { browser } from '$app/environment';
+import type { Attachment } from 'svelte/attachments';
+import { pseudoRandomId } from '../functions';
+
+export interface ShortcutParams {
+    alt?: boolean;
+    shift?: boolean;
+    control?: boolean;
+    code: string;
+    callback: () => void;
+}
+
+// eslint-disable-next-line svelte/prefer-svelte-reactivity
+const callbacks: Map<string, IdShortcutParams[]> = new Map();
+
+function setupListener() {
+    if (!browser) return;
+    window.addEventListener('keydown', (e) => {
+        const key = mapKey({
+            code: e.code,
+            alt: e.altKey,
+            shift: e.shiftKey,
+            control: e.ctrlKey
+        });
+        const value = callbacks.get(key);
+        if (!value || value.length === 0) return;
+        e.preventDefault();
+        e.stopPropagation();
+        value[value.length - 1].callback();
+    });
+}
+
+setupListener();
+
+function mapKey(config: Omit<ShortcutParams, 'callback'>) {
+    return `${config.alt ? 'alt' : ''}${config.shift ? 'shift' : ''}${
+        config.control ? 'ctrl' : ''
+    }${config.code}`;
+}
+
+function registerCallback(config: IdShortcutParams) {
+    const key = mapKey(config);
+    callbacks.set(key, [...(callbacks.get(key) || []), config]);
+}
+
+function unregisterCallback(config: IdShortcutParams) {
+    const key = mapKey(config);
+    callbacks.set(key, callbacks.get(key)?.filter((c) => c.id !== config.id) ?? []);
+}
+
+interface IdShortcutParams extends ShortcutParams {
+    id: string;
+}
+
+export function shortcut(params: ShortcutParams): Attachment {
+    const id = pseudoRandomId();
+    return (_node: Element) => {
+        registerCallback({ ...params, id });
+        return () => {
+            unregisterCallback({ ...params, id });
+        };
+    };
+}

package/dist/utils/actions/shortcut.d.ts

@@ -1,11 +0,0 @@
-export declare const shortcut: (node: HTMLElement, params?: {
-    alt?: boolean;
-    shift?: boolean;
-    control?: boolean;
-    code: string;
-    callback: () => void;
-}) => {
-    update: () => void;
-    destroy: () => void;
-} | undefined;
-//# sourceMappingURL=shortcut.d.ts.map

package/dist/utils/actions/shortcut.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/shortcut.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,GACjB,MAAM,WAAW,EACjB,SAAS;IACL,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;;;aA0BJ,CAAC"}

package/dist/utils/actions/shortcut.js

@@ -1,25 +0,0 @@
-export const shortcut = (node, params) => {
-    if (!params)
-        return;
-    let handler;
-    const removeHandler = () => window.removeEventListener('keydown', handler);
-    const setHandler = () => {
-        removeHandler();
-        handler = (e) => {
-            if (!!params.alt != e.altKey ||
-                !!params.shift != e.shiftKey ||
-                !!params.control != (e.ctrlKey || e.metaKey) ||
-                params.code != e.code)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            params.callback();
-        };
-        window.addEventListener('keydown', handler);
-    };
-    setHandler();
-    return {
-        update: setHandler,
-        destroy: removeHandler
-    };
-};

package/src/lib/utils/actions/shortcut.ts

@@ -1,35 +0,0 @@
-export const shortcut = (
-    node: HTMLElement,
-    params?: {
-        alt?: boolean;
-        shift?: boolean;
-        control?: boolean;
-        code: string;
-        callback: () => void;
-    }
-) => {
-    if (!params) return;
-    let handler: (e: KeyboardEvent) => void;
-    const removeHandler = () => window.removeEventListener('keydown', handler);
-    const setHandler = () => {
-        removeHandler();
-        handler = (e) => {
-            if (
-                !!params.alt != e.altKey ||
-                !!params.shift != e.shiftKey ||
-                !!params.control != (e.ctrlKey || e.metaKey) ||
-                params.code != e.code
-            )
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            params.callback();
-        };
-        window.addEventListener('keydown', handler);
-    };
-    setHandler();
-    return {
-        update: setHandler,
-        destroy: removeHandler
-    };
-};