bkui-vue 1.0.3-beta.2 → 1.0.3-beta.21

package/lib/table/plugins/head-filter.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-table-head-action {
   display: flex;

package/lib/table/plugins/head-sort.d.ts

@@ -8,6 +8,9 @@ declare const _default: import("vue").DefineComponent<{
     active: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    sortValFormat: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     column: import("vue-types").VueTypeDef<Column>;
     defaultSort: import("vue-types").VueTypeDef<SORT_OPTION> & {
@@ -16,10 +19,14 @@ declare const _default: import("vue").DefineComponent<{
     active: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    sortValFormat: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
 }, {
     active: boolean;
+    sortValFormat: any[];
     defaultSort: SORT_OPTION;
 }, {}>;
 export default _default;

package/lib/table/plugins/head-sort.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-head-cell-sort {
   display: flex;

package/lib/table/plugins/settings.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-table-settings[data-bk-table-settings-theme='true'] {
   padding: 0;

package/lib/table/plugins/use-draggable.d.ts

@@ -6,12 +6,12 @@ declare const _default: (props: TablePropTypes, resp: ITableResponse, ctx: Setup
     onDragleave?: undefined;
     onDragstart?: undefined;
     onDragover?: undefined;
-    onDrop?: undefined;
+    onDragend?: undefined;
 } | {
     onDragenter: (event: DragEvent) => void;
     onDragleave: (event: DragEvent) => void;
     onDragstart: (event: DragEvent) => void;
     onDragover: (event: DragEvent) => void;
-    onDrop: (event: DragEvent) => void;
+    onDragend: (event: DragEvent) => void;
 };
 export default _default;

package/lib/table/plugins/use-observer-resize.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+declare const _default: (target: Ref<HTMLElement>, fn: any, args?: any[], immediate?: boolean) => {
+    instance: any;
+};
+export default _default;

package/lib/table/props.d.ts

@@ -43,7 +43,7 @@ export declare enum FixedEnum {
     RIGHT = "right"
 }
 export declare const fixedType: import("vue-types").VueTypeValidableDef<"right" | "left">;
-export type IOverflowTooltipProp = {
+export type IOverflowTooltipOption = {
     content: string | Function;
     disabled?: (col: Column, row: any) => boolean | boolean;
     watchCellResize?: boolean;
@@ -51,7 +51,8 @@ export type IOverflowTooltipProp = {
     popoverOption?: any;
     resizerWay?: ResizerWay;
     showHead?: boolean;
-} | boolean;
+};
+export type IOverflowTooltipProp = IOverflowTooltipOption | boolean;
 export type IOverflowTooltip = IOverflowTooltipProp;
 export declare const IOverflowTooltipPropType: import("vue-types").VueTypeDef<IOverflowTooltipProp>;
 export type ISortOption = {
@@ -103,6 +104,7 @@ export type Settings = {
     size?: string;
     sizeList?: SizeItem[];
     showLineHeight?: boolean;
+    extCls?: string;
     trigger: 'manual';
 };
 export type ISettingPropType = Settings | boolean;
@@ -304,6 +306,15 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 排序时对需要排序的字符串数值进行格式化
+     * 这里需要配置为正则或者回调函数，(str) => string | number | boolean
+     * 如果配置为正则，程序会提取匹配到的第一个结果尝试转换为数值
+     * 如果为多个，程序会顺序执行所有正则表达式，直到转换成功
+     */
+    sortValFormat: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
     /**
      * table header config
      */

package/lib/table/table.css

@@ -736,7 +736,6 @@
 }
 .bk-popover.bk-pop2-content {
   position: absolute;
-  display: none;
   padding: 12px;
   font-size: 12px;
   color: #fff;
@@ -744,6 +743,9 @@
   border-radius: 4px;
   box-sizing: border-box;
 }
+.bk-popover.bk-pop2-content.hidden {
+  display: none;
+}
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
   z-index: -1;
@@ -1015,6 +1017,7 @@
   position: relative;
   overflow: auto;
   scrollbar-gutter: stable;
+  border-bottom: 1px solid #dcdee5;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
   width: 5px;
@@ -1284,23 +1287,16 @@
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
 }
-.bk-table .bk-table-head table tbody tr.--drag-enter.--bottom,
-.bk-table .bk-table-body table tbody tr.--drag-enter.--bottom {
-  border-bottom: solid 1px #3785ff;
-}
-.bk-table .bk-table-head table tbody tr.--drag-enter.--top,
-.bk-table .bk-table-body table tbody tr.--drag-enter.--top {
-  border-top: solid 1px #3785ff;
-}
-.bk-table .bk-table-head table tbody tr.--drag-start,
-.bk-table .bk-table-body table tbody tr.--drag-start {
-  background: #fff;
+.bk-table .bk-table-head table tbody tr.--drag-start td,
+.bk-table .bk-table-body table tbody tr.--drag-start td {
+  background: #fff !important;
 }
 .bk-table .bk-table-head {
   position: relative;
   z-index: 2;
   scrollbar-gutter: stable;
   overflow: hidden;
+  background-color: var(--background-color);
 }
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
@@ -1326,10 +1322,8 @@
   font-size: 14px;
   cursor: pointer;
   background: #fafbfd;
-  border-bottom: 1px solid #dcdee5;
   border-left: 1px solid #dcdee5;
   border-radius: 0 2px 0 0;
-  transform: translateX(var(--scroll-left));
   justify-content: center;
   align-items: center;
 }
@@ -1347,8 +1341,10 @@
 .bk-table .bk-table-footer.is-hidden {
   display: none;
 }
-.bk-table.bordered-row td,
-.bk-table.bordered-row th {
+.bk-table.bordered-row .bk-table-head {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-row td {
   border-bottom: 1px solid #dcdee5;
 }
 .bk-table.bordered-row tr:last-child td {
@@ -1380,10 +1376,14 @@
 .bk-table.bordered-col td:last-child {
   border-right: none;
 }
+.bk-table th,
+.bk-table td {
+  border-right: 1px solid transparent;
+}
 .bk-table.bordered-none th,
 .bk-table.bordered-none td {
   border-top: none;
-  border-right: none;
+  border-right: 1px solid transparent;
   border-bottom: none;
   border-left: none;
 }

package/lib/table/table.d.ts

@@ -37,6 +37,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    sortValFormat: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
     thead: import("vue-types").VueTypeDef<import("./props").Thead> & {
         default: () => import("./props").Thead;
     };
@@ -275,6 +278,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    sortValFormat: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
     thead: import("vue-types").VueTypeDef<import("./props").Thead> & {
         default: () => import("./props").Thead;
     };
@@ -498,6 +504,7 @@ declare const _default: import("vue").DefineComponent<{
     stripe: boolean;
     rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;
+    sortValFormat: any[];
     virtualEnabled: boolean;
     paginationHeight: number;
     remotePagination: boolean;

package/lib/table/table.less

@@ -36,6 +36,7 @@
     position: relative;
     overflow: auto;
     scrollbar-gutter: stable;
+    border-bottom: 1px solid @table-border-color;
 
     &::-webkit-scrollbar {
       width: 5px;
@@ -312,18 +313,21 @@
             }
           }
 
-          &.--drag-enter {
-            &.--bottom {
-              border-bottom: solid 1px #3785ff;
-            }
+          // &.--drag-enter {
+          //   &.--bottom {
+          //     border-bottom: solid 1px #3785ff;
+          //   }
 
-            &.--top {
-              border-top: solid 1px #3785ff;
-            }
-          }
+          //   &.--top {
+          //     border-top: solid 1px #3785ff;
+          //   }
+          // }
 
           &.--drag-start {
-            background: #fff;
+
+            td {
+              background: #fff!important;
+            }
           }
         }
       }
@@ -335,6 +339,7 @@
     z-index: 2;
     scrollbar-gutter: stable;
     overflow: hidden;
+    background-color: var(--background-color);
 
     .col-resize-drag {
       position: absolute;
@@ -364,10 +369,10 @@
 
       background: @table-head-bg-color;
       //border-right: 1px solid @table-border-color;
-      border-bottom: 1px solid @table-border-color;
+      // border-bottom: 1px solid @table-border-color;
       border-left: 1px solid @table-border-color;
       border-radius: 0 2px 0 0;
-      transform: translateX(var(--scroll-left));
+      // transform: translateX(var(--scroll-left));
       justify-content: center;
       align-items: center;
 
@@ -391,8 +396,11 @@
   }
 
   &.bordered-row {
-    td,
-    th {
+    .@{bk-prefix}-table-head {
+      border-bottom: 1px solid @table-border-color;
+    }
+
+    td {
       border-bottom: 1px solid @table-border-color;
     }
 
@@ -445,11 +453,15 @@
 
   }
 
+  th, td {
+    border-right: 1px solid transparent;
+  }
+
   &.bordered-none {
     th,
     td {
       border-top: none;
-      border-right: none;
+      border-right: 1px solid transparent;
       border-bottom: none;
       border-left: none;
     }

package/lib/table/table.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-F-scroll-x {
   overflow-x: auto;
@@ -862,7 +865,6 @@
 }
 .bk-popover.bk-pop2-content {
   position: absolute;
-  display: none;
   padding: 12px;
   font-size: 12px;
   color: #fff;
@@ -870,6 +872,9 @@
   border-radius: 4px;
   box-sizing: border-box;
 }
+.bk-popover.bk-pop2-content.hidden {
+  display: none;
+}
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
   z-index: -1;
@@ -1141,6 +1146,7 @@
   position: relative;
   overflow: auto;
   scrollbar-gutter: stable;
+  border-bottom: 1px solid #dcdee5;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
   width: 5px;
@@ -1410,23 +1416,16 @@
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
 }
-.bk-table .bk-table-head table tbody tr.--drag-enter.--bottom,
-.bk-table .bk-table-body table tbody tr.--drag-enter.--bottom {
-  border-bottom: solid 1px #3785ff;
-}
-.bk-table .bk-table-head table tbody tr.--drag-enter.--top,
-.bk-table .bk-table-body table tbody tr.--drag-enter.--top {
-  border-top: solid 1px #3785ff;
-}
-.bk-table .bk-table-head table tbody tr.--drag-start,
-.bk-table .bk-table-body table tbody tr.--drag-start {
-  background: #fff;
+.bk-table .bk-table-head table tbody tr.--drag-start td,
+.bk-table .bk-table-body table tbody tr.--drag-start td {
+  background: #fff !important;
 }
 .bk-table .bk-table-head {
   position: relative;
   z-index: 2;
   scrollbar-gutter: stable;
   overflow: hidden;
+  background-color: var(--background-color);
 }
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
@@ -1452,10 +1451,8 @@
   font-size: 14px;
   cursor: pointer;
   background: #fafbfd;
-  border-bottom: 1px solid #dcdee5;
   border-left: 1px solid #dcdee5;
   border-radius: 0 2px 0 0;
-  transform: translateX(var(--scroll-left));
   justify-content: center;
   align-items: center;
 }
@@ -1473,8 +1470,10 @@
 .bk-table .bk-table-footer.is-hidden {
   display: none;
 }
-.bk-table.bordered-row td,
-.bk-table.bordered-row th {
+.bk-table.bordered-row .bk-table-head {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-row td {
   border-bottom: 1px solid #dcdee5;
 }
 .bk-table.bordered-row tr:last-child td {
@@ -1506,10 +1505,14 @@
 .bk-table.bordered-col td:last-child {
   border-right: none;
 }
+.bk-table th,
+.bk-table td {
+  border-right: 1px solid transparent;
+}
 .bk-table.bordered-none th,
 .bk-table.bordered-none td {
   border-top: none;
-  border-right: none;
+  border-right: 1px solid transparent;
   border-bottom: none;
   border-left: none;
 }

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

@@ -1,5 +1,5 @@
 import { IEmptyObject } from './const';
-import { Column, Field, Settings, SortScope, TablePropTypes } from './props';
+import { Column, Field, Settings, TablePropTypes } from './props';
 export type ITableFormatData = {
     data: any[];
     dataSchema: WeakMap<object, any>;
@@ -18,46 +18,7 @@ export type ITableFormatData = {
         translateY: number;
     };
 };
-export type ITableResponse = {
-    setIndexData: () => Promise<void>;
-    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;
-    resolveByDefColumns: () => 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;
-    updateSettings: (settings?: Settings, rowHeight?: number) => void;
-    changePageRowIndex: (sourceIndex: number, targetIndex: number) => void;
-    pageData: any[];
-    localPagination: any;
-    formatData: ITableFormatData;
-};
-declare const _default: (props: TablePropTypes) => {
+declare const tableSchemaResponse: (props: TablePropTypes) => {
     formatColumns: (columns: Column[]) => void;
     formatDataSchema: (data: any[]) => void;
     setRowSelection: (row: any, isSelected: boolean) => void;
@@ -84,7 +45,7 @@ declare const _default: (props: TablePropTypes) => {
     clearSelection: () => void;
     clearColumnSort: (reset?: boolean) => void;
     toggleRowSelection: (row: any) => void;
-    getRowAttribute: (row: any | IEmptyObject, attrName: string) => any;
+    getRowAttribute: (item: any | IEmptyObject, attrName: string) => any;
     filter: () => void;
     sortData: (column: Column) => void;
     isCheckedAll: () => boolean;
@@ -96,4 +57,5 @@ declare const _default: (props: TablePropTypes) => {
     formatData: ITableFormatData;
     setIndexData: () => Promise<void>;
 };
-export default _default;
+export type ITableResponse = ReturnType<typeof tableSchemaResponse>;
+export default tableSchemaResponse;

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

@@ -32,6 +32,7 @@ export declare const useClass: (props: TablePropTypes, targetColumns: ITableColu
         '--row-height': string;
         '--scroll-head-left': string;
         '--scroll-left': string;
+        '--background-color': any;
     }>;
     fixHeight: import("vue").Ref<number>;
     maxFixHeight: import("vue").Ref<number>;

package/lib/table/utils.d.ts

@@ -80,7 +80,7 @@ export declare const resolveHeadConfig: (props: TablePropTypes) => {
  * @param index 当前行Index
  * @returns
  */
-export declare const getRowText: (row: any, key: string) => any;
+export declare const getRowText: (row: any, key: string, format?: string[] | (() => string | number | boolean)[]) => any;
 /**
  * 获取当前行指定列的值
  * @param row 当前行
@@ -111,10 +111,10 @@ export declare const resolveCellSpan: (column: Column, colIndex: number, row: an
     colspan: any;
     rowspan: any;
 };
-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 skipThisColumn: (columns: Column[], colIndex: number, row: any, rowIndex: number) => number | false;
+export declare const getSortFn: (column: any, sortType: any, format?: any[]) => ((_a: any, _b: any) => boolean) | ((_a: any, _b: any) => number);
 export declare const getNextSortType: (sortType: string) => string;
-export declare const resolveSort: (sort: ISortPropShape, column: any) => ({
+export declare const resolveSort: (sort: ISortPropShape, column: any, format?: any[]) => ({
     sortFn: ((_a: any, _b: any) => boolean) | ((_a: any, _b: any) => number);
 } & import("./props").ISortShape) | {
     sortFn?: Function;
@@ -133,3 +133,4 @@ export declare const resolveColumnSortProp: (col: Column, props: TablePropTypes)
     scope: import("./props").SortScope;
     active: boolean;
 };
+export declare const getRawData: (data: any) => any;