bkui-vue 2.0.1-beta.11 → 2.0.1-beta.110

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

@@ -27,6 +27,10 @@
   max-width: 300px;
   min-width: 200px;
 }
+.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items {
+  max-height: 200px;
+  overflow: auto;
+}
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
   width: 100%;
   height: 32px;
@@ -52,6 +56,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  max-width: calc(100% - 22px);
 }
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
   margin-left: 0;

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

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "filterSave")[], "change" | "filterSave", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "reset" | "filterSave")[], "change" | "reset" | "filterSave", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     column: import("vue-types").VueTypeDef<Column>;
     height: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     onChange?: (...args: any[]) => any;
+    onReset?: (...args: any[]) => any;
     onFilterSave?: (...args: any[]) => any;
 }, {
     height: number;

package/lib/table/plugins/head-filter.less

@@ -35,6 +35,9 @@
         min-width: 200px;
 
         .content-items {
+          max-height: 200px;
+          overflow: auto;
+
           .list-item {
             width: 100%;
             height: 32px;
@@ -62,6 +65,7 @@
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
+              max-width: calc(100% - 22px);
             }
 
             .@{bk-prefix}-checkbox {

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

@@ -109,6 +109,7 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
   --table-body-font-color: #63656E;
@@ -156,6 +157,10 @@
   max-width: 300px;
   min-width: 200px;
 }
+.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items {
+  max-height: 200px;
+  overflow: auto;
+}
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
   width: 100%;
   height: 32px;
@@ -181,6 +186,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  max-width: calc(100% - 22px);
 }
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
   margin-left: 0;

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

@@ -109,6 +109,7 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
   --table-body-font-color: #63656E;

package/lib/table/plugins/settings.css

@@ -79,6 +79,7 @@
   align-items: flex-start;
   flex-wrap: wrap;
   margin-bottom: 16px;
+  overflow: auto;
 }
 .bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item {
   width: 150px;
@@ -86,10 +87,19 @@
   margin-top: 16px;
   line-height: 16px;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label {
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label,
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item .bk-checkbox-label {
+  max-width: calc(100% - 22px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  word-break: break-all;
+}
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label {
+  max-width: 100%;
+}
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label .bk-checkbox-label {
+  max-width: max-content;
 }
 .bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height {
   display: flex;

package/lib/table/plugins/settings.less

@@ -95,6 +95,7 @@
           align-items: flex-start;
           flex-wrap: wrap;
           margin-bottom: 16px;
+          overflow: auto;
 
           .field-item {
             width: 150px;
@@ -102,10 +103,20 @@
             margin-top: 16px;
             line-height: 16px;
 
-            > label {
+            > label,
+            .bk-checkbox-label {
+              max-width: calc(100% - 22px);
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
+              word-break: break-all;
+            }
+            
+            > label {
+              max-width: 100%;
+              .bk-checkbox-label {
+                max-width: max-content;
+              }
             }
           }
         }

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

@@ -109,6 +109,7 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
   --table-body-font-color: #63656E;
@@ -208,6 +209,7 @@
   align-items: flex-start;
   flex-wrap: wrap;
   margin-bottom: 16px;
+  overflow: auto;
 }
 .bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item {
   width: 150px;
@@ -215,10 +217,19 @@
   margin-top: 16px;
   line-height: 16px;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label {
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label,
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item .bk-checkbox-label {
+  max-width: calc(100% - 22px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  word-break: break-all;
+}
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label {
+  max-width: 100%;
+}
+.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label .bk-checkbox-label {
+  max-width: max-content;
 }
 .bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height {
   display: flex;

package/lib/table/props.d.ts

@@ -1,54 +1,55 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, VNode } from 'vue';
 import { IHeadColor, ROW_HOVER, SORT_OPTION } from './const';
 export declare enum SortScope {
-    CURRENT = "current",
-    ALL = "all"
+    ALL = "all",
+    CURRENT = "current"
 }
 export type ColumnFilterListItem = {
     text?: string;
     value?: string;
 };
 export declare enum OverflowModeEnum {
-    STATIC = "static",
-    AUTO = "auto"
+    AUTO = "auto",
+    STATIC = "static"
 }
 export declare const EnumOverflowModeType: import("vue-types").VueTypeDef<"auto" | "static">;
 export declare enum ColumnTypeEnum {
-    SELECTION = "selection",
-    INDEX = "index",
     EXPAND = "expand",
-    NONE = "__COL_TYPE_NONE"
+    INDEX = "index",
+    NONE = "__COL_TYPE_NONE",
+    SELECTION = "selection"
 }
 export declare enum TableAlignEnum {
-    LEFT = "left",
-    RIGHT = "right",
     CENTER = "center",
-    NONE = ""
+    LEFT = "left",
+    NONE = "",
+    RIGHT = "right"
 }
-export declare const columnType: import("vue-types").VueTypeDef<"index" | "selection" | "expand" | "__COL_TYPE_NONE">;
-export declare const TableAlign: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
+export declare const columnType: import("vue-types").VueTypeDef<"index" | "expand" | "__COL_TYPE_NONE" | "selection">;
+export declare const TableAlign: import("vue-types").VueTypeDef<"" | "left" | "right" | "center">;
 export declare enum FullEnum {
     FULL = "full",
     FUZZY = "fuzzy"
 }
 export declare const fullType: import("vue-types").VueTypeDef<"full" | "fuzzy">;
 export declare enum SettingSizeEnum {
-    SMALL = "small",
+    LARGE = "large",
     MEDIUM = "medium",
-    LARGE = "large"
+    SMALL = "small"
 }
 export declare const settingSizeType: import("vue-types").VueTypeDef<"small" | "medium" | "large">;
 export declare enum FixedEnum {
     LEFT = "left",
     RIGHT = "right"
 }
-export declare const fixedType: import("vue-types").VueTypeValidableDef<"right" | "left">;
+export declare const fixedType: import("vue-types").VueTypeValidableDef<"left" | "right">;
 export type IOverflowTooltipOption = {
-    content: ((col: Column, row: any) => string) | string;
-    disabled?: ((col: Column, row: any) => boolean) | boolean;
+    content: ((col: Column, row: Record<string, object>) => string) | string;
+    disabled?: ((col: Column, row: Record<string, object>) => boolean) | boolean;
+    allowHtml?: boolean;
     watchCellResize?: boolean;
     mode?: `${OverflowModeEnum}`;
-    popoverOption?: any;
+    popoverOption?: Record<string, object>;
     resizerWay?: ResizerWay;
     showHead?: boolean;
 };
@@ -60,16 +61,23 @@ export type ISortOption = {
 };
 export declare const ISortType: import("vue-types").VueTypeDef<ISortPropShape>;
 export type ISortShape = {
-    sortFn?: Function;
+    sortFn?: (...args: any[]) => number;
     sortScope?: SortScope;
     value?: SORT_OPTION;
 };
 export type ISortPropShape = ISortShape | boolean | string;
+export type IHeadFilter = {
+    label: string;
+    text?: string;
+    value: string;
+    tipKey?: string;
+    showOverflowTooltip?: boolean;
+};
 export type IFilterShape = {
-    list: any[];
-    filterFn?: Function;
+    list: IHeadFilter[];
+    filterFn?: (...args: any[]) => boolean;
     match?: FullEnum;
-    checked?: any[];
+    checked?: string[];
     filterScope?: SortScope;
     btnSave?: boolean | string;
     btnReset?: boolean | string;
@@ -79,9 +87,9 @@ export type IFilterShape = {
 export type IFilterPropShape = IFilterShape | boolean | string;
 export declare const IFilterType: import("vue-types").VueTypeDef<IFilterPropShape>;
 export declare enum ColumnPickEnum {
+    DISABLED = "disabled",
     MULTI = "multi",
-    SINGLE = "single",
-    DISABLED = "disabled"
+    SINGLE = "single"
 }
 export declare enum ResizerWay {
     DEBOUNCE = "debounce",
@@ -115,31 +123,32 @@ export type Field = {
     id?: string;
     name?: string;
 };
-export type LabelFunctionString = ((_column: any, _index: any) => string | number | boolean | JSX.Element) | string | number | boolean;
+export type LabelFunctionString = ((_column: any, _index: any) => JSX.Element | boolean | number | string) | boolean | number | string;
 export declare const LabelFunctionStringType: import("vue-types").VueTypeDef<LabelFunctionString>;
-export type RenderFunctionString = ({ cell, data, row, column, index, rows, }: {
-    cell: any;
-    data: any;
-    row: any;
-    column: any;
-    index: any;
-    rows: any;
-}) => string | number | boolean | JSX.Element;
+export type HeadRenderArgs = {
+    cell?: any;
+    data?: any;
+    row?: Record<string, any>;
+    column?: Column;
+    index?: number;
+    rows?: Record<string, any>[];
+};
+export type RenderFunctionString = (args: HeadRenderArgs) => JSX.Element | boolean | number | string;
 export declare const RenderFunctionStringType: import("vue-types").VueTypeDef<RenderFunctionString>;
 export type SpanFunctionString = (({ column, colIndex, row, rowIndex }: {
     column: any;
     colIndex: any;
     row: any;
     rowIndex: any;
-}) => number) | Number;
+}) => number) | number;
 export declare const SpanFunctionStringType: import("vue-types").VueTypeDef<SpanFunctionString>;
-export type RowClassFunctionString = ((row: any) => string) | string;
+export type RowClassFunctionString = ((row: Record<string, object>) => string) | string;
 export declare const RowClassFunctionStringType: import("vue-types").VueTypeDef<RowClassFunctionString>;
-export type RowHeightFunctionNumber = ((_type: string, _row: any, _rowIndex: number, _size?: any) => number) | number;
+export type RowHeightFunctionNumber = ((type: string, row: Record<string, object>, rowIndex: number, size?: any) => number) | number;
 export declare const RowHeightFunctionNumberType: import("vue-types").VueTypeDef<RowHeightFunctionNumber>;
-type FunctionNumber = Function | number;
+type FunctionNumber = ((...args: any[]) => void) | number;
 export declare const FunctionNumberType: import("vue-types").VueTypeDef<FunctionNumber>;
-type StringNumber = string | number;
+type StringNumber = number | string;
 export declare const StringNumberType: (val: number | string) => import("vue-types").VueTypeDef<StringNumber> & {
     default: StringNumber;
 };
@@ -157,17 +166,26 @@ export type IDraggableRowOption = {
     icon?: JSX.Element;
     width?: number;
 };
+export type IHeadGroup = {
+    thColspan: number;
+    thRowspan: number;
+    isGroup: boolean;
+    parent?: IHeadGroup;
+    label?: string;
+    offsetLeft?: number;
+};
 export type Column = {
-    label: LabelFunctionString;
+    label?: LabelFunctionString;
     field?: LabelFunctionString;
     render?: RenderFunctionString;
+    disabled?: boolean;
     renderHead?: RenderFunctionString;
     width?: number | string;
     minWidth?: number | string;
     columnKey?: string;
     showOverflowTooltip?: IOverflowTooltip;
     type?: string;
-    fixed?: string | boolean;
+    fixed?: boolean | string;
     resizable?: boolean;
     sort?: ISortShape | boolean | string;
     filter?: IFilterShape | boolean | string;
@@ -177,14 +195,19 @@ export type Column = {
     className?: RowClassFunctionString;
     align?: string;
     prop?: LabelFunctionString;
-    index?: Number;
+    index?: number;
     explain?: IColumnExplain;
+    children?: Column[];
+    acrossPage?: boolean;
 };
 export declare const IColumnProp: import("vue-types").VueTypeDef<Column>;
 export type Thead = {
-    height?: Number;
+    height?: number;
     isShow?: boolean;
-    cellFn?: Function;
+    cellFn?: ({ index, column }: {
+        index: any;
+        column: any;
+    }) => JSX.Element | VNode | string;
     color?: IHeadColor | string;
 };
 export type Columns = ReadonlyArray<Column>;
@@ -193,7 +216,7 @@ export type GroupColumn = {
     calcWidth?: number;
     resizeWidth?: number;
     isHidden?: boolean;
-    listeners?: Map<string, any>;
+    listeners?: Map<string, (...args: any[]) => void>;
 } & Column;
 export type IColumnActive = {
     index: number;
@@ -201,32 +224,42 @@ export type IColumnActive = {
 };
 export type IReactiveProp = {
     activeColumns: IColumnActive[];
-    rowActions: Record<string, any>;
-    scrollTranslateY: Number;
-    scrollTranslateX: Number;
-    pos: Record<string, any>;
+    rowActions: Record<string, object>;
+    scrollTranslateY: number;
+    scrollTranslateX: number;
+    pos: Record<string, object>;
     settings: Settings | boolean;
     setting: {
         size: string;
-        height: Number;
+        height: number;
     };
-    defaultSort: Record<string, any>;
+    defaultSort: Record<string, object>;
 };
 export type Colgroups = Column & {
     calcWidth: number;
     resizeWidth: number;
-    listeners: Map<string, Function>;
+    listeners: Map<string, (...args: any[]) => void>;
 };
 export declare enum IColSortBehavior {
     /**
-     * 列排序是相互依赖的
+     * 列与列之间的排序是独立的，互斥的
      */
-    interdependent = "interdependent",
+    independent = "independent",
     /**
-     * 列与列之间的排序是独立的，互斥的
+     * 列排序是相互依赖的
      */
-    independent = "independent"
+    interdependent = "interdependent"
 }
+export type FixedBottomOption = {
+    position: 'absolute' | 'relative';
+    height: number;
+    minHeight?: number;
+    loading?: boolean;
+};
+export type AppendLastRowOption = {
+    type: 'default' | 'summary';
+    cellRender?: (column: Column, index: number) => VNode | number | string;
+};
 export declare const tableProps: {
     /**
      * 渲染列表
@@ -271,7 +304,7 @@ export declare const tableProps: {
     };
     /**
      * 设置表格最小高度
-     * 默认：300
+     * 默认：LINE_HEIGHT * 2
      */
     minHeight: import("vue-types").VueTypeDef<StringNumber> & {
         default: StringNumber;
@@ -287,9 +320,7 @@ export declare const tableProps: {
      * 行高，可以为固定数值类型
      * 可以是函数，返回当前行的高度，返回值为数值类型
      */
-    rowHeight: import("vue-types").VueTypeDef<RowHeightFunctionNumber> & {
-        default: RowHeightFunctionNumber;
-    };
+    rowHeight: import("vue-types").VueTypeDef<RowHeightFunctionNumber>;
     /**
      * Thead行高，可以为固定数值类型
      */
@@ -388,6 +419,14 @@ export declare const tableProps: {
     emptyCellText: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
+    /**
+     * 判定单元格是否为空
+     * 支持数组：判定条件为 arr.some(item => item === cellText)
+     * 支持函数回调：返回结果为 true | false， ({ cellText, row, column }) => boolean
+     */
+    isEmptyCell: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
     /**
      * bk-table-setting-content
      */
@@ -529,8 +568,16 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
-    align: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
-    headerAlign: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
+    /**
+     * 是否使用IntersectionObserver监听表格Cell进如有可视区域再渲染
+     */
+    intersectionObserver: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    align: import("vue-types").VueTypeDef<"" | "left" | "right" | "center">;
+    headerAlign: import("vue-types").VueTypeDef<"" | "left" | "right" | "center">;
     /**
      * 插入至表格第一行之前的内容容器样式
      * 默认样式为固定在第一行
@@ -568,5 +615,23 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 启用Scrollbar
+     */
+    scrollbar: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 固定在底部的配置项
+     */
+    fixedBottom: import("vue-types").VueTypeDef<FixedBottomOption> & {
+        default: () => FixedBottomOption;
+    };
+    /**
+     * 表格尾部追加的行配置
+     */
+    appendLastRow: import("vue-types").VueTypeDef<AppendLastRowOption>;
 };
 export {};