bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.1

package/lib/table/table.less

@@ -18,7 +18,7 @@
   &-flex {
     display: flex;
     flex-direction: column;
-    max-height: 100%;
+    max-height: fit-content;
     .@{bk-prefix}-table-body {
       flex: 1;
       overflow: auto;
@@ -34,6 +34,7 @@
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: auto;
+    scrollbar-gutter: stable;
 
     &::-webkit-scrollbar {
       width: 5px;
@@ -58,7 +59,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: #FAFBFD;
+                background-color: #fafbfd;
               }
             }
 
@@ -108,11 +109,11 @@
       align-items: center;
 
       .@{bk-prefix}-table-body-content {
+        position: relative;
         display: flex;
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
-        position: relative;
       }
 
     }
@@ -120,9 +121,9 @@
     table {
       width: 100%;
       border-collapse: collapse;
+      transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
-      transform: translateZ(0);
 
       th,
       td {
@@ -229,24 +230,25 @@
         background-color: @table-head-bg-color;
 
         th {
+          position: relative;
           font-weight: 400;
           background-color: var(--background-color);
-          position: relative;
 
           &.col-resize-hover {
             &::after {
-              content: '';
               position: absolute;
-              right: 0;
               top: 0;
+              right: 0;
               bottom: 0;
-              width: 6px;
-              transform: translateX(50%);
-              background-color: #3785FF;
               z-index: 1;
+              width: 6px;
               pointer-events: none;
+              background-color: #3785ff;
+              content: '';
+              transform: translateX(50%);
             }
           }
+
           .cell {
             display: flex;
             align-items: center;
@@ -256,8 +258,8 @@
 
           &.active,
           &:hover {
-            background: @table-row-active-bg-color;
             cursor: pointer;
+            background: @table-row-active-bg-color;
           }
 
           &.column_fixed {
@@ -305,18 +307,23 @@
 
   .@{bk-prefix}-table-head {
     position: relative;
-    transform: translateX(var(--scroll-head-left));
     z-index: 2;
+    scrollbar-gutter: stable;
+    overflow: hidden;
 
     .col-resize-drag {
       position: absolute;
-      right: 0;
       top: 0;
+      right: 0;
       bottom: 0;
+      z-index: 1;
       width: 6px;
+      background-color: #3785ff;
       transform: translateX(-50%);
-      background-color: #3785FF;
-      z-index: 1;
+    }
+
+    thead {
+      transform: translateX(var(--scroll-head-left));
     }
 
     .table-head-settings {
@@ -341,16 +348,16 @@
 
       > span {
         display: flex;
-        width: 1rem;
-        height: 1rem;
+        width: 1em;
+        height: 1em;
       }
     }
   }
 
   .@{bk-prefix}-table-footer {
-    height: var(--footer-height);
-    width: 100%;
     display: flex;
+    width: 100%;
+    height: var(--footer-height);
     align-items: center;
 
     &.is-hidden {
@@ -428,9 +435,8 @@
     top: 0;
     right: 0;
     bottom: var(--footer-height);
-    max-height: var(--fix-max-height);
     left: 0;
-    height: var(--fix-height);
+    // height: var(--fix-height);
     pointer-events: none;
 
     .column_fixed {
@@ -487,6 +493,6 @@
   }
 
   .stripe-row {
-    background: #FAFBFD;
+    background: #fafbfd;
   }
 }

package/lib/table/table.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -168,7 +172,7 @@
   user-select: none;
 }
 .bk-checkbox ~ .bk-checkbox {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
@@ -231,6 +235,12 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
+.bk-checkbox.is-prechecking {
+  position: relative;
+}
+.bk-checkbox.is-prechecking .bk-checkbox-input {
+  visibility: hidden;
+}
 .bk-checkbox-input {
   position: relative;
   display: inline-block;
@@ -257,10 +267,16 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+.bk-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}
 .bk-button {
   display: inline-flex;
   height: 32px;
-  padding: 5px 12px;
+  padding: 0 14px;
   font-size: 14px;
   color: #63656e;
   text-decoration: none;
@@ -482,12 +498,12 @@
 }
 .bk-button.bk-button-small {
   height: 26px;
-  padding: 3px 12px;
+  padding: 0 12px;
   font-size: 12px;
 }
 .bk-button.bk-button-large {
-  height: 38px;
-  padding: 8px 20px;
+  height: 40px;
+  padding: 0 16px;
   font-size: 16px;
 }
 .bk-button .bk-button-text {
@@ -527,18 +543,21 @@
   cursor: not-allowed;
   border-color: #dcdee5;
 }
+.bk-button.is-disabled:not(.is-text) {
+  background-color: #f9fafd;
+}
 .bk-button-group {
   display: inline-block;
   font-size: 0;
 }
 .bk-button-group.bk-button-group-small .bk-button {
   height: 26px;
-  padding: 3px 12px;
+  padding: 0 12px;
   font-size: 12px;
 }
 .bk-button-group.bk-button-group-large .bk-button {
-  height: 38px;
-  padding: 8px 20px;
+  height: 40px;
+  padding: 0 16px;
   font-size: 16px;
 }
 .bk-button-group .bk-button {
@@ -673,6 +692,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,
 .bk-pagination-list-next-batch,
@@ -843,7 +863,7 @@
 .bk-popover.bk-pop2-content {
   position: absolute;
   display: none;
-  padding: 7px 14px;
+  padding: 12px;
   font-size: 12px;
   color: #fff;
   background: #26323d;
@@ -922,37 +942,10 @@
 }
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-footer {
   display: flex;
-  height: 42px;
-  padding: 0 10px;
+  padding: 12px;
   border-top: solid 1px #dcdee5;
-  justify-content: center;
   align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span {
-  display: inline-flex;
-  height: 100%;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 22px;
-  color: #3a84ff;
-  cursor: pointer;
-  align-items: center;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.disabled {
-  color: transparent;
-  cursor: auto;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.btn-filter-split {
-  width: 1px;
-  height: calc(100% - 12px);
-  padding: 6px 0;
-  cursor: default;
-  background: #f0f1f5;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.btn-filter-reset.disable {
-  color: #979ba5;
-  cursor: not-allowed;
-}
 .bk-head-cell-sort {
   display: flex;
   height: 100%;
@@ -1134,7 +1127,7 @@
 .bk-table-flex {
   display: flex;
   flex-direction: column;
-  max-height: 100%;
+  max-height: fit-content;
 }
 .bk-table-flex .bk-table-body {
   flex: 1;
@@ -1146,6 +1139,7 @@
 .bk-table .bk-table-body {
   position: relative;
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
   width: 5px;
@@ -1160,7 +1154,7 @@
   transform: translateX(var(--prepend-left));
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
-  background-color: #FAFBFD;
+  background-color: #fafbfd;
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr td {
   border-bottom: none;
@@ -1202,19 +1196,19 @@
 }
 .bk-table .bk-table-head.__is-empty .bk-table-body-content,
 .bk-table .bk-table-body.__is-empty .bk-table-body-content {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
-  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
+  transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
-  transform: translateZ(0);
 }
 .bk-table .bk-table-head table th,
 .bk-table .bk-table-body table th,
@@ -1343,22 +1337,22 @@
 }
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
+  position: relative;
   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;
+  right: 0;
   bottom: 0;
-  width: 6px;
-  transform: translateX(50%);
-  background-color: #3785FF;
   z-index: 1;
+  width: 6px;
   pointer-events: none;
+  background-color: #3785ff;
+  content: '';
+  transform: translateX(50%);
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1371,8 +1365,8 @@
 .bk-table .bk-table-body table thead th.active,
 .bk-table .bk-table-head table thead th:hover,
 .bk-table .bk-table-body table thead th:hover {
-  background: #f0f1f5;
   cursor: pointer;
+  background: #f0f1f5;
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
@@ -1405,18 +1399,22 @@
 }
 .bk-table .bk-table-head {
   position: relative;
-  transform: translateX(var(--scroll-head-left));
   z-index: 2;
+  scrollbar-gutter: stable;
+  overflow: hidden;
 }
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
+  z-index: 1;
   width: 6px;
+  background-color: #3785ff;
   transform: translateX(-50%);
-  background-color: #3785FF;
-  z-index: 1;
+}
+.bk-table .bk-table-head thead {
+  transform: translateX(var(--scroll-head-left));
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1438,13 +1436,13 @@
 }
 .bk-table .bk-table-head .table-head-settings > span {
   display: flex;
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
 }
 .bk-table .bk-table-footer {
-  height: var(--footer-height);
-  width: 100%;
   display: flex;
+  width: 100%;
+  height: var(--footer-height);
   align-items: center;
 }
 .bk-table .bk-table-footer.is-hidden {
@@ -1495,9 +1493,7 @@
   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 {
@@ -1537,5 +1533,5 @@
   margin-left: auto;
 }
 .bk-table .stripe-row {
-  background: #FAFBFD;
+  background: #fafbfd;
 }

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

@@ -1,5 +1,5 @@
 import { IEmptyObject } from './const';
-import { Column, Settings, SortScope, TablePropTypes } from './props';
+import { Column, Field, Settings, SortScope, TablePropTypes } from './props';
 export type ITableFormatData = {
     data: any[];
     dataSchema: WeakMap<object, any>;
@@ -8,6 +8,8 @@ export type ITableFormatData = {
     settings: {
         size: string;
         height: number;
+        fields: Field[];
+        checked: string[];
     };
     layout: {
         bottom: number;
@@ -31,6 +33,7 @@ export type ITableResponse = {
     isActiveColumn: (col: Column) => boolean;
     isHiddenColumn: (col: Column) => boolean;
     resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: SortScope) => void;
+    resolveByDefColumns: () => void;
     resetStartEndIndex: () => void;
     toggleRowSelection: (row: any) => void;
     toggleAllSelection: (value?: boolean) => void;
@@ -47,6 +50,7 @@ export type ITableResponse = {
     hasCheckedRow: () => boolean;
     setRowSelectionAll: (val: boolean) => void;
     setRowIndeterminate: () => void;
+    updateSettings: (settings?: Settings, rowHeight?: number) => void;
     pageData: any[];
     localPagination: any;
     formatData: ITableFormatData;

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

@@ -182,5 +182,92 @@ declare const _default: (props: TablePropTypes, targetColumns: ITableColumn[]) =
             head: import("./props").LabelFunctionString;
         };
     };
+    columns: {
+        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;

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

@@ -70,7 +70,6 @@ export declare const useClass: (props: TablePropTypes, targetColumns: ITableColu
         '--footer-height': string;
         right: string | number;
         '--fix-height': string;
-        '--fix-max-height': string;
     }>;
     scrollClass: import("vue").ComputedRef<{
         scrollXName?: undefined;

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

@@ -1,7 +1,7 @@
 import { SetupContext } from 'vue';
 import { TablePropTypes } from './props';
 import { ITableResponse } from './use-attributes';
-declare const _default: (props: TablePropTypes, context: SetupContext<any>, tableResp: ITableResponse, styleRef: any, head: any) => {
+declare const _default: (props: TablePropTypes, context: SetupContext<any>, tableResp: ITableResponse, styleRef: any, head: any, root: any, resetTableHeight: any) => {
     renderTableHeadSchema: () => (string | JSX.Element)[];
     renderTableBodySchema: (rows: any[]) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;

package/lib/table/utils.d.ts

@@ -114,20 +114,22 @@ export declare const resolveCellSpan: (column: Column, colIndex: number, row: an
 export declare const skipThisColumn: (columns: Column[], colIndex: number, row: any, rowIndex: number) => boolean;
 export declare const getSortFn: (column: any, sortType: any) => ((_a: any, _b: any) => boolean) | ((_a: any, _b: any) => number);
 export declare const getNextSortType: (sortType: string) => string;
-export declare const resolveSort: (sort: ISortPropShape) => import("./props").ISortShape | {
+export declare const resolveSort: (sort: ISortPropShape, column: any) => ({
+    sortFn: ((_a: any, _b: any) => boolean) | ((_a: any, _b: any) => number);
+} & import("./props").ISortShape) | {
     sortFn?: Function;
     sortScope?: import("./props").SortScope;
     value: string;
 };
 export declare const isRowSelectEnable: (props: any, { row, index, isCheckAll }: {
     row: any;
-    index: any;
-    isCheckAll: any;
+    index?: number;
+    isCheckAll?: boolean;
 }) => any;
 export declare const getRowId: (row: any, defVal: any, props: any) => any;
 export declare const resolveColumnSortProp: (col: Column, props: TablePropTypes) => {
     type: string;
-    fn: Function;
+    fn: Function | ((((_a: any, _b: any) => boolean) | ((_a: any, _b: any) => number)) & Function);
     scope: import("./props").SortScope;
     active: boolean;
 };