dalila 1.5.13 → 1.7.0

package/README.md

@@ -77,6 +77,10 @@ bind(document.getElementById('app')!, ctx);
 - [Query](./docs/core/query.md) — Cached queries
 - [Mutations](./docs/core/mutation.md) — Write operations
 
+### Forms
+
+- [Forms](./docs/forms.md) — DOM-first form management with validation, field arrays, and accessibility
+
 ### Utilities
 
 - [Scheduler](./docs/core/scheduler.md) — Batching and coordination
@@ -189,6 +193,49 @@ const router = createRouter({
 router.start();
 ```
 
+### Forms
+
+```ts
+import { createForm } from 'dalila';
+
+const userForm = createForm({
+  defaultValues: { name: '', email: '' },
+  validate: (data) => {
+    const errors: Record<string, string> = {};
+    if (!data.name) errors.name = 'Name is required';
+    if (!data.email?.includes('@')) errors.email = 'Invalid email';
+    return errors;
+  }
+});
+
+async function handleSubmit(data, { signal }) {
+  await fetch('/api/users', {
+    method: 'POST',
+    body: JSON.stringify(data),
+    signal
+  });
+}
+```
+
+```html
+<form d-form="userForm" d-on-submit="handleSubmit">
+  <label>
+    Name
+    <input d-field="name" />
+  </label>
+  <span d-error="name"></span>
+
+  <label>
+    Email
+    <input d-field="email" type="email" />
+  </label>
+  <span d-error="email"></span>
+
+  <button type="submit">Save</button>
+  <span d-form-error="userForm"></span>
+</form>
+```
+
 ## Development
 
 ```bash

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

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

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