@varlet/ui 3.7.1 → 3.7.2-alpha.1733247317826

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/index.bundle.mjs

@@ -280,7 +280,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.7.1'
+const version = '3.7.2-alpha.1733247317826'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -186,7 +186,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.7.1'
+const version = '3.7.2-alpha.1733247317826'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/Menu.mjs

@@ -10,10 +10,7 @@ function __render__(_ctx, _cache) {
     "div",
     {
       ref: "host",
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleHostClick && _ctx.handleHostClick(...args)),
-      onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleHostMouseenter && _ctx.handleHostMouseenter(...args)),
-      onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleHostMouseleave && _ctx.handleHostMouseleave(...args))
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
     },
     [
       _renderSlot(_ctx.$slots, "default"),
@@ -34,7 +31,7 @@ function __render__(_ctx, _cache) {
                 ref: "popover",
                 style: _normalizeStyle({
                   zIndex: _ctx.zIndex,
-                  width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : void 0
+                  width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.referenceSize.width)) : void 0
                 }),
                 class: _normalizeClass(
                   _ctx.classes(
@@ -64,8 +61,8 @@ function __render__(_ctx, _cache) {
         }, 8, ["name", "onAfterEnter", "onAfterLeave"])
       ], 8, ["to", "disabled"]))
     ],
-    34
-    /* CLASS, NEED_HYDRATION */
+    2
+    /* CLASS */
   );
 }
 const __sfc__ = defineComponent({
@@ -76,12 +73,9 @@ const __sfc__ = defineComponent({
     const {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
@@ -91,12 +85,14 @@ const __sfc__ = defineComponent({
       // expose
       close,
       // expose
-      resize
+      resize,
+      // expose
+      setReference
     } = usePopover(props2);
     return {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
       teleportDisabled,
@@ -104,16 +100,14 @@ const __sfc__ = defineComponent({
       toSizeUnit,
       n,
       classes,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
       handleClosed,
       resize,
       open,
-      close
+      close,
+      setReference
     };
   }
 });

package/es/menu/props.mjs

@@ -6,7 +6,7 @@ const props = {
     type: String,
     default: "click"
   },
-  reference: String,
+  reference: [String, Object],
   placement: {
     type: String,
     default: "cover-top-start"

package/es/menu/usePopover.mjs

@@ -40,8 +40,8 @@ var __async = (__this, __arguments, generator) => {
 import flip from "@popperjs/core/lib/modifiers/flip.js";
 import offset from "@popperjs/core/lib/modifiers/offset.js";
 import computeStyles from "@popperjs/core/lib/modifiers/computeStyles.js";
-import { onWindowResize, useClickOutside, useEventListener, useVModel } from "@varlet/use";
-import { doubleRaf, getStyle, call, preventDefault } from "@varlet/shared";
+import { onWindowResize, useEventListener, useVModel } from "@varlet/use";
+import { doubleRaf, getStyle, call, preventDefault, isString } from "@varlet/shared";
 import { toPxNum } from "../utils/elements.mjs";
 import { onMounted, onUnmounted, ref, watch } from "vue";
 import { createPopper } from "@popperjs/core/lib/popper-lite.js";
@@ -50,7 +50,7 @@ import { useStack } from "../context/stack.mjs";
 function usePopover(options) {
   const host = ref(null);
   const popover = ref(null);
-  const hostSize = ref({ width: 0, height: 0 });
+  const referenceSize = ref({ width: 0, height: 0 });
   const show = useVModel(options, "show", {
     passive: true,
     defaultValue: false,
@@ -65,11 +65,10 @@ function usePopover(options) {
   const { zIndex } = useZIndex(() => show.value, 1);
   useStack(() => show.value, zIndex);
   let popoverInstance = null;
+  let reference;
   let enterPopover = false;
-  let enterHost = false;
+  let enterReference = false;
   useEventListener(() => window, "keydown", handleKeydown);
-  useClickOutside(getReference, "click", handleClickOutside);
-  onWindowResize(resize);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   watch(() => options.disabled, close);
   watch(
@@ -80,19 +79,34 @@ function usePopover(options) {
       }
     }
   );
-  onMounted(() => {
-    var _a;
-    popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());
-  });
-  onUnmounted(() => {
+  onWindowResize(resize);
+  onMounted(createPopperInstance);
+  onUnmounted(destroyPopperInstance);
+  function createPopperInstance() {
+    const reference2 = getReference();
+    popoverInstance = createPopper(reference2, popover.value, getPopperOptions());
+    reference2.addEventListener("mouseenter", handleReferenceMouseenter);
+    reference2.addEventListener("mouseleave", handleReferenceMouseleave);
+    reference2.addEventListener("click", handleReferenceClick);
+    document.addEventListener("click", handleClickOutside);
+  }
+  function destroyPopperInstance() {
+    const reference2 = getReference();
+    if (reference2) {
+      reference2.removeEventListener("mouseenter", handleReferenceMouseenter);
+      reference2.removeEventListener("mouseleave", handleReferenceMouseleave);
+      reference2.removeEventListener("click", handleReferenceClick);
+    }
     popoverInstance.destroy();
-  });
-  function computeHostSize() {
-    if (!host.value) {
+    document.removeEventListener("click", handleClickOutside);
+  }
+  function computeReferenceSize() {
+    const reference2 = getReference();
+    if (!reference2) {
       return;
     }
-    const { width, height } = getStyle(host.value);
-    hostSize.value = {
+    const { width, height } = getStyle(reference2);
+    referenceSize.value = {
       width: toPxNum(width),
       height: toPxNum(height)
     };
@@ -129,19 +143,19 @@ function usePopover(options) {
         return "left";
     }
   }
-  function handleHostMouseenter() {
+  function handleReferenceMouseenter() {
     if (options.trigger !== "hover") {
       return;
     }
-    enterHost = true;
+    enterReference = true;
     open();
   }
-  function handleHostMouseleave() {
+  function handleReferenceMouseleave() {
     return __async(this, null, function* () {
       if (options.trigger !== "hover") {
         return;
       }
-      enterHost = false;
+      enterReference = false;
       yield doubleRaf();
       if (enterPopover) {
         return;
@@ -162,13 +176,13 @@ function usePopover(options) {
       }
       enterPopover = false;
       yield doubleRaf();
-      if (enterHost) {
+      if (enterReference) {
         return;
       }
       close();
     });
   }
-  function handleHostClick() {
+  function handleReferenceClick() {
     if (options.trigger !== "click") {
       return;
     }
@@ -178,15 +192,18 @@ function usePopover(options) {
     }
     open();
   }
-  function handlePopoverClose() {
-    close();
-  }
   function handleClickOutside(e) {
-    if (options.trigger !== "click") {
-      return;
+    const reference2 = getReference();
+    if (reference2 && !reference2.contains(e.target)) {
+      if (options.trigger !== "click") {
+        return;
+      }
+      handlePopoverClose();
+      call(options.onClickOutside, e);
     }
-    handlePopoverClose();
-    call(options.onClickOutside, e);
+  }
+  function handlePopoverClose() {
+    close();
   }
   function handleClosed() {
     resize();
@@ -194,7 +211,7 @@ function usePopover(options) {
   }
   function getPosition() {
     const { offsetX, offsetY, placement } = options;
-    computeHostSize();
+    computeReferenceSize();
     const offset2 = {
       x: toPxNum(offsetX),
       y: toPxNum(offsetY)
@@ -204,49 +221,49 @@ function usePopover(options) {
         return {
           placement: "bottom",
           skidding: offset2.x,
-          distance: offset2.y - hostSize.value.height
+          distance: offset2.y - referenceSize.value.height
         };
       case "cover-top-start":
         return {
           placement: "bottom-start",
           skidding: offset2.x,
-          distance: offset2.y - hostSize.value.height
+          distance: offset2.y - referenceSize.value.height
         };
       case "cover-top-end":
         return {
           placement: "bottom-end",
           skidding: offset2.x,
-          distance: offset2.y - hostSize.value.height
+          distance: offset2.y - referenceSize.value.height
         };
       case "cover-bottom":
         return {
           placement: "top",
           skidding: offset2.x,
-          distance: -offset2.y - hostSize.value.height
+          distance: -offset2.y - referenceSize.value.height
         };
       case "cover-bottom-start":
         return {
           placement: "top-start",
           skidding: offset2.x,
-          distance: -offset2.y - hostSize.value.height
+          distance: -offset2.y - referenceSize.value.height
         };
       case "cover-bottom-end":
         return {
           placement: "top-end",
           skidding: offset2.x,
-          distance: -offset2.y - hostSize.value.height
+          distance: -offset2.y - referenceSize.value.height
         };
       case "cover-left":
         return {
           placement: "right",
           skidding: offset2.y,
-          distance: offset2.x - hostSize.value.width
+          distance: offset2.x - referenceSize.value.width
         };
       case "cover-right":
         return {
           placement: "left",
           skidding: offset2.y,
-          distance: -offset2.x - hostSize.value.width
+          distance: -offset2.x - referenceSize.value.width
         };
       case "left":
       case "left-start":
@@ -316,7 +333,17 @@ function usePopover(options) {
     };
   }
   function getReference() {
-    return options.reference ? host.value.querySelector(options.reference) : host.value;
+    var _a, _b;
+    const targetReference = (_a = reference != null ? reference : options.reference) != null ? _a : host.value;
+    if (isString(targetReference)) {
+      return (_b = host.value) == null ? void 0 : _b.querySelector(targetReference);
+    }
+    return targetReference;
+  }
+  function setReference(newReference) {
+    destroyPopperInstance();
+    reference = newReference;
+    createPopperInstance();
   }
   function handleKeydown(event) {
     const { closeOnKeyEscape = false } = options;
@@ -344,14 +371,12 @@ function usePopover(options) {
     popover,
     zIndex,
     host,
-    hostSize,
-    handleHostClick,
-    handleHostMouseenter,
-    handleHostMouseleave,
+    referenceSize,
     handlePopoverClose,
     handlePopoverMouseenter,
     handlePopoverMouseleave,
     handleClosed,
+    setReference,
     resize,
     open,
     close

package/es/menu-select/MenuSelect.mjs

@@ -137,6 +137,10 @@ const __sfc__ = defineComponent({
       var _a;
       (_a = menu.value) == null ? void 0 : _a.resize();
     }
+    function setReference(reference) {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.setReference(reference);
+    }
     return {
       show,
       menu,
@@ -146,7 +150,8 @@ const __sfc__ = defineComponent({
       formatElevation,
       open,
       close,
-      resize
+      resize,
+      setReference
     };
   }
 });