dalila 1.5.13 → 1.7.0

package/dist/components/ui/dialog/index.js

@@ -0,0 +1,54 @@
+import { signal } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+import { validateDialogOptions } from "../validate.js";
+/**
+ * Shared dialog behavior — used by both createDialog and createDrawer.
+ */
+export function _attachDialogBehavior(el, open, closeFn, opts) {
+    const scope = getCurrentScope();
+    // Sync signal → native dialog
+    const unsub = open.on((isOpen) => {
+        if (isOpen && !el.open)
+            el.showModal();
+        else if (!isOpen && el.open)
+            el.close();
+    });
+    // Native close event → sync signal
+    const onClose = () => open.set(false);
+    el.addEventListener("close", onClose);
+    // Backdrop click
+    const onBackdropClick = (e) => {
+        if (opts.closeOnBackdrop && e.target === el)
+            closeFn();
+    };
+    el.addEventListener("click", onBackdropClick);
+    // Escape key
+    if (!opts.closeOnEscape) {
+        const onCancel = (e) => e.preventDefault();
+        el.addEventListener("cancel", onCancel);
+        if (scope) {
+            scope.onCleanup(() => el.removeEventListener("cancel", onCancel));
+        }
+    }
+    // ARIA
+    el.setAttribute("aria-modal", "true");
+    if (scope) {
+        scope.onCleanup(() => {
+            unsub();
+            el.removeEventListener("close", onClose);
+            el.removeEventListener("click", onBackdropClick);
+        });
+    }
+}
+export function createDialog(options = {}) {
+    validateDialogOptions(options);
+    const { closeOnBackdrop = true, closeOnEscape = true } = options;
+    const open = signal(false);
+    const show = () => open.set(true);
+    const close = () => open.set(false);
+    const toggle = () => open.update((v) => !v);
+    const _attachTo = (el) => {
+        _attachDialogBehavior(el, open, close, { closeOnBackdrop, closeOnEscape });
+    };
+    return { open, show, close, toggle, _attachTo };
+}

package/dist/components/ui/drawer/index.d.ts

@@ -0,0 +1,2 @@
+import type { Drawer, DrawerOptions } from "../ui-types.js";
+export declare function createDrawer(options?: DrawerOptions): Drawer;

package/dist/components/ui/drawer/index.js

@@ -0,0 +1,41 @@
+import { signal } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+import { _attachDialogBehavior } from "../dialog/index.js";
+import { validateDrawerOptions } from "../validate.js";
+const SIDE_CLASSES = {
+    right: "",
+    left: "d-drawer-left",
+    bottom: "d-sheet",
+};
+export function createDrawer(options = {}) {
+    validateDrawerOptions(options);
+    const { closeOnBackdrop = true, closeOnEscape = true, side: initialSide = "right", } = options;
+    const open = signal(false);
+    const side = signal(initialSide);
+    const show = () => open.set(true);
+    const close = () => open.set(false);
+    const toggle = () => open.update((v) => !v);
+    const _attachTo = (el) => {
+        const scope = getCurrentScope();
+        // Shared dialog behavior (open sync, backdrop, escape, ARIA)
+        _attachDialogBehavior(el, open, close, { closeOnBackdrop, closeOnEscape });
+        // Apply initial side class
+        const initial = SIDE_CLASSES[side()];
+        if (initial)
+            el.classList.add(initial);
+        // React to side changes
+        const unsub = side.on((s) => {
+            for (const cls of Object.values(SIDE_CLASSES)) {
+                if (cls)
+                    el.classList.remove(cls);
+            }
+            const cls = SIDE_CLASSES[s];
+            if (cls)
+                el.classList.add(cls);
+        });
+        if (scope) {
+            scope.onCleanup(() => unsub());
+        }
+    };
+    return { open, side, show, close, toggle, _attachTo };
+}

package/dist/components/ui/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+import type { Dropdown, DropdownOptions } from "../ui-types.js";
+export declare function createDropdown(options?: DropdownOptions): Dropdown;

package/dist/components/ui/dropdown/index.js

@@ -0,0 +1,48 @@
+import { signal } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+import { isBrowser } from "../env.js";
+export function createDropdown(options = {}) {
+    const { closeOnSelect = true } = options;
+    const open = signal(false);
+    const toggle = (ev) => {
+        if (ev)
+            ev.stopPropagation();
+        open.update((v) => !v);
+    };
+    const close = () => open.set(false);
+    const select = (ev) => {
+        if (ev)
+            ev.stopPropagation();
+        if (closeOnSelect)
+            close();
+    };
+    const _attachTo = (el) => {
+        const scope = getCurrentScope();
+        // ARIA
+        const trigger = el.querySelector("button, [role='button'], [data-d-tag='d-button']");
+        const menu = el.querySelector("[data-d-tag='d-menu'], .d-menu");
+        if (menu)
+            menu.setAttribute("role", "menu");
+        if (trigger) {
+            trigger.setAttribute("aria-haspopup", "true");
+            trigger.setAttribute("aria-expanded", "false");
+        }
+        const unsubAria = open.on((isOpen) => {
+            trigger?.setAttribute("aria-expanded", String(isOpen));
+        });
+        const onDocClick = (e) => {
+            if (!el.contains(e.target))
+                close();
+        };
+        if (isBrowser)
+            document.addEventListener("click", onDocClick);
+        if (scope) {
+            scope.onCleanup(() => {
+                unsubAria();
+                if (isBrowser)
+                    document.removeEventListener("click", onDocClick);
+            });
+        }
+    };
+    return { open, toggle, close, select, _attachTo };
+}

package/dist/components/ui/dropzone/index.d.ts

@@ -0,0 +1,2 @@
+import type { Dropzone, DropzoneOptions } from "../ui-types.js";
+export declare function createDropzone(options?: DropzoneOptions): Dropzone;

package/dist/components/ui/dropzone/index.js

@@ -0,0 +1,92 @@
+import { signal } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+import { validateDropzoneOptions } from "../validate.js";
+export function createDropzone(options = {}) {
+    validateDropzoneOptions(options);
+    const { accept, multiple = true, maxFiles, maxSize } = options;
+    const dragging = signal(false);
+    const files = signal([]);
+    let inputEl = null;
+    const filterFiles = (fileList) => {
+        let result = fileList;
+        if (accept) {
+            const types = accept.split(",").map((t) => t.trim().toLowerCase());
+            result = result.filter((f) => {
+                const ext = "." + f.name.split(".").pop()?.toLowerCase();
+                const mime = f.type.toLowerCase();
+                return types.some((t) => t === ext || t === mime || (t.endsWith("/*") && mime.startsWith(t.slice(0, -1))));
+            });
+        }
+        if (maxSize) {
+            result = result.filter((f) => f.size <= maxSize);
+        }
+        if (maxFiles) {
+            result = result.slice(0, maxFiles);
+        }
+        return result;
+    };
+    const addFiles = (newFiles) => {
+        const filtered = filterFiles(newFiles);
+        if (multiple) {
+            files.update((current) => {
+                const combined = [...current, ...filtered];
+                return maxFiles ? combined.slice(0, maxFiles) : combined;
+            });
+        }
+        else {
+            files.set(filtered.slice(0, 1));
+        }
+    };
+    const browse = () => {
+        inputEl?.click();
+    };
+    const handleClick = () => browse();
+    const handleDragover = (ev) => {
+        ev.preventDefault();
+        dragging.set(true);
+    };
+    const handleDragleave = () => {
+        dragging.set(false);
+    };
+    const handleDrop = (ev) => {
+        ev.preventDefault();
+        dragging.set(false);
+        if (ev.dataTransfer?.files) {
+            addFiles(Array.from(ev.dataTransfer.files));
+        }
+    };
+    const _attachTo = (el) => {
+        const scope = getCurrentScope();
+        // ARIA
+        el.setAttribute("role", "button");
+        el.setAttribute("tabindex", "0");
+        inputEl = el.querySelector('input[type="file"]');
+        if (inputEl) {
+            if (accept)
+                inputEl.accept = accept;
+            inputEl.multiple = multiple;
+            const onInputChange = () => {
+                if (inputEl?.files) {
+                    addFiles(Array.from(inputEl.files));
+                    inputEl.value = "";
+                }
+            };
+            inputEl.addEventListener("change", onInputChange);
+            if (scope) {
+                scope.onCleanup(() => {
+                    inputEl?.removeEventListener("change", onInputChange);
+                });
+            }
+        }
+    };
+    return {
+        dragging,
+        files,
+        browse,
+        handleClick,
+        handleDragover,
+        handleDragleave,
+        handleDrop,
+        _attachTo,
+    };
+}

package/dist/components/ui/env.d.ts

@@ -0,0 +1 @@
+export declare const isBrowser: boolean;

package/dist/components/ui/env.js

@@ -0,0 +1,2 @@
+// ── Environment Detection ───────────────────────────────────────────
+export const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";

package/dist/components/ui/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./ui-types.js";
+export { createDialog, _attachDialogBehavior } from "./dialog/index.js";
+export { createDrawer } from "./drawer/index.js";
+export { createToast, toastIcon } from "./toast/index.js";
+export { createTabs, tabBindings } from "./tabs/index.js";
+export { createDropdown } from "./dropdown/index.js";
+export { createCombobox } from "./combobox/index.js";
+export { createAccordion } from "./accordion/index.js";
+export { createCalendar } from "./calendar/index.js";
+export { createDropzone } from "./dropzone/index.js";
+export { createPopover } from "./popover/index.js";
+export { mountUI } from "./runtime.js";
+export type { MountUIOptions } from "./runtime.js";

package/dist/components/ui/index.js

@@ -0,0 +1,12 @@
+export * from "./ui-types.js";
+export { createDialog, _attachDialogBehavior } from "./dialog/index.js";
+export { createDrawer } from "./drawer/index.js";
+export { createToast, toastIcon } from "./toast/index.js";
+export { createTabs, tabBindings } from "./tabs/index.js";
+export { createDropdown } from "./dropdown/index.js";
+export { createCombobox } from "./combobox/index.js";
+export { createAccordion } from "./accordion/index.js";
+export { createCalendar } from "./calendar/index.js";
+export { createDropzone } from "./dropzone/index.js";
+export { createPopover } from "./popover/index.js";
+export { mountUI } from "./runtime.js";

package/dist/components/ui/popover/index.d.ts

@@ -0,0 +1,2 @@
+import type { Popover, PopoverOptions } from "../ui-types.js";
+export declare function createPopover(options?: PopoverOptions): Popover;

package/dist/components/ui/popover/index.js

@@ -0,0 +1,156 @@
+import { signal } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+import { validatePopoverOptions } from "../validate.js";
+import { isBrowser } from "../env.js";
+let popoverUid = 0;
+function computePosition(trigger, popoverEl, placement, gap, viewportPadding) {
+    const triggerRect = trigger.getBoundingClientRect();
+    const popRect = popoverEl.getBoundingClientRect();
+    const vw = isBrowser ? window.innerWidth : 1024;
+    const vh = isBrowser ? window.innerHeight : 768;
+    // ── Flip when not enough space ──
+    let effective = placement;
+    if (effective.startsWith("bottom") && triggerRect.bottom + gap + popRect.height > vh - viewportPadding) {
+        if (triggerRect.top - gap - popRect.height >= viewportPadding) {
+            effective = effective.replace("bottom", "top");
+        }
+    }
+    else if (effective.startsWith("top") && triggerRect.top - gap - popRect.height < viewportPadding) {
+        if (triggerRect.bottom + gap + popRect.height <= vh - viewportPadding) {
+            effective = effective.replace("top", "bottom");
+        }
+    }
+    else if (effective === "left" && triggerRect.left - gap - popRect.width < viewportPadding) {
+        if (triggerRect.right + gap + popRect.width <= vw - viewportPadding) {
+            effective = "right";
+        }
+    }
+    else if (effective === "right" && triggerRect.right + gap + popRect.width > vw - viewportPadding) {
+        if (triggerRect.left - gap - popRect.width >= viewportPadding) {
+            effective = "left";
+        }
+    }
+    let top = 0;
+    let left = 0;
+    switch (effective) {
+        case "bottom":
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left + (triggerRect.width - popRect.width) / 2;
+            break;
+        case "bottom-start":
+            top = triggerRect.bottom + gap;
+            left = triggerRect.left;
+            break;
+        case "top":
+            top = triggerRect.top - popRect.height - gap;
+            left = triggerRect.left + (triggerRect.width - popRect.width) / 2;
+            break;
+        case "top-start":
+            top = triggerRect.top - popRect.height - gap;
+            left = triggerRect.left;
+            break;
+        case "left":
+            top = triggerRect.top + (triggerRect.height - popRect.height) / 2;
+            left = triggerRect.left - popRect.width - gap;
+            break;
+        case "right":
+            top = triggerRect.top + (triggerRect.height - popRect.height) / 2;
+            left = triggerRect.right + gap;
+            break;
+    }
+    // Viewport clamping
+    const maxLeft = vw - popRect.width - viewportPadding;
+    left = Math.min(Math.max(viewportPadding, left), Math.max(viewportPadding, maxLeft));
+    const maxTop = vh - popRect.height - viewportPadding;
+    top = Math.min(Math.max(viewportPadding, top), Math.max(viewportPadding, maxTop));
+    return { top, left };
+}
+export function createPopover(options = {}) {
+    validatePopoverOptions(options);
+    const { placement: initialPlacement = "bottom", gap = 8, viewportPadding = 12, } = options;
+    const open = signal(false);
+    const placement = signal(initialPlacement);
+    const show = () => open.set(true);
+    const hide = () => open.set(false);
+    const toggle = () => open.update((v) => !v);
+    const position = (trigger, popoverEl) => {
+        const { top, left } = computePosition(trigger, popoverEl, placement(), gap, viewportPadding);
+        popoverEl.style.position = "fixed";
+        popoverEl.style.top = `${top}px`;
+        popoverEl.style.left = `${left}px`;
+    };
+    const _attachTo = (trigger, popoverEl) => {
+        const scope = getCurrentScope();
+        // Ensure popover attribute for native API
+        if (!popoverEl.hasAttribute("popover")) {
+            popoverEl.setAttribute("popover", "manual");
+        }
+        const reposition = () => {
+            try {
+                if (!popoverEl.matches(":popover-open"))
+                    return;
+            }
+            catch {
+                return;
+            }
+            position(trigger, popoverEl);
+        };
+        // Sync open signal → native popover
+        const unsub = open.on((isOpen) => {
+            try {
+                const isNativeOpen = popoverEl.matches(":popover-open");
+                if (isOpen && !isNativeOpen) {
+                    popoverEl.showPopover();
+                    reposition();
+                }
+                else if (!isOpen && isNativeOpen) {
+                    popoverEl.hidePopover();
+                }
+            }
+            catch {
+                // Popover API not supported or element not connected
+            }
+        });
+        // Sync native toggle → signal
+        const onToggle = (ev) => {
+            const state = ev.newState;
+            if (state === "open") {
+                if (!open.peek())
+                    open.set(true);
+                reposition();
+            }
+            else {
+                if (open.peek())
+                    open.set(false);
+            }
+        };
+        popoverEl.addEventListener("toggle", onToggle);
+        // Reposition on scroll/resize
+        if (isBrowser) {
+            window.addEventListener("resize", reposition);
+            window.addEventListener("scroll", reposition, { passive: true });
+        }
+        // ARIA
+        const popoverId = popoverEl.id || `d-popover-${++popoverUid}`;
+        if (!popoverEl.id)
+            popoverEl.id = popoverId;
+        trigger.setAttribute("aria-controls", popoverId);
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("aria-haspopup", "true");
+        const unsubAria = open.on((isOpen) => {
+            trigger.setAttribute("aria-expanded", String(isOpen));
+        });
+        if (scope) {
+            scope.onCleanup(() => {
+                unsub();
+                unsubAria();
+                popoverEl.removeEventListener("toggle", onToggle);
+                if (isBrowser) {
+                    window.removeEventListener("resize", reposition);
+                    window.removeEventListener("scroll", reposition);
+                }
+            });
+        }
+    };
+    return { open, show, hide, toggle, placement, position, _attachTo };
+}

package/dist/components/ui/runtime.d.ts

@@ -0,0 +1,20 @@
+import { type Signal } from "../../core/signal.js";
+import { type BindContext } from "../../runtime/bind.js";
+import type { Calendar, Combobox, Dialog, Drawer, Dropdown, Dropzone, PopoverMount, TabsMount, Toast } from "./ui-types.js";
+export interface MountUIOptions {
+    context?: BindContext;
+    events?: string[];
+    theme?: boolean;
+    sliderValue?: Signal<string>;
+    dialogs?: Record<string, Dialog>;
+    drawers?: Record<string, Drawer>;
+    dropdowns?: Record<string, Dropdown>;
+    combos?: Record<string, Combobox>;
+    tabs?: Record<string, TabsMount>;
+    toasts?: Record<string, Toast>;
+    popovers?: Record<string, PopoverMount>;
+    dropzones?: Record<string, Dropzone>;
+    calendars?: Record<string, Calendar>;
+    accordions?: Record<string, import("./ui-types.js").Accordion>;
+}
+export declare function mountUI(root: Element, options: MountUIOptions): () => void;