bkui-vue 0.0.1-beta.366 → 0.0.1-beta.368

package/dist/index.esm.js

@@ -1669,6 +1669,9 @@ function isElement$2(obj) {
     return typeof obj === "object" && obj.nodeType === 1 && typeof obj.style === "object" && typeof obj.ownerDocument === "object";
   }
 }
+function hasOverflowEllipsis(element) {
+  return element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight;
+}
 class BKPopover {
   constructor(reference2, popperRefer, options) {
     var _a, _b;
@@ -9520,7 +9523,7 @@ var Component$x = defineComponent({
     const isFocused = ref(false);
     const isCNInput = ref(false);
     const isTextArea = computed(() => props2.type === "textarea");
-    const inputClsPrefix = computed(() => isTextArea.value ? "bk-textarea" : "bk-input");
+    const inputClsPrefix = computed(() => isTextArea.value ? resolveClassName("textarea") : resolveClassName("input"));
     const _a = ctx.attrs, {
       class: cls,
       style: style2
@@ -10471,9 +10474,9 @@ var Component$u = defineComponent({
     const maxHeight = this.maxHeight ? {
       maxHeight: this.maxHeight
     } : {};
-    const bodyClass = `bk-modal-body ${this.animateType === "slide" ? this.direction : ""}`;
+    const bodyClass = `${resolveClassName("modal-body")} ${this.animateType === "slide" ? this.direction : ""}`;
     return createVNode("div", {
-      "class": ["bk-modal-wrapper", this.extCls, this.size, this.fullscreen ? "fullscreen" : ""],
+      "class": [resolveClassName("modal-wrapper"), this.extCls, this.size, this.fullscreen ? "fullscreen" : ""],
       "style": [this.compStyle, this.fullscreen ? this.fullscreenStyle : ""]
     }, [createVNode(Transition, {
       "name": this.animateType
@@ -10483,14 +10486,14 @@ var Component$u = defineComponent({
         return [this.isShow ? createVNode("div", {
           "class": bodyClass
         }, [createVNode("div", {
-          "class": "bk-modal-header"
+          "class": resolveClassName("modal-header")
         }, [(_c = (_b = (_a = this.$slots).header) == null ? void 0 : _b.call(_a)) != null ? _c : ""]), createVNode("div", {
-          "class": "bk-modal-content",
+          "class": resolveClassName("modal-content"),
           "style": [this.dialogType === "show" ? "padding-bottom: 20px" : "", __spreadValues({}, maxHeight)]
         }, [(_f = (_e = (_d = this.$slots).default) == null ? void 0 : _e.call(_d)) != null ? _f : ""]), this.dialogType === "show" ? "" : createVNode("div", {
-          "class": "bk-modal-footer"
+          "class": resolveClassName("modal-footer")
         }, [(_i = (_h = (_g = this.$slots).footer) == null ? void 0 : _h.call(_g)) != null ? _i : ""]), createVNode("div", {
-          "class": ["bk-modal-close", this.closeIcon ? "" : "close-icon"]
+          "class": [resolveClassName("modal-close"), this.closeIcon ? "" : "close-icon"]
         }, [(_l = (_k = (_j = this.$slots).close) == null ? void 0 : _k.call(_j)) != null ? _l : ""])]) : ""];
       }
     })]);
@@ -10646,16 +10649,16 @@ var Dialog = defineComponent({
     const renderIcon = () => {
       const iconMap = {
         loading: createVNode(spinner, {
-          "class": "bk-info-icon primary"
+          "class": [resolveClassName("info-icon"), "primary"]
         }, null),
         warning: createVNode(warn, {
-          "class": "bk-info-icon warning"
+          "class": [resolveClassName("info-icon"), "warning"]
         }, null),
         success: createVNode(success, {
-          "class": "bk-info-icon success"
+          "class": [resolveClassName("info-icon"), "success"]
         }, null),
         danger: createVNode(close$1, {
-          "class": "bk-info-icon danger"
+          "class": [resolveClassName("info-icon"), "danger"]
         }, null)
       };
       return iconMap[this.infoType];
@@ -10664,16 +10667,16 @@ var Dialog = defineComponent({
       header: () => {
         var _a, _b, _c, _d, _e, _f;
         return [createVNode("div", {
-          "class": ["bk-dialog-tool", this.fullscreen || !this.draggable ? "" : "move", this.draggable ? "content-dragging" : ""],
+          "class": [resolveClassName("dialog-tool"), this.fullscreen || !this.draggable ? "" : "move", this.draggable ? "content-dragging" : ""],
           "onMousedown": this.moveHandler
         }, [(_c = (_b = (_a = this.$slots).tools) == null ? void 0 : _b.call(_a)) != null ? _c : ""]), createVNode("div", {
-          "class": "bk-dialog-header"
+          "class": resolveClassName("dialog-header")
         }, [createVNode("div", {
-          "class": "bk-header-icon"
+          "class": resolveClassName("header-icon")
         }, [this.infoType ? renderIcon() : createVNode("slot", {
           "name": "info-icon"
         }, null)]), createVNode("span", {
-          "class": "bk-dialog-title",
+          "class": resolveClassName("dialog-title"),
           "style": `text-align: ${this.headerAlign}`
         }, [(_f = (_e = (_d = this.$slots).header) == null ? void 0 : _e.call(_d)) != null ? _f : this.title])])];
       },
@@ -10684,15 +10687,15 @@ var Dialog = defineComponent({
       footer: () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _i;
         return createVNode("div", {
-          "class": "bk-dialog-footer",
+          "class": resolveClassName("dialog-footer"),
           "style": `text-align: ${this.footerAlign}`
         }, [this.dialogType === "process" ? (_c = (_b = (_a = this.$slots).footer) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode(Fragment, null, [this.current === 1 ? "" : createVNode(BkButton, {
-          "class": "bk-dialog-perv",
+          "class": resolveClassName("dialog-perv"),
           "onClick": this.handlePrevStep
         }, {
           default: () => [this.prevText]
         }), this.current === this.totalStep ? "" : createVNode(BkButton, {
-          "class": "bk-dialog-next",
+          "class": resolveClassName("dialog-next"),
           "onClick": this.handleNextStep
         }, {
           default: () => [this.nextText]
@@ -10703,7 +10706,7 @@ var Dialog = defineComponent({
         }, {
           default: () => [this.confirmText]
         }) : "", createVNode(BkButton, {
-          "class": "bk-dialog-cancel",
+          "class": resolveClassName("dialog-cancel"),
           "onClick": this.handleClose,
           "disabled": this.isLoading
         }, {
@@ -10715,7 +10718,7 @@ var Dialog = defineComponent({
         }, {
           default: () => [this.confirmText]
         }), createVNode(BkButton, {
-          "class": "bk-dialog-cancel",
+          "class": resolveClassName("dialog-cancel"),
           "onClick": this.handleClose,
           "disabled": this.isLoading
         }, {
@@ -10729,11 +10732,11 @@ var Dialog = defineComponent({
         })]) : ""]);
       },
       close: () => createVNode("span", {
-        "class": "bk-dialog-close",
+        "class": resolveClassName("dialog-close"),
         "onClick": this.handleClose
       }, [createTextVNode("+")])
     };
-    const className = `bk-dialog-wrapper ${this.scrollable ? "scroll-able" : ""} ${this.multiInstance ? "multi-instance" : ""} ${this.hasFooter ? "has-footer" : "no-footer"}`;
+    const className = `${resolveClassName("dialog-wrapper ")} ${this.scrollable ? "scroll-able" : ""} ${this.multiInstance ? "multi-instance" : ""} ${this.hasFooter ? "has-footer" : "no-footer"}`;
     return createVNode(BkModal, mergeProps(this.$props, {
       "class": className,
       "onClose": this.handleClose,
@@ -11323,7 +11326,7 @@ function renderContent(opts) {
   const isLight = theme === "light";
   const zIndex = bkZIndexManager.getPopperIndex();
   const content = document.createElement("div");
-  content.className = `bk-popper ${isLight ? "light" : "dark"} ${extCls}`;
+  content.className = `${resolveClassName("popper")} ${isLight ? "light" : "dark"} ${extCls}`;
   content.innerText = value;
   content.style.zIndex = String(zIndex);
   if (hasArrow) {
@@ -11334,7 +11337,7 @@ function renderContent(opts) {
 }
 function renderArrow() {
   const arrow2 = document.createElement("div");
-  arrow2.className = "bk-popper-arrow";
+  arrow2.className = resolveClassName("popper-arrow");
   arrow2.setAttribute("data-popper-arrow", "");
   return arrow2;
 }
@@ -14669,17 +14672,17 @@ var BkOption = defineComponent({
       "is-disabled": this.disabled,
       "is-multiple": this.multiple,
       "is-hover": this.isHover,
-      "bk-select-option": true
+      [resolveClassName("select-option")]: true
     });
     return withDirectives(createVNode("li", {
       "class": selectItemClass,
       "onClick": this.handleOptionClick,
       "onMouseenter": this.handleMouseEnter
     }, [(_c = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode("span", {
-      "class": "bk-select-option-item",
+      "class": resolveClassName("select-option-item"),
       "title": this.label
     }, [this.label]), this.multiple && this.selected && this.showSelectedIcon && createVNode(done, {
-      "class": "bk-select-selected-icon",
+      "class": resolveClassName("select-selected-icon"),
       "width": 22,
       "height": 22
     }, null)]), [[vShow, this.visible]]);
@@ -14736,12 +14739,12 @@ var OptionGroup = defineComponent({
   render() {
     var _a, _b;
     const groupClass = classes({
-      "bk-option-group": true,
+      [resolveClassName("option-group")]: true,
       collapsible: this.collapsible,
       disabled: this.disabled
     });
     const groupLabelClass = classes({
-      "bk-option-group-label": true,
+      [resolveClassName("option-group-label")]: true,
       collapsible: this.collapsible
     });
     const groupLabelIconClass = classes({
@@ -14760,7 +14763,7 @@ var OptionGroup = defineComponent({
     }, null), createVNode("span", {
       "class": "default-group-label-title"
     }, [this.groupLabel])])]), withDirectives(createVNode("ul", {
-      "class": "bk-option-group-content"
+      "class": resolveClassName("option-group-content")
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, !this.groupCollapse]])]), [[vShow, this.visible]]);
   }
 });
@@ -15221,13 +15224,13 @@ var SelectTagInput = defineComponent({
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
     const selectTagClass = classes({
-      "bk-select-tag": true,
-      "bk-select-tag--default": true,
+      [resolveClassName("select-tag")]: true,
+      [resolveClassName("select-tag--default")]: true,
       "is-disabled": this.disabled,
       "collapse-tag": this.collapseTags
     });
     const tagWrapperClass = classes({
-      "bk-select-tag-wrapper": true
+      [resolveClassName("select-tag-wrapper")]: true
     });
     const inputStyle = {
       display: this.selected.length && !this.filterable ? "none" : ""
@@ -15249,11 +15252,11 @@ var SelectTagInput = defineComponent({
         return [(_a2 = this.select) == null ? void 0 : _a2.handleGetLabelByValue(item.value)];
       }
     })), !!this.overflowTagIndex && this.collapseTags && createVNode(BkTag, {
-      "class": "bk-select-overflow-tag"
+      "class": resolveClassName("select-overflow-tag")
     }, {
       default: () => [createTextVNode("+"), this.selected.length - this.overflowTagIndex]
     })]), createVNode("input", {
-      "class": "bk-select-tag-input",
+      "class": resolveClassName("select-tag-input"),
       "ref": "inputRef",
       "type": "text",
       "style": inputStyle,
@@ -15768,7 +15771,7 @@ var Component$j = defineComponent({
   },
   render() {
     const selectClass = classes({
-      "bk-select": true,
+      [resolveClassName("select")]: true,
       "popover-show": this.isPopoverShow,
       "is-disabled": this.isDisabled,
       "is-focus": this.isFocus,
@@ -15843,7 +15846,7 @@ var Component$j = defineComponent({
       });
     };
     const renderSelectTrigger = () => createVNode("div", {
-      "class": "bk-select-trigger",
+      "class": resolveClassName("select-trigger"),
       "style": {
         height: this.autoHeight && this.collapseTags ? "32px" : ""
       },
@@ -15855,21 +15858,21 @@ var Component$j = defineComponent({
     const renderSelectContent = () => {
       var _a, _b;
       return createVNode("div", {
-        "class": "bk-select-content-wrapper",
+        "class": resolveClassName("select-content-wrapper"),
         "ref": "contentRef"
       }, [this.filterable && !this.inputSearch && createVNode("div", {
-        "class": "bk-select-search-wrapper"
+        "class": resolveClassName("select-search-wrapper")
       }, [createVNode(search, {
         "class": "icon-search",
         "width": 16,
         "height": 16
       }, null), withDirectives(createVNode("input", {
         "ref": "searchRef",
-        "class": "bk-select-search-input",
+        "class": resolveClassName("select-search-input"),
         "placeholder": this.searchPlaceholder,
         "onUpdate:modelValue": ($event) => this.searchKey = $event
       }, null), [[vModelText, this.searchKey]])]), !this.isShowSelectContent && createVNode("div", {
-        "class": "bk-select-empty"
+        "class": resolveClassName("select-empty")
       }, [this.searchLoading && createVNode(BkLoading, {
         "class": "mr5",
         "theme": "primary",
@@ -15877,17 +15880,17 @@ var Component$j = defineComponent({
         "mode": "spin",
         "size": "mini"
       }, null), createVNode("span", null, [this.curContentText])]), createVNode("div", {
-        "class": "bk-select-content"
+        "class": resolveClassName("select-content")
       }, [createVNode("div", {
-        "class": "bk-select-dropdown",
+        "class": resolveClassName("select-dropdown"),
         "style": {
           maxHeight: `${this.scrollHeight}px`
         },
         "onScroll": this.handleScroll
       }, [withDirectives(createVNode("ul", {
-        "class": "bk-select-options"
+        "class": resolveClassName("select-options")
       }, [this.isShowSelectAll && createVNode("li", {
-        "class": "bk-select-option",
+        "class": resolveClassName("select-option"),
         "onMouseenter": this.handleSelectedAllOptionMouseEnter,
         "onClick": this.handleToggleAll
       }, [this.selectAllText]), this.enableVirtualRender ? createVNode(BkVirtualRender, {
@@ -15907,7 +15910,7 @@ var Component$j = defineComponent({
         "value": item[this.idKey],
         "label": item[this.displayKey]
       }, null)), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), this.scrollLoading && createVNode("li", {
-        "class": "bk-select-options-loading"
+        "class": resolveClassName("select-options-loading")
       }, [createVNode(BkLoading, {
         "class": "spinner mr5",
         "theme": "primary",
@@ -15915,7 +15918,7 @@ var Component$j = defineComponent({
         "mode": "spin",
         "size": "mini"
       }, null), createVNode("span", null, [this.loadingText])])]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
-        "class": "bk-select-extension"
+        "class": resolveClassName("select-extension")
       }, [this.$slots.extension()])])]);
     };
     return createVNode("div", {
@@ -17823,25 +17826,6 @@ const hasRootScrollY = (root, querySelector, offsetHeight = 0) => {
   }
   return false;
 };
-const getElementTextWidth = (element, text) => {
-  function getTextWidth(text2, font) {
-    const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
-    const context = canvas.getContext("2d");
-    context.font = font;
-    const metrics = context.measureText(text2);
-    return metrics.width;
-  }
-  function getCssStyle(element2, prop) {
-    return window.getComputedStyle(element2, null).getPropertyValue(prop);
-  }
-  function getCanvasFont(el = document.body) {
-    const fontWeight = getCssStyle(el, "font-weight") || "normal";
-    const fontSize = getCssStyle(el, "font-size") || "16px";
-    const fontFamily = getCssStyle(el, "font-family") || "Times New Roman";
-    return `${fontWeight} ${fontSize} ${fontFamily}`;
-  }
-  return getTextWidth(text || (element == null ? void 0 : element.innerHTML), getCanvasFont(element));
-};
 const isColumnHidden = (settingFields, column, checked) => {
   const isSettingField = (col) => settingFields.some((field) => field.field === resolvePropVal(col, ["field", "type"], [col]));
   return isSettingField(column) && checked.length && !checked.includes(resolvePropVal(column, ["field", "type"], [column]));
@@ -17982,12 +17966,15 @@ var TableCell = defineComponent({
       }
       if (typeof showOverflowTooltip === "object") {
         disabled = showOverflowTooltip.disabled;
+        content = showOverflowTooltip.content || refRoot.value.innerText;
         if (typeof showOverflowTooltip.content === "function") {
           content = showOverflowTooltip.content(props2.column, props2.row);
         }
-        content = showOverflowTooltip.content || refRoot.value.innerText;
         mode = showOverflowTooltip.mode || "auto";
       }
+      if (typeof disabled === "function") {
+        disabled = Reflect.apply(disabled, this, [props2.column, props2.row]);
+      }
       return {
         disabled,
         content,
@@ -17995,20 +17982,16 @@ var TableCell = defineComponent({
       };
     };
     const resolveOverflowTooltip = () => {
-      if (!refRoot.value || /selection|index|expand/.test(props2.column.type) || !isElement$2(refRoot.value)) {
+      if (!refRoot.value || !isElement$2(refRoot.value)) {
         return;
       }
       const {
-        content,
-        mode
+        mode,
+        disabled
       } = resolveTooltipOption();
+      isTipsEnabled.value = !disabled;
       if (mode === "auto") {
-        const textWidth = getElementTextWidth(refRoot.value, content);
-        const cellWidth = refRoot.value.clientWidth;
-        const computedStyle = window.getComputedStyle(refRoot.value);
-        const paddingWidth = ["padding-left", "padding-right"].reduce((width, prop) => width + Number(computedStyle.getPropertyValue(prop).replace("px", "")), 0);
-        const cellInnerWidth = cellWidth - paddingWidth;
-        isTipsEnabled.value = textWidth > cellInnerWidth;
+        isTipsEnabled.value = hasOverflowEllipsis(refRoot.value);
       }
       if (mode === "static") {
         isTipsEnabled.value = true;
@@ -21847,14 +21830,14 @@ const InfoBox = (config) => {
         }
         if (children.length) {
           subTitleBox.push(h$1("div", {
-            class: "bk-info-sub-title",
+            class: resolveClassName("info-sub-title"),
             style: `text-Align:${modalFuncProps.value.contentAlign || "center"}`
           }, children));
         }
         return subTitleBox;
       };
       return () => createVNode(Dialog, __spreadProps(__spreadValues({
-        class: "bk-info-wrapper",
+        class: resolveClassName("info-wrapper"),
         headerAlign: "center",
         footerAlign: "center"
       }, modalFuncProps.value), {
@@ -22677,7 +22660,7 @@ var PickerDropdown = defineComponent({
     var _a, _b, _c;
     return createVNode("div", {
       "ref": "refContentRef",
-      "class": ["bk-date-picker-dropdown", this.className, this.extPopoverCls],
+      "class": [resolveClassName("date-picker-dropdown"), this.className, this.extPopoverCls],
       "style": this.styles,
       "onClick": this.onClick
     }, [(_c = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : ""]);
@@ -22744,18 +22727,18 @@ var Confirm = defineComponent({
   render() {
     var _a, _b, _c;
     return createVNode("div", {
-      "class": "bk-picker-confirm",
+      "class": resolveClassName("picker-confirm"),
       "ref": "elRef",
       "onKeydown": this.handleTab
     }, [this.showTime ? createVNode(BkButton, {
       "text": true,
-      "class": "bk-picker-confirm-time",
+      "class": resolveClassName("picker-confirm-time"),
       "disabled": this.timeDisabled,
       "onClick": this.handleToggleTime
     }, {
       default: () => [this.labels.time]
     }) : "", (_c = (_b = (_a = this.$slots).confirm) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode("div", {
-      "class": "bk-picker-confirm-action"
+      "class": resolveClassName("picker-confirm-action")
     }, [this.clearable ? createVNode("a", {
       "href": "javascript: void(0);",
       "onClick": this.handleClear,
@@ -24937,9 +24920,9 @@ const datePickerKey = Symbol("date-picker");
 const timePickerKey = Symbol("time-picker");
 function iconBtnCls(direction, type = "") {
   return [
-    "bk-picker-panel-icon-btn",
-    `bk-date-picker-${direction}-btn`,
-    `bk-date-picker-${direction}-btn-arrow${type}`
+    resolveClassName("picker-panel-icon-btn"),
+    resolveClassName(`date-picker-${direction}-btn`),
+    resolveClassName(`date-picker-${direction}-btn-arrow${type}`)
   ];
 }
 const getDayCountOfMonth = (year, month) => new Date(year, month + 1, 0).getDate();
@@ -25109,14 +25092,14 @@ var DateTable = defineComponent({
       const newDate = cell.date;
       emit("changeRange", newDate);
     };
-    const getCellCls = (cell) => ["bk-date-picker-cells-cell", {
-      ["bk-date-picker-cells-cell-selected"]: cell.selected || cell.start || cell.end,
-      ["bk-date-picker-cells-cell-disabled"]: cell.disabled,
-      ["bk-date-picker-cells-cell-today"]: cell.type === "today",
-      ["bk-date-picker-cells-cell-prev-month"]: cell.type === "prevMonth",
-      ["bk-date-picker-cells-cell-next-month"]: cell.type === "nextMonth",
-      ["bk-date-picker-cells-cell-week-label"]: cell.type === "weekLabel",
-      ["bk-date-picker-cells-cell-range"]: cell.range && !cell.start && !cell.end
+    const getCellCls = (cell) => [resolveClassName("date-picker-cells-cell"), {
+      [resolveClassName("date-picker-cells-cell-selected")]: cell.selected || cell.start || cell.end,
+      [resolveClassName("date-picker-cells-cell-disabled")]: cell.disabled,
+      [resolveClassName("date-picker-cells-cell-today")]: cell.type === "today",
+      [resolveClassName("date-picker-cells-cell-prev-month")]: cell.type === "prevMonth",
+      [resolveClassName("date-picker-cells-cell-next-month")]: cell.type === "nextMonth",
+      [resolveClassName("date-picker-cells-cell-week-label")]: cell.type === "weekLabel",
+      [resolveClassName("date-picker-cells-cell-range")]: cell.range && !cell.start && !cell.end
     }];
     return {
       headerDays,
@@ -25128,9 +25111,9 @@ var DateTable = defineComponent({
   },
   render() {
     return createVNode("div", {
-      "class": "bk-date-picker-cells"
+      "class": resolveClassName("date-picker-cells")
     }, [createVNode("div", {
-      "class": "bk-date-picker-cells-header"
+      "class": resolveClassName("date-picker-cells-header")
     }, [this.headerDays.map((day) => createVNode("span", null, [day]))]), this.cells.map((cell) => createVNode("span", {
       "class": this.getCellCls(cell),
       "onClick": () => this.handleClick(cell),
@@ -25494,10 +25477,10 @@ var TimeSpinner = defineComponent({
       return domRef.value;
     }
     function getCellCls(cell) {
-      return ["bk-time-picker-cells-cell", {
-        ["bk-time-picker-cells-cell-selected"]: cell.selected,
-        ["bk-time-picker-cells-cell-focused"]: cell.focused,
-        ["bk-time-picker-cells-cell-disabled"]: cell.disabled
+      return [resolveClassName("time-picker-cells-cell"), {
+        [resolveClassName("time-picker-cells-cell-selected")]: cell.selected,
+        [resolveClassName("time-picker-cells-cell-focused")]: cell.focused,
+        [resolveClassName("time-picker-cells-cell-disabled")]: cell.disabled
       }];
     }
     function bindWheelEvent() {
@@ -25610,42 +25593,42 @@ var TimeSpinner = defineComponent({
   },
   render() {
     return createVNode("div", {
-      "class": ["bk-time-picker-cells", this.showSeconds ? "bk-time-picker-cells-with-seconds" : ""]
+      "class": [resolveClassName("time-picker-cells"), this.showSeconds ? resolveClassName("time-picker-cells-with-seconds") : ""]
     }, [createVNode("div", {
-      "class": "bk-time-picker-cells-title-wrapper"
+      "class": resolveClassName("time-picker-cells-title-wrapper")
     }, [createVNode("div", {
-      "class": ["bk-time-picker-cells-title", this.focusedColumn === 0 ? "active" : ""],
+      "class": [resolveClassName("time-picker-cells-title"), this.focusedColumn === 0 ? "active" : ""],
       "style": this.styles
     }, [createTextVNode("\u65F6")]), createVNode("div", {
-      "class": ["bk-time-picker-cells-title", this.focusedColumn === 1 ? "active" : ""],
+      "class": [resolveClassName("time-picker-cells-title"), this.focusedColumn === 1 ? "active" : ""],
       "style": this.styles
     }, [createTextVNode("\u5206")]), withDirectives(createVNode("div", {
-      "class": ["bk-time-picker-cells-title", this.focusedColumn === 2 ? "active" : ""],
+      "class": [resolveClassName("time-picker-cells-title"), this.focusedColumn === 2 ? "active" : ""],
       "style": this.styles
     }, [createTextVNode("\u79D2")]), [[vShow, this.showSeconds]])]), createVNode("div", {
-      "class": "bk-time-picker-cells-list",
+      "class": resolveClassName("time-picker-cells-list"),
       "ref": "hoursRef",
       "style": this.styles
     }, [createVNode("ul", {
-      "class": "bk-time-picker-cells-ul"
+      "class": resolveClassName("time-picker-cells-ul")
     }, [this.hoursList.map((item) => withDirectives(createVNode("li", {
       "class": this.getCellCls(item),
       "onClick": () => this.handleClick("hours", item)
     }, [this.padTime(item.text)]), [[vShow, !item.hide]]))])]), createVNode("div", {
-      "class": "bk-time-picker-cells-list",
+      "class": resolveClassName("time-picker-cells-list"),
       "ref": "minutesRef",
       "style": this.styles
     }, [createVNode("ul", {
-      "class": "bk-time-picker-cells-ul"
+      "class": resolveClassName("time-picker-cells-ul")
     }, [this.minutesList.map((item) => withDirectives(createVNode("li", {
       "class": this.getCellCls(item),
       "onClick": () => this.handleClick("minutes", item)
     }, [this.padTime(item.text)]), [[vShow, !item.hide]]))])]), withDirectives(createVNode("div", {
-      "class": "bk-time-picker-cells-list",
+      "class": resolveClassName("time-picker-cells-list"),
       "ref": "secondsRef",
       "style": this.styles
     }, [createVNode("ul", {
-      "class": "bk-time-picker-cells-ul"
+      "class": resolveClassName("time-picker-cells-ul")
     }, [this.secondsList.map((item) => withDirectives(createVNode("li", {
       "class": this.getCellCls(item),
       "onClick": () => this.handleClick("seconds", item)
@@ -25755,19 +25738,19 @@ var TimePanel = defineComponent({
   },
   render() {
     return createVNode("div", {
-      "class": "bk-picker-panel-body-wrapper",
+      "class": resolveClassName("picker-panel-body-wrapper"),
       "onMousedown": (e) => {
         e.preventDefault();
       }
     }, [createVNode("div", {
-      "class": "bk-picker-panel-body",
+      "class": resolveClassName("picker-panel-body"),
       "style": {
         width: `${this.width}px`
       }
     }, [this.showDate ? createVNode("div", {
-      "class": "bk-time-picker-header"
+      "class": resolveClassName("time-picker-header")
     }, [this.visibleDate]) : "", createVNode("div", {
-      "class": "bk-picker-panel-content"
+      "class": resolveClassName("picker-panel-content")
     }, [createVNode(TimeSpinner, {
       "ref": "timeSpinnerRef",
       "showSeconds": this.showSeconds,
@@ -26008,20 +25991,20 @@ var DatePanel = defineComponent({
   render() {
     var _a, _b, _c;
     return createVNode("div", {
-      "class": ["bk-picker-panel-body-wrapper", this.shortcuts.length || this.hasShortcuts ? "bk-picker-panel-with-sidebar" : ""],
+      "class": [resolveClassName("picker-panel-body-wrapper"), this.shortcuts.length || this.hasShortcuts ? resolveClassName("picker-panel-with-sidebar") : ""],
       "onMousedown": (e) => {
         e.preventDefault();
       }
     }, [this.shortcuts.length ? createVNode("div", {
       "class": "bk-picker-panel-sidebar"
     }, [this.shortcuts.map((shortcut) => createVNode("div", {
-      "class": "bk-picker-panel-shortcut",
+      "class": resolveClassName("picker-panel-shortcut"),
       "onClick": () => this.handleShortcutClick(shortcut)
     }, [shortcut.text]))]) : "", createVNode("div", {
-      "class": "bk-picker-panel-body",
+      "class": resolveClassName("picker-panel-body"),
       "style": "width: 261px;"
     }, [withDirectives(createVNode("div", {
-      "class": "bk-date-picker-header"
+      "class": resolveClassName("date-picker-header")
     }, [createVNode("span", {
       "class": iconBtnCls("prev", "-double"),
       "onClick": () => this.changeYear(-1)
@@ -26039,10 +26022,10 @@ var DatePanel = defineComponent({
         lineHeight: 1
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : "", this.datePanelLabel && Object.keys(this.datePanelLabel).length > 0 ? createVNode("span", null, [withDirectives(createVNode("span", {
-      "class": "bk-date-picker-header-label",
+      "class": resolveClassName("date-picker-header-label"),
       "onClick": () => this.datePanelLabel.labels[0].handler
     }, [this.datePanelLabel.labels[0].label]), [[vShow, this.showLabelFirst]]), this.currentView === "date" ? ` ${this.datePanelLabel.separator} ` : " ", withDirectives(createVNode("span", {
-      "class": "bk-date-picker-header-label",
+      "class": resolveClassName("date-picker-header-label"),
       "onClick": () => this.datePanelLabel.labels[1].handler
     }, [this.datePanelLabel.labels[1].label]), [[vShow, this.showLabelSecond]])]) : "", createVNode("span", {
       "class": iconBtnCls("next", "-double"),
@@ -26061,7 +26044,7 @@ var DatePanel = defineComponent({
         lineHeight: 1
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : ""]), [[vShow, this.currentView !== "time"]]), createVNode("div", {
-      "class": "bk-picker-panel-content"
+      "class": resolveClassName("picker-panel-content")
     }, [this.currentView !== "time" ? (() => {
       switch (this.pickerTable) {
         case "date-table":
@@ -26095,7 +26078,7 @@ var DatePanel = defineComponent({
       "onPick-clear": this.handlePickClear,
       "onPick-success": this.handlePickSuccess
     }, this.$slots) : ""]), this.hasShortcuts ? createVNode("div", {
-      "class": "bk-picker-panel-sidebar"
+      "class": resolveClassName("picker-panel-sidebar")
     }, [(_c = (_b = (_a = this.$slots).shortcuts) == null ? void 0 : _b.call(_a)) != null ? _c : null]) : null]);
   }
 });
@@ -26195,17 +26178,17 @@ var TimeRangePanel = defineComponent({
   },
   render() {
     return createVNode("div", {
-      "class": ["bk-picker-panel-body-wrapper", "bk-time-picker-with-range", this.showSeconds ? "bk-time-picker-with-seconds" : ""],
+      "class": [resolveClassName("picker-panel-body-wrapper"), resolveClassName("time-picker-with-range"), this.showSeconds ? resolveClassName("time-picker-with-seconds") : ""],
       "onMousedown": (e) => {
         e.preventDefault();
       }
     }, [createVNode("div", {
-      "class": "bk-picker-panel-body",
+      "class": resolveClassName("picker-panel-body"),
       "style": {
         width: `${this.width * 2}px`
       }
     }, [createVNode("div", {
-      "class": "bk-picker-panel-content bk-picker-panel-content-left",
+      "class": [resolveClassName("picker-panel-content", resolveClassName("picker-panel-content-left"))],
       "style": {
         width: `${this.width}px`
       }
@@ -26225,12 +26208,12 @@ var TimeRangePanel = defineComponent({
       "onChange": this.handleStartChange,
       "onPick-click": this.handlePickClick
     }, null)]), createVNode("div", {
-      "class": "bk-picker-panel-content bk-picker-panel-content-right",
+      "class": [resolveClassName("picker-panel-content"), resolveClassName("picker-panel-content-right")],
       "style": {
         width: `${this.width}px`
       }
     }, [this.showDate ? createVNode("div", {
-      "class": "bk-time-picker-header"
+      "class": resolveClassName("time-picker-header")
     }, [this.rightDatePanelLabel]) : "", createVNode(TimeSpinner, {
       "ref": "timeSpinnerEndRef",
       "steps": this.steps,
@@ -26623,7 +26606,7 @@ var DateRangePanel = defineComponent({
       } else {
         if (this.shortcuts.length) {
           inner = createVNode("div", {
-            "class": "bk-picker-panel-shortcuts"
+            "class": resolveClassName("picker-panel-shortcuts")
           }, [this.shortcuts.map((item, index2) => createVNode("div", {
             "key": index2,
             "class": "shortcuts-item",
@@ -26632,21 +26615,21 @@ var DateRangePanel = defineComponent({
         }
       }
       shortcuts = createVNode("div", {
-        "class": "bk-picker-panel-sidebar"
+        "class": resolveClassName("picker-panel-sidebar")
       }, [inner]);
     }
     return createVNode("div", {
-      "class": ["bk-picker-panel-body-wrapper", "bk-date-picker-with-range", this.shortcuts.length || this.$slots.shortcuts ? "bk-picker-panel-with-sidebar" : ""],
+      "class": [resolveClassName("picker-panel-body-wrapper"), resolveClassName("date-picker-with-range"), this.shortcuts.length || this.$slots.shortcuts ? resolveClassName("picker-panel-with-sidebar") : ""],
       "onMousedown": (e) => {
         e.preventDefault();
       }
     }, [createVNode("div", {
-      "class": ["bk-picker-panel-body", this.showTime ? "bk-picker-panel-body-time" : "bk-picker-panel-body-date"]
+      "class": [resolveClassName("picker-panel-body"), this.showTime ? resolveClassName("picker-panel-body-time") : resolveClassName("picker-panel-body-date")]
     }, [withDirectives(createVNode("div", {
-      "class": "bk-picker-panel-content bk-picker-panel-content-left",
+      "class": [resolveClassName("picker-panel-content"), resolveClassName("picker-panel-content-left")],
       "style": "width: 261px;"
     }, [withDirectives(createVNode("div", {
-      "class": "bk-date-picker-header"
+      "class": resolveClassName("date-picker-header")
     }, [createVNode("span", {
       "class": iconBtnCls("prev", "-double"),
       "onClick": () => this.prevYear("left")
@@ -26664,10 +26647,10 @@ var DateRangePanel = defineComponent({
         lineHeight: 1
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : "", this.leftDatePanelLabel && Object.keys(this.leftDatePanelLabel).length > 0 ? createVNode("span", null, [withDirectives(createVNode("span", {
-      "class": "bk-date-picker-header-label",
+      "class": resolveClassName("date-picker-header-label"),
       "onClick": () => this.leftDatePanelLabel.labels[0].handler
     }, [this.leftDatePanelLabel.labels[0].label]), [[vShow, this.leftShowLabelFirst]]), this.leftDatePanelView === "date" ? ` ${this.leftDatePanelLabel.separator} ` : " ", withDirectives(createVNode("span", {
-      "class": "bk-date-picker-header-label",
+      "class": resolveClassName("date-picker-header-label"),
       "onClick": () => this.leftDatePanelLabel.labels[1].handler
     }, [this.leftDatePanelLabel.labels[1].label]), [[vShow, this.leftShowLabelSecond]])]) : "", this.splitPanels || this.leftPickerTable !== "date-table" ? createVNode("span", {
       "class": iconBtnCls("next", "-double"),
@@ -26702,10 +26685,10 @@ var DateRangePanel = defineComponent({
           return null;
       }
     })() : ""]), [[vShow, !this.isTime]]), withDirectives(createVNode("div", {
-      "class": "bk-picker-panel-content bk-picker-panel-content-right",
+      "class": [resolveClassName("picker-panel-content"), resolveClassName("picker-panel-content-right")],
       "style": "width: 261px;"
     }, [withDirectives(createVNode("div", {
-      "class": "bk-date-picker-header"
+      "class": resolveClassName("date-picker-header")
     }, [this.splitPanels || this.rightPickerTable !== "date-table" ? createVNode("span", {
       "class": iconBtnCls("prev", "-double"),
       "onClick": () => this.prevYear("right")
@@ -26723,10 +26706,10 @@ var DateRangePanel = defineComponent({
         lineHeight: 1
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : "", this.rightDatePanelLabel && Object.keys(this.rightDatePanelLabel).length > 0 ? createVNode("span", null, [withDirectives(createVNode("span", {
-      "class": "bk-date-picker-header-label",
+      "class": resolveClassName("date-picker-header-label"),
       "onClick": () => this.rightDatePanelLabel.labels[0].handler
     }, [this.rightDatePanelLabel.labels[0].label]), [[vShow, this.rightShowLabelFirst]]), this.rightDatePanelView === "date" ? ` ${this.rightDatePanelLabel.separator} ` : " ", withDirectives(createVNode("span", {
-      "class": "bk-date-picker-header-label",
+      "class": resolveClassName("date-picker-header-label"),
       "onClick": () => this.rightDatePanelLabel.labels[1].handler
     }, [this.rightDatePanelLabel.labels[1].label]), [[vShow, this.rightShowLabelSecond]])]) : "", this.upToNow ? (() => {
       if ((this.rangeState.selecting || this.currentView === "time") && this.upToNowEnable) {
@@ -27072,7 +27055,7 @@ var Component$a = defineComponent({
           e.stopPropagation();
           e.preventDefault();
           if (isConfirm.value) {
-            const selector = ".bk-picker-confirm > *";
+            const selector = `.${resolveClassName("picker-confirm")} > *`;
             const tabbable = pickerDropdownRef.value.$el.querySelectorAll(selector);
             state.internalFocus = true;
             const element = [...tabbable][e.shiftKey ? "pop" : "shift"]();
@@ -27240,7 +27223,7 @@ var Component$a = defineComponent({
       "points": "403.7,514.4 557.1,514.4 557.1,515.3 420.1,765.5 483.5,765.5 620.3,504.3 620.3,466.5 403.7,466.5"
     }, null)])])]), createVNode("input", {
       "type": "text",
-      "class": ["bk-date-picker-editor", this.readonly ? "readonly" : "", this.fontSizeCls, this.behavior === "simplicity" ? "only-bottom-border" : ""],
+      "class": [resolveClassName("date-picker-editor"), this.readonly ? "readonly" : "", this.fontSizeCls, this.behavior === "simplicity" ? "only-bottom-border" : ""],
       "ref": "inputRef",
       "key": this.forceInputRerender,
       "readonly": this.localReadonly,
@@ -27269,10 +27252,10 @@ var Component$a = defineComponent({
     } : {};
     const slots = __spreadValues(__spreadValues({}, shortcutsSlot), confirmSlot);
     return withDirectives(createVNode("div", {
-      "class": ["bk-date-picker", this.type === "datetimerange" ? "long" : "", this.longWidthCls]
+      "class": [resolveClassName("date-picker"), this.type === "datetimerange" ? "long" : "", this.longWidthCls]
     }, [createVNode("div", {
       "ref": "triggerRef",
-      "class": "bk-date-picker-rel",
+      "class": resolveClassName("date-picker-rel"),
       "onMouseenter": this.handleInputMouseenter,
       "onMouseleave": this.handleInputMouseleave
     }, [(_c = (_b = (_a = this.$slots).trigger) == null ? void 0 : _b.call(_a)) != null ? _c : defaultTrigger]), createVNode(Teleport, {
@@ -27280,10 +27263,10 @@ var Component$a = defineComponent({
       "disabled": !this.appendToBody
     }, {
       default: () => [createVNode(Transition, {
-        "name": "bk-fade-down-transition"
+        "name": resolveClassName("fade-down-transition")
       }, {
         default: () => [withDirectives(createVNode(PickerDropdown, {
-          "class": [this.appendToBody ? "bk-date-picker-transfer" : ""],
+          "class": [this.appendToBody ? resolveClassName("date-picker-transfer") : ""],
           "ref": "pickerDropdownRef",
           "triggerRef": this.triggerRef,
           "placement": this.placement,
@@ -27293,7 +27276,7 @@ var Component$a = defineComponent({
           default: () => {
             var _a2, _b2, _c2, _d, _e, _f;
             return [this.hasHeader ? createVNode("div", {
-              "class": ["bk-date-picker-top-wrapper", this.headerSlotCls]
+              "class": [resolveClassName("date-picker-top-wrapper"), this.headerSlotCls]
             }, [(_c2 = (_b2 = (_a2 = this.$slots).header) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : null]) : null, this.panel === "DateRangePanel" ? createVNode(DateRangePanel, {
               "ref": "pickerPanelRef",
               "type": this.type,
@@ -27330,7 +27313,7 @@ var Component$a = defineComponent({
               "onPick-success": this.onPickSuccess,
               "onSelection-mode-change": this.onSelectionModeChange
             }, slots), this.hasFooter ? createVNode("div", {
-              "class": ["bk-date-picker-footer-wrapper", this.footerSlotCls]
+              "class": [resolveClassName("date-picker-footer-wrapper"), this.footerSlotCls]
             }, [(_f = (_e = (_d = this.$slots).footer) == null ? void 0 : _e.call(_d)) != null ? _f : null]) : null];
           }
         }), [[vShow, this.opened]])]
@@ -27795,7 +27778,7 @@ var TimePicker = defineComponent({
       "points": "403.7,514.4 557.1,514.4 557.1,515.3 420.1,765.5 483.5,765.5 620.3,504.3 620.3,466.5 403.7,466.5"
     }, null)])])]), createVNode("input", {
       "type": "text",
-      "class": ["bk-date-picker-editor", this.readonly ? "readonly" : "", this.fontSizeCls, this.behavior === "simplicity" ? "only-bottom-border" : ""],
+      "class": [resolveClassName("date-picker-editor"), this.readonly ? "readonly" : "", this.fontSizeCls, this.behavior === "simplicity" ? "only-bottom-border" : ""],
       "ref": "inputRef",
       "key": this.forceInputRerender,
       "readonly": this.localReadonly,
@@ -27818,10 +27801,10 @@ var TimePicker = defineComponent({
       }
     } : {};
     return withDirectives(createVNode("div", {
-      "class": ["bk-date-picker", this.type === "datetimerange" ? "long" : "", this.longWidthCls]
+      "class": [resolveClassName("date-picker"), this.type === "datetimerange" ? "long" : "", this.longWidthCls]
     }, [createVNode("div", {
       "ref": "triggerRef",
-      "class": "bk-date-picker-rel",
+      "class": resolveClassName("date-picker-rel"),
       "onMouseenter": this.handleInputMouseenter,
       "onMouseleave": this.handleInputMouseleave
     }, [(_c = (_b = (_a = this.$slots).trigger) == null ? void 0 : _b.call(_a)) != null ? _c : defaultTrigger]), createVNode(Teleport, {
@@ -27832,7 +27815,7 @@ var TimePicker = defineComponent({
         "name": "bk-fade-down-transition"
       }, {
         default: () => [withDirectives(createVNode(PickerDropdown, {
-          "class": [this.appendToBody ? "bk-date-picker-transfer" : ""],
+          "class": [this.appendToBody ? resolveClassName("date-picker-transfer") : ""],
           "ref": "pickerDropdownRef",
           "triggerRef": this.triggerRef,
           "placement": this.placement,
@@ -27843,7 +27826,7 @@ var TimePicker = defineComponent({
           default: () => {
             var _a2, _b2, _c2, _d, _e, _f;
             return [this.hasHeader ? createVNode("div", {
-              "class": ["bk-date-picker-top-wrapper", this.headerSlotCls]
+              "class": [resolveClassName("date-picker-top-wrapper"), this.headerSlotCls]
             }, [(_c2 = (_b2 = (_a2 = this.$slots).header) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : null]) : null, this.panel === "RangeTimePickerPanel" ? createVNode(TimeRangePanel, {
               "ref": "pickerPanelRef",
               "clearable": this.clearable,
@@ -27876,7 +27859,7 @@ var TimePicker = defineComponent({
               "disabledMinutes": this.ownPickerProps.disabledMinutes,
               "disabledSeconds": this.ownPickerProps.disabledSeconds
             }, shortcutsSlot), this.hasFooter ? createVNode("div", {
-              "class": ["bk-date-picker-footer-wrapper", this.footerSlotCls]
+              "class": [resolveClassName("date-picker-footer-wrapper"), this.footerSlotCls]
             }, [(_f = (_e = (_d = this.$slots).footer) == null ? void 0 : _e.call(_d)) != null ? _f : null]) : null];
           }
         }), [[vShow, this.opened]])]