bkui-vue 0.0.2-beta.1 → 0.0.2-beta.100

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"> & {
@@ -12,14 +13,19 @@ declare const _default: import("vue").DefineComponent<{
     height: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    stripe: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     minHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
     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;
@@ -31,7 +37,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
+    thead: import("vue-types").VueTypeDef<import("./props").Thead> & {
+        default: () => import("./props").Thead;
+    };
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -57,26 +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<boolean | {
-        fields: import("./props").Field[] | (() => import("./props").Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    }> & {
-        default: boolean | (() => {
-            fields: import("./props").Field[] | (() => import("./props").Field[]);
-            checked: string[] | (() => string[]);
-            limit: number;
-            size: "small" | "medium" | "large";
-            sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-        });
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType>;
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -106,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;
     } & {
@@ -114,9 +119,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | import("./props").IOverflowTooltip> & {
-        default: boolean | (() => import("./props").IOverflowTooltip);
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp>;
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -142,31 +145,97 @@ 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: (..._args: any[]) => boolean;
-    columnFilter: (..._args: any[]) => boolean;
-    columnSort: (..._args: any[]) => boolean;
-    colFilterSave: (..._args: any[]) => boolean;
-    rowClick: (..._args: any[]) => boolean;
-    rowDblclick: (..._args: any[]) => boolean;
-    rowExpand: (..._args: any[]) => boolean;
-    select: (..._args: any[]) => boolean;
-    selectAll: (..._args: any[]) => boolean;
-    selectionChange: (..._args: any[]) => boolean;
-    pageLimitChange: (..._args: any[]) => boolean;
-    pageValueChange: (..._args: any[]) => boolean;
-    settingChange: (..._args: any[]) => boolean;
-    scrollBottom: (..._args: any[]) => boolean;
-    cellClick: (..._args: any[]) => boolean;
-    cellDblclick: (..._args: any[]) => boolean;
-    rowMouseEnter: (..._args: any[]) => boolean;
-    rowMouseLeave: (..._args: any[]) => boolean;
+    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;
 }, 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"> & {
@@ -175,14 +244,19 @@ declare const _default: import("vue").DefineComponent<{
     height: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    stripe: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     minHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
     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;
@@ -194,7 +268,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
+    thead: import("vue-types").VueTypeDef<import("./props").Thead> & {
+        default: () => import("./props").Thead;
+    };
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -220,26 +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<boolean | {
-        fields: import("./props").Field[] | (() => import("./props").Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    }> & {
-        default: boolean | (() => {
-            fields: import("./props").Field[] | (() => import("./props").Field[]);
-            checked: string[] | (() => string[]);
-            limit: number;
-            size: "small" | "medium" | "large";
-            sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-        });
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType>;
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -269,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;
     } & {
@@ -277,9 +350,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | import("./props").IOverflowTooltip> & {
-        default: boolean | (() => import("./props").IOverflowTooltip);
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp>;
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -305,57 +376,119 @@ 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: any[]) => any;
-    onColumnPick?: (...args: any[]) => any;
-    onColumnSort?: (...args: any[]) => any;
-    onColumnFilter?: (...args: any[]) => any;
-    onColFilterSave?: (...args: any[]) => any;
-    onRowClick?: (...args: any[]) => any;
-    onRowDblclick?: (...args: any[]) => any;
-    onRowExpand?: (...args: any[]) => any;
-    onRowMouseEnter?: (...args: any[]) => any;
-    onRowMouseLeave?: (...args: any[]) => any;
-    onPageLimitChange?: (...args: any[]) => any;
-    onPageValueChange?: (...args: any[]) => any;
-    onSettingChange?: (...args: any[]) => any;
-    onScrollBottom?: (...args: any[]) => any;
-    onSelectAll?: (...args: any[]) => any;
-    onSelectionChange?: (...args: any[]) => any;
-    onCellClick?: (...args: any[]) => any;
-    onCellDblclick?: (...args: any[]) => any;
+    onSelect?: (_args: {
+        row: any;
+        index: Number;
+        checked: string;
+        data: any[];
+    }) => any;
+    onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
+    onColumnSort?: (_args: {
+        column: Column;
+        index: number;
+        type: import("./const").SORT_OPTION;
+    }) => any;
+    onColumnFilter?: (_args: {
+        checked: string[];
+        column: Column;
+        index: number;
+    }) => any;
+    onColFilterSave?: (_args: {
+        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: 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;
+    onPageLimitChange?: (_arg: number) => any;
+    onPageValueChange?: (_arg: number) => any;
+    onSettingChange?: (_args: {
+        checked: string[];
+        size: string;
+        height: number;
+        fields: Record<string, any>[];
+    }) => any;
+    onScrollBottom?: (_args: {
+        translateX: number;
+        translateY: number;
+        scrollTop: number;
+        scrollLeft: number;
+        bottom: number;
+    }) => any;
+    onSelectAll?: (_args: {
+        checked: string;
+        data: any[];
+    }) => any;
+    onSelectionChange?: (_args: {
+        row: any;
+        index: Number;
+        checked: string;
+        data: any[];
+        isAll: boolean;
+    }) => 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;
 }, {
-    pagination: boolean | {
-        [key: string]: any;
-    };
     data: any[];
+    thead: import("./props").Thead;
     height: string | number;
     maxHeight: string | number;
     border: string | ("col" | "none" | "row" | "horizontal" | "outer")[];
+    pagination: boolean | {
+        [key: string]: any;
+    };
     minHeight: string | number;
-    columns: import("./props").Column[];
+    columns: Column[];
+    checked: unknown[];
     cellClass: any;
     headHeight: number;
     rowKey: any;
     scrollLoading: boolean | {
         [key: string]: any;
     };
-    showOverflowTooltip: boolean | import("./props").IOverflowTooltip;
     columnPick: "disabled" | "single" | "multi";
-    rowHeight: any;
+    stripe: boolean;
+    rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;
     virtualEnabled: boolean;
     paginationHeight: number;
     remotePagination: boolean;
+    acrossAll: boolean;
     emptyText: string;
-    settings: boolean | {
-        fields: import("./props").Field[] | (() => import("./props").Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    };
+    emptyCellText: any;
     rowClass: any;
     rowStyle: any;
     cellStyle: any;
@@ -368,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 {
@@ -27,7 +36,7 @@
     overflow: auto;
 
     &::-webkit-scrollbar {
-      width: 6px;
+      width: 5px;
       height: 6px;
     }
 
@@ -42,6 +51,26 @@
     }
   }
 
+  .@{bk-prefix}-table-body-content {
+    &.@{bk-prefix}-stripe {
+      table {
+        tbody {
+          tr {
+            &:nth-child(even) {
+              td {
+                background-color: #FAFBFD;
+              }
+            }
+
+            td {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .@{bk-prefix}-fixed-bottom-border {
     position: sticky;
     bottom: 0;
@@ -59,10 +88,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 {
@@ -82,6 +112,7 @@
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
+        position: relative;
       }
 
     }
@@ -91,6 +122,7 @@
       border-collapse: collapse;
       table-layout: fixed;
       align-self: flex-start;
+      transform: translateZ(0);
 
       th,
       td {
@@ -116,6 +148,11 @@
             cursor: pointer;
           }
 
+          &.explain {
+            text-decoration-style: dashed;
+            text-decoration-line: underline;
+          }
+
           .head-text {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -147,7 +184,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-          background: #fff;
 
           &.column_fixed_left {
             left: 0;
@@ -194,7 +230,23 @@
 
         th {
           font-weight: 400;
-
+          background-color: var(--background-color);
+          position: relative;
+
+          &.col-resize-hover {
+            &::after {
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              width: 6px;
+              transform: translateX(50%);
+              background-color: #3785FF;
+              z-index: 1;
+              pointer-events: none;
+            }
+          }
           .cell {
             display: flex;
             align-items: center;
@@ -205,6 +257,7 @@
           &.active,
           &:hover {
             background: @table-row-active-bg-color;
+            cursor: pointer;
           }
 
           &.column_fixed {
@@ -216,6 +269,8 @@
       tbody {
         tr {
           td {
+            background-color: #fff;
+
             &.empty-cell {
               padding-bottom: 30px;
             }
@@ -251,6 +306,18 @@
   .@{bk-prefix}-table-head {
     position: relative;
     transform: translateX(var(--scroll-head-left));
+    z-index: 2;
+
+    .col-resize-drag {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 6px;
+      transform: translateX(-50%);
+      background-color: #3785FF;
+      z-index: 1;
+    }
 
     .table-head-settings {
       position: absolute;
@@ -282,7 +349,9 @@
 
   .@{bk-prefix}-table-footer {
     height: var(--footer-height);
-    line-height: var(--footer-height);
+    width: 100%;
+    display: flex;
+    align-items: center;
 
     &.is-hidden {
       display: none;
@@ -359,12 +428,14 @@
     top: 0;
     right: 0;
     bottom: var(--footer-height);
+    max-height: var(--fix-max-height);
     left: 0;
-    // width: 100%;
+    height: var(--fix-height);
     pointer-events: none;
 
     .column_fixed {
       position: absolute;
+      z-index: 2;
 
       &.column_fixed_left {
         top: 0;
@@ -378,7 +449,6 @@
       &.column_fixed_right {
         top: 0;
         right: 0;
-        z-index: 1;
 
         &.shadow {
           box-shadow: 0 0 10px rgb(0 0 0 / 12%);
@@ -415,4 +485,8 @@
       margin-left: auto;
     }
   }
+
+  .stripe-row {
+    background: #FAFBFD;
+  }
 }