bkui-vue 0.0.1-beta.14 → 0.0.1-beta.17

package/lib/table/props.d.ts

@@ -23,6 +23,59 @@ export declare const tableProps: {
     columnPick: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    /**
+     * 设置表格高度
+     * 默认：auto，依赖外层高度
+     */
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 设置表格最小高度
+     * 默认：auto，依赖外层高度
+     */
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 行高，可以为固定数值类型
+     * 可以是函数，返回当前行的高度，返回值为数值类型
+     */
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    /**
+     * Thead行高，可以为固定数值类型
+     */
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 是否显示Head
+     */
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 是否启用虚拟渲染 & 滚动
+     * 当数据量很大时，启用虚拟渲染可以解决压面卡顿问题
+     */
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 表格边框显示设置，可以是一个组合
+     * 生效规则: 除非单独设置 none,否则会追加每个设置
+     */
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
 };
 export declare type Column = {
     label: Function | string;
@@ -30,6 +83,9 @@ export declare type Column = {
     render?: Function | string;
     width?: number | string;
 };
+export declare type GroupColumn = {
+    calcWidth?: number;
+} & Column;
 export declare type Columns = ReadonlyArray<Column>;
 export declare type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
 export declare type IColumnActive = {

package/lib/table/render.d.ts

@@ -1,17 +1,26 @@
 import { SetupContext } from 'vue';
-import { IColumnActive, IReactiveProp, TablePropTypes } from './props';
+import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
+import { TablePlugins } from './plugins/index';
 export default class TableRender {
     props: TablePropTypes;
     context: SetupContext;
     reactiveProp: any;
-    constructor(props: TablePropTypes, ctx: SetupContext, reactiveProp: IReactiveProp);
+    colgroups: GroupColumn[];
+    plugins: TablePlugins;
+    constructor(props: TablePropTypes, ctx: SetupContext, reactiveProp: IReactiveProp, colgroups: GroupColumn[]);
     get propActiveCols(): IColumnActive[];
+    /**
+     * 渲染Table Head
+     * @param activeColumns 当前选中的列
+     * @returns
+     */
+    renderTableHeadSchema(): JSX.Element;
     /**
      * 渲染Table主体
      * @param activeColumns 当前选中的列
      * @returns
      */
-    renderTableBodySchema(): JSX.Element;
+    renderTableBodySchema(rows: any[]): JSX.Element;
     /**
      * 指定列选中状态
      * @param index 指定选中的列Index
@@ -33,6 +42,13 @@ export default class TableRender {
      * @returns
      */
     private renderTBody;
+    /**
+     * 渲染表格Cell内容
+     * @param row 当前行
+     * @param column 当前列
+     * @returns
+     */
+    private renderCell;
     /**
      * 判定指定列是否为选中状态
      * @param colIndex 指定列Index

package/lib/table/table.css

@@ -1,42 +1,81 @@
-.bk-table .bk-table-body {
-  height: 500px;
+.bk-table {
   overflow: auto;
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table .bk-table-head,
+.bk-table .bk-table-body {
   background: white;
 }
+.bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
 }
-.bk-table .bk-table-body table .cell {
-  height: 40px;
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
+  height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
-  line-height: 40px;
+  line-height: var(--row-height);
+  color: #575961;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-body table td {
-  min-width: 80px;
-  border-bottom: 1px solid #dfe0e5;
-}
+.bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
+  color: #313238;
+  background-color: #fafbfd;
 }
-.bk-table .bk-table-body table thead th.active {
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
   background: #f5f7fa;
 }
+.bk-table.bordered-row .cell {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid #dcdee5;
+  border-left: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th .cell,
+.bk-table.bordered-col td .cell {
+  border-right: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th:last-child .cell,
+.bk-table.bordered-col td:last-child .cell {
+  border-right: none;
+}
+.bk-table.bordered-none th .cell,
+.bk-table.bordered-none td .cell {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
 .bk-table .bk-table-fixed {
   width: 100%;
 }
 .bk-table colgroup col {
-  background: #fff;
+  background: white;
 }
 .bk-table colgroup col.active {
   position: relative;

package/lib/table/table.d.ts

@@ -8,19 +8,78 @@ declare const _default: import("vue").DefineComponent<{
     columnPick: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    data?: unknown;
-    columns?: unknown;
-    activeColumn?: unknown;
-    columnPick?: unknown;
-} & {
-    data: any[];
-    columnPick: string;
-} & {
-    columns?: Column[];
-    activeColumn?: number | number[];
-}> & ({} | {}), {
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    }; /** 表格外层容器样式 */
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    columns: import("vue-types").VueTypeDef<Column[]>;
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    }; /** 表格外层容器样式 */
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+}>>, {
     data: any[];
+    height: string | number;
+    border: string[];
+    headHeight: number;
     columnPick: string;
+    minHeight: string | number;
+    rowHeight: any;
+    showHead: boolean;
+    virtualEnabled: boolean;
 }>;
 export default _default;

package/lib/table/table.less

@@ -1,28 +1,31 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-table {
+  overflow: auto;
+  border-top: 1px solid @table-border-color;
+  border-bottom: 1px solid @table-border-color;
+  .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
-    height: 500px;
-    overflow: auto;
-    background: @white-color;
+    background: @table-bg-color;
 
     table {
       width: 100%;
       border-collapse: collapse;
 
-      .cell {
-        height: 40px;
-        padding: 0 15px;
-        overflow: hidden;
-        line-height: 40px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-   
       th,
       td {
         min-width: 80px;
-        border-bottom: 1px solid #dfe0e5;
+
+        .cell {
+          height: var(--row-height);
+          padding: 0 15px;
+          overflow: hidden;
+          line-height: var(--row-height);
+          color: @table-body-font-color;
+          text-align: left;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
       thead {
@@ -30,11 +33,12 @@
           position: sticky; 
           top: 0; 
           z-index: 1;
-          background-color: #fff;
+          color: @table-head-font-color;
+          background-color: @table-head-bg-color;
 
-          &.active {
+          &.active,
+          &:hover {
             background: #f0f1f5;
-            // cursor: ;
           }
         }
       }
@@ -43,20 +47,60 @@
         tr {
           &:hover {
             td {
-              background: #f5f7fa;
+              background: @table-row-hover-bg-color;
             }
           }
         }
       }
     }
   }
+
+  &.bordered-row {
+    .cell { 
+      border-bottom: 1px solid @table-border-color;
+    }
+  }
+
+  &.bordered-outer {
+    border-right: 1px solid @table-border-color;
+    border-left: 1px solid @table-border-color;
+  }
+
+  &.bordered-col {
+    th,
+    td {
+      .cell { 
+        border-right: 1px solid @table-border-color;
+      }
+
+      &:last-child {
+        .cell {
+          border-right: none;
+        }
+      }
+    }
+
+  }
+
+  &.bordered-none {
+    th,
+    td {
+      .cell {
+        border-top: none;
+        border-right: none;
+        border-bottom: none;
+        border-left: none;
+      }
+    }
+  }
+
   .@{bk-prefix}-table-fixed {
     width: 100%;
   }
 
   colgroup {
     col {
-      background: #fff;
+      background: @table-bg-color;
 
       &.active {
         position: relative;

package/lib/table/table.variable.css

@@ -83,46 +83,91 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
-.bk-table .bk-table-body {
-  height: 500px;
+.bk-table {
   overflow: auto;
-  background: var(--white-color);
+  border-top: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table .bk-table-head,
+.bk-table .bk-table-body {
+  background: var(--table-bg-color);
 }
+.bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
 }
-.bk-table .bk-table-body table .cell {
-  height: 40px;
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
+  height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
-  line-height: 40px;
+  line-height: var(--row-height);
+  color: var(--table-body-font-color);
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-body table td {
-  min-width: 80px;
-  border-bottom: 1px solid #dfe0e5;
-}
+.bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
+  color: var(--table-head-font-color);
+  background-color: var(--table-head-bg-color);
 }
-.bk-table .bk-table-body table thead th.active {
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
-  background: #f5f7fa;
+  background: var(--table-row-hover-bg-color);
+}
+.bk-table.bordered-row .cell {
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid var(--table-border-color);
+  border-left: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-col th .cell,
+.bk-table.bordered-col td .cell {
+  border-right: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-col th:last-child .cell,
+.bk-table.bordered-col td:last-child .cell {
+  border-right: none;
+}
+.bk-table.bordered-none th .cell,
+.bk-table.bordered-none td .cell {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
 }
 .bk-table .bk-table-fixed {
   width: 100%;
 }
 .bk-table colgroup col {
-  background: #fff;
+  background: var(--table-bg-color);
 }
 .bk-table colgroup col.active {
   position: relative;

package/lib/table/utils.d.ts

@@ -1,4 +1,4 @@
-import { TablePropTypes } from './props';
+import { GroupColumn, TablePropTypes } from './props';
 /**
  * 解析Prop值 | 可能为多种类型 & 函数返回的场景
  * @param prop 当前Prop
@@ -20,3 +20,36 @@ export declare const resolveActiveColumns: (props: TablePropTypes) => number[];
  */
 export declare const resolveNumberToNumArray: (prop: number) => number[];
 export declare const resolveWidth: (propWidth: string | number) => string | number;
+/**
+ * 解析可为数字或者字符串设置的样式配置
+ * @param val 配置值
+ * @param defaultValue 默认值
+ * @param offset 偏移量
+ * @returns 标准化px string
+ */
+export declare const resolveNumberOrStringToPix: (val: string | number, defaultValue?: string | number, offset?: any) => string | number;
+/**
+ * 格式化Border配置为标准Class
+ * @param val
+ * @returns
+ */
+export declare const resolvePropBorderToClassStr: (val: string | string[]) => string;
+/**
+ * 根据Props Column配置计算并设置列宽度
+ * @param root 当前根元素
+ * @param colgroups Columns配置
+ * @param autoWidth 自动填充宽度
+ */
+export declare const resolveColumnWidth: (root: HTMLElement, colgroups: GroupColumn[], autoWidth?: number) => void;
+/**
+ * 监听目标元素的Resize事件
+ * @param root 目标元素
+ * @param callbackFn 执行函数
+ * @param delay 延迟执行时间，默认 60
+ * @param immediate 是否立即执行回调函数
+ * @returns "{ start: () => void, stop: () => void }"
+ */
+export declare const observerResize: (root: HTMLElement, callbackFn: () => void, delay?: number, immediate?: boolean) => {
+    start: () => void;
+    stop: () => void;
+};