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

package/dist/bkui-vue.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, Transition, getCurrentInstance, provide, inject, nextTick, isVNode, Fragment, createTextVNode, toRefs, customRef, watchEffect, onBeforeMount, withDirectives, vShow, toRef, unref, vModelText, resolveDirective, onUpdated, render, onUnmounted, Teleport } from "vue";
+import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, Transition, getCurrentInstance, provide, inject, nextTick, isVNode, Fragment, createTextVNode, toRefs, customRef, onBeforeMount, withDirectives, vShow, toRef, unref, resolveDirective, vModelText, watchEffect, onUpdated, render, onUnmounted, Teleport } from "vue";
 var reset = "";
 var alert = "";
 var backtop = "";
@@ -78,6 +78,8 @@ var virtualRender$1 = "";
 var transfer = "";
 var pagination = "";
 var timeline = "";
+var resizeLayout = "";
+var tagInput = "";
 const BKLAYERD_INDEX_EFAULT_VALUE = {
   ["bottom"]: 0,
   ["content"]: 1,
@@ -9526,8 +9528,9 @@ var Component$g = 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);
       }
     };
     watch(() => props.isShow, (val) => {
@@ -9604,7 +9607,7 @@ var Component$g = 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 && createVNode("div", {
+          }, customTheme), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2.value && createVNode("div", {
             "class": "arrow",
             "data-popper-arrow": true
           }, null)])];
@@ -10356,22 +10359,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 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 = ref("auto");
+  const isPopoverShow = 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 = ref(false);
+  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 = defineComponent({
   name: "Option",
   props: {
@@ -10387,28 +10447,12 @@ var BkOption = defineComponent({
       visible: true
     });
     const {
-      disabled,
-      label
+      disabled
     } = toRefs(props);
     const select2 = inject(selectKey, null);
     const group = inject(optionGroupKey, null);
     const selected = computed(() => select2.selectedOptions.has(proxy));
     const multiple = computed(() => select2 == null ? void 0 : select2.props.multiple);
-    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;
@@ -10416,9 +10460,11 @@ var BkOption = defineComponent({
     };
     onBeforeMount(() => {
       select2 == null ? void 0 : select2.register(proxy);
+      group == null ? void 0 : group.register(proxy);
     });
     onBeforeUnmount(() => {
       select2 == null ? void 0 : select2.unregister(proxy);
+      group == null ? void 0 : group.unregister(proxy);
     });
     return __spreadProps(__spreadValues({}, toRefs(states)), {
       selected,
@@ -10452,41 +10498,38 @@ var OptionGroup = defineComponent({
   setup(props, {
     emit
   }) {
-    const children = ref([]);
-    const instance = getCurrentInstance();
+    const {
+      proxy
+    } = getCurrentInstance();
+    const select2 = inject(selectKey, null);
     const states = reactive({
       groupCollapse: props.collapse,
       visible: true
     });
-    const groupLabel = computed(() => `${props.label} (${children.value.filter((option) => option.visible).length})`);
-    provide(optionGroupKey, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
-      groupCollapse: 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 = ref(/* @__PURE__ */ new Set());
+    const {
+      register,
+      unregister
+    } = useRegistry(options);
+    const groupLabel = 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);
     };
-    onMounted(() => {
-      children.value = flattedChildren(instance.subTree);
+    provide(optionGroupKey, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+      register,
+      unregister,
+      groupCollapse: toRef(states, "groupCollapse")
+    })));
+    onBeforeMount(() => {
+      select2 == null ? void 0 : select2.registerGroup(proxy);
+    });
+    onBeforeUnmount(() => {
+      select2 == null ? void 0 : select2.unregisterGroup(proxy);
     });
     return __spreadProps(__spreadValues({}, toRefs(states)), {
-      children,
       groupLabel,
       handleToggleCollapse
     });
@@ -10495,7 +10538,8 @@ var OptionGroup = 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,
@@ -10512,13 +10556,13 @@ var OptionGroup = defineComponent({
       "onClick": this.handleToggleCollapse
     }, [this.$slots.label ? this.$slots.label() : createVNode("span", {
       "class": "default-group-label"
-    }, [this.collapsible ? createVNode(angleUpFill, {
+    }, [this.collapsible && createVNode(angleUpFill, {
       "class": groupLabelIconClass
-    }, null) : null, createVNode("span", {
+    }, null), createVNode("span", {
       "class": "default-group-label-title"
-    }, [this.groupLabel])])]), createVNode("ul", {
+    }, [this.groupLabel])])]), withDirectives(createVNode("ul", {
       "class": "bk-option-group-content"
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]), [[vShow, this.visible]]);
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, !this.groupCollapse]])]), [[vShow, this.visible]]);
   }
 });
 var _populated = false;
@@ -10920,6 +10964,69 @@ function createPopperInstance(el, popper2, options) {
   }
 }
 var Component$b = 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 = 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 = 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 createVNode("div", {
+      "class": this.wrapperCls,
+      "style": this.wrapperStyle,
+      "onClick": this.handleClick
+    }, [this.$slots.icon ? createVNode("span", {
+      "class": "bk-tag-icon"
+    }, [this.$slots.icon()]) : "", createVNode("span", {
+      "class": "bk-tag-text"
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.closable ? createVNode(error, {
+      "class": "bk-tag-close",
+      "onClick": this.handleClose
+    }, null) : ""]);
+  }
+});
+const BkTag = withInstall(Component$b);
+var Component$a = defineComponent({
   name: "Select",
   directives: {
     clickoutside: ClickOutside
@@ -10927,43 +11034,84 @@ var Component$b = 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
     } = toRefs(props);
     const states = reactive({
       currentPlaceholder: placeholder.value,
-      options: /* @__PURE__ */ new Set(),
       selectedOptions: /* @__PURE__ */ new Set(),
       currentSelectedLabel: ""
     });
-    const selectTriggerRef = ref();
     const inputRef = ref();
-    const register = (option) => {
-      if (!option)
-        return;
-      return states.options.add(option);
-    };
-    const unregister = (option) => states.options.delete(option);
+    const popoverRef = ref();
+    const options = ref(/* @__PURE__ */ new Set());
+    const groups = ref(/* @__PURE__ */ new Set());
+    const isDisabled = computed(() => disabled.value || loading2.value);
+    const selectedLabel = computed(() => [...states.selectedOptions.values()].map((option) => option.label));
+    const isAllSelected = computed(() => [...options.value.values()].filter((option) => !option.disabled).every((option) => states.selectedOptions.has(option)));
+    const isGroup = computed(() => !!groups.value.size);
+    const isOptionsEmpty = computed(() => !options.value.size);
+    const isSearchEmpty = computed(() => {
+      const data2 = [...options.value.values()];
+      return data2.length && data2.every((option) => !option.visible);
+    });
+    const isRemoteSearch = computed(() => typeof remoteMethod.value === "function");
+    const isShowSelectContent = computed(() => !(searchLoading.value || isOptionsEmpty.value || isSearchEmpty.value));
+    const curContentText = 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,
@@ -10974,63 +11122,63 @@ var Component$b = defineComponent({
       handleFocus,
       handleBlur
     } = useFocus();
-    const handleInput = (e) => {
-      searchKey.value = e.target.value;
-    };
-    const isDisabled = computed(() => disabled.value || loading2.value);
-    const selectClass = computed(() => ({
-      "bk-select": true,
-      "popover-show": isPopoverShow.value,
-      "is-disabled": isDisabled.value,
-      "is-focus": isFocus.value,
-      [size.value]: true
-    }));
-    const selectedLabel = computed(() => [...states.selectedOptions.values()].map((option) => option.label).join(","));
-    const popperWidth = ref("auto");
-    const onPopoverFirstUpdate = (instance) => {
-      const {
-        reference: reference2
-      } = instance.elements;
-      popperWidth.value = reference2.offsetWidth;
-    };
-    const isPopoverShow = 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;
-    };
-    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 = "";
       }
     };
+    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);
@@ -11044,129 +11192,195 @@ var Component$b = 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 = computed(() => typeof remoteMethod.value === "function");
-    const searchLoading = ref(false);
-    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 = computed(() => [...states.options.values()].every((option) => !option.visible));
+      selectedCallback();
+      emitChange([...states.selectedOptions.values()].map((option) => option.value));
+    };
+    const handleClickOutside = () => {
+      hidePopover();
+      handleBlur();
+    };
     provide(selectKey, reactive({
       props,
-      searchKey,
       selectedOptions: unref(states.selectedOptions),
-      isRemoteSearch,
       register,
       unregister,
+      registerGroup,
+      unregisterGroup,
       handleOptionSelected
     }));
     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({}, 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 createVNode(spinner, {
-          "class": "spinner"
-        }, null);
-      }
-      if (this.clearable && this.isHover) {
-        return createVNode(close$1, {
-          "class": "clear-icon",
-          "onClick": this.handleClear
+    const renderSelectTrigger = () => {
+      var _a, _b;
+      const suffixIcon = () => {
+        if (this.loading) {
+          return createVNode(BkLoading, {
+            "class": "spinner",
+            "mode": "spin",
+            "size": "mini"
+          }, null);
+        }
+        if (this.clearable && this.isHover) {
+          return createVNode(close$1, {
+            "class": "clear-icon",
+            "onClick": this.handleClear
+          }, null);
+        }
+        return createVNode(angleUp, {
+          "class": "angle-up"
         }, null);
-      }
-      return createVNode(angleUp, {
-        "class": "angle-up"
-      }, null);
-    };
-    const renderEmptySelect = () => {
-      if (this.searchLoading) {
-        return withDirectives(createVNode("div", {
-          "class": "bk-select-empty"
-        }, [createVNode(spinner, {
-          "class": "spinner"
-        }, null), createTextVNode("\u52A0\u8F7D\u4E2D...")]), [[vShow, this.searchLoading]]);
-      }
-      if (this.isEmpty) {
-        return withDirectives(createVNode("div", {
-          "class": "bk-select-empty"
-        }, [createTextVNode("\u65E0\u5339\u914D\u6570\u636E")]), [[vShow, this.isEmpty]]);
-      }
-      return null;
+      };
+      const renderTriggerInput = () => {
+        if (this.multipleMode === "tag") {
+          return createVNode("div", {
+            "class": "bk-select-tag"
+          }, [[...this.selectedOptions.values()].map((option) => createVNode(BkTag, {
+            "closable": true,
+            "style": {
+              marginTop: "3px"
+            },
+            "theme": this.tagTheme,
+            "onClose": () => this.handleOptionSelected(option)
+          }, {
+            default: () => [option.label]
+          })), withDirectives(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), [[vModelText, this.searchKey]])]);
+        }
+        return withDirectives(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), [[vModelText, this.currentSelectedLabel]]);
+      };
+      return createVNode("div", {
+        "class": "bk-select-trigger",
+        "onClick": this.handleTogglePopover,
+        "onMouseenter": this.setHover,
+        "onMouseleave": this.cancelHover
+      }, [this.$slots.prefixIcon ? 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 createVNode("div", null, [renderEmptySelect(), withDirectives(createVNode("div", {
+      return createVNode("div", null, [!this.isShowSelectContent && createVNode("div", {
+        "class": "bk-select-empty"
+      }, [this.searchLoading && createVNode(BkLoading, {
+        "class": "mr5",
+        "mode": "spin",
+        "size": "mini"
+      }, null), this.curContentText]), createVNode("div", {
         "class": "bk-select-content"
       }, [createVNode("div", {
         "class": "bk-select-dropdown",
         "style": {
           maxHeight: `${this.scrollHeight}px`
         }
-      }, [createVNode("ul", {
+      }, [withDirectives(createVNode("ul", {
         "class": "bk-select-options"
-      }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]), this.$slots.extension ? createVNode("div", {
+      }, [this.multiple && this.showSelectAll && !this.searchKey && createVNode("li", {
+        "class": "bk-select-option",
+        "onClick": this.handleToggleAll
+      }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
         "class": "bk-select-extension"
-      }, [this.$slots.extension()]) : null]), [[vShow, !this.searchLoading && !this.isEmpty]])]);
+      }, [this.$slots.extension()])])]);
     };
     return withDirectives(createVNode("div", {
-      "class": this.selectClass
+      "class": selectClass
     }, [createVNode(BkPopover, {
+      "ref": "popoverRef",
       "theme": "light",
       "trigger": "manual",
       "width": this.popperWidth,
@@ -11176,35 +11390,12 @@ var Component$b = defineComponent({
       "modifiers": modifiers,
       "handleFirstUpdate": this.onPopoverFirstUpdate
     }, {
-      default: () => {
-        var _a, _b;
-        return createVNode("div", {
-          "class": "bk-select-trigger",
-          "ref": "selectTriggerRef",
-          "onClick": this.toggleMenu,
-          "onMouseenter": this.setHover,
-          "onMouseleave": this.cancelHover
-        }, [this.$slots.prefixIcon ? createVNode("span", {
-          "class": "bk-select-prefix"
-        }, [(_b = (_a = this.$slots).prefixIcon) == null ? void 0 : _b.call(_a)]) : null, withDirectives(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), [[vModelText, this.currentSelectedLabel]]), renderSelectRightIcon()]);
-      },
+      default: () => renderSelectTrigger(),
       content: () => renderSelectContent()
-    })]), [[resolveDirective("clickoutside"), this.hidePopover]]);
+    })]), [[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]" && !isVNode(s2);
 }
@@ -11214,7 +11405,7 @@ const {
 const sliderPops = Object.assign({}, propsMixin);
 sliderPops.width.default = "400";
 sliderPops.height.default = "100%";
-var Component$a = defineComponent({
+var Component$9 = defineComponent({
   name: "Sideslider",
   components: {
     BkModal,
@@ -11271,7 +11462,7 @@ var Component$a = defineComponent({
     });
   }
 });
-const BkSideslider = withInstall(Component$a);
+const BkSideslider = withInstall(Component$9);
 const stepsProps = {
   theme: PropTypes.theme().def("primary"),
   size: PropTypes.size(),
@@ -11285,7 +11476,7 @@ const stepsProps = {
   steps: PropTypes.array.def([]),
   beforeChange: PropTypes.func
 };
-var Component$9 = defineComponent({
+var Component$8 = defineComponent({
   name: "Steps",
   props: stepsProps,
   emits: ["update:curStep", "click"],
@@ -11421,8 +11612,8 @@ var Component$9 = defineComponent({
     })]);
   }
 });
-const BkSteps = withInstall(Component$9);
-var Component$8 = defineComponent({
+const BkSteps = withInstall(Component$8);
+var Component$7 = defineComponent({
   name: "Switcher",
   props: {
     theme: PropTypes.theme().def(""),
@@ -11516,7 +11707,7 @@ var Component$8 = defineComponent({
     }, [isChecked.value ? props.onText : props.offText]) : ""]);
   }
 });
-const BkSwitcher = withInstall(Component$8);
+const BkSwitcher = withInstall(Component$7);
 const EventProps$1 = {
   onContentScroll: Function
 };
@@ -11620,7 +11811,7 @@ var virtualRender = {
     }
   }
 };
-var Component$7 = defineComponent({
+var Component$6 = defineComponent({
   name: "VirtualRender",
   directives: {
     bkVirtualRender: virtualRender
@@ -11767,7 +11958,7 @@ var Component$7 = defineComponent({
     };
   }
 });
-const BkVirtualRender = withInstall(Component$7);
+const BkVirtualRender = withInstall(Component$6);
 const BORDER_OPRIONS = ["none", "row", "col", "outer"];
 const EventProps = {
   onRowClick: Function
@@ -11855,27 +12046,27 @@ var useList = () => {
   const {
     proxy
   } = getCurrentInstance();
-  const localCurrent = ref(proxy.modelValue);
+  const localCurrent = ref(1);
   const isPagePreDisabled = computed(() => localCurrent.value === 1);
-  const isPageNextDisabled = computed(() => localCurrent.value === proxy.pageNum);
+  const isPageNextDisabled = computed(() => localCurrent.value === proxy.totalPageNum);
   const showPreBatch = ref(false);
   const showNextBatch = ref(false);
   const list = computed(() => {
     showPreBatch.value = false;
     showNextBatch.value = false;
     const stack = [];
-    if (proxy.pageNum <= PAGE_ITEMS_NUM) {
-      for (let i = 2; i <= proxy.pageNum - 1; i++) {
+    if (proxy.totalPageNum <= PAGE_ITEMS_NUM) {
+      for (let i = 2; i <= proxy.totalPageNum - 1; i++) {
         stack.push(i);
       }
       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 i = start2; i < start2 + PAGE_ITEMS_NUM; i++) {
       stack.push(i);
     }
@@ -11883,19 +12074,19 @@ var useList = () => {
   });
   watch(() => proxy.modelValue, (modelValue) => {
     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;
       }
     });
   });
   nextTick(() => {
-    watch(() => proxy.pageNum, (pageNum) => {
-      if (localCurrent.value > pageNum) {
-        localCurrent.value = pageNum;
+    watch(() => proxy.totalPageNum, (totalPageNum) => {
+      if (localCurrent.value > totalPageNum) {
+        localCurrent.value = totalPageNum;
       }
     });
   });
@@ -11911,17 +12102,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 render2 = ({
     isFirst,
@@ -11960,14 +12151,14 @@ var useList = () => {
     "key": "next-batch",
     "class": "bk-pagination-list-next-batch",
     "onClick": handleNextBatch
-  }, [createVNode(ellipsis, null, null)]), proxy.pageNum > 1 && createVNode("div", {
+  }, [createVNode(ellipsis, null, null)]), proxy.totalPageNum > 1 && 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]), createVNode("div", {
+    "onClick": () => handleItemClick(proxy.totalPageNum)
+  }, [proxy.totalPageNum]), createVNode("div", {
     "class": {
       "bk-pagination-list-pre": true,
       "is-disabled": isPageNextDisabled.value
@@ -11987,23 +12178,23 @@ var useSmallList = () => {
   const isFocused = ref(false);
   const localCurrent = ref(1);
   const isPagePreDisabled = computed(() => localCurrent.value === 1);
-  const isPageNextDisabled = computed(() => localCurrent.value === proxy.pageNum);
+  const isPageNextDisabled = computed(() => localCurrent.value === proxy.totalPageNum);
   let inputMemo = 0;
   const list = computed(() => {
     const stack = [];
-    for (let i = 1; i <= proxy.pageNum; i++) {
+    for (let i = 1; i <= proxy.totalPageNum; i++) {
       stack.push(i);
     }
     return stack;
   });
   watch(() => proxy.modelValue, (modelValue) => {
     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;
     });
@@ -12011,9 +12202,9 @@ var useSmallList = () => {
     immediate: true
   });
   nextTick(() => {
-    watch(() => proxy.pageNum, (pageNum) => {
-      if (localCurrent.value > pageNum) {
-        localCurrent.value = pageNum;
+    watch(() => proxy.totalPageNum, (totalPageNum) => {
+      if (localCurrent.value > totalPageNum) {
+        localCurrent.value = totalPageNum;
       }
     });
   });
@@ -12050,7 +12241,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;
@@ -12098,7 +12289,7 @@ var useSmallList = () => {
       "onKeydown": handlePageEditorKeydown
     }, [localCurrent.value]), createVNode("span", null, [createTextVNode("/")]), createVNode("span", {
       "class": "bk-pagination-small-list-total"
-    }, [proxy.pageNum])]),
+    }, [proxy.totalPageNum])]),
     content: () => createVNode("div", {
       "class": "bk-pagination-picker-list"
     }, [list.value.map((item) => createVNode("div", {
@@ -12167,12 +12358,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 = defineComponent({
+var Component$5 = defineComponent({
   name: "Pagination",
   props: paginationProps,
   emits: ["update:modelValue", "change", "update:limit", "limit-change"],
   setup(props, context) {
-    const pageNum = ref(0);
+    const totalPageNum = ref(0);
     const {
       count,
       limit
@@ -12191,7 +12382,8 @@ var Component$6 = defineComponent({
       render: renderLimit
     } = useLimit();
     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
     });
@@ -12207,7 +12399,7 @@ var Component$6 = defineComponent({
       context.emit("limit-change", localLimit2);
     });
     return {
-      pageNum,
+      totalPageNum,
       renderTotal,
       renderList,
       renderLimit,
@@ -12222,7 +12414,7 @@ var Component$6 = defineComponent({
     });
     const layoutMap = {
       total: this.renderTotal,
-      list: this.renderList,
+      list: this.small ? this.renderSmallList : this.renderList,
       limit: this.renderLimit
     };
     return createVNode("div", {
@@ -12230,10 +12422,10 @@ var Component$6 = 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);
@@ -12498,7 +12690,7 @@ class TableRender {
     })]);
   }
 }
-var Component$5 = defineComponent({
+var Component$4 = defineComponent({
   name: "Table",
   props: tableProps,
   emits: ["column-pick", "row-click", "page-limit-change", "page-value-change"],
@@ -12633,68 +12825,940 @@ var Component$5 = defineComponent({
     }, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
   }
 });
-const BkTable = withInstall(Component$5);
-var Component$4 = 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 customRef((track, trigger) => ({
+    get() {
+      track();
+      return innerValue;
+    },
+    set(newValue) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        innerValue = newValue;
+        trigger();
+      }, delay);
+    }
+  }));
+}
+function usePage(pageSize) {
+  const state = 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 i = 0; i < state.totalSize; i += state.pageSize) {
+        list.push(allList.slice(i, i + 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
+  } = toRefs(props);
+  const flatList = reactive([]);
+  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 i = 0; i < len; i++) {
+    if ((str.charCodeAt(i) & 65280) !== 0) {
+      bitLen += 1;
+    }
+    bitLen += 1;
+  }
+  return bitLen;
+};
+var ListTagRender = 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, h$1, this);
+    }
+    const displayText = this.node[this.displayKey];
+    return createVNode("div", {
+      "class": "bk-selector-node"
+    }, [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 = defineComponent({
+  name: "TagRender",
+  props: {
+    node: PropTypes.object,
+    displayKey: PropTypes.string,
+    tpl: {
+      type: Function,
+      default: null
+    }
+  },
+  render() {
+    if (this.tpl) {
+      return this.tpl(this.node, h$1, this);
+    }
+    return createVNode("div", {
+      "class": "tag"
+    }, [createVNode("span", {
+      "class": "text"
+    }, [this.node[this.displayKey]])]);
+  }
+});
+var TagInput = 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 = 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 = computed(() => ({
-      borderRadius: props.radius
+    const state = reactive({
+      isEdit: false,
+      isHover: false,
+      focusItemIndex: props.allowCreate ? -1 : 0
+    });
+    const popoverProps = reactive({
+      isShow: false,
+      width: 190,
+      modifiers: [{
+        name: "offset",
+        options: {
+          offset: [0, 4]
+        }
+      }]
+    });
+    const {
+      maxResult
+    } = toRefs(props);
+    const {
+      pageState,
+      initPage,
+      pageChange
+    } = usePage(maxResult);
+    const curInputValue = useDebouncedRef("", 150);
+    const tagInputRef = ref(null);
+    const bkTagSelectorRef = ref(null);
+    const tagListRef = ref(null);
+    const tagInputItemRef = ref(null);
+    const selectorListRef = ref(null);
+    const popoverRef = ref(null);
+    const timer = ref(null);
+    const showTagClose = computed(() => !props.disabled && props.hasDeleteIcon);
+    const isSingleSelect = computed(() => props.maxData === 1);
+    const isShowPlaceholder = computed(() => listState.selectedTagList.length === 0 && curInputValue.value === "" && !state.isEdit);
+    const isShowClear = computed(() => props.clearable && !props.disabled && listState.selectedTagList.length !== 0 && (props.showClearOnlyHover ? state.isHover : true));
+    const triggerClass = computed(() => ({
+      "bk-tag-input-trigger": true,
+      active: state.isEdit,
+      disabled: props.disabled
     }));
-    const handleClose = (e) => {
-      e.preventDefault();
+    watch([() => [...props.modelValue], () => [...props.list]], () => {
+      initData();
+    });
+    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;
+      }
+    });
+    watch(() => popoverProps.isShow, (show) => {
+      changePopoverOffset();
+      if (show) {
+        if (selectorListRef.value) {
+          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;
+      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 = reactive({
+      localList: [],
+      tagListCache: [],
+      selectedTagList: [],
+      selectedTagListCache: []
+    });
+    const tagList = computed(() => listState.selectedTagList.map((tag2) => tag2[props.saveKey]));
+    const formatList = useFlatList(props);
+    const renderList = 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;
+    };
+    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
+      };
+      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) {
+        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
+    }, toRefs(state)), toRefs(listState)), 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) => createVNode("li", {
+          "class": "bk-selector-group-item"
+        }, [createVNode("span", {
+          "class": "group-name"
+        }, [group.name, createTextVNode(" ("), group.children.length, createTextVNode(")")]), createVNode("ul", {
+          "class": "bk-selector-group-list-item"
+        }, [group.children.map((item, index) => createVNode("li", {
+          "class": ["bk-selector-list-item", {
+            disabled: item.disabled
+          }, this.activeClass(item, index)],
+          "onClick": this.handleTagSelected.bind(this, item, "select")
+        }, [createVNode(ListTagRender, {
+          "node": item,
+          "displayKey": this.displayKey,
+          "tpl": this.tpl,
+          "searchKey": this.searchKey,
+          "searchKeyword": this.curInputValue
+        }, null)]))])]));
+      }
+      return this.renderList.map((item, index) => createVNode("li", {
+        "class": ["bk-selector-list-item", {
+          disabled: item.disabled
+        }, this.activeClass(item, index)],
+        "onClick": this.handleTagSelected.bind(this, item, "select")
+      }, [createVNode(ListTagRender, {
+        "node": item,
+        "displayKey": this.displayKey,
+        "tpl": this.tpl,
+        "searchKey": this.searchKey,
+        "searchKeyword": this.curInputValue
+      }, null)]));
+    };
     return createVNode("div", {
-      "class": this.wrapperCls,
-      "style": this.wrapperStyle,
-      "onClick": this.handleClick
-    }, [this.$slots.icon ? createVNode("span", {
-      "class": "bk-tag-icon"
-    }, [this.$slots.icon()]) : "", createVNode("span", null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.closable ? 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
+    }, [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: () => createVNode("div", {
+        "class": this.triggerClass
+      }, [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 withDirectives(createVNode("li", {
+          "class": "tag-item",
+          "onClick": this.tagFocus
+        }, [createVNode(TagRender, {
+          "node": item,
+          "tpl": this.tagTpl,
+          "displayKey": this.displayKey
+        }, null), this.showTagClose ? createVNode(error, {
+          "class": "remove-tag",
+          "onClick": this.handleTagRemove.bind(this, item, index)
+        }, null) : null]), [[resolveDirective("bk-tooltips"), tooltips2]]);
+      }), withDirectives(createVNode("li", {
+        "ref": "tagInputItemRef",
+        "id": "tagInputItem",
+        "class": "tag-input-item",
+        "role": "input"
+      }, [withDirectives(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), [[vModelText, this.curInputValue]])]), [[vShow, this.isEdit]])]), withDirectives(createVNode("p", {
+        "class": "placeholder"
+      }, [this.placeholder]), [[vShow, this.isShowPlaceholder]]), this.isShowClear ? createVNode(close$1, {
+        "class": "clear-icon",
+        "onClick": this.handleClear
+      }, null) : null]),
+      content: () => createVNode("div", {
+        "class": "bk-selector-list"
+      }, [createVNode("ul", {
+        "ref": "selectorListRef",
+        "style": {
+          "max-height": `${this.contentMaxHeight}px`
+        },
+        "class": "outside-ul"
+      }, [renderSelectorList(), this.isPageLoading ? createVNode("li", {
+        "class": "bk-selector-list-item loading"
+      }, [createVNode(BkLoading, {
+        "theme": "primary",
+        "size": BkLoadingSize.Small
+      }, null)]) : null])])
+    })]);
   }
 });
-const BkTag = withInstall(Component$4);
+TagInput.install = (Vue) => {
+  Vue.component(TagInput.name, TagInput);
+};
 var bkDivider = defineComponent({
   name: "Divider",
   props: {
@@ -18336,35 +19400,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 i = 0; i < array.length; i++) {
+    const arrLength = array.length;
+    for (let i = 0; i < arrLength; i++) {
       const item = array[i];
       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}-${i}` : `${i}`;
+          const hasChildren = !!(item[children] || []).length;
           const attrs = {
             __depth: depth,
             __index: i,
             __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 });
@@ -19050,6 +20120,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   Switcher: BkSwitcher,
   Table: BkTable,
   Tag: BkTag,
+  TagInput,
   Divider: BkDivider,
   Tab: BKTab,
   TabPanel: BKTabPanel,
@@ -19080,4 +20151,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkOption, OptionGroup as BkOptionGroup, BkBreadcrumb as Breadcrumb, BreadcrumbItem, BkButton as Button, ButtonGroup, BkCard as Card, BkCheckbox as Checkbox, CheckboxGroup, BkCollaspe as Collapse, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, FormItem, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, RadioButton, RadioGroup, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BKTab as Tab, BKTabPanel as TabPanel, BkTable as Table, BkTag as Tag, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, preset as default, mousewheel };
+export { BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkOption, OptionGroup as BkOptionGroup, BkBreadcrumb as Breadcrumb, BreadcrumbItem, BkButton as Button, ButtonGroup, BkCard as Card, BkCheckbox as Checkbox, CheckboxGroup, BkCollaspe as Collapse, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, FormItem, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, RadioButton, RadioGroup, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BKTab as Tab, BKTabPanel as TabPanel, BkTable as Table, BkTag as Tag, TagInput, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, preset as default, mousewheel };