dalila 1.5.13 → 1.7.0

package/dist/componentes/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/componentes/ui/env.d.ts

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

package/dist/componentes/ui/env.js

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

package/dist/componentes/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/componentes/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/componentes/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/componentes/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/componentes/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;