@gzmjs/ui-basic 0.1.0

package/dist/ui-basic.d.ts

@@ -0,0 +1,370 @@
+export declare const allThemes: {
+    readonly name: string;
+    readonly label: string;
+}[];
+
+export declare type AttachBorder = typeof borders[number];
+
+export declare const attachBorderAttributeName = "gzm-attach-border";
+
+/**
+ * 对于每一个有 mutableAttributes 的组件，都必须实现下面这个类型。
+ * 其中 T 是 typeof mutableAttributes[number]
+ * 如果同时也有 copyAttributes，那么需要排除 copyAttributes 中的属性：
+ * Exclude<typeof mutableAttributes[number], keyof typeof copyAttributes>。
+ * 050-tree.ts 就是这么做到。
+ */
+export declare type AttributeHandlers<T extends string> = {
+    [K in T as GetAttributeSetHandlerName<K>]: <P extends string>(nv: P | null, ov: P | null) => void;
+};
+
+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 declare const badgeTagName = "GZM-BADGE";
+
+/**
+ * 从 dist/assets/index.css 中提取的样式。
+ * 找到其中的 @layer base，然后开始做减法。
+ * 1 - 去掉不用的伪类，如 ::file-selector-button, ::-webkit-*。
+ * 2 - 去掉具体的 tag 定义，如 hr, h1-6, button, 因为多半用不到。
+ */
+export declare const baseStyle: CSSStyleSheet;
+
+declare type BindableTextProxy = {
+    [bindHtmlElement]: <P>(this: P, $ele: HTMLElement) => P;
+};
+
+declare const bindHtmlElement = "bindHtmlElement";
+
+/**
+ * @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;
+};
+
+declare type BoolOrUndef = boolean | undefined;
+
+declare type BoolType = boolean | BoolOrUndef;
+
+export declare const borders: readonly ["bottom", "top", "right", "left"];
+
+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;
+}
+
+export declare class CloseBtn extends HTMLElement implements ELE.AttributeHandlers<typeof mutableAttributes_2[number]> {
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    _corner_set(): void;
+    accessor corner: boolean | undefined;
+}
+
+export declare const closeTagName = "GZM-CLOSE-BTN";
+
+export declare type Corner = typeof xy[keyof typeof xy];
+
+export declare class CornerHelper {
+    #private;
+    constructor($popup: HTMLElement, popupCorner: Corner, $attachTo: HTMLElement, attachCorner: Corner);
+    readonly $popup: HTMLElement;
+    readonly $attachTo: HTMLElement;
+    pos(): void;
+}
+
+export declare function createStyleSheet(style: Style): CSSStyleSheet;
+
+export declare function createText<T extends Record<string, unknown>[]>(this: unknown, ...txts: T): JoinedText<T> & BindableTextProxy;
+
+export declare function createTxtBtn(txt: string): HTMLButtonElement;
+
+declare type CustomElement = {
+    tagName: string;
+    style?: CSSStyleSheet;
+    mutableAttributes?: readonly string[];
+    /**
+     * 必须在 mutableAttributes 不为空时才有效。
+     * key 是 mutableAttributes 中的一员，value 是组件的属性名称（数组）
+     */
+    copyAttributes?: Record<string, string | string[]>;
+};
+
+/**
+ * 防抖
+ * @param func
+ * @param wait
+ * @returns
+ */
+export declare function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait?: number): (...args: Parameters<T>) => void;
+
+export declare function defineElement(ele: CustomElement): (constructor: CustomElementConstructor, ctx: ClassDecoratorContext) => void;
+
+declare namespace ELE {
+    export {
+        defineElement,
+        AttributeHandlers
+    }
+}
+
+/**
+ * 生成一个随机 ID 字符串，极大概率唯一
+ * @returns
+ */
+export declare function generateId(): string;
+
+/**
+ * 模拟 getAttributeSetHandlerName(name) 的逻辑
+ */
+declare type GetAttributeSetHandlerName<Name extends string> = `_${ReplaceAll<Name, '-', '_'>}_set`;
+
+export declare function getCurrentTheme(): string;
+
+export declare function getElementRules(tagName: string, ...ruleNames: string[]): Rules;
+
+export declare function getSnakeCaseName(propName: string): string;
+
+declare type GlobalTextProxy = TextProxy<typeof zh>;
+
+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: "只读";
+    };
+};
+
+export declare const GT: GlobalTextProxy;
+
+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 gzmHeader = "\n    background: var(--gzm-header-background);\n    border: var(--gzm-header-border);\n    color: var(--gzm-header-txt-color);\n";
+
+export declare const htmlThemeAttr = "gzm-theme";
+
+export declare class Icon extends HTMLElement implements ELE.AttributeHandlers<typeof mutableAttributes_3[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 declare const iconCache: {
+    [key: string]: string | HTMLImageElement;
+};
+
+export declare const iconTagName = "GZM-ICON";
+
+declare type IncludesCurlyZero<T extends string> = T extends `${string}{0}${string}` ? (...args: unknown[]) => string : string;
+
+/**
+ * @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;
+};
+
+export declare function isLeftCorner(c: Corner): boolean;
+
+export declare function isTopCorner(c: Corner): boolean;
+
+export declare function isTxtBtn($btn: HTMLElement): boolean;
+
+declare 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 makeCorner(isLeft: boolean, isTop: boolean): Corner;
+
+declare const mutableAttributes: readonly ["badge", "corner"];
+
+declare const mutableAttributes_2: readonly ["corner"];
+
+declare const mutableAttributes_3: readonly ["icon"];
+
+declare type NumOrUndef = number | undefined;
+
+declare type NumType = number | NumOrUndef;
+
+/**
+ * 模拟 string.replaceAll() 方法
+ */
+declare 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;
+
+export declare type Rules = {
+    [prop: string]: string;
+};
+
+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 declare function setCurrentTheme(themeName: string): boolean;
+
+declare type StrArrayOrUndef = string[] | undefined;
+
+declare type StrArrayType = string[] | StrArrayOrUndef;
+
+/**
+ * 基于：
+ * 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;
+};
+
+export declare type Style = {
+    [selector: string]: Rules | string;
+};
+
+declare type TextProxy<T> = {
+    [K in keyof T]: T[K] extends string ? IncludesCurlyZero<T[K]> : never;
+};
+
+export declare interface TransitionPopup {
+    doTransition: boolean;
+    beforeOpenTransition?: () => void;
+    afterOpenTransition?: () => void;
+}
+
+export declare const utilityStyle: CSSStyleSheet;
+
+/**
+ * 因为 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;
+};
+
+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 { }