@gzmjs/button 0.1.0

package/dist/010-btn/00-btnBase.d.ts

@@ -0,0 +1,39 @@
+import { Badge, Icon } from '@gzmjs/ui-basic';
+import { ViewModel, ViewElement } from '@gzmjs/mvvm';
+export declare const styleSheet: CSSStyleSheet;
+export interface BtnOptions<E extends BtnBase<BtnOptions<E>>> extends ViewModel<E> {
+    label?: string;
+    icon?: string;
+    iconOnly?: boolean;
+}
+export declare abstract class BtnBase<T extends BtnOptions<BtnBase<T>>> extends ViewElement<T> {
+    constructor(noShadow?: boolean);
+    protected $ele: HTMLElement;
+    protected $ipt?: HTMLInputElement;
+    protected $lbl?: HTMLElement;
+    protected $icn?: Icon;
+    protected $bdg?: Badge;
+    /**
+     * 以下所有的 create* 方法都是直接或者间接在构造函数中调用。
+     * 所以不应该判断 attributes 的值。
+     */
+    /**
+     * 生成 thie.$ele，由子类重写。
+     * 只在构造函数中调用一次。
+     */
+    protected abstract createButton(): HTMLElement;
+    protected _createInputFirst(inputType: string): HTMLElement;
+    protected _createInputLast(inputType: string): HTMLElement;
+    protected _createLabel($ele: HTMLElement): void;
+    protected _createIcon($ele: HTMLElement): void;
+    protected _createInput(inputType: string, $ele: HTMLElement): HTMLInputElement;
+    protected _iptChanged(): void;
+    accessor label: string | undefined;
+    accessor icon: string | undefined;
+    accessor iconOnly: boolean;
+    accessor badge: string | undefined;
+    _label_set(newval: string | null): void;
+    _icon_set(newval: string | null): void;
+    _icon_only_set(): void;
+    _badge_set(newval: string | null): void;
+}

package/dist/010-btn/03-btnClick.d.ts

@@ -0,0 +1,18 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-CLICK";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ClickButton;
+    }
+}
+export interface ClickBtnOptions extends BTN.BtnOptions<ClickButton> {
+    readonly tag?: 'click';
+    badge?: string;
+    onclick?: (this: ClickBtnOptions, ev: MouseEvent, vm: ClickBtnOptions) => unknown;
+}
+declare const mutableAttributes: readonly ["label", "icon", "icon-only", "badge"];
+export declare class ClickButton extends BTN.BtnBase<ClickBtnOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    protected createButton(): HTMLElement;
+}
+export {};

package/dist/010-btn/06-btnLink.d.ts

@@ -0,0 +1,19 @@
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-LINK";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: LinkButton;
+    }
+}
+export interface LinkBtnOptions extends BTN.BtnOptions<LinkButton> {
+    readonly tag?: 'link';
+    badge?: string;
+    href: string;
+    target?: string;
+    onclick?: (this: LinkBtnOptions, ev: MouseEvent, vm: LinkBtnOptions) => unknown;
+}
+export declare class LinkButton extends BTN.BtnBase<LinkBtnOptions> {
+    protected createButton(): HTMLElement;
+    accessor href: string | undefined;
+    accessor target: string | undefined;
+}

package/dist/010-btn/09-btnCheck.d.ts

@@ -0,0 +1,21 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-CHECK";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: CheckButton;
+    }
+}
+export interface CheckBtnOptions extends BTN.BtnOptions<CheckButton> {
+    readonly tag?: 'check';
+    checked?: boolean;
+    onclick?: (this: CheckBtnOptions, ev: MouseEvent, vm: CheckBtnOptions) => unknown;
+}
+declare const mutableAttributes: readonly ["label", "icon", "icon-only"];
+export declare class CheckButton extends BTN.BtnBase<CheckBtnOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    protected createButton(): HTMLElement;
+    protected _iptChanged(): void;
+    get checked(): boolean;
+    set checked(v: boolean);
+}
+export {};

package/dist/010-btn/12-btnRadio.d.ts

@@ -0,0 +1,33 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import * as BTN from './00-btnBase';
+/**
+ * 此组件不宜单独使用，应该配合 btnGroup 使用。原因有2：
+ * 1 - <input type=radio> 在各自的 shadow dom 中，即使 name 属性相同，也不会形成一个互斥组。
+ *      所以只能不使用 shadow dom，封装性被破坏。
+ * 2 - radio 的特性：单个 radio 选中后就无法取消选中，没有实用价值。
+ */
+export declare const tagName = "GZM-BTN-RADIO";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: RadioButton;
+    }
+}
+export interface RadioBtnOptions extends BTN.BtnOptions<RadioButton> {
+    readonly tag?: 'radio';
+    checked?: boolean;
+    onclick?: (this: RadioBtnOptions, ev: MouseEvent, vm: RadioBtnOptions) => unknown;
+}
+declare const mutableAttributes: readonly ["label", "icon", "icon-only"];
+/**
+ * 因为没有使用 shadow，所以需要输出 .gzm-btn 的样式定义。
+ * 这样就允许网页上的任意一个按钮使用 .gzm-btn 类名，就会获得相同的样式。
+ */
+export declare class RadioButton extends BTN.BtnBase<RadioBtnOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    constructor();
+    connectedCallback(): void;
+    protected createButton(): HTMLElement;
+    protected _iptChanged(): void;
+    get checked(): boolean;
+    set checked(v: boolean);
+}
+export {};

package/dist/010-btn/20-btnText.d.ts

@@ -0,0 +1,30 @@
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-TEXT";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: TextButton;
+    }
+}
+export interface TextBtnOptions extends BTN.BtnOptions<TextButton> {
+    readonly tag?: 'text';
+    type?: 'text' | 'tel' | 'url' | 'email' | 'search' | 'password';
+    maxlength?: number;
+    minlength?: number;
+    pattern?: string;
+    placeholder?: string;
+    size?: number;
+    value?: string;
+    onclick?: (this: TextBtnOptions, ev: MouseEvent, vm: TextBtnOptions) => unknown;
+}
+export declare class TextButton extends BTN.BtnBase<TextBtnOptions> {
+    protected createButton(): HTMLElement;
+    protected _iptChanged(): void;
+    accessor type: string | undefined;
+    accessor maxlength: number | undefined;
+    accessor minlength: number | undefined;
+    accessor pattern: string | undefined;
+    accessor placeholder: string | undefined;
+    accessor size: number | undefined;
+    get value(): string;
+    set value(v: string);
+}

package/dist/010-btn/23-btnNum.d.ts

@@ -0,0 +1,27 @@
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-NUM";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: NumButton;
+    }
+}
+export interface NumBtnOptions extends BTN.BtnOptions<NumButton> {
+    readonly tag?: 'num';
+    type?: 'number';
+    max?: string;
+    min?: string;
+    step?: string;
+    placeholder?: string;
+    value?: number;
+    onclick?: (this: NumBtnOptions, ev: MouseEvent, vm: NumBtnOptions) => unknown;
+}
+export declare class NumButton extends BTN.BtnBase<NumBtnOptions> {
+    protected createButton(): HTMLElement;
+    protected _iptChanged(): void;
+    accessor max: string | undefined;
+    accessor min: string | undefined;
+    accessor step: string | undefined;
+    accessor placeholder: string | undefined;
+    get value(): number;
+    set value(v: number);
+}

package/dist/010-btn/26-btnDate.d.ts

@@ -0,0 +1,29 @@
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-DATE";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: DateButton;
+    }
+}
+export interface DateBtnOptions extends BTN.BtnOptions<DateButton> {
+    readonly tag?: 'date';
+    type?: 'date' | 'datetime-local' | 'time' | 'week' | 'month';
+    max?: string;
+    min?: string;
+    step?: string;
+    value?: string;
+    onclick?: (this: DateBtnOptions, ev: MouseEvent, vm: DateBtnOptions) => unknown;
+}
+export declare class DateButton extends BTN.BtnBase<DateBtnOptions> {
+    protected createButton(): HTMLElement;
+    protected _iptChanged(): void;
+    accessor type: string | undefined;
+    accessor max: string | undefined;
+    accessor min: string | undefined;
+    accessor step: string | undefined;
+    /**
+     * 考虑过使用 <input>.valueAsDate 属性，但是在 type=datetime-local 时发生异常
+     */
+    get value(): string;
+    set value(v: string);
+}

package/dist/010-btn/29-btnMenu.d.ts

@@ -0,0 +1,24 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { MiOptions } from '@gzmjs/menu';
+import * as BTN from './00-btnBase';
+export declare const tagName = "GZM-BTN-MENU";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: MenuButton;
+    }
+}
+export interface MenuBtnOptions extends BTN.BtnOptions<MenuButton> {
+    readonly tag?: 'menu';
+    badge?: string;
+    subItems?: MiOptions[];
+    /**
+     * 如果没有设置 subItems，那么就会调用此函数来获得菜单。
+     * @returns
+     */
+    beforeShowMenu?: () => MiOptions[];
+}
+declare const mutableAttributes: readonly ["label", "icon", "icon-only", "badge"];
+export declare class MenuButton extends BTN.BtnBase<MenuBtnOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    protected createButton(): HTMLElement;
+}
+export {};

package/dist/010-btn/50-btnGroup.d.ts

@@ -0,0 +1,54 @@
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ViewListModel, ViewListElement } from '@gzmjs/mvvm';
+import { CheckBtnOptions } from './09-btnCheck';
+import { ClickBtnOptions } from './03-btnClick';
+import { DateBtnOptions } from './26-btnDate';
+import { LinkBtnOptions } from './06-btnLink';
+import { MenuBtnOptions } from './29-btnMenu';
+import { NumBtnOptions } from './23-btnNum';
+import { RadioBtnOptions } from './12-btnRadio';
+import { TextBtnOptions } from './20-btnText';
+import * as BB from './00-btnBase';
+export type AllBtnOptions = ClickBtnOptions | LinkBtnOptions | CheckBtnOptions | RadioBtnOptions | TextBtnOptions | NumBtnOptions | DateBtnOptions | MenuBtnOptions;
+/**
+ * 当在 btn-bar 中且有许多按钮，导致无法在一行中显示的时候，就需要折叠按钮组。
+ * 一开始是正常状态：normal，每一个按钮都按 AllBtnOptions 的设置显示。
+ * 调用 fold() 开始折叠，从 normal -> icon-only，即只要有 icon，就强制设置 icon-only。
+ * 从 icon-only -> menu-btn，即只显示一个按钮，其他按钮都作为菜单项，点击后才显示。
+ * 由于菜单项只能是 click | link | check | radio，所以只有这 4 种按钮可以折叠。
+ */
+declare const foldStates: readonly ["normal", "icon-only", "menu-btn"];
+type FoldStateType = typeof foldStates[number];
+export declare const btnBarAlign: readonly ["left", "center", "right"];
+type BtnBarAlign = typeof btnBarAlign[number];
+export declare const tagName = "GZM-BTN-GROUP";
+export interface BtnGroupOptions extends ViewListModel<AllBtnOptions, BB.BtnBase<AllBtnOptions>, BtnGroup> {
+    /**
+     * 缩成一个 btn-menu 时显示的文本
+     */
+    label?: string;
+    /**
+     * 在 btn-bar 中使用时对应的 slot.name
+     */
+    slot: BtnBarAlign;
+    /**
+     * 折叠状态
+     */
+    foldState?: FoldStateType;
+}
+declare const mutableAttributes: readonly ["fold-state"];
+export declare class BtnGroup extends ViewListElement<AllBtnOptions, BB.BtnBase<AllBtnOptions>, BtnGroupOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    protected _getViewItemTagName(options: AllBtnOptions): string;
+    accessor foldState: FoldStateType;
+    _fold_state_set(nv: string | null): void;
+    unfold(): boolean;
+    fold(): boolean;
+    /**
+     * 判断是否可以处于某一个折叠状态
+     */
+    private canFold2State;
+}
+export {};

package/dist/010-btn/53-btnBar.d.ts

@@ -0,0 +1,18 @@
+import { ViewListModel, ViewListElement } from '@gzmjs/mvvm';
+import { BtnGroupOptions, BtnGroup } from './50-btnGroup';
+export declare const tagName = "GZM-BTN-BAR";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: BtnBar;
+    }
+}
+export interface BtnBarOptions extends ViewListModel<BtnGroupOptions, BtnGroup, BtnBar> {
+    tagName?: typeof tagName;
+}
+export declare class BtnBar extends ViewListElement<BtnGroupOptions, BtnGroup, BtnBarOptions> {
+    #private;
+    constructor();
+    protected _getViewItemTagName(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}