bkui-vue 0.0.2-beta.8 → 0.0.2-beta.80

package/lib/table/table.variable.css

@@ -300,6 +300,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;
@@ -346,6 +351,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;
@@ -392,6 +402,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;
@@ -438,6 +453,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;
@@ -832,6 +852,7 @@
 }
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: #333;
@@ -854,6 +875,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }
@@ -1107,6 +1131,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;
 }
@@ -1115,7 +1148,7 @@
   overflow: auto;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
   height: 6px;
 }
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1126,6 +1159,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;
@@ -1141,11 +1180,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 {
@@ -1166,6 +1206,7 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
+  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -1173,6 +1214,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,
@@ -1205,6 +1247,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 +1294,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 +1344,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 +1372,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;
@@ -1338,6 +1406,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;
@@ -1364,7 +1443,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,11 +1495,14 @@
   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 {
   position: absolute;
+  z-index: 2;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
@@ -1430,7 +1514,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/use-attributes.d.ts

@@ -0,0 +1,55 @@
+import { IEmptyObject } from './const';
+import { Column, Settings, SortScope, TablePropTypes } from './props';
+export type ITableFormatData = {
+    data: any[];
+    dataSchema: WeakMap<object, any>;
+    columnSchema: WeakMap<object, any>;
+    columns: Column[];
+    settings: {
+        size: string;
+        height: number;
+    };
+    layout: {
+        bottom: number;
+        hasScrollY: boolean;
+        translateX: number;
+        translateY: number;
+    };
+};
+export type ITableResponse = {
+    formatColumns: (columns: Column[]) => void;
+    formatDataSchema: (data: any[]) => void;
+    setRowSelection: (row: any, isSelected: boolean) => void;
+    setRowExpand: (row: any, isExpand: boolean) => void;
+    setRowIndex: (row: any, index: number) => void;
+    setColumnAttribute: (col: Column, attrName: string, attrValue: ((...args: any[]) => boolean | number | void | string) | string | boolean | number) => void;
+    setColumnAttributeBySettings: (settings: Settings, checkedVal?: string[]) => void;
+    setAllColumnAttribute: (attrName: string, attrValue: ((...args: any[]) => boolean | number | void | string) | string | boolean | number) => void;
+    getColumnAttribute: (col: Column, attributeName: string) => string | boolean | Record<string, any>;
+    getColumnId: (col: Column) => string;
+    getColumnOrderWidth: (column: Column, orders?: string[]) => number;
+    isActiveColumn: (col: Column) => boolean;
+    isHiddenColumn: (col: Column) => boolean;
+    resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: SortScope) => void;
+    resetStartEndIndex: () => void;
+    toggleRowSelection: (row: any) => void;
+    toggleAllSelection: (value?: boolean) => void;
+    setAllRowExpand: (value?: boolean) => void;
+    clearSelection: () => void;
+    clearColumnSort: (reset?: boolean) => void;
+    setColumnSortActive: (column: Column, active: boolean) => void;
+    getRowAttribute: (row: any | IEmptyObject, attrName: string) => any;
+    getRowSelection: () => any[];
+    resolveColumnWidth: (root: HTMLElement, autoWidth?: any, offsetWidth?: any) => void;
+    filter: () => void;
+    sortData: (column: Column) => void;
+    isCheckedAll: () => boolean;
+    hasCheckedRow: () => boolean;
+    setRowSelectionAll: (val: boolean) => void;
+    setRowIndeterminate: () => void;
+    pageData: any[];
+    localPagination: any;
+    formatData: ITableFormatData;
+};
+declare const _default: (props: TablePropTypes) => ITableResponse;
+export default _default;

package/lib/table/use-column.d.ts

@@ -1,12 +1,186 @@
 import { ITableColumn } from './components/table-column';
-import { TablePropTypes } from './props';
+import { SORT_OPTION } from './const';
+import { Column, TablePropTypes } from './props';
 /**
  * 渲染column settings
  * @param props: TablePropTypes
  * @param targetColumns 解析之后的column配置（主要用来处理通过<bk-column>配置的数据结构）
  */
 declare const _default: (props: TablePropTypes, targetColumns: ITableColumn[]) => {
-    initColumns: (column: ITableColumn | ITableColumn[], remove?: boolean) => void;
-    getColumns: () => import("./props").Column[];
+    initColumns: (column: ITableColumn[], remove?: boolean) => void;
+    getColumns: () => {
+        label: import("./props").LabelFunctionString;
+        field?: import("./props").LabelFunctionString;
+        render?: import("./props").RenderFunctionString;
+        renderHead?: import("./props").RenderFunctionString;
+        width?: string | number;
+        minWidth?: string | number;
+        columnKey?: string;
+        showOverflowTooltip?: boolean | {
+            content: string | Function;
+            disabled?: (col: Column, row: any) => boolean;
+            watchCellResize?: boolean;
+            mode?: "auto" | "static";
+            popoverOption?: any;
+            resizerWay?: import("./props").ResizerWay;
+        };
+        type?: string;
+        fixed?: string | boolean;
+        resizable?: boolean;
+        sort?: string | boolean | {
+            sortFn?: Function;
+            sortScope?: import("./props").SortScope;
+            value?: SORT_OPTION;
+        };
+        filter?: string | boolean | {
+            list: any[];
+            filterFn?: Function;
+            match?: import("./props").FullEnum;
+            checked?: any[];
+            filterScope?: import("./props").SortScope;
+            btnSave?: string | boolean;
+            btnReset?: string | boolean;
+            height?: number;
+            maxHeight?: number;
+        };
+        colspan?: (({ column, colIndex, row, rowIndex }: {
+            column: any;
+            colIndex: any;
+            row: any;
+            rowIndex: any;
+        }) => number) | {
+            toString: (radix?: number) => string;
+            toFixed: (fractionDigits?: number) => string;
+            toExponential: (fractionDigits?: number) => string;
+            toPrecision: (precision?: number) => string;
+            valueOf: () => number;
+            toLocaleString: {
+                (locales?: string | string[], options?: Intl.NumberFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+            };
+        };
+        rowspan?: (({ column, colIndex, row, rowIndex }: {
+            column: any;
+            colIndex: any;
+            row: any;
+            rowIndex: any;
+        }) => number) | {
+            toString: (radix?: number) => string;
+            toFixed: (fractionDigits?: number) => string;
+            toExponential: (fractionDigits?: number) => string;
+            toPrecision: (precision?: number) => string;
+            valueOf: () => number;
+            toLocaleString: {
+                (locales?: string | string[], options?: Intl.NumberFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+            };
+        };
+        textAlign?: string;
+        className?: import("./props").RowClassFunctionString;
+        align?: string;
+        prop?: import("./props").LabelFunctionString;
+        index?: {
+            toString: (radix?: number) => string;
+            toFixed: (fractionDigits?: number) => string;
+            toExponential: (fractionDigits?: number) => string;
+            toPrecision: (precision?: number) => string;
+            valueOf: () => number;
+            toLocaleString: {
+                (locales?: string | string[], options?: Intl.NumberFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+            };
+        };
+        explain?: boolean | {
+            content: import("./props").LabelFunctionString;
+            head: import("./props").LabelFunctionString;
+        };
+    }[];
+    getActiveColumn: () => {
+        label: import("./props").LabelFunctionString;
+        field?: import("./props").LabelFunctionString;
+        render?: import("./props").RenderFunctionString;
+        renderHead?: import("./props").RenderFunctionString;
+        width?: string | number;
+        minWidth?: string | number;
+        columnKey?: string;
+        showOverflowTooltip?: boolean | {
+            content: string | Function;
+            disabled?: (col: Column, row: any) => boolean;
+            watchCellResize?: boolean;
+            mode?: "auto" | "static";
+            popoverOption?: any;
+            resizerWay?: import("./props").ResizerWay;
+        };
+        type?: string;
+        fixed?: string | boolean;
+        resizable?: boolean;
+        sort?: string | boolean | {
+            sortFn?: Function;
+            sortScope?: import("./props").SortScope;
+            value?: SORT_OPTION;
+        };
+        filter?: string | boolean | {
+            list: any[];
+            filterFn?: Function;
+            match?: import("./props").FullEnum;
+            checked?: any[];
+            filterScope?: import("./props").SortScope;
+            btnSave?: string | boolean;
+            btnReset?: string | boolean;
+            height?: number;
+            maxHeight?: number;
+        };
+        colspan?: (({ column, colIndex, row, rowIndex }: {
+            column: any;
+            colIndex: any;
+            row: any;
+            rowIndex: any;
+        }) => number) | {
+            toString: (radix?: number) => string;
+            toFixed: (fractionDigits?: number) => string;
+            toExponential: (fractionDigits?: number) => string;
+            toPrecision: (precision?: number) => string;
+            valueOf: () => number;
+            toLocaleString: {
+                (locales?: string | string[], options?: Intl.NumberFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+            };
+        };
+        rowspan?: (({ column, colIndex, row, rowIndex }: {
+            column: any;
+            colIndex: any;
+            row: any;
+            rowIndex: any;
+        }) => number) | {
+            toString: (radix?: number) => string;
+            toFixed: (fractionDigits?: number) => string;
+            toExponential: (fractionDigits?: number) => string;
+            toPrecision: (precision?: number) => string;
+            valueOf: () => number;
+            toLocaleString: {
+                (locales?: string | string[], options?: Intl.NumberFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+            };
+        };
+        textAlign?: string;
+        className?: import("./props").RowClassFunctionString;
+        align?: string;
+        prop?: import("./props").LabelFunctionString;
+        index?: {
+            toString: (radix?: number) => string;
+            toFixed: (fractionDigits?: number) => string;
+            toExponential: (fractionDigits?: number) => string;
+            toPrecision: (precision?: number) => string;
+            valueOf: () => number;
+            toLocaleString: {
+                (locales?: string | string[], options?: Intl.NumberFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+            };
+        };
+        explain?: boolean | {
+            content: import("./props").LabelFunctionString;
+            head: import("./props").LabelFunctionString;
+        };
+    };
 };
 export default _default;