bkui-vue 0.0.1-beta.38 → 0.0.1-beta.40

package/lib/table/index.d.ts

@@ -0,0 +1,302 @@
+declare const BkTable: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            height: string | number;
+            data: any[];
+            minHeight: string | number;
+            border: string[];
+            headHeight: number;
+            pagination: boolean | {
+                [key: string]: any;
+            };
+            columnPick: string;
+            rowHeight: any;
+            showHead: boolean;
+            virtualEnabled: boolean;
+            remotePagination: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            data: import("vue-types").VueTypeDef<any[]> & {
+                default: () => any[];
+            };
+            columns: import("vue-types").VueTypeDef<import("./props").Column[]>;
+            activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+            columnPick: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            height: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            minHeight: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            rowHeight: import("vue-types").VueTypeDef<any> & {
+                default: any;
+            };
+            headHeight: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            border: import("vue-types").VueTypeDef<string[]> & {
+                default: () => string[];
+            };
+            pagination: import("vue-types").VueTypeDef<boolean | {
+                [key: string]: any;
+            }> & {
+                default: boolean | (() => {
+                    [key: string]: any;
+                });
+            };
+            remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & {
+            onColumnPick?: (...args: any[]) => any;
+            onPageLimitChange?: (...args: any[]) => any;
+            onPageValueChange?: (...args: any[]) => any;
+            onRowClick?: (...args: any[]) => any;
+            onRowDblClick?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "height" | "data" | "minHeight" | "border" | "headHeight" | "pagination" | "columnPick" | "rowHeight" | "showHead" | "virtualEnabled" | "remotePagination">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "columnPick" | "pageLimitChange" | "pageValueChange" | "rowClick" | "rowDblClick", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            data: import("vue-types").VueTypeDef<any[]> & {
+                default: () => any[];
+            };
+            columns: import("vue-types").VueTypeDef<import("./props").Column[]>;
+            activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+            columnPick: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            height: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            minHeight: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            rowHeight: import("vue-types").VueTypeDef<any> & {
+                default: any;
+            };
+            headHeight: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            border: import("vue-types").VueTypeDef<string[]> & {
+                default: () => string[];
+            };
+            pagination: import("vue-types").VueTypeDef<boolean | {
+                [key: string]: any;
+            }> & {
+                default: boolean | (() => {
+                    [key: string]: any;
+                });
+            };
+            remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & {
+            onColumnPick?: (...args: any[]) => any;
+            onPageLimitChange?: (...args: any[]) => any;
+            onPageValueChange?: (...args: any[]) => any;
+            onRowClick?: (...args: any[]) => any;
+            onRowDblClick?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("columnPick" | "pageLimitChange" | "pageValueChange" | "rowClick" | "rowDblClick")[], string, {
+            height: string | number;
+            data: any[];
+            minHeight: string | number;
+            border: string[];
+            headHeight: number;
+            pagination: boolean | {
+                [key: string]: any;
+            };
+            columnPick: string;
+            rowHeight: any;
+            showHead: boolean;
+            virtualEnabled: boolean;
+            remotePagination: boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        data: import("vue-types").VueTypeDef<any[]> & {
+            default: () => any[];
+        };
+        columns: import("vue-types").VueTypeDef<import("./props").Column[]>;
+        activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+        columnPick: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        height: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        minHeight: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        rowHeight: import("vue-types").VueTypeDef<any> & {
+            default: any;
+        };
+        headHeight: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        border: import("vue-types").VueTypeDef<string[]> & {
+            default: () => string[];
+        };
+        pagination: import("vue-types").VueTypeDef<boolean | {
+            [key: string]: any;
+        }> & {
+            default: boolean | (() => {
+                [key: string]: any;
+            });
+        };
+        remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>> & {
+        onColumnPick?: (...args: any[]) => any;
+        onPageLimitChange?: (...args: any[]) => any;
+        onPageValueChange?: (...args: any[]) => any;
+        onRowClick?: (...args: any[]) => any;
+        onRowDblClick?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    columns: import("vue-types").VueTypeDef<import("./props").Column[]>;
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onColumnPick?: (...args: any[]) => any;
+    onPageLimitChange?: (...args: any[]) => any;
+    onPageValueChange?: (...args: any[]) => any;
+    onRowClick?: (...args: any[]) => any;
+    onRowDblClick?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("columnPick" | "pageLimitChange" | "pageValueChange" | "rowClick" | "rowDblClick")[], "columnPick" | "pageLimitChange" | "pageValueChange" | "rowClick" | "rowDblClick", {
+    height: string | number;
+    data: any[];
+    minHeight: string | number;
+    border: string[];
+    headHeight: number;
+    pagination: boolean | {
+        [key: string]: any;
+    };
+    columnPick: string;
+    rowHeight: any;
+    showHead: boolean;
+    virtualEnabled: boolean;
+    remotePagination: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkTable;

package/lib/table/props.d.ts

@@ -0,0 +1,117 @@
+import { ExtractPropTypes } from 'vue';
+export declare const tableProps: {
+    /**
+     * 渲染列表
+     */
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    /**
+     * Table 列渲染
+     */
+    columns: import("vue-types").VueTypeDef<Column[]>;
+    /**
+     * 当前选中列
+     * 当设置选中多列时（columnPick = multi），配置为数组[index1, index2, index3]，只能选中单列时，可以为数值或者数组[index]
+     */
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    /**
+     * 表格列选中方式
+     * 支持：单列（single），多列（multi），禁用（disabled）
+     * 默认：disabled
+     */
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    /**
+     * 设置表格高度
+     * 默认：auto，依赖外层高度
+     */
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 设置表格最小高度
+     * 默认：auto，依赖外层高度
+     */
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 行高，可以为固定数值类型
+     * 可以是函数，返回当前行的高度，返回值为数值类型
+     */
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    /**
+     * Thead行高，可以为固定数值类型
+     */
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 是否显示Head
+     */
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 是否启用虚拟渲染 & 滚动
+     * 当数据量很大时，启用虚拟渲染可以解决压面卡顿问题
+     */
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 表格边框显示设置，可以是一个组合
+     * 生效规则: 除非单独设置 none,否则会追加每个设置
+     */
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    /**
+     * 分页配置
+     * 默认值为false，不启用分页
+     * 设置为 true，启用分页功能，默认值参考分页组件 Pagination
+     */
+    pagination: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    /**
+     * 是否启用远程分页
+     */
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+};
+export declare type Column = {
+    label: Function | string;
+    field: Function | string;
+    render?: Function | string;
+    width?: number | string;
+};
+export declare type GroupColumn = {
+    calcWidth?: number;
+} & Column;
+export declare type Columns = ReadonlyArray<Column>;
+export declare type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
+export declare type IColumnActive = {
+    index: number;
+    active: boolean;
+};
+export declare type IReactiveProp = {
+    activeColumns: IColumnActive[];
+};

package/lib/table/render.d.ts

@@ -0,0 +1,83 @@
+import { TablePlugins } from './plugins/index';
+import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
+export default class TableRender {
+    props: TablePropTypes;
+    context: any;
+    reactiveProp: any;
+    colgroups: GroupColumn[];
+    uuid: string;
+    plugins: TablePlugins;
+    constructor(props: any, ctx: any, reactiveProp: IReactiveProp, colgroups: GroupColumn[]);
+    get propActiveCols(): IColumnActive[];
+    /**
+     * 渲染Table Head
+     * @param activeColumns 当前选中的列
+     * @returns
+     */
+    renderTableHeadSchema(): JSX.Element;
+    /**
+     * 渲染Table主体
+     * @param activeColumns 当前选中的列
+     * @returns
+     */
+    renderTableBodySchema(rows: any[]): JSX.Element;
+    renderTableFooter(options: any): JSX.Element;
+    private handlePageLimitChange;
+    private hanlePageChange;
+    /**
+     * 指定列选中状态
+     * @param index 指定选中的列Index
+     * @param single 是否重置其他列，当只允许选中一列的情况下需要先重置
+     */
+    private setColumnActive;
+    /**
+     * 点击选中一列事件
+     * @param index 当前选中列Index
+     */
+    private handleColumnHeadClick;
+    /**
+     * 渲染Table Header
+     * @returns
+     */
+    private renderHeader;
+    /**
+     * 渲染Table Body
+     * @returns
+     */
+    private renderTBody;
+    private getColumnClass;
+    /**
+     * table row click handle
+     * @param e
+     * @param row
+     * @param index
+     * @param rows
+     */
+    private handleRowClick;
+    /**
+     * table row click handle
+     * @param e
+     * @param row
+     * @param index
+     * @param rows
+     */
+    private handleRowDblClick;
+    /**
+     * 渲染表格Cell内容
+     * @param row 当前行
+     * @param column 当前列
+     * @returns
+     */
+    private renderCell;
+    /**
+     * 判定指定列是否为选中状态
+     * @param colIndex 指定列Index
+     * @returns
+     */
+    private isColActive;
+    /**
+   * 渲染表格Col分组
+   * @returns
+   */
+    private renderColGroup;
+}

package/lib/table/table.css

@@ -0,0 +1,91 @@
+.bk-table {
+  height: 100%;
+  overflow: hidden;
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table .bk-table-body {
+  overflow: auto;
+}
+.bk-table .bk-table-head,
+.bk-table .bk-table-body {
+  background: white;
+}
+.bk-table .bk-table-head table,
+.bk-table .bk-table-body table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
+  padding: 0 15px;
+  overflow: hidden;
+  line-height: var(--row-height);
+  color: #575961;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-table .bk-table-head table thead th,
+.bk-table .bk-table-body table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  color: #313238;
+  background-color: #fafbfd;
+}
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
+  background: #f0f1f5;
+}
+.bk-table .bk-table-head table tbody tr:hover td,
+.bk-table .bk-table-body table tbody tr:hover td {
+  background: #f5f7fa;
+}
+.bk-table .bk-table-footer {
+  line-height: 40px;
+}
+.bk-table.bordered-row td,
+.bk-table.bordered-row th {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid #dcdee5;
+  border-left: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th,
+.bk-table.bordered-col td {
+  border-right: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th:last-child,
+.bk-table.bordered-col td:last-child {
+  border-right: none;
+}
+.bk-table.bordered-none th,
+.bk-table.bordered-none td {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+.bk-table .bk-table-fixed {
+  width: 100%;
+}
+.bk-table colgroup col {
+  background: white;
+}
+.bk-table colgroup col.active {
+  position: relative;
+  background: #f0f1f5;
+}