bkui-vue 0.0.2-beta.5 → 0.0.2-beta.51

package/lib/table/table.d.ts

@@ -1,3 +1,5 @@
+import { SORT_OPTION } from './const';
+import { IColSortBehavior } from './props';
 declare const _default: import("vue").DefineComponent<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
@@ -12,14 +14,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 +38,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;
     } & {
@@ -60,23 +69,10 @@ declare const _default: import("vue").DefineComponent<{
     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;
     };
@@ -114,9 +110,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,25 +136,86 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    colSortBehavior: import("vue-types").VueTypeDef<IColSortBehavior>;
 }, () => 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: import("./props").Column;
+        index: number;
+    }) => boolean;
+    columnSort: (_args: {
+        column: import("./props").Column;
+        index: number;
+        type: SORT_OPTION;
+    }) => boolean;
+    colFilterSave: (_args: {
+        column: import("./props").Column;
+        values: unknown[];
+    }) => boolean;
+    rowClick: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _this: any) => boolean;
+    rowDblclick: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _this: any) => boolean;
+    rowExpand: (_args: {
+        row: unknown;
+        column: import("./props").Column;
+        index: Number;
+        rows: unknown[];
+        e: MouseEvent;
+    }) => boolean;
+    select: (_args: {
+        row: unknown;
+        index: Number;
+        checked: string;
+        data: unknown[];
+    }) => boolean;
+    selectAll: (_args: {
+        checked: string;
+        data: unknown[];
+    }) => boolean;
+    selectionChange: (_args: {
+        row: unknown;
+        index: Number;
+        checked: string;
+        data: unknown[];
+        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: unknown;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+    cellDblclick: (_args: {
+        event: MouseEvent;
+        row: unknown;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+    rowMouseEnter: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _this: any) => boolean;
+    rowMouseLeave: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _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[];
@@ -175,14 +230,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 +254,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;
     } & {
@@ -223,23 +285,10 @@ declare const _default: import("vue").DefineComponent<{
     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;
     };
@@ -277,9 +326,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,27 +352,89 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    colSortBehavior: import("vue-types").VueTypeDef<IColSortBehavior>;
 }>> & {
-    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: unknown;
+        index: Number;
+        checked: string;
+        data: unknown[];
+    }) => any;
+    onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
+    onColumnSort?: (_args: {
+        column: import("./props").Column;
+        index: number;
+        type: SORT_OPTION;
+    }) => any;
+    onColumnFilter?: (_args: {
+        checked: string[];
+        column: import("./props").Column;
+        index: number;
+    }) => any;
+    onColFilterSave?: (_args: {
+        column: import("./props").Column;
+        values: unknown[];
+    }) => any;
+    onRowClick?: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _this: any) => any;
+    onRowDblclick?: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _this: any) => any;
+    onRowExpand?: (_args: {
+        row: unknown;
+        column: import("./props").Column;
+        index: Number;
+        rows: unknown[];
+        e: MouseEvent;
+    }) => any;
+    onRowMouseEnter?: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _this: any) => any;
+    onRowMouseLeave?: (_e: MouseEvent, _row: unknown, _index: number, _rows: unknown[], _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: unknown[];
+    }) => any;
+    onSelectionChange?: (_args: {
+        row: unknown;
+        index: Number;
+        checked: string;
+        data: unknown[];
+        isAll: boolean;
+    }) => any;
+    onCellClick?: (_args: {
+        event: MouseEvent;
+        row: unknown;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => any;
+    onCellDblclick?: (_args: {
+        event: MouseEvent;
+        row: unknown;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => any;
 }, {
     data: any[];
+    thead: import("./props").Thead;
     height: string | number;
     maxHeight: string | number;
     border: string | ("col" | "none" | "row" | "horizontal" | "outer")[];
@@ -340,22 +449,15 @@ declare const _default: import("vue").DefineComponent<{
     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;
     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;

package/lib/table/table.less

@@ -14,7 +14,6 @@
   position: relative;
   height: auto;
   overflow: hidden;
-  // border-bottom: 1px solid @table-border-color;
 
   &.has-scroll-y {
     .@{bk-prefix}-table-head {
@@ -42,6 +41,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;
@@ -61,8 +80,8 @@
     background: @table-bg-color;
 
     &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
+      width: 5px;
+      height: 8px;
     }
 
     &::-webkit-scrollbar-thumb {
@@ -82,6 +101,7 @@
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
+        position: relative;
       }
 
     }
@@ -116,6 +136,11 @@
             cursor: pointer;
           }
 
+          &.explain {
+            text-decoration-style: dashed;
+            text-decoration-line: underline;
+          }
+
           .head-text {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -147,7 +172,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-          background: #fff;
 
           &.column_fixed_left {
             left: 0;
@@ -194,7 +218,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 +245,7 @@
           &.active,
           &:hover {
             background: @table-row-active-bg-color;
+            cursor: pointer;
           }
 
           &.column_fixed {
@@ -216,6 +257,8 @@
       tbody {
         tr {
           td {
+            background-color: #fff;
+
             &.empty-cell {
               padding-bottom: 30px;
             }
@@ -252,6 +295,17 @@
     position: relative;
     transform: translateX(var(--scroll-head-left));
 
+    .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;
       top: 0;
@@ -282,7 +336,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,8 +415,9 @@
     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 {
@@ -415,4 +472,8 @@
       margin-left: auto;
     }
   }
+
+  .stripe-row {
+    background: #FAFBFD;
+  }
 }

package/lib/table/table.variable.css

@@ -832,6 +832,7 @@
 }
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: #333;
@@ -854,6 +855,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }
@@ -1126,6 +1130,12 @@
 .bk-table .bk-table-body .prepend-row {
   transform: translateX(var(--prepend-left));
 }
+.bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
+  background-color: #FAFBFD;
+}
+.bk-table .bk-table-body-content.bk-stripe table tbody tr td {
+  border-bottom: none;
+}
 .bk-table .bk-fixed-bottom-border {
   position: sticky;
   bottom: 0;
@@ -1144,8 +1154,8 @@
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 8px;
 }
 .bk-table .bk-table-head::-webkit-scrollbar-thumb,
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1166,6 +1176,7 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
+  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -1205,6 +1216,13 @@
 .bk-table .bk-table-body table td .cell.has-sort {
   cursor: pointer;
 }
+.bk-table .bk-table-head table th .cell.explain,
+.bk-table .bk-table-body table th .cell.explain,
+.bk-table .bk-table-head table td .cell.explain,
+.bk-table .bk-table-body table td .cell.explain {
+  text-decoration-style: dashed;
+  text-decoration-line: underline;
+}
 .bk-table .bk-table-head table th .cell .head-text,
 .bk-table .bk-table-body table th .cell .head-text,
 .bk-table .bk-table-head table td .cell .head-text,
@@ -1245,7 +1263,6 @@
 .bk-table .bk-table-body table td.column_fixed {
   position: sticky;
   z-index: 1;
-  background: #fff;
 }
 .bk-table .bk-table-head table th.column_fixed.column_fixed_left,
 .bk-table .bk-table-body table th.column_fixed.column_fixed_left,
@@ -1296,6 +1313,21 @@
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   font-weight: 400;
+  background-color: var(--background-color);
+  position: relative;
+}
+.bk-table .bk-table-head table thead th.col-resize-hover::after,
+.bk-table .bk-table-body table thead th.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;
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1309,11 +1341,16 @@
 .bk-table .bk-table-head table thead th:hover,
 .bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
+  cursor: pointer;
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--scroll-left));
 }
+.bk-table .bk-table-head table tbody tr td,
+.bk-table .bk-table-body table tbody tr td {
+  background-color: #fff;
+}
 .bk-table .bk-table-head table tbody tr td.empty-cell,
 .bk-table .bk-table-body table tbody tr td.empty-cell {
   padding-bottom: 30px;
@@ -1339,6 +1376,16 @@
   position: relative;
   transform: translateX(var(--scroll-head-left));
 }
+.bk-table .bk-table-head .col-resize-drag {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  transform: translateX(-50%);
+  background-color: #3785FF;
+  z-index: 1;
+}
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
   top: 0;
@@ -1364,7 +1411,9 @@
 }
 .bk-table .bk-table-footer {
   height: var(--footer-height);
-  line-height: var(--footer-height);
+  width: 100%;
+  display: flex;
+  align-items: center;
 }
 .bk-table .bk-table-footer.is-hidden {
   display: none;
@@ -1414,7 +1463,9 @@
   top: 0;
   right: 0;
   bottom: var(--footer-height);
+  max-height: var(--fix-max-height);
   left: 0;
+  height: var(--fix-height);
   pointer-events: none;
 }
 .bk-table .bk-table-fixed .column_fixed {
@@ -1453,3 +1504,6 @@
 .bk-table .bk-pagination .is-last {
   margin-left: auto;
 }
+.bk-table .stripe-row {
+  background: #FAFBFD;
+}