bkui-vue 0.0.1-beta.156 → 0.0.1-beta.159

package/dist/index.esm.js

@@ -7320,6 +7320,7 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
+var _$1 = lodash.exports;
 const lowerStr = "abcdefghijklmnopqrstuvwxyz0123456789";
 const random = (n2, str = lowerStr) => {
   let result = "";
@@ -7905,6 +7906,34 @@ const formKey = Symbol("form");
 const formItemKey = Symbol("formItem");
 const useForm = () => inject(formKey);
 const useFormItem = () => inject(formItemKey, EMPTY_OBJ);
+const on$2 = (() => {
+  if (document.addEventListener) {
+    return (element, event, handler) => {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, true);
+      }
+    };
+  }
+  return (element, event, handler) => {
+    if (element && event && handler) {
+      element.attachEvent(`on${event}`, handler);
+    }
+  };
+})();
+const off$2 = (() => {
+  if (document.removeEventListener) {
+    return (element, event, handler) => {
+      if (element && event) {
+        element.removeEventListener(event, handler, true);
+      }
+    };
+  }
+  return (element, event, handler) => {
+    if (element && event) {
+      element.detachEvent(`on${event}`, handler);
+    }
+  };
+})();
 function classes(dynamicCls, constCls = "") {
   return Object.entries(dynamicCls).filter((entry) => entry[1]).map((entry) => entry[0]).join(" ").concat(constCls ? ` ${constCls}` : "");
 }
@@ -8801,9 +8830,7 @@ var Component$C = defineComponent({
           },
           "onClick": scrollTop
         }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : createVNode(angleUp, {
-          "style": {
-            fontSize: "14px"
-          }
+          "class": "bk-backtop-icon"
         }, null)]) : ""];
       }
     });
@@ -10438,20 +10465,12 @@ var Component$t = defineComponent({
   props: {
     type: PropTypes.commonType(["404", "403", "500", "building", "empty", "search-empty", "login"], "type").def("404"),
     scene: PropTypes.commonType(["page", "part"], "scene").def("page"),
-    extCls: PropTypes.string
+    title: PropTypes.string,
+    description: PropTypes.string
   },
   setup(props2, {
     slots
   }) {
-    const tipText = {
-      403: "\u65E0\u4E1A\u52A1\u6743\u9650",
-      404: "\u9875\u9762\u4E0D\u5B58\u5728",
-      500: "\u670D\u52A1\u7EF4\u62A4\u4E2D",
-      building: "\u529F\u80FD\u5EFA\u8BBE\u4E2D",
-      empty: "\u6CA1\u6709\u6570\u636E",
-      "search-empty": "\u641C\u7D22\u4E3A\u7A7A",
-      login: "\u8BF7\u767B\u5165\u84DD\u9CB8"
-    };
     const images = {
       403: permissions,
       404: notFound,
@@ -10461,19 +10480,58 @@ var Component$t = defineComponent({
       "search-empty": searchEmpty,
       login
     };
-    return () => {
-      var _a, _b;
+    const renderImg = () => {
+      const imgSrc = images[props2.type] ? images[props2.type] : empty;
       return createVNode("div", {
-        "class": ["bk-exception-wrapper", props2.extCls]
-      }, [createVNode("div", {
-        "class": ["bk-exception-img", `${props2.scene}-img`]
+        "class": "bk-exception-img"
       }, [createVNode("img", {
         "class": "exception-image",
-        "src": images[props2.type],
+        "src": imgSrc,
         "alt": "type"
-      }, null)]), createVNode("div", {
-        "class": ["bk-exception-text", `${props2.scene}-text`]
-      }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : tipText[props2.type]])]);
+      }, null)]);
+    };
+    const renderTitle = () => {
+      if (_$1.isFunction(slots.title)) {
+        return createVNode("div", {
+          "class": "bk-exception-title"
+        }, [slots.title()]);
+      }
+      if (props2.title) {
+        return createVNode("div", {
+          "class": "bk-exception-title"
+        }, [props2.title]);
+      }
+      return null;
+    };
+    const renderDescription = () => {
+      if (_$1.isFunction(slots.description)) {
+        return createVNode("div", {
+          "class": "bk-exception-description"
+        }, [slots.description()]);
+      }
+      if (props2.description) {
+        return createVNode("div", {
+          "class": "bk-exception-description"
+        }, [props2.description]);
+      }
+      return null;
+    };
+    const renderFooter = () => {
+      if (_$1.isFunction(slots.default)) {
+        return createVNode("div", {
+          "class": "bk-exception-footer"
+        }, [slots.default()]);
+      }
+      return null;
+    };
+    return () => {
+      const rootClass = classes({
+        "bk-exception": true,
+        [`bk-exception-${props2.scene}`]: true
+      });
+      return createVNode("div", {
+        "class": rootClass
+      }, [renderImg(), renderTitle(), renderDescription(), renderFooter()]);
     };
   }
 });
@@ -14200,7 +14258,7 @@ var SelectTagInput = defineComponent({
     allowCreate: PropTypes.bool.def(false),
     modelValue: PropTypes.any
   },
-  emits: ["update:modelValue", "remove", "focus", "enter"],
+  emits: ["update:modelValue", "remove", "enter"],
   setup(props2, {
     emit
   }) {
@@ -14216,9 +14274,6 @@ var SelectTagInput = defineComponent({
     const handleRemoveTag = (val) => {
       emit("remove", val);
     };
-    const handleFocus = () => {
-      emit("focus");
-    };
     const focus = () => {
       var _a;
       (_a = inputRef.value) == null ? void 0 : _a.focus();
@@ -14239,7 +14294,6 @@ var SelectTagInput = defineComponent({
       value,
       inputRef,
       handleRemoveTag,
-      handleFocus,
       focus,
       handleInput,
       handleKeydown,
@@ -14259,17 +14313,16 @@ var SelectTagInput = defineComponent({
       }, _isSlot$5(_slot = this.handleGetLabelByValue(item)) ? _slot : {
         default: () => [_slot]
       });
-    }), withDirectives(createVNode("input", {
+    }), createVNode("input", {
       "class": "bk-select-tag-input",
       "ref": "inputRef",
       "type": "text",
       "placeholder": !this.selected.length ? this.placeholder : "",
       "readonly": !this.filterable,
-      "onUpdate:modelValue": ($event) => this.value = $event,
-      "onFocus": this.handleFocus,
+      "value": !this.filterable ? "" : this.value,
       "onInput": this.handleInput,
       "onKeydown": this.handleKeydown
-    }, null), [[vModelText, this.value]]), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
+    }, null), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
   }
 });
 var Component$j = defineComponent({
@@ -14298,6 +14351,7 @@ var Component$j = defineComponent({
     noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
     loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
+    searchPlaceholder: PropTypes.string.def("\u8BF7\u8F93\u5165\u5173\u952E\u5B57"),
     selectAllText: PropTypes.string.def("\u5168\u90E8"),
     scrollLoading: PropTypes.bool.def(false),
     allowCreate: PropTypes.bool.def(false),
@@ -14307,7 +14361,8 @@ var Component$j = defineComponent({
     idKey: PropTypes.string.def("value"),
     displayKey: PropTypes.string.def("label"),
     withValidate: PropTypes.bool.def(true),
-    showSelectedIcon: PropTypes.bool.def(true)
+    showSelectedIcon: PropTypes.bool.def(true),
+    inputSearch: PropTypes.bool.def(true)
   },
   emits: ["update:modelValue", "change", "toggle", "clear", "scroll-end", "focus", "blur"],
   setup(props2, {
@@ -14328,11 +14383,14 @@ var Component$j = defineComponent({
       multipleMode,
       allowCreate,
       customContent,
-      showSelectedIcon
+      showSelectedIcon,
+      inputSearch
     } = toRefs(props2);
     const formItem = useFormItem();
     const inputRef = ref();
     const triggerRef = ref();
+    const contentRef = ref();
+    const searchRef = ref();
     const selectTagInputRef = ref();
     const optionsMap = ref(/* @__PURE__ */ new Map());
     const options = computed(() => [...optionsMap.value.values()]);
@@ -14390,13 +14448,17 @@ var Component$j = defineComponent({
       cancelHover
     } = useHover();
     const isFocus = ref(false);
-    const handleFocus = (e) => {
+    const handleFocus = () => {
+      if (isFocus.value)
+        return;
       isFocus.value = true;
-      emit("focus", e);
+      emit("focus");
     };
     const handleBlur = () => {
-      isFocus.value && emit("blur");
+      if (!isFocus.value)
+        return;
       isFocus.value = false;
+      emit("blur");
     };
     const {
       popperWidth,
@@ -14407,12 +14469,12 @@ var Component$j = defineComponent({
     } = usePopover({
       popoverMinWidth: popoverMinWidth.value
     }, triggerRef);
-    const isInput = computed(() => (filterable.value || allowCreate.value) && isPopoverShow.value);
+    const isInput = computed(() => (filterable.value && inputSearch.value || allowCreate.value) && isPopoverShow.value);
     watch(isPopoverShow, (isShow) => {
       if (!isShow) {
         searchKey.value = "";
       } else {
-        focus();
+        focusInput();
         initActiveOptionValue();
       }
     });
@@ -14447,6 +14509,7 @@ var Component$j = defineComponent({
     const handleTogglePopover = () => {
       if (isDisabled.value)
         return;
+      handleFocus();
       togglePopover();
       emit("toggle", isPopoverShow.value);
     };
@@ -14501,15 +14564,21 @@ var Component$j = defineComponent({
         emitChange(option.value);
         hidePopover();
       }
-      focus();
+      focusInput();
     };
-    const focus = () => {
-      var _a, _b;
-      if (multipleMode.value === "tag") {
-        (_a = selectTagInputRef.value) == null ? void 0 : _a.focus();
-      } else {
-        (_b = inputRef.value) == null ? void 0 : _b.focus();
-      }
+    const focusInput = () => {
+      setTimeout(() => {
+        var _a, _b, _c;
+        if (!inputSearch.value && !allowCreate.value) {
+          (_a = searchRef.value) == null ? void 0 : _a.focus();
+        } else {
+          if (multipleMode.value === "tag") {
+            (_b = selectTagInputRef.value) == null ? void 0 : _b.focus();
+          } else {
+            (_c = inputRef.value) == null ? void 0 : _c.focus();
+          }
+        }
+      }, 0);
     };
     const handleClear = (e) => {
       e.stopPropagation();
@@ -14535,7 +14604,7 @@ var Component$j = defineComponent({
         });
       }
       emitChange(selected.value.map((item) => item.value));
-      focus();
+      focusInput();
     };
     const handleScroll = (e) => {
       const {
@@ -14573,6 +14642,8 @@ var Component$j = defineComponent({
     };
     const handleKeydown = (e) => {
       var _a, _b;
+      if (!triggerRef.value.contains(e.target) && !contentRef.value.contains(e.target))
+        return;
       const availableOptions = options.value.filter((option) => !option.disabled && option.visible);
       const index = availableOptions.findIndex((option) => option.value === activeOptionValue.value);
       if (!availableOptions.length || index === -1)
@@ -14591,7 +14662,7 @@ var Component$j = defineComponent({
           break;
         }
         case "Backspace": {
-          if (!multiple.value || !selected.value.length || searchKey.value.length)
+          if (!multiple.value || !selected.value.length || searchKey.value.length || e.target === searchRef.value)
             return;
           selected.value.pop();
           emitChange(selected.value.map((item) => item.value));
@@ -14637,6 +14708,10 @@ var Component$j = defineComponent({
       setTimeout(() => {
         showOnInit.value && showPopover();
       });
+      on$2(document, "keydown", handleKeydown);
+    });
+    onBeforeMount(() => {
+      off$2(document, "keydown", handleKeydown);
     });
     return {
       selected,
@@ -14649,6 +14724,8 @@ var Component$j = defineComponent({
       popperWidth,
       inputRef,
       triggerRef,
+      contentRef,
+      searchRef,
       selectTagInputRef,
       searchLoading,
       isOptionsEmpty,
@@ -14661,6 +14738,7 @@ var Component$j = defineComponent({
       setHover,
       cancelHover,
       handleFocus,
+      handleBlur,
       handleTogglePopover,
       handleClear,
       hidePopover,
@@ -14725,7 +14803,6 @@ var Component$j = defineComponent({
           "tagTheme": this.tagTheme,
           "placeholder": this.placeholder,
           "filterable": this.isInput,
-          "onFocus": this.handleFocus,
           "onRemove": this.handleDeleteTag,
           "onEnter": this.handleInputEnter
         }, {
@@ -14746,10 +14823,8 @@ var Component$j = defineComponent({
         "disabled": this.isDisabled,
         "behavior": this.behavior,
         "size": this.size,
-        "onFocus": this.handleFocus,
         "onInput": this.handleInputChange,
-        "onEnter": this.handleInputEnter,
-        "onKeydown": (_2, e) => this.handleKeydown(e)
+        "onEnter": this.handleInputEnter
       }, {
         prefix: () => {
           var _a, _b;
@@ -14763,14 +14838,25 @@ var Component$j = defineComponent({
       "ref": "triggerRef",
       "onClick": this.handleTogglePopover,
       "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover,
-      "onKeydown": this.handleKeydown
+      "onMouseleave": this.cancelHover
     }, [renderTriggerInput()]);
     const renderSelectContent = () => {
       var _a, _b;
       return createVNode("div", {
-        "class": "bk-select-content"
-      }, [!this.isShowSelectContent && createVNode("div", {
+        "class": "bk-select-content",
+        "ref": "contentRef"
+      }, [this.filterable && !this.inputSearch && createVNode("div", {
+        "class": "bk-select-search-wrapper"
+      }, [createVNode(search, {
+        "class": "icon-search",
+        "width": 16,
+        "height": 16
+      }, null), withDirectives(createVNode("input", {
+        "ref": "searchRef",
+        "class": "bk-select-search-input",
+        "placeholder": this.searchPlaceholder,
+        "onUpdate:modelValue": ($event) => this.searchKey = $event
+      }, null), [[vModelText, this.searchKey]])]), !this.isShowSelectContent && createVNode("div", {
         "class": "bk-select-empty"
       }, [this.searchLoading && createVNode(BkLoading, {
         "class": "mr5",
@@ -15494,7 +15580,7 @@ var EMITEVENTS = /* @__PURE__ */ ((EMITEVENTS2) => {
   EMITEVENTS2["COLUMN_SORT"] = "columnSort";
   EMITEVENTS2["COLUMN_FILTER"] = "columnFilter";
   EMITEVENTS2["ROW_CLICK"] = "rowClick";
-  EMITEVENTS2["ROW_DBL_CLICK"] = "rowDblClick";
+  EMITEVENTS2["ROW_DBL_CLICK"] = "rowDblclick";
   EMITEVENTS2["ROW_EXPAND_CLICK"] = "rowExpand";
   EMITEVENTS2["PAGE_LIMIT_CHANGE"] = "pageLimitChange";
   EMITEVENTS2["PAGE_VALUE_CHANGE"] = "pageValueChange";
@@ -15508,7 +15594,7 @@ const EMIT_EVENT_TYPES = {
   ["columnFilter"]: EMPTY$1,
   ["columnSort"]: EMPTY$1,
   ["rowClick"]: EMPTY$1,
-  ["rowDblClick"]: EMPTY$1,
+  ["rowDblclick"]: EMPTY$1,
   ["rowExpand"]: EMPTY$1,
   ["pageLimitChange"]: EMPTY$1,
   ["pageValueChange"]: EMPTY$1,
@@ -16177,19 +16263,13 @@ var BodyEmpty = defineComponent({
     emptyText: PropTypes.string.def("\u6682\u65E0\u6570\u636E")
   },
   emits: ["change"],
-  setup(props2, {
-    slots
-  }) {
+  setup(props2) {
     const type = computed(() => props2.list.length === 0 ? "empty" : "search-empty");
     return () => createVNode(BkException, {
       "scene": "part",
-      "type": type.value
-    }, {
-      default: () => {
-        var _a, _b;
-        return [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : props2.emptyText];
-      }
-    });
+      "type": type.value,
+      "description": props2.emptyText
+    }, null);
   }
 });
 const resolvePropVal = (prop, key2, args) => {
@@ -16940,14 +17020,14 @@ class TableRender {
     Object.assign(this.props.pagination, {
       limit
     });
-    this.context.emit("pageLimitChange", limit);
+    this.context.emit(EMITEVENTS.PAGE_LIMIT_CHANGE, limit);
   }
   hanlePageChange(current) {
     Object.assign(this.props.pagination, {
       current,
       value: current
     });
-    this.context.emit("pageValueChange", current);
+    this.context.emit(EMITEVENTS.PAGE_VALUE_CHANGE, current);
   }
   setColumnActive(index, single = false) {
     const col = this.propActiveCols.find((item) => item.index === index);
@@ -16965,7 +17045,7 @@ class TableRender {
   handleColumnHeadClick(index) {
     if (this.props.columnPick !== "disabled") {
       this.setColumnActive(index, this.props.columnPick === "single");
-      this.context.emit("column-pick", this.propActiveCols);
+      this.context.emit(EMITEVENTS.COLUMN_PICK, this.propActiveCols);
     }
   }
   getSortCell(column, index) {
@@ -17120,10 +17200,10 @@ class TableRender {
     }
   }
   handleRowClick(e, row, index, rows) {
-    this.context.emit("rowClick", e, row, index, rows, this);
+    this.context.emit(EMITEVENTS.ROW_CLICK, e, row, index, rows, this);
   }
   handleRowDblClick(e, row, index, rows) {
-    this.context.emit("rowDblClick", e, row, index, rows, this);
+    this.context.emit(EMITEVENTS.ROW_DBL_CLICK, e, row, index, rows, this);
   }
   getExpandCell(row) {
     const isExpand = !!row[TABLE_ROW_ATTRIBUTE.ROW_EXPAND];
@@ -17830,11 +17910,9 @@ function useFlatList(props2) {
     displayKey,
     list
   } = toRefs(props2);
-  const state = reactive({
-    flatList: []
-  });
+  const flatList = reactive([]);
   watch([useGroup, saveKey, displayKey, list], () => {
-    state.flatList = [];
+    flatList.splice(0, flatList.length);
     let formatList = list.value;
     if (useGroup.value) {
       formatList = list.value.reduce((formatList2, item) => {
@@ -17850,9 +17928,17 @@ function useFlatList(props2) {
         return formatList2.concat(children);
       }, []);
     }
-    state.flatList = [...formatList];
+    appendToTargetList(formatList);
   }, { immediate: true, deep: true });
-  return state.flatList;
+  function appendToTargetList(targetList) {
+    const QUANTUM = 3e4;
+    const len = targetList.length;
+    for (let i2 = 0; i2 < len; i2 += QUANTUM) {
+      const appendList = targetList.slice(i2, Math.min(i2 + QUANTUM, len));
+      flatList.push(...appendList);
+    }
+  }
+  return flatList;
 }
 const getCharLength = (str) => {
   const len = str.length;
@@ -18019,7 +18105,9 @@ var Component$c = defineComponent({
     }));
     watch([() => [...props2.modelValue], () => [...props2.list]], () => {
       var _a;
-      initData();
+      nextTick(() => {
+        initData();
+      });
       if (props2.withValidate) {
         (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
       }
@@ -26108,9 +26196,10 @@ const BkDropdown = withInstallProps(Dropdown, { DropdownMenu, DropdownItem });
 var CascaderPanel = defineComponent({
   name: "CascaderPanel",
   props: {
-    store: PropTypes.object.def({})
+    store: PropTypes.object.def({}),
+    modelValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.arrayOf(PropTypes.string).def([])])
   },
-  emits: ["input"],
+  emits: ["update:modelValue"],
   setup(props2, {
     emit
   }) {
@@ -26122,24 +26211,25 @@ var CascaderPanel = defineComponent({
     });
     const activePath = ref([]);
     const checkValue = ref([]);
-    const nodeCheckHandler = (node) => {
-      if (node.config.multiple) {
-        checkValue.value = store.getCheckedNodes().map((node2) => node2.path);
-      } else {
-        checkValue.value = node.path;
+    const updateCheckValue = (value) => {
+      if (value.length === 0) {
+        menus.list = menus.list.slice(0, 1);
+        activePath.value = [];
       }
-      emit("input", checkValue.value);
-    };
-    const nodeClear = () => {
-      emit("input", []);
-    };
-    const syncCheckedValue = (value) => {
       value.forEach((id) => {
         const node = store.getNodeById(id);
         nodeExpandHandler(node);
       });
       checkValue.value = value;
     };
+    const nodeCheckHandler = (node) => {
+      if (node.config.multiple) {
+        checkValue.value = store.getCheckedNodes().map((node2) => node2.path);
+      } else {
+        checkValue.value = node.path;
+      }
+      emit("update:modelValue", checkValue.value);
+    };
     const nodeExpandHandler = (node) => {
       var _a;
       if (node.isDisabled)
@@ -26204,6 +26294,11 @@ var CascaderPanel = defineComponent({
     }, null) : createVNode(angleRight, {
       "class": "icon-angle-right"
     }, null);
+    watch(() => props2.modelValue, (value) => {
+      updateCheckValue(value);
+    }, {
+      immediate: true
+    });
     return {
       menus,
       activePath,
@@ -26212,10 +26307,8 @@ var CascaderPanel = defineComponent({
       nodeEvent,
       isCheckedNode,
       checkValue,
-      nodeClear,
       checkNode,
-      iconRender,
-      syncCheckedValue
+      iconRender
     };
   },
   render() {
@@ -26375,13 +26468,18 @@ var Component$6 = defineComponent({
     const panelShow = ref(false);
     const selectedText = ref("");
     const selectedTags = ref([]);
-    const checkedValue = ref(props2.modelValue);
+    const {
+      modelValue
+    } = toRefs(props2);
     const cascaderPanel = ref();
-    watch(() => props2.modelValue, (value) => {
-      updateValue(value);
+    const checkedValue = computed({
+      get: () => modelValue.value,
+      set: (value) => {
+        emit("update:modelValue", value);
+      }
     });
+    const popover3 = ref(null);
     const updateValue = (val) => {
-      cascaderPanel.value.syncCheckedValue(val);
       if (multiple) {
         selectedTags.value = store.getCheckedNodes().map((node) => ({
           text: node.pathNames.join(separator2),
@@ -26396,17 +26494,13 @@ var Component$6 = defineComponent({
         selectedText.value = node.pathNames.join(separator2);
       }
     };
-    const inputChangeHandler = (val) => {
-      updateValue(val);
-      emit("update:modelValue", val);
-      emit("change", val);
-    };
     const hidePopover = () => {
       panelShow.value = false;
     };
     const handleClear = (e) => {
       e.stopPropagation();
       updateValue([]);
+      emit("update:modelValue", []);
       emit("clear", JSON.parse(JSON.stringify(props2.modelValue)));
     };
     const inputClickHandler = (e) => {
@@ -26420,6 +26514,15 @@ var Component$6 = defineComponent({
       current.splice(index, 1);
       updateValue(current);
     };
+    watch(() => props2.modelValue, (value) => {
+      var _a;
+      updateValue(value);
+      (_a = popover3 == null ? void 0 : popover3.value) == null ? void 0 : _a.handlePopShow(false);
+      emit("update:modelValue", value);
+      emit("change", value);
+    }, {
+      immediate: true
+    });
     return {
       store,
       updateValue,
@@ -26431,10 +26534,10 @@ var Component$6 = defineComponent({
       handleClear,
       isHover,
       setHover,
+      popover: popover3,
       cancelHover,
       selectedTags,
       removeTag,
-      inputChangeHandler,
       cascaderPanel
     };
   },
@@ -26468,7 +26571,8 @@ var Component$6 = defineComponent({
     return createVNode("div", {
       "class": ["bk-cascader", "bk-cascader-wrapper", this.extCls, {
         "bk-is-show-panel": this.panelShow,
-        "is-unselected": this.modelValue.length === 0
+        "is-unselected": this.modelValue.length === 0,
+        "is-hover": this.isHover
       }],
       "tabindex": "0",
       "data-placeholder": this.placeholder,
@@ -26482,6 +26586,7 @@ var Component$6 = defineComponent({
       "class": "bk-cascader-popover-wrapper",
       "isShow": this.panelShow,
       "onUpdate:isShow": ($event) => this.panelShow = $event,
+      "ref": "popover",
       "boundary": "body"
     }, {
       default: () => createVNode("div", {
@@ -26497,7 +26602,8 @@ var Component$6 = defineComponent({
       }, [createVNode(CascaderPanel, {
         "store": this.store,
         "ref": "cascaderPanel",
-        "onInput": (val) => this.inputChangeHandler(val)
+        "modelValue": this.checkedValue,
+        "onUpdate:modelValue": ($event) => this.checkedValue = $event
       }, null)])
     })]);
   }