bkui-vue 0.0.2-beta.9 → 0.0.2-beta.91

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: fit-content;
+}
+.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 {
@@ -1025,11 +1058,12 @@
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
+  transform: translateZ(0);
 }
 .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 {
@@ -1058,6 +1092,7 @@
   border-collapse: collapse;
   table-layout: fixed;
   align-self: flex-start;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head table th,
 .bk-table .bk-table-body table th,
@@ -1066,7 +1101,6 @@
   height: var(--row-height);
   min-width: 30px;
   clear: both;
-  background-color: #fff;
 }
 .bk-table .bk-table-head table th.expand-row .expand-btn-action,
 .bk-table .bk-table-body table th.expand-row .expand-btn-action,
@@ -1091,6 +1125,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,
@@ -1181,6 +1222,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 {
@@ -1194,11 +1250,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;
@@ -1223,6 +1284,17 @@
 .bk-table .bk-table-head {
   position: relative;
   transform: translateX(var(--scroll-head-left));
+  z-index: 2;
+}
+.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;
@@ -1247,12 +1319,11 @@
   width: 1rem;
   height: 1rem;
 }
-.bk-table .bk-table-head .bk-table-fixed .column_fixed.column_fixed_right.shadow {
-  box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.12);
-}
 .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;
@@ -1301,13 +1372,15 @@
   position: absolute;
   top: 0;
   right: 0;
-  bottom: 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 {
   position: absolute;
-  transform: translate(var(--var-scroll-left), var(--var-scroll-top));
+  z-index: 2;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
@@ -1319,7 +1392,6 @@
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right {
   top: 0;
   right: 0;
-  z-index: 1;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);

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"> & {
@@ -23,8 +24,8 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -64,12 +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<import("./props").ISettingPropType> & {
-        default: boolean | (() => import("./props").Settings);
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType>;
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -99,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;
     } & {
@@ -107,14 +119,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp> & {
-        default: boolean | (() => {
-            content: string | Function;
-            disabled?: boolean;
-            watchCellResize?: boolean;
-            mode?: "auto" | "static";
-        });
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp>;
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -140,46 +145,52 @@ 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: (_cols: import("./props").IColumnActive[]) => boolean;
     columnFilter: (_args: {
         checked: string[];
-        column: import("./props").Column;
+        column: Column;
         index: number;
     }) => boolean;
     columnSort: (_args: {
-        column: import("./props").Column;
+        column: Column;
         index: number;
         type: import("./const").SORT_OPTION;
     }) => boolean;
     colFilterSave: (_args: {
-        column: import("./props").Column;
-        values: Record<string, any>[];
+        column: Column;
+        values: any[];
     }) => boolean;
-    rowClick: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
-    rowDblclick: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: 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: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         index: Number;
-        rows: Record<string, any>[];
+        rows: any[];
         e: MouseEvent;
     }) => boolean;
     select: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => boolean;
     selectAll: (_args: {
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => boolean;
     selectionChange: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
         isAll: boolean;
     }) => boolean;
     pageLimitChange: (_arg: number) => boolean;
@@ -199,8 +210,8 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     cellClick: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -209,22 +220,22 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     cellDblclick: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
         rowIndex: number;
         columnIndex: number;
     }) => boolean;
-    rowMouseEnter: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
-    rowMouseLeave: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => 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"> & {
@@ -244,8 +255,8 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -285,12 +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<import("./props").ISettingPropType> & {
-        default: boolean | (() => import("./props").Settings);
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType>;
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -320,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;
     } & {
@@ -328,14 +350,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp> & {
-        default: boolean | (() => {
-            content: string | Function;
-            disabled?: boolean;
-            watchCellResize?: boolean;
-            mode?: "auto" | "static";
-        });
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp>;
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -361,39 +376,45 @@ 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: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => any;
     onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
     onColumnSort?: (_args: {
-        column: import("./props").Column;
+        column: Column;
         index: number;
         type: import("./const").SORT_OPTION;
     }) => any;
     onColumnFilter?: (_args: {
         checked: string[];
-        column: import("./props").Column;
+        column: Column;
         index: number;
     }) => any;
     onColFilterSave?: (_args: {
-        column: import("./props").Column;
-        values: Record<string, any>[];
+        column: Column;
+        values: any[];
     }) => any;
-    onRowClick?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
-    onRowDblclick?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: 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: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         index: Number;
-        rows: Record<string, any>[];
+        rows: any[];
         e: MouseEvent;
     }) => any;
-    onRowMouseEnter?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
-    onRowMouseLeave?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => 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: {
@@ -411,19 +432,19 @@ declare const _default: import("vue").DefineComponent<{
     }) => any;
     onSelectAll?: (_args: {
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
     }) => any;
     onSelectionChange?: (_args: {
-        row: Record<string, any>;
+        row: any;
         index: Number;
         checked: string;
-        data: Record<string, any>[];
+        data: any[];
         isAll: boolean;
     }) => any;
     onCellClick?: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -432,8 +453,8 @@ declare const _default: import("vue").DefineComponent<{
     }) => any;
     onCellDblclick?: (_args: {
         event: MouseEvent;
-        row: Record<string, any>;
-        column: import("./props").Column;
+        row: any;
+        column: Column;
         cell: {
             getValue: () => string;
         };
@@ -450,23 +471,24 @@ declare const _default: import("vue").DefineComponent<{
         [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: import("./props").IOverflowTooltipProp;
     columnPick: "disabled" | "single" | "multi";
     stripe: boolean;
-    rowHeight: any;
+    rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;
     virtualEnabled: boolean;
     paginationHeight: number;
     remotePagination: boolean;
+    acrossAll: boolean;
     emptyText: string;
-    settings: import("./props").ISettingPropType;
+    emptyCellText: any;
     rowClass: any;
     rowStyle: any;
     cellStyle: any;
@@ -479,5 +501,6 @@ declare const _default: import("vue").DefineComponent<{
     isRowSelectEnable: any;
     observerResize: boolean;
     prependStyle: import("vue").CSSProperties;
+    isFlex: boolean;
 }, {}>;
 export default _default;