bkui-vue 0.0.1-beta.435 → 0.0.1-beta.437

package/dist/index.esm.js

@@ -17352,6 +17352,9 @@ const overflowModeType = j("showOverflowTooltipMode", {
 const columnType = j("columnType", {
   default: "none"
 });
+const TableAlign = j("columnType", {
+  default: ""
+});
 const fullType = j("full", {
   default: "full"
 });
@@ -17412,7 +17415,9 @@ const IColumnType = {
     PropTypes.string
   ]).def(false),
   colspan: PropTypes.oneOfType([PropTypes.func.def(() => 1), PropTypes.number.def(1)]),
-  rowspan: PropTypes.oneOfType([PropTypes.func.def(() => 1), PropTypes.number.def(1)])
+  rowspan: PropTypes.oneOfType([PropTypes.func.def(() => 1), PropTypes.number.def(1)]),
+  align: TableAlign,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
 };
 const tableProps = {
   data: PropTypes.arrayOf(PropTypes.any).def([]),
@@ -17436,7 +17441,7 @@ const tableProps = {
     PropTypes.string
   ]).def([BORDER_OPTION.ROW]),
   pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
-  paginationHeihgt: PropTypes.number.def(LINE_HEIGHT),
+  paginationHeight: PropTypes.number.def(60),
   remotePagination: PropTypes.bool.def(false),
   emptyText: PropTypes.string,
   settings: PropTypes.oneOfType([
@@ -17485,7 +17490,9 @@ const tableProps = {
   resizerWay: j("ResizerWay", {
     default: "debounce"
   }),
-  observerResize: PropTypes.bool.def(true)
+  observerResize: PropTypes.bool.def(true),
+  align: TableAlign,
+  headerAlign: TableAlign
 };
 var Column = defineComponent({
   name: "TableColumn",
@@ -19069,6 +19076,14 @@ var TableRow = defineComponent({
     return createVNode(Fragment, null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]);
   }
 });
+class TablePlugins {
+  constructor(props2, ctx) {
+    __publicField(this, "props", null);
+    __publicField(this, "ctx", null);
+    this.props = props2;
+    this.ctx = ctx;
+  }
+}
 var BodyEmpty = defineComponent({
   name: "BodyEmpty",
   props: {
@@ -19285,7 +19300,8 @@ var HeadSort = defineComponent({
   name: "HeadSort",
   props: {
     column: PropTypes.any.def({}),
-    defaultSort: PropTypes.oneOf(SORT_OPTIONS).def(SORT_OPTION.NULL)
+    defaultSort: PropTypes.oneOf(SORT_OPTIONS).def(SORT_OPTION.NULL),
+    active: PropTypes.bool
   },
   emits: ["change"],
   setup(props2, {
@@ -19298,6 +19314,7 @@ var HeadSort = defineComponent({
       sortType.value = val;
     });
     const handleSortClick = (e, type) => {
+      var _a2;
       e.stopImmediatePropagation();
       e.stopPropagation();
       e.preventDefault();
@@ -19308,36 +19325,28 @@ var HeadSort = defineComponent({
       if (sortType.value === type) {
         currentSort = SORT_OPTION.NULL;
       }
+      const execFn = getSortFn(props2.column, currentSort);
       const sort = resolveSort(props2.column.sort);
       if ((sort == null ? void 0 : sort.value) === "custom") {
-        emit("change", sort == null ? void 0 : sort.sortFn, currentSort);
+        emit("change", (_a2 = sort == null ? void 0 : sort.sortFn) != null ? _a2 : execFn, currentSort);
         return;
       }
-      const execFn = getSortFn(props2.column, currentSort);
       emit("change", execFn, currentSort);
     };
     return () => createVNode("span", {
       "class": resolveClassName("head-cell-sort"),
       "onClick": (e) => handleSortClick(e, SORT_OPTION.NULL)
     }, [createVNode(angleDownFill, {
-      "class": ["sort-action", "sort-asc", sortType.value === SORT_OPTION.ASC ? "active" : ""],
+      "class": ["sort-action", "sort-asc", props2.active && sortType.value === SORT_OPTION.ASC ? "active" : ""],
       "style": "align-items: flex-end;",
       "onClick": (e) => handleSortClick(e, SORT_OPTION.ASC)
     }, null), createVNode(angleUpFill, {
-      "class": ["sort-action", "sort-desc", sortType.value === SORT_OPTION.DESC ? "active" : ""],
+      "class": ["sort-action", "sort-desc", props2.active && sortType.value === SORT_OPTION.DESC ? "active" : ""],
       "style": "align-items: flex-start;",
       "onClick": (e) => handleSortClick(e, SORT_OPTION.DESC)
     }, null)]);
   }
 });
-class TablePlugins {
-  constructor(props2, ctx) {
-    __publicField(this, "props", null);
-    __publicField(this, "ctx", null);
-    this.props = props2;
-    this.ctx = ctx;
-  }
-}
 function _isSlot$3(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
@@ -19674,6 +19683,7 @@ class TableRender {
     this.events = /* @__PURE__ */ new Map();
     this.styleRef = styleRef;
     this.t = t2;
+    this.activeSortIndex = ref(-1);
   }
   get propActiveCols() {
     return this.reactiveProp.activeColumns;
@@ -19799,6 +19809,7 @@ class TableRender {
         [columnName]: nextSort
       });
       const sortFn = getSortFn(column, nextSort);
+      this.activeSortIndex.value = index2;
       this.emitEvent(EVENTS$1.ON_SORT_BY_CLICK, [{
         sortFn,
         column,
@@ -19813,6 +19824,7 @@ class TableRender {
       Object.assign(this.reactiveProp.defaultSort, {
         [columnName]: type
       });
+      this.activeSortIndex.value = index2;
       this.emitEvent(EVENTS$1.ON_SORT_BY_CLICK, [{
         sortFn,
         column,
@@ -19824,6 +19836,7 @@ class TableRender {
     return createVNode(HeadSort, {
       "column": column,
       "defaultSort": nextSort,
+      "active": this.activeSortIndex.value === index2,
       "onChange": handleSortClick
     }, null);
   }
@@ -19919,17 +19932,29 @@ class TableRender {
         }, null);
       }
     };
-    return createVNode("thead", {
+    return createVNode(Fragment, null, [createVNode("thead", {
       "style": rowStyle
     }, [createVNode(TableRow, null, {
-      default: () => [createVNode("tr", null, [this.filterColgroups.map((column, index2) => createVNode("th", mergeProps({
+      default: () => [createVNode("tr", null, [this.filterColGroups.map((column, index2) => createVNode("th", mergeProps({
         "colspan": 1,
         "rowspan": 1,
-        "class": this.getHeadColumnClass(column, index2),
+        "class": [this.getHeadColumnClass(column, index2), this.getColumnCustomClass(column), column.align || this.props.headerAlign || this.props.align],
         "style": resolveFixedColumnStyle(column, this.styleRef.value.hasScrollY),
         "onClick": () => this.handleColumnHeadClick(index2, column)
       }, resolveEventListener(column)), [renderHeadCell(column, index2)])), getScrollFix()])]
-    })]);
+    })])]);
+  }
+  getColumnCustomClass(column, row) {
+    const rowClass = column.className;
+    if (rowClass) {
+      if (typeof rowClass === "function") {
+        return rowClass(row);
+      }
+      if (typeof rowClass === "string") {
+        return rowClass;
+      }
+    }
+    return "";
   }
   renderTBody(rows) {
     const {
@@ -19952,7 +19977,7 @@ class TableRender {
           "onDblclick": (e) => this.handleRowDblClick(e, row, rowIndex, rows),
           "onMouseenter": (e) => this.handleRowEnter(e, row, rowIndex, rows),
           "onMouseleave": (e) => this.handleRowLeave(e, row, rowIndex, rows)
-        }, [this.filterColgroups.map((column, index2) => {
+        }, [this.filterColGroups.map((column, index2) => {
           var _a, _b;
           const cellStyle = [resolveFixedColumnStyle(column), ...formatPropAsArray(this.props.cellStyle, [column, index2, row, rowIndex, this])];
           const tdCtxClass = {
@@ -19971,7 +19996,7 @@ class TableRender {
           } = (_b = (_a = row[skipRowKey]) == null ? void 0 : _a[columnIdKey]) != null ? _b : {};
           if (!skipRow && !skipCol) {
             let _slot;
-            const cellClass = [this.getColumnClass(column, index2), ...formatPropAsArray(this.props.cellClass, [column, index2, row, rowIndex, this]), {
+            const cellClass = [this.getColumnClass(column, index2), this.getColumnCustomClass(column, row), column.align || this.props.align, ...formatPropAsArray(this.props.cellClass, [column, index2, row, rowIndex, this]), {
               "expand-row": row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND],
               "is-last": rowIndex + rowspan >= rowLength
             }];
@@ -20027,7 +20052,7 @@ class TableRender {
           return [createVNode("tr", {
             "class": resovledClass
           }, [createVNode("td", {
-            "colspan": this.filterColgroups.length,
+            "colspan": this.filterColGroups.length,
             "rowspan": 1
           }, [(_c = (_b = (_a = this.context.slots).expandRow) == null ? void 0 : _b.call(_a, getRowSourceData(row))) != null ? _c : createVNode("div", {
             "class": "expand-cell-ctx"
@@ -20137,7 +20162,7 @@ class TableRender {
     return this.props.columnPick !== "disabled" && this.propActiveCols.some((col) => col.index === colIndex && col.active);
   }
   renderColGroup() {
-    return createVNode("colgroup", null, [(this.filterColgroups || []).map((column, index2) => {
+    return createVNode("colgroup", null, [(this.filterColGroups || []).map((column, index2) => {
       const colCls = classes({
         active: this.isColActive(index2)
       });
@@ -20148,7 +20173,7 @@ class TableRender {
       }, null);
     })]);
   }
-  get filterColgroups() {
+  get filterColGroups() {
     return this.colgroups.filter((col) => !col.isHidden);
   }
   get setting() {
@@ -20413,6 +20438,15 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
     [resolveClassName("table-footer")]: true,
     ["is-hidden"]: !props2.pagination || !props2.data.length
   }));
+  const getTableHeight = () => {
+    if (props2.height === "number") {
+      return `${props2.height}px`;
+    }
+    if (typeof props2.height === "string") {
+      return props2.height;
+    }
+    return "";
+  };
   const resolveWidth2 = () => {
     if (resolvedColumns.value.every((col) => /^\d+\.?\d*(px)?$/ig.test(`${col.width}`))) {
       const rectWidth = resolvedColumns.value.reduce((width, col) => width + Number(`${col.width}`.replace(/px/ig, "")), 0);
@@ -20421,11 +20455,12 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
     }
     return "100%";
   };
-  const wrapperStyle = computed(() => __spreadValues({
+  const wrapperStyle = computed(() => ({
     minHeight: resolveNumberOrStringToPix(props2.minHeight, "auto"),
     width: resolveWidth2(),
-    maxWidth: "100%"
-  }, typeof props2.height === "number" ? { height: `${props2.height}px` } : null));
+    maxWidth: "100%",
+    height: getTableHeight()
+  }));
   const resolvePropHeight = (height, defaultValue) => {
     const strHeight = String(height);
     if (/^\d+\.?\d*$/.test(strHeight)) {
@@ -20451,7 +20486,7 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
     const resolveHeight = resolvePropHeight(props2.height, autoHeight.value);
     const resolveHeadHeight = getHeadHeight();
     const resolveMinHeight = resolvePropHeight(props2.minHeight, autoHeight.value);
-    const resolveFooterHeight = props2.pagination && props2.data.length ? props2.paginationHeihgt : 0;
+    const resolveFooterHeight = props2.pagination && props2.data.length ? props2.paginationHeight : 0;
     const contentHeight = resolveHeight - resolveHeadHeight - resolveFooterHeight;
     const height = props2.height !== "auto" ? `${contentHeight}px` : false;
     const minHeight = resolveMinHeight - resolveHeadHeight - resolveFooterHeight;
@@ -20480,7 +20515,7 @@ const useClass = (props2, targetColumns, root, reactiveProp, pageData) => {
       return;
     }
     const querySelector = props2.virtualEnabled ? `.${resolveClassName("virtual-section")}` : `.${resolveClassName("table-body-content")}`;
-    const rootBody = root2.querySelector(".bk-table-body");
+    const rootBody = root2.querySelector(`.${resolveClassName("table-body")}`);
     hasScrollY.value = hasRootScrollY(rootBody, querySelector, 0);
   };
   const getColumnsWidthOffsetWidth = () => {
@@ -21155,7 +21190,7 @@ var Component$f = defineComponent({
       display: "none"
     };
     const footerStyle = computed(() => ({
-      "--footer-height": hasFooter.value ? `${props2.paginationHeihgt}px` : "0"
+      "--footer-height": hasFooter.value ? `${props2.paginationHeight}px` : "0"
     }));
     const fixedContainerStyle = computed(() => __spreadValues({
       right: hasScrollYRef.value ? `${SCROLLY_WIDTH}px` : 0
@@ -22353,6 +22388,17 @@ const tabNavEventProps = {
     default: () => ({})
   }
 };
+const tabPanelProps = {
+  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
+  label: PropTypes.string || PropTypes.func,
+  tips: PropTypes.string,
+  closable: PropTypes.bool,
+  visible: PropTypes.bool.def(true),
+  disabled: PropTypes.bool,
+  sortable: PropTypes.bool,
+  renderDirective: renderDirectiveType(),
+  panel: PropTypes.string || PropTypes.func
+};
 const tabProps = {
   active: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
   type: j("type", {}).def("border-card"),
@@ -22391,18 +22437,11 @@ const tabNavProps = __spreadValues({
   changeOnHover: PropTypes.bool.def(false),
   changeOnHoverDelay: PropTypes.number.def(1e3)
 }, tabNavEventProps);
-const tabPanelProps = {
-  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
-  label: PropTypes.string || PropTypes.func,
-  closable: PropTypes.bool,
-  visible: PropTypes.bool.def(true),
-  disabled: PropTypes.bool,
-  sortable: PropTypes.bool,
-  renderDirective: renderDirectiveType(),
-  panel: PropTypes.string || PropTypes.func
-};
 var TabNav = defineComponent({
   name: "TabNav",
+  directives: {
+    bkTooltips: tooltips
+  },
   props: tabNavProps,
   setup(props2) {
     const activeRef = ref(null);
@@ -22465,7 +22504,8 @@ var TabNav = defineComponent({
           closable,
           visible,
           disabled,
-          sortable
+          sortable,
+          tips
         } = item.props;
         if (!visible) {
           return false;
@@ -22494,6 +22534,7 @@ var TabNav = defineComponent({
           visible,
           disabled,
           sortable,
+          tips,
           tabLabel: renderLabel(label)
         });
         return true;
@@ -22585,7 +22626,7 @@ var TabNav = defineComponent({
         return classNames.join(" ");
       };
       const getValue = (curentValue, parentValue) => !disabled && (curentValue || parentValue);
-      return createVNode("div", {
+      return withDirectives(createVNode("div", {
         "key": name,
         "onClick": () => !disabled && this.handleTabChange(name),
         "draggable": getValue(item.sortable, sortable),
@@ -22613,7 +22654,10 @@ var TabNav = defineComponent({
       }, [createVNode("div", null, [tabLabel]), getValue(item.closable, closable) ? createVNode("span", {
         "class": resolveClassName("tab-header--close"),
         "onClick": () => this.handleTabRemove(index2, item)
-      }, [createVNode(close$1, null, null)]) : ""]);
+      }, [createVNode(close$1, null, null)]) : ""]), [[resolveDirective("bk-tooltips"), {
+        content: item.tips,
+        disabled: !item.tips
+      }]]);
     });
     const renderOperation = () => {
       var _a, _b;
@@ -22723,9 +22767,9 @@ var Tab = defineComponent({
     onMounted(() => {
       setPanelInstances();
       isMounted.value = true;
-    });
-    onUpdated(() => {
-      setPanelInstances();
+      onUpdated(() => {
+        setPanelInstances();
+      });
     });
     const methods = {
       tabAdd(e) {