dalila 1.5.13 → 1.7.0

package/dist/componentes/ui/ui-types.d.ts

@@ -0,0 +1,175 @@
+import type { Signal } from "../../core/signal.js";
+export interface DialogOptions {
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+}
+export interface Dialog {
+    open: Signal<boolean>;
+    show(): void;
+    close(): void;
+    toggle(): void;
+    _attachTo(el: HTMLDialogElement): void;
+}
+export type DrawerSide = "right" | "left" | "bottom";
+export interface DrawerOptions extends DialogOptions {
+    side?: DrawerSide;
+}
+export interface Drawer extends Dialog {
+    side: Signal<DrawerSide>;
+}
+export type ToastVariant = "success" | "error" | "warning" | "info";
+export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+export interface ToastItem {
+    id: string;
+    variant: ToastVariant;
+    title: string;
+    text?: string;
+    variantClass: string;
+    icon: string;
+}
+export interface ToastOptions {
+    position?: ToastPosition;
+    duration?: number;
+    maxToasts?: number;
+}
+export interface Toast {
+    items: Signal<ToastItem[]>;
+    activeVariant: Signal<ToastVariant | "idle">;
+    containerClass: Signal<string>;
+    show(variant: ToastVariant, title: string, text?: string, duration?: number): string;
+    success(title: string, text?: string): string;
+    error(title: string, text?: string): string;
+    warning(title: string, text?: string): string;
+    info(title: string, text?: string): string;
+    dismiss(id: string): void;
+    clear(): void;
+}
+export interface TabsOptions {
+    initial?: string;
+    orientation?: "horizontal" | "vertical";
+}
+export interface Tabs {
+    active: Signal<string>;
+    select(tabId: string): void;
+    isActive(tabId: string): boolean;
+    handleClick(ev: Event): void;
+    _attachTo(el: HTMLElement): void;
+}
+export interface TabBindings {
+    tabClass: Signal<string>;
+    selected: Signal<string>;
+    visible: Signal<boolean>;
+}
+export interface DropdownOptions {
+    closeOnSelect?: boolean;
+}
+export interface Dropdown {
+    open: Signal<boolean>;
+    toggle(ev?: Event): void;
+    close(): void;
+    select(ev?: Event): void;
+    _attachTo(el: HTMLElement): void;
+}
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export interface ComboboxOptions {
+    options: ComboboxOption[];
+    placeholder?: string;
+    name?: string;
+}
+export interface Combobox {
+    open: Signal<boolean>;
+    query: Signal<string>;
+    value: Signal<string>;
+    label: Signal<string>;
+    filtered: Signal<ComboboxOption[]>;
+    highlightedIndex: Signal<number>;
+    show(): void;
+    close(): void;
+    toggle(): void;
+    handleInput(ev: Event): void;
+    handleSelect(ev: Event): void;
+    handleKeydown(ev: KeyboardEvent): void;
+    _attachTo(el: HTMLElement): void;
+}
+export interface AccordionOptions {
+    single?: boolean;
+    initial?: string[];
+}
+export interface Accordion {
+    openItems: Signal<Set<string>>;
+    toggle(itemId: string): void;
+    open(itemId: string): void;
+    close(itemId: string): void;
+    isOpen(itemId: string): Signal<boolean>;
+    _attachTo(el: HTMLElement): void;
+}
+export interface CalendarDay {
+    date: number;
+    month: "prev" | "current" | "next";
+    fullDate: Date;
+    isToday: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+}
+export interface CalendarOptions {
+    initial?: Date;
+    min?: Date;
+    max?: Date;
+    dayLabels?: string[];
+    monthLabels?: string[];
+}
+export interface Calendar {
+    year: Signal<number>;
+    month: Signal<number>;
+    selected: Signal<Date | null>;
+    title: Signal<string>;
+    days: Signal<CalendarDay[]>;
+    dayLabels: string[];
+    prev(): void;
+    next(): void;
+    select(date: Date): void;
+    handleDayClick(ev: Event): void;
+}
+export interface DropzoneOptions {
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+}
+export interface Dropzone {
+    dragging: Signal<boolean>;
+    files: Signal<File[]>;
+    browse(): void;
+    handleClick(): void;
+    handleDragover(ev: DragEvent): void;
+    handleDragleave(): void;
+    handleDrop(ev: DragEvent): void;
+    _attachTo(el: HTMLElement): void;
+}
+export type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start";
+export interface PopoverOptions {
+    placement?: PopoverPlacement;
+    gap?: number;
+    viewportPadding?: number;
+}
+export interface Popover {
+    open: Signal<boolean>;
+    placement: Signal<PopoverPlacement>;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    position(trigger: HTMLElement, popoverEl: HTMLElement): void;
+    _attachTo(trigger: HTMLElement, popoverEl: HTMLElement): void;
+}
+export interface TabsMount {
+    api: Tabs;
+    bindings: [string, string][];
+}
+export interface PopoverMount {
+    api: Popover;
+    triggerId?: string;
+    panelId?: string;
+}

package/dist/componentes/ui/ui-types.js

@@ -0,0 +1 @@
+export {};

package/dist/componentes/ui/validate.d.ts

@@ -0,0 +1,7 @@
+export declare function validateDialogOptions(opts: Record<string, unknown>): void;
+export declare function validateDrawerOptions(opts: Record<string, unknown>): void;
+export declare function validateToastOptions(opts: Record<string, unknown>): void;
+export declare function validatePopoverOptions(opts: Record<string, unknown>): void;
+export declare function validateDropzoneOptions(opts: Record<string, unknown>): void;
+export declare function validateCalendarOptions(opts: Record<string, unknown>): void;
+export declare function validateComboboxOptions(opts: Record<string, unknown>): void;

package/dist/componentes/ui/validate.js

@@ -0,0 +1,71 @@
+// ── Prop Validation ─────────────────────────────────────────────────
+const VALID_TOAST_POSITIONS = new Set([
+    "top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center",
+]);
+const VALID_POPOVER_PLACEMENTS = new Set([
+    "top", "bottom", "left", "right", "top-start", "bottom-start",
+]);
+const VALID_DRAWER_SIDES = new Set(["right", "left", "bottom"]);
+function warn(component, message) {
+    console.warn(`[Dalila] ${component}: ${message}`);
+}
+function warnInvalidType(component, prop, expected, got) {
+    warn(component, `"${prop}" expected ${expected}, got ${typeof got} (${String(got)})`);
+}
+export function validateDialogOptions(opts) {
+    if (opts.closeOnBackdrop !== undefined && typeof opts.closeOnBackdrop !== "boolean") {
+        warnInvalidType("createDialog", "closeOnBackdrop", "boolean", opts.closeOnBackdrop);
+    }
+    if (opts.closeOnEscape !== undefined && typeof opts.closeOnEscape !== "boolean") {
+        warnInvalidType("createDialog", "closeOnEscape", "boolean", opts.closeOnEscape);
+    }
+}
+export function validateDrawerOptions(opts) {
+    validateDialogOptions(opts);
+    if (opts.side !== undefined && !VALID_DRAWER_SIDES.has(opts.side)) {
+        warn("createDrawer", `"side" must be one of "right"|"left"|"bottom", got "${String(opts.side)}"`);
+    }
+}
+export function validateToastOptions(opts) {
+    if (opts.position !== undefined && !VALID_TOAST_POSITIONS.has(opts.position)) {
+        warn("createToast", `"position" must be a valid ToastPosition, got "${String(opts.position)}"`);
+    }
+    if (opts.duration !== undefined && (typeof opts.duration !== "number" || opts.duration < 0)) {
+        warn("createToast", `"duration" must be a number >= 0, got ${String(opts.duration)}`);
+    }
+    if (opts.maxToasts !== undefined && (typeof opts.maxToasts !== "number" || opts.maxToasts <= 0)) {
+        warn("createToast", `"maxToasts" must be a number > 0, got ${String(opts.maxToasts)}`);
+    }
+}
+export function validatePopoverOptions(opts) {
+    if (opts.placement !== undefined && !VALID_POPOVER_PLACEMENTS.has(opts.placement)) {
+        warn("createPopover", `"placement" must be a valid PopoverPlacement, got "${String(opts.placement)}"`);
+    }
+    if (opts.gap !== undefined && (typeof opts.gap !== "number" || opts.gap < 0)) {
+        warn("createPopover", `"gap" must be a number >= 0, got ${String(opts.gap)}`);
+    }
+    if (opts.viewportPadding !== undefined && (typeof opts.viewportPadding !== "number" || opts.viewportPadding < 0)) {
+        warn("createPopover", `"viewportPadding" must be a number >= 0, got ${String(opts.viewportPadding)}`);
+    }
+}
+export function validateDropzoneOptions(opts) {
+    if (opts.maxFiles !== undefined && (typeof opts.maxFiles !== "number" || opts.maxFiles <= 0)) {
+        warn("createDropzone", `"maxFiles" must be a number > 0, got ${String(opts.maxFiles)}`);
+    }
+    if (opts.maxSize !== undefined && (typeof opts.maxSize !== "number" || opts.maxSize <= 0)) {
+        warn("createDropzone", `"maxSize" must be a number > 0, got ${String(opts.maxSize)}`);
+    }
+}
+export function validateCalendarOptions(opts) {
+    const min = opts.min;
+    const max = opts.max;
+    if (min && max && min > max) {
+        warn("createCalendar", `"min" must be before "max"`);
+    }
+}
+export function validateComboboxOptions(opts) {
+    const options = opts.options;
+    if (!Array.isArray(options) || options.length === 0) {
+        warn("createCombobox", `"options" must be a non-empty array`);
+    }
+}

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

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

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

@@ -0,0 +1,114 @@
+import { signal, computed } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+export function createAccordion(options = {}) {
+    const { single = false, initial = [] } = options;
+    const hasInitial = Object.prototype.hasOwnProperty.call(options, "initial");
+    const seededInitial = single ? initial.slice(0, 1) : initial;
+    const openItems = signal(new Set(seededInitial));
+    const toggle = (itemId) => {
+        openItems.update((current) => {
+            const next = new Set(current);
+            if (next.has(itemId)) {
+                next.delete(itemId);
+            }
+            else {
+                if (single)
+                    next.clear();
+                next.add(itemId);
+            }
+            return next;
+        });
+    };
+    const open = (itemId) => {
+        openItems.update((current) => {
+            const next = new Set(current);
+            if (single)
+                next.clear();
+            next.add(itemId);
+            return next;
+        });
+    };
+    const close = (itemId) => {
+        openItems.update((current) => {
+            const next = new Set(current);
+            next.delete(itemId);
+            return next;
+        });
+    };
+    const _isOpenCache = new Map();
+    const isOpen = (itemId) => {
+        let sig = _isOpenCache.get(itemId);
+        if (!sig) {
+            sig = computed(() => openItems().has(itemId));
+            _isOpenCache.set(itemId, sig);
+        }
+        return sig;
+    };
+    const _attachTo = (el) => {
+        const scope = getCurrentScope();
+        let syncing = false;
+        const allDetails = () => Array.from(el.querySelectorAll("details[data-accordion]"));
+        const syncDOMFromSignal = (set) => {
+            syncing = true;
+            for (const details of allDetails()) {
+                const itemId = details.dataset.accordion;
+                if (!itemId)
+                    continue;
+                details.open = set.has(itemId);
+            }
+            syncing = false;
+        };
+        const syncSignalFromDOM = () => {
+            const next = new Set();
+            for (const details of allDetails()) {
+                if (!details.open)
+                    continue;
+                const itemId = details.dataset.accordion;
+                if (!itemId)
+                    continue;
+                if (single) {
+                    next.clear();
+                }
+                next.add(itemId);
+            }
+            openItems.set(next);
+        };
+        const onToggle = (ev) => {
+            const details = ev.target;
+            if (syncing)
+                return;
+            const itemId = details.dataset.accordion;
+            if (!itemId)
+                return;
+            openItems.update((current) => {
+                const next = new Set(current);
+                if (details.open) {
+                    if (single)
+                        next.clear();
+                    next.add(itemId);
+                }
+                else {
+                    next.delete(itemId);
+                }
+                return next;
+            });
+        };
+        const unsub = openItems.on((set) => {
+            if (!syncing)
+                syncDOMFromSignal(set);
+        });
+        // If initial was not provided, respect current DOM open state.
+        if (!hasInitial)
+            syncSignalFromDOM();
+        else
+            syncDOMFromSignal(openItems());
+        el.addEventListener("toggle", onToggle, true);
+        if (scope) {
+            scope.onCleanup(() => {
+                unsub();
+                el.removeEventListener("toggle", onToggle, true);
+            });
+        }
+    };
+    return { openItems, toggle, open, close, isOpen, _attachTo };
+}

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

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

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

@@ -0,0 +1,132 @@
+import { signal, computed } from "../../../core/signal.js";
+import { batch } from "../../../core/scheduler.js";
+import { validateCalendarOptions } from "../validate.js";
+const DEFAULT_DAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const DEFAULT_MONTH_LABELS = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December",
+];
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+export function createCalendar(options = {}) {
+    validateCalendarOptions(options);
+    const { initial, min, max, dayLabels: customDayLabels, monthLabels: customMonthLabels, } = options;
+    const now = initial ?? new Date();
+    const monthLabels = customMonthLabels ?? DEFAULT_MONTH_LABELS;
+    const calDayLabels = customDayLabels ?? DEFAULT_DAY_LABELS;
+    const year = signal(now.getFullYear());
+    const month = signal(now.getMonth());
+    const selected = signal(initial ?? null);
+    const title = computed(() => `${monthLabels[month()]} ${year()}`);
+    const days = computed(() => {
+        const y = year();
+        const m = month();
+        const sel = selected();
+        const today = new Date();
+        const firstDow = new Date(y, m, 1).getDay();
+        const daysInMonth = new Date(y, m + 1, 0).getDate();
+        const prevMonthDays = new Date(y, m, 0).getDate();
+        const grid = [];
+        const GRID_SIZE = 42;
+        // Previous month days
+        for (let i = firstDow - 1; i >= 0; i--) {
+            const date = prevMonthDays - i;
+            const fullDate = new Date(y, m - 1, date);
+            grid.push({
+                date,
+                month: "prev",
+                fullDate,
+                isToday: isSameDay(fullDate, today),
+                isSelected: sel !== null && isSameDay(fullDate, sel),
+                disabled: isOutOfBounds(fullDate),
+            });
+        }
+        // Current month days
+        for (let d = 1; d <= daysInMonth; d++) {
+            const fullDate = new Date(y, m, d);
+            grid.push({
+                date: d,
+                month: "current",
+                fullDate,
+                isToday: isSameDay(fullDate, today),
+                isSelected: sel !== null && isSameDay(fullDate, sel),
+                disabled: isOutOfBounds(fullDate),
+            });
+        }
+        // Next month days
+        const remaining = GRID_SIZE - grid.length;
+        for (let d = 1; d <= remaining; d++) {
+            const fullDate = new Date(y, m + 1, d);
+            grid.push({
+                date: d,
+                month: "next",
+                fullDate,
+                isToday: isSameDay(fullDate, today),
+                isSelected: sel !== null && isSameDay(fullDate, sel),
+                disabled: isOutOfBounds(fullDate),
+            });
+        }
+        return grid;
+    });
+    function isOutOfBounds(date) {
+        if (min && date < min)
+            return true;
+        if (max && date > max)
+            return true;
+        return false;
+    }
+    const prev = () => {
+        batch(() => {
+            if (month() === 0) {
+                month.set(11);
+                year.update((y) => y - 1);
+            }
+            else {
+                month.update((m) => m - 1);
+            }
+        });
+    };
+    const next = () => {
+        batch(() => {
+            if (month() === 11) {
+                month.set(0);
+                year.update((y) => y + 1);
+            }
+            else {
+                month.update((m) => m + 1);
+            }
+        });
+    };
+    const select = (date) => {
+        if (isOutOfBounds(date))
+            return;
+        selected.set(date);
+    };
+    const handleDayClick = (ev) => {
+        const target = ev.target.closest("[data-date]");
+        if (!target)
+            return;
+        const dateStr = target.dataset.date;
+        if (!dateStr)
+            return;
+        const date = new Date(dateStr);
+        if (isNaN(date.getTime()))
+            return;
+        select(date);
+    };
+    return {
+        year,
+        month,
+        selected,
+        title,
+        days,
+        dayLabels: calDayLabels,
+        prev,
+        next,
+        select,
+        handleDayClick,
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { Combobox, ComboboxOptions } from "../ui-types.js";
+export declare function createCombobox(options: ComboboxOptions): Combobox;

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

@@ -0,0 +1,161 @@
+import { signal, computed } from "../../../core/signal.js";
+import { getCurrentScope } from "../../../core/scope.js";
+import { validateComboboxOptions } from "../validate.js";
+import { isBrowser } from "../env.js";
+let comboboxUid = 0;
+export function createCombobox(options) {
+    validateComboboxOptions(options);
+    const { options: items, placeholder = "", name: fieldName } = options;
+    const open = signal(false);
+    const query = signal("");
+    const value = signal("");
+    const label = signal("");
+    const highlightedIndex = signal(-1);
+    const filtered = computed(() => {
+        const q = query().toLowerCase();
+        if (!q)
+            return items;
+        return items.filter((opt) => opt.label.toLowerCase().includes(q));
+    });
+    const show = () => open.set(true);
+    const close = () => {
+        open.set(false);
+        highlightedIndex.set(-1);
+    };
+    const toggle = () => open.update((v) => !v);
+    const handleInput = (ev) => {
+        const input = ev.target;
+        query.set(input.value);
+        open.set(true);
+        highlightedIndex.set(-1);
+    };
+    const handleSelect = (ev) => {
+        const target = ev.target.closest("[data-value]");
+        if (!target)
+            return;
+        const val = target.dataset.value ?? "";
+        const lbl = target.textContent?.trim() ?? val;
+        value.set(val);
+        label.set(lbl);
+        query.set(lbl);
+        close();
+    };
+    const handleKeydown = (ev) => {
+        const list = filtered();
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                if (!open()) {
+                    show();
+                }
+                else {
+                    highlightedIndex.update((i) => i < list.length - 1 ? i + 1 : 0);
+                }
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                if (open()) {
+                    highlightedIndex.update((i) => i > 0 ? i - 1 : list.length - 1);
+                }
+                break;
+            case "Enter":
+                ev.preventDefault();
+                if (open() && highlightedIndex() >= 0) {
+                    const opt = list[highlightedIndex()];
+                    if (opt) {
+                        value.set(opt.value);
+                        label.set(opt.label);
+                        query.set(opt.label);
+                        close();
+                    }
+                }
+                break;
+            case "Escape":
+                close();
+                break;
+        }
+    };
+    const _attachTo = (el) => {
+        const scope = getCurrentScope();
+        const uid = ++comboboxUid;
+        // ARIA setup
+        const input = el.querySelector("input");
+        const list = el.querySelector("ul, [data-d-tag='d-combobox-list'], .d-combobox-list");
+        if (input) {
+            if (placeholder)
+                input.setAttribute("placeholder", placeholder);
+            input.setAttribute("role", "combobox");
+            input.setAttribute("aria-autocomplete", "list");
+            input.setAttribute("aria-expanded", "false");
+        }
+        if (list) {
+            const listId = list.id || `d-combobox-list-${uid}`;
+            if (!list.id)
+                list.id = listId;
+            list.setAttribute("role", "listbox");
+            if (input)
+                input.setAttribute("aria-controls", listId);
+        }
+        const unsubExpanded = open.on((isOpen) => {
+            input?.setAttribute("aria-expanded", String(isOpen));
+        });
+        const unsubHighlight = highlightedIndex.on((idx) => {
+            if (idx >= 0 && list) {
+                const opts = list.querySelectorAll("[data-value]");
+                const active = opts[idx];
+                if (active) {
+                    const activeId = active.id || `d-combobox-opt-${uid}-${idx}`;
+                    if (!active.id)
+                        active.id = activeId;
+                    active.setAttribute("role", "option");
+                    input?.setAttribute("aria-activedescendant", activeId);
+                }
+            }
+            else {
+                input?.removeAttribute("aria-activedescendant");
+            }
+        });
+        // Hidden input for form submission
+        let hidden = el.querySelector('input[type="hidden"]');
+        if (!hidden) {
+            hidden = el.ownerDocument.createElement("input");
+            hidden.type = "hidden";
+            hidden.name = fieldName || input?.getAttribute("name") || "";
+            el.appendChild(hidden);
+        }
+        const unsubValue = value.on((v) => {
+            if (hidden)
+                hidden.value = v;
+        });
+        const onDocClick = (e) => {
+            if (!el.contains(e.target))
+                close();
+        };
+        if (isBrowser)
+            document.addEventListener("click", onDocClick);
+        if (scope) {
+            scope.onCleanup(() => {
+                unsubExpanded();
+                unsubHighlight();
+                unsubValue();
+                if (isBrowser)
+                    document.removeEventListener("click", onDocClick);
+            });
+        }
+    };
+    return {
+        open,
+        query,
+        value,
+        label,
+        filtered,
+        highlightedIndex,
+        show,
+        close,
+        toggle,
+        handleInput,
+        handleSelect,
+        handleKeydown,
+        _attachTo,
+    };
+}

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

@@ -0,0 +1,10 @@
+import { type Signal } from "../../../core/signal.js";
+import type { Dialog, DialogOptions } from "../ui-types.js";
+/**
+ * Shared dialog behavior — used by both createDialog and createDrawer.
+ */
+export declare function _attachDialogBehavior(el: HTMLDialogElement, open: Signal<boolean>, closeFn: () => void, opts: {
+    closeOnBackdrop: boolean;
+    closeOnEscape: boolean;
+}): void;
+export declare function createDialog(options?: DialogOptions): Dialog;