bkui-vue 2.0.1-beta.15.table.6 → 2.0.1-beta.16

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"> & {
@@ -161,17 +162,95 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    scrollbar: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-}, () => 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<{
+}, () => 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<{
     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"> & {
@@ -329,17 +408,94 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    scrollbar: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        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;
+}, {
     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;
@@ -354,7 +510,7 @@ declare const _default: import("vue").DefineComponent<{
         [key: string]: any;
     };
     columnPick: "disabled" | "single" | "multi";
-    columns: import("./props").Column[];
+    columns: Column[];
     stripe: boolean;
     rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;

package/lib/table/table.less

@@ -13,9 +13,8 @@
 .@{bk-prefix}-table {
   position: relative;
   width: 100%;
-  height: 100%;
+  height: auto;
   overflow: hidden;
-  border-spacing: 0;
 
   &-flex {
     display: flex;
@@ -36,6 +35,7 @@
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: hidden;
+    border-bottom: 1px solid @table-border-color;
 
     .prepend-row {
       transform: translateX(var(--prepend-left));
@@ -94,12 +94,12 @@
         height: 100%;
         padding-bottom: 20px;
       }
+
     }
 
     table {
       width: 100%;
-      border-collapse: separate;
-
+      border-collapse: collapse;
       transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
@@ -158,6 +158,7 @@
           }
         }
 
+
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -168,6 +169,14 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
+
+          &.column_fixed_left {
+            left: 0;
+          }
+
+          &.column_fixed_right {
+            right: 0;
+          }
         }
 
         &.row_expend {
@@ -250,9 +259,9 @@
         tr {
           td {
             background-color: #fff;
-            border-top: 1px solid @table-bg-color;
-            border-bottom: 1px solid @table-bg-color;
-            border-right: 1px solid @table-bg-color;
+            border-top: 1px solid transparent;
+            border-bottom: 1px solid transparent;
+            border-right: 1px solid transparent;
 
             box-sizing: border-box;
 
@@ -278,7 +287,6 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
-                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -286,7 +294,7 @@
 
           &.--drag-start {
             td {
-              background: #fff !important;
+              background: #fff!important;
             }
           }
         }
@@ -376,6 +384,7 @@
     .@{bk-prefix}-table-footer {
       border-bottom: 1px solid @table-border-color;
     }
+
   }
 
   &.bordered-horizontal {
@@ -397,7 +406,7 @@
 
   &.bordered-col {
     th {
-      border-right: 1px solid var(--background-color);
+      border-right: 1px solid @table-border-color;
 
       &:last-child {
         border-right: none;
@@ -409,22 +418,27 @@
         tr {
           td {
             border-right-color: @table-border-color;
+
+            &:last-child {
+              border-right-color: transparent;
+            }
           }
         }
       }
     }
+
   }
 
   th,
   td {
-    border-right: 1px solid @table-bg-color;
+    border-right: 1px solid transparent;
   }
 
   &.bordered-none {
     th,
     td {
       border-top: none;
-      border-right: 1px solid @table-bg-color;
+      border-right: 1px solid transparent;
       border-bottom: none;
       border-left: none;
     }
@@ -434,27 +448,32 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: 0;
+    bottom: var(--footer-height);
     left: 0;
     pointer-events: none;
 
-    &.shadow-left {
-      .column_fixed_left {
-        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-      }
-    }
-
-    &.shadow-right {
-      .column_fixed_right {
-        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-      }
-    }
-
     .column_fixed {
       position: absolute;
       z-index: 2;
-      bottom: 0;
-      top: 0;
+
+      &.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%);
+        }
+      }
     }
 
     .scroll-loading {
@@ -470,13 +489,6 @@
     }
   }
 
-  .@{bk-prefix}-table-fixed-bottom {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-  }
   colgroup {
     col {
       background: @table-bg-color;
@@ -497,4 +509,4 @@
   .stripe-row {
     background: #fafbfd;
   }
-}
+}