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

package/dist/index.esm.js

@@ -16185,6 +16185,7 @@ var BORDER_OPTION = /* @__PURE__ */ ((BORDER_OPTION2) => {
   BORDER_OPTION2["ROW"] = "row";
   BORDER_OPTION2["COL"] = "col";
   BORDER_OPTION2["OUTER"] = "outer";
+  BORDER_OPTION2["HORIZONTAL"] = "horizontal";
   return BORDER_OPTION2;
 })(BORDER_OPTION || {});
 var ROW_HOVER = /* @__PURE__ */ ((ROW_HOVER2) => {
@@ -19348,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: {
@@ -19424,6 +19450,10 @@ const tagProps = () => ({
   popoverProps: {
     type: Object,
     default: () => ({})
+  },
+  collapseTags: {
+    type: Boolean,
+    default: false
   }
 });
 var TagRender = defineComponent({
@@ -20090,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)), {
@@ -20105,6 +20139,8 @@ var Component$d = defineComponent({
       selectorListRef,
       popoverRef,
       triggerClass,
+      overflowTagIndex,
+      localCollapseTags,
       focusInputTrigger,
       activeClass,
       handleInput,
@@ -20151,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,
@@ -20177,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",
@@ -28272,15 +28318,17 @@ var useTreeInit = (props2) => {
     deep: true
   });
   if (props2.selectable) {
-    watch(() => props2.selected, (newData) => {
-      afterSelectWatch.length = 0;
-      afterSelectEvents.forEach((event) => {
-        Reflect.apply(event, globalThis, [newData]);
-        afterSelectWatch.push(() => Reflect.apply(event, globalThis, [newData]));
+    onMounted(() => {
+      watch(() => props2.selected, (newData) => {
+        afterSelectWatch.length = 0;
+        afterSelectEvents.forEach((event) => {
+          Reflect.apply(event, globalThis, [newData]);
+          afterSelectWatch.push(() => Reflect.apply(event, globalThis, [newData]));
+        });
+        registerNextLoop("afterSelectWatch", afterSelectWatch);
+      }, {
+        immediate: true
       });
-      registerNextLoop("afterSelectWatch", afterSelectWatch);
-    }, {
-      immediate: true
     });
   }
   const afterDataUpdate = (callFn) => {