bkui-vue 2.0.1-beta.15 → 2.0.1-beta.15.table.10

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"> & {
@@ -162,95 +161,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"> & {
@@ -408,94 +332,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,7 +360,7 @@ 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;
@@ -535,5 +385,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,8 +13,9 @@
 .@{bk-prefix}-table {
   position: relative;
   width: 100%;
-  height: auto;
+  height: 100%;
   overflow: hidden;
+  border-spacing: 0;
 
   &-flex {
     display: flex;
@@ -26,19 +27,22 @@
     }
   }
 
-  &.has-scroll-y {
-    .@{bk-prefix}-table-head {
-      padding-right: 4px;
-    }
-  }
-
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: hidden;
-    border-bottom: 1px solid @table-border-color;
 
     .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);
     }
   }
 
@@ -62,20 +66,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 +84,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;
@@ -158,7 +148,6 @@
           }
         }
 
-
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -169,14 +158,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-
-          &.column_fixed_left {
-            left: 0;
-          }
-
-          &.column_fixed_right {
-            right: 0;
-          }
         }
 
         &.row_expend {
@@ -250,7 +231,7 @@
           }
 
           &.column_fixed {
-            transform: translateX(var(--scroll-left));
+            transform: translateX(var(--translate-x));
           }
         }
       }
@@ -259,9 +240,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;
 
@@ -287,6 +268,7 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
+                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -294,7 +276,7 @@
 
           &.--drag-start {
             td {
-              background: #fff!important;
+              background: #fff !important;
             }
           }
         }
@@ -311,16 +293,23 @@
     .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 {
@@ -384,7 +373,6 @@
     .@{bk-prefix}-table-footer {
       border-bottom: 1px solid @table-border-color;
     }
-
   }
 
   &.bordered-horizontal {
@@ -406,7 +394,7 @@
 
   &.bordered-col {
     th {
-      border-right: 1px solid @table-border-color;
+      border-right: 1px solid var(--background-color);
 
       &:last-child {
         border-right: none;
@@ -418,27 +406,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 +431,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 +464,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 +491,4 @@
   .stripe-row {
     background: #fafbfd;
   }
-}
+}