amateras 0.13.2 → 0.14.0

package/packages/ui/src/structure/Combobox/Combobox.ts

@@ -0,0 +1,312 @@
+import { type FloatDisconnect, float } from "#lib/float";
+import { toCSS } from "#lib/toCSS";
+import { ElementProto, onclient, Proto } from "@amateras/core";
+import { _null, _Array_from, _instanceof, isNull, isUndefined, forEach } from "@amateras/utils";
+import type { ComboboxChips } from "./ComboboxChips";
+import { type ComboboxList, ComboboxItem } from "./ComboboxList";
+import { item_css } from "#lib/combobox_style";
+
+export interface ComboboxProps {
+    values?: OrSignal<any[]>;
+}
+
+export class Combobox extends ElementProto {
+    static tagname = 'combobox'
+    $trigger: ComboboxTrigger | null = _null;
+    $content: ComboboxContent | null = _null;
+    $list: ComboboxList | null = _null;
+    $chips: ComboboxChips | null = _null;
+    $input: ComboboxInput | null = _null;
+    itemMap = new Map<any, ComboboxItem>();
+    #values = new Set<string>();
+    private disconnect: FloatDisconnect | null = _null;
+    constructor(props: $.Props<ComboboxProps>, layout?: $.Layout<Combobox>) {
+        super('combobox', props, layout);
+    }
+    
+    static {
+        $.style(this, toCSS(this.tagname, {
+            display: 'inline-block',
+            width: '10rem',
+            userSelect: 'none'
+        }))
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        forEach(this.#values, value => this.select(value));
+        return this;
+    }
+
+    override toDOM(children = true): HTMLElement[] {
+        super.toDOM(false);
+        if (children && this.$trigger) {
+            this.node?.append(...this.$trigger.toDOM());
+            this.$content?.toDOM();
+        }
+        return [this.node!]
+    }
+
+    override props({ values, ...props }: $.Props<ComboboxProps>): void {
+        super.props(props);
+        this.values(values);
+    }
+    
+    open() {
+        this.attr('opened', '');
+        if (onclient() && this.$content) {
+            this.disconnect = float(this.$trigger?.node!, this.$content.node!);
+            document.body.append(...this.$content.toDOM());
+            if (this.$input) this.$list?.filter(this.$input.node?.value ?? '')
+        }
+    }
+
+    close() {
+        this.attr('opened', _null);
+        if (!onclient()) return;
+        this.$content?.removeNode();
+        this.disconnect?.();
+        this.disconnect = _null;
+    }
+
+    select(value: any, bool = true) {
+        const $item = this.itemMap.get(value);
+        if (!$item) return;
+        $item.selected(bool);
+        if (bool) {
+            this.#values.add(value);
+            this.$chips?.appendChip(value);
+            this.dispatch('combobox_select', [value])
+        } else {
+            this.#values.delete(value);
+            this.$chips?.removeChip(value);
+            this.dispatch('combobox_unselect', [value])
+        }
+
+        this.dispatch('combobox_input', [value])
+    }
+
+    get selected() {
+        return _Array_from(this.itemMap.values()).filter($item => $item.selected())
+    }
+
+    values(): any[]
+    values(values?: OrSignal<any[]>): void;
+    values(values?: OrSignal<any[]>) {
+        if (!arguments.length) return _Array_from(this.#values);
+        if (isUndefined(values)) return;
+        $.resolve(values, values => {
+            this.#values = new Set(values);
+        })
+    }
+}
+
+export class ComboboxTrigger extends ElementProto {
+    static tagname = 'combobox-trigger'
+    $combobox: Combobox | null = _null;
+    constructor(props: $.Props, layout?: $.Layout<ComboboxTrigger>) {
+        super('combobox-trigger', props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            display: 'flex',
+            flexWrap: 'wrap',
+            columnGap: 'calc(var(--spacing) * 1.25)',
+            placeItems: 'center',
+            boxSizing: 'border-box',
+            border: '1px solid var(--input)',
+            background: 'color-mix(in oklch, var(--input) 30%, transparent)',
+            borderRadius: 'var(--radius)',
+            fontSize: '0.875rem',
+            fontWeight: 'var(--font-weight-medium)',
+            lineHeight: '1',
+            padding: `0 calc(var(--spacing) * 1.25)`,
+
+            '&:hover': {
+                background: 'color-mix(in oklch, var(--input) 50%, transparent)'
+            },
+
+            '&:focus-within': {
+                outline: '0.1rem solid var(--border)'
+            }
+        }))
+    }
+    
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        if (this.$combobox) this.$combobox.$trigger = this;
+        return this;
+    }
+}
+
+export class ComboboxInput extends ElementProto<HTMLInputElement> {
+    $combobox: Combobox | null = _null;
+    constructor(props: $.Props<{}, HTMLInputElement>, layout?: $.Layout<ComboboxInput>) {
+        super('input', {ui: 'combobox-input', ...props}, layout);
+        this.on('focus', e => isNull(this.$combobox?.attr('opened')) && this.$combobox.open())
+        this.on('blur', e => {
+            this.$combobox?.close();
+            this.$combobox?.$chips?.$focusedChip?.blur();
+        })
+        this.on('input', e => {
+            this.$combobox?.$list?.filter(e.currentTarget.value)
+            this.$combobox?.$list?.focusFirstItem();
+        })
+        this.on('keydown', e => {
+            switch (e.key) {
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    this.$combobox?.$list?.switch('down');
+                    return;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    this.$combobox?.$list?.switch('up')
+                    return;
+                }
+                case 'Backspace': {
+                    if (e.currentTarget.value.length === 0) this.$combobox?.$chips?.children.at(-1)?.delete();
+                    return;
+                }
+                case 'ArrowRight': {
+                    if (e.currentTarget.value.length === 0) this.$combobox?.$chips?.switch('right');
+                    return;
+                }
+                case 'ArrowLeft': {
+                    if (e.currentTarget.value.length === 0) this.$combobox?.$chips?.switch('left');
+                    return;
+                }
+            }
+        })
+
+        this.on('keyup', e => {
+            switch (e.key) {
+                case 'Escape': {
+                    e.preventDefault();
+                    this.$combobox?.close();
+                    this.$combobox?.$trigger?.node?.focus()
+                    return;
+                }
+                case 'Delete': {
+                    const $targetChip = this.$combobox?.$chips?.$focusedChip;
+                    this.$combobox?.$chips?.switch('right');
+                    $targetChip?.delete();
+                    return;
+                }
+                case 'Tab':
+                case 'Enter': {
+                    e.preventDefault();
+                    const $focusedItem = this.$combobox?.$list?.$focusedItem;
+                    if (!$focusedItem) return;
+                    if (_instanceof($focusedItem, ComboboxItem)) {
+                        this.$combobox?.select($focusedItem.value());
+                    } else {
+                        this.dispatch('combobox_create', [e.currentTarget.value], {bubbles: true})
+                    }
+                    e.currentTarget.value = '';
+                    this.$combobox?.$list?.filter('');
+                    return;
+                }
+            }
+
+            if (e.currentTarget.value.length) this.$combobox?.$chips?.$focusedChip?.blur();
+        })
+    }
+
+    static {
+        $.style(this, toCSS('input[ui="combobox-input"]', {
+            border: 'unset',
+            background: 'unset',
+            color: 'oklch(from var(--fg) l c h / .9)',
+            fontSize: '0.875rem',
+            fontWeight: 'var(--font-weight-medium)',
+            fontFamily: 'inherit',
+            lineHeight: '1',
+            height: 'calc(var(--spacing) * 8)',
+            flex: '1',
+            minWidth: '2rem',
+            padding: `0 calc(var(--spacing) * 1.25)`,
+
+            '&:focus': {
+                outline: 'unset'
+            }
+        }))
+    }
+    
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        if (this.$combobox) this.$combobox.$input = this;
+        return this;
+    }
+}
+
+export class ComboboxContent extends ElementProto {
+    static tagname = 'combobox-content';
+    $combobox: Combobox | null = _null;
+    $empty: ComboboxEmpty | null = _null;
+    constructor(props: $.Props, layout?: $.Layout<ComboboxContent>) {
+        super('combobox-content', props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            maxHeight: '50dvh',
+            overflowY: 'auto',
+            display: 'block',
+            boxSizing: 'border-box',
+            border: '1px solid var(--input)',
+            background: 'oklch(from var(--bg) l c h)',
+            padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
+            borderRadius: 'var(--radius)',
+            userSelect: 'none',
+
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'var(--input) transparent',
+        }))
+    }
+    
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        if (this.$combobox) this.$combobox.$content = this;
+        return this;
+    }
+}
+
+export class ComboboxEmpty extends ElementProto {
+    static tagname = 'combobox-empty'
+    $content: ComboboxContent | null = _null;
+    constructor(props: $.Props, layout?: $.Layout<ComboboxEmpty>) {
+        super('combobox-empty', props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            ...item_css
+        }))
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$content = this.findAbove<ComboboxContent>(proto => _instanceof(proto, ComboboxContent));
+        if (this.$content) this.$content.$empty = this;
+        return this;
+    }
+}
+
+declare global {
+    export namespace $ {
+        export interface ProtoEventMap<P extends Proto> {
+            combobox_create: [string];
+            combobox_select: [string];
+            combobox_unselect: [string];
+            combobox_input: [string];
+        }
+    }
+}

package/packages/ui/src/structure/Combobox/ComboboxChips.ts

@@ -0,0 +1,178 @@
+import { toCSS } from "#lib/toCSS";
+import { Icon } from "#structure/Icon";
+import { ProxyProto, ElementProto } from "@amateras/core";
+import { _null, _instanceof, isUndefined } from "@amateras/utils";
+import { x_svg } from "../../icon/x.svg";
+import { Combobox } from "./Combobox";
+import type { ComboboxItemProps } from "./ComboboxList";
+
+
+export class ComboboxChips extends ProxyProto {
+    static tagname = 'combobox-chips';
+    $combobox: Combobox | null = _null;
+    chipMap = new Map<any, ComboboxChip>();
+    $focusedChip: ComboboxChip | null = _null;
+    declare __child__: ComboboxChip;
+    constructor(layout?: $.Layout<ComboboxChips>) {
+        super(layout);
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        if (this.$combobox) this.$combobox.$chips = this;
+        return this;
+    }
+
+    appendChip(value: any) {
+        const $item = this.$combobox?.itemMap.get(value);
+        if (!$item) throw 'ComboboxChips.addChip: $item not found';
+        const $chip = this.chipMap.get(value) ?? $(ComboboxChip, {value, label: $item.label()});
+        this.chipMap.set(value, $chip);
+        if (this.protos.has($chip)) return;
+        this.append($chip);
+        if (!$chip.builded) $chip.build();
+        this.node?.replaceWith(...this.toDOM());
+    }
+
+    removeChip(value: any) {
+        const $chip = this.chipMap.get(value);
+        if (!$chip) throw 'ComboboxChips.removeChip: $chip not found';
+        $chip.remove();
+        $chip.removeNode();
+    }
+
+    switch(dir: 'left' | 'right') {
+        const $focusedChip = this.$focusedChip;
+        const chips = this.children;
+        const currentPosition = $focusedChip ? chips.indexOf($focusedChip) : dir === 'left' ? 0 : -1;
+        let targetIndex = dir === 'left' ? currentPosition - 1 : currentPosition + 1;
+        if (targetIndex < 0 || targetIndex >= chips.length) targetIndex = dir === 'left' ? -1 : 0;
+        this.focus(targetIndex);
+    }
+
+    focus(index: number) {
+        let $target = this.children.at(index);
+        this.$focusedChip?.blur();
+        $target?.focus();
+    }
+}
+
+export interface ComboboxChipProps {
+    value: OrSignal<any>;
+    label: OrSignal<string>;
+}
+
+export class ComboboxChip extends ElementProto {
+    static tagname = 'combobox-chip';
+    $chips: ComboboxChips | null = _null;
+    #value: any;
+    #label: string = '';
+    constructor(props: $.Props<ComboboxChipProps>, layout?: $.Layout<ComboboxChip>) {
+        super('combobox-chip', props, () => {
+            if (layout) layout(this);
+            else {
+                $([ this.#label ])
+                $(ComboboxChipRemoveButton)
+            }
+        });
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            display: 'inline-flex',
+            placeItems: 'center',
+            fontSize: 'var(--text-xs)',
+            padding: '0 calc(var(--spacing) * 1.5)',
+            background: 'var(--secondary-bg)',
+            borderRadius: 'calc(var(--radius) * .6)',
+            height: 'calc(var(--spacing) * 5.25)',
+            marginBlock: 'calc(var(--spacing))',
+
+            '&[focus]': {
+                outline: `2px solid var(--input)`
+            },
+
+            'button[ui="combobox-chip-remove"]': {
+                background: 'unset',
+                border: 'unset',
+                color: 'oklch(from var(--fg) l c h / .9)',
+                paddingInlineStart: 'calc(var(--spacing) * 1.5)',
+
+                'icon': {
+                    height: 'calc(var(--spacing) * 3.25)',
+                    width: 'calc(var(--spacing) * 3.25)'
+                }
+            }
+        }))
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$chips = this.findAbove<ComboboxChips>(proto => _instanceof(proto, ComboboxChips));
+        return this;
+    }
+
+    override props({ value, label, ...props }: $.Props<ComboboxItemProps>): void {
+        super.props(props);
+        this.value(value);
+        this.label(label);
+    }
+
+    value(): any;
+    value(val?: OrSignal<any>): void;
+    value(val?: OrSignal<any>) {
+        if (!arguments.length) return this.#value;
+        if (isUndefined(val)) return;
+        $.resolve(val, val => {
+            this.$chips?.chipMap.delete(val);
+            this.$chips?.chipMap.set(val, this);
+            this.#value = val;
+        })
+    }
+
+    label(): string;
+    label(val?: OrSignal<string>): void;
+    label(val?: OrSignal<string>) {
+        if (!arguments.length) return this.#label;
+        if (isUndefined(val)) return;
+        $.resolve(val, val => {
+            this.#label = val;
+        })
+    }
+
+    delete() {
+        this.$chips?.$combobox?.select(this.#value, false);
+    }
+
+    focus() {
+        this.attr('focus', '')
+        if (this.$chips) this.$chips.$focusedChip = this;
+    }
+
+    blur() {
+        this.attr('focus', _null)
+        if (this.$chips) this.$chips.$focusedChip = _null;
+    }
+}
+
+export class ComboboxChipRemoveButton extends ElementProto<HTMLButtonElement> {
+    static tagname = 'button';
+    $chip: ComboboxChip | null = _null;
+    constructor(props: $.Props<{}, HTMLButtonElement>, layout?: $.Layout<ComboboxChipRemoveButton>) {
+        super('button', {ui: 'combobox-chip-remove', ...props}, () => {
+            if (layout) layout(this);
+            else $(Icon, {svg: x_svg})
+        })
+
+        this.on('click', () => {
+            this.$chip?.$chips?.$combobox?.select(this.$chip.value(), false)
+        })
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$chip = this.findAbove<ComboboxChip>(proto => _instanceof(proto, ComboboxChip));
+        return this;
+    }
+}

package/packages/ui/src/structure/Combobox/ComboboxList.ts

@@ -0,0 +1,209 @@
+import { toCSS } from "#lib/toCSS";
+import { Icon } from "#structure/Icon";
+import { ElementProto } from "@amateras/core";
+import { _null, _instanceof, forEach, isUndefined } from "@amateras/utils";
+import { check_svg } from "../../icon/check.svg";
+import { Combobox } from "./Combobox";
+import { item_css } from "#lib/combobox_style";
+
+
+export class ComboboxList extends ElementProto {
+    $combobox: Combobox | null = _null;
+    $focusedItem: ComboboxItem | ComboboxCreateItem | null = _null;
+    $createItem: ComboboxCreateItem | null = _null;
+    declare __child__: ComboboxItem | ComboboxCreateItem;
+    constructor(props: $.Props, layout?: $.Layout<ComboboxList>) {
+        super('combobox-list', props, layout);
+    }
+    
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        if (this.$combobox) this.$combobox.$list = this;
+        return this;
+    }
+
+    filter(input: string) {
+        if (!this.$combobox) return;
+        const items: ComboboxItem[] = [];
+        if (this.$createItem) this.$createItem.visible = !!input && !this.$combobox.itemMap.has(input);
+        forEach(this.$combobox.itemMap, ([_, $item]) => {
+            $item.visible = false;
+            if ($item.text.toLowerCase().includes(input.toLowerCase())) {
+                $item.visible = true;
+                items.push($item);
+            }
+        })
+        if (this.$combobox?.$content?.$empty) this.$combobox.$content.$empty.visible = !this.$createItem?.visible && !items.length;
+        this.$combobox.$content?.toDOM();
+    }
+
+    switch(dir: 'up' | 'down') {
+        const $focusedItem = this.$focusedItem;
+        const items = this.children;
+        const currentPosition = $focusedItem ? items.indexOf($focusedItem) : dir === 'up' ? 0 : -1;
+        let targetIndex = dir === 'up' ? currentPosition - 1 : currentPosition + 1;
+        if (targetIndex < 0 || targetIndex >= items.length) targetIndex = dir === 'up' ? -1 : 0;
+        this.focus(targetIndex);
+    }
+
+    focus(index: number) {
+        let $target = this.children.at(index);
+        this.$focusedItem?.blur();
+        $target?.focus();
+    }
+
+    focusFirstItem() {
+        if (this.$createItem?.visible && this.children[1]) this.focus(1);
+        else this.focus(0)
+    }
+
+    override mutate(): void {
+        // super.mutate();
+        // const items = this.findBelowAll<ComboboxItem>(proto => _instanceof(proto, ComboboxItem));
+        // console.debug(items)
+        // this.$combobox?.itemMap.clear();
+        // forEach(items, $item => {
+        //     this.$combobox?.itemMap.set($item.value(), $item);
+        // })
+    }
+}
+
+export interface ComboboxItemProps {
+    value: OrSignal<any>;
+    label: OrSignal<string>;
+    selected?: OrSignal<boolean>;
+}
+
+export class ComboboxItem extends ElementProto {
+    static tagname = 'combobox-item'
+    $combobox: Combobox | null = _null;
+    $list: ComboboxList | null = _null;
+    #value: any = _null;
+    #label: string = '';
+    #selected = false;
+    constructor(props: $.Props<ComboboxItemProps>, layout?: $.Layout<ComboboxItem>) {
+        super('combobox-item', props, () => {
+            if (layout) layout(this);
+            else $([ this.#label ])
+            $(Icon, {ui: 'combobox-item-check', svg: check_svg})
+        });
+
+        this.on('mousedown', e => e.preventDefault())
+
+        this.on('click', () => {
+            this.$combobox?.select(this.#value, !this.selected())
+        })
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            ...item_css,
+
+            'icon[ui="combobox-item-check"]': {
+                visibility: 'hidden',
+                marginInlineStart: 'auto'
+            },
+
+            '&[selected] icon[ui="combobox-item-check"]': {
+                visibility: 'visible'
+            }
+        }))
+    }
+    
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        this.$list = this.findAbove<ComboboxList>(proto => _instanceof(proto, ComboboxList));
+        this.$combobox?.itemMap.set(this.#value, this);
+        return this;
+    }
+
+    override props({ value, label, selected, ...props }: $.Props<ComboboxItemProps>): void {
+        super.props(props);
+        this.value(value);
+        this.label(label);
+        this.selected(selected);
+    }
+
+    value(): any;
+    value(val?: OrSignal<any>): void;
+    value(val?: OrSignal<any>) {
+        if (!arguments.length) return this.#value;
+        if (isUndefined(val)) return;
+        $.resolve(val, val => {
+            this.$combobox?.itemMap.delete(this.#value);
+            this.$combobox?.itemMap.set(val, this);
+            this.#value = val;
+        })
+    }
+
+    label(): string;
+    label(val?: OrSignal<string>): void;
+    label(val?: OrSignal<string>) {
+        if (!arguments.length) return this.#label;
+        if (isUndefined(val)) return;
+        $.resolve(val, val => {
+            this.#label = val;
+        })
+    }
+
+    selected(): boolean;
+    selected(val?: OrSignal<boolean>): void;
+    selected(val?: OrSignal<boolean>) {
+        if (!arguments.length) return this.#selected;
+        if (isUndefined(val)) return;
+        $.resolve(val, val => {
+            this.#selected = val;
+            this.attr('selected', val ? '' : null)
+        })
+    }
+
+    focus() {
+        this.attr('focus', '');
+        if (this.$list) this.$list.$focusedItem = this;
+    }
+
+    blur() {
+        this.attr('focus', _null)
+        if (this.$list) this.$list.$focusedItem = null;
+    }
+}
+
+export class ComboboxCreateItem extends ElementProto {
+    static tagname = 'combobox-create-item'
+    $combobox: Combobox | null = _null;
+    $list: ComboboxList | null = _null;
+    constructor(props: $.Props, layout?: $.Layout<ComboboxCreateItem>) {
+        super('combobox-create-item', props, layout);
+
+        this.on('mousedown', e => e.preventDefault())
+
+        this.on('click', () => {
+        })
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            ...item_css
+        }))
+    }
+    
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$combobox = this.findAbove<Combobox>(proto => _instanceof(proto, Combobox));
+        this.$list = this.findAbove<ComboboxList>(proto => _instanceof(proto, ComboboxList));
+        if (this.$list) this.$list.$createItem = this;
+        return this;
+    }
+
+    focus() {
+        this.attr('focus', '');
+        if (this.$list) this.$list.$focusedItem = this;
+    }
+
+    blur() {
+        this.attr('focus', _null)
+        if (this.$list) this.$list.$focusedItem = null;
+    }
+}