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

package/dist/index.esm.js

@@ -11130,6 +11130,9 @@ const ClickOutside = {
     nodeList$1.delete(el);
   }
 };
+ClickOutside.install = (app) => {
+  app.directive("bkTooltips", ClickOutside);
+};
 const nodeList = /* @__PURE__ */ new Map();
 const tooltips = {
   beforeMount(el, binding) {
@@ -11315,6 +11318,16 @@ const createInstance = (el, binding) => {
       handleMouseLeave
     }
   });
+  const destroyInstance = (element) => {
+    var _a, _b;
+    handleMouseLeave();
+    (_a = element != null ? element : el) == null ? void 0 : _a.removeEventListener("mouseenter", handleMouseEnter);
+    (_b = element != null ? element : el) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
+  };
+  return {
+    destroyInstance,
+    instance
+  };
 };
 const ellipsis = {
   mounted(el, binding) {
@@ -11405,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",
@@ -13181,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,
@@ -13229,7 +13247,7 @@ var Component$p = defineComponent({
     return {
       boundary,
       arrow: props2.arrow,
-      refReference,
+      refDefaultReference,
       refContent,
       refArrow,
       content,
@@ -13246,7 +13264,7 @@ var Component$p = defineComponent({
       "ref": "refRoot"
     }, {
       default: () => [createVNode(Reference, {
-        "ref": "refReference"
+        "ref": "refDefaultReference"
       }, {
         default: () => {
           var _a, _b, _c;
@@ -14846,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);
@@ -14923,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)
     }, {
@@ -14968,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..."),
@@ -15011,7 +15032,10 @@ var Component$i = defineComponent({
       showSelectAll,
       scrollHeight,
       list,
-      displayKey
+      displayKey,
+      collapseTags,
+      autoHeight,
+      popoverOptions
     } = toRefs(props2);
     const formItem = useFormItem();
     const inputRef = ref();
@@ -15020,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());
@@ -15038,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);
@@ -15075,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
@@ -15377,6 +15417,7 @@ var Component$i = defineComponent({
       searchRef,
       selectTagInputRef,
       virtualRenderRef,
+      popoverRef,
       searchLoading,
       isOptionsEmpty,
       isSearchEmpty,
@@ -15388,6 +15429,8 @@ var Component$i = defineComponent({
       isShowSelectAll,
       virtualHeight,
       filterList,
+      isCollapseTags,
+      popoverConfig,
       setHover,
       cancelHover,
       handleFocus,
@@ -15417,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, {
@@ -15459,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: () => {
@@ -15494,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,
@@ -15567,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()
@@ -16015,8 +16053,9 @@ const IColumnType = {
   width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
   minWidth: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]).def(),
   showOverflowTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    content: PropTypes.string,
-    disabled: PropTypes.bool
+    content: PropTypes.string.def(""),
+    disabled: PropTypes.bool.def(false),
+    watchCellResize: PropTypes.bool.def(true)
   })]).def(false),
   type: PropTypes.commonType(["selection", "index", "expand", "none"], "columnType").def("none"),
   resizable: PropTypes.bool.def(true),
@@ -16887,6 +16926,8 @@ var TableCell = defineComponent({
     const {
       showOverflowTooltip = false
     } = props2.column || {};
+    let observerIns = null;
+    let bkEllipsisIns = null;
     const resolveTooltipOption = () => {
       let disabled = true;
       let content = refRoot.value.innerText;
@@ -16905,17 +16946,42 @@ var TableCell = defineComponent({
         content
       };
     };
+    const resolveOverflowTooltip = () => {
+      if (!refRoot.value) {
+        return;
+      }
+      const textWidth = getElementTextWidth(refRoot.value);
+      const cellWidth = refRoot.value.clientWidth;
+      isTipsEnabled.value = textWidth > cellWidth;
+      if (isTipsEnabled.value) {
+        const bindings = ref(resolveTooltipOption());
+        if (bkEllipsisIns === null) {
+          bkEllipsisIns = createInstance(refRoot.value, bindings);
+        }
+      } else {
+        bkEllipsisIns == null ? void 0 : bkEllipsisIns.destroyInstance(refRoot.value);
+        bkEllipsisIns = null;
+      }
+    };
     onMounted(() => {
-      if (props2.column.showOverflowTooltip) {
-        const textWidth = getElementTextWidth(refRoot.value);
-        const cellWidth = refRoot.value.clientWidth;
-        isTipsEnabled.value = textWidth > cellWidth;
-        if (isTipsEnabled.value) {
-          const bindings = ref(resolveTooltipOption());
-          createInstance(refRoot.value, bindings);
+      var _a;
+      const {
+        disabled
+      } = resolveTooltipOption();
+      if (!disabled) {
+        resolveOverflowTooltip();
+        if (((_a = props2.column.showOverflowTooltip) == null ? void 0 : _a.watchCellResize) !== false) {
+          observerIns = observerResize(refRoot.value, () => {
+            resolveOverflowTooltip();
+          }, 60, true);
+          observerIns.start();
         }
       }
     });
+    onBeforeUnmount(() => {
+      observerIns.stop();
+      bkEllipsisIns == null ? void 0 : bkEllipsisIns.destroyInstance(refRoot.value);
+    });
     return () => {
       var _a;
       return createVNode("div", {