bkui-vue 0.0.2-beta.13 → 0.0.2-beta.130

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",
@@ -25,7 +25,7 @@ export declare enum TableAlignEnum {
     CENTER = "center",
     NONE = ""
 }
-export declare const columnType: import("vue-types").VueTypeDef<"none" | "selection" | "index" | "expand">;
+export declare const columnType: import("vue-types").VueTypeDef<"none" | "index" | "selection" | "expand">;
 export declare const TableAlign: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
 export declare enum FullEnum {
     FULL = "full",
@@ -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>;
 /**
  * 配置自定义行高选项
  */
@@ -119,6 +102,7 @@ export type Settings = {
     size?: string;
     sizeList?: SizeItem[];
     showLineHeight?: boolean;
+    trigger: 'manual';
 };
 export type ISettingPropType = Settings | boolean;
 export type Field = {
@@ -128,10 +112,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 +161,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 +207,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 +248,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 +263,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 +349,14 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否支持跨页全选
+     */
+    acrossAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     /**
      * 空数据展示
      */
@@ -327,11 +364,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 +426,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 +460,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 +520,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/table.css

@@ -46,7 +46,7 @@
   user-select: none;
 }
 .bk-checkbox ~ .bk-checkbox {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
@@ -138,7 +138,7 @@
 .bk-button {
   display: inline-flex;
   height: 32px;
-  padding: 5px 12px;
+  padding: var(--component-size-base-padding);
   font-size: 14px;
   color: #63656e;
   text-decoration: none;
@@ -178,6 +178,11 @@
   border-color: #5594fa;
   color: white;
 }
+.bk-button.bk-button-primary.is-outline:active {
+  background-color: #2c77f4;
+  border-color: #2c77f4;
+  color: white;
+}
 .bk-button.bk-button-primary.is-text {
   color: #3a84ff;
   background-color: transparent;
@@ -224,6 +229,11 @@
   border-color: #ffb848;
   color: white;
 }
+.bk-button.bk-button-warning.is-outline:active {
+  background-color: #eb9000;
+  border-color: #eb9000;
+  color: white;
+}
 .bk-button.bk-button-warning.is-text {
   color: #ff9c01;
   background-color: transparent;
@@ -270,6 +280,11 @@
   border-color: #45e35f;
   color: white;
 }
+.bk-button.bk-button-success.is-outline:active {
+  background-color: #1ab943;
+  border-color: #1ab943;
+  color: white;
+}
 .bk-button.bk-button-success.is-text {
   color: #2dcb56;
   background-color: transparent;
@@ -316,6 +331,11 @@
   border-color: #ff5656;
   color: white;
 }
+.bk-button.bk-button-danger.is-outline:active {
+  background-color: #db2626;
+  border-color: #db2626;
+  color: white;
+}
 .bk-button.bk-button-danger.is-text {
   color: #ea3636;
   background-color: transparent;
@@ -340,12 +360,12 @@
 }
 .bk-button.bk-button-small {
   height: 26px;
-  padding: 3px 12px;
+  padding: var(--component-size-small-padding);
   font-size: 12px;
 }
 .bk-button.bk-button-large {
-  height: 38px;
-  padding: 8px 20px;
+  height: 40px;
+  padding: var(--component-size-large-padding);
   font-size: 16px;
 }
 .bk-button .bk-button-text {
@@ -385,18 +405,21 @@
   cursor: not-allowed;
   border-color: #dcdee5;
 }
+.bk-button.is-disabled:not(.is-text) {
+  background-color: #f9fafd;
+}
 .bk-button-group {
   display: inline-block;
   font-size: 0;
 }
 .bk-button-group.bk-button-group-small .bk-button {
   height: 26px;
-  padding: 3px 12px;
+  padding: var(--component-size-small-padding);
   font-size: 12px;
 }
 .bk-button-group.bk-button-group-large .bk-button {
-  height: 38px;
-  padding: 8px 20px;
+  height: 40px;
+  padding: var(--component-size-large-padding);
   font-size: 16px;
 }
 .bk-button-group .bk-button {
@@ -531,6 +554,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,
 .bk-pagination-list-next-batch,
@@ -701,7 +725,7 @@
 .bk-popover.bk-pop2-content {
   position: absolute;
   display: none;
-  padding: 7px 14px;
+  padding: 12px;
   font-size: 12px;
   color: #fff;
   background: #26323d;
@@ -710,6 +734,7 @@
 }
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: #333;
@@ -732,6 +757,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }
@@ -776,37 +804,10 @@
 }
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-footer {
   display: flex;
-  height: 42px;
-  padding: 0 10px;
+  padding: 12px;
   border-top: solid 1px #dcdee5;
-  justify-content: center;
-  align-items: center;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span {
-  display: inline-flex;
-  height: 100%;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 22px;
-  color: #3a84ff;
-  cursor: pointer;
   align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.disabled {
-  color: transparent;
-  cursor: auto;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.btn-filter-split {
-  width: 1px;
-  height: calc(100% - 12px);
-  padding: 6px 0;
-  cursor: default;
-  background: #f0f1f5;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.btn-filter-reset.disable {
-  color: #979ba5;
-  cursor: not-allowed;
-}
 .bk-head-cell-sort {
   display: flex;
   height: 100%;
@@ -985,15 +986,25 @@
   height: auto;
   overflow: hidden;
 }
+.bk-table-flex {
+  display: flex;
+  flex-direction: column;
+  max-height: fit-content;
+}
+.bk-table-flex .bk-table-body {
+  flex: 1;
+  overflow: auto;
+}
 .bk-table.has-scroll-y .bk-table-head {
   padding-right: 4px;
 }
 .bk-table .bk-table-body {
   position: relative;
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
   height: 6px;
 }
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1005,7 +1016,7 @@
   transform: translateX(var(--prepend-left));
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
-  background-color: #FAFBFD;
+  background-color: #fafbfd;
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr td {
   border-bottom: none;
@@ -1025,11 +1036,12 @@
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 5px;
 }
 .bk-table .bk-table-head::-webkit-scrollbar-thumb,
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1046,16 +1058,17 @@
 }
 .bk-table .bk-table-head.__is-empty .bk-table-body-content,
 .bk-table .bk-table-body.__is-empty .bk-table-body-content {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
-  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
+  transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
 }
@@ -1066,7 +1079,6 @@
   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,
@@ -1091,6 +1103,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,
@@ -1180,7 +1199,22 @@
 }
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
+  position: relative;
   font-weight: 400;
+  background-color: var(--background-color);
+}
+.bk-table .bk-table-head table thead th.col-resize-hover::after,
+.bk-table .bk-table-body table thead th.col-resize-hover::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 6px;
+  pointer-events: none;
+  background-color: #3785ff;
+  content: '';
+  transform: translateX(50%);
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1193,12 +1227,17 @@
 .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 {
+  cursor: pointer;
   background: #f0f1f5;
 }
 .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;
@@ -1222,6 +1261,21 @@
 }
 .bk-table .bk-table-head {
   position: relative;
+  z-index: 2;
+  scrollbar-gutter: stable;
+  overflow: hidden;
+}
+.bk-table .bk-table-head .col-resize-drag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 6px;
+  background-color: #3785ff;
+  transform: translateX(-50%);
+}
+.bk-table .bk-table-head thead {
   transform: translateX(var(--scroll-head-left));
 }
 .bk-table .bk-table-head .table-head-settings {
@@ -1244,15 +1298,14 @@
 }
 .bk-table .bk-table-head .table-head-settings > span {
   display: flex;
-  width: 1rem;
-  height: 1rem;
-}
-.bk-table .bk-table-head .bk-table-fixed .column_fixed.column_fixed_right.shadow {
-  box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.12);
+  width: 1em;
+  height: 1em;
 }
 .bk-table .bk-table-footer {
+  display: flex;
+  width: 100%;
   height: var(--footer-height);
-  line-height: var(--footer-height);
+  align-items: center;
 }
 .bk-table .bk-table-footer.is-hidden {
   display: none;
@@ -1301,13 +1354,13 @@
   position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
+  bottom: var(--footer-height);
   left: 0;
   pointer-events: none;
 }
 .bk-table .bk-table-fixed .column_fixed {
   position: absolute;
-  transform: translate(var(--var-scroll-left), var(--var-scroll-top));
+  z-index: 2;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
@@ -1319,7 +1372,6 @@
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right {
   top: 0;
   right: 0;
-  z-index: 1;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
@@ -1343,5 +1395,5 @@
   margin-left: auto;
 }
 .bk-table .stripe-row {
-  background: #FAFBFD;
+  background: #fafbfd;
 }