@llui/components 0.0.1

package/dist/components/combobox.js

@@ -0,0 +1,345 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { pushDismissable } from '../utils/dismissable';
+import { attachFloating } from '../utils/floating';
+export function init(opts = {}) {
+    const items = opts.items ?? [];
+    const disabledItems = opts.disabledItems ?? [];
+    const inputValue = opts.inputValue ?? '';
+    return {
+        open: false,
+        value: opts.value ?? [],
+        inputValue,
+        items,
+        disabledItems,
+        filteredItems: filterItems(items, inputValue),
+        highlightedIndex: null,
+        selectionMode: opts.selectionMode ?? 'single',
+        disabled: opts.disabled ?? false,
+    };
+}
+function filterItems(items, query) {
+    if (query === '')
+        return items;
+    const q = query.toLowerCase();
+    return items.filter((item) => item.toLowerCase().includes(q));
+}
+function nextEnabledIndex(items, disabled, from, delta) {
+    if (items.length === 0)
+        return null;
+    const start = from === null ? (delta === 1 ? -1 : items.length) : from;
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+        const idx = (start + delta * i + n * n) % n;
+        if (!disabled.includes(items[idx]))
+            return idx;
+    }
+    return null;
+}
+function firstEnabledIndex(items, disabled) {
+    for (let i = 0; i < items.length; i++) {
+        if (!disabled.includes(items[i]))
+            return i;
+    }
+    return null;
+}
+function lastEnabledIndex(items, disabled) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!disabled.includes(items[i]))
+            return i;
+    }
+    return null;
+}
+function applySelection(state, value) {
+    if (state.disabledItems.includes(value))
+        return state.value;
+    if (state.selectionMode === 'single')
+        return [value];
+    const isActive = state.value.includes(value);
+    return isActive ? state.value.filter((v) => v !== value) : [...state.value, value];
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'setItems')
+        return [state, []];
+    switch (msg.type) {
+        case 'open':
+            return [
+                {
+                    ...state,
+                    open: true,
+                    highlightedIndex: firstEnabledIndex(state.filteredItems, state.disabledItems),
+                },
+                [],
+            ];
+        case 'close':
+            return [{ ...state, open: false, highlightedIndex: null }, []];
+        case 'setInputValue': {
+            const filteredItems = filterItems(state.items, msg.value);
+            return [
+                {
+                    ...state,
+                    inputValue: msg.value,
+                    filteredItems,
+                    open: true,
+                    highlightedIndex: firstEnabledIndex(filteredItems, state.disabledItems),
+                },
+                [],
+            ];
+        }
+        case 'selectOption': {
+            const value = applySelection(state, msg.value);
+            const inputValue = state.selectionMode === 'single' ? msg.value : '';
+            const filteredItems = filterItems(state.items, inputValue);
+            const open = state.selectionMode === 'single' ? false : state.open;
+            return [
+                {
+                    ...state,
+                    value,
+                    inputValue,
+                    filteredItems,
+                    open,
+                    highlightedIndex: open ? state.highlightedIndex : null,
+                },
+                [],
+            ];
+        }
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'clear':
+            return [
+                { ...state, value: [], inputValue: '', filteredItems: state.items, highlightedIndex: null },
+                [],
+            ];
+        case 'highlight':
+            return [{ ...state, highlightedIndex: msg.index }, []];
+        case 'highlightNext':
+            return [
+                {
+                    ...state,
+                    highlightedIndex: nextEnabledIndex(state.filteredItems, state.disabledItems, state.highlightedIndex, 1),
+                },
+                [],
+            ];
+        case 'highlightPrev':
+            return [
+                {
+                    ...state,
+                    highlightedIndex: nextEnabledIndex(state.filteredItems, state.disabledItems, state.highlightedIndex, -1),
+                },
+                [],
+            ];
+        case 'highlightFirst':
+            return [
+                { ...state, highlightedIndex: firstEnabledIndex(state.filteredItems, state.disabledItems) },
+                [],
+            ];
+        case 'highlightLast':
+            return [
+                { ...state, highlightedIndex: lastEnabledIndex(state.filteredItems, state.disabledItems) },
+                [],
+            ];
+        case 'selectHighlighted': {
+            if (state.highlightedIndex === null)
+                return [state, []];
+            const v = state.filteredItems[state.highlightedIndex];
+            if (v === undefined)
+                return [state, []];
+            const value = applySelection(state, v);
+            const inputValue = state.selectionMode === 'single' ? v : '';
+            const filteredItems = filterItems(state.items, inputValue);
+            const open = state.selectionMode === 'single' ? false : state.open;
+            return [
+                {
+                    ...state,
+                    value,
+                    inputValue,
+                    filteredItems,
+                    open,
+                    highlightedIndex: open ? state.highlightedIndex : null,
+                },
+                [],
+            ];
+        }
+        case 'setItems': {
+            const disabled = msg.disabled ?? state.disabledItems;
+            const value = state.value.filter((v) => msg.items.includes(v) && !disabled.includes(v));
+            return [
+                {
+                    ...state,
+                    items: msg.items,
+                    disabledItems: disabled,
+                    filteredItems: filterItems(msg.items, state.inputValue),
+                    value,
+                },
+                [],
+            ];
+        }
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const inputId = `${base}:input`;
+    const contentId = `${base}:content`;
+    const itemId = (index) => `${base}:item:${index}`;
+    const triggerLabel = opts.triggerLabel ?? 'Toggle options';
+    return {
+        root: {
+            role: 'combobox',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            'aria-haspopup': 'listbox',
+            'data-scope': 'combobox',
+            'data-part': 'root',
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+        },
+        input: {
+            type: 'text',
+            role: 'combobox',
+            autoComplete: 'off',
+            'aria-autocomplete': 'list',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            'aria-activedescendant': (s) => {
+                const idx = get(s).highlightedIndex;
+                return idx === null ? undefined : itemId(idx);
+            },
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            id: inputId,
+            disabled: (s) => get(s).disabled,
+            value: (s) => get(s).inputValue,
+            'data-scope': 'combobox',
+            'data-part': 'input',
+            onInput: (e) => {
+                const value = e.target.value;
+                send({ type: 'setInputValue', value });
+            },
+            onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        send({ type: 'open' });
+                        send({ type: 'highlightNext' });
+                        return;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        send({ type: 'open' });
+                        send({ type: 'highlightPrev' });
+                        return;
+                    case 'Home':
+                        e.preventDefault();
+                        send({ type: 'highlightFirst' });
+                        return;
+                    case 'End':
+                        e.preventDefault();
+                        send({ type: 'highlightLast' });
+                        return;
+                    case 'Enter':
+                        e.preventDefault();
+                        send({ type: 'selectHighlighted' });
+                        return;
+                    case 'Escape':
+                        e.preventDefault();
+                        send({ type: 'close' });
+                        return;
+                }
+            },
+            onFocus: () => send({ type: 'open' }),
+        },
+        trigger: {
+            type: 'button',
+            'aria-label': triggerLabel,
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            tabIndex: -1,
+            'data-scope': 'combobox',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'open' }),
+        },
+        positioner: {
+            'data-scope': 'combobox',
+            'data-part': 'positioner',
+            style: 'position:absolute;top:0;left:0;',
+        },
+        content: {
+            role: 'listbox',
+            id: contentId,
+            'aria-labelledby': inputId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'combobox',
+            'data-part': 'content',
+        },
+        item: (value, index) => ({
+            item: {
+                role: 'option',
+                id: itemId(index),
+                'aria-selected': (s) => get(s).value.includes(value),
+                'aria-disabled': (s) => (get(s).disabledItems.includes(value) ? 'true' : undefined),
+                'data-state': (s) => (get(s).value.includes(value) ? 'selected' : undefined),
+                'data-highlighted': (s) => (get(s).highlightedIndex === index ? '' : undefined),
+                'data-disabled': (s) => (get(s).disabledItems.includes(value) ? '' : undefined),
+                'data-scope': 'combobox',
+                'data-part': 'item',
+                'data-value': value,
+                'data-index': String(index),
+                onClick: () => send({ type: 'selectOption', value }),
+                onPointerMove: () => send({ type: 'highlight', index }),
+            },
+        }),
+        empty: {
+            'data-scope': 'combobox',
+            'data-part': 'empty',
+        },
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const placement = opts.placement ?? 'bottom-start';
+    const offset = opts.offset ?? 4;
+    const flip = opts.flip !== false;
+    const shift = opts.shift !== false;
+    const sameWidth = opts.sameWidth !== false;
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    const inputId = parts.input.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    const inputEl = document.getElementById(inputId);
+                    if (!contentEl || !inputEl)
+                        return;
+                    const cleanups = [];
+                    const positioner = contentEl.closest('[data-part="positioner"]');
+                    const floatingEl = positioner ?? contentEl;
+                    if (sameWidth) {
+                        floatingEl.style.minWidth = `${inputEl.offsetWidth}px`;
+                    }
+                    cleanups.push(attachFloating({
+                        anchor: inputEl,
+                        floating: floatingEl,
+                        placement,
+                        offset,
+                        flip,
+                        shift,
+                    }));
+                    cleanups.push(pushDismissable({
+                        element: contentEl,
+                        ignore: () => [inputEl],
+                        onDismiss: () => opts.send({ type: 'close' }),
+                    }));
+                    return () => {
+                        for (let i = cleanups.length - 1; i >= 0; i--)
+                            cleanups[i]();
+                    };
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const combobox = { init, update, connect, overlay };

package/dist/components/context-menu.d.ts

@@ -0,0 +1,105 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+/**
+ * Context menu — right-click (contextmenu) triggered menu positioned at
+ * the pointer. Unlike regular menu, it has no trigger button — the user
+ * right-clicks anywhere in the associated region.
+ *
+ * Uses raw x/y positioning instead of floating-ui (pointer is the anchor,
+ * not an element).
+ */
+export interface ContextMenuState {
+    open: boolean;
+    x: number;
+    y: number;
+    items: string[];
+    disabledItems: string[];
+    highlighted: string | null;
+}
+export type ContextMenuMsg = {
+    type: 'openAt';
+    x: number;
+    y: number;
+} | {
+    type: 'close';
+} | {
+    type: 'highlight';
+    value: string | null;
+} | {
+    type: 'highlightNext';
+} | {
+    type: 'highlightPrev';
+} | {
+    type: 'selectHighlighted';
+} | {
+    type: 'select';
+    value: string;
+} | {
+    type: 'setItems';
+    items: string[];
+    disabled?: string[];
+};
+export interface ContextMenuInit {
+    items?: string[];
+    disabledItems?: string[];
+}
+export declare function init(opts?: ContextMenuInit): ContextMenuState;
+export declare function update(state: ContextMenuState, msg: ContextMenuMsg): [ContextMenuState, never[]];
+export interface ContextMenuItemParts<S> {
+    item: {
+        role: 'menuitem';
+        id: string;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-state': (s: S) => 'highlighted' | undefined;
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'context-menu';
+        'data-part': 'item';
+        'data-value': string;
+        tabIndex: -1;
+        onClick: (e: MouseEvent) => void;
+        onPointerMove: (e: PointerEvent) => void;
+    };
+}
+export interface ContextMenuParts<S> {
+    /** The element users right-click to open the menu. */
+    trigger: {
+        'data-scope': 'context-menu';
+        'data-part': 'trigger';
+        onContextMenu: (e: MouseEvent) => void;
+    };
+    positioner: {
+        'data-scope': 'context-menu';
+        'data-part': 'positioner';
+        style: (s: S) => string;
+    };
+    content: {
+        role: 'menu';
+        id: string;
+        tabIndex: -1;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'context-menu';
+        'data-part': 'content';
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    item: (value: string) => ContextMenuItemParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+    onSelect?: (value: string) => void;
+}
+export declare function connect<S>(get: (s: S) => ContextMenuState, send: Send<ContextMenuMsg>, opts: ConnectOptions): ContextMenuParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => ContextMenuState;
+    send: Send<ContextMenuMsg>;
+    parts: ContextMenuParts<S>;
+    content: () => Node[];
+    transition?: TransitionOptions;
+    target?: string | HTMLElement;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const contextMenu: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/components/context-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/context-menu.js

@@ -0,0 +1,177 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { pushDismissable } from '../utils/dismissable';
+export function init(opts = {}) {
+    return {
+        open: false,
+        x: 0,
+        y: 0,
+        items: opts.items ?? [],
+        disabledItems: opts.disabledItems ?? [],
+        highlighted: null,
+    };
+}
+function firstEnabled(items, disabled) {
+    for (const v of items)
+        if (!disabled.includes(v))
+            return v;
+    return null;
+}
+function nextEnabled(items, disabled, from, delta) {
+    if (items.length === 0)
+        return null;
+    const start = from === null ? -1 : items.indexOf(from);
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+        const idx = start === -1 && delta === 1 ? i - 1 : (start + delta * i + n * n) % n;
+        const v = items[idx];
+        if (!disabled.includes(v))
+            return v;
+    }
+    return null;
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'openAt':
+            return [
+                {
+                    ...state,
+                    open: true,
+                    x: msg.x,
+                    y: msg.y,
+                    highlighted: firstEnabled(state.items, state.disabledItems),
+                },
+                [],
+            ];
+        case 'close':
+            return [{ ...state, open: false, highlighted: null }, []];
+        case 'highlight':
+            if (msg.value !== null && state.disabledItems.includes(msg.value))
+                return [state, []];
+            return [{ ...state, highlighted: msg.value }, []];
+        case 'highlightNext':
+            return [
+                {
+                    ...state,
+                    highlighted: nextEnabled(state.items, state.disabledItems, state.highlighted, 1),
+                },
+                [],
+            ];
+        case 'highlightPrev':
+            return [
+                {
+                    ...state,
+                    highlighted: nextEnabled(state.items, state.disabledItems, state.highlighted, -1),
+                },
+                [],
+            ];
+        case 'selectHighlighted':
+            if (state.highlighted === null)
+                return [state, []];
+            return [{ ...state, open: false, highlighted: null }, []];
+        case 'select':
+            if (state.disabledItems.includes(msg.value))
+                return [state, []];
+            return [{ ...state, open: false, highlighted: null }, []];
+        case 'setItems': {
+            const disabled = msg.disabled ?? state.disabledItems;
+            return [{ ...state, items: msg.items, disabledItems: disabled }, []];
+        }
+    }
+}
+export function connect(get, send, opts) {
+    const contentId = `${opts.id}:content`;
+    const itemId = (v) => `${opts.id}:item:${v}`;
+    return {
+        trigger: {
+            'data-scope': 'context-menu',
+            'data-part': 'trigger',
+            onContextMenu: (e) => {
+                e.preventDefault();
+                send({ type: 'openAt', x: e.clientX, y: e.clientY });
+            },
+        },
+        positioner: {
+            'data-scope': 'context-menu',
+            'data-part': 'positioner',
+            style: (s) => {
+                const st = get(s);
+                return `position:fixed;top:${st.y}px;left:${st.x}px;`;
+            },
+        },
+        content: {
+            role: 'menu',
+            id: contentId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'context-menu',
+            'data-part': 'content',
+            onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        send({ type: 'highlightNext' });
+                        return;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        send({ type: 'highlightPrev' });
+                        return;
+                    case 'Enter':
+                    case ' ':
+                        e.preventDefault();
+                        send({ type: 'selectHighlighted' });
+                        return;
+                    case 'Escape':
+                        e.preventDefault();
+                        send({ type: 'close' });
+                        return;
+                }
+            },
+        },
+        item: (value) => ({
+            item: {
+                role: 'menuitem',
+                id: itemId(value),
+                'aria-disabled': (s) => (get(s).disabledItems.includes(value) ? 'true' : undefined),
+                'data-state': (s) => (get(s).highlighted === value ? 'highlighted' : undefined),
+                'data-disabled': (s) => (get(s).disabledItems.includes(value) ? '' : undefined),
+                'data-scope': 'context-menu',
+                'data-part': 'item',
+                'data-value': value,
+                tabIndex: -1,
+                onClick: () => {
+                    send({ type: 'select', value });
+                    opts.onSelect?.(value);
+                },
+                onPointerMove: () => send({ type: 'highlight', value }),
+            },
+        }),
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    if (!contentEl)
+                        return;
+                    contentEl.focus({ preventScroll: true });
+                    const cleanup = pushDismissable({
+                        element: contentEl,
+                        onDismiss: () => opts.send({ type: 'close' }),
+                    });
+                    return cleanup;
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const contextMenu = { init, update, connect, overlay };