yaxa-svelte 1.4.0 → 1.5.0

package/dist/actions/autosize.d.ts

@@ -0,0 +1,16 @@
+import type { Action } from 'svelte/action';
+export interface AutosizeOptions {
+    /** Maximum height in pixels before scrolling */
+    maxHeight?: number;
+    /** Minimum height in pixels (defaults to initial height) */
+    minHeight?: number;
+}
+/**
+ * Headless Svelte Action to dynamically auto-grow a <textarea> based on its content.
+ *
+ * Usage:
+ * ```svelte
+ * <textarea use:autosize={{ maxHeight: 300 }} bind:value={text}></textarea>
+ * ```
+ */
+export declare const autosize: Action<HTMLTextAreaElement, AutosizeOptions | undefined>;

package/dist/actions/autosize.js

@@ -0,0 +1,38 @@
+/**
+ * Headless Svelte Action to dynamically auto-grow a <textarea> based on its content.
+ *
+ * Usage:
+ * ```svelte
+ * <textarea use:autosize={{ maxHeight: 300 }} bind:value={text}></textarea>
+ * ```
+ */
+export const autosize = (node, options = {}) => {
+    let currentOptions = options || {};
+    function resize() {
+        // Reset height to calculate true scrollHeight
+        node.style.height = 'auto';
+        const minH = currentOptions.minHeight ?? 0;
+        const maxH = currentOptions.maxHeight;
+        let targetHeight = Math.max(node.scrollHeight, minH);
+        if (maxH && targetHeight > maxH) {
+            targetHeight = maxH;
+            node.style.overflowY = 'auto';
+        }
+        else {
+            node.style.overflowY = 'hidden';
+        }
+        node.style.height = `${targetHeight}px`;
+    }
+    node.addEventListener('input', resize);
+    // Initial resize
+    requestAnimationFrame(resize);
+    return {
+        update(newOptions) {
+            currentOptions = newOptions || {};
+            resize();
+        },
+        destroy() {
+            node.removeEventListener('input', resize);
+        }
+    };
+};

package/dist/actions/clickOutside.d.ts

@@ -0,0 +1,18 @@
+import type { Action } from 'svelte/action';
+export interface ClickOutsideOptions {
+    /** Callback invoked when a click occurs outside the node */
+    handler?: (event: MouseEvent | TouchEvent) => void;
+    /** Optional list of elements or selectors to ignore */
+    exclude?: (HTMLElement | string)[];
+    /** Enabled flag */
+    enabled?: boolean;
+}
+/**
+ * Headless Svelte Action to trigger a callback when clicking outside the target element.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:clickOutside={() => (isOpen = false)}>...</div>
+ * ```
+ */
+export declare const clickOutside: Action<HTMLElement, ClickOutsideOptions | ((event: MouseEvent | TouchEvent) => void) | undefined>;

package/dist/actions/clickOutside.js

@@ -0,0 +1,46 @@
+/**
+ * Headless Svelte Action to trigger a callback when clicking outside the target element.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:clickOutside={() => (isOpen = false)}>...</div>
+ * ```
+ */
+export const clickOutside = (node, param) => {
+    let options = typeof param === 'function' ? { handler: param } : param || {};
+    function handleClick(event) {
+        if (options.enabled === false)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        // Check if click was inside node
+        if (node.contains(target))
+            return;
+        // Check excluded elements
+        if (options.exclude) {
+            for (const item of options.exclude) {
+                if (typeof item === 'string') {
+                    const el = document.querySelector(item);
+                    if (el && el.contains(target))
+                        return;
+                }
+                else if (item && item.contains(target)) {
+                    return;
+                }
+            }
+        }
+        if (options.handler) {
+            options.handler(event);
+        }
+    }
+    document.addEventListener('pointerdown', handleClick, true);
+    return {
+        update(newParam) {
+            options = typeof newParam === 'function' ? { handler: newParam } : newParam || {};
+        },
+        destroy() {
+            document.removeEventListener('pointerdown', handleClick, true);
+        }
+    };
+};

package/dist/actions/index.d.ts

@@ -0,0 +1,10 @@
+export { autosize } from './autosize';
+export type { AutosizeOptions } from './autosize';
+export { clickOutside } from './clickOutside';
+export type { ClickOutsideOptions } from './clickOutside';
+export { portal } from './portal';
+export type { PortalOptions } from './portal';
+export { infiniteScroll } from './infiniteScroll';
+export type { InfiniteScrollActionOptions } from './infiniteScroll';
+export { sortableItem } from './sortable';
+export type { SortableItemOptions } from './sortable';

package/dist/actions/index.js

@@ -0,0 +1,5 @@
+export { autosize } from './autosize';
+export { clickOutside } from './clickOutside';
+export { portal } from './portal';
+export { infiniteScroll } from './infiniteScroll';
+export { sortableItem } from './sortable';

package/dist/actions/infiniteScroll.d.ts

@@ -0,0 +1,21 @@
+import type { Action } from 'svelte/action';
+export interface InfiniteScrollActionOptions {
+    /** Threshold in pixels from bottom/top to trigger (default: 100) */
+    distance?: number;
+    /** Direction to monitor (default: 'bottom') */
+    direction?: 'bottom' | 'top';
+    /** Disable infinite scroll triggering */
+    disabled?: boolean;
+    /** Callback invoked when trigger threshold is reached */
+    onLoadMore: () => Promise<void> | void;
+}
+/**
+ * Headless Svelte Action to trigger loading callbacks when scrolling near the edges.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:infiniteScroll={loadMore}>...</div>
+ * <div use:infiniteScroll={{ onLoadMore: loadMore, distance: 200 }}>...</div>
+ * ```
+ */
+export declare const infiniteScroll: Action<HTMLElement, InfiniteScrollActionOptions | (() => Promise<void> | void)>;

package/dist/actions/infiniteScroll.js

@@ -0,0 +1,62 @@
+import { browser } from '$app/environment';
+/**
+ * Headless Svelte Action to trigger loading callbacks when scrolling near the edges.
+ *
+ * Usage:
+ * ```svelte
+ * <div use:infiniteScroll={loadMore}>...</div>
+ * <div use:infiniteScroll={{ onLoadMore: loadMore, distance: 200 }}>...</div>
+ * ```
+ */
+export const infiniteScroll = (node, param) => {
+    if (!browser)
+        return;
+    let options = typeof param === 'function' ? { onLoadMore: param } : param;
+    let isPending = false;
+    async function trigger() {
+        if (isPending || options.disabled)
+            return;
+        try {
+            isPending = true;
+            await options.onLoadMore();
+        }
+        finally {
+            isPending = false;
+        }
+    }
+    const distance = options.distance ?? 100;
+    const direction = options.direction ?? 'bottom';
+    const sentinel = document.createElement('div');
+    sentinel.setAttribute('data-yaxa-sentinel', 'true');
+    sentinel.style.height = '1px';
+    sentinel.style.width = '100%';
+    sentinel.style.pointerEvents = 'none';
+    sentinel.style.opacity = '0';
+    if (direction === 'bottom') {
+        node.appendChild(sentinel);
+    }
+    else {
+        node.insertBefore(sentinel, node.firstChild);
+    }
+    const observer = new IntersectionObserver((entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting && !isPending && !options.disabled) {
+            trigger();
+        }
+    }, {
+        root: node === document.documentElement || node === document.body ? null : node,
+        rootMargin: `${distance}px`
+    });
+    observer.observe(sentinel);
+    return {
+        update(newParam) {
+            options = typeof newParam === 'function' ? { onLoadMore: newParam } : newParam;
+        },
+        destroy() {
+            observer.disconnect();
+            if (sentinel.parentNode) {
+                sentinel.parentNode.removeChild(sentinel);
+            }
+        }
+    };
+};

package/dist/actions/portal.d.ts

@@ -0,0 +1,17 @@
+import type { Action } from 'svelte/action';
+export interface PortalOptions {
+    /** Target container element or CSS selector. Defaults to `document.body` */
+    target?: HTMLElement | string;
+    /** Whether the portal is enabled */
+    enabled?: boolean;
+}
+/**
+ * Headless Svelte Action to teleport an element into another DOM container (e.g. `document.body`).
+ *
+ * Usage:
+ * ```svelte
+ * <div use:portal>...</div>
+ * <div use:portal="#modal-root">...</div>
+ * ```
+ */
+export declare const portal: Action<HTMLElement, HTMLElement | string | PortalOptions | undefined>;

package/dist/actions/portal.js

@@ -0,0 +1,63 @@
+/**
+ * Headless Svelte Action to teleport an element into another DOM container (e.g. `document.body`).
+ *
+ * Usage:
+ * ```svelte
+ * <div use:portal>...</div>
+ * <div use:portal="#modal-root">...</div>
+ * ```
+ */
+export const portal = (node, param) => {
+    let targetEl = null;
+    const placeholder = document.createComment('portal-placeholder');
+    function resolveTarget(p) {
+        if (!p)
+            return document.body;
+        if (typeof p === 'string')
+            return document.querySelector(p);
+        if (p instanceof HTMLElement)
+            return p;
+        if (typeof p === 'object') {
+            if (p.enabled === false)
+                return null;
+            if (typeof p.target === 'string')
+                return document.querySelector(p.target);
+            if (p.target instanceof HTMLElement)
+                return p.target;
+            return document.body;
+        }
+        return document.body;
+    }
+    function mount(target) {
+        if (!target) {
+            // Restore to placeholder if disabled
+            if (placeholder.parentNode && node.parentNode !== placeholder.parentNode) {
+                placeholder.parentNode.insertBefore(node, placeholder);
+            }
+            return;
+        }
+        if (node.parentNode && node.parentNode !== target) {
+            node.parentNode.insertBefore(placeholder, node);
+            target.appendChild(node);
+        }
+        else if (!node.parentNode) {
+            target.appendChild(node);
+        }
+    }
+    targetEl = resolveTarget(param);
+    mount(targetEl);
+    return {
+        update(newParam) {
+            targetEl = resolveTarget(newParam);
+            mount(targetEl);
+        },
+        destroy() {
+            if (placeholder.parentNode) {
+                placeholder.parentNode.removeChild(placeholder);
+            }
+            if (node.parentNode) {
+                node.parentNode.removeChild(node);
+            }
+        }
+    };
+};

package/dist/actions/sortable.d.ts

@@ -0,0 +1,18 @@
+import type { Action } from 'svelte/action';
+export interface SortableItemOptions {
+    index: number;
+    disabled?: boolean;
+    onDragStart?: (index: number, e: DragEvent) => void;
+    onDragOver?: (index: number, e: DragEvent) => void;
+    onDrop?: (index: number, e: DragEvent) => void;
+    onDragEnd?: () => void;
+}
+/**
+ * Headless Svelte Action to make any DOM item draggable and droppable for reordering.
+ *
+ * Usage:
+ * ```svelte
+ * <li use:sortableItem={{ index, onDragStart, onDragOver, onDrop, onDragEnd }}>...</li>
+ * ```
+ */
+export declare const sortableItem: Action<HTMLElement, SortableItemOptions>;

package/dist/actions/sortable.js

@@ -0,0 +1,66 @@
+/**
+ * Headless Svelte Action to make any DOM item draggable and droppable for reordering.
+ *
+ * Usage:
+ * ```svelte
+ * <li use:sortableItem={{ index, onDragStart, onDragOver, onDrop, onDragEnd }}>...</li>
+ * ```
+ */
+export const sortableItem = (node, options) => {
+    let currentOptions = options;
+    function setupDraggable() {
+        node.draggable = !currentOptions.disabled;
+    }
+    function handleDragStart(e) {
+        if (currentOptions.disabled)
+            return;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', String(currentOptions.index));
+        }
+        if (currentOptions.onDragStart) {
+            currentOptions.onDragStart(currentOptions.index, e);
+        }
+    }
+    function handleDragOver(e) {
+        if (currentOptions.disabled)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+        if (currentOptions.onDragOver) {
+            currentOptions.onDragOver(currentOptions.index, e);
+        }
+    }
+    function handleDrop(e) {
+        if (currentOptions.disabled)
+            return;
+        e.preventDefault();
+        if (currentOptions.onDrop) {
+            currentOptions.onDrop(currentOptions.index, e);
+        }
+    }
+    function handleDragEnd() {
+        if (currentOptions.onDragEnd) {
+            currentOptions.onDragEnd();
+        }
+    }
+    setupDraggable();
+    node.addEventListener('dragstart', handleDragStart);
+    node.addEventListener('dragover', handleDragOver);
+    node.addEventListener('drop', handleDrop);
+    node.addEventListener('dragend', handleDragEnd);
+    return {
+        update(newOptions) {
+            currentOptions = newOptions;
+            setupDraggable();
+        },
+        destroy() {
+            node.removeEventListener('dragstart', handleDragStart);
+            node.removeEventListener('dragover', handleDragOver);
+            node.removeEventListener('drop', handleDrop);
+            node.removeEventListener('dragend', handleDragEnd);
+        }
+    };
+};