bkui-vue 2.0.1-beta.22 → 2.0.1-beta.24

package/lib/table/table.d.ts

@@ -1,10 +1,9 @@
-import { Column } from './props';
 declare const _default: import("vue").DefineComponent<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
     };
-    columns: import("vue-types").VueTypeDef<Column[]> & {
-        default: () => Column[];
+    columns: import("vue-types").VueTypeDef<import("./props").Column[]> & {
+        default: () => import("./props").Column[];
     };
     activeColumn: import("vue-types").VueTypeDef<number | number[]>;
     columnPick: import("vue-types").VueTypeDef<"disabled" | "single" | "multi"> & {
@@ -24,9 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     maxHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber> & {
-        default: import("./props").RowHeightFunctionNumber;
-    };
+    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber>;
     headHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -162,95 +159,20 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    columnPick: (_cols: import("./props").IColumnActive[]) => boolean;
-    columnFilter: (_args: {
-        checked: string[];
-        column: Column;
-        index: number;
-    }) => boolean;
-    columnSort: (_args: {
-        column: Column;
-        index: number;
-        type: import("./const").SORT_OPTION;
-    }) => boolean;
-    colFilterSave: (_args: {
-        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: Column;
-        index: number;
-        rows: any[];
-        e: MouseEvent;
-    }) => boolean;
-    select: (_args: {
-        row: any;
-        index: number;
-        checked: string;
-        data: any[];
-    }) => boolean;
-    selectAll: (_args: {
-        checked: string;
-        data: any[];
-    }) => boolean;
-    selectionChange: (_args: {
-        row: any;
-        index: number;
-        checked: string;
-        data: any[];
-        isAll: boolean;
-    }) => boolean;
-    pageLimitChange: (_arg: number) => boolean;
-    pageValueChange: (_arg: number) => boolean;
-    settingChange: (_args: {
-        checked: string[];
-        size: string;
-        height: number;
-        fields: Record<string, any>[];
-    }) => boolean;
-    scrollBottom: (_args: {
-        translateX: number;
-        translateY: number;
-        scrollTop: number;
-        scrollLeft: number;
-        bottom: number;
-    }) => boolean;
-    cellClick: (_args: {
-        event: MouseEvent;
-        row: any;
-        column: Column;
-        cell: {
-            getValue: () => string;
-        };
-        rowIndex: number;
-        columnIndex: number;
-    }) => boolean;
-    cellDblclick: (_args: {
-        event: MouseEvent;
-        row: any;
-        column: Column;
-        cell: {
-            getValue: () => string;
-        };
-        rowIndex: number;
-        columnIndex: number;
-    }) => 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;
-    dragend: (_args: {
-        sourceEvent: DragEvent;
-        data: any[];
-    }) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scrollbar: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fixedBottom: import("vue-types").VueTypeDef<import("./props").FixedBottomOption> & {
+        default: () => import("./props").FixedBottomOption;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, (...args: 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<Column[]> & {
-        default: () => Column[];
+    columns: import("vue-types").VueTypeDef<import("./props").Column[]> & {
+        default: () => import("./props").Column[];
     };
     activeColumn: import("vue-types").VueTypeDef<number | number[]>;
     columnPick: import("vue-types").VueTypeDef<"disabled" | "single" | "multi"> & {
@@ -270,9 +192,7 @@ declare const _default: import("vue").DefineComponent<{
     maxHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber> & {
-        default: import("./props").RowHeightFunctionNumber;
-    };
+    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber>;
     headHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -408,94 +328,20 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-}>> & {
-    onDragend?: (_args: {
-        sourceEvent: DragEvent;
-        data: any[];
-    }) => any;
-    onSelect?: (_args: {
-        row: any;
-        index: number;
-        checked: string;
-        data: any[];
-    }) => any;
-    onCellClick?: (_args: {
-        event: MouseEvent;
-        row: any;
-        column: Column;
-        cell: {
-            getValue: () => string;
-        };
-        rowIndex: number;
-        columnIndex: number;
-    }) => any;
-    onCellDblclick?: (_args: {
-        event: MouseEvent;
-        row: any;
-        column: Column;
-        cell: {
-            getValue: () => string;
-        };
-        rowIndex: number;
-        columnIndex: number;
-    }) => any;
-    onColumnFilter?: (_args: {
-        checked: string[];
-        column: Column;
-        index: number;
-    }) => any;
-    onColFilterSave?: (_args: {
-        column: Column;
-        values: any[];
-    }) => any;
-    onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
-    onColumnSort?: (_args: {
-        column: Column;
-        index: number;
-        type: import("./const").SORT_OPTION;
-    }) => any;
-    onPageLimitChange?: (_arg: number) => any;
-    onPageValueChange?: (_arg: number) => 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: Column;
-        index: number;
-        rows: any[];
-        e: MouseEvent;
-    }) => 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;
-    onSelectAll?: (_args: {
-        checked: string;
-        data: any[];
-    }) => any;
-    onSelectionChange?: (_args: {
-        row: any;
-        index: number;
-        checked: string;
-        data: any[];
-        isAll: boolean;
-    }) => any;
-    onScrollBottom?: (_args: {
-        translateX: number;
-        translateY: number;
-        scrollTop: number;
-        scrollLeft: number;
-        bottom: number;
-    }) => any;
-    onSettingChange?: (_args: {
-        checked: string[];
-        size: string;
-        height: number;
-        fields: Record<string, any>[];
-    }) => any;
-}, {
+    scrollbar: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fixedBottom: import("vue-types").VueTypeDef<import("./props").FixedBottomOption> & {
+        default: () => import("./props").FixedBottomOption;
+    };
+}>>, {
     data: any[];
     thead: import("./props").Thead;
     height: string | number;
     maxHeight: string | number;
+    scrollbar: boolean;
     border: string | ("col" | "none" | "row" | "horizontal" | "outer")[];
     pagination: boolean | {
         [key: string]: any;
@@ -510,9 +356,8 @@ declare const _default: import("vue").DefineComponent<{
         [key: string]: any;
     };
     columnPick: "disabled" | "single" | "multi";
-    columns: Column[];
+    columns: import("./props").Column[];
     stripe: boolean;
-    rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;
     sortValFormat: any[];
     virtualEnabled: boolean;
@@ -535,5 +380,6 @@ declare const _default: import("vue").DefineComponent<{
     isFlex: boolean;
     rowDraggable: any;
     shiftMultiChecked: boolean;
+    fixedBottom: import("./props").FixedBottomOption;
 }, {}>;
 export default _default;

package/lib/table/table.less

@@ -13,32 +13,30 @@
 .@{bk-prefix}-table {
   position: relative;
   width: 100%;
-  height: auto;
+  height: 100%;
   overflow: hidden;
-
-  &-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 {
-      padding-right: 4px;
-    }
-  }
+  border-spacing: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: fit-content;
 
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: hidden;
-    border-bottom: 1px solid @table-border-color;
+    flex: 1;
 
     .prepend-row {
-      transform: translateX(var(--prepend-left));
+      transform: translate3d(var(--translate-x), 0, 0);
+    }
+
+    .resize-column {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 1px;
+      background-color: #3785ff;
+      transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
     }
   }
 
@@ -49,7 +47,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: #fafbfd;
+                background-color: @table-strip-color;
               }
             }
 
@@ -62,20 +60,6 @@
     }
   }
 
-  .@{bk-prefix}-fixed-bottom-border {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    border-top: 1px solid @table-border-color;
-    transform: translateX(var(--scroll-head-left));
-
-    &._is-empty {
-      display: none;
-    }
-  }
-
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
@@ -94,12 +78,12 @@
         height: 100%;
         padding-bottom: 20px;
       }
-
     }
 
     table {
       width: 100%;
-      border-collapse: collapse;
+      border-collapse: separate;
+
       transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
@@ -147,6 +131,9 @@
           &.selection {
             padding: 0;
             text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
 
           &.expand-cell {
@@ -158,7 +145,6 @@
           }
         }
 
-
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -169,14 +155,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-
-          &.column_fixed_left {
-            left: 0;
-          }
-
-          &.column_fixed_right {
-            right: 0;
-          }
         }
 
         &.row_expend {
@@ -233,6 +211,11 @@
               background-color: #3785ff;
               content: '';
               transform: translateX(50%);
+              cursor: col-resize;
+            }
+
+            .cell {
+              cursor: col-resize;
             }
           }
 
@@ -250,7 +233,7 @@
           }
 
           &.column_fixed {
-            transform: translateX(var(--scroll-left));
+            transform: translateX(var(--translate-x));
           }
         }
       }
@@ -259,9 +242,9 @@
         tr {
           td {
             background-color: #fff;
-            border-top: 1px solid transparent;
-            border-bottom: 1px solid transparent;
-            border-right: 1px solid transparent;
+            border-top: 1px solid @table-bg-color;
+            border-bottom: 1px solid @table-bg-color;
+            border-right: 1px solid @table-bg-color;
 
             box-sizing: border-box;
 
@@ -272,7 +255,7 @@
             .cell {
               display: block;
               width: 100%;
-              line-height: calc(var(--row-height) - 2px);
+              line-height: calc(var(--row-height) - 4px);
               box-sizing: border-box;
 
               &.drag {
@@ -287,6 +270,7 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
+                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -294,7 +278,7 @@
 
           &.--drag-start {
             td {
-              background: #fff!important;
+              background: #fff !important;
             }
           }
         }
@@ -307,20 +291,28 @@
     z-index: 2;
     overflow: hidden;
     background-color: var(--background-color);
+    height: var(--row-height);
 
     .col-resize-drag {
       position: absolute;
       top: 0;
-      right: 0;
+      left: 0;
       bottom: 0;
       z-index: 1;
       width: 6px;
       background-color: #3785ff;
-      transform: translateX(-50%);
+      transform: translate3d(var(--drag-offset-h-x), 0, 0);
+      &:hover {
+        cursor: ew-resize !important;
+      }
+    }
+
+    .@{bk-prefix}-table-fixed {
+      transform: translate3d(0, 0, 0);
     }
 
     thead {
-      transform: translateX(var(--scroll-head-left));
+      transform: translate3d(var(--translate-x-1), 0, 0);
     }
 
     .table-head-settings {
@@ -380,19 +372,11 @@
     border-top: 1px solid @table-border-color;
     border-right: 1px solid @table-border-color;
     border-left: 1px solid @table-border-color;
-
-    .@{bk-prefix}-table-footer {
-      border-bottom: 1px solid @table-border-color;
-    }
-
   }
 
   &.bordered-horizontal {
     border-top: 1px solid @table-border-color;
-
-    .@{bk-prefix}-table-footer {
-      border-bottom: 1px solid @table-border-color;
-    }
+    border-bottom: 1px solid @table-border-color;
   }
 
   &.bordered-outer,
@@ -418,27 +402,22 @@
         tr {
           td {
             border-right-color: @table-border-color;
-
-            &:last-child {
-              border-right-color: transparent;
-            }
           }
         }
       }
     }
-
   }
 
   th,
   td {
-    border-right: 1px solid transparent;
+    border-right: 1px solid @table-bg-color;
   }
 
   &.bordered-none {
     th,
     td {
       border-top: none;
-      border-right: 1px solid transparent;
+      border-right: 1px solid @table-bg-color;
       border-bottom: none;
       border-left: none;
     }
@@ -448,32 +427,24 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: var(--footer-height);
+    bottom: 0;
     left: 0;
     pointer-events: none;
+    transform: translate3d(var(--translate-x), var(--translate-y), 0);
+
+    .column_fixed_right {
+      box-shadow: var(--shadow-right);
+    }
+
+    .column_fixed_left {
+      box-shadow: var(--shadow-left);
+    }
 
     .column_fixed {
       position: absolute;
       z-index: 2;
-
-      &.column_fixed_left {
-        top: 0;
-        left: 0;
-
-        &.shadow {
-          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-        }
-      }
-
-      &.column_fixed_right {
-        top: 0;
-        right: 0;
-
-
-        &.shadow {
-          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-        }
-      }
+      bottom: 0;
+      top: 0;
     }
 
     .scroll-loading {
@@ -489,6 +460,13 @@
     }
   }
 
+  .@{bk-prefix}-table-fixed-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+  }
   colgroup {
     col {
       background: @table-bg-color;
@@ -509,4 +487,4 @@
   .stripe-row {
     background: #fafbfd;
   }
-}
+}