bkui-vue 0.0.1-beta.409 → 0.0.1-beta.410

package/dist/index.esm.js

@@ -7446,7 +7446,12 @@ class BkMaskManager {
     this.setMaskStyle(style2);
     this.mask.style.setProperty("display", "block");
     this.mask.style.setProperty("z-index", `${localZIndex}`);
+    this.mask.style.setProperty("pointer-events", "all");
     this.backupMask.style.setProperty("z-index", `${localZIndex - 1}`);
+    if (!showMask) {
+      this.mask.style.setProperty("pointer-events", "none");
+      content == null ? void 0 : content.style.setProperty("pointer-events", "all");
+    }
     if (content) {
       if (transfer2)
         content.style.setProperty("z-index", `${localZIndex + 1}`);
@@ -7982,7 +7987,7 @@ var RenderType = /* @__PURE__ */ ((RenderType2) => {
   return RenderType2;
 })(RenderType || {});
 function renderType() {
-  return j("trigger", {}).def("auto");
+  return j("popRenderType", {}).def("shown");
 }
 function dialogTypeUnion() {
   return j("dialogType", {
@@ -8295,6 +8300,12 @@ const zhCn = {
     drapFileOr: "\u5C06\u6587\u4EF6\u62D6\u5230\u6B64\u5904\u6216",
     clickUpload: "\u70B9\u51FB\u4E0A\u4F20",
     uploadLabel: "\u4E0A\u4F20\u6587\u4EF6"
+  },
+  input: {
+    placeholder: "\u8BF7\u8F93\u5165"
+  },
+  tagInput: {
+    placeholder: "\u8BF7\u8F93\u5165\u5E76\u6309Enter\u7ED3\u675F"
   }
 };
 const configProviderProps = {
@@ -9681,7 +9692,7 @@ const inputType = {
   clearable: PropTypes.bool,
   disabled: PropTypes.bool,
   readonly: PropTypes.bool,
-  placeholder: PropTypes.string.def("\u8BF7\u8F93\u5165"),
+  placeholder: PropTypes.string.def(""),
   prefixIcon: PropTypes.string,
   suffixIcon: PropTypes.string,
   suffix: PropTypes.string,
@@ -9747,6 +9758,7 @@ var Component$w = defineComponent({
   emits: inputEmitEventsType,
   setup(props2, ctx) {
     const formItem = useFormItem();
+    const t2 = useLocale("input");
     const isFocused = ref(false);
     const isCNInput = ref(false);
     const isTextArea = computed(() => props2.type === "textarea");
@@ -9899,7 +9911,7 @@ var Component$w = defineComponent({
       };
       return __spreadProps(__spreadValues({}, val), {
         maxlength: props2.maxlength,
-        placeholder: props2.placeholder,
+        placeholder: props2.placeholder || t2.value.placeholder,
         readonly: props2.readonly,
         disabled: props2.disabled
       });
@@ -10918,10 +10930,9 @@ var Dialog = defineComponent({
           default: () => [this.localConfirmText]
         })]) : ""]);
       },
-      close: () => createVNode("span", {
-        "class": resolveClassName("dialog-close"),
+      close: () => createVNode(error, {
         "onClick": this.handleClose
-      }, [createTextVNode("+")])
+      }, null)
     };
     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, {
@@ -12775,7 +12786,9 @@ var useFloating = (props2, ctx, {
       elContent
     } = resolvePopElements();
     cleanup = autoUpdate(elReference, elContent, () => {
-      updatePopover(null, props2);
+      if (localIsShow.value) {
+        updatePopover(null, props2);
+      }
     });
   };
   const updatePopover = (virtualEl = null, props3 = {}) => {
@@ -12820,8 +12833,12 @@ var useFloating = (props2, ctx, {
   const showPopover = () => {
     const delay = resolvePopoverDelay()[0];
     popShowTimerId = setTimeout(() => {
-      popHideTimerId && clearTimeout(popHideTimerId);
-      !props2.disabled && (localIsShow.value = true);
+      if (popHideTimerId) {
+        clearTimeout(popHideTimerId);
+      }
+      if (!props2.disabled) {
+        localIsShow.value = true;
+      }
     }, delay);
   };
   const hidePopover = () => {
@@ -13329,10 +13346,8 @@ function createPopoverComponent(options) {
       };
       updateStyle(refProps.value.target);
       const show3 = () => {
-        setTimeout(() => {
-          var _a, _b;
-          (_b = (_a = refReference.value) == null ? void 0 : _a.show) == null ? void 0 : _b.call(_a);
-        });
+        var _a, _b;
+        (_b = (_a = refReference.value) == null ? void 0 : _a.show) == null ? void 0 : _b.call(_a);
       };
       const hide3 = () => {
         var _a, _b;
@@ -13401,10 +13416,8 @@ function createPopoverComponent(options) {
   if ($PopoverInstance === null) {
     $PopoverInstanceEl = document.createElement("div");
     getBoundaryDom(resolvedOptions.boundary).append($PopoverInstanceEl);
-    setTimeout(() => {
-      $PopoverInstance = createApp(popoverComponent);
-      $PopoverInstanceVm = $PopoverInstance.mount($PopoverInstanceEl);
-    });
+    $PopoverInstance = createApp(popoverComponent);
+    $PopoverInstanceVm = $PopoverInstance.mount($PopoverInstanceEl);
   }
   function close2() {
     if ($PopoverInstance) {
@@ -15051,15 +15064,13 @@ const createInstance = (el, binding) => {
     createTimer && clearTimeout(createTimer);
     createTimer = setTimeout(() => {
       const targetOptions = resolveOptions(el, binding);
+      targetOptions.isShow = true;
       targetOptions.content = targetOptions.content || el.innerHTML;
       Object.assign(targetOptions, {
         onContentMouseenter: handleContentEnter,
         onContentMouseleave: handleContentLeave
       });
       instance = createPopoverComponent(targetOptions);
-      setTimeout(() => {
-        instance.show();
-      });
     }, 100);
   };
   const handleMouseLeave = () => {
@@ -16874,7 +16885,7 @@ const IColumnType = {
   field: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
   render: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
   width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
-  minWidth: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]).def(80),
+  minWidth: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]).def(30),
   columnKey: PropTypes.string.def(""),
   showOverflowTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     content: PropTypes.string.def(""),
@@ -18405,6 +18416,7 @@ var TableCell = defineComponent({
       } = props2;
       let content = refRoot.value.innerText;
       let mode = "auto";
+      let watchCellResize = true;
       if (typeof showOverflowTooltip === "boolean") {
         disabled = !showOverflowTooltip;
       }
@@ -18415,6 +18427,7 @@ var TableCell = defineComponent({
         if (typeof showOverflowTooltip.content === "function") {
           content = showOverflowTooltip.content(props2.column, props2.row);
         }
+        watchCellResize = showOverflowTooltip.watchCellResize;
         mode = showOverflowTooltip.mode || "auto";
       }
       if (typeof disabled === "function") {
@@ -18424,7 +18437,8 @@ var TableCell = defineComponent({
         disabled,
         content,
         mode,
-        resizerWay
+        resizerWay,
+        watchCellResize
       };
     };
     const resolveOverflowTooltip = () => {
@@ -18445,7 +18459,11 @@ var TableCell = defineComponent({
       if (isTipsEnabled.value) {
         const bindings = ref(resolveTooltipOption());
         if (bkEllipsisIns === null) {
-          bkEllipsisIns = createInstance(refRoot.value, bindings);
+          bkEllipsisIns = createInstance(refRoot.value, {
+            disabled: bindings.value.disabled,
+            content: bindings.value.content,
+            mode: bindings.value.mode
+          });
         }
       } else {
         bkEllipsisIns == null ? void 0 : bkEllipsisIns.destroyInstance(refRoot.value);
@@ -18453,14 +18471,14 @@ var TableCell = defineComponent({
       }
     };
     onMounted(() => {
-      var _a;
       const {
         disabled,
-        resizerWay
+        resizerWay,
+        watchCellResize
       } = resolveTooltipOption();
       if (!disabled) {
         resolveOverflowTooltip();
-        if (((_a = props2.column.showOverflowTooltip) == null ? void 0 : _a.watchCellResize) !== false && props2.observerResize) {
+        if (watchCellResize !== false && props2.observerResize) {
           let observerIns = observerResize(refRoot.value, () => {
             resolveOverflowTooltip();
           }, 60, true, resizerWay);
@@ -18789,16 +18807,21 @@ var Settings = defineComponent({
     const resolvedColVal = (item, index2) => resolvePropVal(item, ["field", "type"], [item, index2]);
     const checkAll = ref(false);
     const isShow = ref(false);
-    const localSettings = typeof props2.settings === "boolean" ? ref({
-      fields: props2.columns.map((col) => __spreadProps(__spreadValues({}, col), {
-        field: col.field || col.type
-      })),
-      checked: [],
-      limit: 0,
-      size: "small",
-      sizeList: defaultSizeList,
-      showLineHeight: true
-    }) : ref(props2.settings);
+    const localSettings = computed(() => {
+      if (typeof props2.settings === "boolean") {
+        return {
+          fields: props2.columns.map((col) => __spreadProps(__spreadValues({}, col), {
+            field: col.field || col.type
+          })),
+          checked: [],
+          limit: 0,
+          size: "small",
+          sizeList: defaultSizeList,
+          showLineHeight: true
+        };
+      }
+      return props2.settings;
+    });
     const activeSize = ref(localSettings.value.size || "small");
     const activeHeight = ref(props2.rowHeight);
     const checkedFields = ref(localSettings.value.checked || []);
@@ -19295,7 +19318,9 @@ class TableRender {
         cells.push(this.getFilterCell(column, index2));
       }
       const cellText = getHeadCellText(column, index2);
-      cells.unshift(cellText);
+      cells.unshift(createVNode("span", {
+        "class": "head-text"
+      }, [cellText]));
       const showTitle = typeof cellText === "string" ? cellText : void 0;
       return createVNode(TableCell, {
         "title": showTitle,
@@ -20738,7 +20763,7 @@ var ListTagRender = defineComponent({
 });
 const tagProps = () => ({
   modelValue: PropTypes.arrayOf(PropTypes.string).def([]),
-  placeholder: PropTypes.string.def("\u8BF7\u8F93\u5165\u5E76\u6309 Enter \u7ED3\u675F"),
+  placeholder: PropTypes.string.def(""),
   list: PropTypes.arrayOf(PropTypes.object).def([]),
   disabled: PropTypes.bool.def(false),
   tooltipKey: PropTypes.string.def(""),
@@ -20852,6 +20877,7 @@ var Component$d = defineComponent({
     emit
   }) {
     const formItem = useFormItem();
+    const t2 = useLocale("tagInput");
     const state = reactive({
       isEdit: false,
       isHover: false,
@@ -20883,6 +20909,7 @@ var Component$d = defineComponent({
     const showTagClose = computed(() => !props2.disabled && props2.hasDeleteIcon);
     const isSingleSelect = computed(() => props2.maxData === 1);
     const isShowPlaceholder = computed(() => listState.selectedTagList.length === 0 && curInputValue.value === "" && !state.isEdit);
+    const placeholderText = computed(() => props2.placeholder || t2.value.placeholder);
     const isShowClear = computed(() => props2.clearable && !props2.disabled && listState.selectedTagList.length !== 0 && (props2.showClearOnlyHover ? state.isHover : true));
     const triggerClass = computed(() => ({
       "bk-tag-input-trigger": true,
@@ -21488,6 +21515,7 @@ var Component$d = defineComponent({
     }, toRefs(state)), toRefs(listState)), toRefs(pageState)), {
       isShowPlaceholder,
       isShowClear,
+      placeholderText,
       curInputValue,
       renderList,
       showTagClose,
@@ -21583,7 +21611,7 @@ var Component$d = defineComponent({
           "class": "text"
         }, [createTextVNode("+"), this.selectedTagList.length - this.overflowTagIndex])])])]), withDirectives(createVNode("p", {
           "class": "placeholder"
-        }, [this.placeholder]), [[vShow, this.isShowPlaceholder]]), (_c = (_b = (_a = this.$slots) == null ? void 0 : _a.suffix) == null ? void 0 : _b.call(_a)) != null ? _c : this.isShowClear && createVNode(close$1, {
+        }, [this.placeholderText]), [[vShow, this.isShowPlaceholder]]), (_c = (_b = (_a = this.$slots) == null ? void 0 : _a.suffix) == null ? void 0 : _b.call(_a)) != null ? _c : this.isShowClear && createVNode(close$1, {
           "class": "clear-icon",
           "onClick": this.handleClear
         }, null)]);
@@ -22393,8 +22421,8 @@ const InfoBox = (config) => {
       }), getContent());
     }
   });
-  const app = createApp(dialog2).mount(container2);
-  const instance = {
+  let app = createApp(dialog2).mount(container2);
+  return {
     show: () => {
       isShow.value = true;
     },
@@ -22403,9 +22431,12 @@ const InfoBox = (config) => {
     },
     update: (config2) => {
       app.update(config2);
+    },
+    destroy: () => {
+      app.unmount();
+      app = null;
     }
   };
-  return instance;
 };
 const BkInfoBox = withInstall(InfoBox);
 var NotifyThemeEnum;
@@ -30841,13 +30872,13 @@ var CascaderPanel = defineComponent({
   render() {
     const emptyWidth = parseInt(this.panelWidth, 10) > 200 ? this.panelWidth : `${200}px`;
     const searchPanelRender = () => this.suggestions.length ? createVNode("ul", {
-      "class": "bk-cascader-panel bk-scroll-y",
+      "class": [resolveClassName("cascader-panel"), "bk-scroll-y"],
       "style": {
         height: this.panelHeight,
         width: this.panelWidth
       }
     }, [this.suggestions.map((node) => createVNode("li", mergeProps({
-      "class": ["bk-cascader-node", {
+      "class": [resolveClassName("cascader-node"), {
         "is-selected": this.isNodeInPath(node)
       }, {
         "is-disabled": node.isDisabled
@@ -30855,15 +30886,15 @@ var CascaderPanel = defineComponent({
         "is-checked": this.isCheckedNode(node, this.checkValue)
       }]
     }, this.searchPanelEvents(node)), [node.pathNames.join(this.separator)]))]) : createVNode("div", {
-      "class": "bk-cascader-search-empty",
+      "class": resolveClassName("cascader-search-empty"),
       "style": {
         width: emptyWidth
       }
     }, [createVNode("span", null, [createTextVNode("\u6682\u65E0\u641C\u7D22\u7ED3\u679C")])]);
     return createVNode("div", {
-      "class": "bk-cascader-panel-wrapper"
+      "class": resolveClassName("cascader-panel-wrapper")
     }, [this.isFiltering ? searchPanelRender() : this.menus.list.map((menu2) => createVNode("ul", {
-      "class": "bk-cascader-panel bk-scroll-y",
+      "class": [resolveClassName("cascader-panel"), "bk-scroll-y"],
       "style": {
         height: this.panelHeight,
         width: this.panelWidth
@@ -30871,7 +30902,7 @@ var CascaderPanel = defineComponent({
     }, [menu2.map((node) => {
       var _a, _b;
       return createVNode("li", mergeProps({
-        "class": ["bk-cascader-node", {
+        "class": [resolveClassName("cascader-node"), {
           "is-selected": this.isNodeInPath(node)
         }, {
           "is-disabled": node.isDisabled
@@ -30883,6 +30914,7 @@ var CascaderPanel = defineComponent({
         "modelValue": node.checked,
         "onUpdate:modelValue": ($event) => node.checked = $event,
         "indeterminate": node.isIndeterminate,
+        "style": "margin-right: 5px",
         "onChange": (val) => this.checkNode(node, val)
       }, null), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
         node,
@@ -31031,6 +31063,16 @@ class Store {
   getFlattedNodes(leafOnly = false) {
     return flatNodes(this.nodes, leafOnly);
   }
+  setNodesCheck(nodes) {
+    this.getFlattedNodes().forEach((node) => {
+      node.checked = false;
+      const checkedNode = nodes.find((nodeValue) => arrayEqual(node.path, nodeValue));
+      if (checkedNode) {
+        const currentNode = this.getNodeByValue(checkedNode);
+        currentNode.checked = true;
+      }
+    });
+  }
   getCheckedNodes() {
     return this.getFlattedNodes().filter((node) => node.checked);
   }
@@ -31054,16 +31096,18 @@ class Store {
 var Component$7 = defineComponent({
   name: "Cascader",
   directives: {
-    clickoutside: ClickOutside
+    bkTooltips: tooltips
   },
   components: {
     CascaderPanel,
-    BkPopover
+    BkPopover,
+    Tag: BkTag
   },
   props: {
     modelValue: PropTypes.arrayOf(PropTypes.oneOfType([q(), String, Number])),
     list: PropTypes.array.def([]),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
+    behavior: PropTypes.string.def("normal"),
     filterable: PropTypes.bool.def(false),
     multiple: PropTypes.bool.def(false),
     disabled: PropTypes.bool.def(false),
@@ -31080,9 +31124,17 @@ var Component$7 = defineComponent({
     limitOneLine: PropTypes.bool.def(false),
     extCls: PropTypes.string.def(""),
     scrollHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(216),
-    scrollWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def("auto")
+    scrollWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def("auto"),
+    collapseTags: {
+      type: Boolean,
+      default: true
+    },
+    floatMode: {
+      type: Boolean,
+      default: false
+    }
   },
-  emits: ["update:modelValue", "change", "clear", "toggle"],
+  emits: ["update:modelValue", "change", "clear", "toggle", "focus"],
   setup(props2, {
     emit
   }) {
@@ -31096,7 +31148,6 @@ var Component$7 = defineComponent({
       cancelHover
     } = useHover();
     const store = ref(new Store(props2));
-    const panelShow = ref(false);
     const selectedText = ref("");
     const selectedTags = ref([]);
     const {
@@ -31106,6 +31157,8 @@ var Component$7 = defineComponent({
     const searchKey = ref("");
     const suggestions = ref([]);
     const isFiltering = ref(false);
+    const isEdit = ref(false);
+    const isFocus = ref(false);
     const checkedValue = computed({
       get: () => modelValue.value,
       set: (value) => {
@@ -31113,6 +31166,8 @@ var Component$7 = defineComponent({
       }
     });
     const popover2 = ref(null);
+    const bkCascaderRef = ref(null);
+    const inputRef = ref(null);
     const getShowText = (node) => props2.showCompleteName ? node.pathNames.join(separator2) : node.pathNames[node.pathNames.length - 1];
     const updateSearchKey = () => {
       searchKey.value = selectedText.value;
@@ -31120,10 +31175,12 @@ var Component$7 = defineComponent({
     const updateValue = (val) => {
       var _a;
       if (multiple) {
+        store.value.setNodesCheck(val);
         selectedTags.value = store.value.getCheckedNodes().map((node) => ({
           text: getShowText(node),
           key: node.id
         }));
+        selectedText.value = selectedTags.value.map((item) => item.text).join(", ");
         return;
       }
       !props2.checkAnyLevel && ((_a = popover2 == null ? void 0 : popover2.value) == null ? void 0 : _a.hide());
@@ -31149,14 +31206,20 @@ var Component$7 = defineComponent({
       e.stopPropagation();
       const current = JSON.parse(JSON.stringify(value));
       const tag2 = current.splice(index2, 1)[0];
+      isEdit.value = true;
       store.value.removeTag(tag2);
       updateValue(current);
       emit("update:modelValue", store.value.getCheckedNodes().map((node) => node.path));
+      setTimeout(() => {
+        isEdit.value = isFocus.value;
+      });
     };
     const modelValueChangeHandler = (value, oldValue) => {
+      var _a;
       updateValue(value);
       emit("update:modelValue", value);
       oldValue !== void 0 && emit("change", value);
+      (_a = inputRef == null ? void 0 : inputRef.value) == null ? void 0 : _a.focus();
     };
     const listChangeHandler = () => {
       store.value = new Store(props2);
@@ -31164,6 +31227,13 @@ var Component$7 = defineComponent({
     };
     const popoverChangeEmitter = (val) => {
       emit("toggle", val.isShow);
+      isEdit.value = val.isShow;
+      isFocus.value = val.isShow;
+      nextTick(() => {
+        var _a;
+        val && ((_a = inputRef.value) == null ? void 0 : _a.focus());
+      });
+      val.isShow && focusEmitter();
       if (!val.isShow) {
         isFiltering.value = false;
       }
@@ -31185,6 +31255,9 @@ var Component$7 = defineComponent({
       suggestions.value = targetNodes;
       !(popover2 == null ? void 0 : popover2.value.isShow) && (popover2 == null ? void 0 : popover2.value.show());
     });
+    const focusEmitter = () => {
+      emit("focus");
+    };
     watch(() => props2.modelValue, modelValueChangeHandler, {
       immediate: true
     });
@@ -31192,10 +31265,20 @@ var Component$7 = defineComponent({
       deep: true,
       immediate: true
     });
+    const tagList = computed(() => selectedTags.value.map((item) => item.text));
+    const isCollapse = computed(() => props2.collapseTags ? props2.collapseTags && isFocus.value : props2.collapseTags);
+    const isEditMode = computed(() => props2.collapseTags ? props2.collapseTags && isEdit.value : props2.collapseTags);
+    const {
+      overflowTagIndex
+    } = useTagsOverflow(bkCascaderRef, isEditMode, tagList);
     return {
+      bkCascaderRef,
+      inputRef,
+      overflowTagIndex,
+      isCollapse,
+      isFocus,
       store,
       updateValue,
-      panelShow,
       selectedText,
       checkedValue,
       handleClear,
@@ -31210,69 +31293,106 @@ var Component$7 = defineComponent({
       searchKey,
       suggestions,
       isFiltering,
-      searchInputHandler
+      searchInputHandler,
+      focusEmitter,
+      tagList,
+      isEdit
     };
   },
   render() {
     const suffixIcon = () => {
-      if (this.clearable && this.isHover) {
+      if (this.clearable && this.isHover && !this.disabled) {
         return createVNode(close$1, {
-          "class": "bk-icon-clear-icon",
+          "class": resolveClassName("icon-clear-icon"),
           "onClick": this.handleClear
         }, null);
       }
       return createVNode(angleUp, {
-        "class": "bk-icon-angle-up"
+        "class": resolveClassName("icon-angle-up")
       }, null);
     };
+    this.overflowTagIndex = this.overflowTagIndex === 0 ? 1 : this.overflowTagIndex;
+    const collapseTooltip = this.tagList.reduce((acc, cur, curIndex) => {
+      if (this.overflowTagIndex !== null && curIndex >= this.overflowTagIndex) {
+        acc.push(cur);
+      }
+      return acc;
+    }, []);
     const renderTags = () => {
       if (this.limitOneLine) {
-        return createVNode("span", null, [this.selectedText]);
+        return createVNode("span", {
+          "class": "cascader-selected-text"
+        }, [this.selectedText]);
       }
       return createVNode("div", {
         "class": "cascader-tag-list"
-      }, [this.selectedTags.map((tag2, index2) => createVNode("span", {
-        "class": "cascader-tag-item"
-      }, [createVNode("span", {
-        "class": "cascader-tag-item-name"
-      }, [tag2.text]), createVNode(error, {
-        "class": "bk-icon-clear-icon",
-        "onClick": (e) => this.removeTag(this.modelValue, index2, e)
-      }, null)]))]);
+      }, [this.tagList.map((tag2, index2) => {
+        const isOverflow = !this.isCollapse && this.overflowTagIndex !== null && index2 >= this.overflowTagIndex;
+        return createVNode("span", {
+          "class": "tag-item",
+          "style": {
+            display: isOverflow ? "none" : ""
+          },
+          "key": tag2
+        }, [createVNode("span", {
+          "class": "tag-item-name"
+        }, [tag2]), createVNode(error, {
+          "class": resolveClassName("icon-clear-icon"),
+          "onClick": (e) => {
+            e.stopPropagation();
+            this.removeTag(this.modelValue, index2, e);
+          }
+        }, null)]);
+      }), this.overflowTagIndex !== null && !this.isCollapse && withDirectives(createVNode(BkTag, {
+        "style": "margin-top: 0"
+      }, {
+        default: () => [createTextVNode("+"), this.selectedTags.length - this.overflowTagIndex]
+      }), [[resolveDirective("bk-tooltips"), collapseTooltip.join(", ")]])]);
     };
+    const textRender = () => this.multiple ? null : createVNode("span", null, [this.selectedText]);
     return createVNode("div", {
-      "class": ["bk-cascader", "bk-cascader-wrapper", this.extCls, {
-        "bk-is-show-panel": this.panelShow,
+      "class": [resolveClassName("cascader-wrapper"), this.floatMode ? "float-mode" : ""]
+    }, [createVNode("div", {
+      "class": [resolveClassName("cascader"), this.extCls, {
         "is-unselected": this.modelValue.length === 0,
         "is-hover": this.isHover,
-        "is-filterable": this.filterable
+        "is-filterable": this.filterable,
+        "is-focus": this.isFocus,
+        "is-disabled": this.disabled,
+        "is-simplicity": this.behavior === "simplicity"
       }],
       "tabindex": "0",
       "data-placeholder": this.placeholder,
       "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover
+      "onMouseleave": this.cancelHover,
+      "ref": "bkCascaderRef"
     }, [suffixIcon(), createVNode(BkPopover, {
       "placement": "bottom-start",
-      "theme": "light bk-cascader-popover",
+      "theme": `light ${resolveClassName("cascader-popover")}`,
       "trigger": "click",
       "arrow": false,
-      "class": "bk-cascader-popover-wrapper",
+      "disabled": this.disabled,
+      "class": resolveClassName("cascader-popover-wrapper"),
       "ref": "popover",
       "onAfterHidden": this.popoverChangeEmitter,
       "onAfterShow": this.popoverChangeEmitter,
       "boundary": "body"
     }, {
       default: () => createVNode("div", {
-        "class": "bk-cascader-name"
-      }, [this.multiple && this.selectedTags.length > 0 && renderTags(), this.filterable ? createVNode("input", {
-        "class": "bk-cascader-search-input",
+        "class": [resolveClassName("cascader-name"), "bk-scroll-y"]
+      }, [this.multiple && this.selectedTags.length > 0 && renderTags(), this.filterable ? (this.isCollapse || this.selectedTags.length === 0) && createVNode("input", {
+        "class": [resolveClassName("cascader-search-input"), {
+          "is-disabled": this.disabled
+        }],
         "type": "text",
         "onInput": this.searchInputHandler,
         "placeholder": this.placeholder,
-        "value": this.searchKey
-      }, null) : createVNode("span", null, [this.selectedText])]),
+        "value": this.searchKey,
+        "disabled": this.disabled,
+        "ref": "inputRef"
+      }, null) : textRender()]),
       content: () => createVNode("div", {
-        "class": "bk-cascader-popover"
+        "class": resolveClassName("cascader-popover")
       }, [createVNode(CascaderPanel, {
         "store": this.store,
         "ref": "cascaderPanel",
@@ -31286,10 +31406,10 @@ var Component$7 = defineComponent({
         "onUpdate:modelValue": ($event) => this.checkedValue = $event
       }, {
         default: (scope) => this.$slots.default ? this.$slots.default(scope) : createVNode("span", {
-          "class": "bk-cascader-node-name"
+          "class": resolveClassName("cascader-node-name")
         }, [scope.node.name])
       })])
-    })]);
+    })])]);
   }
 });
 const BkCascader = withInstallProps(Component$7, { CascaderPanel });