@gzmjs/table 0.1.0

package/dist/055-table/48-col-tail.d.ts

@@ -0,0 +1,20 @@
+import { TableColHeadTailBase } from './47-head-tail';
+import * as M from '@gzmjs/mvvm';
+import * as TB from './00-base';
+import * as THT from './46-tht-options';
+export interface TableColTailOptions extends M.ViewListModel<THT.ThtOptions, TableColHeadTailBase<THT.ThtOptions>, TableColTail> {
+    tagName?: typeof TB.tableColTailTagName;
+}
+export declare class TableColTail extends M.ViewListElement<THT.ThtOptions, TableColHeadTailBase<THT.ThtOptions>, TableColTailOptions> implements THT.TableHeadTailBridge {
+    [M.handleModelEvent](source: unknown, evt: M.ModelEvent): boolean;
+    protected _getViewItemTagName(options: THT.ThtOptions): string;
+    get $list(): Element & THT.TableHeadTailNoticeReceiver | null;
+    notifyHide($child: THT.TableColHeadOrTail): void;
+    notifyConnected($child: THT.TableColHeadOrTail): void;
+    notifyDisconnected($child: THT.TableColHeadOrTail): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TB.tableColTailTagName]: TableColTail;
+    }
+}

package/dist/055-table/51-check.d.ts

@@ -0,0 +1,89 @@
+import { TableRow } from './16-row';
+import * as B from '@gzmjs/ui-basic';
+import * as M from '@gzmjs/mvvm';
+import * as TB from './00-base';
+import * as THT from './47-head-tail';
+export interface TableColCheckOptions extends M.ViewModel<TableColCheckbox> {
+    readonly tagName: typeof TB.tableColCheckTagName;
+    rowsCheckChanged?: (checked: boolean) => void;
+    rowCheckChanged?: ($row: TableRow, checked: boolean) => void;
+}
+declare const mutableAttributes: readonly ["hidden"];
+export declare class TableColCheckbox extends THT.TableColHeadTailBase<TableColCheckOptions> implements B.AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    $chk?: HTMLInputElement;
+    _createUI(): void;
+    protected _clear(): void;
+    get rowTagName(): string;
+    get T(): {
+        readonly agg: string;
+        readonly noAgg: string;
+        readonly sort: string;
+        readonly noSort: string;
+        readonly autoWidth: string;
+        readonly minWidth: string;
+        readonly maxWidth: string;
+        readonly pxWidth: string;
+        readonly textWrap: string;
+        readonly autoWrap: string;
+        readonly noWrap: string;
+        readonly mustWrap: string;
+        readonly textAlign: string;
+        readonly startAlign: string;
+        readonly endAlign: string;
+        readonly centerAlign: string;
+        readonly justifyAlign: string;
+        readonly COUNT: string;
+        readonly MAX: string;
+        readonly MIN: string;
+        readonly AVG: string;
+        readonly SUM: string;
+        readonly STDDEV_POP: string;
+        readonly STDDEV_SAMP: string;
+        readonly VAR_POP: string;
+        readonly VAR_SAMP: string;
+        readonly toggleCheck: string;
+    } & {
+        readonly close: string;
+        readonly true: string;
+        readonly false: string;
+        readonly undefined: string;
+        readonly default: string;
+        readonly valueMissing: string;
+        readonly count: string;
+        readonly min: string;
+        readonly max: string;
+        readonly sum: string;
+        readonly avg: string;
+        readonly hide: string;
+        readonly del: string;
+        readonly asc: string;
+        readonly desc: string;
+        readonly ok: string;
+        readonly cancel: string;
+        readonly waiting: string;
+        readonly confirming: (...args: unknown[]) => string;
+        readonly completed: string;
+        readonly error: string;
+        readonly attention: string;
+        readonly noMenuSet: string;
+        readonly readonly: string;
+    } & {
+        bindHtmlElement: <P>(this: P, $ele: HTMLElement) => P;
+    };
+}
+/**
+ * 由 grid-col-check 为每一行生成
+ */
+export declare class TableRowCheckbox extends HTMLElement {
+    constructor();
+    readonly $chk: HTMLInputElement;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TB.tableColCheckTagName]: TableColCheckbox;
+        [TB.tableRowCheckTagName]: TableRowCheckbox;
+    }
+}
+export {};

package/dist/055-table/52-serial.d.ts

@@ -0,0 +1,20 @@
+import * as B from '@gzmjs/ui-basic';
+import * as M from '@gzmjs/mvvm';
+import * as TB from './00-base';
+import * as THT from './47-head-tail';
+export interface TableColSerialNoOptions extends M.ViewModel<TableColSerialNo> {
+    readonly tagName: typeof TB.tableColSerialTagName;
+}
+declare const mutableAttributes: readonly ["hidden"];
+/**
+ * 列头显示行号，意义不大，因为宽度必须固定，当行数太大的时候会显示不下！
+ */
+declare class TableColSerialNo extends THT.TableColHeadTailBase<TableColSerialNoOptions> implements B.AttributeHandlers<typeof mutableAttributes[number]> {
+    get rowTagName(): string;
+    _createUI(): void;
+    get width(): string;
+}
+export {};
+/**
+ * 没有任何功能，就不用定义一个类了
+ */ 

package/dist/055-table/53-action.d.ts

@@ -0,0 +1,53 @@
+import { TableList } from './60-list';
+import { TableRow } from './16-row';
+import * as B from '@gzmjs/ui-basic';
+import * as M from '@gzmjs/mvvm';
+import * as TB from './00-base';
+import * as THT from './47-head-tail';
+export interface TableColActionOptions extends M.ViewModel<TableColAction> {
+    readonly tagName: typeof TB.tableColActionTagName;
+    label?: string;
+    actions: Record<string, (ctx: {
+        $row: TableRow;
+        $rowAction: TableRowAction;
+        $btn: HTMLButtonElement;
+    }) => void>;
+    rowActionConfig?: ($row: TableRow, $rowAction: TableRowAction, btns: Record<string, HTMLButtonElement>) => void;
+}
+declare const mutableAttributes: readonly ["hidden"];
+/**
+ * 按钮操作列
+ */
+declare class TableColAction extends THT.TableColHeadTailBase<TableColActionOptions> implements B.AttributeHandlers<typeof mutableAttributes[number]> {
+    get rowTagName(): string;
+    createInRow(): HTMLElement;
+    refresh($row: TableRow, $headOrTail?: HTMLElement | null): void;
+    get width(): string;
+    get dataAware(): boolean;
+    actions?: Record<string, (ctx: {
+        $row: TableRow;
+        $rowAction: TableRowAction;
+        $btn: HTMLButtonElement;
+    }) => void>;
+    get label(): string;
+    set label(v: string);
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TB.tableColActionTagName]: TableColAction;
+    }
+}
+/**
+ * 由 grid-col-action 为每一行生成
+ */
+declare class TableRowAction extends HTMLElement {
+    /**
+     * 为了在 GridColAction.refresh() 中触发事件用，从功能上来说没有必要定义这个属性，可以临时生成 btns 对象。
+     * 但是在触发事件时读取 button.innerText，导致在 _createRowsFromDataSource() 中调用时回流。
+     * 因为按钮刚刚生成还未绘制，读取 innerText 就会回流，所以要避免读取 innerText。
+     * 于是就在这里定义了这个属性。
+     */
+    readonly btns: Record<string, HTMLButtonElement>;
+    handleClick(e: MouseEvent, $list: TableList): void;
+}
+export {};

package/dist/055-table/54-menu.d.ts

@@ -0,0 +1,27 @@
+import { TableList } from './60-list';
+import { TableRow } from './16-row';
+import * as B from '@gzmjs/ui-basic';
+import * as M from '@gzmjs/mvvm';
+import * as TB from './00-base';
+import * as THT from './47-head-tail';
+export interface TableColMenuOptions extends M.ViewModel<TableColMenu> {
+    readonly tagName: typeof TB.tableColMenuTagName;
+    rowMenuClick?: ($row: TableRow, $ht: TableRowMenu, $btn: HTMLElement) => void;
+}
+declare const mutableAttributes: readonly ["hidden"];
+/**
+ * 在每一行显示一个菜单按钮，点击后弹出菜单
+ */
+declare class TableColMenu extends THT.TableColHeadTailBase<TableColMenuOptions> implements B.AttributeHandlers<typeof mutableAttributes[number]> {
+    get rowTagName(): string;
+    createInRow(): HTMLElement;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TB.tableColMenuTagName]: TableColMenu;
+    }
+}
+declare class TableRowMenu extends HTMLElement {
+    handleClick(e: MouseEvent, $list: TableList): void;
+}
+export {};

package/dist/055-table/60-list.d.ts

@@ -0,0 +1,41 @@
+import { TableCol, NoticeOfCol } from './20-col';
+import { TableCell } from './10-cell';
+import { Snapshot } from './35-snapshot';
+import { TableRow } from './16-row';
+import { TableView } from './62-table';
+import { NoticeOfColGroup } from './22-colgroup';
+import { NoticeOfHead, NoticeOfTail } from './46-tht-options';
+import * as TB from './00-base';
+export declare class TableList extends HTMLElement {
+    #private;
+    readonly $colStart: HTMLElement;
+    readonly $colMiddle: HTMLElement;
+    readonly $colEnd: HTMLElement;
+    readonly $colHead: import('./48-col-head').TableColHead;
+    readonly $colTail: import('./48-col-tail').TableColTail;
+    readonly $colStartCols: import('./25-cols').TableCols;
+    readonly $colMiddleCols: import('./25-cols').TableCols;
+    readonly $colEndCols: import('./25-cols').TableCols;
+    readonly $rows: import('./17-rows').TableRows;
+    readonly $aggs: import('./18-aggs').TableAggs;
+    initLayout(): void;
+    createSnapshot(): Snapshot;
+    getCellsByColKey(colKey: string): TableCell[];
+    get $table(): TableView;
+    sortRows(ss?: Snapshot): void;
+    _calcAgg($col: TableCol): void;
+    showAggs(b: boolean): void;
+    refreshAggs(ss?: Snapshot): void;
+    notify(n: NoticeOfCol | NoticeOfColGroup | NoticeOfHead | NoticeOfTail): void;
+    refreshAll(): void;
+    get colLayoutPaused(): boolean;
+    set colLayoutPaused(b: boolean);
+    _setColumnsTemplate(ss?: Snapshot): void;
+    _layoutColumnGroup(ss?: Snapshot): void;
+    getRowRefreshFunc(ss?: Snapshot): ($row: TableRow, refreshCellData?: boolean) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TB.tableListTagName]: TableList;
+    }
+}

package/dist/055-table/62-table.d.ts

@@ -0,0 +1,175 @@
+import { TableList } from './60-list';
+import { ThtOptions } from './46-tht-options';
+import { TableCol, TableColOptions } from './20-col';
+import { TableRow } from './16-row';
+import * as B from '@gzmjs/ui-basic';
+import * as M from '@gzmjs/mvvm';
+import * as TB from './00-base';
+export interface TableViewOptions extends M.ViewModel<TableView> {
+    /**
+     * 多行 active
+     */
+    multiple?: boolean;
+    /**
+     * 允许多个字段排序
+     */
+    multiSort?: boolean;
+    /**
+     * 自动根据表格中的内容排序
+     */
+    autoSort?: boolean;
+    /**
+     * !autoSort，此函数才会被调用
+     * @param $columnsWantSort 需要排序的字段
+     * @returns
+     */
+    columnSort?: ($columnsWantSort: TableCol[]) => void;
+    /**
+     * 自动根据表格中的内容聚合
+     */
+    autoAgg?: boolean;
+    /**
+     * !autoAgg，此函数才会被调用
+     * @param $col 要聚合的列
+     * @returns
+     */
+    columnAgg?: ($col: TableCol) => void;
+    heads?: ThtOptions[];
+    tails?: ThtOptions[];
+    colsStart?: TableColOptions[];
+    colsMiddle?: TableColOptions[];
+    colsEnd?: TableColOptions[];
+    /**
+     * 这个属性放在最后，确保所有的列都先生成。
+     */
+    dataSource?: object[];
+}
+declare const mutableAttributes: readonly ["multiple", "auto-sort", "auto-agg"];
+export declare class TableView extends M.ViewElement<TableViewOptions> implements B.AttributeHandlers<typeof mutableAttributes[number]> {
+    #private;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    readonly $list: TableList;
+    /**
+     * 设置 model 会导致此函数被调用来设置各个属性，所以需要控制 colLayoutPaused;
+     */
+    [M.handleModelEvent](source: unknown, evt: M.ModelEvent): boolean;
+    get heads(): ThtOptions[];
+    set heads(v: ThtOptions[]);
+    get tails(): ThtOptions[];
+    set tails(v: ThtOptions[]);
+    get colsStart(): TableColOptions[];
+    set colsStart(v: TableColOptions[]);
+    get colsMiddle(): TableColOptions[];
+    set colsMiddle(v: TableColOptions[]);
+    get colsEnd(): TableColOptions[];
+    set colsEnd(v: TableColOptions[]);
+    get dataSource(): object[] | undefined;
+    set dataSource(ds: object[] | undefined);
+    /**
+     * @returns 选中的行的数据
+     */
+    getActiveModels(): (import('./16-row').TableRowOptions | undefined)[];
+    getActiveRows(): TableRow[];
+    getCheckedRows(): TableRow[];
+    getCheckedModels(): (import('./16-row').TableRowOptions | undefined)[];
+    accessor multiple: boolean;
+    _multiple_set(): void;
+    accessor multiSort: boolean;
+    accessor autoSort: boolean;
+    _auto_sort_set(): void;
+    accessor autoAgg: boolean;
+    _auto_agg_set(): void;
+    count(...args: unknown[]): number;
+    sum(...args: number[]): number | undefined;
+    avg(...args: number[]): number | undefined;
+    min(...args: unknown[]): unknown;
+    max(...args: unknown[]): unknown;
+    readonly T: ({
+        readonly agg: string;
+        readonly noAgg: string;
+        readonly sort: string;
+        readonly noSort: string;
+        readonly autoWidth: string;
+        readonly minWidth: string;
+        readonly maxWidth: string;
+        readonly pxWidth: string;
+        readonly textWrap: string;
+        readonly autoWrap: string;
+        readonly noWrap: string;
+        readonly mustWrap: string;
+        readonly textAlign: string;
+        readonly startAlign: string;
+        readonly endAlign: string;
+        readonly centerAlign: string;
+        readonly justifyAlign: string;
+        readonly COUNT: string;
+        readonly MAX: string;
+        readonly MIN: string;
+        readonly AVG: string;
+        readonly SUM: string;
+        readonly STDDEV_POP: string;
+        readonly STDDEV_SAMP: string;
+        readonly VAR_POP: string;
+        readonly VAR_SAMP: string;
+        readonly toggleCheck: string;
+    } & ({
+        readonly close: string;
+        readonly true: string;
+        readonly false: string;
+        readonly undefined: string;
+        readonly default: string;
+        readonly valueMissing: string;
+        readonly count: string;
+        readonly min: string;
+        readonly max: string;
+        readonly sum: string;
+        readonly avg: string;
+        readonly hide: string;
+        readonly del: string;
+        readonly asc: string;
+        readonly desc: string;
+        readonly ok: string;
+        readonly cancel: string;
+        readonly waiting: string;
+        readonly confirming: (...args: unknown[]) => string;
+        readonly completed: string;
+        readonly error: string;
+        readonly attention: string;
+        readonly noMenuSet: string;
+        readonly readonly: string;
+    } | {
+        readonly close: string;
+        readonly true: string;
+        readonly false: string;
+        readonly undefined: string;
+        readonly default: string;
+        readonly valueMissing: string;
+        readonly count: string;
+        readonly min: string;
+        readonly max: string;
+        readonly sum: string;
+        readonly avg: string;
+        readonly hide: string;
+        readonly del: string;
+        readonly asc: string;
+        readonly desc: string;
+        readonly ok: string;
+        readonly cancel: string;
+        readonly waiting: string;
+        readonly confirming: (...args: unknown[]) => string;
+        readonly completed: string;
+        readonly error: string;
+        readonly attention: string;
+        readonly noMenuSet: string;
+        readonly readonly: string;
+    })) & {
+        bindHtmlElement: <P>(this: P, $ele: HTMLElement) => P;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TB.tableViewTagName]: TableView;
+    }
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { tableViewTagName, tableColCheckTagName, tableColSerialTagName, tableColActionTagName, tableColMenuTagName } from './055-table/00-base';
+export { type TableRowOptions, TableRow } from './055-table/16-row';
+export { type TableColOptions, TableCol, sortAsc, sortDesc, type TableColSort, type TableColAlign, type TableColAggs } from './055-table/20-col';
+export { Snapshot } from './055-table/35-snapshot';
+export { type ThtOptions } from './055-table/46-tht-options';
+export { type TableColCheckOptions } from './055-table/51-check';
+export { type TableColSerialNoOptions } from './055-table/52-serial';
+export { type TableColActionOptions } from './055-table/53-action';
+export { type TableColMenuOptions } from './055-table/54-menu';
+export { type TableViewOptions, TableView } from './055-table/62-table';