bkui-vue 0.0.2-beta.4 → 0.0.2-beta.40

package/lib/table/props.d.ts

@@ -1,5 +1,5 @@
-import { ExtractPropTypes, Slot } from 'vue';
-import { ROW_HOVER, SORT_OPTION } from './const';
+import { ExtractPropTypes } from 'vue';
+import { IHeadColor, ROW_HOVER, SORT_OPTION } from './const';
 export declare enum SortScope {
     CURRENT = "current",
     ALL = "all"
@@ -12,7 +12,7 @@ export declare enum OverflowModeEnum {
     STATIC = "static",
     AUTO = "auto"
 }
-export declare const overflowModeType: import("vue-types").VueTypeDef<"auto" | "static">;
+export declare const EnumOverflowModeType: import("vue-types").VueTypeDef<"auto" | "static">;
 export declare enum ColumnTypeEnum {
     SELECTION = "selection",
     INDEX = "index",
@@ -43,15 +43,37 @@ export declare enum FixedEnum {
     RIGHT = "right"
 }
 export declare const fixedType: import("vue-types").VueTypeValidableDef<"right" | "left">;
-export type IOverflowTooltip = {
+export type IOverflowTooltipProp = {
     content: string | Function;
     disabled?: boolean;
     watchCellResize?: boolean;
     mode?: `${OverflowModeEnum}`;
-};
+    popoverOption?: any;
+    resizerWay?: ResizerWay;
+} | boolean;
+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>;
+export type ISortShape = {
+    sortFn?: Function;
+    sortScope?: SortScope;
+    value?: SORT_OPTION;
+};
+export type ISortPropShape = ISortShape | boolean | string;
+export type IFilterShape = {
+    list: any[];
+    filterFn?: Function;
+    match?: FullEnum;
+    checked?: any[];
+    filterScope?: SortScope;
+    btnSave?: boolean | string;
+    btnReset?: boolean | string;
+};
+export type IFilterPropShape = IFilterShape | boolean | string;
+export declare const IFilterType: import("vue-types").VueTypeDef<IFilterPropShape>;
 export declare enum ColumnPickEnum {
     MULTI = "multi",
     SINGLE = "single",
@@ -61,67 +83,127 @@ export declare enum ResizerWay {
     DEBOUNCE = "debounce",
     THROTTLE = "throttle"
 }
-export declare const IColumnType: {
-    label: import("vue-types").VueTypeDef<any>;
-    field: import("vue-types").VueTypeDef<any>;
-    render: import("vue-types").VueTypeDef<any>;
-    width: import("vue-types").VueTypeDef<string | number>;
-    minWidth: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
-    };
-    columnKey: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
-    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | IOverflowTooltip> & {
-        default: boolean | (() => IOverflowTooltip);
-    };
-    type: import("vue-types").VueTypeDef<"none" | "selection" | "index" | "expand">;
-    resizable: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    fixed: import("vue-types").VueTypeDef<boolean | "right" | "left"> & {
-        default: boolean | "right" | "left";
-    };
-    sort: import("vue-types").VueTypeDef<string | boolean | {
-        sortFn: any;
-        sortScope: (object | "all" | "current" | (() => "all" | "current") | ((props: Record<string, unknown>) => "all" | "current")) & ("all" | "current");
-        value: string;
-    }> & {
-        default: string | boolean | (() => {
-            sortFn: any;
-            sortScope: (object | "all" | "current" | (() => "all" | "current") | ((props: Record<string, unknown>) => "all" | "current")) & ("all" | "current");
-            value: string;
-        });
-    };
-    filter: import("vue-types").VueTypeDef<string | boolean | {
-        list: any[] | (object & (() => any[]));
-        filterFn: any;
-        match: "full" | "fuzzy";
-        checked: any[] | (object & (() => any[]));
-        filterScope: (object | "all" | "current" | (() => "all" | "current") | ((props: Record<string, unknown>) => "all" | "current")) & ("all" | "current");
-        btnSave: (string | boolean | object | (() => string | boolean) | ((props: Record<string, unknown>) => string | boolean)) & (string | boolean);
-        btnReset: (string | boolean | object | (() => string | boolean) | ((props: Record<string, unknown>) => string | boolean)) & (string | boolean);
-    }> & {
-        default: string | boolean | (() => {
-            list: any[] | (object & (() => any[]));
-            filterFn: any;
-            match: "full" | "fuzzy";
-            checked: any[] | (object & (() => any[]));
-            filterScope: (object | "all" | "current" | (() => "all" | "current") | ((props: Record<string, unknown>) => "all" | "current")) & ("all" | "current");
-            btnSave: (string | boolean | object | (() => string | boolean) | ((props: Record<string, unknown>) => string | boolean)) & (string | boolean);
-            btnReset: (string | boolean | object | (() => string | boolean) | ((props: Record<string, unknown>) => string | boolean)) & (string | boolean);
-        });
+export declare const IColumnType: import("vue-types").VueTypeDef<Column>;
+export declare const ITableSettings: import("vue-types").VueTypeDef<ISettingPropType>;
+/**
+ * 配置自定义行高选项
+ */
+export type SizeItem = {
+    value?: string;
+    label?: string;
+    height?: number;
+};
+export type Settings = {
+    fields?: Field[];
+    checked?: string[];
+    limit?: number;
+    size?: string;
+    sizeList?: SizeItem[];
+    showLineHeight?: boolean;
+};
+export type ISettingPropType = Settings | boolean;
+export type Field = {
+    label: string;
+    field?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+};
+export type LabelFunctionString = ((_column: any, _index: any) => string | JSX.Element) | 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 | 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: LabelFunctionString;
+    field?: LabelFunctionString;
+    render?: RenderFunctionString;
+    renderHead?: RenderFunctionString;
+    width?: number | string;
+    minWidth?: number | string;
+    columnKey?: string;
+    showOverflowTooltip?: boolean | IOverflowTooltip;
+    type?: string;
+    fixed?: string | boolean;
+    resizable?: boolean;
+    sort?: ISortShape | boolean | string;
+    filter?: IFilterShape | boolean | string;
+    colspan?: SpanFunctionString;
+    rowspan?: SpanFunctionString;
+    textAlign?: string;
+    className?: RowClassFunctionString;
+    align?: string;
+    prop?: LabelFunctionString;
+    index?: Number;
+    explain?: IColumnExplain;
+};
+export declare const IColumnProp: import("vue-types").VueTypeDef<Column>;
+export type Thead = {
+    height?: Number;
+    isShow?: boolean;
+    cellFn?: Function;
+    color?: IHeadColor | string;
+};
+export type Columns = ReadonlyArray<Column>;
+export type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
+export type GroupColumn = {
+    calcWidth?: number;
+    resizeWidth?: number;
+    isHidden?: boolean;
+    listeners?: Map<string, any>;
+} & Column;
+export type IColumnActive = {
+    index: number;
+    active: boolean;
+};
+export type IReactiveProp = {
+    activeColumns: IColumnActive[];
+    rowActions: Record<string, any>;
+    scrollTranslateY: Number;
+    scrollTranslateX: Number;
+    pos: Record<string, any>;
+    settings: Settings | boolean;
+    setting: {
+        size: string;
+        height: Number;
     };
-    colspan: import("vue-types").VueTypeDef<any>;
-    rowspan: import("vue-types").VueTypeDef<any>;
-    align: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
-    className: import("vue-types").VueTypeDef<any>;
+    defaultSort: Record<string, any>;
+};
+export type Colgroups = Column & {
+    calcWidth: number;
+    resizeWidth: number;
+    listeners: Map<string, Function>;
 };
-export type TableColumnProps = Partial<ExtractPropTypes<typeof IColumnType>>;
 export declare const tableProps: {
     /**
      * 渲染列表
@@ -153,29 +235,37 @@ 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
+     */
+    stripe: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
     /**
      * 设置表格最小高度
      * 默认：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行高，可以为固定数值类型
@@ -196,7 +286,9 @@ export declare const tableProps: {
     /**
      * table header config
      */
-    thead: import("vue-types").VueTypeShape<Thead>;
+    thead: import("vue-types").VueTypeDef<Thead> & {
+        default: () => Thead;
+    };
     /**
      * 是否启用虚拟渲染 & 滚动
      * 当数据量很大时，启用虚拟渲染可以解决压面卡顿问题
@@ -253,23 +345,7 @@ export declare const tableProps: {
     /**
      * bk-table-setting-content
      */
-    settings: import("vue-types").VueTypeDef<boolean | {
-        fields: Field[] | (() => Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: SizeItem[] | (object & (() => SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    }> & {
-        default: boolean | (() => {
-            fields: Field[] | (() => Field[]);
-            checked: string[] | (() => string[]);
-            limit: number;
-            size: "small" | "medium" | "large";
-            sizeList: SizeItem[] | (object & (() => SizeItem[]));
-            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-        });
-    };
+    settings: import("vue-types").VueTypeDef<ISettingPropType>;
     /**
      * 行的 class 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style
      */
@@ -346,9 +422,7 @@ export declare const tableProps: {
      * 当内容过长被隐藏时显示 tooltip, 此处为全局配置, 如果只配置此处，整个table都启用
      * column内部可以单个配置覆盖此配置
      */
-    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | IOverflowTooltip> & {
-        default: boolean | (() => IOverflowTooltip);
-    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<IOverflowTooltipProp>;
     /**
      * 为避免不必要的数据修改导致的不可控组件更新
      * 默认组件不会对传入组件的data进行任何修改
@@ -409,83 +483,4 @@ export declare const tableProps: {
         default: () => import("vue").CSSProperties;
     };
 };
-/**
- * 配置自定义行高选项
- */
-export type SizeItem = {
-    value?: string;
-    label?: string;
-    height?: number;
-};
-export type Settings = {
-    fields?: Field[];
-    checked?: string[];
-    limit?: number;
-    size?: string;
-    sizeList?: SizeItem[];
-    showLineHeight?: boolean;
-};
-export type Field = {
-    label: string;
-    field?: string;
-    disabled?: boolean;
-};
-export type Column = {
-    label: Function | string;
-    field?: Function | string;
-    render?: Function | string | Slot;
-    width?: number | string;
-    minWidth?: number | string;
-    columnKey?: string;
-    showOverflowTooltip?: boolean | IOverflowTooltip;
-    type?: string;
-    fixed?: string | boolean;
-    resizable?: boolean;
-    sort?: {
-        sortFn?: Function;
-        sortScope?: string;
-        value?: string;
-    } | boolean | string;
-    filter?: {
-        list?: any;
-        filterFn?: Function;
-        checked?: any;
-    } | boolean | string;
-    colspan?: Function | Number;
-    rowspan?: Function | Number;
-    textAlign?: String;
-    className?: string | Function;
-    align?: string;
-};
-export type Thead = {
-    height?: Number;
-    isShow?: boolean;
-    cellFn?: Function;
-};
-export type GroupColumn = {
-    calcWidth?: number;
-    resizeWidth?: number;
-    isHidden?: boolean;
-    listeners?: Map<string, any>;
-} & Column;
-export type Columns = ReadonlyArray<Column>;
-export type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
-export type IColumnActive = {
-    index: number;
-    active: boolean;
-};
-export type IReactiveProp = {
-    activeColumns: IColumnActive[];
-    rowActions: Record<string, any>;
-    scrollTranslateY: Number;
-    scrollTranslateX: Number;
-    pos: Record<string, any>;
-    settings: any;
-    setting: any;
-    defaultSort: Record<string, any>;
-};
-export type Colgroups = Column & {
-    calcWidth: number;
-    resizeWidth: number;
-    listeners: Map<string, Function>;
-};
+export {};

package/lib/table/render.d.ts

@@ -1,11 +1,11 @@
-import { ComputedRef, Ref } from 'vue';
+import { ComputedRef, Ref, SetupContext } from 'vue';
 import type { Language } from '../locale';
 import { TablePlugins } from './plugins';
 import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
 export default class TableRender {
     props: TablePropTypes;
-    context: any;
-    reactiveProp: any;
+    context: SetupContext;
+    reactiveProp: IReactiveProp;
     colgroups: GroupColumn[];
     uuid: string;
     events: Map<string, any[]>;
@@ -26,7 +26,9 @@ export default class TableRender {
      * @param rows 表格数据
      * @returns
      */
-    renderTableBodySchema(rows: any[]): any;
+    renderTableBodySchema(rows: any[]): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | JSX.Element;
     renderTableFooter(options: any): JSX.Element;
     getRowHeight: (row?: any, rowIndex?: number) => any;
     /**

package/lib/table/table.css

@@ -1004,6 +1004,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;
@@ -1022,8 +1028,8 @@
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 8px;
 }
 .bk-table .bk-table-head::-webkit-scrollbar-thumb,
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1044,6 +1050,7 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
+  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -1083,6 +1090,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,
@@ -1123,7 +1137,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,
@@ -1174,6 +1187,7 @@
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   font-weight: 400;
+  background-color: var(--background-color);
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1187,11 +1201,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;
@@ -1242,7 +1261,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;
@@ -1292,7 +1313,9 @@
   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 {
@@ -1331,3 +1354,6 @@
 .bk-table .bk-pagination .is-last {
   margin-left: auto;
 }
+.bk-table .stripe-row {
+  background: #FAFBFD;
+}