bkui-vue 0.0.2-beta.13 → 0.0.2-beta.131

package/lib/table/table.d.ts

@@ -1,9 +1,10 @@
+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"> & {
@@ -23,8 +24,8 @@ declare const _default: import("vue").DefineComponent<{
     maxHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    rowHeight: import("vue-types").VueTypeDef<any> & {
-        default: any;
+    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber> & {
+        default: import("./props").RowHeightFunctionNumber;
     };
     headHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -64,12 +65,18 @@ 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;
     };
-    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType> & {
-        default: boolean | (() => import("./props").Settings);
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType>;
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -99,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;
     } & {
@@ -107,14 +119,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp> & {
-        default: boolean | (() => {
-            content: string | Function;
-            disabled?: boolean;
-            watchCellResize?: boolean;
-            mode?: "auto" | "static";
-        });
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp>;
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -140,46 +145,52 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    colSortBehavior: import("vue-types").VueTypeDef<import("./props").IColSortBehavior>;
+    isFlex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     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: import("./const").SORT_OPTION;
     }) => boolean;
     colFilterSave: (_args: {
-        column: import("./props").Column;
-        values: Record<string, any>[];
+        column: Column;
+        values: any[];
     }) => boolean;
-    rowClick: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
-    rowDblclick: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: 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: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         index: Number;
-        rows: Record<string, any>[];
+        rows: any[];
         e: MouseEvent;
     }) => boolean;
     select: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => boolean;
     selectAll: (_args: {
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => boolean;
     selectionChange: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
         isAll: boolean;
     }) => boolean;
     pageLimitChange: (_arg: number) => boolean;
@@ -199,8 +210,8 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     cellClick: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -209,22 +220,22 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     cellDblclick: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
         rowIndex: number;
         columnIndex: number;
     }) => boolean;
-    rowMouseEnter: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
-    rowMouseLeave: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
+    rowMouseEnter: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
+    rowMouseLeave: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     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"> & {
@@ -244,8 +255,8 @@ declare const _default: import("vue").DefineComponent<{
     maxHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    rowHeight: import("vue-types").VueTypeDef<any> & {
-        default: any;
+    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber> & {
+        default: import("./props").RowHeightFunctionNumber;
     };
     headHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -285,12 +296,18 @@ 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;
     };
-    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType> & {
-        default: boolean | (() => import("./props").Settings);
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType>;
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -320,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;
     } & {
@@ -328,14 +350,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp> & {
-        default: boolean | (() => {
-            content: string | Function;
-            disabled?: boolean;
-            watchCellResize?: boolean;
-            mode?: "auto" | "static";
-        });
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp>;
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -361,39 +376,45 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    colSortBehavior: import("vue-types").VueTypeDef<import("./props").IColSortBehavior>;
+    isFlex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     onSelect?: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => any;
     onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
     onColumnSort?: (_args: {
-        column: import("./props").Column;
+        column: Column;
         index: number;
         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;
-        values: Record<string, any>[];
+        column: Column;
+        values: any[];
     }) => any;
-    onRowClick?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
-    onRowDblclick?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: 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: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         index: Number;
-        rows: Record<string, any>[];
+        rows: any[];
         e: MouseEvent;
     }) => any;
-    onRowMouseEnter?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
-    onRowMouseLeave?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
+    onRowMouseEnter?: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => any;
+    onRowMouseLeave?: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => any;
     onPageLimitChange?: (_arg: number) => any;
     onPageValueChange?: (_arg: number) => any;
     onSettingChange?: (_args: {
@@ -411,19 +432,19 @@ declare const _default: import("vue").DefineComponent<{
     }) => any;
     onSelectAll?: (_args: {
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => any;
     onSelectionChange?: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
         isAll: boolean;
     }) => any;
     onCellClick?: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -432,8 +453,8 @@ declare const _default: import("vue").DefineComponent<{
     }) => any;
     onCellDblclick?: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -450,23 +471,24 @@ declare const _default: import("vue").DefineComponent<{
         [key: string]: any;
     };
     minHeight: string | number;
-    columns: import("./props").Column[];
+    columns: Column[];
+    checked: unknown[];
+    emptyText: string;
     cellClass: any;
     headHeight: number;
     rowKey: any;
     scrollLoading: boolean | {
         [key: string]: any;
     };
-    showOverflowTooltip: import("./props").IOverflowTooltipProp;
     columnPick: "disabled" | "single" | "multi";
     stripe: boolean;
-    rowHeight: any;
+    rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;
     virtualEnabled: boolean;
     paginationHeight: number;
     remotePagination: boolean;
-    emptyText: string;
-    settings: import("./props").ISettingPropType;
+    acrossAll: boolean;
+    emptyCellText: any;
     rowClass: any;
     rowStyle: any;
     cellStyle: any;
@@ -479,5 +501,6 @@ declare const _default: import("vue").DefineComponent<{
     isRowSelectEnable: any;
     observerResize: boolean;
     prependStyle: import("vue").CSSProperties;
+    isFlex: boolean;
 }, {}>;
 export default _default;

package/lib/table/table.less

@@ -14,7 +14,16 @@
   position: relative;
   height: auto;
   overflow: hidden;
-  // border-bottom: 1px solid @table-border-color;
+
+  &-flex {
+    display: flex;
+    flex-direction: column;
+    max-height: fit-content;
+    .@{bk-prefix}-table-body {
+      flex: 1;
+      overflow: auto;
+    }
+  }
 
   &.has-scroll-y {
     .@{bk-prefix}-table-head {
@@ -25,9 +34,10 @@
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: auto;
+    scrollbar-gutter: stable;
 
     &::-webkit-scrollbar {
-      width: 6px;
+      width: 5px;
       height: 6px;
     }
 
@@ -49,7 +59,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: #FAFBFD;
+                background-color: #fafbfd;
               }
             }
 
@@ -79,10 +89,11 @@
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
+    transform: translateZ(0);
 
     &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
+      width: 5px;
+      height: 5px;
     }
 
     &::-webkit-scrollbar-thumb {
@@ -98,11 +109,11 @@
       align-items: center;
 
       .@{bk-prefix}-table-body-content {
+        position: relative;
         display: flex;
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
-        position: relative;
       }
 
     }
@@ -110,6 +121,7 @@
     table {
       width: 100%;
       border-collapse: collapse;
+      transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
 
@@ -118,7 +130,6 @@
         height: var(--row-height);
         min-width: 30px;
         clear: both;
-        background-color: #fff;
 
         &.expand-row {
           .expand-btn-action {
@@ -138,6 +149,11 @@
             cursor: pointer;
           }
 
+          &.explain {
+            text-decoration-style: dashed;
+            text-decoration-line: underline;
+          }
+
           .head-text {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -214,7 +230,24 @@
         background-color: @table-head-bg-color;
 
         th {
+          position: relative;
           font-weight: 400;
+          background-color: var(--background-color);
+
+          &.col-resize-hover {
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              z-index: 1;
+              width: 6px;
+              pointer-events: none;
+              background-color: #3785ff;
+              content: '';
+              transform: translateX(50%);
+            }
+          }
 
           .cell {
             display: flex;
@@ -225,6 +258,7 @@
 
           &.active,
           &:hover {
+            cursor: pointer;
             background: @table-row-active-bg-color;
           }
 
@@ -237,6 +271,8 @@
       tbody {
         tr {
           td {
+            background-color: #fff;
+
             &.empty-cell {
               padding-bottom: 30px;
             }
@@ -271,7 +307,24 @@
 
   .@{bk-prefix}-table-head {
     position: relative;
-    transform: translateX(var(--scroll-head-left));
+    z-index: 2;
+    scrollbar-gutter: stable;
+    overflow: hidden;
+
+    .col-resize-drag {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      width: 6px;
+      background-color: #3785ff;
+      transform: translateX(-50%);
+    }
+
+    thead {
+      transform: translateX(var(--scroll-head-left));
+    }
 
     .table-head-settings {
       position: absolute;
@@ -295,25 +348,17 @@
 
       > span {
         display: flex;
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-
-    .@{bk-prefix}-table-fixed {
-      .column_fixed {
-        &.column_fixed_right {
-          &.shadow {
-            box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.12);
-          }
-        }
+        width: 1em;
+        height: 1em;
       }
     }
   }
 
   .@{bk-prefix}-table-footer {
+    display: flex;
+    width: 100%;
     height: var(--footer-height);
-    line-height: var(--footer-height);
+    align-items: center;
 
     &.is-hidden {
       display: none;
@@ -389,14 +434,14 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: 0;
+    bottom: var(--footer-height);
     left: 0;
-    // width: 100%;
+    // height: var(--fix-height);
     pointer-events: none;
 
     .column_fixed {
       position: absolute;
-      transform: translate(var(--var-scroll-left),  var(--var-scroll-top));
+      z-index: 2;
 
       &.column_fixed_left {
         top: 0;
@@ -410,7 +455,6 @@
       &.column_fixed_right {
         top: 0;
         right: 0;
-        z-index: 1;
 
         &.shadow {
           box-shadow: 0 0 10px rgb(0 0 0 / 12%);
@@ -449,6 +493,6 @@
   }
 
   .stripe-row {
-    background: #FAFBFD;
+    background: #fafbfd;
   }
 }