bkui-vue 0.0.2-beta.7 → 0.0.2-beta.70

package/lib/table/table.less

@@ -14,7 +14,16 @@
   position: relative;
   height: auto;
   overflow: hidden;
-  // border-bottom: 1px solid @table-border-color;
+
+  &-flex {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    .@{bk-prefix}-table-body {
+      flex: 1;
+      overflow: auto;
+    }
+  }
 
   &.has-scroll-y {
     .@{bk-prefix}-table-head {
@@ -27,7 +36,7 @@
     overflow: auto;
 
     &::-webkit-scrollbar {
-      width: 6px;
+      width: 5px;
       height: 6px;
     }
 
@@ -42,6 +51,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;
@@ -61,8 +90,8 @@
     background: @table-bg-color;
 
     &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
+      width: 5px;
+      height: 5px;
     }
 
     &::-webkit-scrollbar-thumb {
@@ -82,6 +111,7 @@
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
+        position: relative;
       }
 
     }
@@ -116,6 +146,11 @@
             cursor: pointer;
           }
 
+          &.explain {
+            text-decoration-style: dashed;
+            text-decoration-line: underline;
+          }
+
           .head-text {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -147,7 +182,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-          background: #fff;
 
           &.column_fixed_left {
             left: 0;
@@ -194,7 +228,23 @@
 
         th {
           font-weight: 400;
-
+          background-color: var(--background-color);
+          position: relative;
+
+          &.col-resize-hover {
+            &::after {
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              width: 6px;
+              transform: translateX(50%);
+              background-color: #3785FF;
+              z-index: 1;
+              pointer-events: none;
+            }
+          }
           .cell {
             display: flex;
             align-items: center;
@@ -205,6 +255,7 @@
           &.active,
           &:hover {
             background: @table-row-active-bg-color;
+            cursor: pointer;
           }
 
           &.column_fixed {
@@ -216,6 +267,8 @@
       tbody {
         tr {
           td {
+            background-color: #fff;
+
             &.empty-cell {
               padding-bottom: 30px;
             }
@@ -252,6 +305,17 @@
     position: relative;
     transform: translateX(var(--scroll-head-left));
 
+    .col-resize-drag {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 6px;
+      transform: translateX(-50%);
+      background-color: #3785FF;
+      z-index: 1;
+    }
+
     .table-head-settings {
       position: absolute;
       top: 0;
@@ -282,7 +346,9 @@
 
   .@{bk-prefix}-table-footer {
     height: var(--footer-height);
-    line-height: var(--footer-height);
+    width: 100%;
+    display: flex;
+    align-items: center;
 
     &.is-hidden {
       display: none;
@@ -359,8 +425,9 @@
     top: 0;
     right: 0;
     bottom: var(--footer-height);
+    max-height: var(--fix-max-height);
     left: 0;
-    // width: 100%;
+    height: var(--fix-height);
     pointer-events: none;
 
     .column_fixed {
@@ -415,4 +482,8 @@
       margin-left: auto;
     }
   }
+
+  .stripe-row {
+    background: #FAFBFD;
+  }
 }

package/lib/table/table.variable.css

@@ -300,6 +300,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;
@@ -346,6 +351,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;
@@ -392,6 +402,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;
@@ -438,6 +453,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;
@@ -832,6 +852,7 @@
 }
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: #333;
@@ -854,6 +875,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }
@@ -1107,6 +1131,15 @@
   height: auto;
   overflow: hidden;
 }
+.bk-table-flex {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+.bk-table-flex .bk-table-body {
+  flex: 1;
+  overflow: auto;
+}
 .bk-table.has-scroll-y .bk-table-head {
   padding-right: 4px;
 }
@@ -1115,7 +1148,7 @@
   overflow: auto;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
   height: 6px;
 }
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1126,6 +1159,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;
@@ -1144,8 +1183,8 @@
 }
 .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 {
@@ -1166,6 +1205,7 @@
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
+  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -1205,6 +1245,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,
@@ -1245,7 +1292,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,
@@ -1296,6 +1342,21 @@
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   font-weight: 400;
+  background-color: var(--background-color);
+  position: relative;
+}
+.bk-table .bk-table-head table thead th.col-resize-hover::after,
+.bk-table .bk-table-body table thead th.col-resize-hover::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  transform: translateX(50%);
+  background-color: #3785FF;
+  z-index: 1;
+  pointer-events: none;
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1309,11 +1370,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;
@@ -1339,6 +1405,16 @@
   position: relative;
   transform: translateX(var(--scroll-head-left));
 }
+.bk-table .bk-table-head .col-resize-drag {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  transform: translateX(-50%);
+  background-color: #3785FF;
+  z-index: 1;
+}
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
   top: 0;
@@ -1364,7 +1440,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;
@@ -1414,7 +1492,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 {
@@ -1453,3 +1533,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>;
+        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>;
+        filter: import("vue-types").VueTypeDef<import("./props").IFilterPropShape>;
+        colspan: import("vue-types").VueTypeDef<import("./props").SpanFunctionString> & {
+            default: (({ column, colIndex, row, rowIndex }: {
+                column: any;
+                colIndex: any;
+                row: any;
+                rowIndex: any;
+            }) => number) | (() => Number);
+        };
+        rowspan: import("vue-types").VueTypeDef<import("./props").SpanFunctionString> & {
+            default: (({ column, colIndex, row, rowIndex }: {
+                column: any;
+                colIndex: any;
+                row: any;
+                rowIndex: any;
+            }) => number) | (() => Number);
+        };
+        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;
+        };
+    }>>[];
+    getActiveColumn: () => any;
 };
 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: {
@@ -21,16 +22,18 @@ export declare const useClass: (props: TablePropTypes, targetColumns: Column[],
         height: string;
     }>;
     contentStyle: {
-        display: string;
-        'min-height': string;
-        height: string;
-        maxHeight: string;
+        display: string | boolean;
+        minHeight: string | number;
+        height: string | number;
+        maxHeight: string | number;
     };
     headStyle: import("vue").ComputedRef<{
         '--row-height': string;
         '--scroll-head-left': string;
         '--scroll-left': string;
     }>;
+    fixHeight: import("vue").Ref<number>;
+    maxFixHeight: import("vue").Ref<number>;
     resetTableHeight: (rootEl: HTMLElement) => void;
     updateBorderClass: (root: HTMLElement) => void;
     getColumnsWidthOffsetWidth: () => number;
@@ -43,7 +46,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";
@@ -51,7 +54,7 @@ export declare const useInit: (props: TablePropTypes, targetColumns: Column[]) =
         readonly bottom: 0;
         readonly left: 0;
         readonly width: "1px";
-        readonly 'background-color': "#ebeef5";
+        readonly 'background-color': "#3785FF";
     }>;
     dragOffsetX: import("vue").Ref<number>;
     reactiveSchema: {
@@ -63,20 +66,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 +98,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) => {
@@ -104,6 +110,7 @@ export declare const useInit: (props: TablePropTypes, targetColumns: Column[]) =
     initIndexData: (keepLocalAction?: boolean) => void;
     updateIndexData: (selectedAll?: boolean) => void;
     setRowExpand: (row: any, expand?: any) => void;
+    setAllRowExpand: (expand?: any) => void;
     updateColGroups: (settings?: Settings) => void;
     clearSelection: () => void;
     toggleAllSelection: (checked?: any) => void;

package/lib/table/utils.d.ts

@@ -79,19 +79,15 @@ export declare const isPercentPixOrNumber: (val: string | number) => boolean;
 export declare const resolveHeadConfig: (props: TablePropTypes) => {
     isShow: boolean;
     height: number;
-} & {
-    height?: Number;
-    isShow?: boolean;
-    cellFn?: Function;
-};
+} & import("./props").Thead;
 /**
-   * 获取当前行指定列的内容
-   * @param row 当前行
-   * @param key 指定列名
-   * @param column 列配置
-   * @param index 当前行Index
-   * @returns
-   */
+ * 获取当前行指定列的内容
+ * @param row 当前行
+ * @param key 指定列名
+ * @param column 列配置
+ * @param index 当前行Index
+ * @returns
+ */
 export declare const getRowText: (row: any, key: string, column: Column) => any;
 /**
  * 格式化prop配置为标准数组格式