bkui-vue 0.0.1-beta.178 → 0.0.1-beta.179

package/dist/index.esm.js

@@ -11418,7 +11418,8 @@ const PopoverProps = __spreadValues({
   autoPlacement: PropTypes.bool.def(false),
   autoVisibility: PropTypes.bool.def(true),
   disableOutsideClick: PropTypes.bool.def(false),
-  disableTransform: PropTypes.bool.def(false)
+  disableTransform: PropTypes.bool.def(false),
+  reference: PropTypes.object.def(null)
 }, EventProps$1);
 var Reference = defineComponent({
   name: "PopReference",
@@ -13194,11 +13195,15 @@ var Component$p = defineComponent({
       theme,
       disableTeleport
     } = props2;
-    const refReference = ref();
+    const {
+      reference: reference2
+    } = toRefs(props2);
+    const refDefaultReference = ref();
     const refContent = ref();
     const refArrow = ref();
     const refRoot = ref();
     const isFullscreen = ref(false);
+    const refReference = computed(() => reference2.value || refDefaultReference.value);
     const {
       showPopover,
       hidePopover,
@@ -13242,7 +13247,7 @@ var Component$p = defineComponent({
     return {
       boundary,
       arrow: props2.arrow,
-      refReference,
+      refDefaultReference,
       refContent,
       refArrow,
       content,
@@ -13259,7 +13264,7 @@ var Component$p = defineComponent({
       "ref": "refRoot"
     }, {
       default: () => [createVNode(Reference, {
-        "ref": "refReference"
+        "ref": "refDefaultReference"
       }, {
         default: () => {
           var _a, _b, _c;
@@ -14859,8 +14864,10 @@ var SelectTagInput = defineComponent({
     watch(modelValue, () => {
       value.value = modelValue.value;
     });
-    watch(selected, () => {
+    watch([selected, collapseTags], () => {
       calcOverflow();
+    }, {
+      flush: "post"
     });
     const handleRemoveTag = (val) => {
       emit("remove", val);
@@ -14936,7 +14943,7 @@ var SelectTagInput = defineComponent({
       "closable": true,
       "theme": this.tagTheme,
       "style": {
-        display: this.overflowTagIndex && index2 >= this.overflowTagIndex ? "none" : ""
+        display: this.collapseTags && this.overflowTagIndex && index2 >= this.overflowTagIndex ? "none" : ""
       },
       "onClose": () => this.handleRemoveTag(item.value)
     }, {
@@ -14981,6 +14988,7 @@ var Component$i = defineComponent({
     tagTheme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
     behavior: PropTypes.oneOf(["normal", "simplicity"]).def("normal"),
     collapseTags: PropTypes.bool.def(false),
+    autoHeight: PropTypes.bool.def(true),
     noDataText: PropTypes.string.def("\u65E0\u6570\u636E"),
     noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
     loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
@@ -15024,7 +15032,10 @@ var Component$i = defineComponent({
       showSelectAll,
       scrollHeight,
       list,
-      displayKey
+      displayKey,
+      collapseTags,
+      autoHeight,
+      popoverOptions
     } = toRefs(props2);
     const formItem = useFormItem();
     const inputRef = ref();
@@ -15033,6 +15044,7 @@ var Component$i = defineComponent({
     const searchRef = ref();
     const selectTagInputRef = ref();
     const virtualRenderRef = ref();
+    const popoverRef = ref();
     const optionsMap = ref(/* @__PURE__ */ new Map());
     const options = computed(() => [...optionsMap.value.values()]);
     const groupsMap = ref(/* @__PURE__ */ new Map());
@@ -15051,6 +15063,10 @@ var Component$i = defineComponent({
     }, {
       deep: true
     });
+    watch(selected, () => {
+      var _a;
+      (_a = popoverRef.value) == null ? void 0 : _a.updatePopover(null, popoverConfig.value);
+    });
     const filterList = computed(() => isRemoteSearch.value ? list.value : list.value.filter((item) => {
       var _a;
       return (_a = toLowerCase(String(item[displayKey.value]))) == null ? void 0 : _a.includes(searchKey.value);
@@ -15088,6 +15104,17 @@ var Component$i = defineComponent({
       }
       return "";
     });
+    const isCollapseTags = computed(() => autoHeight.value ? collapseTags.value && !isPopoverShow.value : collapseTags.value);
+    const popoverConfig = computed(() => lodash.exports.merge({
+      theme: "light bk-select-popover",
+      trigger: "manual",
+      width: popperWidth.value,
+      arrow: false,
+      placement: "bottom-start",
+      isShow: isPopoverShow.value,
+      reference: selectTagInputRef.value,
+      offset: 6
+    }, popoverOptions.value));
     const {
       register,
       unregister
@@ -15390,6 +15417,7 @@ var Component$i = defineComponent({
       searchRef,
       selectTagInputRef,
       virtualRenderRef,
+      popoverRef,
       searchLoading,
       isOptionsEmpty,
       isSearchEmpty,
@@ -15401,6 +15429,8 @@ var Component$i = defineComponent({
       isShowSelectAll,
       virtualHeight,
       filterList,
+      isCollapseTags,
+      popoverConfig,
       setHover,
       cancelHover,
       handleFocus,
@@ -15430,15 +15460,6 @@ var Component$i = defineComponent({
       [this.size]: true,
       [this.behavior]: true
     });
-    const basePopoverOptions = {
-      theme: "light bk-select-popover",
-      trigger: "manual",
-      width: this.popperWidth,
-      arrow: false,
-      placement: "bottom-start",
-      isShow: this.isPopoverShow
-    };
-    const popoverOptions = lodash.exports.merge(basePopoverOptions, this.popoverOptions);
     const suffixIcon = () => {
       if (this.loading) {
         return createVNode(BkLoading, {
@@ -15472,7 +15493,7 @@ var Component$i = defineComponent({
           "filterable": this.isInput,
           "disabled": this.isDisabled,
           "onRemove": this.handleDeleteTag,
-          "collapseTags": this.collapseTags,
+          "collapseTags": this.isCollapseTags,
           "onEnter": this.handleInputEnter
         }, {
           prefix: () => {
@@ -15507,6 +15528,9 @@ var Component$i = defineComponent({
     };
     const renderSelectTrigger = () => createVNode("div", {
       "class": "bk-select-trigger",
+      "style": {
+        height: this.autoHeight && this.collapseTags ? "32px" : ""
+      },
       "ref": "triggerRef",
       "onClick": this.handleTogglePopover,
       "onMouseenter": this.setHover,
@@ -15580,8 +15604,9 @@ var Component$i = defineComponent({
     };
     return createVNode("div", {
       "class": selectClass
-    }, [createVNode(BkPopover2, mergeProps(popoverOptions, {
-      "onClickoutside": this.handleClickOutside
+    }, [createVNode(BkPopover2, mergeProps(this.popoverConfig, {
+      "onClickoutside": this.handleClickOutside,
+      "ref": "popoverRef"
     }), {
       default: () => renderSelectTrigger(),
       content: () => renderSelectContent()
@@ -16922,6 +16947,9 @@ var TableCell = defineComponent({
       };
     };
     const resolveOverflowTooltip = () => {
+      if (!refRoot.value) {
+        return;
+      }
       const textWidth = getElementTextWidth(refRoot.value);
       const cellWidth = refRoot.value.clientWidth;
       isTipsEnabled.value = textWidth > cellWidth;
@@ -16951,6 +16979,7 @@ var TableCell = defineComponent({
       }
     });
     onBeforeUnmount(() => {
+      observerIns.stop();
       bkEllipsisIns == null ? void 0 : bkEllipsisIns.destroyInstance(refRoot.value);
     });
     return () => {