amateras 0.5.0 → 0.7.0

package/packages/ui/node/Tabs.ts

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,21 @@
+{
+    "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

@@ -0,0 +1,17 @@
+{
+    "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/{src → packages/utils/src}/global.ts

@@ -1,31 +1,25 @@
-import type { $Element } from '#node/$Element';
-import type { $Node } from '#node/$Node';
-import * as core from '#core';
-import type { Signal } from '#structure/Signal';
-
 declare global {
-    export import $ = core.$;
     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 $Parameter<T> = T | undefined | Signal<T> | Signal<T | undefined>
+    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 N 
-            ? Acc 
+        Acc['length'] extends 500
+        ?   T[]
+        :   Acc['length'] extends N
+            ? Acc
             : Repeat<T, N, [...Acc, T]>;
     type Prettify<T> = {
         [K in keyof T]: T[K];
     } & {};
-    interface Node {
-        readonly $: $Node
-    }
-    interface Element {
-        readonly $: $Element
-    }
+    type Narrow<T> = T extends boolean ? boolean : T;
 }

package/packages/utils/src/index.ts

@@ -0,0 +1,90 @@
+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) : ''}`

package/tsconfig.json

@@ -25,5 +25,5 @@
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
   },
-  "exclude": ["dist"]
+  "exclude": ["deprecated"]
 }

package/ext/css/package.json

@@ -1,9 +0,0 @@
-{
-    "name": "@amateras/css",
-    "peerDependencies": {
-        "amateras": "../../"
-    },
-    "imports": {
-      "#structure/*": "./src/structure/*.ts"
-    }
-}

package/ext/css/src/structure/$CSSVariable.ts

@@ -1,12 +0,0 @@
-export class $CSSVariable<V = string> {
-    key: string;
-    value: V;
-    constructor(key: string, value: V) {
-        this.key = key;
-        this.value = value;
-    }
-
-    toString() {
-        return `var(--${this.key})`
-    }
-}

package/ext/html/node/$Canvas.ts

@@ -1,16 +0,0 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
-
-export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
-    constructor() {
-        super('canvas')
-    }
-}
-
-export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {}
-
-assignHelper(HTMLCanvasElement, $Canvas, 'canvas');
-
-declare module '#core' {
-    export function $(nodeName: 'canvas'): $Canvas
-}

package/ext/i18n/package.json

@@ -1,10 +0,0 @@
-{
-    "name": "@amateras/i18n",
-    "peerDependencies": {
-        "amateras": "../../"
-    },
-    "imports": {
-      "#structure/*": "./src/structure/*.ts",
-      "#node/*": "./src/node/*.ts"
-    }
-}

package/ext/i18n/src/index.ts

@@ -1,54 +0,0 @@
-import { _Array_from, _instanceof, _Object_assign } from "amateras/lib/native"
-import { $ } from "amateras/core"
-import { I18n } from "#structure/I18n"
-import type { I18nText as _I18nText, I18nTextOptions } from "#node/I18nText";
-import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
-
-_Object_assign($, {
-    i18n(defaultLocale: string) {
-        const i18n = new I18n(defaultLocale);
-        const i18nFn = (key: string, options?: I18nTextOptions) => i18n.translate(key, options);
-        _Object_assign(i18nFn, { 
-            i18n,
-            locale(locale: string) {
-                if (!arguments.length) return i18n.locale();
-                i18n.locale(locale);
-                return this;
-            },
-            add(lang: string, context: I18nDictionaryContext | I18nDictionaryContextImporter) {
-                i18n.map.set(lang, new I18nDictionary(context));
-                return this;
-            },
-            delete(lang: string) {
-                i18n.map.delete(lang);
-                return this;
-            }
-        })
-        return i18nFn
-    }
-})
-
-type ResolvedAsyncDictionary<F extends I18nDictionaryContextImporter> = Awaited<ReturnType<F>>['default'];
-
-type DeepKeys<T> = T extends I18nDictionaryContext
-  ? {
-      [K in keyof T]: K extends string
-        ? K extends '_' ? never : `${K}` | `${K}.${DeepKeys<T[K]>}`
-        : never;
-    }[keyof T]
-  : never;
-
-declare module "amateras/core" {
-    export namespace $ {
-        export interface I18nFunction<D extends I18nDictionaryContext = {}> {
-            (path: DeepKeys<D>, ...args: any[]): I18nText;
-            i18n: I18n;
-            locale(): string;
-            locale(lang?: $Parameter<string>): this;
-            add<F extends I18nDictionaryContext | I18nDictionaryContextImporter>(lang: string, dictionary: F): I18nFunction<D | (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>;
-            delete(lang: string): this;
-        }
-        export function i18n(defaultLocale: string): I18nFunction;
-        export type I18nText = _I18nText;
-    }
-}

package/ext/i18n/src/node/I18nText.ts

@@ -1,35 +0,0 @@
-import { _Array_from, isUndefined } from "amateras/lib/native";
-import { $HTMLElement } from "amateras/node/$HTMLElement";
-import type { I18n } from "#structure/I18n";
-
-export class I18nText extends $HTMLElement<HTMLElement, { i18nupdate: Event }> {
-    i18n: I18n;
-    key: string;
-    options: I18nTextOptions | undefined;
-    constructor(i18n: I18n, key: string, options?: I18nTextOptions) {
-        super('text');
-        this.i18n = i18n;
-        this.key = key;
-        this.options = options;
-        i18n.locale$.signal.subscribe(() => this.update())
-        this.update();
-    }
-    
-    async update() {
-        update: {
-            const {key, i18n} = this;
-            const dictionary = i18n.dictionary();
-            if (!dictionary) {this.content(key); break update}
-            const target = await dictionary.find(key);
-            if (isUndefined(target)) break update;
-            const snippets = target.split(/\$[a-zA-Z0-9_]+\$/);
-            if (snippets.length === 1 || !this.options) {this.content(target); break update}
-            const matches = target.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
-            this.content(snippets.map(text => [text, this.options?.[matches.next().value?.at(2)!] ?? null]));
-        }
-        this.dispatchEvent(new Event('i18nupdate'));
-        return this;
-    }
-}
-
-export type I18nTextOptions = {[key: string]: any}

package/ext/idb/package.json

@@ -1,13 +0,0 @@
-{
-    "name": "@amateras/idb",
-    "peerDependencies": {
-        "amateras": "../../"
-    },
-    "imports": {
-      "#structure/*": "./src/structure/*.ts",
-      "#lib/*": "./src/lib/*.ts"
-    },
-    "exports": {
-      "./core": "./src/core.ts"
-    }
-}