amateras 0.2.0 → 0.4.0

package/ext/ui/node/Tabs.ts

@@ -0,0 +1,114 @@
+import { _instanceof, isUndefined } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import type { $Node } from "amateras/node/$Node";
+
+$.style('tabs,tabs-container,tabs-list,tabs-content{display: block}')
+
+export class Tabs extends $HTMLElement {
+    #value: null | string = null;
+    currentContent: null | TabsContent = null;
+    $container: null | TabsContainer = null;
+    $list: null | TabsList = null;
+    constructor() {
+        super('tabs');
+    }
+
+    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();
+        })
+    }
+}
+
+export class TabsContainer extends $HTMLElement {
+    $tabs?: Tabs;
+    contentMap = new Map<string, TabsContent>();
+    constructor($tabs?: Tabs) {
+        super('tabs-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('tabs-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('tabs-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) this.childNodes.forEach(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('tabs-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)
+    }
+}
+
+function chain<T, R, V>(_this: T, args: IArguments, get: () => R, value: V, set: (value: Exclude<V, undefined>) => any) {
+    return !args.length ? get() : isUndefined(value) ? _this : (set(value as any), _this);
+}

package/ext/ui/node/Toast.ts

@@ -0,0 +1,16 @@
+import { _document } from "../../../src/lib/env";
+import { $HTMLElement } from "../../../src/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/ext/ui/node/Waterfall.ts

@@ -0,0 +1,73 @@
+import { _Array_from, _instanceof, equal, forEach, isNumber } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { $Element } from "amateras/node/$Element";
+import { $Virtual } from "amateras/node/$Virtual";
+
+const getRect = (el: $Element) => el.getBoundingClientRect();
+const px = (value: number) => `${value}px`;
+$.style(`waterfall { display: block; position: relative }`)
+
+export class Waterfall extends $Virtual {
+    #column = 1;
+    #gap = 0;
+    #width = 0;
+    constructor() {
+        super('waterfall');
+        new ResizeObserver(_ => this.inDOM() && this.#width !== getRect(this).width && (this.dispatchEvent(new Event('resize', {cancelable: true})) && this.layout())).observe(this.node);
+    }
+
+    column(): number;
+    column(column: $Parameter<number>): this;
+    column(column?: $Parameter<number>) {
+        if (!arguments.length) return this.#column;
+        if (isNumber(column)) this.#column = column;
+        return this;
+    }
+
+    gap(): number;
+    gap(gap: $Parameter<number>): this;
+    gap(gap?: $Parameter<number>) {
+        if (!arguments.length) return this.#gap;
+        if (isNumber(gap)) this.#gap = gap;
+        return this;
+    }
+
+    layout() {
+        const items = _Array_from(this.nodes).map(item => item);
+        const { width } = getRect(this);
+        this.#width = width;
+        const columnCount = this.#column;
+        const gap = this.#gap;
+        const columnWidth = ((width - ((columnCount - 1) * gap)) / columnCount);
+        const columns = _Array_from({length: columnCount}).map((_, i) => ({ i, h: 0, x: i * (columnWidth + gap) }))
+        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;
+            item.attr();
+            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.render();
+        this.style({ height: px(getColumnByHeight(-1).h) });
+        this.dispatchEvent(new Event('layout'))
+        return this;
+    }
+}

package/ext/ui/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@amateras/ui",
+    "peerDependencies": {
+        "amateras": "../../"
+    },
+    "exports": {
+        "./waterfall": "./node/Waterfall.ts",
+        "./tabs": "./node/Tabs.ts",
+        "./virtual-scroll": "./lib/VirtualScroll.ts"
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -25,20 +25,19 @@
   "exports": {
     ".": "./src/index.ts",
     "./core": "./src/core.ts",
-    "./node": "./src/node/node.ts",
     "./node/*": "./src/node/*.ts",
     "./lib/*": "./src/lib/*.ts",
     "./structure/*": "./src/structure/*.ts",
     "./html": "./ext/html/html.ts",
     "./html/*": "./ext/html/node/*.ts",
     "./css": "./ext/css/src/index.ts",
+    "./css/colors": "./ext/css/src/lib/colors.ts",
+    "./css/color/*": "./ext/css/src/lib/colors/*.ts",
     "./router": "./ext/router/index.ts",
-    "./ssr": "./ext/ssr/index.ts"
+    "./ssr": "./ext/ssr/index.ts",
+    "./i18n": "./ext/i18n/src/index.ts"
   },
   "workspaces": [
     "./ext/*"
-  ],
-  "peerDependencies": {
-    "@amateras/css": "./ext/css"
-  }
+  ]
 }

package/src/core.ts

@@ -1,41 +1,58 @@
 import './global';
+import './node';
 import { Signal } from "#structure/Signal";
 import { $Element, type $Event } from "#node/$Element";
-import { $Node, type $NodeContentTypes } from '#node/$Node';
-import '#node/node';
-import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty } from '#lib/native';
-import type { $HTMLElement } from '#node/$HTMLElement';
+import { $Node, type $NodeContentResolver, type $NodeContentTypes } from '#node/$Node';
+import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, isUndefined } from '#lib/native';
+import { $HTMLElement } from '#node/$HTMLElement';
+import { _document } from '#lib/env';
 
 const nodeNameMap: {[key: string]: Constructor<$Node>} = {}
+const _stylesheet = new CSSStyleSheet();
 
-export function $<F extends (...args: any[]) => $Node>(fn: F, ...args: Parameters<F>): ReturnType<F>;
-export function $<C extends $NodeContentTypes | undefined | void, F extends () => C, P extends Parameters<F>>(fn: F, ...args: any[]): C;
-export function $<N extends $Node, T extends Constructor<N>, P extends ConstructorParameters<T>>(construct: T, ...args: P): N;
+export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>, N extends number>(number: N, fn: F, ...args: Parameters<F>): Repeat<ReturnType<F>, N>;
+export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>>(fn: F, ...args: Parameters<F>): ReturnType<F>;
+export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>, N extends number>(number: N, construct: T, ...args: P): Repeat<InstanceType<T>, N>;
+export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>>(construct: T, ...args: P): InstanceType<T>;
+export function $(nodes: NodeListOf<Node | ChildNode>): $Node[];
 export function $<N extends $Node>($node: N, ...args: any[]): N;
+export function $<N extends $Node>($node: N | null | undefined, ...args: any[]): N | null | undefined;
+export function $<H extends HTMLElement>(element: H, ...args: any[]): $HTMLElement<H>;
+export function $<H extends HTMLElement>(element: H | null | undefined, ...args: any[]): $HTMLElement<H> | null | undefined;
 export function $<E extends Element>(element: E, ...args: any[]): $Element<E>;
+export function $<E extends Element>(element: E | null | undefined, ...args: any[]): $Element<E> | null | undefined;
+export function $<N extends Node | EventTarget>(node: N, ...args: any[]): $Node;
+export function $<N extends Node | EventTarget>(node: N | null | undefined, ...args: any[]): $Node | null | undefined;
 export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
+export function $<K extends keyof HTMLElementTagNameMap, N extends number>(number: N, tagname: K): Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
 export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
-export function $<H extends HTMLElement>(tagname: $Event<H>): $HTMLElement<H>;
-export function $<E extends Element>(tagname: $Event<E>): $Element<E>;
+export function $<Ev extends $Event<$Element, Event>>(event: Ev): Ev['currentTarget']['$'];
+export function $<N extends number>(number: N, tagname: string): Repeat<$HTMLElement<HTMLElement>, N>;
 export function $(tagname: string): $HTMLElement<HTMLElement>
-export function $(resolver: string | Element | $Node | Function | TemplateStringsArray | Event, ...args: any[]) {
+export function $(resolver: string | number | null | undefined | Element | HTMLElement | $Node | Function | TemplateStringsArray | Event | NodeListOf<Node | ChildNode>, ...args: any[]) {
+    if (isNull(resolver) || isUndefined(resolver)) return null;
     if (_instanceof(resolver, $Node)) return resolver;
     if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
     if (isFunction(resolver)) 
-        if (resolver.prototype?.constructor) return resolver.prototype.constructor(...args); 
+        if (resolver.prototype?.constructor) return new resolver.prototype.constructor(...args); 
         else return resolver(...args);
     if (resolver instanceof Array) {
         const iterate = args.values();
         return resolver.map(str => [str ?? undefined, iterate.next().value]).flat().filter(item => item);
     }
     if (_instanceof(resolver, Node) && _instanceof(resolver.$, $Node)) return resolver.$;
-    if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element)
-    return new $Element(resolver);
+    if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element);
+    if (isNumber(resolver)) return _Array_from({length: resolver}).map(_ => $(args[0], ...args.slice(1)));
+    if (_instanceof(resolver, HTMLElement)) return new $HTMLElement(resolver);
+    if (_instanceof(resolver, Element)) return new $Element(resolver);
+    if (_instanceof(resolver, NodeList)) return _Array_from(resolver).map($)
+    return new $HTMLElement(resolver);
 }
 
 export namespace $ {
-    export const stylesheet = new CSSStyleSheet();
-    document?.adoptedStyleSheets.push(stylesheet);
+    export const stylesheet = _stylesheet;
+    _document.adoptedStyleSheets.push(_stylesheet);
+    export const style = _stylesheet.insertRule.bind(_stylesheet);
     type SignalProcess<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
     export type SignalFunction<T> = {signal: Signal<T>, set: (newValue: T | ((oldValue: T) => T)) => SignalFunction<T>} & (() => T) & SignalProcess<T>;
     export function signal<T>(value: T): SignalFunction<T>
@@ -59,7 +76,7 @@ export namespace $ {
     export type ComputeFunction<T> = ({(): T}) & { signal: Signal<T> };
     export function compute<T>(process: () => T) {
         let subscribed = false;
-        const signalFn: SignalFunction<any> = $.signal(null);
+        const signalFn: SignalFunction<any> = signal(null);
         function computeFn() {
             if (!subscribed) return signalFn.set(subscribe())();
             else return signalFn.set(process())();
@@ -74,7 +91,7 @@ export namespace $ {
             subscribed = true;
             return result;
         }
-        _Object_defineProperty(computeFn, 'signal', { value: signalFn.signal });
+        _Object_assign(computeFn, { signal: signalFn.signal });
         return computeFn as ComputeFunction<T>
     }
 
@@ -82,11 +99,11 @@ export namespace $ {
     export function assign(nodeName: string, $node: Constructor<$Node>): void;
     export function assign(resolver: string | [nodeName: string, $node: Constructor<$Node>][], $node?: Constructor<$Node>) {
         if (isString(resolver)) $node && (nodeNameMap[resolver] = $node);
-        else resolver.forEach(([nodeName, $node]) => nodeNameMap[nodeName] = $node);
+        else forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
         return $;
     }
 
-    export function orArrayResolver<T>(item: OrArray<T>): T[] {
+    export function toArray<T>(item: OrArray<T>): T[] {
         return _instanceof(item, Array) ? item : [item];
     }
 

package/src/global.ts

@@ -12,6 +12,10 @@ declare global {
     type OrNullish<T> = T | Nullish;
     type Constructor<T> = { new (...args: any[]): T }
     type $Parameter<T> = T | undefined | Signal<T> | Signal<T | undefined>
+    type Repeat<T, N extends number, Acc extends T[] = []> = 
+        Acc['length'] extends N 
+            ? Acc 
+            : Repeat<T, N, [...Acc, T]>;
     type Prettify<T> = {
         [K in keyof T]: T[K];
     } & {};

package/src/lib/assign.ts

@@ -1,34 +1,34 @@
 import { Signal } from "../structure/Signal";
 import { _instanceof, _Object_defineProperty, isUndefined } from "./native";
 
-export function assign(target: any, {set, get, fn}: { 
+export const assign = (target: any, {set, get, fn}: { 
     set?: string[], 
     get?: string[], 
     fn?: string[]
-}) {
-    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => {
-        return arr?.map(prop => [type, prop]) ?? []
-    }
-    const list = [...filterAndMap('get', get), ...filterAndMap('set', set), ...filterAndMap('fn', fn)] as [string, string][];
+}) => {
+    const [GET, SET, FN] = ['get', 'set', 'fn'] as const;
+    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => arr?.map(prop => [type, prop]) ?? []
+    const list = [...filterAndMap(GET, get), ...filterAndMap(SET, set), ...filterAndMap(FN, fn)] as [string, string][];
     for (const [type, prop] of list) {
         _Object_defineProperty(target.prototype, prop, {
-            ...(type === 'get' ? {
+            ...(type === GET ? {
                 get() { return this.node[prop as any] }
             } : {
                 writable: true,
-                ...(type === 'set' ? {
+                ...(type === SET ? {
                     // set
-                    value: function (this, args: any) {
+                    value(this, args: any) {
                         if (!arguments.length) return this.node[prop];
-                        const set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
+                        let set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
                         if (_instanceof(args, Signal)) args = args.subscribe(set).value();
                         set(args)
                         return this;
                     }
                 } : {
                     // fn
-                    value: function (this, ...args : any[]) {
-                        return this.node[prop](...args) ?? this;
+                    value(this, ...args : any[]) {
+                        let result = this.node[prop](...args)
+                        return isUndefined(result) ? this : result;
                     }
                 })
             }),

package/src/lib/assignHelper.ts

@@ -2,8 +2,8 @@ import type { $Node } from "#node/$Node";
 import { assign } from "./assign";
 import { _Object_entries, _Object_getOwnPropertyDescriptors } from "./native";
 
-export function assignHelper(object: Constructor<Node>, target: Constructor<$Node>, tagname?: string) {
-    const {set, get, fn} = { set: [] as string[], get: [] as string[], fn: [] as string[] }
+export const assignHelper = (object: Constructor<EventTarget>, target: Constructor<$Node>, tagname?: string) => {
+    const [set, get, fn] = [[], [], []] as [string[], string[], string[]]
     // assign native object properties to target
     for (const [prop, value] of _Object_entries(_Object_getOwnPropertyDescriptors(object.prototype))) {
         if (prop in target.prototype) continue;

package/src/lib/chain.ts

@@ -0,0 +1,3 @@
+import { isUndefined } from "./native";
+
+export const chain = <T, R, V>(_this: T, args: IArguments, get: () => R, value: V, set: (value: Exclude<V, undefined>) => any) => !args.length ? get() : isUndefined(value) ? _this : (set(value as any), _this);

package/src/lib/debounce.ts

@@ -0,0 +1,7 @@
+export const debounce = () => {
+    let timer: ReturnType<typeof setTimeout>;
+    return (fn: Function, timeout: number) => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(fn, timeout);
+    }
+}

package/src/lib/env.ts

@@ -0,0 +1,2 @@
+// window and document
+export const _document = document;

package/src/lib/native.ts

@@ -7,28 +7,26 @@ export const _Object_defineProperty = Object.defineProperty;
 export const _Object_getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
 // Array
 export const _Array_from = Array.from;
-// typeof
-export function _typeof(target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') {
-    return typeof target === type;
-}
-export function isString(target: any): target is string {
-    return _typeof(target, 'string');
-}
-export function isNumber(target: any): target is number {
-    return _typeof(target, 'number')
-}
-export function isObject(target: any): target is object {
-    return _typeof(target, 'object')
-}
-export function isFunction(target: any): target is Function {
-    return _typeof(target, 'function')
-}
-export function isUndefined(target: any): target is undefined {
-    return _typeof(target, 'undefined')
-}
-export function isNull(target: any): target is null {
-    return target === null;
-}
-export function _instanceof<T>(target: any, instance: abstract new (...args: any[]) => T): target is T {
-    return target instanceof instance;
+export const forEach: forEach = <T>(arr: any, fn: any, thisArgs?: any) => arr.forEach(fn, thisArgs);
+// 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 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 isUndefined = (target: any): target is undefined => _typeof(target, 'undefined')
+export const isNull = (target: any): target is null => target === null;
+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));
+
+interface forEach {
+    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => any, thisArgs?: any): void;
+    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => any, thisArgs?: any): void;
+    <K, V>(set: Map<K, V>, fn: (value: V, key: K, index: number, map: Map<K, V>) => any, thisArgs?: any): void;
+    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => any, thisArgs?: any): void;
 }

package/src/lib/randomId.ts

@@ -2,7 +2,7 @@ import { _Array_from } from "./native";
 
 const LOWER = 'abcdefghijklmnopqrstuvwxyz';
 const UPPER = LOWER.toUpperCase();
-export function randomId(options?: {length?: number, lettercase?: 'any' | 'lower' | 'upper'}): string { 
+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) => { 

package/src/lib/sleep.ts

@@ -1,3 +1,3 @@
-export async function sleep(ms: number) {
+export const sleep = async (ms: number) => {
     return new Promise(resolve => setTimeout(resolve, ms))
 }