bkui-vue 0.0.1-beta.25 → 0.0.1-beta.28

package/dist/bkui-vue.cjs.js

@@ -80,6 +80,8 @@ var virtualRender$1 = "";
 var transfer = "";
 var pagination = "";
 var timeline = "";
+var resizeLayout = "";
+var tagInput = "";
 const BKLAYERD_INDEX_EFAULT_VALUE = {
   ["bottom"]: 0,
   ["content"]: 1,
@@ -9528,8 +9530,9 @@ var Component$g = vue.defineComponent({
       };
     });
     const handleManualShow = (val) => {
+      var _a, _b;
       if (trigger.value === "manual" && isPopInstance) {
-        val ? popoverInstance.show() : popoverInstance.hide();
+        val ? (_a = popoverInstance.show) == null ? void 0 : _a.call(popoverInstance) : (_b = popoverInstance.hide) == null ? void 0 : _b.call(popoverInstance);
       }
     };
     vue.watch(() => props.isShow, (val) => {
@@ -9606,7 +9609,7 @@ var Component$g = vue.defineComponent({
             "ref": refContent,
             "class": contentClass,
             "style": compStyle.value
-          }, customTheme), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2 && vue.createVNode("div", {
+          }, customTheme), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2.value && vue.createVNode("div", {
             "class": "arrow",
             "data-popper-arrow": true
           }, null)])];
@@ -10358,22 +10361,79 @@ function useHover() {
     cancelHover
   };
 }
-function useDebouncedRef(value, delay = 200) {
+function useRegistry(data2) {
+  const register = (item) => {
+    if (!item)
+      return;
+    return data2.value.add(item);
+  };
+  const unregister = (item) => data2.value.delete(item);
+  return {
+    register,
+    unregister
+  };
+}
+function useDebouncedRef$1(value, delay = 200) {
   let timeout;
+  let innerValue = value;
   return vue.customRef((track, trigger) => ({
     get() {
       track();
-      return value;
+      return innerValue;
     },
     set(newValue) {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        value = newValue;
+        innerValue = newValue;
         trigger();
       }, delay);
     }
   }));
 }
+function usePopover(config) {
+  const { popoverMinWidth } = config;
+  const popperWidth = vue.ref("auto");
+  const isPopoverShow = vue.ref(false);
+  const onPopoverFirstUpdate = (instance) => {
+    const { reference: reference2 } = instance.elements;
+    popperWidth.value = Math.max(reference2.offsetWidth, popoverMinWidth);
+  };
+  const togglePopover = () => {
+    isPopoverShow.value = !isPopoverShow.value;
+  };
+  const hidePopover = () => {
+    isPopoverShow.value = false;
+  };
+  const showPopover = () => {
+    isPopoverShow.value = true;
+  };
+  return {
+    isPopoverShow,
+    popperWidth,
+    togglePopover,
+    onPopoverFirstUpdate,
+    hidePopover,
+    showPopover
+  };
+}
+function useRemoteSearch(method) {
+  const searchKey = useDebouncedRef$1("");
+  const searchLoading = vue.ref(false);
+  vue.watch(searchKey, async () => {
+    searchLoading.value = true;
+    await method(searchKey.value);
+    searchLoading.value = false;
+  });
+  return {
+    searchKey,
+    searchLoading
+  };
+}
+function toLowerCase(value = "") {
+  if (!value)
+    return value;
+  return String(value).trim().toLowerCase();
+}
 var BkOption = vue.defineComponent({
   name: "Option",
   props: {
@@ -10389,28 +10449,12 @@ var BkOption = vue.defineComponent({
       visible: true
     });
     const {
-      disabled,
-      label
+      disabled
     } = vue.toRefs(props);
     const select2 = vue.inject(selectKey, null);
     const group = vue.inject(optionGroupKey, null);
     const selected = vue.computed(() => select2.selectedOptions.has(proxy));
     const multiple = vue.computed(() => select2 == null ? void 0 : select2.props.multiple);
-    vue.watchEffect(() => {
-      var _a;
-      if (group == null ? void 0 : group.groupCollapse) {
-        states.visible = false;
-      } else if (!(select2 == null ? void 0 : select2.isRemoteSearch) && (select2 == null ? void 0 : select2.searchKey)) {
-        states.visible = (_a = toLowerCase(String(label.value))) == null ? void 0 : _a.includes(toLowerCase(select2 == null ? void 0 : select2.searchKey));
-      } else {
-        states.visible = true;
-      }
-    });
-    const toLowerCase = (value = "") => {
-      if (!value)
-        return value;
-      return String(value).trim().toLowerCase();
-    };
     const handleOptionClick = () => {
       if (disabled.value)
         return;
@@ -10418,9 +10462,11 @@ var BkOption = vue.defineComponent({
     };
     vue.onBeforeMount(() => {
       select2 == null ? void 0 : select2.register(proxy);
+      group == null ? void 0 : group.register(proxy);
     });
     vue.onBeforeUnmount(() => {
       select2 == null ? void 0 : select2.unregister(proxy);
+      group == null ? void 0 : group.unregister(proxy);
     });
     return __spreadProps(__spreadValues({}, vue.toRefs(states)), {
       selected,
@@ -10454,41 +10500,38 @@ var OptionGroup = vue.defineComponent({
   setup(props, {
     emit
   }) {
-    const children = vue.ref([]);
-    const instance = vue.getCurrentInstance();
+    const {
+      proxy
+    } = vue.getCurrentInstance();
+    const select2 = vue.inject(selectKey, null);
     const states = vue.reactive({
       groupCollapse: props.collapse,
       visible: true
     });
-    const groupLabel = vue.computed(() => `${props.label} (${children.value.filter((option) => option.visible).length})`);
-    vue.provide(optionGroupKey, vue.reactive(__spreadProps(__spreadValues({}, vue.toRefs(props)), {
-      groupCollapse: vue.toRef(states, "groupCollapse")
-    })));
-    const flattedChildren = (node) => {
-      const children2 = [];
-      if (Array.isArray(node.children)) {
-        node.children.forEach((child) => {
-          var _a;
-          if (child.type && child.type.name === "Option" && child.component && child.component.proxy) {
-            children2.push(child.component.proxy);
-          } else if ((_a = child.children) == null ? void 0 : _a.length) {
-            children2.push(...flattedChildren(child));
-          }
-        });
-      }
-      return children2;
-    };
+    const options = vue.ref(/* @__PURE__ */ new Set());
+    const {
+      register,
+      unregister
+    } = useRegistry(options);
+    const groupLabel = vue.computed(() => `${props.label} (${[...options.value.values()].filter((option) => option.visible).length})`);
     const handleToggleCollapse = () => {
-      if (!props.collapsible)
+      if (!props.collapsible || props.disabled)
         return;
       states.groupCollapse = !states.groupCollapse;
       emit("update:collapse", states.groupCollapse);
     };
-    vue.onMounted(() => {
-      children.value = flattedChildren(instance.subTree);
+    vue.provide(optionGroupKey, vue.reactive(__spreadProps(__spreadValues({}, vue.toRefs(props)), {
+      register,
+      unregister,
+      groupCollapse: vue.toRef(states, "groupCollapse")
+    })));
+    vue.onBeforeMount(() => {
+      select2 == null ? void 0 : select2.registerGroup(proxy);
+    });
+    vue.onBeforeUnmount(() => {
+      select2 == null ? void 0 : select2.unregisterGroup(proxy);
     });
     return __spreadProps(__spreadValues({}, vue.toRefs(states)), {
-      children,
       groupLabel,
       handleToggleCollapse
     });
@@ -10497,7 +10540,8 @@ var OptionGroup = vue.defineComponent({
     var _a, _b;
     const groupClass = classes({
       "bk-option-group": true,
-      collapsible: this.collapsible
+      collapsible: this.collapsible,
+      disabled: this.disabled
     });
     const groupLabelClass = classes({
       "bk-option-group-label": true,
@@ -10514,13 +10558,13 @@ var OptionGroup = vue.defineComponent({
       "onClick": this.handleToggleCollapse
     }, [this.$slots.label ? this.$slots.label() : vue.createVNode("span", {
       "class": "default-group-label"
-    }, [this.collapsible ? vue.createVNode(angleUpFill, {
+    }, [this.collapsible && vue.createVNode(angleUpFill, {
       "class": groupLabelIconClass
-    }, null) : null, vue.createVNode("span", {
+    }, null), vue.createVNode("span", {
       "class": "default-group-label-title"
-    }, [this.groupLabel])])]), vue.createVNode("ul", {
+    }, [this.groupLabel])])]), vue.withDirectives(vue.createVNode("ul", {
       "class": "bk-option-group-content"
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]), [[vue.vShow, this.visible]]);
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vue.vShow, !this.groupCollapse]])]), [[vue.vShow, this.visible]]);
   }
 });
 var _populated = false;
@@ -10922,6 +10966,69 @@ function createPopperInstance(el, popper2, options) {
   }
 }
 var Component$b = vue.defineComponent({
+  name: "Tag",
+  props: {
+    theme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
+    closable: PropTypes.bool.def(false),
+    type: PropTypes.commonType(["", "filled", "stroke"]).def(""),
+    checkable: PropTypes.bool.def(false),
+    checked: PropTypes.bool.def(false),
+    radius: PropTypes.string.def("2px"),
+    extCls: PropTypes.string.def("")
+  },
+  emits: ["change", "close"],
+  slots: ["icon"],
+  setup(props, {
+    emit
+  }) {
+    const wrapperCls = vue.computed(() => classes({
+      "bk-tag-closable": props.closable,
+      "bk-tag-checkable": props.checkable,
+      "bk-tag-check": props.checked,
+      [`bk-tag-${props.type}`]: props.type,
+      [`bk-tag-${props.theme}`]: props.theme,
+      [props.extCls]: !!props.extCls
+    }, "bk-tag"));
+    const wrapperStyle = vue.computed(() => ({
+      borderRadius: props.radius
+    }));
+    const handleClose = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      emit("close", e);
+    };
+    const handleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (props.checkable) {
+        emit("change", !props.checked);
+      }
+    };
+    return {
+      wrapperCls,
+      wrapperStyle,
+      handleClose,
+      handleClick
+    };
+  },
+  render() {
+    var _a, _b;
+    return vue.createVNode("div", {
+      "class": this.wrapperCls,
+      "style": this.wrapperStyle,
+      "onClick": this.handleClick
+    }, [this.$slots.icon ? vue.createVNode("span", {
+      "class": "bk-tag-icon"
+    }, [this.$slots.icon()]) : "", vue.createVNode("span", {
+      "class": "bk-tag-text"
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.closable ? vue.createVNode(error, {
+      "class": "bk-tag-close",
+      "onClick": this.handleClose
+    }, null) : ""]);
+  }
+});
+const BkTag = withInstall(Component$b);
+var Component$a = vue.defineComponent({
   name: "Select",
   directives: {
     clickoutside: ClickOutside
@@ -10929,43 +11036,84 @@ var Component$b = vue.defineComponent({
   props: {
     modelValue: PropTypes.any,
     multiple: PropTypes.bool.def(false),
-    placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
     disabled: PropTypes.bool.def(false),
-    size: PropTypes.size().def("small"),
+    size: PropTypes.size().def("default"),
     clearable: PropTypes.bool.def(true),
     loading: PropTypes.bool.def(false),
     filterable: PropTypes.bool.def(false),
     remoteMethod: PropTypes.func,
-    scrollHeight: PropTypes.number.def(216)
+    scrollHeight: PropTypes.number.def(216),
+    showSelectAll: PropTypes.bool.def(false),
+    popoverMinWidth: PropTypes.number.def(0),
+    showOnInit: PropTypes.bool.def(false),
+    multipleMode: PropTypes.oneOf(["default", "tag"]).def("default"),
+    tagTheme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
+    behavior: PropTypes.oneOf(["normal", "simplicity"]).def("normal"),
+    collapseTags: PropTypes.bool.def(false),
+    noDataText: PropTypes.string.def("\u65E0\u6570\u636E"),
+    noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
+    loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
+    placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
+    selectAllText: PropTypes.string.def("\u5168\u90E8")
   },
-  emits: ["update:modelValue", "change", "toggle"],
+  emits: ["update:modelValue", "change", "toggle", "clear"],
   setup(props, {
     emit
   }) {
     const {
       modelValue,
       disabled,
-      size,
       filterable,
       placeholder,
       multiple,
       remoteMethod,
-      loading: loading2
+      loading: loading2,
+      loadingText,
+      noDataText,
+      noMatchText,
+      popoverMinWidth,
+      showOnInit
     } = vue.toRefs(props);
     const states = vue.reactive({
       currentPlaceholder: placeholder.value,
-      options: /* @__PURE__ */ new Set(),
       selectedOptions: /* @__PURE__ */ new Set(),
       currentSelectedLabel: ""
     });
-    const selectTriggerRef = vue.ref();
     const inputRef = vue.ref();
-    const register = (option) => {
-      if (!option)
-        return;
-      return states.options.add(option);
-    };
-    const unregister = (option) => states.options.delete(option);
+    const popoverRef = vue.ref();
+    const options = vue.ref(/* @__PURE__ */ new Set());
+    const groups = vue.ref(/* @__PURE__ */ new Set());
+    const isDisabled = vue.computed(() => disabled.value || loading2.value);
+    const selectedLabel = vue.computed(() => [...states.selectedOptions.values()].map((option) => option.label));
+    const isAllSelected = vue.computed(() => [...options.value.values()].filter((option) => !option.disabled).every((option) => states.selectedOptions.has(option)));
+    const isGroup = vue.computed(() => !!groups.value.size);
+    const isOptionsEmpty = vue.computed(() => !options.value.size);
+    const isSearchEmpty = vue.computed(() => {
+      const data2 = [...options.value.values()];
+      return data2.length && data2.every((option) => !option.visible);
+    });
+    const isRemoteSearch = vue.computed(() => typeof remoteMethod.value === "function");
+    const isShowSelectContent = vue.computed(() => !(searchLoading.value || isOptionsEmpty.value || isSearchEmpty.value));
+    const curContentText = vue.computed(() => {
+      if (searchLoading.value) {
+        return loadingText.value;
+      }
+      if (isOptionsEmpty.value) {
+        return noDataText.value;
+      }
+      if (isSearchEmpty.value) {
+        return noMatchText.value;
+      }
+      return "";
+    });
+    const {
+      register,
+      unregister
+    } = useRegistry(options);
+    const {
+      register: registerGroup,
+      unregister: unregisterGroup
+    } = useRegistry(groups);
     const {
       isHover,
       setHover,
@@ -10976,63 +11124,63 @@ var Component$b = vue.defineComponent({
       handleFocus,
       handleBlur
     } = useFocus();
-    const handleInput = (e) => {
-      searchKey.value = e.target.value;
-    };
-    const isDisabled = vue.computed(() => disabled.value || loading2.value);
-    const selectClass = vue.computed(() => ({
-      "bk-select": true,
-      "popover-show": isPopoverShow.value,
-      "is-disabled": isDisabled.value,
-      "is-focus": isFocus.value,
-      [size.value]: true
-    }));
-    const selectedLabel = vue.computed(() => [...states.selectedOptions.values()].map((option) => option.label).join(","));
-    const popperWidth = vue.ref("auto");
-    const onPopoverFirstUpdate = (instance) => {
-      const {
-        reference: reference2
-      } = instance.elements;
-      popperWidth.value = reference2.offsetWidth;
-    };
-    const isPopoverShow = vue.ref(false);
-    const toggleMenu = () => {
-      if (isDisabled.value)
-        return;
-      isPopoverShow.value = !isPopoverShow.value;
-      emit("toggle", isPopoverShow.value);
-    };
-    const hidePopover = () => {
-      isPopoverShow.value = false;
-      handleBlur();
-    };
-    const showPopover = () => {
-      isPopoverShow.value = true;
-    };
-    vue.watch(isPopoverShow, () => {
-      handleResetState();
+    const {
+      popperWidth,
+      isPopoverShow,
+      onPopoverFirstUpdate,
+      hidePopover,
+      showPopover,
+      togglePopover
+    } = usePopover({
+      popoverMinWidth: popoverMinWidth.value
     });
-    const handleResetState = () => {
-      if (!isRemoteSearch.value || isRemoteSearch.value && !isPopoverShow.value) {
-        searchKey.value = "";
-      }
+    const defaultSearchMethod = (value) => {
+      options.value.forEach((option) => {
+        var _a;
+        option.visible = (_a = toLowerCase(String(option.label))) == null ? void 0 : _a.includes(toLowerCase(value));
+      });
+    };
+    const {
+      searchKey,
+      searchLoading
+    } = useRemoteSearch(isRemoteSearch.value ? remoteMethod.value : defaultSearchMethod);
+    const handleResetInputValue = () => {
+      const label = selectedLabel.value.join(",");
       if (filterable.value && isPopoverShow.value) {
-        states.currentPlaceholder = selectedLabel.value || placeholder.value;
+        states.currentPlaceholder = label || placeholder.value;
         states.currentSelectedLabel = "";
       } else {
         states.currentPlaceholder = placeholder.value;
-        states.currentSelectedLabel = selectedLabel.value;
+        states.currentSelectedLabel = label;
+        searchKey.value = "";
       }
     };
+    vue.watch(isPopoverShow, () => {
+      handleResetInputValue();
+    });
     const emitChange = (val) => {
       if (val === modelValue.value)
         return;
       emit("change", val);
       emit("update:modelValue", val);
     };
-    const handleOptionSelected = (option) => {
+    const handleTogglePopover = () => {
       if (isDisabled.value)
         return;
+      togglePopover();
+      emit("toggle", isPopoverShow.value);
+    };
+    const handleInput = (e) => {
+      searchKey.value = e.target.value;
+    };
+    const selectedCallback = () => {
+      inputRef.value.focus();
+      popoverRef.value.update();
+      !searchKey.value && handleResetInputValue();
+    };
+    const handleOptionSelected = (option) => {
+      if (isDisabled.value || !option)
+        return;
       if (multiple.value) {
         if (states.selectedOptions.has(option)) {
           states.selectedOptions.delete(option);
@@ -11046,129 +11194,195 @@ var Component$b = vue.defineComponent({
         emitChange(option.value);
         hidePopover();
       }
-      inputRef.value.focus();
-      handleResetState();
+      selectedCallback();
     };
     const handleClear = (e) => {
       e.stopPropagation();
       states.selectedOptions.clear();
-      emitChange(multiple.value ? [] : "");
       hidePopover();
-      handleResetState();
+      handleResetInputValue();
+      emitChange(multiple.value ? [] : "");
+      emit("clear", multiple.value ? [] : "");
     };
-    const searchKey = useDebouncedRef("");
-    const isRemoteSearch = vue.computed(() => typeof remoteMethod.value === "function");
-    const searchLoading = vue.ref(false);
-    vue.watchEffect(async () => {
-      if (!isRemoteSearch.value || !isPopoverShow.value || !searchKey.value)
-        return;
-      try {
-        searchLoading.value = true;
-        await remoteMethod.value(searchKey.value);
-      } catch (e) {
-        console.error(e);
-      } finally {
-        searchLoading.value = false;
+    const handleToggleAll = () => {
+      if (isAllSelected.value) {
+        states.selectedOptions.clear();
+      } else {
+        options.value.forEach((option) => {
+          if (option.disabled || states.selectedOptions.has(option))
+            return;
+          states.selectedOptions.add(option);
+        });
       }
-    });
-    const isEmpty2 = vue.computed(() => [...states.options.values()].every((option) => !option.visible));
+      selectedCallback();
+      emitChange([...states.selectedOptions.values()].map((option) => option.value));
+    };
+    const handleClickOutside = () => {
+      hidePopover();
+      handleBlur();
+    };
     vue.provide(selectKey, vue.reactive({
       props,
-      searchKey,
       selectedOptions: vue.unref(states.selectedOptions),
-      isRemoteSearch,
       register,
       unregister,
+      registerGroup,
+      unregisterGroup,
       handleOptionSelected
     }));
     vue.onMounted(() => {
       const initializeValue = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value];
-      states.options.forEach((option) => {
+      options.value.forEach((option) => {
         if (initializeValue.includes(option.value)) {
           states.selectedOptions.add(option);
         }
       });
-      handleResetState();
+      handleResetInputValue();
+      setTimeout(() => {
+        showOnInit.value && showPopover();
+      });
     });
     return __spreadProps(__spreadValues({}, vue.toRefs(states)), {
+      options,
+      isDisabled,
       selectedLabel,
-      selectClass,
       isPopoverShow,
       isHover,
       popperWidth,
-      selectTriggerRef,
+      popoverRef,
       inputRef,
-      searchKey,
       searchLoading,
-      isEmpty: isEmpty2,
+      isOptionsEmpty,
+      isSearchEmpty,
       isFocus,
+      isShowSelectContent,
+      curContentText,
+      isGroup,
+      searchKey,
       setHover,
       cancelHover,
       handleFocus,
       handleInput,
-      toggleMenu,
+      handleTogglePopover,
       handleClear,
       onPopoverFirstUpdate,
       hidePopover,
-      showPopover
+      showPopover,
+      handleToggleAll,
+      handleOptionSelected,
+      handleClickOutside
     });
   },
   render() {
+    const selectClass = classes({
+      "bk-select": true,
+      "popover-show": this.isPopoverShow,
+      "is-disabled": this.isDisabled,
+      "is-focus": this.isFocus,
+      "is-filterable": this.filterable,
+      [this.size]: true,
+      [this.behavior]: true
+    });
     const modifiers = [{
       name: "offset",
       options: {
         offset: [0, 4]
       }
     }];
-    const renderSelectRightIcon = () => {
-      if (this.loading) {
-        return vue.createVNode(spinner, {
-          "class": "spinner"
-        }, null);
-      }
-      if (this.clearable && this.isHover) {
-        return vue.createVNode(close$1, {
-          "class": "clear-icon",
-          "onClick": this.handleClear
+    const renderSelectTrigger = () => {
+      var _a, _b;
+      const suffixIcon = () => {
+        if (this.loading) {
+          return vue.createVNode(BkLoading, {
+            "class": "spinner",
+            "mode": "spin",
+            "size": "mini"
+          }, null);
+        }
+        if (this.clearable && this.isHover) {
+          return vue.createVNode(close$1, {
+            "class": "clear-icon",
+            "onClick": this.handleClear
+          }, null);
+        }
+        return vue.createVNode(angleUp, {
+          "class": "angle-up"
         }, null);
-      }
-      return vue.createVNode(angleUp, {
-        "class": "angle-up"
-      }, null);
-    };
-    const renderEmptySelect = () => {
-      if (this.searchLoading) {
-        return vue.withDirectives(vue.createVNode("div", {
-          "class": "bk-select-empty"
-        }, [vue.createVNode(spinner, {
-          "class": "spinner"
-        }, null), vue.createTextVNode("\u52A0\u8F7D\u4E2D...")]), [[vue.vShow, this.searchLoading]]);
-      }
-      if (this.isEmpty) {
-        return vue.withDirectives(vue.createVNode("div", {
-          "class": "bk-select-empty"
-        }, [vue.createTextVNode("\u65E0\u5339\u914D\u6570\u636E")]), [[vue.vShow, this.isEmpty]]);
-      }
-      return null;
+      };
+      const renderTriggerInput = () => {
+        if (this.multipleMode === "tag") {
+          return vue.createVNode("div", {
+            "class": "bk-select-tag"
+          }, [[...this.selectedOptions.values()].map((option) => vue.createVNode(BkTag, {
+            "closable": true,
+            "style": {
+              marginTop: "3px"
+            },
+            "theme": this.tagTheme,
+            "onClose": () => this.handleOptionSelected(option)
+          }, {
+            default: () => [option.label]
+          })), vue.withDirectives(vue.createVNode("input", {
+            "class": "bk-select-tag-input",
+            "ref": "inputRef",
+            "type": "text",
+            "placeholder": !this.selectedOptions.size ? this.placeholder : "",
+            "readonly": !this.filterable || !this.isPopoverShow,
+            "onUpdate:modelValue": ($event) => this.searchKey = $event,
+            "onFocus": this.handleFocus
+          }, null), [[vue.vModelText, this.searchKey]])]);
+        }
+        return vue.withDirectives(vue.createVNode("input", {
+          "ref": "inputRef",
+          "type": "text",
+          "class": "bk-select-input",
+          "style": {
+            paddingLeft: this.$slots.prefixIcon ? "20px" : "10px"
+          },
+          "onUpdate:modelValue": ($event) => this.currentSelectedLabel = $event,
+          "placeholder": this.currentPlaceholder,
+          "readonly": !this.filterable || !this.isPopoverShow,
+          "onFocus": this.handleFocus,
+          "onInput": this.handleInput
+        }, null), [[vue.vModelText, this.currentSelectedLabel]]);
+      };
+      return vue.createVNode("div", {
+        "class": "bk-select-trigger",
+        "onClick": this.handleTogglePopover,
+        "onMouseenter": this.setHover,
+        "onMouseleave": this.cancelHover
+      }, [this.$slots.prefixIcon ? vue.createVNode("span", {
+        "class": "bk-select-prefix"
+      }, [(_b = (_a = this.$slots).prefixIcon) == null ? void 0 : _b.call(_a)]) : null, renderTriggerInput(), suffixIcon()]);
     };
     const renderSelectContent = () => {
       var _a, _b;
-      return vue.createVNode("div", null, [renderEmptySelect(), vue.withDirectives(vue.createVNode("div", {
+      return vue.createVNode("div", null, [!this.isShowSelectContent && vue.createVNode("div", {
+        "class": "bk-select-empty"
+      }, [this.searchLoading && vue.createVNode(BkLoading, {
+        "class": "mr5",
+        "mode": "spin",
+        "size": "mini"
+      }, null), this.curContentText]), vue.createVNode("div", {
         "class": "bk-select-content"
       }, [vue.createVNode("div", {
         "class": "bk-select-dropdown",
         "style": {
           maxHeight: `${this.scrollHeight}px`
         }
-      }, [vue.createVNode("ul", {
+      }, [vue.withDirectives(vue.createVNode("ul", {
         "class": "bk-select-options"
-      }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]), this.$slots.extension ? vue.createVNode("div", {
+      }, [this.multiple && this.showSelectAll && !this.searchKey && vue.createVNode("li", {
+        "class": "bk-select-option",
+        "onClick": this.handleToggleAll
+      }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vue.vShow, this.isShowSelectContent]])]), this.$slots.extension && vue.createVNode("div", {
         "class": "bk-select-extension"
-      }, [this.$slots.extension()]) : null]), [[vue.vShow, !this.searchLoading && !this.isEmpty]])]);
+      }, [this.$slots.extension()])])]);
     };
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.selectClass
+      "class": selectClass
     }, [vue.createVNode(BkPopover, {
+      "ref": "popoverRef",
       "theme": "light",
       "trigger": "manual",
       "width": this.popperWidth,
@@ -11178,35 +11392,12 @@ var Component$b = vue.defineComponent({
       "modifiers": modifiers,
       "handleFirstUpdate": this.onPopoverFirstUpdate
     }, {
-      default: () => {
-        var _a, _b;
-        return vue.createVNode("div", {
-          "class": "bk-select-trigger",
-          "ref": "selectTriggerRef",
-          "onClick": this.toggleMenu,
-          "onMouseenter": this.setHover,
-          "onMouseleave": this.cancelHover
-        }, [this.$slots.prefixIcon ? vue.createVNode("span", {
-          "class": "bk-select-prefix"
-        }, [(_b = (_a = this.$slots).prefixIcon) == null ? void 0 : _b.call(_a)]) : null, vue.withDirectives(vue.createVNode("input", {
-          "ref": "inputRef",
-          "type": "text",
-          "class": "bk-select-input",
-          "style": {
-            paddingLeft: this.$slots.prefixIcon ? "20px" : "10px"
-          },
-          "onUpdate:modelValue": ($event) => this.currentSelectedLabel = $event,
-          "placeholder": this.currentPlaceholder,
-          "readonly": !this.filterable || !this.isPopoverShow,
-          "onFocus": this.handleFocus,
-          "onInput": this.handleInput
-        }, null), [[vue.vModelText, this.currentSelectedLabel]]), renderSelectRightIcon()]);
-      },
+      default: () => renderSelectTrigger(),
       content: () => renderSelectContent()
-    })]), [[vue.resolveDirective("clickoutside"), this.hidePopover]]);
+    })]), [[vue.resolveDirective("clickoutside"), this.handleClickOutside]]);
   }
 });
-const BkSelect = withInstallProps(Component$b, { Option: BkOption, Group: OptionGroup });
+const BkSelect = withInstallProps(Component$a, { Option: BkOption, Group: OptionGroup });
 function _isSlot$1(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !vue.isVNode(s2);
 }
@@ -11216,7 +11407,7 @@ const {
 const sliderPops = Object.assign({}, propsMixin);
 sliderPops.width.default = "400";
 sliderPops.height.default = "100%";
-var Component$a = vue.defineComponent({
+var Component$9 = vue.defineComponent({
   name: "Sideslider",
   components: {
     BkModal,
@@ -11273,7 +11464,7 @@ var Component$a = vue.defineComponent({
     });
   }
 });
-const BkSideslider = withInstall(Component$a);
+const BkSideslider = withInstall(Component$9);
 const stepsProps = {
   theme: PropTypes.theme().def("primary"),
   size: PropTypes.size(),
@@ -11287,7 +11478,7 @@ const stepsProps = {
   steps: PropTypes.array.def([]),
   beforeChange: PropTypes.func
 };
-var Component$9 = vue.defineComponent({
+var Component$8 = vue.defineComponent({
   name: "Steps",
   props: stepsProps,
   emits: ["update:curStep", "click"],
@@ -11423,8 +11614,8 @@ var Component$9 = vue.defineComponent({
     })]);
   }
 });
-const BkSteps = withInstall(Component$9);
-var Component$8 = vue.defineComponent({
+const BkSteps = withInstall(Component$8);
+var Component$7 = vue.defineComponent({
   name: "Switcher",
   props: {
     theme: PropTypes.theme().def(""),
@@ -11518,7 +11709,7 @@ var Component$8 = vue.defineComponent({
     }, [isChecked.value ? props.onText : props.offText]) : ""]);
   }
 });
-const BkSwitcher = withInstall(Component$8);
+const BkSwitcher = withInstall(Component$7);
 const EventProps$1 = {
   onContentScroll: Function
 };
@@ -11622,7 +11813,7 @@ var virtualRender = {
     }
   }
 };
-var Component$7 = vue.defineComponent({
+var Component$6 = vue.defineComponent({
   name: "VirtualRender",
   directives: {
     bkVirtualRender: virtualRender
@@ -11769,7 +11960,7 @@ var Component$7 = vue.defineComponent({
     };
   }
 });
-const BkVirtualRender = withInstall(Component$7);
+const BkVirtualRender = withInstall(Component$6);
 const BORDER_OPRIONS = ["none", "row", "col", "outer"];
 const EventProps = {
   onRowClick: Function
@@ -11857,27 +12048,27 @@ var useList = () => {
   const {
     proxy
   } = vue.getCurrentInstance();
-  const localCurrent = vue.ref(proxy.modelValue);
+  const localCurrent = vue.ref(1);
   const isPagePreDisabled = vue.computed(() => localCurrent.value === 1);
-  const isPageNextDisabled = vue.computed(() => localCurrent.value === proxy.pageNum);
+  const isPageNextDisabled = vue.computed(() => localCurrent.value === proxy.totalPageNum);
   const showPreBatch = vue.ref(false);
   const showNextBatch = vue.ref(false);
   const list = vue.computed(() => {
     showPreBatch.value = false;
     showNextBatch.value = false;
     const stack = [];
-    if (proxy.pageNum <= PAGE_ITEMS_NUM) {
-      for (let i2 = 2; i2 <= proxy.pageNum - 1; i2++) {
+    if (proxy.totalPageNum <= PAGE_ITEMS_NUM) {
+      for (let i2 = 2; i2 <= proxy.totalPageNum - 1; i2++) {
         stack.push(i2);
       }
       return stack;
     }
     const pageItemsNumHalf = Math.floor(PAGE_ITEMS_NUM / 2);
-    if (proxy.pageNum > PAGE_ITEMS_NUM) {
+    if (proxy.totalPageNum > PAGE_ITEMS_NUM) {
       showPreBatch.value = localCurrent.value - pageItemsNumHalf > 2;
-      showNextBatch.value = localCurrent.value + pageItemsNumHalf < proxy.pageNum - 1;
+      showNextBatch.value = localCurrent.value + pageItemsNumHalf < proxy.totalPageNum - 1;
     }
-    const start2 = Math.min(proxy.pageNum - PAGE_ITEMS_NUM, Math.max(2, localCurrent.value - pageItemsNumHalf));
+    const start2 = Math.min(proxy.totalPageNum - PAGE_ITEMS_NUM, Math.max(2, localCurrent.value - pageItemsNumHalf));
     for (let i2 = start2; i2 < start2 + PAGE_ITEMS_NUM; i2++) {
       stack.push(i2);
     }
@@ -11885,19 +12076,19 @@ var useList = () => {
   });
   vue.watch(() => proxy.modelValue, (modelValue) => {
     vue.nextTick(() => {
-      if (modelValue >= 1 && modelValue <= proxy.pageNum) {
+      if (modelValue >= 1 && modelValue <= proxy.totalPageNum) {
         localCurrent.value = modelValue;
       } else if (modelValue < 1) {
         localCurrent.value = 1;
       } else {
-        localCurrent.value = proxy.pageNum;
+        localCurrent.value = proxy.totalPageNum;
       }
     });
   });
   vue.nextTick(() => {
-    vue.watch(() => proxy.pageNum, (pageNum) => {
-      if (localCurrent.value > pageNum) {
-        localCurrent.value = pageNum;
+    vue.watch(() => proxy.totalPageNum, (totalPageNum) => {
+      if (localCurrent.value > totalPageNum) {
+        localCurrent.value = totalPageNum;
       }
     });
   });
@@ -11913,17 +12104,17 @@ var useList = () => {
     }
     localCurrent.value = localCurrent.value + 1;
   };
-  const handleItemClick = (pageNum) => {
-    if (pageNum === localCurrent.value) {
+  const handleItemClick = (totalPageNum) => {
+    if (totalPageNum === localCurrent.value) {
       return;
     }
-    localCurrent.value = pageNum;
+    localCurrent.value = totalPageNum;
   };
   const handlePreBatch = () => {
     localCurrent.value = Math.max(1, localCurrent.value - PAGE_ITEMS_NUM);
   };
   const handleNextBatch = () => {
-    localCurrent.value = Math.min(proxy.pageNum, localCurrent.value + PAGE_ITEMS_NUM);
+    localCurrent.value = Math.min(proxy.totalPageNum, localCurrent.value + PAGE_ITEMS_NUM);
   };
   const render = ({
     isFirst,
@@ -11962,14 +12153,14 @@ var useList = () => {
     "key": "next-batch",
     "class": "bk-pagination-list-next-batch",
     "onClick": handleNextBatch
-  }, [vue.createVNode(ellipsis, null, null)]), proxy.pageNum > 1 && vue.createVNode("div", {
+  }, [vue.createVNode(ellipsis, null, null)]), proxy.totalPageNum > 1 && vue.createVNode("div", {
     "class": {
       "bk-pagination-list-item": true,
-      "is-active": localCurrent.value === proxy.pageNum
+      "is-active": localCurrent.value === proxy.totalPageNum
     },
     "key": "last",
-    "onClick": () => handleItemClick(proxy.pageNum)
-  }, [proxy.pageNum]), vue.createVNode("div", {
+    "onClick": () => handleItemClick(proxy.totalPageNum)
+  }, [proxy.totalPageNum]), vue.createVNode("div", {
     "class": {
       "bk-pagination-list-pre": true,
       "is-disabled": isPageNextDisabled.value
@@ -11989,23 +12180,23 @@ var useSmallList = () => {
   const isFocused = vue.ref(false);
   const localCurrent = vue.ref(1);
   const isPagePreDisabled = vue.computed(() => localCurrent.value === 1);
-  const isPageNextDisabled = vue.computed(() => localCurrent.value === proxy.pageNum);
+  const isPageNextDisabled = vue.computed(() => localCurrent.value === proxy.totalPageNum);
   let inputMemo = 0;
   const list = vue.computed(() => {
     const stack = [];
-    for (let i2 = 1; i2 <= proxy.pageNum; i2++) {
+    for (let i2 = 1; i2 <= proxy.totalPageNum; i2++) {
       stack.push(i2);
     }
     return stack;
   });
   vue.watch(() => proxy.modelValue, (modelValue) => {
     vue.nextTick(() => {
-      if (modelValue >= 1 && modelValue <= proxy.pageNum) {
+      if (modelValue >= 1 && modelValue <= proxy.totalPageNum) {
         localCurrent.value = modelValue;
       } else if (modelValue < 1) {
         localCurrent.value = 1;
       } else {
-        localCurrent.value = proxy.pageNum;
+        localCurrent.value = proxy.totalPageNum;
       }
       inputMemo = localCurrent.value;
     });
@@ -12013,9 +12204,9 @@ var useSmallList = () => {
     immediate: true
   });
   vue.nextTick(() => {
-    vue.watch(() => proxy.pageNum, (pageNum) => {
-      if (localCurrent.value > pageNum) {
-        localCurrent.value = pageNum;
+    vue.watch(() => proxy.totalPageNum, (totalPageNum) => {
+      if (localCurrent.value > totalPageNum) {
+        localCurrent.value = totalPageNum;
       }
     });
   });
@@ -12052,7 +12243,7 @@ var useSmallList = () => {
   const handlePageEditorInput = (event) => {
     const $target = event.target;
     const value = Number($target.textContent);
-    if (!value || value < 1 || value > proxy.pageNum || value === localCurrent.value) {
+    if (!value || value < 1 || value > proxy.totalPageNum || value === localCurrent.value) {
       return;
     }
     inputMemo = value;
@@ -12100,7 +12291,7 @@ var useSmallList = () => {
       "onKeydown": handlePageEditorKeydown
     }, [localCurrent.value]), vue.createVNode("span", null, [vue.createTextVNode("/")]), vue.createVNode("span", {
       "class": "bk-pagination-small-list-total"
-    }, [proxy.pageNum])]),
+    }, [proxy.totalPageNum])]),
     content: () => vue.createVNode("div", {
       "class": "bk-pagination-picker-list"
     }, [list.value.map((item) => vue.createVNode("div", {
@@ -12169,12 +12360,12 @@ const paginationProps = {
     return value.some((item) => layoutNameMap[item]);
   }, "layout \u7684\u503C\u53EA\u652F\u6301 * total\u3001list\u3001limit *").def(["total", "list", "limit"])
 };
-var Component$6 = vue.defineComponent({
+var Component$5 = vue.defineComponent({
   name: "Pagination",
   props: paginationProps,
   emits: ["update:modelValue", "change", "update:limit", "limit-change"],
   setup(props, context) {
-    const pageNum = vue.ref(0);
+    const totalPageNum = vue.ref(0);
     const {
       count,
       limit
@@ -12193,7 +12384,8 @@ var Component$6 = vue.defineComponent({
       render: renderLimit
     } = useLimit();
     vue.watch([count, localLimit, limit], ([count2, localLimit2]) => {
-      pageNum.value = Math.ceil(count2 / localLimit2);
+      const total = Math.ceil(count2 / localLimit2);
+      totalPageNum.value = total < 1 ? 1 : total;
     }, {
       immediate: true
     });
@@ -12209,7 +12401,7 @@ var Component$6 = vue.defineComponent({
       context.emit("limit-change", localLimit2);
     });
     return {
-      pageNum,
+      totalPageNum,
       renderTotal,
       renderList,
       renderLimit,
@@ -12224,7 +12416,7 @@ var Component$6 = vue.defineComponent({
     });
     const layoutMap = {
       total: this.renderTotal,
-      list: this.renderList,
+      list: this.small ? this.renderSmallList : this.renderList,
       limit: this.renderLimit
     };
     return vue.createVNode("div", {
@@ -12232,10 +12424,10 @@ var Component$6 = vue.defineComponent({
     }, [this.layout.map((layout, index) => layoutMap[layout]({
       isFirst: index === 0,
       isLast: index === this.layout.length - 1
-    })), this.renderSmallList()]);
+    }))]);
   }
 });
-const BkPagination = withInstall(Component$6);
+const BkPagination = withInstall(Component$5);
 class TablePlugins {
   constructor(props, ctx) {
     __publicField(this, "props", null);
@@ -12500,7 +12692,7 @@ class TableRender {
     })]);
   }
 }
-var Component$5 = vue.defineComponent({
+var Component$4 = vue.defineComponent({
   name: "Table",
   props: tableProps,
   emits: ["column-pick", "row-click", "page-limit-change", "page-value-change"],
@@ -12635,68 +12827,940 @@ var Component$5 = vue.defineComponent({
     }, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
   }
 });
-const BkTable = withInstall(Component$5);
-var Component$4 = vue.defineComponent({
-  name: "Tag",
-  props: {
-    theme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
-    closable: PropTypes.bool.def(false),
-    type: PropTypes.commonType(["", "filled", "stroke"]).def(""),
-    checkable: PropTypes.bool.def(false),
-    checked: PropTypes.bool.def(false),
-    radius: PropTypes.string.def("2px"),
-    extCls: PropTypes.string.def("")
+const BkTable = withInstall(Component$4);
+const INPUT_MIN_WIDTH = 12;
+function useDebouncedRef(value, delay = 200) {
+  let timeout;
+  let innerValue = value;
+  return vue.customRef((track, trigger) => ({
+    get() {
+      track();
+      return innerValue;
+    },
+    set(newValue) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        innerValue = newValue;
+        trigger();
+      }, delay);
+    }
+  }));
+}
+function usePage(pageSize) {
+  const state = vue.reactive({
+    curPage: 1,
+    totalSize: 0,
+    totalPage: 0,
+    pageSize,
+    isPageLoading: false,
+    curPageList: [],
+    renderListPaged: []
+  });
+  const initPage = (allList = []) => {
+    state.curPage = 1;
+    state.totalSize = allList.length;
+    state.totalPage = Math.ceil(state.totalSize / state.pageSize) || 1;
+    const list = [];
+    if (state.pageSize > 0) {
+      for (let i2 = 0; i2 < state.totalSize; i2 += state.pageSize) {
+        list.push(allList.slice(i2, i2 + state.pageSize));
+      }
+    }
+    state.renderListPaged.splice(0, state.renderListPaged.length, ...list);
+    state.curPageList.splice(0, state.curPageList.length, ...state.renderListPaged[state.curPage - 1] || []);
+  };
+  const pageChange = (page) => {
+    state.curPage = page;
+    state.curPageList.splice(state.curPageList.length, 0, ...state.renderListPaged[state.curPage - 1] || []);
+    state.isPageLoading = false;
+  };
+  return {
+    pageState: state,
+    initPage,
+    pageChange
+  };
+}
+function useFlatList(props) {
+  const {
+    useGroup,
+    saveKey,
+    displayKey,
+    list
+  } = vue.toRefs(props);
+  const flatList = vue.reactive([]);
+  vue.watch([useGroup, saveKey, displayKey, list], () => {
+    let formatList = list.value;
+    if (useGroup.value) {
+      formatList = list.value.reduce((formatList2, item) => {
+        let children = [];
+        if (item.children) {
+          children = item.children.map((child) => __spreadValues({
+            group: {
+              groupId: item[saveKey.value],
+              groupName: item[displayKey.value]
+            }
+          }, child));
+        }
+        return formatList2.concat(children);
+      }, []);
+    }
+    flatList.splice(0, flatList.length, ...formatList);
+  }, { immediate: true, deep: true });
+  return flatList;
+}
+const getCharLength = (str) => {
+  const len = str.length;
+  let bitLen = 0;
+  for (let i2 = 0; i2 < len; i2++) {
+    if ((str.charCodeAt(i2) & 65280) !== 0) {
+      bitLen += 1;
+    }
+    bitLen += 1;
+  }
+  return bitLen;
+};
+var ListTagRender = vue.defineComponent({
+  name: "ListTagRender",
+  props: {
+    node: PropTypes.object,
+    searchKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    displayKey: PropTypes.string,
+    searchKeyword: PropTypes.string,
+    tpl: {
+      type: Function,
+      default: null
+    }
+  },
+  render() {
+    const highlightKeyword = (value) => {
+      if (this.searchKeyword) {
+        const keywordReg = new RegExp(`(${this.searchKeyword})`, "i");
+        return value.replace(keywordReg, '<strong class="highlight-text">$1</strong>');
+      }
+      return value;
+    };
+    if (this.tpl) {
+      return this.tpl(this.node, highlightKeyword, vue.h, this);
+    }
+    const displayText = this.node[this.displayKey];
+    return vue.createVNode("div", {
+      "class": "bk-selector-node"
+    }, [vue.createVNode("span", {
+      "class": "text",
+      "innerHTML": highlightKeyword(displayText)
+    }, [displayText])]);
+  }
+});
+const tagProps = () => ({
+  modelValue: PropTypes.arrayOf(PropTypes.string).def([]),
+  placeholder: PropTypes.string.def("\u8BF7\u8F93\u5165\u5E76\u6309 Enter \u7ED3\u675F"),
+  list: PropTypes.arrayOf(PropTypes.object).def([]),
+  disabled: PropTypes.bool.def(false),
+  tooltipKey: PropTypes.string.def(""),
+  saveKey: PropTypes.string.def("id"),
+  displayKey: PropTypes.string.def("name"),
+  hasDeleteIcon: PropTypes.bool.def(false),
+  clearable: PropTypes.bool.def(true),
+  trigger: PropTypes.commonType(["focus", "search"]).def("search"),
+  searchKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def("name"),
+  useGroup: PropTypes.bool.def(false),
+  allowCreate: PropTypes.bool.def(false),
+  maxData: PropTypes.number.def(-1),
+  maxResult: PropTypes.number.def(10),
+  contentMaxHeight: PropTypes.number.def(300),
+  contentWidth: PropTypes.number.def(190),
+  separator: PropTypes.string.def(""),
+  allowNextFocus: PropTypes.bool.def(true),
+  allowAutoMatch: PropTypes.bool.def(false),
+  showClearOnlyHover: PropTypes.bool.def(false),
+  leftSpace: PropTypes.number.def(0),
+  createTagValidator: {
+    type: Function,
+    default: null
+  },
+  filterCallback: {
+    type: Function,
+    default: null
+  },
+  tagTpl: {
+    type: Function,
+    default: null
+  },
+  tpl: {
+    type: Function,
+    default: null
+  },
+  pasteFn: {
+    type: Function,
+    default: null
+  }
+});
+var TagRender = vue.defineComponent({
+  name: "TagRender",
+  props: {
+    node: PropTypes.object,
+    displayKey: PropTypes.string,
+    tpl: {
+      type: Function,
+      default: null
+    }
+  },
+  render() {
+    if (this.tpl) {
+      return this.tpl(this.node, vue.h, this);
+    }
+    return vue.createVNode("div", {
+      "class": "tag"
+    }, [vue.createVNode("span", {
+      "class": "text"
+    }, [this.node[this.displayKey]])]);
+  }
+});
+var TagInput = vue.defineComponent({
+  name: "BkTagInput",
+  directives: {
+    bkTooltips: tooltips
   },
-  emits: ["change", "close"],
-  slots: ["icon"],
+  props: tagProps(),
+  emits: ["update:modelValue", "change", "select", "blur", "remove", "removeAll"],
   setup(props, {
     emit
   }) {
-    const wrapperCls = vue.computed(() => classes({
-      "bk-tag-closable": props.closable,
-      "bk-tag-checkable": props.checkable,
-      "bk-tag-check": props.checked,
-      [`bk-tag-${props.type}`]: props.type,
-      [`bk-tag-${props.theme}`]: props.theme,
-      [props.extCls]: !!props.extCls
-    }, "bk-tag"));
-    const wrapperStyle = vue.computed(() => ({
-      borderRadius: props.radius
+    const state = vue.reactive({
+      isEdit: false,
+      isHover: false,
+      focusItemIndex: props.allowCreate ? -1 : 0
+    });
+    const popoverProps = vue.reactive({
+      isShow: false,
+      width: 190,
+      modifiers: [{
+        name: "offset",
+        options: {
+          offset: [0, 4]
+        }
+      }]
+    });
+    const {
+      maxResult
+    } = vue.toRefs(props);
+    const {
+      pageState,
+      initPage,
+      pageChange
+    } = usePage(maxResult);
+    const curInputValue = useDebouncedRef("", 150);
+    const tagInputRef = vue.ref(null);
+    const bkTagSelectorRef = vue.ref(null);
+    const tagListRef = vue.ref(null);
+    const tagInputItemRef = vue.ref(null);
+    const selectorListRef = vue.ref(null);
+    const popoverRef = vue.ref(null);
+    const timer = vue.ref(null);
+    const showTagClose = vue.computed(() => !props.disabled && props.hasDeleteIcon);
+    const isSingleSelect = vue.computed(() => props.maxData === 1);
+    const isShowPlaceholder = vue.computed(() => listState.selectedTagList.length === 0 && curInputValue.value === "" && !state.isEdit);
+    const isShowClear = vue.computed(() => props.clearable && !props.disabled && listState.selectedTagList.length !== 0 && (props.showClearOnlyHover ? state.isHover : true));
+    const triggerClass = vue.computed(() => ({
+      "bk-tag-input-trigger": true,
+      active: state.isEdit,
+      disabled: props.disabled
     }));
-    const handleClose = (e) => {
-      e.preventDefault();
+    vue.watch([() => [...props.modelValue], () => [...props.list]], () => {
+      initData();
+    });
+    vue.watch(curInputValue, (value) => {
+      const hasShowCount = pageState.curPageList.length !== 0;
+      if (value !== "" && hasShowCount || value === "" && props.trigger === "focus") {
+        popoverProps.isShow = true;
+      } else if (props.trigger !== "focus" || !hasShowCount) {
+        popoverProps.isShow = false;
+      }
+    });
+    vue.watch(() => popoverProps.isShow, (show) => {
+      changePopoverOffset();
+      if (show) {
+        if (selectorListRef.value) {
+          vue.nextTick(() => {
+            selectorListRef.value.scrollTop = 0;
+          });
+          selectorListRef.value.removeEventListener("scroll", scrollHandler);
+          selectorListRef.value.addEventListener("scroll", scrollHandler);
+        }
+      }
+    });
+    const changePopoverOffset = () => {
+      var _a, _b;
+      const left2 = isSingleSelect.value ? 0 : (_a = tagInputItemRef.value) == null ? void 0 : _a.offsetLeft;
+      popoverProps.modifiers = [{
+        name: "offset",
+        options: {
+          offset: [left2, 4]
+        }
+      }];
+      (_b = popoverRef.value) == null ? void 0 : _b.update();
+    };
+    const scrollHandler = () => {
+      if (pageState.isPageLoading || selectorListRef.value.scrollTop === 0) {
+        return;
+      }
+      const {
+        scrollTop,
+        offsetHeight,
+        scrollHeight
+      } = selectorListRef.value;
+      if (scrollTop + offsetHeight >= scrollHeight) {
+        const curPage = pageState.curPage + 1;
+        if (curPage <= pageState.totalPage) {
+          pageState.isPageLoading = true;
+          setTimeout(() => {
+            pageChange(curPage);
+          }, 500);
+        }
+      }
+    };
+    const getSelectedTagNodes = () => {
+      var _a;
+      const nodes = Array.from(((_a = tagListRef.value) == null ? void 0 : _a.childNodes) || []);
+      return nodes.filter((node) => node.nodeType !== Node.TEXT_NODE);
+    };
+    const focusInputTrigger = (e) => {
+      if (props.disabled)
+        return;
+      if (e == null ? void 0 : e.target) {
+        const {
+          className
+        } = e.target;
+        if (className.indexOf("bk-tag-input-trigger") > -1 || className.indexOf("tag-list") > -1) {
+          tagListRef.value.appendChild(tagInputItemRef.value);
+        }
+      }
+      clearTimeout(timer.value);
+      if (isSingleSelect.value && tagList.value.length) {
+        listState.tagListCache = [...tagList.value];
+        listState.selectedTagListCache = [...listState.selectedTagList];
+        curInputValue.value = listState.selectedTagListCache[0][props.saveKey];
+        removeTag(listState.selectedTagList[0], 0);
+        handleInput();
+      }
+      state.isEdit = true;
+      vue.nextTick(() => {
+        var _a;
+        (_a = tagInputRef.value) == null ? void 0 : _a.focus();
+        if (props.trigger === "focus" && listState.localList.length !== 0) {
+          filterData();
+          if (popoverProps.isShow) {
+            changePopoverOffset();
+          } else {
+            popoverProps.isShow = true;
+          }
+        }
+      });
+    };
+    const listState = vue.reactive({
+      localList: [],
+      tagListCache: [],
+      selectedTagList: [],
+      selectedTagListCache: []
+    });
+    const tagList = vue.computed(() => listState.selectedTagList.map((tag2) => tag2[props.saveKey]));
+    const formatList = useFlatList(props);
+    const renderList = vue.computed(() => {
+      if (props.useGroup) {
+        const groupMap = {};
+        pageState.curPageList.forEach((item, index) => {
+          item.__index__ = index;
+          if (!groupMap[item.group.groupId]) {
+            groupMap[item.group.groupId] = {
+              id: item.group.groupId,
+              name: item.group.groupName,
+              children: []
+            };
+          }
+          groupMap[item.group.groupId].children.push(item);
+        });
+        return Object.keys(groupMap).map((key) => groupMap[key]);
+      }
+      return pageState.curPageList;
+    });
+    const initData = () => {
+      const {
+        saveKey,
+        modelValue,
+        displayKey,
+        allowCreate,
+        trigger
+      } = props;
+      listState.selectedTagList = [];
+      listState.localList = [...formatList];
+      if (modelValue.length) {
+        modelValue.forEach((tag2) => {
+          const value = listState.localList.find((val) => tag2 === val[saveKey]);
+          if (value !== void 0) {
+            listState.selectedTagList.push(value);
+          } else if (allowCreate && !tagList.value.includes(tag2)) {
+            listState.selectedTagList.push({
+              [saveKey]: tag2,
+              [displayKey]: tag2
+            });
+          }
+        });
+        if (!isSingleSelect.value) {
+          listState.localList = listState.localList.filter((val) => !modelValue.includes(val[saveKey]));
+        }
+      }
+      if (trigger === "focus") {
+        filterData();
+      }
+    };
+    const filterData = (value = "") => {
+      const {
+        searchKey,
+        filterCallback
+      } = props;
+      const lowerCaseValue = value.toLowerCase();
+      let filterData2 = [];
+      if (typeof filterCallback === "function") {
+        filterData2 = filterCallback(lowerCaseValue, searchKey, listState.localList) || [];
+      } else {
+        if (Array.isArray(searchKey)) {
+          const filterDataList = searchKey.map((searchKey2) => listState.localList.filter((item) => item[searchKey2].toLowerCase().indexOf(lowerCaseValue) !== -1));
+          filterData2 = Array.from(new Set(filterDataList.flat()));
+        } else {
+          filterData2 = listState.localList.filter((item) => item[searchKey].toLowerCase().indexOf(lowerCaseValue) !== -1);
+        }
+      }
+      initPage(filterData2);
+    };
+    const activeClass = (data2, index) => {
+      const style = {
+        "bk-selector-actived": false,
+        "bk-selector-selected": tagList.value.includes(data2[props.saveKey])
+      };
+      if (props.useGroup) {
+        style["bk-selector-actived"] = data2.__index__ === state.focusItemIndex;
+      } else {
+        style["bk-selector-actived"] = index === state.focusItemIndex;
+      }
+      return style;
+    };
+    vue.onMounted(() => {
+      initData();
+    });
+    const clearSingleCache = () => {
+      listState.tagListCache = [];
+      listState.selectedTagListCache = [];
+      listState.selectedTagList = [];
+    };
+    const clearInput = () => {
+      curInputValue.value = "";
+    };
+    const getTagInputItemSite = () => {
+      if (isSingleSelect.value) {
+        return 0;
+      }
+      const childNodes = getSelectedTagNodes();
+      const index = childNodes.findIndex(({
+        id
+      }) => id === "tagInputItem");
+      return index >= 0 ? index : 0;
+    };
+    const swapElementPositions = (newNode, referenceNode, isNextElementSibling = false) => {
+      if (!referenceNode || !newNode)
+        return;
+      let swap = referenceNode;
+      if (isNextElementSibling) {
+        swap = referenceNode.nextElementSibling || null;
+      }
+      referenceNode.parentNode.insertBefore(newNode, swap);
+    };
+    const handleInput = (e) => {
+      const {
+        maxData,
+        trigger,
+        allowCreate
+      } = props;
+      if (maxData === -1 || maxData > tagList.value.length) {
+        const {
+          value
+        } = (e == null ? void 0 : e.target) ? e.target : curInputValue;
+        const charLen = getCharLength(value);
+        if (charLen) {
+          filterData(value);
+          tagInputRef.value.style.width = `${charLen * INPUT_MIN_WIDTH}px`;
+        } else {
+          if (trigger === "focus") {
+            filterData();
+          }
+        }
+      } else {
+        handleBlur();
+        curInputValue.value = "";
+        popoverProps.isShow = false;
+      }
+      state.isEdit = true;
+      state.focusItemIndex = allowCreate ? -1 : 0;
+    };
+    const handleFocus = () => {
+      var _a;
+      popoverProps.width = isSingleSelect.value ? (_a = bkTagSelectorRef.value) == null ? void 0 : _a.clientWidth : props.contentWidth;
+    };
+    const handleBlur = () => {
+      timer.value = setTimeout(() => {
+        const inputValue = curInputValue.value;
+        clearInput();
+        state.isEdit = false;
+        if (isSingleSelect.value) {
+          const [oldValue] = listState.tagListCache;
+          if (inputValue && inputValue === oldValue && listState.selectedTagListCache.length) {
+            addTag(listState.selectedTagListCache[0], "select");
+          } else {
+            handleChange("remove");
+          }
+        } else if (props.allowAutoMatch && inputValue) {
+          const matchItem = pageState.curPageList.find((item) => {
+            if (Array.isArray(props.searchKey)) {
+              const searchValue = props.searchKey.map((key) => item[key]);
+              return searchValue.includes(inputValue);
+            }
+            return item[props.searchKey] === inputValue;
+          });
+          if (matchItem) {
+            handleTagSelected(matchItem, "select");
+          } else if (props.allowCreate) {
+            handleTagSelected(inputValue, "custom");
+          }
+        }
+        popoverProps.isShow = false;
+        emit("blur", inputValue, tagList.value);
+      }, 50);
+    };
+    const handleTagSelected = (item, type, e) => {
+      e == null ? void 0 : e.stopPropagation();
+      if (!item || item.disabled) {
+        return;
+      }
+      if (isSingleSelect.value) {
+        clearSingleCache();
+      }
+      addTag(item, type);
+      handleChange("select");
+      clearInput();
+      popoverProps.isShow = false;
+    };
+    const handleTagRemove = (data2, index, e) => {
+      e == null ? void 0 : e.stopPropagation();
+      removeTag(data2, index);
+      clearInput();
+      handleChange("remove");
+      tagInputRef.value.style.width = `${INPUT_MIN_WIDTH}px`;
+    };
+    const handleChange = (type) => {
+      emit("change", tagList.value);
+      emit(type);
+      emit("update:modelValue", tagList.value);
+    };
+    const handleClear = (e) => {
       e.stopPropagation();
-      emit("close", e);
+      const removeList = listState.selectedTagList;
+      listState.selectedTagList = [];
+      const existList = formatList.filter((item) => removeList.some((removeItem) => removeItem[props.saveKey] === item[props.saveKey]));
+      if ((props.allowCreate && existList.length !== 0 || !props.allowCreate) && !isSingleSelect.value) {
+        listState.localList.push(...existList);
+      }
+      handleChange("removeAll");
     };
-    const handleClick = (e) => {
+    const updateScrollTop = () => {
+      const panelInfo = {
+        height: selectorListRef.value.clientHeight,
+        yAxis: selectorListRef.value.getBoundingClientRect().y
+      };
+      vue.nextTick(() => {
+        const activeObj = selectorListRef.value.querySelector(".bk-selector-actived");
+        if (!activeObj) {
+          return;
+        }
+        const activeInfo = {
+          height: activeObj.clientHeight,
+          yAxis: activeObj.getBoundingClientRect().y
+        };
+        if (activeInfo.yAxis < panelInfo.yAxis) {
+          selectorListRef.value.scrollTop = selectorListRef.value.scrollTop - (panelInfo.yAxis - activeInfo.yAxis);
+        }
+        const distanceToBottom = activeInfo.yAxis + activeInfo.height - panelInfo.yAxis;
+        if (distanceToBottom > panelInfo.height) {
+          selectorListRef.value.scrollTop = selectorListRef.value.scrollTop + distanceToBottom - panelInfo.height;
+        }
+      });
+    };
+    const backspaceHandler = (index, target) => {
+      const nodes = getSelectedTagNodes();
+      swapElementPositions(tagInputItemRef.value, nodes[index - 1]);
+      listState.selectedTagList.splice(index - 1, 1);
+      focusInputTrigger();
+      const isExistInit = formatList.some((item) => item === target[props.saveKey]);
+      if ((props.allowCreate && isExistInit || !props.allowCreate) && !isSingleSelect.value) {
+        listState.localList.push(target);
+      }
+      tagInputRef.value = `${INPUT_MIN_WIDTH}px`;
+      handleChange("remove");
+    };
+    const handleKeydown = (e) => {
+      if (pageState.isPageLoading) {
+        return;
+      }
+      let target;
+      const val = e.target.value;
+      const valLen = getCharLength(val);
+      const tagInputItemIndex = getTagInputItemSite();
+      const nodes = getSelectedTagNodes();
+      switch (e.code) {
+        case "ArrowUp":
+          e.preventDefault();
+          if (!popoverProps.isShow) {
+            return;
+          }
+          state.focusItemIndex = state.focusItemIndex - 1;
+          state.focusItemIndex = state.focusItemIndex < 0 ? -1 : state.focusItemIndex;
+          if (state.focusItemIndex === -1) {
+            state.focusItemIndex = pageState.curPageList.length - 1;
+          }
+          updateScrollTop();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!popoverProps.isShow) {
+            return;
+          }
+          state.focusItemIndex = state.focusItemIndex + 1;
+          state.focusItemIndex = state.focusItemIndex > pageState.curPageList.length - 1 ? pageState.curPageList.length : state.focusItemIndex;
+          if (state.focusItemIndex === pageState.curPageList.length) {
+            state.focusItemIndex = 0;
+          }
+          updateScrollTop();
+          break;
+        case "ArrowLeft":
+          state.isEdit = true;
+          if (!valLen) {
+            if (tagInputItemIndex < 1) {
+              return;
+            }
+            swapElementPositions(tagInputItemRef.value, nodes[tagInputItemIndex - 1]);
+            focusInputTrigger();
+          }
+          break;
+        case "ArrowRight":
+          state.isEdit = true;
+          if (!valLen) {
+            if (tagInputItemIndex === nodes.length - 1) {
+              return;
+            }
+            swapElementPositions(nodes[tagInputItemIndex + 1], tagInputItemRef.value);
+            focusInputTrigger();
+          }
+          break;
+        case "Enter":
+        case "NumpadEnter":
+          if (!props.allowCreate && popoverProps.isShow || props.allowCreate && state.focusItemIndex >= 0 && popoverProps.isShow) {
+            handleTagSelected(pageState.curPageList[state.focusItemIndex], "select", e);
+          } else if (props.allowCreate) {
+            handleTagSelected(curInputValue.value, "custom", e);
+          }
+          e.preventDefault();
+          break;
+        case "Backspace":
+          if (tagInputItemIndex !== 0 && !curInputValue.value) {
+            target = listState.selectedTagList[tagInputItemIndex - 1];
+            backspaceHandler(tagInputItemIndex, target);
+          }
+          break;
+      }
+    };
+    const defaultPasteFn = (value) => {
+      const target = [];
+      const textArr = value.split(";");
+      textArr.forEach((item) => {
+        if (item.match(/^[a-zA-Z][a-zA-Z_]+/g)) {
+          const finalItem = item.match(/^[a-zA-Z][a-zA-Z_]+/g).join("");
+          target.push({
+            [props.saveKey]: finalItem,
+            [props.displayKey]: finalItem
+          });
+        }
+      });
+      return target;
+    };
+    const handlePaste = (e) => {
       e.preventDefault();
-      e.stopPropagation();
-      if (props.checkable) {
-        emit("change", !props.checked);
+      if (isSingleSelect.value) {
+        return false;
+      }
+      const {
+        maxData,
+        saveKey,
+        pasteFn
+      } = props;
+      const value = e.clipboardData.getData("text");
+      const valArr = pasteFn ? pasteFn(value) : defaultPasteFn(value);
+      let tags = valArr.map((value2) => value2[saveKey]);
+      if (tags.length) {
+        const nodes = getSelectedTagNodes();
+        const index = getTagInputItemSite();
+        const localInitData = listState.localList.map((data2) => data2[saveKey]);
+        tags = tags.filter((tag2) => (tag2 == null ? void 0 : tag2.trim()) && !tagList.value.includes(tag2) && localInitData.includes(tag2));
+        if (maxData !== -1) {
+          const selectedLength = listState.selectedTagList.length;
+          if (selectedLength < maxData) {
+            const differ = maxData - selectedLength;
+            if (tags.length > differ) {
+              tags = [...tags.slice(0, differ)];
+            }
+          } else {
+            tags = [];
+          }
+        }
+        const localTags = listState.localList.filter((tag2) => tags.includes(tag2[saveKey]));
+        if (tags.length) {
+          listState.selectedTagList.splice(index, 0, ...localTags);
+          swapElementPositions(tagInputItemRef.value, nodes[index]);
+          tagInputRef.value.style.width = `${INPUT_MIN_WIDTH}px`;
+          listState.localList = listState.localList.filter((val) => !tags.includes(val[saveKey]));
+          handleChange("select");
+          focusInputTrigger();
+        }
       }
     };
-    return {
-      wrapperCls,
-      wrapperStyle,
-      handleClose,
-      handleClick
+    const tagFocus = (e) => {
+      if (props.disabled) {
+        return;
+      }
+      swapElementPositions(tagInputItemRef.value, e.currentTarget, true);
+      tagInputRef.value.style.width = `${INPUT_MIN_WIDTH}px`;
+      popoverProps.isShow && changePopoverOffset();
+    };
+    const addTag = (item, type) => {
+      if (listState.selectedTagList.length >= props.maxData && props.maxData !== -1)
+        return;
+      const {
+        separator,
+        saveKey,
+        displayKey,
+        createTagValidator
+      } = props;
+      const targetIndex = getTagInputItemSite();
+      let moveCount = 1;
+      let isSelected = false;
+      let newValue;
+      const validateTag = (value) => {
+        if (typeof createTagValidator === "function") {
+          return createTagValidator(value);
+        }
+        return true;
+      };
+      const existTag = (value) => listState.localList.find((tag2) => tag2[saveKey] === value);
+      if (type === "custom") {
+        if (separator) {
+          let tags = item.split(separator);
+          tags = tags.filter((tag2) => (tag2 == null ? void 0 : tag2.trim()) && !tagList.value.includes(tag2) && validateTag(tag2));
+          const localTags = tags.map((tag2) => existTag(tag2) || {
+            [saveKey]: tag2,
+            [displayKey]: tag2
+          });
+          if (tags.length) {
+            listState.selectedTagList.splice(targetIndex, 0, ...localTags);
+            moveCount = localTags.length;
+            isSelected = true;
+          }
+        } else {
+          const isObject2 = typeof item === "object";
+          newValue = isObject2 ? item[saveKey] : item.trim();
+          newValue = newValue.replace(/\s+/g, "");
+          if (newValue !== void 0 && !tagList.value.includes(newValue) && validateTag(newValue)) {
+            const localItem = existTag(newValue) || (isObject2 ? item : {
+              [saveKey]: newValue,
+              [displayKey]: newValue
+            });
+            listState.selectedTagList.splice(targetIndex, 0, localItem);
+            isSelected = true;
+          }
+        }
+      } else if (item) {
+        newValue = item[saveKey];
+        if (newValue !== void 0 && !tagList.value.includes(newValue)) {
+          listState.selectedTagList.splice(targetIndex, 0, item);
+          isSelected = true;
+        }
+      }
+      if (isSelected) {
+        vue.nextTick(() => {
+          for (let count = 1; count <= moveCount; count++) {
+            const nodes = getSelectedTagNodes();
+            const site = nodes[targetIndex + count];
+            swapElementPositions(site, tagInputItemRef.value);
+          }
+          tagInputRef.value.style.width = `${INPUT_MIN_WIDTH}px`;
+          if (!isSingleSelect.value) {
+            props.allowNextFocus && focusInputTrigger();
+            listState.localList = listState.localList.filter((val) => !tagList.value.includes(val[saveKey]));
+          }
+        });
+      }
+    };
+    const removeTag = (data2, index) => {
+      listState.selectedTagList.splice(index, 1);
+      const isExistInit = formatList.some((item) => item === data2[props.saveKey]);
+      if ((props.allowCreate && isExistInit || !props.allowCreate) && !isSingleSelect.value) {
+        listState.localList.push(data2);
+      }
     };
+    return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      popoverProps
+    }, vue.toRefs(state)), vue.toRefs(listState)), vue.toRefs(pageState)), {
+      isShowPlaceholder,
+      isShowClear,
+      curInputValue,
+      formatList,
+      renderList,
+      showTagClose,
+      tagInputRef,
+      bkTagSelectorRef,
+      tagListRef,
+      tagInputItemRef,
+      selectorListRef,
+      popoverRef,
+      triggerClass,
+      focusInputTrigger,
+      activeClass,
+      handleInput,
+      handleFocus,
+      handleBlur,
+      handleTagSelected,
+      handleTagRemove,
+      handleClear,
+      tagFocus,
+      handleKeydown,
+      handlePaste
+    });
   },
   render() {
-    var _a, _b;
+    const renderSelectorList = () => {
+      if (this.useGroup) {
+        return this.renderList.map((group) => vue.createVNode("li", {
+          "class": "bk-selector-group-item"
+        }, [vue.createVNode("span", {
+          "class": "group-name"
+        }, [group.name, vue.createTextVNode(" ("), group.children.length, vue.createTextVNode(")")]), vue.createVNode("ul", {
+          "class": "bk-selector-group-list-item"
+        }, [group.children.map((item, index) => vue.createVNode("li", {
+          "class": ["bk-selector-list-item", {
+            disabled: item.disabled
+          }, this.activeClass(item, index)],
+          "onClick": this.handleTagSelected.bind(this, item, "select")
+        }, [vue.createVNode(ListTagRender, {
+          "node": item,
+          "displayKey": this.displayKey,
+          "tpl": this.tpl,
+          "searchKey": this.searchKey,
+          "searchKeyword": this.curInputValue
+        }, null)]))])]));
+      }
+      return this.renderList.map((item, index) => vue.createVNode("li", {
+        "class": ["bk-selector-list-item", {
+          disabled: item.disabled
+        }, this.activeClass(item, index)],
+        "onClick": this.handleTagSelected.bind(this, item, "select")
+      }, [vue.createVNode(ListTagRender, {
+        "node": item,
+        "displayKey": this.displayKey,
+        "tpl": this.tpl,
+        "searchKey": this.searchKey,
+        "searchKeyword": this.curInputValue
+      }, null)]));
+    };
     return vue.createVNode("div", {
-      "class": this.wrapperCls,
-      "style": this.wrapperStyle,
-      "onClick": this.handleClick
-    }, [this.$slots.icon ? vue.createVNode("span", {
-      "class": "bk-tag-icon"
-    }, [this.$slots.icon()]) : "", vue.createVNode("span", null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.closable ? vue.createVNode(error, {
-      "class": "bk-tag-close",
-      "onClick": this.handleClose
-    }, null) : ""]);
+      "class": "bk-tag-input",
+      "ref": "bkTagSelectorRef",
+      "onClick": this.focusInputTrigger,
+      "onMouseenter": () => this.isHover = true,
+      "onMouseleave": () => this.isHover = false
+    }, [vue.createVNode(BkPopover, {
+      "ref": "popoverRef",
+      "theme": "light",
+      "trigger": "manual",
+      "placement": "bottom-start",
+      "arrow": false,
+      "width": this.popoverProps.width,
+      "isShow": this.popoverProps.isShow,
+      "modifiers": this.popoverProps.modifiers
+    }, {
+      default: () => vue.createVNode("div", {
+        "class": this.triggerClass
+      }, [vue.createVNode("ul", {
+        "class": "tag-list",
+        "ref": "tagListRef",
+        "style": {
+          marginLeft: `${this.leftSpace}px`
+        }
+      }, [this.selectedTagList.map((item, index) => {
+        const tooltips2 = {
+          boundary: "window",
+          theme: "light",
+          distance: 12,
+          content: item[this.tooltipKey],
+          disabled: !this.tooltipKey
+        };
+        return vue.withDirectives(vue.createVNode("li", {
+          "class": "tag-item",
+          "onClick": this.tagFocus
+        }, [vue.createVNode(TagRender, {
+          "node": item,
+          "tpl": this.tagTpl,
+          "displayKey": this.displayKey
+        }, null), this.showTagClose ? vue.createVNode(error, {
+          "class": "remove-tag",
+          "onClick": this.handleTagRemove.bind(this, item, index)
+        }, null) : null]), [[vue.resolveDirective("bk-tooltips"), tooltips2]]);
+      }), vue.withDirectives(vue.createVNode("li", {
+        "ref": "tagInputItemRef",
+        "id": "tagInputItem",
+        "class": "tag-input-item",
+        "role": "input"
+      }, [vue.withDirectives(vue.createVNode("input", {
+        "type": "text",
+        "class": "tag-input",
+        "ref": "tagInputRef",
+        "onUpdate:modelValue": ($event) => this.curInputValue = $event,
+        "onInput": this.handleInput,
+        "onFocus": this.handleFocus,
+        "onBlur": this.handleBlur,
+        "onKeydown": this.handleKeydown,
+        "onPaste": this.handlePaste
+      }, null), [[vue.vModelText, this.curInputValue]])]), [[vue.vShow, this.isEdit]])]), vue.withDirectives(vue.createVNode("p", {
+        "class": "placeholder"
+      }, [this.placeholder]), [[vue.vShow, this.isShowPlaceholder]]), this.isShowClear ? vue.createVNode(close$1, {
+        "class": "clear-icon",
+        "onClick": this.handleClear
+      }, null) : null]),
+      content: () => vue.createVNode("div", {
+        "class": "bk-selector-list"
+      }, [vue.createVNode("ul", {
+        "ref": "selectorListRef",
+        "style": {
+          "max-height": `${this.contentMaxHeight}px`
+        },
+        "class": "outside-ul"
+      }, [renderSelectorList(), this.isPageLoading ? vue.createVNode("li", {
+        "class": "bk-selector-list-item loading"
+      }, [vue.createVNode(BkLoading, {
+        "theme": "primary",
+        "size": BkLoadingSize.Small
+      }, null)]) : null])])
+    })]);
   }
 });
-const BkTag = withInstall(Component$4);
+TagInput.install = (Vue) => {
+  Vue.component(TagInput.name, TagInput);
+};
 var bkDivider = vue.defineComponent({
   name: "Divider",
   props: {
@@ -18338,35 +19402,41 @@ const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
   const outputData = [];
   let order2 = 0;
   const schema = /* @__PURE__ */ new Map();
-  function isCachedTreeNodeOpened(uuid2, node) {
+  function getCachedTreeNodeAttr(uuid2, node, attr, cachedAttr) {
     const cached = (cachedSchema || []).find((item) => item.__uuid === uuid2);
     if (cached) {
-      return cached.__isOpen;
+      return cached[cachedAttr];
     }
-    return node.isOpen;
+    return node[attr];
+  }
+  function isCachedTreeNodeOpened(uuid2, node) {
+    return getCachedTreeNodeAttr(uuid2, node, "isOpen", "__isOpen");
+  }
+  function isCachedTreeNodeChecked(uuid2, node) {
+    return getCachedTreeNodeAttr(uuid2, node, "checked", "__checked");
   }
   function flatten(array, depth = 0, parent = null, path = null) {
-    for (let i2 = 0; i2 < array.length; i2++) {
+    const arrLength = array.length;
+    for (let i2 = 0; i2 < arrLength; i2++) {
       const item = array[i2];
       if (Array.isArray(item)) {
         flatten(item, depth, parent, path);
       } else {
         if (typeof item === "object" && item !== null) {
           const uuid2 = item.__uuid || uuid_1.v4();
-          const isOpen = isCachedTreeNodeOpened(uuid2, item);
           const currentPath = path !== null ? `${path}-${i2}` : `${i2}`;
+          const hasChildren = !!(item[children] || []).length;
           const attrs = {
             __depth: depth,
             __index: i2,
             __uuid: uuid2,
             __parentId: parent,
-            __parentPath: path,
-            __hasChild: !!(item[children] || []).length,
+            __hasChild: hasChildren,
             __path: currentPath,
             __isRoot: parent === null,
             __order: order2,
-            __isOpen: isOpen,
-            __checked: !!item.checked,
+            __isOpen: isCachedTreeNodeOpened(uuid2, item) && hasChildren,
+            __checked: isCachedTreeNodeChecked(uuid2, item),
             [children]: null
           };
           Object.assign(item, { __uuid: uuid2 });
@@ -19052,6 +20122,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   Switcher: BkSwitcher,
   Table: BkTable,
   Tag: BkTag,
+  TagInput,
   Divider: BkDivider,
   Tab: BKTab,
   TabPanel: BKTabPanel,
@@ -19126,6 +20197,7 @@ exports.Tab = BKTab;
 exports.TabPanel = BKTabPanel;
 exports.Table = BkTable;
 exports.Tag = BkTag;
+exports.TagInput = TagInput;
 exports.Transfer = Transfer;
 exports.Tree = BkTree;
 exports.VirtualRender = BkVirtualRender;