bkui-vue 0.0.1-beta.23 → 0.0.1-beta.230

package/lib/table/table.d.ts

@@ -1,10 +1,10 @@
-import { Column } from './props';
 declare const _default: import("vue").DefineComponent<{
-    onRowClick: FunctionConstructor;
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
     };
-    columns: import("vue-types").VueTypeDef<Column[]>;
+    columns: import("vue-types").VueTypeDef<import("./props").Column[]> & {
+        default: () => import("./props").Column[];
+    };
     activeColumn: import("vue-types").VueTypeDef<number | number[]>;
     columnPick: import("vue-types").VueTypeDef<string> & {
         default: string;
@@ -15,6 +15,9 @@ declare const _default: import("vue").DefineComponent<{
     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;
     };
@@ -28,13 +31,14 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    border: import("vue-types").VueTypeDef<string[]> & {
-        default: () => string[];
+    border: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
     };
     pagination: import("vue-types").VueTypeDef<boolean | {
         [key: string]: any;
@@ -48,12 +52,90 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-}, () => 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<{
-    onRowClick: FunctionConstructor;
+    emptyText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    settings: import("vue-types").VueTypeDef<boolean | import("./props").Settings> & {
+        default: boolean | (() => import("./props").Settings);
+    };
+    rowClass: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    rowStyle: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    cellStyle: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    cellClass: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    scrollLoading: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    reserveExpand: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectionKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    isSelectedFn: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    rowKey: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | import("./props").IOverflowTooltip> & {
+        default: boolean | (() => import("./props").IOverflowTooltip);
+    };
+    asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    rowHover: import("vue-types").VueTypeDef<import("./const").ROW_HOVER> & {
+        default: import("./const").ROW_HOVER;
+    };
+    defaultSort: import("vue-types").VueTypeShape<import("./props").ISortOption> & {
+        default: () => Partial<import("./props").ISortOption>;
+    };
+    isRowSelectEnable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+}, () => 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;
+}, 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[]>;
+    columns: import("vue-types").VueTypeDef<import("./props").Column[]> & {
+        default: () => import("./props").Column[];
+    };
     activeColumn: import("vue-types").VueTypeDef<number | number[]>;
     columnPick: import("vue-types").VueTypeDef<string> & {
         default: string;
@@ -64,6 +146,9 @@ declare const _default: import("vue").DefineComponent<{
     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;
     };
@@ -77,13 +162,14 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    border: import("vue-types").VueTypeDef<string[]> & {
-        default: () => string[];
+    border: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
     };
     pagination: import("vue-types").VueTypeDef<boolean | {
         [key: string]: any;
@@ -97,19 +183,116 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-}>>, {
-    height: string | number;
+    emptyText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    settings: import("vue-types").VueTypeDef<boolean | import("./props").Settings> & {
+        default: boolean | (() => import("./props").Settings);
+    };
+    rowClass: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    rowStyle: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    cellStyle: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    cellClass: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    scrollLoading: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    reserveExpand: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectionKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    isSelectedFn: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    rowKey: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    showOverflowTooltip: import("vue-types").VueTypeDef<boolean | import("./props").IOverflowTooltip> & {
+        default: boolean | (() => import("./props").IOverflowTooltip);
+    };
+    asyncData: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    rowHover: import("vue-types").VueTypeDef<import("./const").ROW_HOVER> & {
+        default: import("./const").ROW_HOVER;
+    };
+    defaultSort: import("vue-types").VueTypeShape<import("./props").ISortOption> & {
+        default: () => Partial<import("./props").ISortOption>;
+    };
+    isRowSelectEnable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+}>> & {
+    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;
+    onPageLimitChange?: (...args: any[]) => any;
+    onPageValueChange?: (...args: any[]) => any;
+    onSettingChange?: (...args: any[]) => any;
+    onScrollBottom?: (...args: any[]) => any;
+    onSelectAll?: (...args: any[]) => any;
+    onSelectionChange?: (...args: any[]) => any;
+}, {
     data: any[];
+    height: string | number;
+    maxHeight: string | number;
     minHeight: string | number;
-    border: string[];
+    border: string | string[];
+    columns: import("./props").Column[];
     headHeight: number;
     pagination: boolean | {
         [key: string]: any;
     };
+    scrollLoading: boolean | {
+        [key: string]: any;
+    };
+    showOverflowTooltip: boolean | import("./props").IOverflowTooltip;
     columnPick: string;
     rowHeight: any;
     showHead: boolean;
     virtualEnabled: boolean;
     remotePagination: boolean;
+    emptyText: string;
+    settings: boolean | import("./props").Settings;
+    rowClass: any;
+    rowStyle: any;
+    cellStyle: any;
+    cellClass: any;
+    reserveExpand: boolean;
+    selectionKey: string;
+    isSelectedFn: (...args: any[]) => any;
+    rowKey: any;
+    asyncData: boolean;
+    rowHover: import("./const").ROW_HOVER;
+    defaultSort: import("./props").ISortOption;
+    isRowSelectEnable: any;
 }>;
 export default _default;

package/lib/table/table.less

@@ -1,58 +1,179 @@
 @import '../styles/themes/themes.less';
+@import '../styles/mixins/scroll.less';
+@import '../virtual-render/virtual-render.less';
+@import '../checkbox/checkbox.less';
+@import '../button/button.less';
+@import '../exception/exception.less';
+@import '../pagination/pagination.less';
+@import '../popover2/popover2.less';
+@import './plugins/head-filter.less';
+@import './plugins/head-sort.less';
+@import './plugins/settings.less';
 
 .@{bk-prefix}-table {
+  position: relative;
+  height: auto;
   overflow: hidden;
-  height: 100%;
-  border-top: 1px solid @table-border-color;
-  border-bottom: 1px solid @table-border-color;
+  // border-bottom: 1px solid @table-border-color;
+
+  &.has-scroll-y {
+    .@{bk-prefix}-table-head {
+      padding-right: 4px;
+    }
+  }
+
   .@{bk-prefix}-table-body {
+    position: relative;
     overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+  }
+
+  .@{bk-prefix}-fixed-bottom-border {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-top: 1px solid @table-border-color;
+    transform: translateX(var(--scroll-head-left));
+
+    &._is-empty {
+      display: none;
+    }
   }
 
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
 
+    &.__is-empty {
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+
+      .@{bk-prefix}-table-body-content {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        padding-bottom: 20px;
+      }
+    }
+
     table {
       width: 100%;
       border-collapse: collapse;
+      table-layout: fixed;
+      align-self: flex-start;
 
       th,
       td {
+        height: var(--row-height);
         min-width: 80px;
+        clear: both;
+
+        &.expand-row {
+          .expand-btn-action {
+            color: #575961;
+          }
+        }
 
         .cell {
-          height: var(--row-height);
           padding: 0 15px;
           overflow: hidden;
-          line-height: var(--row-height);
+          font-size: 12px;
           color: @table-body-font-color;
           text-align: left;
           text-overflow: ellipsis;
           white-space: nowrap;
+
+          &.expand-cell {
+            padding: 0;
+            text-overflow: unset;
+          }
+        }
+
+        .expand-btn-action {
+          display: flex;
+          padding: 0 15px;
+          color: #c4c6cc;
+          cursor: pointer;
+        }
+
+        &.column_fixed {
+          position: sticky;
+          background: #fff;
+
+          &.column_fixed_left {
+            left: 0;
+          }
+
+          &.column_fixed_right {
+            right: 0;
+          }
+        }
+
+        &.row_expend {
+          .expand-cell-ctx {
+            min-height: 30px;
+          }
         }
       }
 
       thead {
         th {
-          position: sticky; 
-          top: 0; 
-          z-index: 1;
+          font-weight: 400;
           color: @table-head-font-color;
           background-color: @table-head-bg-color;
 
+          .cell {
+            display: flex;
+            align-items: center;
+            height: calc(var(--row-height) - 1px);
+          }
+
           &.active,
           &:hover {
-            background: #f0f1f5;
+            background: @table-row-active-bg-color;
+          }
+
+          &.column_fixed {
+            transform: translateX(var(--scroll-left));
           }
         }
       }
 
       tbody {
         tr {
+          td {
+            &.empty-cell {
+              padding-bottom: 30px;
+            }
+
+            &.is-last {
+              border-bottom: none;
+            }
+
+            .cell {
+              display: block;
+              width: 100%;
+              height: 100%;
+              line-height: calc(var(--row-height) - 1px);
+              box-sizing: border-box;
+              align-items: center;
+            }
+          }
+
           &:hover {
-            td {
-              background: @table-row-hover-bg-color;
+            &.hover-highlight {
+              td {
+                &:not(.empty-cell) {
+                  background: @table-row-hover-bg-color;
+                }
+              }
             }
           }
         }
@@ -60,32 +181,85 @@
     }
   }
 
+  .@{bk-prefix}-table-head {
+    position: relative;
+    transform: translateX(var(--scroll-head-left));
+
+    .table-head-settings {
+      position: absolute;
+      top: 0;
+      right: 1px;
+      bottom: 0px;
+      z-index: 1;
+      display: block;
+      display: flex;
+      width: calc(var(--row-height));
+      font-size: 14px;
+      cursor: pointer;
+
+      background: @table-head-bg-color;
+      border-right: 1px solid @table-border-color;
+      border-bottom: 1px solid @table-border-color;
+      border-left: 1px solid @table-border-color;
+      border-radius: 0px 2px 0px 0px;
+      transform: translateX(var(--scroll-left));
+      justify-content: center;
+      align-items: center;
+
+      > span {
+        display: flex;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
   .@{bk-prefix}-table-footer {
     line-height: 40px;
+
+    &.is-hidden {
+      display: none;
+    }
   }
 
   &.bordered-row {
-    .cell { 
+    td,
+    th {
       border-bottom: 1px solid @table-border-color;
     }
+
+    tr {
+      &:last-child {
+        td {
+          border-bottom: none;
+        }
+      }
+    }
   }
 
   &.bordered-outer {
+    border-top: 1px solid @table-border-color;
     border-right: 1px solid @table-border-color;
     border-left: 1px solid @table-border-color;
+    .@{bk-prefix}-table-footer {
+      border-bottom: 1px solid @table-border-color;
+    }
+  }
+
+  &.bordered-horizontal {
+    border-top: 1px solid @table-border-color;
+    .@{bk-prefix}-table-footer {
+      border-bottom: 1px solid @table-border-color;
+    }
   }
 
   &.bordered-col {
     th,
     td {
-      .cell { 
-        border-right: 1px solid @table-border-color;
-      }
+      border-right: 1px solid @table-border-color;
 
       &:last-child {
-        .cell {
-          border-right: none;
-        }
+        border-right: none;
       }
     }
 
@@ -94,17 +268,55 @@
   &.bordered-none {
     th,
     td {
-      .cell {
-        border-top: none;
-        border-right: none;
-        border-bottom: none;
-        border-left: none;
-      }
+      border-top: none;
+      border-right: none;
+      border-bottom: none;
+      border-left: none;
     }
   }
 
   .@{bk-prefix}-table-fixed {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     width: 100%;
+    pointer-events: none;
+
+    .column_fixed {
+      position: absolute;
+
+      &.column_fixed_left {
+        top: 0;
+        left: 0;
+
+        &.shadow {
+          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        }
+      }
+
+      &.column_fixed_right {
+        top: 0;
+        right: 0;
+
+        &.shadow {
+          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        }
+      }
+    }
+
+    .scroll-loading {
+      &._bottom {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        display: flex;
+        justify-content: center;
+      }
+    }
   }
 
   colgroup {
@@ -113,7 +325,7 @@
 
       &.active {
         position: relative;
-        background: #f0f1f5;
+        background: @table-row-active-bg-color;
       }
     }
   }