amateras 0.13.2 → 0.14.0

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

@@ -0,0 +1,89 @@
+import { toCSS } from "#lib/toCSS";
+import { ElementProto, onclient } from "@amateras/core";
+import { _instanceof, _null } from "@amateras/utils";
+
+export class ContextMenu extends ElementProto {
+    static tagname = 'context-menu';
+    private clickListener: ((e: MouseEvent) => void) | null = _null;
+    constructor(props: $.Props, layout?: $.Layout<ContextMenu>) {
+        super(ContextMenu.tagname, props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            display: 'block',
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            maxHeight: '50dvh',
+            overflowY: 'auto',
+            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',
+        }))
+    }
+
+    open(e: MouseEvent) {
+        if (onclient()) {
+            this.build();
+            this.style({
+                top: `${e.y}px`,
+                left: `${e.x}px`
+            })
+            this.clickListener = (e) => {
+                if (e.target === this.node) return;
+                if (e.target && this.node?.contains(e.target as Node)) return;
+                this.close();
+            }
+            setTimeout(() => window.addEventListener('click', this.clickListener!), 1)
+            document.body.append(...this.toDOM());
+        }
+    }
+
+    close(dispose = true) {
+        this.removeNode();
+        if (this.clickListener) window.removeEventListener('click', this.clickListener);
+        this.clickListener = _null;
+        if (dispose) this.dispose();
+    }
+}
+
+export class ContextMenuItem extends ElementProto {
+    static tagname = 'context-menu-item'
+    private $menu: null | ContextMenu = _null;
+    constructor(props: $.Props, layout?: $.Layout<ContextMenuItem>) {
+        super(ContextMenuItem.tagname, props, layout);
+        this.on('click', () => this.$menu?.close())
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            display: 'block',
+            boxSizing: 'border-box',
+            padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
+            borderRadius: 'var(--radius)',
+            fontSize: '0.875rem',
+            fontWeight: '500',
+            lineHeight: '1',
+
+            '&:hover, :not(:has(select-item:hover)) &:focus': {
+                background: 'oklch(from var(--input) l c h / .1)'
+            },
+            '&:focus': {
+                outline: 'none'
+            }
+        }))
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.$menu = this.findAbove(proto => _instanceof(proto, ContextMenu));
+        return this;
+    }
+}

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

@@ -0,0 +1,109 @@
+import { toCSS } from "#lib/toCSS";
+import { ElementProto } from "@amateras/core";
+import { _instanceof, isUndefined } from "@amateras/utils";
+
+export interface FieldProps {
+    for?: OrSignal<string>;
+    direction?: 'vertical' | 'horizontal'
+}
+
+export class Field extends ElementProto<HTMLElement> {
+    static tagname = 'field';
+    constructor(props: $.Props<FieldProps>, layout?: $.Layout<Field>) {
+        super(Field.tagname, props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'calc(var(--spacing) * 2)',
+            width: '100%',
+
+            '&[direction="horizontal"]': {
+                flexDirection: 'row',
+                placeItems: 'center',
+                width: 'unset'
+            }
+        }))
+    }
+
+    override props({ for: htmlFor, ...props }: $.Props<FieldProps>): void {
+        super.props(props);
+        this.for(htmlFor);
+    }
+
+    override build(cascading?: boolean): this {
+        super.build(cascading);
+        this.setFor();
+        return this;
+    }
+
+    for(): string | null;
+    for(name?: OrSignal<string>): void
+    for(name?: OrSignal<string>) {
+        if (!arguments.length) return this.attr('for');
+        if (isUndefined(name)) return;
+        $.resolve(name, name => {
+            this.attr('for', name);
+            this.setFor();
+        });
+    }
+
+    private setFor() {
+        const name = this.for();
+        this.findBelow(proto => {
+            if (_instanceof(proto, ElementProto)) {
+                if (proto.tagname === 'input') proto.attr('id', name);
+                if (proto.tagname === 'label') proto.attr('for', name)
+            }
+        })
+    }
+}
+
+export class FieldLabel extends ElementProto<HTMLElement> {
+    static tagname = 'label';
+    constructor(props: $.Props, layout?: $.Layout<FieldLabel>) {
+        super(FieldLabel.tagname, props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            'field &': {
+                display: 'block',
+                userSelect: 'none',
+                color: 'var(--fg)',
+                fontWeight: 'var(--font-weight-medium)',
+                fontSize: 'var(--text-sm)',
+                lineHeight: 'var(--text-sm)',
+                flexShrink: '0'
+            },
+
+            'field[disabled] &': {
+                pointerEvents: 'none'
+            }
+        }))
+    }
+}
+
+export class FieldDescription extends ElementProto<HTMLElement> {
+    static tagname = 'field-description';
+    constructor(props: $.Props, layout?: $.Layout<FieldDescription>) {
+        super(FieldDescription.tagname, props, layout);
+    }
+
+    static {
+        $.style(this, toCSS(this.tagname, {
+            'field &': {
+                display: 'block',
+                color: 'var(--muted)',
+                fontWeight: 'var(--font-weight-medium)',
+                fontSize: 'var(--text-sm)'
+            },
+
+            'field[disabled] &': {
+                pointerEvents: 'none'
+            }
+        }))
+    }
+}

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

@@ -0,0 +1,29 @@
+import { toCSS } from "#lib/toCSS";
+import { ElementProto } from "@amateras/core";
+
+export class Input extends ElementProto<HTMLInputElement> {
+    static tagname = 'input';
+    constructor(props: $.Props<{}, HTMLInputElement>, layout?: $.Layout<Input>) {
+        super(Input.tagname, {ui: 'input', ...props}, layout)
+    }
+
+    static {
+        $.style(this, toCSS('input[ui="input"]', {
+            borderRadius: 'var(--radius)',
+            height: 'calc(var(--spacing) * 8)',
+            transition: '0.2s all ease',
+            fontFamily: 'inherit',
+            fontSize: 'var(--text-sm)',
+            padding: `0 calc(var(--spacing) * 2.5)`,
+            
+            border: '1px solid oklch(from var(--input) l c h / .2)',
+            background: 'oklch(from var(--input) l c h / .025)',
+            color: 'oklch(from var(--fg) l c h / .9)',
+            outline: '0.2rem solid transparent',
+
+            '&:focus-visible': {
+                outlineColor: 'var(--border)'
+            },
+        }))
+    }
+}

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

@@ -1,7 +1,7 @@
-import { ElementProto, onclient } from "@amateras/core";
-import { _null, isUndefined } from "@amateras/utils";
+import { ElementProto, onclient, Proto } from "@amateras/core";
+import { _instanceof, _null, isUndefined } from "@amateras/utils";
 import type { SelectContent } from "./SelectContent";
-import type { SelectItem } from "./SelectItem";
+import { SelectItem } from "./SelectItem";
 import type { SelectTrigger } from "./SelectTrigger";
 import { float, type FloatDisconnect } from "#lib/float";
 import type { SelectValue } from "./SelectValue";
@@ -37,21 +37,22 @@ export class Select extends ElementProto {
 
     override props({value, disabled, ...props}: $.Props<SelectProps>): void {
         super.props(props);
-        if (disabled) this.disabled(disabled);
+        this.disabled(disabled);
         this.value(value);
     }
 
     disabled(): boolean;
-    disabled(bool: OrSignal<boolean>): void
+    disabled(bool?: OrSignal<boolean>): void
     disabled(bool?: OrSignal<boolean>) {
         if (!arguments.length) return this.attr('disabled') === '';
+        if (isUndefined(bool)) return;
         $.resolve(bool, bool => {
             this.attr('disabled', bool ? '' : _null);
         });
     }
 
     value(): any;
-    value(val: OrSignal<any>): void;
+    value(val?: OrSignal<any>): void;
     value(val?: OrSignal<any>) {
         if (!arguments.length) return this.#value;
         if (isUndefined(val)) return;
@@ -60,6 +61,7 @@ export class Select extends ElementProto {
             let $item = this.itemMap.get(val);
             this.selected = $item ?? _null;
             this.$value?.render();
+            this.dispatch('selectvalue', [this, val], {bubbles: true})
         })
         this.node?.dispatchEvent(new Event('select-value'));
     }
@@ -74,7 +76,7 @@ export class Select extends ElementProto {
                 if (e.target && this.$content?.node?.contains(e.target as Node)) return;
                 this.close();
             }
-            this.selected?.node?.focus();
+            this.selected?.node?.focus() ?? this.$content?.findBelow<SelectItem>(proto => _instanceof(proto, SelectItem))?.node?.focus();
             window.addEventListener('click', this.clickListener)
         }
     }
@@ -88,7 +90,7 @@ export class Select extends ElementProto {
         this.disconnect = _null;
     }
 
-    override toDOM(children?: boolean): HTMLElement[] {
+    override toDOM(children = true): HTMLElement[] {
         super.toDOM(false);
         if (children && this.$trigger) {
             this.node?.append(...this.$trigger.toDOM());
@@ -102,4 +104,12 @@ export class Select extends ElementProto {
         let triggerHTML = this.$trigger?.toString() ?? '';
         return this.parseHTML({children: triggerHTML});
     }
+}
+
+declare global {
+    export namespace $ {
+        export interface ProtoEventMap<P extends Proto> {
+            selectvalue: [$select: Select, value: any]
+        }
+    }
 }

package/packages/ui/src/structure/Select/SelectContent.ts

@@ -15,13 +15,18 @@ export class SelectContent extends ElementProto {
             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'
+            userSelect: 'none',
+
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'var(--input) transparent',
         }))
     }
 

package/packages/ui/src/structure/Select/SelectItem.ts

@@ -13,7 +13,7 @@ export class SelectItem extends ElementProto {
     $select: Select | null = _null;
     $content: SelectContent | null = _null;
     #value: any = _null;
-    constructor(props: $.Props, layout?: $.Layout<Select>) {
+    constructor(props: $.Props<SelectItemProps>, layout?: $.Layout<Select>) {
         super(SelectItem.tagname, {tabindex: 0, ...props}, layout);
         this.on('click', () => {
             this.$select?.close();
@@ -109,6 +109,7 @@ export class SelectItem extends ElementProto {
         super.build(cascading);
         this.$select = this.findAbove<Select>(proto => _instanceof(proto, Select));
         this.$content = this.findAbove<SelectContent>(proto => _instanceof(proto, SelectContent));
+        if (this.$select && this.$select.value() === this.#value) this.$select.selected = this;
         this.$select?.itemMap.set(this.#value, this);
         return this;
     }

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

@@ -34,8 +34,8 @@ export class Slideshow extends ElementProto {
         this.autoplay = autoplay ?? false;
         this.autopause = autopause ?? true;
         this.animation = animation ?? _null;
-        this.ondispose(() => this.pause());
-        this.ondom(() => {
+        this.listen('dispose', () => this.pause());
+        this.listen('dom', () => {
             if (this.autoplay) this.play();
         })
 

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

@@ -0,0 +1,45 @@
+import { toCSS } from "#lib/toCSS";
+import { ElementProto } from "@amateras/core";
+
+export class Switch extends ElementProto {
+    static tagname = 'input';
+    constructor(props: $.Props<{}, HTMLInputElement>, layout?: $.Layout<Switch>) {
+        super('input', {type: 'checkbox', ui: 'switch', ...props}, layout);
+    }
+
+    static {
+        $.style(this, toCSS('input[ui="switch"]', {
+            appearance: 'none',
+            display: 'inline-flex',
+            height: 'calc(var(--spacing) * 5)',
+            width: 'calc(var(--spacing) * 9)',
+            background: 'color-mix(in oklab, var(--input) 80%, transparent)',
+            border: 'none',
+            placeItems: 'center',
+            borderRadius: 'calc(var(--spacing) * 5)',
+            transition: 'all .3s ease',
+            padding: '0',
+
+            '&::after': {
+                content: '""',
+                display: 'block',
+                height: 'calc(var(--spacing) * 5)',
+                width: 'calc(var(--spacing) * 5)',
+                background: 'var(--fg)',
+                borderRadius: 'var(--radius-round)',
+                transition: 'all .3s ease'
+            },
+
+            '&:checked': {
+                background: 'var(--primary-bg)',
+
+                '&::after': {
+                    height: 'calc(var(--spacing) * 4.5)',
+                    width: 'calc(var(--spacing) * 4.5)',
+                    translate: 'calc(115% - var(--spacing)) 0',
+                    background: 'var(--bg)'
+                }
+            }
+        }))
+    }
+}

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

@@ -5,12 +5,12 @@ export interface TabsOptions {
     targetId?: string;
 }
 export class Tabs extends ElementProto {
-    targetId: string;
+    targetId: string | null;
     $container: TabsContainer | null = _null;
     triggers = new Map<string, TabTrigger>();
-    constructor({targetId, ...props}: $.Props, layout?: $.Layout<Tabs>) {
+    constructor({targetId, ...props}: $.Props<TabsOptions>, layout?: $.Layout<Tabs>) {
         super('tabs', props, layout);
-        this.targetId = targetId;
+        this.targetId = targetId ?? _null;
     }
 
     static {

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

@@ -0,0 +1,155 @@
+import { pointerHoverMediaQuery } from "#lib/hover";
+import { toCSS } from "#lib/toCSS";
+import { ElementProto } from "@amateras/core";
+import { _null, isNull, isUndefined } from "@amateras/utils";
+
+export interface ToggleProps {
+    checked?: OrSignal<boolean>;
+    variant?: OrSignal<'primary' | 'outline' | 'secondary' | 'ghost' | 'destructive' | string & {}>;
+    size?: OrSignal<'base' | 'icon' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | string & {}>;
+}
+
+export class Toggle extends ElementProto<HTMLButtonElement> {
+    static tagname = 'button';
+    constructor(props: $.Props<ToggleProps, HTMLButtonElement>, layout?: $.Layout<Toggle>) {
+        super('button', { ui: 'toggle', ...props}, layout);
+
+        this.on('click', $$ => this.checked(!this.checked()))
+    }
+
+    static {
+        $.style(this, toCSS('button[ui="toggle"]', {
+            display: 'inline-flex',
+            placeContent: 'center',
+            placeItems: 'center',
+            padding: `0 calc(var(--spacing) * 2.5)`,
+            borderRadius: 'var(--radius)',
+            height: 'calc(var(--spacing) * 8)',
+            lineHeight: '1rem',
+            transition: '0.1s all ease',
+            fontWeight: 'var(--font-weight-medium)',
+            fontFamily: 'inherit',
+            outline: '0.1rem solid oklch(from var(--border) l c h / 0)',
+            userSelect: 'none',
+            gap: 'calc(var(--spacing) * 2.5)',
+            flexShrink: '0',
+            
+            border: '1px solid oklch(from var(--input) l c h / .2)',
+            background: 'oklch(from var(--input) l c h / .025)',
+            color: 'oklch(from var(--fg) l c h / .8)',
+
+            [pointerHoverMediaQuery]: {
+                '&:not([disabled]):hover': {
+                    background: 'oklch(from var(--input) l c h / .1)',
+                    color: 'oklch(from var(--fg) l c h)',
+                },
+            },
+
+            '&[checked]': {
+                color: 'oklch(from var(--primary-fg) l c h)',
+                background: 'oklch(from var(--primary-bg) l c h / .8)',
+
+                [pointerHoverMediaQuery]: {
+                    '&:not([disabled]):hover': {
+                        background: 'oklch(from var(--primary-bg) l c h)',
+                        color: 'oklch(from var(--primary-fg) l c h)',
+                    },
+                },
+            },
+
+            '&[variant="primary"]': {
+                '&[checked]': {
+                    color: 'oklch(from var(--primary-fg) l c h)',
+                    background: 'var(--primary-bg)',
+                }
+            },
+
+            '&[variant="secondary"]': {
+                '&[checked]': {
+                    color: 'oklch(from var(--secondary-fg) l c h)',
+                    background: 'var(--secondary-bg)',
+                }
+            },
+
+            '&[variant="destructive"]': {
+                '&[checked]': {
+                    color: 'oklch(from var(--destructive-fg) l c h)',
+                    background: 'oklch(from var(--destructive-bg) l c h / .3)',
+                }
+            },
+
+            '&[variant="ghost"]': {
+                border: 'none',
+                color: 'oklch(from var(--fg) l c h)',
+                background: 'oklch(from var(--input) l c h / 0)',
+                '&[checked]': {
+                    color: 'oklch(from var(--secondary-fg) l c h)',
+                    background: 'var(--secondary-bg)',
+                }
+            },
+
+            '&[size="icon"]': {
+                width: 'calc(var(--spacing) * 8)',
+                padding: '0'
+            },
+
+            '&[size="xs"]': {
+                padding: 'calc(var(--spacing) * 2)',
+                fontSize: 'var(--text-xs)',
+                lineHeight: 'var(--text-xs)',
+                height: 'calc(var(--spacing) * 6)',
+            },
+
+            '&[size="icon-xs"]': {
+                width: 'calc(var(--spacing) * 6)',
+                height: 'calc(var(--spacing) * 6)',
+                padding: '0',
+
+                'svg': {
+                    width: 'calc(var(--spacing) * 3)',
+                    height: 'calc(var(--spacing) * 3)'
+                }
+            },
+
+            '&[size="sm"]': {
+                height: 'calc(var(--spacing) * 7)'
+            },
+
+            '&[size="icon-sm"]': {
+                width: 'calc(var(--spacing) * 7)',
+                height: 'calc(var(--spacing) * 7)',
+                padding: '0',
+            },
+
+            '&[size="lg"]': {
+                height: 'calc(var(--spacing) * 9)'
+            },
+
+            '&[size="icon-lg"]': {
+                width: 'calc(var(--spacing) * 9)',
+                height: 'calc(var(--spacing) * 9)',
+                padding: '0',
+            },
+
+            '&[disabled]': {
+                opacity: '.5'
+            }
+        }))
+    }
+
+    override props({ checked, ...props }: $.Props<ToggleProps>): void {
+        super.props(props)
+        this.checked(checked);
+    }
+
+    checked(): boolean;
+    checked(bool?: OrSignal<boolean>): void;
+    checked(bool?: OrSignal<boolean>) {
+        if (!arguments.length) return !isNull(this.attr('checked'));
+        if (isUndefined(bool)) return;
+        $.resolve(bool, bool => {
+            this.attr('checked', bool ? '' : _null);
+            this.node?.dispatchEvent(new Event('input'))
+        })
+    }
+}

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

@@ -27,7 +27,7 @@ export class Waterfall extends ElementProto {
         $.style(Waterfall, 'waterfall{display:block;position:relative;min-height:100dvh}')
     }
 
-    override toDOM(children?: boolean): HTMLElement[] {
+    override toDOM(children = true): HTMLElement[] {
         super.toDOM(children);
         if (this.node) this.observer?.observe(this.node);
         return [this.node!]

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

@@ -12,7 +12,7 @@ export class WaterfallItem extends ElementProto {
         $.style(WaterfallItem, 'waterfall-item{display:block;position:absolute}')
     }
 
-    override toDOM(children?: boolean): HTMLElement[] {
+    override toDOM(children = true): HTMLElement[] {
         super.toDOM(children);
         const $waterfall = this.findAbove<Waterfall>(proto => is(proto, Waterfall));
         this.node?.querySelectorAll('img').forEach(img => $waterfall?.observer?.observe(img));

package/packages/utils/src/lib/utils.ts

@@ -48,6 +48,8 @@ interface map {
 }
 export const map: map = (arr: any, fn: any) => _Array_from(arr).map(fn);
 
+export const filterValue = <T, V>(arr: Array<T>, ...values: V[]): Array<Exclude<T, V>> => arr.filter(item => !values.includes(item as any)) as any;
+
 // type check
 export const _typeof = (target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') => typeof target === type;
 export const isIncluded = <T, V>(target: T, args: V[]): target is V & T => args.includes(target as any);
@@ -104,9 +106,16 @@ export const sleep = async (ms: number) => new _Promise(resolve => setTimeout(re
 
 export const toArray = <T>(item: OrArray<T>): T[] => _instanceof(item, Array) ? item : [item];
 
-export const trycatch = <D>(callback: () => D): Result<D, Error> => {
+export interface trycatch {
+    <D>(callback: () => D): D extends Promise<infer T> ? Promise<Result<T, Error>> : Result<D, Error>
+}
+
+//@ts-ignore
+export const trycatch: trycatch = async (callback: any) => {
     try {
-        return [callback(), _null];
+        const result = callback();
+        if (_instanceof(result, Promise)) return await result.then(res => [res, _null]);
+        return [result, _null];
     } catch (err) {
         return [_null, _instanceof(err, Error) ? err : new Error(_JSON_stringify(err))];
     }
@@ -114,17 +123,30 @@ export const trycatch = <D>(callback: () => D): Result<D, Error> => {
 
 export const uppercase = (str: string, start?: number, end?: number) => `${slice(str, 0, start)}${slice(str, start, end).toUpperCase()}${end ? slice(str, end) : ''}`
 const _URL = URL;
-export const toURL = (path: string | URL) => {
+export const toURL = (path: string | URL, base = globalThis.origin ?? 'http://localhost') => {
     if (_instanceof(path, _URL)) return path;
-    return new URL(path, globalThis.origin ?? 'http://localhost')
+    return new URL(path, base)
 }
 
 // object member compare
-export const isEqual = <T extends Object>(target: T, reference: Record<keyof T, any>, props?: (keyof T)[]) => {
+export const isEqual = <T extends Object>(target: T, reference: any, props?: (keyof T)[]) => {
+    const propsSet = props ? new Set(props) : _null;
     for (let [ key, value ] of _Object_entries(target)) {
-        if (props && !props.includes(key as any)) continue;
-        if (reference[key as keyof T] === value) continue;
-        else return false;
+        if (propsSet && !propsSet.has(key as any)) continue;
+        const targetValue = reference[key as keyof T];
+        if (targetValue !== value) {
+            if (isNull(targetValue) || isNull(value)) return false;
+            if (Number.isNaN(targetValue) && Number.isNaN(value)) continue;
+            if (isObject(targetValue) && isObject(value)) {
+                if (isArray(value) && isArray(targetValue)) {
+                    if (value.length !== targetValue.length) return false;
+                    
+                }
+                if (isEqual(value, targetValue)) continue;
+                else return false
+            }
+            return false;
+        }
     }
     return true
 }

package/packages/utils/src/structure/UID.ts

@@ -13,7 +13,7 @@ export class UID {
 
     static persistInProto(proto: Proto, key: string, options?: RandomIdOptions) {
         const id = UID.generate(key, options);
-        proto.ondispose(() => UID.map.get(key)?.delete(id))
+        proto.listen('dispose', () => UID.map.get(key)?.delete(id))
         return id;
     }
 }