bkui-vue 0.0.2-beta.7 → 0.0.2-beta.70

package/lib/table/table.css

@@ -178,6 +178,11 @@
   border-color: #5594fa;
   color: white;
 }
+.bk-button.bk-button-primary.is-outline:active {
+  background-color: #2c77f4;
+  border-color: #2c77f4;
+  color: white;
+}
 .bk-button.bk-button-primary.is-text {
   color: #3a84ff;
   background-color: transparent;
@@ -224,6 +229,11 @@
   border-color: #ffb848;
   color: white;
 }
+.bk-button.bk-button-warning.is-outline:active {
+  background-color: #eb9000;
+  border-color: #eb9000;
+  color: white;
+}
 .bk-button.bk-button-warning.is-text {
   color: #ff9c01;
   background-color: transparent;
@@ -270,6 +280,11 @@
   border-color: #45e35f;
   color: white;
 }
+.bk-button.bk-button-success.is-outline:active {
+  background-color: #1ab943;
+  border-color: #1ab943;
+  color: white;
+}
 .bk-button.bk-button-success.is-text {
   color: #2dcb56;
   background-color: transparent;
@@ -316,6 +331,11 @@
   border-color: #ff5656;
   color: white;
 }
+.bk-button.bk-button-danger.is-outline:active {
+  background-color: #db2626;
+  border-color: #db2626;
+  color: white;
+}
 .bk-button.bk-button-danger.is-text {
   color: #ea3636;
   background-color: transparent;
@@ -710,6 +730,7 @@
 }
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: #333;
@@ -732,6 +753,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }
@@ -985,6 +1009,15 @@
   height: auto;
   overflow: hidden;
 }
+.bk-table-flex {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+.bk-table-flex .bk-table-body {
+  flex: 1;
+  overflow: auto;
+}
 .bk-table.has-scroll-y .bk-table-head {
   padding-right: 4px;
 }
@@ -993,7 +1026,7 @@
   overflow: auto;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
   height: 6px;
 }
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1004,6 +1037,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;
@@ -1022,8 +1061,8 @@
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 5px;
 }
 .bk-table .bk-table-head::-webkit-scrollbar-thumb,
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1044,6 +1083,7 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
+  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -1083,6 +1123,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,
@@ -1123,7 +1170,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,
@@ -1174,6 +1220,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 {
@@ -1187,11 +1248,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;
@@ -1217,6 +1283,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;
@@ -1242,7 +1318,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;
@@ -1292,7 +1370,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 {
@@ -1331,3 +1411,6 @@
 .bk-table .bk-pagination .is-last {
   margin-left: auto;
 }
+.bk-table .stripe-row {
+  background: #FAFBFD;
+}

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,91 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    colSortBehavior: import("vue-types").VueTypeDef<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: 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: 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: import("./props").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: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+    cellDblclick: (_args: {
+        event: MouseEvent;
+        row: any;
+        column: import("./props").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[];
@@ -175,14 +235,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 +259,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 +290,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 +331,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 +357,94 @@ declare const _default: import("vue").DefineComponent<{
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    colSortBehavior: import("vue-types").VueTypeDef<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: 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: 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: import("./props").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: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => any;
+    onCellDblclick?: (_args: {
+        event: MouseEvent;
+        row: any;
+        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 +459,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;
@@ -368,5 +480,6 @@ declare const _default: import("vue").DefineComponent<{
     isRowSelectEnable: any;
     observerResize: boolean;
     prependStyle: import("vue").CSSProperties;
+    isFlex: boolean;
 }, {}>;
 export default _default;