@ims360/svelte-ivory 0.1.15 → 0.2.1

package/src/lib/utils/{actions → attachments}/index.ts

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

package/src/lib/utils/attachments/resize.ts

@@ -0,0 +1,38 @@
+import type { Attachment } from 'svelte/attachments';
+
+export const resize =
+    ({
+        resized,
+        dragging
+    }: {
+        resized: (mouseX: number) => void;
+        dragging: (dragging: boolean) => void;
+    }): Attachment =>
+    (node) => {
+        const onResize = (e: PointerEvent) => {
+            resized(e.clientX);
+        };
+
+        const onResizeEnd = () => {
+            dragging(false);
+            window.removeEventListener('pointermove', onResize);
+            window.removeEventListener('pointerup', onResizeEnd);
+            window.removeEventListener('pointercancel', onResizeEnd);
+
+            document.getElementsByTagName('html')[0].style.userSelect = '';
+        };
+
+        const onResizeStart = () => {
+            dragging(true);
+            window.addEventListener('pointermove', onResize);
+            window.addEventListener('pointerup', onResizeEnd);
+            window.addEventListener('pointercancel', onResizeEnd);
+
+            document.getElementsByTagName('html')[0].style.userSelect = 'none';
+        };
+        node.addEventListener('pointerdown', onResizeStart);
+
+        return () => {
+            node.removeEventListener('pointerdown', onResizeStart);
+        };
+    };

package/src/lib/utils/attachments/visible.ts

@@ -0,0 +1,22 @@
+import type { Attachment } from 'svelte/attachments';
+
+export const onFirstVisible =
+    (params: { callback: () => void; options?: Partial<IntersectionObserverInit> }): Attachment =>
+    (node) => {
+        const observer = new IntersectionObserver(
+            (e) => {
+                if (!e[0].isIntersecting) {
+                    return;
+                }
+
+                params.callback();
+            },
+            { root: null, threshold: 1, ...params.options }
+        );
+
+        observer.observe(node);
+
+        return () => {
+            observer.disconnect();
+        };
+    };

package/src/lib/utils/merge.ts

@@ -0,0 +1,7 @@
+import clsx, { type ClassArray } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** `twMerge(clsx(classes))` */
+export const merge = (...classes: ClassArray) => {
+    return twMerge(clsx(classes));
+};

package/dist/components/layout/portal/Portal.svelte

@@ -1,39 +0,0 @@
-<script lang="ts" module>
-    import type { IvoryComponent } from '../../../types';
-    import type { Snippet } from 'svelte';
-    import { portal } from '../../../utils/actions/index';
-
-    export interface PortalProps extends IvoryComponent<HTMLDivElement> {
-        children: Snippet;
-        target?: string | HTMLElement;
-    }
-
-    export interface PortalConfig {
-        defaultTarget: string;
-    }
-
-    const defaultConfig: PortalConfig = {
-        defaultTarget: 'body'
-    };
-
-    let config = $state<PortalConfig>(defaultConfig);
-    export function setConfig(newConfig: Partial<PortalConfig>) {
-        config = { ...defaultConfig, ...newConfig };
-    }
-</script>
-
-<script lang="ts">
-    let { children, target }: PortalProps = $props();
-</script>
-
-<!-- 
-    @component
-    A portal, renders its children in a different DOM element.
-
-    Wrapps the `use:portal` action.
-
-    **Use sparingy as it can make the DOM structure confusing**
--->
-<div use:portal={target ?? config.defaultTarget} hidden>
-    {@render children()}
-</div>

package/dist/components/layout/portal/Portal.svelte.d.ts

@@ -1,21 +0,0 @@
-import type { IvoryComponent } from '../../../types';
-import type { Snippet } from 'svelte';
-export interface PortalProps extends IvoryComponent<HTMLDivElement> {
-    children: Snippet;
-    target?: string | HTMLElement;
-}
-export interface PortalConfig {
-    defaultTarget: string;
-}
-export declare function setConfig(newConfig: Partial<PortalConfig>): void;
-/**
- * A portal, renders its children in a different DOM element.
- *
- * Wrapps the `use:portal` action.
- *
- * **Use sparingy as it can make the DOM structure confusing**
- */
-declare const Portal: import("svelte").Component<PortalProps, {}, "">;
-type Portal = ReturnType<typeof Portal>;
-export default Portal;
-//# sourceMappingURL=Portal.svelte.d.ts.map

package/dist/components/layout/portal/Portal.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/Portal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAED,MAAM,WAAW,YAAY;IACzB,aAAa,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,QAEzD;AAeL;;;;;;GAMG;AACH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/portal/index.d.ts

@@ -1,6 +0,0 @@
-import { setConfig } from './Portal.svelte';
-declare const portal: import("svelte").Component<import("./Portal.svelte").PortalProps, {}, ""> & {
-    setConfig: typeof setConfig;
-};
-export default portal;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/portal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/index.ts"],"names":[],"mappings":"AAAA,OAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEpD,QAAA,MAAM,MAAM;;CAEV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/layout/portal/index.js

@@ -1,5 +0,0 @@
-import Portal, { setConfig } from './Portal.svelte';
-const portal = Object.assign(Portal, {
-    setConfig
-});
-export default portal;

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

@@ -1 +0,0 @@
-{"version":3,"file":"clickOutside.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/clickOutside.ts"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IACxB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,8CAA8C;AAC9C,wBAAgB,YAAY,CACxB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,kBAAkB;;EA2BzD"}

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

@@ -1,5 +0,0 @@
-export declare function focusTrap(node: HTMLElement, enabled: boolean): {
-    update(newArgs: boolean): void;
-    destroy(): void;
-};
-//# sourceMappingURL=focusTrap.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/focusTrap.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO;oBAsDrC,OAAO;;EAU9B"}

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

@@ -1 +0,0 @@
-{"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/portal.d.ts

@@ -1,10 +0,0 @@
-/**
- * Places the element in a diffrent place in the DOM
- *
- * **Use sparingy as it can make the DOM structure confusing**
- */
-export declare function portal(el: HTMLElement, target?: HTMLElement | string): {
-    update: (newTarget: HTMLElement | string) => Promise<void>;
-    destroy: () => void;
-};
-//# sourceMappingURL=portal.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/portal.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,GAAE,WAAW,GAAG,MAAe;wBAExC,WAAW,GAAG,MAAM;;EAiCxD"}

package/dist/utils/actions/portal.js

@@ -1,39 +0,0 @@
-import { tick } from 'svelte';
-/**
- * Places the element in a diffrent place in the DOM
- *
- * **Use sparingy as it can make the DOM structure confusing**
- */
-export function portal(el, target = 'body') {
-    let targetEl;
-    async function update(newTarget) {
-        target = newTarget;
-        if (typeof target === 'string') {
-            targetEl = document.querySelector(target);
-            if (targetEl === null) {
-                await tick();
-                targetEl = document.querySelector(target);
-            }
-            if (targetEl === null) {
-                throw new Error(`No element found matching css selector: "${target}"`);
-            }
-        }
-        else if (target instanceof HTMLElement) {
-            targetEl = target;
-        }
-        else {
-            throw new TypeError(`Unknown portal target type: ${target === null ? 'null' : typeof target}. Allowed types: string (CSS selector) or HTMLElement.`);
-        }
-        targetEl.appendChild(el);
-        el.hidden = false;
-    }
-    function destroy() {
-        if (el.parentNode)
-            el.parentNode.removeChild(el);
-    }
-    update(target);
-    return {
-        update,
-        destroy
-    };
-}

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

@@ -1,6 +0,0 @@
-import type { Action } from 'svelte/action';
-export declare const resize: Action<HTMLElement, {
-    resized: (mouseX: number) => void;
-    dragging: (dragging: boolean) => void;
-}>;
-//# sourceMappingURL=resize.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,MAAM,CACvB,WAAW,EACX;IAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CA8B/E,CAAC"}

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

@@ -1 +0,0 @@
-{"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/visible.d.ts

@@ -1,6 +0,0 @@
-import type { Action } from 'svelte/action';
-export declare const onFirstVisible: Action<HTMLElement, {
-    callback: () => void;
-    options?: Partial<IntersectionObserverInit>;
-}>;
-//# sourceMappingURL=visible.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"visible.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/actions/visible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,cAAc,EAAE,MAAM,CAC/B,WAAW,EACX;IACI,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAC/C,CAoBJ,CAAC"}

package/dist/utils/actions/visible.js

@@ -1,14 +0,0 @@
-export const onFirstVisible = (node, input) => {
-    const observer = new IntersectionObserver((e) => {
-        if (!e[0].isIntersecting) {
-            return;
-        }
-        input.callback();
-    }, { root: null, threshold: 1, ...input.options });
-    observer.observe(node);
-    return {
-        destroy: () => {
-            observer.disconnect();
-        }
-    };
-};

package/src/lib/components/layout/portal/Portal.svelte

@@ -1,39 +0,0 @@
-<script lang="ts" module>
-    import type { IvoryComponent } from '$lib/types';
-    import type { Snippet } from 'svelte';
-    import { portal } from '../../../utils/actions/index';
-
-    export interface PortalProps extends IvoryComponent<HTMLDivElement> {
-        children: Snippet;
-        target?: string | HTMLElement;
-    }
-
-    export interface PortalConfig {
-        defaultTarget: string;
-    }
-
-    const defaultConfig: PortalConfig = {
-        defaultTarget: 'body'
-    };
-
-    let config = $state<PortalConfig>(defaultConfig);
-    export function setConfig(newConfig: Partial<PortalConfig>) {
-        config = { ...defaultConfig, ...newConfig };
-    }
-</script>
-
-<script lang="ts">
-    let { children, target }: PortalProps = $props();
-</script>
-
-<!-- 
-    @component
-    A portal, renders its children in a different DOM element.
-
-    Wrapps the `use:portal` action.
-
-    **Use sparingy as it can make the DOM structure confusing**
--->
-<div use:portal={target ?? config.defaultTarget} hidden>
-    {@render children()}
-</div>

package/src/lib/components/layout/portal/index.ts

@@ -1,7 +0,0 @@
-import Portal, { setConfig } from './Portal.svelte';
-
-const portal = Object.assign(Portal, {
-    setConfig
-});
-
-export default portal;

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

@@ -1,38 +0,0 @@
-interface ClickOutsideParams {
-    /** Callback to be called when clicking outside of node */
-    callback: (e: MouseEvent) => void;
-    /** Callback is also not fired if the click target is inside this element */
-    target?: Element;
-}
-
-/** Dispatch event on click outside of node */
-export function clickOutside(
-    node: Element,
-    params: ((e: MouseEvent) => void) | ClickOutsideParams
-) {
-    function handleClick(event: MouseEvent) {
-        if (
-            !(event.target instanceof Node) ||
-            !node ||
-            node.contains(event.target) ||
-            event.defaultPrevented
-        )
-            return;
-
-        if (typeof params === 'function') {
-            params(event);
-            return;
-        }
-
-        if (params.target?.contains(event.target)) return;
-        params.callback(event);
-    }
-
-    document.addEventListener('click', handleClick, true);
-
-    return {
-        destroy() {
-            document.removeEventListener('click', handleClick, true);
-        }
-    };
-}

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

@@ -1,65 +0,0 @@
-export function focusTrap(node: HTMLElement, enabled: boolean) {
-    const elementWhitelist =
-        'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
-    let firstElement: HTMLElement;
-    let lastElement: HTMLElement;
-
-    function onFirstElemKeydown(e: KeyboardEvent): void {
-        if (e.shiftKey && e.code === 'Tab') {
-            e.preventDefault();
-            lastElement.focus();
-        }
-    }
-
-    function onLastElemKeydown(e: KeyboardEvent): void {
-        if (!e.shiftKey && e.code === 'Tab') {
-            e.preventDefault();
-            firstElement.focus();
-        }
-    }
-
-    function scanElements(fromObserver: boolean) {
-        if (enabled === false) return;
-        const focusableElems: HTMLElement[] = Array.from(node.querySelectorAll(elementWhitelist));
-        if (focusableElems.length) {
-            // Set first/last focusable elements
-            firstElement = focusableElems[0];
-            lastElement = focusableElems[focusableElems.length - 1];
-            // Auto-focus first focusable element only when not called from mutation observer
-            if (!fromObserver) firstElement.focus();
-            // Listen for keydown on first & last element
-            firstElement.addEventListener('keydown', onFirstElemKeydown);
-            lastElement.addEventListener('keydown', onLastElemKeydown);
-        }
-    }
-    scanElements(false);
-
-    function cleanUp(): void {
-        if (firstElement) firstElement.removeEventListener('keydown', onFirstElemKeydown);
-        if (lastElement) lastElement.removeEventListener('keydown', onLastElemKeydown);
-    }
-
-    // Re-determine focusable elements when mutations are observed
-    const onObservationChange = (mutationRecords: MutationRecord[], observer: MutationObserver) => {
-        if (mutationRecords.length) {
-            cleanUp();
-            scanElements(true);
-        }
-        return observer;
-    };
-    const observer = new MutationObserver(onObservationChange);
-    observer.observe(node, { childList: true, subtree: true });
-
-    // Lifecycle
-    return {
-        update(newArgs: boolean) {
-            enabled = newArgs;
-            if (newArgs) scanElements(false);
-            else cleanUp();
-        },
-        destroy() {
-            cleanUp();
-            observer.disconnect();
-        }
-    };
-}

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

@@ -1,43 +0,0 @@
-import { tick } from 'svelte';
-
-/**
- * Places the element in a diffrent place in the DOM
- *
- * **Use sparingy as it can make the DOM structure confusing**
- */
-export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
-    let targetEl;
-    async function update(newTarget: HTMLElement | string) {
-        target = newTarget;
-        if (typeof target === 'string') {
-            targetEl = document.querySelector(target);
-            if (targetEl === null) {
-                await tick();
-                targetEl = document.querySelector(target);
-            }
-            if (targetEl === null) {
-                throw new Error(`No element found matching css selector: "${target}"`);
-            }
-        } else if (target instanceof HTMLElement) {
-            targetEl = target;
-        } else {
-            throw new TypeError(
-                `Unknown portal target type: ${
-                    target === null ? 'null' : typeof target
-                }. Allowed types: string (CSS selector) or HTMLElement.`
-            );
-        }
-        targetEl.appendChild(el);
-        el.hidden = false;
-    }
-
-    function destroy() {
-        if (el.parentNode) el.parentNode.removeChild(el);
-    }
-
-    update(target);
-    return {
-        update,
-        destroy
-    };
-}

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

@@ -1,35 +0,0 @@
-import type { Action } from 'svelte/action';
-
-export const resize: Action<
-    HTMLElement,
-    { resized: (mouseX: number) => void; dragging: (dragging: boolean) => void }
-> = (node: HTMLElement, { resized, dragging }) => {
-    const onResize = (e: PointerEvent) => {
-        resized(e.clientX);
-    };
-
-    const onResizeEnd = () => {
-        dragging(false);
-        window.removeEventListener('pointermove', onResize);
-        window.removeEventListener('pointerup', onResizeEnd);
-        window.removeEventListener('pointercancel', onResizeEnd);
-
-        document.getElementsByTagName('html')[0].style.userSelect = '';
-    };
-
-    const onResizeStart = () => {
-        dragging(true);
-        window.addEventListener('pointermove', onResize);
-        window.addEventListener('pointerup', onResizeEnd);
-        window.addEventListener('pointercancel', onResizeEnd);
-
-        document.getElementsByTagName('html')[0].style.userSelect = 'none';
-    };
-    node.addEventListener('pointerdown', onResizeStart);
-
-    return {
-        destroy() {
-            node.removeEventListener('pointerdown', onResizeStart);
-        }
-    };
-};

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

@@ -1,28 +0,0 @@
-import type { Action } from 'svelte/action';
-
-export const onFirstVisible: Action<
-    HTMLElement,
-    {
-        callback: () => void;
-        options?: Partial<IntersectionObserverInit>;
-    }
-> = (node, input) => {
-    const observer = new IntersectionObserver(
-        (e) => {
-            if (!e[0].isIntersecting) {
-                return;
-            }
-
-            input.callback();
-        },
-        { root: null, threshold: 1, ...input.options }
-    );
-
-    observer.observe(node);
-
-    return {
-        destroy: () => {
-            observer.disconnect();
-        }
-    };
-};