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

package/dist/bkui-vue.umd.js

@@ -81,6 +81,8 @@ var __publicField = (obj, key, value) => {
   var transfer = "";
   var pagination = "";
   var timeline = "";
+  var resizeLayout = "";
+  var tagInput = "";
   const BKLAYERD_INDEX_EFAULT_VALUE = {
     ["bottom"]: 0,
     ["content"]: 1,
@@ -9529,8 +9531,9 @@ ${$(r2)}`), n2;
         };
       });
       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) => {
@@ -9607,7 +9610,7 @@ ${$(r2)}`), n2;
               "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)])];
@@ -10359,22 +10362,79 @@ ${$(r2)}`), n2;
       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: {
@@ -10390,28 +10450,12 @@ ${$(r2)}`), n2;
         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;
@@ -10419,9 +10463,11 @@ ${$(r2)}`), n2;
       };
       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,
@@ -10455,41 +10501,38 @@ ${$(r2)}`), n2;
     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
       });
@@ -10498,7 +10541,8 @@ ${$(r2)}`), n2;
       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,
@@ -10515,13 +10559,13 @@ ${$(r2)}`), n2;
         "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;
@@ -10923,6 +10967,69 @@ ${$(r2)}`), n2;
     }
   }
   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
@@ -10930,43 +11037,84 @@ ${$(r2)}`), n2;
     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,
@@ -10977,63 +11125,63 @@ ${$(r2)}`), n2;
         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);
@@ -11047,129 +11195,195 @@ ${$(r2)}`), n2;
           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,
@@ -11179,35 +11393,12 @@ ${$(r2)}`), n2;
         "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);
   }
@@ -11217,7 +11408,7 @@ ${$(r2)}`), n2;
   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,
@@ -11274,7 +11465,7 @@ ${$(r2)}`), n2;
       });
     }
   });
-  const BkSideslider = withInstall(Component$a);
+  const BkSideslider = withInstall(Component$9);
   const stepsProps = {
     theme: PropTypes.theme().def("primary"),
     size: PropTypes.size(),
@@ -11288,7 +11479,7 @@ ${$(r2)}`), n2;
     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"],
@@ -11424,8 +11615,8 @@ ${$(r2)}`), n2;
       })]);
     }
   });
-  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(""),
@@ -11519,7 +11710,7 @@ ${$(r2)}`), n2;
       }, [isChecked.value ? props.onText : props.offText]) : ""]);
     }
   });
-  const BkSwitcher = withInstall(Component$8);
+  const BkSwitcher = withInstall(Component$7);
   const EventProps$1 = {
     onContentScroll: Function
   };
@@ -11623,7 +11814,7 @@ ${$(r2)}`), n2;
       }
     }
   };
-  var Component$7 = vue.defineComponent({
+  var Component$6 = vue.defineComponent({
     name: "VirtualRender",
     directives: {
       bkVirtualRender: virtualRender
@@ -11770,7 +11961,7 @@ ${$(r2)}`), n2;
       };
     }
   });
-  const BkVirtualRender = withInstall(Component$7);
+  const BkVirtualRender = withInstall(Component$6);
   const BORDER_OPRIONS = ["none", "row", "col", "outer"];
   const EventProps = {
     onRowClick: Function
@@ -11858,27 +12049,27 @@ ${$(r2)}`), n2;
     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);
       }
@@ -11886,19 +12077,19 @@ ${$(r2)}`), n2;
     });
     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;
         }
       });
     });
@@ -11914,17 +12105,17 @@ ${$(r2)}`), n2;
       }
       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,
@@ -11963,14 +12154,14 @@ ${$(r2)}`), n2;
       "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
@@ -11990,23 +12181,23 @@ ${$(r2)}`), n2;
     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;
       });
@@ -12014,9 +12205,9 @@ ${$(r2)}`), n2;
       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;
         }
       });
     });
@@ -12053,7 +12244,7 @@ ${$(r2)}`), n2;
     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;
@@ -12101,7 +12292,7 @@ ${$(r2)}`), n2;
         "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", {
@@ -12170,12 +12361,12 @@ ${$(r2)}`), n2;
       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
@@ -12194,7 +12385,8 @@ ${$(r2)}`), n2;
         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
       });
@@ -12210,7 +12402,7 @@ ${$(r2)}`), n2;
         context.emit("limit-change", localLimit2);
       });
       return {
-        pageNum,
+        totalPageNum,
         renderTotal,
         renderList,
         renderLimit,
@@ -12225,7 +12417,7 @@ ${$(r2)}`), n2;
       });
       const layoutMap = {
         total: this.renderTotal,
-        list: this.renderList,
+        list: this.small ? this.renderSmallList : this.renderList,
         limit: this.renderLimit
       };
       return vue.createVNode("div", {
@@ -12233,10 +12425,10 @@ ${$(r2)}`), n2;
       }, [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);
@@ -12501,7 +12693,7 @@ ${$(r2)}`), n2;
       })]);
     }
   }
-  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"],
@@ -12636,68 +12828,940 @@ ${$(r2)}`), n2;
       }, [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: {
@@ -18339,35 +19403,41 @@ ${$(r2)}`), n2;
     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 });
@@ -19053,6 +20123,7 @@ ${$(r2)}`), n2;
     Switcher: BkSwitcher,
     Table: BkTable,
     Tag: BkTag,
+    TagInput,
     Divider: BkDivider,
     Tab: BKTab,
     TabPanel: BKTabPanel,
@@ -19127,6 +20198,7 @@ ${$(r2)}`), n2;
   exports2.TabPanel = BKTabPanel;
   exports2.Table = BkTable;
   exports2.Tag = BkTag;
+  exports2.TagInput = TagInput;
   exports2.Transfer = Transfer;
   exports2.Tree = BkTree;
   exports2.VirtualRender = BkVirtualRender;