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

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

@@ -7,6 +7,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }

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

@@ -7,6 +7,9 @@
   color: #c4c6cc;
   cursor: pointer;
   align-items: center;
+  &:last-of-type {
+    margin-right: -10px;
+  }
 
   &.active {
     color: #3a84ff;

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

@@ -129,6 +129,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }

package/lib/table/plugins/settings.d.ts

@@ -1,33 +1,23 @@
-import { Settings } from '../props';
 declare const _default: import("vue").DefineComponent<{
-    settings: import("vue-types").VueTypeDef<import("../props").ISettingPropType> & {
-        default: boolean | (() => Settings);
-    };
+    settings: import("vue-types").VueTypeDef<import("../props").ISettingPropType>;
     columns: import("vue-types").VueTypeDef<import("../props").Column[]> & {
         default: () => import("../props").Column[];
     };
-    rowHeight: import("vue-types").VueTypeValidableDef<number> & {
-        default: number;
-    } & {
-        default: number;
+    rowHeight: import("vue-types").VueTypeDef<import("../props").RowHeightFunctionNumber> & {
+        default: import("../props").RowHeightFunctionNumber;
     };
 }, () => "" | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    settings: import("vue-types").VueTypeDef<import("../props").ISettingPropType> & {
-        default: boolean | (() => Settings);
-    };
+    settings: import("vue-types").VueTypeDef<import("../props").ISettingPropType>;
     columns: import("vue-types").VueTypeDef<import("../props").Column[]> & {
         default: () => import("../props").Column[];
     };
-    rowHeight: import("vue-types").VueTypeValidableDef<number> & {
-        default: number;
-    } & {
-        default: number;
+    rowHeight: import("vue-types").VueTypeDef<import("../props").RowHeightFunctionNumber> & {
+        default: import("../props").RowHeightFunctionNumber;
     };
 }>> & {
     onChange?: (...args: any[]) => any;
 }, {
     columns: import("../props").Column[];
-    rowHeight: number;
-    settings: import("../props").ISettingPropType;
+    rowHeight: import("../props").RowHeightFunctionNumber;
 }, {}>;
 export default _default;

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

@@ -1,15 +1,35 @@
-import { GroupColumn } from '../props';
-declare const _default: (colgroups: GroupColumn[], immediate?: boolean) => {
+import { type Ref } from 'vue';
+import { ITableResponse } from '../use-attributes';
+declare const _default: (tableResp: ITableResponse, immediate: boolean, head: Ref<HTMLElement>) => {
     registerResizeEvent: () => void;
     resetResizeEvents: () => void;
-    dragOffsetX: import("vue").Ref<number>;
-    dragOffsetXStyle: import("vue").ComputedRef<{
-        readonly position: "absolute";
-        readonly top: 0;
-        readonly bottom: 0;
-        readonly left: 0;
-        readonly width: "1px";
-        readonly 'background-color': "#ebeef5";
+    dragOffsetX: Ref<number>;
+    dragOffsetXStyle: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        width: string;
+        backgroundColor: string;
+        transform: string;
+    };
+    resizeColumnStyle: import("vue").ComputedRef<{
+        transform: string;
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        width: string;
+        backgroundColor: string;
+    }>;
+    resizeHeadColStyle: import("vue").ComputedRef<{
+        width: string;
+        transform: string;
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        backgroundColor: string;
     }>;
 };
 export default _default;

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

@@ -1,27 +1,27 @@
-import { GroupColumn, TablePropTypes } from '../props';
+import { Ref } from 'vue';
+import { Column, TablePropTypes } from '../props';
+import { ITableResponse } from '../use-attributes';
 /**
  * 固定列Hooks
  */
-declare const _default: (props: TablePropTypes, colgroups: GroupColumn[], hasScrollY?: any) => {
+declare const _default: (props: TablePropTypes, tableResp: ITableResponse, head?: Ref<HTMLElement>) => {
     fixedWrapperClass: string;
-    resolveFixedColumnStyle: (column: GroupColumn, hasScrollY?: boolean) => {
+    resolveFixedColumnStyle: (column: Column, hasScrollY?: boolean) => {
         [x: string]: string;
     };
-    fixedColumns: import("vue").ComputedRef<{
-        isExist: boolean;
-        colPos: string;
-        column: GroupColumn;
-    }[]>;
+    resolveFixedColumns: (tableOffsetRight: any) => void;
+    fixedColumns: any[];
     resolveColumnStyle: (colPos: string) => {
         width: string;
         backgroundColor: string;
         bottom: string;
     };
-    resolveColumnClass: (column: GroupColumn, scrollX?: any, offsetRight?: any) => {
+    resolveColumnClass: (column: Column, scrollX?: any, offsetRight?: any) => {
         column_fixed: boolean;
         column_fixed_left: boolean;
         column_fixed_right: boolean;
         shadow: boolean;
     };
+    updateFixClass: (tableOffsetRight: any) => void;
 };
 export default _default;

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

@@ -1,4 +1,4 @@
-import { TablePropTypes } from '../props';
+import { Column, SortScope, TablePropTypes } from '../props';
 /**
  * 处理 Prop中的分页配置
  * prop中的配置会覆盖本地的配置
@@ -7,10 +7,13 @@ import { TablePropTypes } from '../props';
  * @returns 返回值
  */
 export declare const resolvePaginationOption: (propPagination: any, defVal: any) => any;
-declare const _default: (props: TablePropTypes, indexData: any[]) => {
+declare const _default: (props: TablePropTypes) => {
     pageData: any[];
+    indexData: import("vue").ComputedRef<any[]>;
     localPagination: any;
-    resolvePageData: (filterFn: any, sortFn: any, activeSortColumn: any) => void;
-    watchEffectFn: (filterFn: any, sortFn: any, activeSortColumn: any) => void;
+    resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: any) => void;
+    resetStartEndIndex: () => void;
+    multiFilter: (filterFnList: ((row: any, index: any, data: any) => void)[]) => void;
+    sort: (sourceData: any[], sortFn: any, column: Column, type: string, sortScope: SortScope) => void;
 };
 export default _default;

package/lib/table/props.d.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, Slot } from 'vue';
+import { ExtractPropTypes } from 'vue';
 import { IHeadColor, ROW_HOVER, SORT_OPTION } from './const';
 export declare enum SortScope {
     CURRENT = "current",
@@ -43,35 +43,20 @@ export declare enum FixedEnum {
     RIGHT = "right"
 }
 export declare const fixedType: import("vue-types").VueTypeValidableDef<"right" | "left">;
-export type IOverflowTooltip = {
-    content: string | Function;
-    disabled?: boolean;
-    watchCellResize?: boolean;
-    mode?: `${OverflowModeEnum}`;
-};
 export type IOverflowTooltipProp = {
     content: string | Function;
-    disabled?: boolean;
+    disabled?: (col: Column, row: any) => boolean | boolean;
     watchCellResize?: boolean;
     mode?: `${OverflowModeEnum}`;
+    popoverOption?: any;
+    resizerWay?: ResizerWay;
 } | boolean;
-export declare const IOverflowTooltipPropType: import("vue-types").VueTypeDef<IOverflowTooltipProp> & {
-    default: boolean | (() => {
-        content: string | Function;
-        disabled?: boolean;
-        watchCellResize?: boolean;
-        mode?: `${OverflowModeEnum}`;
-    });
-};
-export declare const IOverflowTooltipType: import("vue-types").VueTypeDef<IOverflowTooltip> & {
-    default: () => IOverflowTooltip;
-};
+export type IOverflowTooltip = IOverflowTooltipProp;
+export declare const IOverflowTooltipPropType: import("vue-types").VueTypeDef<IOverflowTooltipProp>;
 export type ISortOption = {
     [key: string]: SORT_OPTION;
 };
-export declare const ISortType: import("vue-types").VueTypeDef<ISortPropShape> & {
-    default: string | boolean | (() => ISortShape);
-};
+export declare const ISortType: import("vue-types").VueTypeDef<ISortPropShape>;
 export type ISortShape = {
     sortFn?: Function;
     sortScope?: SortScope;
@@ -86,11 +71,11 @@ export type IFilterShape = {
     filterScope?: SortScope;
     btnSave?: boolean | string;
     btnReset?: boolean | string;
+    height?: number;
+    maxHeight?: number;
 };
 export type IFilterPropShape = IFilterShape | boolean | string;
-export declare const IFilterType: import("vue-types").VueTypeDef<IFilterPropShape> & {
-    default: string | boolean | (() => IFilterShape);
-};
+export declare const IFilterType: import("vue-types").VueTypeDef<IFilterPropShape>;
 export declare enum ColumnPickEnum {
     MULTI = "multi",
     SINGLE = "single",
@@ -101,9 +86,7 @@ export declare enum ResizerWay {
     THROTTLE = "throttle"
 }
 export declare const IColumnType: import("vue-types").VueTypeDef<Column>;
-export declare const ITableSettings: import("vue-types").VueTypeDef<ISettingPropType> & {
-    default: boolean | (() => Settings);
-};
+export declare const ITableSettings: import("vue-types").VueTypeDef<ISettingPropType>;
 /**
  * 配置自定义行高选项
  */
@@ -128,10 +111,46 @@ export type Field = {
     id?: string;
     name?: string;
 };
+export type LabelFunctionString = ((_column: any, _index: any) => string | number | boolean | JSX.Element) | string | number | boolean;
+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 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;
+export declare const SpanFunctionStringType: import("vue-types").VueTypeDef<SpanFunctionString>;
+export type RowClassFunctionString = ((row: any) => 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 declare const RowHeightFunctionNumberType: import("vue-types").VueTypeDef<RowHeightFunctionNumber>;
+type FunctionNumber = Function | number;
+export declare const FunctionNumberType: import("vue-types").VueTypeDef<FunctionNumber>;
+type StringNumber = string | number;
+export declare const StringNumberType: (val: number | string) => import("vue-types").VueTypeDef<StringNumber> & {
+    default: StringNumber;
+};
+/**
+ * 表格字段解释说明
+ */
+export type IColumnExplain = {
+    content: LabelFunctionString;
+    head: LabelFunctionString | boolean;
+} | boolean;
 export type Column = {
-    label: Function | string;
-    field?: Function | string;
-    render?: Function | string | Slot;
+    label: LabelFunctionString;
+    field?: LabelFunctionString;
+    render?: RenderFunctionString;
+    renderHead?: RenderFunctionString;
     width?: number | string;
     minWidth?: number | string;
     columnKey?: string;
@@ -141,17 +160,16 @@ export type Column = {
     resizable?: boolean;
     sort?: ISortShape | boolean | string;
     filter?: IFilterShape | boolean | string;
-    colspan?: Function | Number;
-    rowspan?: Function | Number;
-    textAlign?: String;
-    className?: string | Function;
+    colspan?: SpanFunctionString;
+    rowspan?: SpanFunctionString;
+    textAlign?: string;
+    className?: RowClassFunctionString;
     align?: string;
-    prop?: string;
+    prop?: LabelFunctionString;
     index?: Number;
+    explain?: IColumnExplain;
 };
-export declare const IColumnProp: import("vue-types").VueTypeDef<Column> & {
-    default: () => Column;
-};
+export declare const IColumnProp: import("vue-types").VueTypeDef<Column>;
 export type Thead = {
     height?: Number;
     isShow?: boolean;
@@ -188,6 +206,16 @@ export type Colgroups = Column & {
     resizeWidth: number;
     listeners: Map<string, Function>;
 };
+export declare enum IColSortBehavior {
+    /**
+     * 列排序是相互依赖的
+     */
+    interdependent = "interdependent",
+    /**
+     * 列与列之间的排序是独立的，互斥的
+     */
+    independent = "independent"
+}
 export declare const tableProps: {
     /**
      * 渲染列表
@@ -219,8 +247,8 @@ export declare const tableProps: {
      * 默认：auto 根据行数自动填充高度
      * 100%，依赖初始化时父级容器高度
      */
-    height: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
+    height: import("vue-types").VueTypeDef<StringNumber> & {
+        default: StringNumber;
     };
     /**
      * 是否为斑马纹 Table
@@ -234,22 +262,22 @@ export declare const tableProps: {
      * 设置表格最小高度
      * 默认：300
      */
-    minHeight: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
+    minHeight: import("vue-types").VueTypeDef<StringNumber> & {
+        default: StringNumber;
     };
     /**
      * 设置表格最d大高度
      * 默认：auto，依赖外层高度
      */
-    maxHeight: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
+    maxHeight: import("vue-types").VueTypeDef<StringNumber> & {
+        default: StringNumber;
     };
     /**
      * 行高，可以为固定数值类型
      * 可以是函数，返回当前行的高度，返回值为数值类型
      */
-    rowHeight: import("vue-types").VueTypeDef<any> & {
-        default: any;
+    rowHeight: import("vue-types").VueTypeDef<RowHeightFunctionNumber> & {
+        default: RowHeightFunctionNumber;
     };
     /**
      * Thead行高，可以为固定数值类型
@@ -320,6 +348,14 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否支持跨页全选
+     */
+    acrossAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     /**
      * 空数据展示
      */
@@ -327,11 +363,15 @@ export declare const tableProps: {
         default: string;
     };
     /**
-     * bk-table-setting-content
+     * 单元格数据为空展示
      */
-    settings: import("vue-types").VueTypeDef<ISettingPropType> & {
-        default: boolean | (() => Settings);
+    emptyCellText: import("vue-types").VueTypeDef<any> & {
+        default: any;
     };
+    /**
+     * bk-table-setting-content
+     */
+    settings: import("vue-types").VueTypeDef<ISettingPropType>;
     /**
      * 行的 class 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style
      */
@@ -385,6 +425,17 @@ export declare const tableProps: {
     } & {
         default: string;
     };
+    /**
+     * 默认选中行
+     * 仅对设置了selection的情况下生效
+     * 值可以为 [key1, key2, key3, ...] 或者 [row1, row2, row3, ...]
+     * 如果设置为key，则 selectionKey 必须设置，内部匹配逻辑为：row[selectionKey] === key
+     */
+    checked: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
     /**
      * 提供自定义判定当前行是否选中
      * 如果设置了此属性，其他判定均不生效
@@ -408,14 +459,7 @@ export declare const tableProps: {
      * 当内容过长被隐藏时显示 tooltip, 此处为全局配置, 如果只配置此处，整个table都启用
      * column内部可以单个配置覆盖此配置
      */
-    showOverflowTooltip: import("vue-types").VueTypeDef<IOverflowTooltipProp> & {
-        default: boolean | (() => {
-            content: string | Function;
-            disabled?: boolean;
-            watchCellResize?: boolean;
-            mode?: `${OverflowModeEnum}`;
-        });
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<IOverflowTooltipProp>;
     /**
      * 为避免不必要的数据修改导致的不可控组件更新
      * 默认组件不会对传入组件的data进行任何修改
@@ -475,4 +519,20 @@ export declare const tableProps: {
     prependStyle: import("vue-types").VueTypeDef<import("vue").CSSProperties> & {
         default: () => import("vue").CSSProperties;
     };
+    /**
+     * 列排序行为
+     * independent：列与列之间的排序是独立的，互斥的
+     * interdependent：列排序是相互影响、依赖的
+     *
+     */
+    colSortBehavior: import("vue-types").VueTypeDef<IColSortBehavior>;
+    /**
+     * 是否采用flex布局表格
+     */
+    isFlex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };
+export {};

package/lib/table/render.d.ts

@@ -1,12 +1,12 @@
 import { ComputedRef, Ref, SetupContext } from 'vue';
 import type { Language } from '../locale';
 import { TablePlugins } from './plugins';
-import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
+import { Column, TablePropTypes } from './props';
+import { ITableFormatData, ITableResponse } from './use-attributes';
 export default class TableRender {
     props: TablePropTypes;
     context: SetupContext;
-    reactiveProp: IReactiveProp;
-    colgroups: GroupColumn[];
+    tableResp: ITableResponse;
     uuid: string;
     events: Map<string, any[]>;
     styleRef: ComputedRef<{
@@ -15,8 +15,9 @@ export default class TableRender {
     t: ComputedRef<Language['table']>;
     activeSortIndex: Ref<number>;
     plugins: TablePlugins;
-    constructor(props: any, ctx: any, reactiveProp: IReactiveProp, colgroups: GroupColumn[], styleRef: any, t: ComputedRef<Language['table']>);
-    get propActiveCols(): IColumnActive[];
+    constructor(props: any, ctx: any, tableResp: ITableResponse, styleRef: any, t: ComputedRef<Language['table']>);
+    get formatData(): ITableFormatData;
+    get columns(): Column[];
     /**
      * 渲染Table Head
      */
@@ -38,12 +39,6 @@ export default class TableRender {
      */
     on(eventName: string, watcher: Function): this;
     destroy(): void;
-    /**
-     * 派发事件
-     * @param eventName
-     * @param args
-     */
-    private emitEvent;
     private handlePageLimitChange;
     private handlePageChange;
     /**
@@ -51,7 +46,7 @@ export default class TableRender {
      * @param index 指定选中的列Index
      * @param single 是否重置其他列，当只允许选中一列的情况下需要先重置
      */
-    private setColumnActive;
+    private getSortFnByColumn;
     /**
      * 点击选中一列事件
      * @param index 当前选中列Index
@@ -123,7 +118,6 @@ export default class TableRender {
      * @param colIndex 指定列Index
      * @returns
      */
-    private isColActive;
     /**
      * 渲染表格Col分组
      * @returns
@@ -133,8 +127,4 @@ export default class TableRender {
      * 过滤当前可渲染的列
      */
     private get filterColGroups();
-    /**
-     * 当前Table Setting
-     */
-    private get setting();
 }