bkui-vue 0.0.1-beta.225 → 0.0.1-beta.226

package/dist/index.esm.js

@@ -19349,6 +19349,31 @@ const getCharLength = (str) => {
   }
   return bitLen;
 };
+const useTagsOverflow = (tagInputRef, collapseTags, selectedTagList) => {
+  watch([selectedTagList, collapseTags], () => {
+    calcOverflow();
+  }, { flush: "post" });
+  const overflowTagIndex = ref(null);
+  const calcOverflow = () => {
+    if (!collapseTags.value)
+      return;
+    overflowTagIndex.value = null;
+    setTimeout(() => {
+      const tags = Array.from(tagInputRef.value.querySelectorAll(".tag-item"));
+      const tagIndexInSecondRow = tags.findIndex((currentTag, index) => {
+        if (!index) {
+          return false;
+        }
+        const previousTag = tags[index - 1];
+        return previousTag.offsetTop !== currentTag.offsetTop;
+      });
+      overflowTagIndex.value = tagIndexInSecondRow > 0 ? tagIndexInSecondRow - 1 : null;
+    });
+  };
+  return {
+    overflowTagIndex
+  };
+};
 var ListTagRender = defineComponent({
   name: "ListTagRender",
   props: {
@@ -19425,6 +19450,10 @@ const tagProps = () => ({
   popoverProps: {
     type: Object,
     default: () => ({})
+  },
+  collapseTags: {
+    type: Boolean,
+    default: false
   }
 });
 var TagRender = defineComponent({
@@ -20091,6 +20120,10 @@ var Component$d = defineComponent({
         listState.localList.push(data2);
       }
     };
+    const localCollapseTags = computed(() => props2.collapseTags ? props2.collapseTags && !state.isEdit : props2.collapseTags);
+    const {
+      overflowTagIndex
+    } = useTagsOverflow(bkTagSelectorRef, localCollapseTags, tagList);
     return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
       popoverProps
     }, toRefs(state)), toRefs(listState)), toRefs(pageState)), {
@@ -20106,6 +20139,8 @@ var Component$d = defineComponent({
       selectorListRef,
       popoverRef,
       triggerClass,
+      overflowTagIndex,
+      localCollapseTags,
       focusInputTrigger,
       activeClass,
       handleInput,
@@ -20152,8 +20187,12 @@ var Component$d = defineComponent({
             content: item[this.tooltipKey],
             disabled: !this.tooltipKey
           };
+          const isOverflow = this.localCollapseTags && this.overflowTagIndex && index >= this.overflowTagIndex;
           return withDirectives(createVNode("li", {
             "class": "tag-item",
+            "style": {
+              display: isOverflow ? "none" : ""
+            },
             "onClick": this.tagFocus
           }, [createVNode(TagRender, {
             "node": item,
@@ -20178,7 +20217,13 @@ var Component$d = defineComponent({
           "onBlur": this.handleBlur,
           "onKeydown": this.handleKeydown,
           "onPaste": this.handlePaste
-        }, null), [[vModelText, this.curInputValue]])]), [[vShow, this.isEdit]])]), withDirectives(createVNode("p", {
+        }, null), [[vModelText, this.curInputValue]])]), [[vShow, this.isEdit]]), !!this.overflowTagIndex && this.localCollapseTags && createVNode("li", {
+          "class": "tag-item"
+        }, [createVNode("div", {
+          "class": "tag"
+        }, [createVNode("span", {
+          "class": "text"
+        }, [createTextVNode("+"), this.selectedTagList.length - this.overflowTagIndex])])])]), withDirectives(createVNode("p", {
           "class": "placeholder"
         }, [this.placeholder]), [[vShow, this.isShowPlaceholder]]), (_c = (_b = (_a = this.$slots) == null ? void 0 : _a.suffix) == null ? void 0 : _b.call(_a)) != null ? _c : this.isShowClear && createVNode(close$1, {
           "class": "clear-icon",