bkui-vue 0.0.1-beta.39 → 0.0.1-beta.390

package/lib/table/table.d.ts

@@ -0,0 +1,350 @@
+declare const _default: import("vue").DefineComponent<{
+    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<"disabled" | "single" | "multi"> & {
+        default: "disabled" | "single" | "multi";
+    };
+    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 | ("col" | "none" | "horizontal" | "row" | "outer")[]> & {
+        default: string | (() => ("col" | "none" | "horizontal" | "row" | "outer")[]);
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    paginationHeihgt: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    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 | {
+        fields: import("./props").Field[] | (() => import("./props").Field[]);
+        checked: string[] | (() => string[]);
+        limit: (number | object | (() => number) | ((props: Record<string, unknown>) => number)) & number;
+        size: "small" | "large" | "medium";
+        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
+        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
+    }> & {
+        default: boolean | (() => {
+            fields: import("./props").Field[] | (() => import("./props").Field[]);
+            checked: string[] | (() => string[]);
+            limit: (number | object | (() => number) | ((props: Record<string, unknown>) => number)) & number;
+            size: "small" | "large" | "medium";
+            sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
+            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
+        });
+    };
+    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;
+    };
+    resizerWay: import("vue-types").VueTypeDef<"debounce" | "throttle">;
+}, () => 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;
+    cellClick: (..._args: any[]) => boolean;
+    cellDblclick: (..._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<"disabled" | "single" | "multi"> & {
+        default: "disabled" | "single" | "multi";
+    };
+    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 | ("col" | "none" | "horizontal" | "row" | "outer")[]> & {
+        default: string | (() => ("col" | "none" | "horizontal" | "row" | "outer")[]);
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
+        [key: string]: any;
+    }> & {
+        default: boolean | (() => {
+            [key: string]: any;
+        });
+    };
+    paginationHeihgt: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    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 | {
+        fields: import("./props").Field[] | (() => import("./props").Field[]);
+        checked: string[] | (() => string[]);
+        limit: (number | object | (() => number) | ((props: Record<string, unknown>) => number)) & number;
+        size: "small" | "large" | "medium";
+        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
+        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
+    }> & {
+        default: boolean | (() => {
+            fields: import("./props").Field[] | (() => import("./props").Field[]);
+            checked: string[] | (() => string[]);
+            limit: (number | object | (() => number) | ((props: Record<string, unknown>) => number)) & number;
+            size: "small" | "large" | "medium";
+            sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
+            showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
+        });
+    };
+    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;
+    };
+    resizerWay: import("vue-types").VueTypeDef<"debounce" | "throttle">;
+}>> & {
+    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;
+    onCellClick?: (...args: any[]) => any;
+    onCellDblclick?: (...args: any[]) => any;
+}, {
+    data: any[];
+    height: string | number;
+    maxHeight: string | number;
+    border: string | ("col" | "none" | "horizontal" | "row" | "outer")[];
+    minHeight: string | number;
+    columns: import("./props").Column[];
+    headHeight: number;
+    rowKey: any;
+    pagination: boolean | {
+        [key: string]: any;
+    };
+    scrollLoading: boolean | {
+        [key: string]: any;
+    };
+    showOverflowTooltip: boolean | import("./props").IOverflowTooltip;
+    columnPick: "disabled" | "single" | "multi";
+    rowHeight: any;
+    showHead: boolean;
+    virtualEnabled: boolean;
+    paginationHeihgt: number;
+    remotePagination: boolean;
+    emptyText: string;
+    settings: boolean | {
+        fields: import("./props").Field[] | (() => import("./props").Field[]);
+        checked: string[] | (() => string[]);
+        limit: (number | object | (() => number) | ((props: Record<string, unknown>) => number)) & number;
+        size: "small" | "large" | "medium";
+        sizeList: import("./props").SizeItem[] | (object & (() => import("./props").SizeItem[]));
+        showLineHeight: (boolean | object | (() => boolean) | ((props: Record<string, unknown>) => boolean)) & boolean;
+    };
+    rowClass: any;
+    rowStyle: any;
+    cellStyle: any;
+    cellClass: any;
+    reserveExpand: boolean;
+    selectionKey: string;
+    isSelectedFn: (...args: any[]) => any;
+    asyncData: boolean;
+    rowHover: import("./const").ROW_HOVER;
+    defaultSort: import("./props").ISortOption;
+    isRowSelectEnable: any;
+}>;
+export default _default;

package/lib/table/table.less

@@ -0,0 +1,365 @@
+@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 '../popover/popover.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-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;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #dcdee5;
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+    }
+  }
+
+  .@{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 {
+          padding: 0 15px;
+          overflow: hidden;
+          font-size: 12px;
+          color: @table-body-font-color;
+          text-align: left;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &.selection {
+            text-align: center;
+          }
+
+          &.expand-cell {
+            display: flex;
+            padding: 0;
+            text-overflow: unset;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+
+        .expand-btn-action {
+          display: flex;
+          padding: 0 15px;
+          color: #c4c6cc;
+          cursor: pointer;
+        }
+
+        &.column_fixed {
+          position: sticky;
+          z-index: 1;
+          background: #fff;
+
+          &.column_fixed_left {
+            left: 0;
+          }
+
+          &.column_fixed_right {
+            right: 0;
+          }
+        }
+
+        &.row_expend {
+          .expand-cell-ctx {
+            min-height: 30px;
+          }
+        }
+      }
+
+      thead {
+        th {
+          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: @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 {
+            &.hover-highlight {
+              td {
+                &: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: 0px;
+      z-index: 2;
+      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 {
+    height: var(--footer-height);
+    line-height: var(--footer-height);
+
+    &.is-hidden {
+      display: none;
+    }
+  }
+
+  &.bordered-row {
+    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-outer ,
+  &.bordered-horizontal {
+    .__is-empty {
+      .@{bk-prefix}-table-body-content {
+        border-bottom: 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-bottom: none;
+      border-left: none;
+    }
+  }
+
+  .@{bk-prefix}-table-fixed {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: var(--footer-height);
+    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;
+        z-index: 1;
+
+        &.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 {
+    col {
+      background: @table-bg-color;
+
+      &.active {
+        position: relative;
+        background: @table-row-active-bg-color;
+      }
+    }
+  }
+
+  .@{bk-prefix}-pagination {
+    .is-last {
+      margin-left: auto;
+    }
+  }
+}