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

package/dist/bkui-vue.esm.js

@@ -79,6 +79,7 @@ var transfer = "";
 var pagination = "";
 var timeline = "";
 var resizeLayout = "";
+var tagInput = "";
 const BKLAYERD_INDEX_EFAULT_VALUE = {
   ["bottom"]: 0,
   ["content"]: 1,
@@ -10370,7 +10371,7 @@ function useRegistry(data2) {
     unregister
   };
 }
-function useDebouncedRef(value, delay = 200) {
+function useDebouncedRef$1(value, delay = 200) {
   let timeout;
   let innerValue = value;
   return customRef((track, trigger) => ({
@@ -10414,7 +10415,7 @@ function usePopover(config) {
   };
 }
 function useRemoteSearch(method) {
-  const searchKey = useDebouncedRef("");
+  const searchKey = useDebouncedRef$1("");
   const searchLoading = ref(false);
   watch(searchKey, async () => {
     searchLoading.value = true;
@@ -12825,6 +12826,939 @@ var Component$4 = defineComponent({
   }
 });
 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
+  },
+  props: tagProps(),
+  emits: ["update:modelValue", "change", "select", "blur", "remove", "removeAll"],
+  setup(props, {
+    emit
+  }) {
+    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
+    }));
+    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();
+      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 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();
+      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();
+        }
+      }
+    };
+    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() {
+    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": "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])])
+    })]);
+  }
+});
+TagInput.install = (Vue) => {
+  Vue.component(TagInput.name, TagInput);
+};
 var bkDivider = defineComponent({
   name: "Divider",
   props: {
@@ -18466,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 });
@@ -19180,6 +20120,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   Switcher: BkSwitcher,
   Table: BkTable,
   Tag: BkTag,
+  TagInput,
   Divider: BkDivider,
   Tab: BKTab,
   TabPanel: BKTabPanel,
@@ -19210,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 };