bkui-vue 0.0.2-beta.2 → 0.0.2-beta.20

package/lib/table/table.d.ts

@@ -12,14 +12,19 @@ declare const _default: import("vue").DefineComponent<{
     height: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    stripe: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     minHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
     maxHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    rowHeight: import("vue-types").VueTypeDef<any> & {
-        default: any;
+    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber> & {
+        default: import("./props").RowHeightFunctionNumber;
     };
     headHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -31,7 +36,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
+    thead: import("vue-types").VueTypeDef<import("./props").Thead> & {
+        default: () => import("./props").Thead;
+    };
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -60,22 +67,8 @@ declare const _default: import("vue").DefineComponent<{
     emptyText: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-    settings: import("vue-types").VueTypeDef<boolean | {
-        fields: import("./props").Field[] | (() => import("./props").Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    }> & {
-        default: boolean | (() => {
-            fields: import("./props").Field[] | (() => import("./props").Field[]);
-            checked: string[] | (() => string[]);
-            limit: number;
-            size: "small" | "medium" | "large";
-            sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-        });
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType> & {
+        default: boolean | (() => import("./props").Settings);
     };
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
@@ -114,8 +107,13 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | import("./props").IOverflowTooltip> & {
-        default: boolean | (() => import("./props").IOverflowTooltip);
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp> & {
+        default: boolean | (() => {
+            content: string | Function;
+            disabled?: boolean;
+            watchCellResize?: boolean;
+            mode?: "auto" | "static";
+        });
     };
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -143,24 +141,84 @@ declare const _default: import("vue").DefineComponent<{
         default: () => import("vue").CSSProperties;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    columnPick: (..._args: any[]) => boolean;
-    columnFilter: (..._args: any[]) => boolean;
-    columnSort: (..._args: any[]) => boolean;
-    colFilterSave: (..._args: any[]) => boolean;
-    rowClick: (..._args: any[]) => boolean;
-    rowDblclick: (..._args: any[]) => boolean;
-    rowExpand: (..._args: any[]) => boolean;
-    select: (..._args: any[]) => boolean;
-    selectAll: (..._args: any[]) => boolean;
-    selectionChange: (..._args: any[]) => boolean;
-    pageLimitChange: (..._args: any[]) => boolean;
-    pageValueChange: (..._args: any[]) => boolean;
-    settingChange: (..._args: any[]) => boolean;
-    scrollBottom: (..._args: any[]) => boolean;
-    cellClick: (..._args: any[]) => boolean;
-    cellDblclick: (..._args: any[]) => boolean;
-    rowMouseEnter: (..._args: any[]) => boolean;
-    rowMouseLeave: (..._args: any[]) => boolean;
+    columnPick: (_cols: import("./props").IColumnActive[]) => boolean;
+    columnFilter: (_args: {
+        checked: string[];
+        column: import("./props").Column;
+        index: number;
+    }) => boolean;
+    columnSort: (_args: {
+        column: import("./props").Column;
+        index: number;
+        type: import("./const").SORT_OPTION;
+    }) => boolean;
+    colFilterSave: (_args: {
+        column: import("./props").Column;
+        values: Record<string, any>[];
+    }) => boolean;
+    rowClick: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
+    rowDblclick: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
+    rowExpand: (_args: {
+        row: Record<string, any>;
+        column: import("./props").Column;
+        index: Number;
+        rows: Record<string, any>[];
+        e: MouseEvent;
+    }) => boolean;
+    select: (_args: {
+        row: Record<string, any>;
+        index: Number;
+        checked: string;
+        data: Record<string, any>[];
+    }) => boolean;
+    selectAll: (_args: {
+        checked: string;
+        data: Record<string, any>[];
+    }) => boolean;
+    selectionChange: (_args: {
+        row: Record<string, any>;
+        index: Number;
+        checked: string;
+        data: Record<string, any>[];
+        isAll: boolean;
+    }) => boolean;
+    pageLimitChange: (_arg: number) => boolean;
+    pageValueChange: (_arg: number) => boolean;
+    settingChange: (_args: {
+        checked: string[];
+        size: string;
+        height: number;
+        fields: Record<string, any>[];
+    }) => boolean;
+    scrollBottom: (_args: {
+        translateX: number;
+        translateY: number;
+        scrollTop: number;
+        scrollLeft: number;
+        bottom: number;
+    }) => boolean;
+    cellClick: (_args: {
+        event: MouseEvent;
+        row: Record<string, any>;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+    cellDblclick: (_args: {
+        event: MouseEvent;
+        row: Record<string, any>;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => boolean;
+    rowMouseEnter: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
+    rowMouseLeave: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
@@ -175,14 +233,19 @@ declare const _default: import("vue").DefineComponent<{
     height: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    stripe: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     minHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
     maxHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
-    rowHeight: import("vue-types").VueTypeDef<any> & {
-        default: any;
+    rowHeight: import("vue-types").VueTypeDef<import("./props").RowHeightFunctionNumber> & {
+        default: import("./props").RowHeightFunctionNumber;
     };
     headHeight: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
@@ -194,7 +257,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
+    thead: import("vue-types").VueTypeDef<import("./props").Thead> & {
+        default: () => import("./props").Thead;
+    };
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -223,22 +288,8 @@ declare const _default: import("vue").DefineComponent<{
     emptyText: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-    settings: import("vue-types").VueTypeDef<boolean | {
-        fields: import("./props").Field[] | (() => import("./props").Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    }> & {
-        default: boolean | (() => {
-            fields: import("./props").Field[] | (() => import("./props").Field[]);
-            checked: string[] | (() => string[]);
-            limit: number;
-            size: "small" | "medium" | "large";
-            sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-        });
+    settings: import("vue-types").VueTypeDef<import("./props").ISettingPropType> & {
+        default: boolean | (() => import("./props").Settings);
     };
     rowClass: import("vue-types").VueTypeDef<any> & {
         default: any;
@@ -277,8 +328,13 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
-    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | import("./props").IOverflowTooltip> & {
-        default: boolean | (() => import("./props").IOverflowTooltip);
+    showOverflowTooltip: import("vue-types").VueTypeDef<import("./props").IOverflowTooltipProp> & {
+        default: boolean | (() => {
+            content: string | Function;
+            disabled?: boolean;
+            watchCellResize?: boolean;
+            mode?: "auto" | "static";
+        });
     };
     asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -306,32 +362,93 @@ declare const _default: import("vue").DefineComponent<{
         default: () => import("vue").CSSProperties;
     };
 }>> & {
-    onSelect?: (...args: any[]) => any;
-    onColumnPick?: (...args: any[]) => any;
-    onColumnSort?: (...args: any[]) => any;
-    onColumnFilter?: (...args: any[]) => any;
-    onColFilterSave?: (...args: any[]) => any;
-    onRowClick?: (...args: any[]) => any;
-    onRowDblclick?: (...args: any[]) => any;
-    onRowExpand?: (...args: any[]) => any;
-    onRowMouseEnter?: (...args: any[]) => any;
-    onRowMouseLeave?: (...args: any[]) => any;
-    onPageLimitChange?: (...args: any[]) => any;
-    onPageValueChange?: (...args: any[]) => any;
-    onSettingChange?: (...args: any[]) => any;
-    onScrollBottom?: (...args: any[]) => any;
-    onSelectAll?: (...args: any[]) => any;
-    onSelectionChange?: (...args: any[]) => any;
-    onCellClick?: (...args: any[]) => any;
-    onCellDblclick?: (...args: any[]) => any;
+    onSelect?: (_args: {
+        row: Record<string, any>;
+        index: Number;
+        checked: string;
+        data: Record<string, any>[];
+    }) => any;
+    onColumnPick?: (_cols: import("./props").IColumnActive[]) => any;
+    onColumnSort?: (_args: {
+        column: import("./props").Column;
+        index: number;
+        type: import("./const").SORT_OPTION;
+    }) => any;
+    onColumnFilter?: (_args: {
+        checked: string[];
+        column: import("./props").Column;
+        index: number;
+    }) => any;
+    onColFilterSave?: (_args: {
+        column: import("./props").Column;
+        values: Record<string, any>[];
+    }) => any;
+    onRowClick?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
+    onRowDblclick?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
+    onRowExpand?: (_args: {
+        row: Record<string, any>;
+        column: import("./props").Column;
+        index: Number;
+        rows: Record<string, any>[];
+        e: MouseEvent;
+    }) => any;
+    onRowMouseEnter?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
+    onRowMouseLeave?: (_e: MouseEvent, _row: Record<string, any>, _index: number, _rows: Record<string, any>[], _this: any) => any;
+    onPageLimitChange?: (_arg: number) => any;
+    onPageValueChange?: (_arg: number) => any;
+    onSettingChange?: (_args: {
+        checked: string[];
+        size: string;
+        height: number;
+        fields: Record<string, any>[];
+    }) => any;
+    onScrollBottom?: (_args: {
+        translateX: number;
+        translateY: number;
+        scrollTop: number;
+        scrollLeft: number;
+        bottom: number;
+    }) => any;
+    onSelectAll?: (_args: {
+        checked: string;
+        data: Record<string, any>[];
+    }) => any;
+    onSelectionChange?: (_args: {
+        row: Record<string, any>;
+        index: Number;
+        checked: string;
+        data: Record<string, any>[];
+        isAll: boolean;
+    }) => any;
+    onCellClick?: (_args: {
+        event: MouseEvent;
+        row: Record<string, any>;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => any;
+    onCellDblclick?: (_args: {
+        event: MouseEvent;
+        row: Record<string, any>;
+        column: import("./props").Column;
+        cell: {
+            getValue: () => string;
+        };
+        rowIndex: number;
+        columnIndex: number;
+    }) => any;
 }, {
-    pagination: boolean | {
-        [key: string]: any;
-    };
     data: any[];
+    thead: import("./props").Thead;
     height: string | number;
     maxHeight: string | number;
     border: string | ("col" | "none" | "row" | "horizontal" | "outer")[];
+    pagination: boolean | {
+        [key: string]: any;
+    };
     minHeight: string | number;
     columns: import("./props").Column[];
     cellClass: any;
@@ -340,22 +457,16 @@ declare const _default: import("vue").DefineComponent<{
     scrollLoading: boolean | {
         [key: string]: any;
     };
-    showOverflowTooltip: boolean | import("./props").IOverflowTooltip;
+    showOverflowTooltip: import("./props").IOverflowTooltipProp;
     columnPick: "disabled" | "single" | "multi";
-    rowHeight: any;
+    stripe: boolean;
+    rowHeight: import("./props").RowHeightFunctionNumber;
     showHead: boolean;
     virtualEnabled: boolean;
     paginationHeight: number;
     remotePagination: boolean;
     emptyText: string;
-    settings: boolean | {
-        fields: import("./props").Field[] | (() => import("./props").Field[]);
-        checked: string[] | (() => string[]);
-        limit: number;
-        size: "small" | "medium" | "large";
-        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
-        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
-    };
+    settings: import("./props").ISettingPropType;
     rowClass: any;
     rowStyle: any;
     cellStyle: any;

package/lib/table/table.less

@@ -42,6 +42,26 @@
     }
   }
 
+  .@{bk-prefix}-table-body-content {
+    &.@{bk-prefix}-stripe {
+      table {
+        tbody {
+          tr {
+            &:nth-child(even) {
+              td {
+                background-color: #FAFBFD;
+              }
+            }
+
+            td {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .@{bk-prefix}-fixed-bottom-border {
     position: sticky;
     bottom: 0;
@@ -82,6 +102,7 @@
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
+        position: relative;
       }
 
     }
@@ -97,6 +118,7 @@
         height: var(--row-height);
         min-width: 30px;
         clear: both;
+        background-color: #fff;
 
         &.expand-row {
           .expand-btn-action {
@@ -147,7 +169,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-          background: #fff;
 
           &.column_fixed_left {
             left: 0;
@@ -415,4 +436,8 @@
       margin-left: auto;
     }
   }
+
+  .stripe-row {
+    background: #FAFBFD;
+  }
 }

package/lib/table/table.variable.css

@@ -1126,6 +1126,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;
@@ -1166,6 +1172,7 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
+  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -1181,6 +1188,7 @@
   height: var(--row-height);
   min-width: 30px;
   clear: both;
+  background-color: #fff;
 }
 .bk-table .bk-table-head table th.expand-row .expand-btn-action,
 .bk-table .bk-table-body table th.expand-row .expand-btn-action,
@@ -1245,7 +1253,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,
@@ -1453,3 +1460,6 @@
 .bk-table .bk-pagination .is-last {
   margin-left: auto;
 }
+.bk-table .stripe-row {
+  background: #FAFBFD;
+}

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

@@ -7,6 +7,56 @@ import { TablePropTypes } from './props';
  */
 declare const _default: (props: TablePropTypes, targetColumns: ITableColumn[]) => {
     initColumns: (column: ITableColumn | ITableColumn[], remove?: boolean) => void;
-    getColumns: () => import("./props").Column[];
+    getColumns: () => import("./props").Column[] | Partial<import("vue").ExtractPropTypes<{
+        label: import("vue-types").VueTypeDef<import("./props").LabelFunctionString>;
+        field: import("vue-types").VueTypeDef<import("./props").LabelFunctionString>;
+        render: import("vue-types").VueTypeDef<import("./props").RenderFunctionString>;
+        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<import("./props").IOverflowTooltipProp> & {
+            default: boolean | (() => {
+                content: string | Function;
+                disabled?: boolean;
+                watchCellResize?: boolean;
+                mode?: "auto" | "static";
+            });
+        };
+        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<import("./props").ISortPropShape> & {
+            default: string | boolean | (() => import("./props").ISortShape);
+        };
+        filter: import("vue-types").VueTypeDef<import("./props").IFilterPropShape> & {
+            default: string | boolean | (() => import("./props").IFilterShape);
+        };
+        colspan: import("vue-types").VueTypeDef<import("./props").SpanFunctionString> & {
+            default: import("./props").SpanFunctionString;
+        };
+        rowspan: import("vue-types").VueTypeDef<import("./props").SpanFunctionString> & {
+            default: import("./props").SpanFunctionString;
+        };
+        align: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
+        className: import("vue-types").VueTypeDef<import("./props").RowClassFunctionString>;
+        prop: import("vue-types").VueTypeDef<import("./props").LabelFunctionString>;
+        index: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+    }>>[];
 };
 export default _default;

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

@@ -1,4 +1,5 @@
-import { Colgroups, Column, Settings, TablePropTypes } from './props';
+import { ITableColumn } from './components/table-column';
+import { Colgroups, Settings, TablePropTypes } from './props';
 /**
  * 渲染class settings
  * @param props: TablePropTypes
@@ -7,7 +8,7 @@ import { Colgroups, Column, Settings, TablePropTypes } from './props';
  * @param reactiveProp 组件内部定义的响应式对象
  * @param pageData 当前页数据
  */
-export declare const useClass: (props: TablePropTypes, targetColumns: Column[], root?: any, reactiveProp?: any, pageData?: any[]) => {
+export declare const useClass: (props: TablePropTypes, targetColumns: ITableColumn[], root?: any, reactiveProp?: any, pageData?: any[]) => {
     tableClass: import("vue").ComputedRef<string>;
     headClass: string;
     contentClass: {
@@ -43,7 +44,7 @@ export declare const useClass: (props: TablePropTypes, targetColumns: Column[],
  * @param props: TablePropTypes
  * @param targetColumns 解析之后的column配置（主要用来处理通过<bk-column>配置的数据结构）
  */
-export declare const useInit: (props: TablePropTypes, targetColumns: Column[]) => {
+export declare const useInit: (props: TablePropTypes, targetColumns: ITableColumn[]) => {
     colgroups: Colgroups[];
     dragOffsetXStyle: import("vue").ComputedRef<{
         readonly position: "absolute";
@@ -63,20 +64,22 @@ export declare const useInit: (props: TablePropTypes, targetColumns: Column[]) =
         };
         activeColumns: any[];
         settings: boolean | {
-            fields: (() => import("./props").Field[]) | {
+            fields?: {
                 label: string;
                 field?: string;
                 disabled?: boolean;
+                id?: string;
+                name?: string;
             }[];
-            checked: string[] | (() => string[]);
-            limit: number;
-            size: "small" | "medium" | "large";
-            sizeList: (object & (() => import("./props").SizeItem[])) | {
+            checked?: string[];
+            limit?: number;
+            size?: string;
+            sizeList?: {
                 value?: string;
                 label?: string;
                 height?: number;
             }[];
-            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
+            showLineHeight?: boolean;
         };
         setting: {
             size: string;
@@ -93,6 +96,7 @@ export declare const useInit: (props: TablePropTypes, targetColumns: Column[]) =
     }[]>;
     resolveColumnStyle: (colPos: string) => {
         width: string;
+        backgroundColor: string;
         bottom: string;
     };
     resolveColumnClass: (column: import("./props").GroupColumn, scrollX?: any, offsetRight?: any) => {

package/lib/table/utils.d.ts

@@ -83,6 +83,7 @@ export declare const resolveHeadConfig: (props: TablePropTypes) => {
     height?: Number;
     isShow?: boolean;
     cellFn?: Function;
+    color?: string;
 };
 /**
    * 获取当前行指定列的内容