bkui-vue 0.0.1-beta.12 → 0.0.1-beta.120

package/lib/table/table.d.ts

@@ -1,26 +1,229 @@
-import { Column } from './props';
 declare const _default: import("vue").DefineComponent<{
     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;
     };
-}, () => 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;
+    };
+    maxHeight: 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;
+    };
+    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[];
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    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;
+    };
+    rowKey: 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;
+    rowClick: (..._args: any[]) => boolean;
+    rowDblClick: (..._args: any[]) => boolean;
+    rowExpand: (..._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<import("./props").Column[]> & {
+        default: () => import("./props").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;
+    };
+    maxHeight: 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;
+    };
+    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[];
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    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;
+    };
+    rowKey: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+}>> & {
+    onColumnPick?: (...args: any[]) => any;
+    onColumnSort?: (...args: any[]) => any;
+    onColumnFilter?: (...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;
+}, {
     data: any[];
+    height: string | number;
+    maxHeight: string | number;
+    minHeight: string | number;
+    border: string[];
+    columns: import("./props").Column[];
+    headHeight: number;
+    scrollLoading: boolean | {
+        [key: string]: any;
+    };
+    pagination: boolean | {
+        [key: string]: any;
+    };
     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;
+    rowKey: any;
 }>;
 export default _default;

package/lib/table/table.less

@@ -1,66 +1,288 @@
 @import '../styles/themes/themes.less';
+@import './plugins/head-filter.less';
+@import './plugins/head-sort.less';
+@import './plugins/settings.less';
 
 .@{bk-prefix}-table {
+  position: relative;
+  height: auto;
+  overflow: hidden;
+  border-top: 1px solid @table-border-color;
+
+  &.has-scroll-y {
+    border-bottom: 1px solid @table-border-color;
+
+    .@{bk-prefix}-table-head {
+      padding-right: 4px;
+    }
+
+    &.is-scroll-bottom {
+      border-bottom: 1px solid transparent;
+    }
+  }
+
   .@{bk-prefix}-table-body {
-    height: 500px;
+    position: relative;
     overflow: auto;
-    background: @white-color;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+  }
+
+  .@{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;
+        height: 100%;
+      }
+    }
 
     table {
       width: 100%;
       border-collapse: collapse;
-
-      .cell {
-        height: 40px;
-        padding: 0 15px;
-        overflow: hidden;
-        line-height: 40px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-   
+      table-layout: fixed;
+      align-self: flex-start;
+      
       th,
       td {
         min-width: 80px;
-        border-bottom: 1px solid #dfe0e5;
+        clear: both;
+
+        .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;
+
+          &.expand-cell {
+            padding: 0;
+            text-overflow: unset;
+          }
+
+          .expand-btn-action {
+            display: flex;
+            padding: 0 15px;
+            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;
-          background-color: #fff;
-
-          &.active {
-            background: #f0f1f5;
-            // cursor: ;
+          font-weight: 400;
+          color: @table-head-font-color;
+          background-color: @table-head-bg-color;
+
+          .cell {
+            display: flex;
+            align-items: center;
+          }
+
+          &.active,
+          &:hover {
+            background: @table-row-active-bg-color;
+          }
+
+          &.column_fixed {
+            transform: translateX(var(--scroll-left));
           }
         }
       }
 
       tbody {
         tr {
+          td {
+            &.empty-cell {
+              padding-bottom: 30px;
+            }
+
+            .cell {
+              display: block;
+              width: 100%;
+              align-items: center;
+              box-sizing: border-box;
+            }
+          }
+
           &:hover {
             td {
-              background: #f5f7fa;
+              &:not(.empty-cell) {
+                background: @table-row-hover-bg-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .@{bk-prefix}-table-head {
+    position: relative;
+    transform: translateX(var(--scroll-head-left));
+
+    .table-head-settings {
+      position: absolute;
+      top: 0;
+      right: 1px;
+      bottom: 1px;
+      display: block;
+
+      display: flex;
+      width: calc(var(--row-height));
+      font-size: 18px;
+      cursor: pointer;     
+      
+      background: #f0f1f5;
+      border-right: 1px solid #dcdee5;
+      border-left: 1px solid #dcdee5;
+      border-radius: 0px 2px 0px 0px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .@{bk-prefix}-table-footer {
+    line-height: 40px;
+    border-top: 1px solid @table-border-color;
+    border-bottom: 1px solid @table-border-color;
+    
+    &.is-hidden {
+      display: none;
+    }
+  }
+
+  &.bordered-row {
+    td,
+    th { 
+      .cell {
+        border-bottom: 1px solid @table-border-color;
+      }
+    }
+
+    &.has-footer {
+      border-bottom: none;
+
+      &.has-scroll-y {
+        tr {
+          &:last-child {
+            td {
+              .cell {
+                border-bottom: none;
+              }
             }
           }
         }
       }
     }
   }
+
+  &.bordered-outer {
+    border-right: 1px solid @table-border-color;
+    border-left: 1px solid @table-border-color;
+  }
+
+  &.bordered-col {
+    th,
+    td {
+      border-right: 1px solid @table-border-color;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+  }
+
+  &.bordered-none {
+    th,
+    td {
+      border-top: none;
+      border-right: none;
+      border-left: none;
+
+      .cell {
+        border-bottom: 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;
+        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+      }
+
+      &.column_fixed_right {
+        top: 0;
+        right: 0;
+        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 {
     col {
-      background: #fff;
+      background: @table-bg-color;
 
       &.active {
         position: relative;
-        background: #f0f1f5;
+        background: @table-row-active-bg-color;
       }
     }
   }