bkui-vue 0.0.2-beta.78 → 0.0.2-beta.79

package/lib/table/plugins/use-column-resize.d.ts

@@ -1,15 +1,35 @@
-import { GroupColumn } from '../props';
-declare const _default: (colgroups: GroupColumn[], immediate?: boolean) => {
+import { Ref } from 'vue';
+import { ITableResponse } from '../use-attributes';
+declare const _default: (tableResp: ITableResponse, immediate: boolean, head: Ref<HTMLElement>) => {
     registerResizeEvent: () => void;
     resetResizeEvents: () => void;
-    dragOffsetX: import("vue").Ref<number>;
-    dragOffsetXStyle: import("vue").ComputedRef<{
-        readonly position: "absolute";
-        readonly top: 0;
-        readonly bottom: 0;
-        readonly left: 0;
-        readonly width: "1px";
-        readonly 'background-color': "#3785FF";
+    dragOffsetX: Ref<number>;
+    dragOffsetXStyle: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        width: string;
+        backgroundColor: string;
+        transform: string;
+    };
+    resizeColumnStyle: import("vue").ComputedRef<{
+        transform: string;
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        width: string;
+        backgroundColor: string;
+    }>;
+    resizeHeadColStyle: import("vue").ComputedRef<{
+        width: string;
+        transform: string;
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        backgroundColor: string;
     }>;
 };
 export default _default;

package/lib/table/plugins/use-fixed-column.d.ts

@@ -1,27 +1,27 @@
-import { GroupColumn, TablePropTypes } from '../props';
+import { Ref } from 'vue';
+import { Column, TablePropTypes } from '../props';
+import { ITableResponse } from '../use-attributes';
 /**
  * 固定列Hooks
  */
-declare const _default: (props: TablePropTypes, colgroups: GroupColumn[], hasScrollY?: any) => {
+declare const _default: (props: TablePropTypes, tableResp: ITableResponse, head?: Ref<HTMLElement>) => {
     fixedWrapperClass: string;
-    resolveFixedColumnStyle: (column: GroupColumn, hasScrollY?: boolean) => {
+    resolveFixedColumnStyle: (column: Column, hasScrollY?: boolean) => {
         [x: string]: string;
     };
-    fixedColumns: import("vue").ComputedRef<{
-        isExist: boolean;
-        colPos: string;
-        column: GroupColumn;
-    }[]>;
+    resolveFixedColumns: (tableOffsetRight: any) => void;
+    fixedColumns: any[];
     resolveColumnStyle: (colPos: string) => {
         width: string;
         backgroundColor: string;
         bottom: string;
     };
-    resolveColumnClass: (column: GroupColumn, scrollX?: any, offsetRight?: any) => {
+    resolveColumnClass: (column: Column, scrollX?: any, offsetRight?: any) => {
         column_fixed: boolean;
         column_fixed_left: boolean;
         column_fixed_right: boolean;
         shadow: boolean;
     };
+    updateFixClass: (tableOffsetRight: any) => void;
 };
 export default _default;

package/lib/table/plugins/use-pagination.d.ts

@@ -1,4 +1,4 @@
-import { TablePropTypes } from '../props';
+import { Column, SortScope, TablePropTypes } from '../props';
 /**
  * 处理 Prop中的分页配置
  * prop中的配置会覆盖本地的配置
@@ -7,10 +7,13 @@ import { TablePropTypes } from '../props';
  * @returns 返回值
  */
 export declare const resolvePaginationOption: (propPagination: any, defVal: any) => any;
-declare const _default: (props: TablePropTypes, indexData: any[]) => {
+declare const _default: (props: TablePropTypes) => {
     pageData: any[];
+    indexData: import("vue").ComputedRef<any[]>;
     localPagination: any;
-    resolvePageData: (filterFn: any, sortFn: any, activeSortColumn: any) => void;
-    watchEffectFn: (filterFn: any, sortFn: any, activeSortColumn: any) => void;
+    resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: any) => void;
+    resetStartEndIndex: () => void;
+    multiFilter: (filterFnList: ((row: any, index: any, data: any) => void)[]) => void;
+    sort: (sourceData: any[], sortFn: any, column: Column, type: string, sortScope: SortScope) => void;
 };
 export default _default;

package/lib/table/props.d.ts

@@ -71,6 +71,8 @@ export type IFilterShape = {
     filterScope?: SortScope;
     btnSave?: boolean | string;
     btnReset?: boolean | string;
+    height?: number;
+    maxHeight?: number;
 };
 export type IFilterPropShape = IFilterShape | boolean | string;
 export declare const IFilterType: import("vue-types").VueTypeDef<IFilterPropShape>;
@@ -210,7 +212,7 @@ export declare enum IColSortBehavior {
      */
     interdependent = "interdependent",
     /**
-     * 列排序是独立的
+     * 列与列之间的排序是独立的，互斥的
      */
     independent = "independent"
 }
@@ -346,6 +348,14 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否支持跨页全选
+     */
+    acrossAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     /**
      * 空数据展示
      */
@@ -415,6 +425,17 @@ export declare const tableProps: {
     } & {
         default: string;
     };
+    /**
+     * 默认选中行
+     * 仅对设置了selection的情况下生效
+     * 值可以为 [key1, key2, key3, ...] 或者 [row1, row2, row3, ...]
+     * 如果设置为key，则 selectionKey 必须设置，内部匹配逻辑为：row[selectionKey] === key
+     */
+    checked: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
     /**
      * 提供自定义判定当前行是否选中
      * 如果设置了此属性，其他判定均不生效

package/lib/table/render.d.ts

@@ -1,12 +1,12 @@
 import { ComputedRef, Ref, SetupContext } from 'vue';
 import type { Language } from '../locale';
 import { TablePlugins } from './plugins';
-import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
+import { Column, TablePropTypes } from './props';
+import { ITableFormatData, ITableResponse } from './use-attributes';
 export default class TableRender {
     props: TablePropTypes;
     context: SetupContext;
-    reactiveProp: IReactiveProp;
-    colgroups: GroupColumn[];
+    tableResp: ITableResponse;
     uuid: string;
     events: Map<string, any[]>;
     styleRef: ComputedRef<{
@@ -15,8 +15,9 @@ export default class TableRender {
     t: ComputedRef<Language['table']>;
     activeSortIndex: Ref<number>;
     plugins: TablePlugins;
-    constructor(props: any, ctx: any, reactiveProp: IReactiveProp, colgroups: GroupColumn[], styleRef: any, t: ComputedRef<Language['table']>);
-    get propActiveCols(): IColumnActive[];
+    constructor(props: any, ctx: any, tableResp: ITableResponse, styleRef: any, t: ComputedRef<Language['table']>);
+    get formatData(): ITableFormatData;
+    get columns(): Column[];
     /**
      * 渲染Table Head
      */
@@ -38,12 +39,6 @@ export default class TableRender {
      */
     on(eventName: string, watcher: Function): this;
     destroy(): void;
-    /**
-     * 派发事件
-     * @param eventName
-     * @param args
-     */
-    private emitEvent;
     private handlePageLimitChange;
     private handlePageChange;
     /**
@@ -51,7 +46,7 @@ export default class TableRender {
      * @param index 指定选中的列Index
      * @param single 是否重置其他列，当只允许选中一列的情况下需要先重置
      */
-    private setColumnActive;
+    private getSortFnByColumn;
     /**
      * 点击选中一列事件
      * @param index 当前选中列Index
@@ -123,7 +118,6 @@ export default class TableRender {
      * @param colIndex 指定列Index
      * @returns
      */
-    private isColActive;
     /**
      * 渲染表格Col分组
      * @returns
@@ -133,8 +127,4 @@ export default class TableRender {
      * 过滤当前可渲染的列
      */
     private get filterColGroups();
-    /**
-     * 当前Table Setting
-     */
-    private get setting();
 }

package/lib/table/table.css

@@ -1058,6 +1058,7 @@
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
@@ -1091,6 +1092,7 @@
   border-collapse: collapse;
   table-layout: fixed;
   align-self: flex-start;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head table th,
 .bk-table .bk-table-body table th,
@@ -1282,6 +1284,7 @@
 .bk-table .bk-table-head {
   position: relative;
   transform: translateX(var(--scroll-head-left));
+  z-index: 2;
 }
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
@@ -1377,6 +1380,7 @@
 }
 .bk-table .bk-table-fixed .column_fixed {
   position: absolute;
+  z-index: 2;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
@@ -1388,7 +1392,6 @@
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right {
   top: 0;
   right: 0;
-  z-index: 1;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);

package/lib/table/table.d.ts

@@ -1,11 +1,10 @@
-import { SORT_OPTION } from './const';
-import { IColSortBehavior } from './props';
+import { Column } from './props';
 declare const _default: import("vue").DefineComponent<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
     };
-    columns: import("vue-types").VueTypeDef<import("./props").Column[]> & {
-        default: () => import("./props").Column[];
+    columns: import("vue-types").VueTypeDef<Column[]> & {
+        default: () => Column[];
     };
     activeColumn: import("vue-types").VueTypeDef<number | number[]>;
     columnPick: import("vue-types").VueTypeDef<"disabled" | "single" | "multi"> & {
@@ -66,6 +65,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    acrossAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     emptyText: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -102,6 +106,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    checked: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
     isSelectedFn: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     } & {
@@ -136,7 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
-    colSortBehavior: import("vue-types").VueTypeDef<IColSortBehavior>;
+    colSortBehavior: import("vue-types").VueTypeDef<import("./props").IColSortBehavior>;
     isFlex: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -146,23 +155,23 @@ declare const _default: import("vue").DefineComponent<{
     columnPick: (_cols: import("./props").IColumnActive[]) => boolean;
     columnFilter: (_args: {
         checked: string[];
-        column: import("./props").Column;
+        column: Column;
         index: number;
     }) => boolean;
     columnSort: (_args: {
-        column: import("./props").Column;
+        column: Column;
         index: number;
-        type: SORT_OPTION;
+        type: import("./const").SORT_OPTION;
     }) => boolean;
     colFilterSave: (_args: {
-        column: import("./props").Column;
+        column: Column;
         values: any[];
     }) => boolean;
     rowClick: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
     rowDblclick: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
     rowExpand: (_args: {
         row: any;
-        column: import("./props").Column;
+        column: Column;
         index: Number;
         rows: any[];
         e: MouseEvent;
@@ -202,7 +211,7 @@ declare const _default: import("vue").DefineComponent<{
     cellClick: (_args: {
         event: MouseEvent;
         row: any;
-        column: import("./props").Column;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -212,7 +221,7 @@ declare const _default: import("vue").DefineComponent<{
     cellDblclick: (_args: {
         event: MouseEvent;
         row: any;
-        column: import("./props").Column;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -225,8 +234,8 @@ declare const _default: import("vue").DefineComponent<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
     };
-    columns: import("vue-types").VueTypeDef<import("./props").Column[]> & {
-        default: () => import("./props").Column[];
+    columns: import("vue-types").VueTypeDef<Column[]> & {
+        default: () => Column[];
     };
     activeColumn: import("vue-types").VueTypeDef<number | number[]>;
     columnPick: import("vue-types").VueTypeDef<"disabled" | "single" | "multi"> & {
@@ -287,6 +296,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    acrossAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     emptyText: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -323,6 +337,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    checked: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
     isSelectedFn: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     } & {
@@ -357,7 +376,7 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
-    colSortBehavior: import("vue-types").VueTypeDef<IColSortBehavior>;
+    colSortBehavior: import("vue-types").VueTypeDef<import("./props").IColSortBehavior>;
     isFlex: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -372,24 +391,24 @@ declare const _default: import("vue").DefineComponent<{
     }) => any;
     onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
     onColumnSort?: (_args: {
-        column: import("./props").Column;
+        column: Column;
         index: number;
-        type: SORT_OPTION;
+        type: import("./const").SORT_OPTION;
     }) => any;
     onColumnFilter?: (_args: {
         checked: string[];
-        column: import("./props").Column;
+        column: Column;
         index: number;
     }) => any;
     onColFilterSave?: (_args: {
-        column: import("./props").Column;
+        column: Column;
         values: any[];
     }) => any;
     onRowClick?: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => any;
     onRowDblclick?: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => any;
     onRowExpand?: (_args: {
         row: any;
-        column: import("./props").Column;
+        column: Column;
         index: Number;
         rows: any[];
         e: MouseEvent;
@@ -425,7 +444,7 @@ declare const _default: import("vue").DefineComponent<{
     onCellClick?: (_args: {
         event: MouseEvent;
         row: any;
-        column: import("./props").Column;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -435,7 +454,7 @@ declare const _default: import("vue").DefineComponent<{
     onCellDblclick?: (_args: {
         event: MouseEvent;
         row: any;
-        column: import("./props").Column;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -452,7 +471,8 @@ declare const _default: import("vue").DefineComponent<{
         [key: string]: any;
     };
     minHeight: string | number;
-    columns: import("./props").Column[];
+    columns: Column[];
+    checked: unknown[];
     cellClass: any;
     headHeight: number;
     rowKey: any;
@@ -466,6 +486,7 @@ declare const _default: import("vue").DefineComponent<{
     virtualEnabled: boolean;
     paginationHeight: number;
     remotePagination: boolean;
+    acrossAll: boolean;
     emptyText: string;
     emptyCellText: any;
     rowClass: any;

package/lib/table/table.less

@@ -88,6 +88,7 @@
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
+    transform: translateZ(0);
 
     &::-webkit-scrollbar {
       width: 5px;
@@ -121,6 +122,7 @@
       border-collapse: collapse;
       table-layout: fixed;
       align-self: flex-start;
+      transform: translateZ(0);
 
       th,
       td {
@@ -304,6 +306,7 @@
   .@{bk-prefix}-table-head {
     position: relative;
     transform: translateX(var(--scroll-head-left));
+    z-index: 2;
 
     .col-resize-drag {
       position: absolute;
@@ -432,6 +435,7 @@
 
     .column_fixed {
       position: absolute;
+      z-index: 2;
 
       &.column_fixed_left {
         top: 0;
@@ -445,7 +449,6 @@
       &.column_fixed_right {
         top: 0;
         right: 0;
-        z-index: 1;
 
         &.shadow {
           box-shadow: 0 0 10px rgb(0 0 0 / 12%);

package/lib/table/table.variable.css

@@ -1180,6 +1180,7 @@
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
@@ -1213,6 +1214,7 @@
   border-collapse: collapse;
   table-layout: fixed;
   align-self: flex-start;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head table th,
 .bk-table .bk-table-body table th,
@@ -1404,6 +1406,7 @@
 .bk-table .bk-table-head {
   position: relative;
   transform: translateX(var(--scroll-head-left));
+  z-index: 2;
 }
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
@@ -1499,6 +1502,7 @@
 }
 .bk-table .bk-table-fixed .column_fixed {
   position: absolute;
+  z-index: 2;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
@@ -1510,7 +1514,6 @@
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right {
   top: 0;
   right: 0;
-  z-index: 1;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);

package/lib/table/use-attributes.d.ts

@@ -0,0 +1,55 @@
+import { IEmptyObject } from './const';
+import { Column, Settings, SortScope, TablePropTypes } from './props';
+export type ITableFormatData = {
+    data: any[];
+    dataSchema: WeakMap<object, any>;
+    columnSchema: WeakMap<object, any>;
+    columns: Column[];
+    settings: {
+        size: string;
+        height: number;
+    };
+    layout: {
+        bottom: number;
+        hasScrollY: boolean;
+        translateX: number;
+        translateY: number;
+    };
+};
+export type ITableResponse = {
+    formatColumns: (columns: Column[]) => void;
+    formatDataSchema: (data: any[]) => void;
+    setRowSelection: (row: any, isSelected: boolean) => void;
+    setRowExpand: (row: any, isExpand: boolean) => void;
+    setRowIndex: (row: any, index: number) => void;
+    setColumnAttribute: (col: Column, attrName: string, attrValue: ((...args: any[]) => boolean | number | void | string) | string | boolean | number) => void;
+    setColumnAttributeBySettings: (settings: Settings, checkedVal?: string[]) => void;
+    setAllColumnAttribute: (attrName: string, attrValue: ((...args: any[]) => boolean | number | void | string) | string | boolean | number) => void;
+    getColumnAttribute: (col: Column, attributeName: string) => string | boolean | Record<string, any>;
+    getColumnId: (col: Column) => string;
+    getColumnOrderWidth: (column: Column, orders?: string[]) => number;
+    isActiveColumn: (col: Column) => boolean;
+    isHiddenColumn: (col: Column) => boolean;
+    resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: SortScope) => void;
+    resetStartEndIndex: () => void;
+    toggleRowSelection: (row: any) => void;
+    toggleAllSelection: (value?: boolean) => void;
+    setAllRowExpand: (value?: boolean) => void;
+    clearSelection: () => void;
+    clearColumnSort: (reset?: boolean) => void;
+    setColumnSortActive: (column: Column, active: boolean) => void;
+    getRowAttribute: (row: any | IEmptyObject, attrName: string) => any;
+    getRowSelection: () => any[];
+    resolveColumnWidth: (root: HTMLElement, autoWidth?: any, offsetWidth?: any) => void;
+    filter: () => void;
+    sortData: (column: Column) => void;
+    isCheckedAll: () => boolean;
+    hasCheckedRow: () => boolean;
+    setRowSelectionAll: (val: boolean) => void;
+    setRowIndeterminate: () => void;
+    pageData: any[];
+    localPagination: any;
+    formatData: ITableFormatData;
+};
+declare const _default: (props: TablePropTypes) => ITableResponse;
+export default _default;