@gzmjs/ui-basic 0.1.0 → 0.3.0

package/dist/000-helper/attr.d.ts

@@ -0,0 +1,61 @@
+export declare function getSnakeCaseName(propName: string): string;
+/**
+ * 基于：
+ * 1 - Atribute 属性（A属性）的特性，具体请看 /try/WC/attr.html
+ * 2 - auto-accessor 装饰器的特性，具体请看  /try/ts/auto-accessor.ts
+ *
+ * 对于所有的 auto-accessor 装饰器生成的属性，属性的类型与默认值必须按如下定义：
+ * 1 - 目前支持三种类型： 整数、布尔 和 字符串。其中字符串是万金油，因为 ts 中经常用字符串来定义联合类型，如 'a' | 'b' 等。
+ * 2 - 每种数据类型都支持两种方式：
+ *      a - 与 undefined 联合，默认值是 void 0
+ *      b - 不与 undefined 联合，编译器要求必须初始化，那么不要在构造函数中初始化。因为构造函数中调用的是 set() 会导致设置 A 属性，导致 createElement() 异常。
+ * 3 - 开发组件的时候 P属性 优先使用与 undefined 的联合类型，也就不需要默认值。可以将默认值写在 get() 时，如 this.propName ?? default。
+ */
+/**
+ * @strAttr
+ * accessor propName: V = '';
+ * 或者
+ * @strAttr
+ * accessor propName: V | undefined;
+ */
+export declare function strAttr<This extends HTMLElement, V>(_: ClassAccessorDecoratorTarget<This, V>, context: ClassAccessorDecoratorContext<This, V>): {
+    get(this: This): V;
+    set(this: This, value: V): void;
+    init(this: This, value: V): V;
+};
+type BoolOrUndef = boolean | undefined;
+type BoolType = boolean | BoolOrUndef;
+/**
+ * @boolAttr
+ * accessor propName: boolean = false;
+ * 或者
+ * @boolAttr
+ * accessor propName: boolean | undefined;
+ */
+export declare function boolAttr<This extends HTMLElement, V extends BoolType>(_: ClassAccessorDecoratorTarget<This, V>, context: ClassAccessorDecoratorContext<This, V>): {
+    get(this: This): V;
+    set(this: This, value: V): void;
+    init(this: This, value: V): V;
+};
+type NumOrUndef = number | undefined;
+type NumType = number | NumOrUndef;
+/**
+ * @intAttr
+ * accessor propName: number | undefined;
+ * 或者
+ * @intAttr
+ * accessor propName: number = 12345;
+ */
+export declare function intAttr<This extends HTMLElement, V extends NumType>(_: ClassAccessorDecoratorTarget<This, V>, context: ClassAccessorDecoratorContext<This, V>): {
+    get(this: This): V;
+    set(this: This, value: V): void;
+    init(this: This, value: V): V;
+};
+type StrArrayOrUndef = string[] | undefined;
+type StrArrayType = string[] | StrArrayOrUndef;
+export declare function saAttr<This extends HTMLElement, V extends StrArrayType>(_: ClassAccessorDecoratorTarget<This, V>, context: ClassAccessorDecoratorContext<This, V>): {
+    get(this: This): V;
+    set(this: This, value: V): void;
+    init(this: This, value: V): V;
+};
+export {};

package/dist/000-helper/center.d.ts

@@ -0,0 +1,22 @@
+export declare const borders: readonly ["bottom", "top", "right", "left"];
+export type AttachBorder = typeof borders[number];
+export declare const attachBorderAttributeName = "gzm-attach-border";
+export interface TransitionPopup {
+    doTransition: boolean;
+    beforeOpenTransition?: () => void;
+    afterOpenTransition?: () => void;
+}
+export declare class CenterHelper {
+    #private;
+    constructor($tooltip: HTMLElement & TransitionPopup, $attachTo: HTMLElement, attachBorder: AttachBorder);
+    $tt: HTMLElement & TransitionPopup;
+    $attachTo: HTMLElement;
+    realBorder: AttachBorder;
+    x: number;
+    y: number;
+    marginLeft: string;
+    marginTop: string;
+    ttWidth: number;
+    ttHeight: number;
+    pos($tt?: HTMLElement & TransitionPopup): void;
+}

package/dist/000-helper/corner.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 因为 tsconfig.json erasableSyntaxOnly 所以不能使用枚举。
+ * xy
+ * 00 - 左上角 = 0
+ * 01 - 左下角 = 1
+ * 10 - 右上角 = 10
+ * 11 - 右下角 = 11
+ */
+export declare const xy: {
+    readonly leftTop: 0;
+    readonly leftBottom: 1;
+    readonly rightTop: 10;
+    readonly rightBottom: 11;
+};
+export type Corner = typeof xy[keyof typeof xy];
+export declare function isLeftCorner(c: Corner): boolean;
+export declare function isTopCorner(c: Corner): boolean;
+export declare function makeCorner(isLeft: boolean, isTop: boolean): Corner;
+export declare class CornerHelper {
+    #private;
+    constructor($popup: HTMLElement, popupCorner: Corner, $attachTo: HTMLElement, attachCorner: Corner);
+    readonly $popup: HTMLElement;
+    readonly $attachTo: HTMLElement;
+    pos(): void;
+}

package/dist/000-helper/element.d.ts

@@ -0,0 +1,30 @@
+type CustomElement = {
+    tagName: string;
+    style?: CSSStyleSheet;
+    mutableAttributes?: readonly string[];
+    /**
+     * 必须在 mutableAttributes 不为空时才有效。
+     * key 是 mutableAttributes 中的一员，value 是组件的属性名称（数组）
+     */
+    copyAttributes?: Record<string, string | string[]>;
+};
+export declare function defineElement(ele: CustomElement): (constructor: CustomElementConstructor, ctx: ClassDecoratorContext) => void;
+/**
+ * 模拟 string.replaceAll() 方法
+ */
+type ReplaceAll<Str extends string, From extends string, To extends string> = From extends "" ? Str : Str extends `${infer Prefix}${From}${infer Suffix}` ? `${Prefix}${To}${ReplaceAll<Suffix, From, To>}` : Str;
+/**
+ * 模拟 getAttributeSetHandlerName(name) 的逻辑
+ */
+type GetAttributeSetHandlerName<Name extends string> = `_${ReplaceAll<Name, '-', '_'>}_set`;
+/**
+ * 对于每一个有 mutableAttributes 的组件，都必须实现下面这个类型。
+ * 其中 T 是 typeof mutableAttributes[number]
+ * 如果同时也有 copyAttributes，那么需要排除 copyAttributes 中的属性：
+ * Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>。
+ * 050-tree.ts 就是这么做到。
+ */
+export type AttributeHandlers<T extends string> = {
+    [K in T as GetAttributeSetHandlerName<K>]: <P extends string>(nv: P | null, ov: P | null) => void;
+};
+export {};

package/dist/000-helper/helper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 防抖
+ * @param func
+ * @param wait
+ * @returns
+ */
+export declare function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait?: number): (...args: Parameters<T>) => void;
+/**
+ * 生成一个随机 ID 字符串，极大概率唯一
+ * @returns
+ */
+export declare function generateId(): string;

package/dist/000-helper/lang.d.ts

@@ -0,0 +1,93 @@
+declare const zh: {
+    readonly close: "关闭";
+    readonly true: "✔️";
+    readonly false: "❌";
+    readonly undefined: "未定义";
+    readonly default: "默认";
+    readonly valueMissing: "请填写此字段。";
+    readonly count: "计数";
+    readonly min: "最小";
+    readonly max: "最大";
+    readonly sum: "合计";
+    readonly avg: "平均";
+    readonly hide: "隐藏";
+    readonly del: "删除";
+    readonly asc: "升序";
+    readonly desc: "降序";
+    readonly ok: "确定";
+    readonly cancel: "取消";
+    readonly waiting: "正在处理中，请稍候...";
+    readonly confirming: "请确认：{0} ？";
+    readonly completed: "已完成";
+    readonly error: "错误";
+    readonly attention: "注意";
+    readonly noMenuSet: "未设置菜单！？";
+    readonly readonly: "只读";
+};
+export declare const globalTexts: {
+    zh: {
+        readonly close: "关闭";
+        readonly true: "✔️";
+        readonly false: "❌";
+        readonly undefined: "未定义";
+        readonly default: "默认";
+        readonly valueMissing: "请填写此字段。";
+        readonly count: "计数";
+        readonly min: "最小";
+        readonly max: "最大";
+        readonly sum: "合计";
+        readonly avg: "平均";
+        readonly hide: "隐藏";
+        readonly del: "删除";
+        readonly asc: "升序";
+        readonly desc: "降序";
+        readonly ok: "确定";
+        readonly cancel: "取消";
+        readonly waiting: "正在处理中，请稍候...";
+        readonly confirming: "请确认：{0} ？";
+        readonly completed: "已完成";
+        readonly error: "错误";
+        readonly attention: "注意";
+        readonly noMenuSet: "未设置菜单！？";
+        readonly readonly: "只读";
+    };
+    en: {
+        readonly close: "关闭";
+        readonly true: "✔️";
+        readonly false: "❌";
+        readonly undefined: "未定义";
+        readonly default: "默认";
+        readonly valueMissing: "请填写此字段。";
+        readonly count: "计数";
+        readonly min: "最小";
+        readonly max: "最大";
+        readonly sum: "合计";
+        readonly avg: "平均";
+        readonly hide: "隐藏";
+        readonly del: "删除";
+        readonly asc: "升序";
+        readonly desc: "降序";
+        readonly ok: "确定";
+        readonly cancel: "取消";
+        readonly waiting: "正在处理中，请稍候...";
+        readonly confirming: "请确认：{0} ？";
+        readonly completed: "已完成";
+        readonly error: "错误";
+        readonly attention: "注意";
+        readonly noMenuSet: "未设置菜单！？";
+        readonly readonly: "只读";
+    };
+};
+declare const bindHtmlElement = "bindHtmlElement";
+type BindableTextProxy = {
+    [bindHtmlElement]: <P>(this: P, $ele: HTMLElement) => P;
+};
+type IncludesCurlyZero<T extends string> = T extends `${string}{0}${string}` ? (...args: unknown[]) => string : string;
+type TextProxy<T> = {
+    [K in keyof T]: T[K] extends string ? IncludesCurlyZero<T[K]> : never;
+};
+type GlobalTextProxy = TextProxy<typeof zh>;
+type JoinedText<T extends Record<string, unknown>[]> = T extends [Record<string, infer First>, ...infer Rest] ? TextProxy<First> & JoinedText<Rest extends Record<string, unknown>[] ? Rest : []> : unknown;
+export declare function createText<T extends Record<string, unknown>[]>(this: unknown, ...txts: T): JoinedText<T> & BindableTextProxy;
+export declare const GT: GlobalTextProxy;
+export {};

package/dist/000-helper/style.d.ts

@@ -0,0 +1,27 @@
+export type Rules = {
+    [prop: string]: string;
+};
+export type Style = {
+    [selector: string]: Rules | string;
+};
+export declare function createStyleSheet(style: Style): CSSStyleSheet;
+export declare function getElementRules(tagName: string, ...ruleNames: string[]): Rules;
+/**
+ * 主要是字体的设置，应该作为网页 reset 的一部分。
+ * 不设置 :host 的字体，具体请看 style-font.md
+ * 因为此项目开发的是组件，所以用不到。
+ *
+ * 以下内容是通过 tailwind.css 获得，具体方法；
+ * 访问：/try/tailwind/test.html，在浏览器开发工具的源代码选中 /src/style.css
+ */ /**
+ * 从 dist/assets/index.css 中提取的样式。
+ * 找到其中的 @layer base，然后开始做减法。
+ * 1 - 去掉不用的伪类，如 ::file-selector-button, ::-webkit-*。
+ * 2 - 去掉具体的 tag 定义，如 hr, h1-6, button, 因为多半用不到。
+ */
+export declare const baseStyle: CSSStyleSheet;
+export declare const gzmHeader = "\n    background: var(--gzm-header-background);\n    border: var(--gzm-header-border);\n    color: var(--gzm-header-txt-color);\n";
+export declare const gzmFrame = "\n    background: var(--gzm-content-background);\n    color: var(--gzm-content-txt-color);\n    border-radius: 0.5rem;\n    border: var(--gzm-btn-border);\n    padding: 0.5rem;\n";
+export declare const utilityStyle: CSSStyleSheet;
+export declare function createTxtBtn(txt: string): HTMLButtonElement;
+export declare function isTxtBtn($btn: HTMLElement): boolean;

package/dist/000-helper/theme.d.ts

@@ -0,0 +1,7 @@
+export declare const htmlThemeAttr = "gzm-theme";
+export declare const allThemes: {
+    readonly name: string;
+    readonly label: string;
+}[];
+export declare function getCurrentTheme(): string;
+export declare function setCurrentTheme(themeName: string): boolean;

package/dist/003-accessory/badge.d.ts

@@ -0,0 +1,17 @@
+import * as ELE from '../000-helper/element';
+export declare const tagName = "GZM-BADGE";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Badge;
+    }
+}
+declare const mutableAttributes: readonly ["badge", "corner"];
+export declare class Badge extends HTMLElement implements ELE.AttributeHandlers<typeof mutableAttributes[number]> {
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    _badge_set(badge: string | null): void;
+    _corner_set(): void;
+    accessor badge: string | undefined;
+    accessor corner: boolean | undefined;
+}
+export {};

package/dist/003-accessory/close.d.ts

@@ -0,0 +1,15 @@
+import * as ELE from '../000-helper/element';
+export declare const tagName = "GZM-CLOSE-BTN";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: CloseBtn;
+    }
+}
+declare const mutableAttributes: readonly ["corner"];
+export declare class CloseBtn extends HTMLElement implements ELE.AttributeHandlers<typeof mutableAttributes[number]> {
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    _corner_set(): void;
+    accessor corner: boolean | undefined;
+}
+export {};

package/dist/003-accessory/icon.d.ts

@@ -0,0 +1,18 @@
+import * as ELE from '../000-helper/element';
+export declare const tagName = "GZM-ICON";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Icon;
+    }
+}
+declare const mutableAttributes: readonly ["icon"];
+export declare class Icon extends HTMLElement implements ELE.AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    setImg(icon: string): boolean;
+    setSvg(icon: string): boolean;
+    _icon_set(icon: string | null): void;
+    accessor icon: string | undefined;
+}
+export {};

package/dist/003-accessory/iconCache.d.ts

@@ -0,0 +1,3 @@
+export declare const iconCache: {
+    [key: string]: string | HTMLImageElement;
+};

package/dist/011-dialog/circle.d.ts

@@ -0,0 +1,24 @@
+import * as ELE from '../000-helper/element';
+export declare const tagName = "GZM-CHECK-CIRCLE";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: CheckCircle;
+    }
+}
+declare const mutableAttributes: readonly ["size"];
+/**
+ * https://www.bilibili.com/video/BV17w4m1D7xi
+ * https://devdocs.io/svg/attribute/stroke-dasharray
+ * https://devdocs.io/svg/attribute/stroke-dashoffset
+ */
+export declare class CheckCircle extends HTMLElement implements ELE.AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    connectedCallback(): void;
+    $circle?: SVGCircleElement;
+    $polyline?: SVGPolylineElement;
+    play(): Promise<unknown>;
+    accessor size: string | undefined;
+    accessor duration: number | undefined;
+    _size_set(nv: string | null): void;
+}
+export {};

package/dist/011-dialog/dialog.d.ts

@@ -0,0 +1,12 @@
+export interface DialogOptions {
+    reusable?: boolean;
+    resizable?: boolean;
+    title?: string;
+    movable?: boolean;
+    $body?: HTMLElement;
+    width?: string;
+    height?: string;
+    okHandler?: ($dlg: HTMLDialogElement) => void;
+}
+export declare function createDialog(options: DialogOptions): HTMLDialogElement;
+export declare function showDockRightModalDlg(options: DialogOptions): HTMLDialogElement;

package/dist/011-dialog/show.d.ts

@@ -0,0 +1,10 @@
+export declare function showWaiting(title: string, msg?: string): {
+    $dlg: HTMLDialogElement;
+    complete(msg?: string): Promise<void>;
+    error(e?: object | string): void;
+    alert(msg: string): void;
+    close(): void;
+    setTitle(title: string): void;
+};
+export declare function showError(errMsg: string): HTMLDialogElement;
+export declare function showAlert(msg: string): HTMLDialogElement;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from './000-helper/attr';
+export * from './000-helper/center';
+export * from './000-helper/corner';
+export * from './000-helper/element';
+export * from './000-helper/helper';
+export * from './000-helper/lang';
+export * from './000-helper/style';
+export * from './000-helper/theme';
+export { tagName as badgeTagName, Badge } from './003-accessory/badge';
+export { tagName as closeTagName, CloseBtn } from './003-accessory/close';
+export { tagName as iconTagName, Icon } from './003-accessory/icon';
+export * from './003-accessory/iconCache';
+export { tagName as checkCircleTagName, CheckCircle } from './011-dialog/circle';
+export * from './011-dialog/dialog';
+export * from './011-dialog/show';