amateras 0.7.3 → 0.10.0

package/packages/ui/node/Modal.ts

@@ -1,45 +0,0 @@
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-import { forEach, isNull } from "@amateras/utils";
-const MODAL = 'modal';
-const MODAL_CONTENT = 'modal-content'
-
-forEach([
-    `${MODAL}{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;height:100%;width:100%;background:#00000050}`,
-    `${MODAL_CONTENT}{display:block;}`
-], $.style)
-export class Modal extends $HTMLElement {
-    name?: string;
-    constructor(name?: string) {
-        super(MODAL);
-        this.name = name;
-        if (name) 
-            $(window).on('routeopen', e => {
-                const url = new URL(location.href);
-                const param = url.searchParams.get(name);
-                if (isNull(param)) return this.close();
-                this.open();
-            })
-    }
-
-    open() {
-        $(document.body).insert(this);
-        this.once('click', e => {
-            if ($(e) === $(e.target)) {
-                if (!this.name) this.close();
-                else history.back();
-            }
-        })
-        return this;
-    }
-
-    close() {
-        this.remove();
-        return this;
-    }
-}
-
-export class ModalContent extends $HTMLElement {
-    constructor() {
-        super(MODAL_CONTENT);
-    }
-}

package/packages/ui/node/Table.ts

@@ -1,43 +0,0 @@
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-
-export class Table extends $HTMLElement {
-    constructor() {
-        super('table');
-    }
-}
-
-export class TableHeader extends $HTMLElement {
-    constructor() {
-        super('thead')
-    }
-}
-
-export class TableBody extends $HTMLElement {
-    constructor() {
-        super('tbody')
-    }
-}
-
-export class TableRow extends $HTMLElement {
-    constructor() {
-        super('tr')
-    }
-}
-
-export class TableHead extends $HTMLElement {
-    constructor() {
-        super('th')
-    }
-}
-
-export class TableCell extends $HTMLElement {
-    constructor() {
-        super('td')
-    }
-}
-
-export class TableFooter extends $HTMLElement {
-    constructor() {
-        super('tfoot')
-    }
-}

package/packages/ui/node/Tabs.ts

@@ -1,129 +0,0 @@
-import { chain } from "@amateras/core/lib/chain";
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-import type { $Node } from "@amateras/core/node/$Node";
-import { _Array_from, _instanceof, forEach, isUndefined } from "@amateras/utils";
-
-const TAB = 'tab';
-const TAB_CONTENT = 'tab-content';
-const TAB_TRIGGER = 'tab-trigger';
-const TAB_CONTAINER = 'tab-container';
-const TAB_LIST = 'tab-list';
-
-const DISPLAY_BLOCK = 'display:block'
-
-forEach([
-    `${TAB}{${DISPLAY_BLOCK}}`,
-    `${TAB_CONTENT}{${DISPLAY_BLOCK}}`,
-    `${TAB_LIST}{${DISPLAY_BLOCK}}`,
-    `${TAB_CONTAINER}{${DISPLAY_BLOCK}}`,
-    `${TAB_TRIGGER}{cursor:pointer}`
-], $.style)
-
-export class Tabs extends $HTMLElement {
-    #value: null | string = null;
-    currentContent: null | TabsContent = null;
-    $container: null | TabsContainer = null;
-    $list: null | TabsList = null;
-    constructor() {
-        super(TAB);
-    }
-
-    value(): string | null;
-    value(value: string | undefined): this;
-    value(value?: string) {
-        return chain(this, arguments, () => this.#value, value, value => {
-            this.#value = value;
-            this.$container?.content(this.$container.contentMap.get(value));
-            this.$list?.check();
-        })
-    }
-
-    mounted($parent: $Node): void {
-        this.$list?.check();
-    }
-}
-
-export class TabsContainer extends $HTMLElement {
-    $tabs?: Tabs;
-    contentMap = new Map<string, TabsContent>();
-    constructor($tabs?: Tabs) {
-        super(TAB_CONTAINER);
-        this.$tabs = $tabs;
-    }
-
-    mounted($parent: $Node) {
-        if (_instanceof($parent, Tabs)) this.$tabs = $parent;
-        if (this.$tabs) {
-            this.$tabs.$container = this;
-            this.content(this.contentMap.get(this.$tabs.value() ?? ''))
-        }
-        return this;
-    }
-}
-
-export class TabsContent extends $HTMLElement {
-    #value: string;
-    $container: null | TabsContainer = null;
-    constructor(value: string) {
-        super(TAB_CONTENT);
-        this.#value = value
-    }
-
-    value(): string;
-    value(value: string): this;
-    value(value?: string) {
-        return chain(this, arguments, () => this.#value, value, value => {
-            this.#value = value; 
-            this.$container?.contentMap.set(value, this).delete(this.#value ?? '')
-        })
-    }
-
-    mounted($parent: $Node) {
-        if (!_instanceof($parent, TabsContainer)) return this;
-        if ($parent && this.#value) {
-            this.$container = $parent;
-            $parent.contentMap.set(this.#value, this);
-        }
-        return this;
-    }
-}
-
-export class TabsList extends $HTMLElement {
-    $tabs?: null | Tabs = null;
-    triggers = new Map<string, TabsTrigger>();
-    constructor($tabs?: Tabs) {
-        super(TAB_LIST);
-        this.$tabs = $tabs;
-        this.on('click', _ => this.check())
-    }
-
-    check() {
-        this.triggers.forEach($trigger => $trigger.attr({selected: $trigger.value() === this.$tabs?.value() ? '' : null}))
-        return this;
-    }
-
-    mounted($parent: $Node): this {
-        if (_instanceof($parent, Tabs)) this.$tabs = $parent, $parent.$list = this;
-        if (this.$tabs) forEach(_Array_from(this.childNodes), child => $(child).is(TabsTrigger)?.use($child => {
-            this.triggers.set($child.value(), $child);
-            $child.$tabs = this.$tabs;
-        }));
-        return this;
-    }
-}
-
-export class TabsTrigger extends $HTMLElement {
-    #value: string;
-    $tabs?: null | Tabs = null;
-    constructor(value: string) {
-        super(TAB_TRIGGER);
-        this.#value = value;
-        this.on('click', _ => this.$tabs?.value(this.#value ?? undefined))
-    }
-
-    value(): string;
-    value(value: string): this;
-    value(value?: string) {
-        return chain(this, arguments, () => this.#value, value, value => this.#value = value)
-    }
-}

package/packages/ui/node/Toast.ts

@@ -1,16 +0,0 @@
-import { _document } from "@amateras/core/env";
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-
-$.style('toast{position:absolute}')
-
-export class Toast extends $HTMLElement {
-    constructor() {
-        super('toast');
-    }
-
-    popup(duration = 3000) {
-        $(_document.body).insert(this);
-        setTimeout(() => this.remove(), duration)
-        return this;
-    }
-}

package/packages/ui/node/Waterfall.ts

@@ -1,94 +0,0 @@
-import { onclient, onserver } from "@amateras/core/env";
-import { chain } from "@amateras/core/lib/chain";
-import type { $Element } from "@amateras/core/node/$Element";
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-import { $Virtual } from "@amateras/core/node/$Virtual";
-import { _Array_from, _instanceof, forEach } from "@amateras/utils";
-
-const getRect = (el: $Element) => el.getBoundingClientRect();
-const px = (value: number) => `${value}px`;
-$.style(`waterfall{display:block;position:relative}`)
-
-export class Waterfall extends $Virtual {
-    #column: number | null = null;
-    #columnWidth: number = 200;
-    #mode: WaterfallMode = 'fill';
-    #gap = 0;
-    #width = 0;
-    constructor() {
-        super('waterfall');
-        onclient(() => {
-            new ResizeObserver(_ => this.inDOM() && this.#width !== getRect(this).width && (this.dispatchEvent(new Event('resize', {cancelable: true})) && this.layout())).observe(this.node);
-        })
-    }
-
-    mode(): WaterfallMode;
-    mode(mode: $Parameter<'fill' | 'fixed'>): this;
-    mode(mode?: $Parameter<'fill' | 'fixed'>) {
-        return chain(this, arguments, () => this.#mode, mode, value => this.#mode = value);
-    }
-
-    column(): number | null;
-    column(column: $Parameter<number | null>): this;
-    column(column?: $Parameter<number | null>) {
-        return chain(this, arguments, () => this.#column, column, value => this.#column = value);
-    }
-
-    columnWidth(): number
-    columnWidth(width: $Parameter<number>): this
-    columnWidth(width?: $Parameter<number>) {
-        return chain(this, arguments, () => this.#columnWidth, width, value => this.#columnWidth = value) 
-    }
-
-    gap(): number;
-    gap(gap: $Parameter<number>): this;
-    gap(gap?: $Parameter<number>) {
-        return chain(this, arguments, () => this.#gap, gap, value => this.#gap = value);
-    }
-
-    layout() {
-        if (onserver()) return;
-        const items = _Array_from(this.nodes).map(item => item);
-        const { width } = getRect(this);
-        this.#width = width;
-        const gap = this.#gap;
-        const columnCount = (() => {
-            if (this.#column) return this.#column;
-            const colCount = Math.floor(width / this.#columnWidth) || 1;
-            return ((colCount - 1) * gap) + this.#columnWidth * colCount > width ? colCount - 1 || 1 : colCount;
-        })()
-        const maxColumnWidth = (width - ((columnCount - 1) * gap)) / columnCount
-        const columnWidth = this.#mode === 'fill' ? maxColumnWidth : this.#columnWidth;
-        const padding = (width - columnWidth * columnCount - gap * (columnCount - 1)) / 2;
-        const columns = _Array_from({length: columnCount}).map((_, i) => ({ i, h: 0, x: i * (columnWidth + gap) + padding }))
-        const getColumnByHeight = (i: number) => columns.sort((a, b) => a.h - b.h ? a.h - b.h : a.i - b.i).at(i) as typeof columns[number];
-        forEach(items, item => {
-            if (!_instanceof(item, $HTMLElement)) return;
-            const { height, width } = item.attr();
-            const shortestSection = getColumnByHeight(0);
-            item.style({
-                position: 'absolute',
-                top: px(shortestSection.h), 
-                left: px(shortestSection.x), 
-                width: px(columnWidth),
-            });
-            if (width && height) {
-                // get ratio from attributes and calculate item's height
-                let itemHeight = columnWidth / (+width / +height);
-                item.style({ height: px(itemHeight) })
-                shortestSection.h += +itemHeight + gap;
-            } else {
-                item.style({ visibility: 'hidden', height: '' })
-                if (this.hiddenNodes.has(item)) this.show(item).render().hide(item);
-                let itemHeight = getRect(item).height;
-                item.style({ visibility: '', height: px(itemHeight) })
-                shortestSection.h += +itemHeight + gap;
-            }
-        })
-        this.style({ height: px(getColumnByHeight(-1).h) });
-        this.dispatchEvent(new Event('layout'))
-        return this;
-    }
-}
-
-export type WaterfallMode = 'fill' | 'fixed'

package/packages/ui/package.json

@@ -1,21 +0,0 @@
-{
-    "name": "@amateras/ui",
-    "peerDependencies": {
-      "@amateras/core": "workspace:*",
-      "@amateras/html": "workspace:*",
-      "@amateras/utils": "workspace:*"
-    },
-    "imports": {
-      "#structure/*": "./src/structure/*.ts",
-      "#lib/*": "./src/lib/*.ts",
-      "#node/*": "./src/node/*.ts"
-    },
-    "exports": {
-      "./structure/*": "./src/structure/*.ts",
-      "./lib/*": "./src/lib/*.ts",
-      "./node/*": "./src/node/*.ts",
-      "./waterfall": "./node/Waterfall.ts",
-      "./tabs": "./node/Tabs.ts",
-      "./virtual-scroll": "./lib/VirtualScroll.ts"
-    }
-}

package/packages/utils/package.json

@@ -1,17 +0,0 @@
-{
-    "name": "@amateras/utils",
-    "peerDependencies": {
-        "@amateras/core": "workspace:*"
-    },
-    "imports": {
-      "#structure/*": "./src/structure/*.ts",
-      "#lib/*": "./src/lib/*.ts",
-      "#node/*": "./src/node/*.ts"
-    },
-    "exports": {
-      ".": "./src/index.ts",
-      "./structure/*": "./src/structure/*.ts",
-      "./lib/*": "./src/lib/*.ts",
-      "./node/*": "./src/node/*.ts"
-    }
-}

package/packages/utils/src/global.ts

@@ -1,25 +0,0 @@
-declare global {
-    type Nullish = null | undefined;
-    type OrArray<T> = T | T[];
-    type OrMatrix<T> = T | OrMatrix<T>[];
-    type OrPromise<T> = T | Promise<T>;
-    type OrNullish<T> = T | Nullish;
-    type Constructor<T> = { new (...args: any[]): T }
-    type Mutable<T> = {
-        -readonly [P in keyof T]: T[P];
-    }
-    type AsyncFunction<T> = () => Promise<T>;
-    type Ok<D> = [data: D, err: null];
-    type Err<E> = [data: null, err: E]
-    type Result<D, E> = Ok<D> | Err<E>
-    type Repeat<T, N extends number, Acc extends T[] = []> = 
-        Acc['length'] extends 500
-        ?   T[]
-        :   Acc['length'] extends N
-            ? Acc
-            : Repeat<T, N, [...Acc, T]>;
-    type Prettify<T> = {
-        [K in keyof T]: T[K];
-    } & {};
-    type Narrow<T> = T extends boolean ? boolean : T;
-}

package/packages/utils/src/index.ts

@@ -1,90 +0,0 @@
-import './global';
-
-// Value
-export const _null = null;
-export const _undefined = undefined;
-// Object
-export const _Object_fromEntries = Object.fromEntries;
-export const _Object_entries = Object.entries;
-export const _Object_assign = Object.assign;
-export const _Object_values = Object.values;
-export const _Object_defineProperty = Object.defineProperty;
-export const _Object_getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
-// Array
-export const _Array_from = Array.from;
-interface forEach {
-    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => Promise<void>): Promise<void>;
-    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => void): void;
-    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => Promise<void>): void;
-    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => void): void;
-    <K, V>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => Promise<void>): void;
-    <K, V>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => void): void;
-    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => Promise<void>): void;
-    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => void): void;
-}
-export const forEach: forEach = async (arr: any, fn: any) => {
-    let i = 0;
-    let isAsync = isAsyncFunction(fn);
-    let handle = async () => { for (let item of arr) { isAsync ? await fn(item, i, arr) : fn(item, i, arr); i++; } }
-    return isAsync ? new _Promise<void>(resolve => handle().then(resolve)) : handle();
-};
-// export const forEach: forEach = (arr: any, fn: any) => arr.forEach(fn);
-// type check
-export const _typeof = (target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') => typeof target === type;
-export const equal = <T, V extends T>(target: T, ...args: V[]): target is V => !!args.find(a => a === target);
-export const isString = (target: any): target is string => _typeof(target, 'string');
-export const isBoolean = (target: any): target is boolean => _typeof(target, 'boolean');
-export const isNumber = (target: any): target is number => _typeof(target, 'number');
-export const isObject = (target: any): target is object => _typeof(target, 'object');
-export const isFunction = (target: any): target is Function => _typeof(target, 'function');
-export const isAsyncFunction = (target: any): target is AsyncFunction<Awaited<ReturnType<typeof target>>> => _instanceof(target, (async () => 0).constructor as any)
-export const isUndefined = (target: any): target is undefined => target === undefined;
-export const isNull = (target: any): target is null => target === _null;
-export const isArray = Array.isArray;
-export const _instanceof = <T extends (abstract new (...args: any[]) => any)[]>(target: any, ...instance: T): target is InstanceType<T[number]> => !!instance.find(i => target instanceof i);
-// JSON
-export const _JSON_stringify = JSON.stringify;
-export const _JSON_parse = JSON.parse;
-// String
-export const startsWith = (target: string, ...str: string[]) => !!str.find(s => target.startsWith(s));
-// String & Array
-interface slice {
-    (target: string, start?: number, end?: number): string;
-    <T>(target: Array<T>, start?: number, end?: number): T[];
-}
-export const slice: slice = (target: any, start?: number, end?: number) => target.slice(start, end);
-// Function
-export const _bind = <T extends Function>(target: T, obj: Object): T => target.bind(obj);
-// Promise
-export const _Promise = Promise;
-
-// utils function
-export const debounce = () => {
-    let timer: number;
-    return (fn: Function, timeout: number) => {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(fn, timeout);
-    }
-}
-
-const LOWER = 'abcdefghijklmnopqrstuvwxyz';
-const UPPER = LOWER.toUpperCase();
-export const randomId = (options?: {length?: number, lettercase?: 'any' | 'lower' | 'upper'}): string => { 
-    options = {length: 5, lettercase: 'any', ...options};
-    const char = options.lettercase === 'any' ? LOWER + UPPER : options.lettercase === 'lower' ? LOWER : UPPER;
-    return _Array_from({length: options.length as number}, (_, i) => char[Math.round(Math.random() * char.length)]).join(''); 
-}
-
-export const sleep = async (ms: number) => new _Promise(resolve => setTimeout(resolve, ms));
-
-export const toArray = <T>(item: OrArray<T>): T[] => _instanceof(item, Array) ? item : [item];
-
-export const trycatch = <D>(callback: () => D): Result<D, Error> => {
-    try {
-        return [callback(), _null];
-    } catch (err) {
-        return [_null, _instanceof(err, Error) ? err : new Error(_JSON_stringify(err))];
-    }
-}
-
-export const uppercase = (str: string, start?: number, end?: number) => `${slice(str, 0, start)}${slice(str, start, end).toUpperCase()}${end ? slice(str, end) : ''}`