@v-c/trigger 0.0.10 → 0.0.11

package/dist/index.js

@@ -1,511 +1,700 @@
-import { defineComponent as en, computed as u, ref as pe, useId as nn, shallowRef as i, reactive as tn, watch as b, nextTick as F, watchEffect as B, createVNode as S, Fragment as un, mergeDefaults as ln, isVNode as an } from "vue";
-import ge from "@v-c/portal";
-import on from "@v-c/resize-observer";
-import { classNames as ve } from "@v-c/util";
-import { isDOM as x } from "@v-c/util/dist/Dom/findDOMNode";
-import { getShadowRoot as me } from "@v-c/util/dist/Dom/shadow";
-import { filterEmpty as rn } from "@v-c/util/dist/props-util";
-import { useTriggerContext as sn, useUniqueContext as fn, TriggerContextProvider as dn } from "./context.js";
-import cn from "./hooks/useAction.js";
-import pn from "./hooks/useAlign.js";
-import vn from "./hooks/useDelay.js";
-import mn from "./hooks/useWatch.js";
-import gn from "./hooks/useWinClick.js";
-import yn from "./Popup/index.js";
-import { getAlignPopupClassName as hn } from "./util.js";
-import { default as Ln } from "./UniqueProvider/index.js";
-function Pn(q) {
-  return typeof q == "function" || Object.prototype.toString.call(q) === "[object Object]" && !an(q);
+import { defineComponent, computed, ref, useId, shallowRef, reactive, watch, nextTick, watchEffect, createVNode, Fragment, mergeDefaults, isVNode } from "vue";
+import Portal from "@v-c/portal";
+import ResizeObserver from "@v-c/resize-observer";
+import { classNames } from "@v-c/util";
+import { isDOM } from "@v-c/util/dist/Dom/findDOMNode";
+import { getShadowRoot } from "@v-c/util/dist/Dom/shadow";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { useTriggerContext, useUniqueContext, TriggerContextProvider } from "./context.js";
+import useAction from "./hooks/useAction.js";
+import useAlign from "./hooks/useAlign.js";
+import useDelay from "./hooks/useDelay.js";
+import useWatch from "./hooks/useWatch.js";
+import useWinClick from "./hooks/useWinClick.js";
+import Popup from "./Popup/index.js";
+import { getAlignPopupClassName } from "./util.js";
+import { default as default2 } from "./UniqueProvider/index.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const Cn = {
+const defaults = {
   prefixCls: "vc-trigger-popup",
   action: "hover",
   mouseLeaveDelay: 0.1,
-  maskClosable: !0,
+  maskClosable: true,
   builtinPlacements: {},
   popupVisible: void 0,
   defaultPopupVisible: void 0
 };
-function bn(q = ge) {
-  return /* @__PURE__ */ en((n, {
-    expose: ye,
-    slots: he,
-    attrs: $
+function generateTrigger(PortalComponent = Portal) {
+  return /* @__PURE__ */ defineComponent((props, {
+    expose,
+    slots,
+    attrs
   }) => {
-    const Pe = u(() => n.autoDestroy ?? !1), j = u(() => n.popupVisible === void 0), J = u(() => !!n.mobile), z = pe({}), D = sn(), Ce = u(() => ({
-      registerSubPopup(e, t) {
-        t ? z.value[e] = t : delete z.value[e], D?.value.registerSubPopup(e, t);
-      }
-    })), p = fn(), _ = nn(), c = i(null), G = i(null), K = (e) => {
-      if (!e)
+    const mergedAutoDestroy = computed(() => props.autoDestroy ?? false);
+    const openUncontrolled = computed(() => props.popupVisible === void 0);
+    const isMobile = computed(() => !!props.mobile);
+    const subPopupElements = ref({});
+    const parentContext = useTriggerContext();
+    const context = computed(() => {
+      return {
+        registerSubPopup(id2, subPopupEle) {
+          if (subPopupEle) {
+            subPopupElements.value[id2] = subPopupEle;
+          } else {
+            delete subPopupElements.value[id2];
+          }
+          parentContext?.value.registerSubPopup(id2, subPopupEle);
+        }
+      };
+    });
+    const uniqueContext = useUniqueContext();
+    const id = useId();
+    const popupEle = shallowRef(null);
+    const externalPopupRef = shallowRef(null);
+    const resolveToElement = (node) => {
+      if (!node) {
         return null;
-      if (x(e))
-        return e;
-      const t = e;
-      if (x(t?.$el))
-        return t.$el;
-      const a = t?.nativeElement;
-      if (x(a?.value))
-        return a.value;
-      if (x(a))
-        return a;
-      if (typeof t?.getElement == "function") {
-        const m = t.getElement();
-        if (x(m))
-          return m;
+      }
+      if (isDOM(node)) {
+        return node;
+      }
+      const exposed = node;
+      if (isDOM(exposed?.$el)) {
+        return exposed.$el;
+      }
+      const nativeEl = exposed?.nativeElement;
+      if (isDOM(nativeEl?.value)) {
+        return nativeEl.value;
+      }
+      if (isDOM(nativeEl)) {
+        return nativeEl;
+      }
+      if (typeof exposed?.getElement === "function") {
+        const el = exposed.getElement();
+        if (isDOM(el)) {
+          return el;
+        }
       }
       return null;
-    }, be = (e) => {
-      const t = K(e);
-      G.value = t, c.value !== t && (c.value = t), D?.value?.registerSubPopup(_, t ?? null);
-    }, r = i(null), I = i(null), qe = (e) => {
-      const t = K(e);
-      t && r.value !== t ? (r.value = t, I.value = t) : t || (r.value = null, I.value = null);
-    }, g = tn({}), Q = i({}), Z = i({}), we = u(() => ({
-      ...Q.value,
-      ...Z.value
-    })), ee = (e) => {
-      const t = r.value;
-      return t?.contains(e) || t && me(t)?.host === e || e === t || c.value?.contains(e) || c.value && me(c.value)?.host === e || e === c.value || Object.values(z.value).some((a) => a?.contains(e) || e === a);
-    }, ne = u(() => n.arrow ? {
-      ...n?.arrow !== !0 ? n?.arrow : {}
-    } : null), N = i(n?.defaultPopupVisible ?? !1);
-    n.popupVisible !== void 0 && (N.value = n.popupVisible);
-    const l = u(() => n?.popupVisible ?? N.value), Ae = (e) => {
-      j.value && (N.value = e);
-    }, te = () => l.value;
-    b(() => n.popupVisible, async (e) => {
-      e !== void 0 && (await F(), N.value = e);
+    };
+    const setPopupRef = (node) => {
+      const element = resolveToElement(node);
+      externalPopupRef.value = element;
+      if (popupEle.value !== element) {
+        popupEle.value = element;
+      }
+      parentContext?.value?.registerSubPopup(id, element ?? null);
+    };
+    const targetEle = shallowRef(null);
+    const externalForwardRef = shallowRef(null);
+    const setTargetRef = (node) => {
+      const element = resolveToElement(node);
+      if (element && targetEle.value !== element) {
+        targetEle.value = element;
+        externalForwardRef.value = element;
+      } else if (!element) {
+        targetEle.value = null;
+        externalForwardRef.value = null;
+      }
+    };
+    const originChildProps = reactive({});
+    const baseActionProps = shallowRef({});
+    const hoverActionProps = shallowRef({});
+    const cloneProps = computed(() => ({
+      ...baseActionProps.value,
+      ...hoverActionProps.value
+    }));
+    const inPopupOrChild = (ele) => {
+      const childDOM = targetEle.value;
+      return childDOM?.contains(ele) || childDOM && getShadowRoot(childDOM)?.host === ele || ele === childDOM || popupEle.value?.contains(ele) || popupEle.value && getShadowRoot(popupEle.value)?.host === ele || ele === popupEle.value || Object.values(subPopupElements.value).some((subPopupEle) => subPopupEle?.contains(ele) || ele === subPopupEle);
+    };
+    const innerArrow = computed(() => {
+      return props.arrow ? {
+        ...props?.arrow !== true ? props?.arrow : {}
+      } : null;
     });
-    const ue = (e = 0) => ({
-      popup: n.popup,
-      target: r.value,
-      delay: e,
-      prefixCls: n.prefixCls,
-      popupClassName: n.popupClassName,
-      uniqueContainerClassName: n.uniqueContainerClassName,
-      uniqueContainerStyle: n.uniqueContainerStyle,
-      popupStyle: n.popupStyle,
-      popupPlacement: n.popupPlacement,
-      builtinPlacements: n.builtinPlacements,
-      popupAlign: n.popupAlign,
-      zIndex: n.zIndex,
-      mask: n.mask,
-      maskClosable: n.maskClosable,
-      popupMotion: n.popupMotion,
-      maskMotion: n.maskMotion,
-      arrow: ne.value,
-      getPopupContainer: n.getPopupContainer,
-      getPopupClassNameFromAlign: n.getPopupClassNameFromAlign,
-      id: _
+    const internalOpen = shallowRef(props?.defaultPopupVisible ?? false);
+    if (props.popupVisible !== void 0) {
+      internalOpen.value = props.popupVisible;
+    }
+    const mergedOpen = computed(() => {
+      return props?.popupVisible ?? internalOpen.value;
     });
-    b([l, r], () => {
-      if (p && n.unique && r.value && !j.value && !D?.value)
-        if (l.value) {
-          const e = n.mouseEnterDelay ?? 0;
-          p?.show(ue(e), te);
-        } else
-          p?.hide(n.mouseLeaveDelay || 0);
+    const setMergedOpen = (nextOpen) => {
+      if (openUncontrolled.value) {
+        internalOpen.value = nextOpen;
+      }
+    };
+    const isOpen = () => mergedOpen.value;
+    watch(() => props.popupVisible, async (nextVisible) => {
+      if (nextVisible !== void 0) {
+        await nextTick();
+        internalOpen.value = nextVisible;
+      }
+    });
+    const getUniqueOptions = (delay = 0) => {
+      return {
+        popup: props.popup,
+        target: targetEle.value,
+        delay,
+        prefixCls: props.prefixCls,
+        popupClassName: props.popupClassName,
+        uniqueContainerClassName: props.uniqueContainerClassName,
+        uniqueContainerStyle: props.uniqueContainerStyle,
+        popupStyle: props.popupStyle,
+        popupPlacement: props.popupPlacement,
+        builtinPlacements: props.builtinPlacements,
+        popupAlign: props.popupAlign,
+        zIndex: props.zIndex,
+        mask: props.mask,
+        maskClosable: props.maskClosable,
+        popupMotion: props.popupMotion,
+        maskMotion: props.maskMotion,
+        arrow: innerArrow.value,
+        getPopupContainer: props.getPopupContainer,
+        getPopupClassNameFromAlign: props.getPopupClassNameFromAlign,
+        id
+      };
+    };
+    watch([mergedOpen, targetEle], () => {
+      if (uniqueContext && props.unique && targetEle.value && !openUncontrolled.value && !parentContext?.value) {
+        if (mergedOpen.value) {
+          const enterDelay = props.mouseEnterDelay ?? 0;
+          uniqueContext?.show(getUniqueOptions(enterDelay), isOpen);
+        } else {
+          uniqueContext?.hide(props.mouseLeaveDelay || 0);
+        }
+      }
     });
-    const v = i(l.value), w = i([]);
-    w.value = [], B(() => {
-      v.value = l.value, l.value || (w.value = []);
+    const openRef = shallowRef(mergedOpen.value);
+    const lastTriggerRef = shallowRef([]);
+    lastTriggerRef.value = [];
+    watchEffect(() => {
+      openRef.value = mergedOpen.value;
+      if (!mergedOpen.value) {
+        lastTriggerRef.value = [];
+      }
     });
-    const le = (e) => {
-      Ae(e), (w.value[w.value.length - 1] ?? l.value) !== e && (w.value.push(e), n?.onOpenChange?.(e), n?.onPopupVisibleChange?.(e));
-    }, ae = vn(), d = (e, t = 0) => {
-      if (n.popupVisible !== void 0) {
-        ae(() => {
-          le(e);
-        }, t);
+    const internalTriggerOpen = (nextOpen) => {
+      setMergedOpen(nextOpen);
+      if ((lastTriggerRef.value[lastTriggerRef.value.length - 1] ?? mergedOpen.value) !== nextOpen) {
+        lastTriggerRef.value.push(nextOpen);
+        props?.onOpenChange?.(nextOpen);
+        props?.onPopupVisibleChange?.(nextOpen);
+      }
+    };
+    const delayInvoke = useDelay();
+    const triggerOpen = (nextOpen, delay = 0) => {
+      if (props.popupVisible !== void 0) {
+        delayInvoke(() => {
+          internalTriggerOpen(nextOpen);
+        }, delay);
         return;
       }
-      if (p && n.unique && j.value && !D?.value) {
-        e ? p?.show(ue(t), te) : p.hide(t);
+      if (uniqueContext && props.unique && openUncontrolled.value && !parentContext?.value) {
+        if (nextOpen) {
+          uniqueContext?.show(getUniqueOptions(delay), isOpen);
+        } else {
+          uniqueContext.hide(delay);
+        }
         return;
       }
-      ae(() => {
-        le(e);
-      }, t);
-    }, y = i(!1);
-    b(l, async () => {
-      await F(), l.value && (y.value = !0);
+      delayInvoke(() => {
+        internalTriggerOpen(nextOpen);
+      }, delay);
+    };
+    const inMotion = shallowRef(false);
+    watch(mergedOpen, async () => {
+      await nextTick();
+      if (mergedOpen.value) {
+        inMotion.value = true;
+      }
     });
-    const A = i(), T = pe(null), L = (e) => {
-      T.value = [e.clientX, e.clientY];
-    }, [ke, Me, Se, xe, De, Ne, Te, Re, Ee, H, X] = pn(l, c, u(() => n?.alignPoint && T.value !== null ? T.value : r.value), u(() => n?.popupPlacement), u(() => n?.builtinPlacements), u(() => n?.popupAlign), n?.onPopupAlign, J), [k, h] = cn(u(() => n.action), u(() => n.showAction), u(() => n.hideAction)), oe = u(() => k.value?.has("click")), R = u(() => h.value?.has("click") || h.value?.has("contextmenu")), P = () => {
-      y.value || X();
+    const motionPrepareResolve = shallowRef();
+    const mousePos = ref(null);
+    const setMousePosByEvent = (event) => {
+      mousePos.value = [event.clientX, event.clientY];
+    };
+    const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = useAlign(mergedOpen, popupEle, computed(() => props?.alignPoint && mousePos.value !== null ? mousePos.value : targetEle.value), computed(() => props?.popupPlacement), computed(() => props?.builtinPlacements), computed(() => props?.popupAlign), props?.onPopupAlign, isMobile);
+    const [showActions, hideActions] = useAction(computed(() => props.action), computed(() => props.showAction), computed(() => props.hideAction));
+    const clickToShow = computed(() => showActions.value?.has("click"));
+    const clickToHide = computed(() => hideActions.value?.has("click") || hideActions.value?.has("contextmenu"));
+    const triggerAlign = () => {
+      if (!inMotion.value) {
+        onAlign();
+      }
     };
-    mn(l, r, c, P, () => {
-      v.value && n?.alignPoint && R.value && d(!1);
-    }), b([T, () => n.popupPlacement], async () => {
-      await F(), P();
-    }), b(() => JSON.stringify(n.popupAlign), async () => {
-      await F();
+    const onScroll = () => {
+      if (openRef.value && props?.alignPoint && clickToHide.value) {
+        triggerOpen(false);
+      }
+    };
+    useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
+    watch([mousePos, () => props.popupPlacement], async () => {
+      await nextTick();
+      triggerAlign();
+    });
+    watch(() => JSON.stringify(props.popupAlign), async () => {
+      await nextTick();
       const {
-        builtinPlacements: e,
-        popupPlacement: t
-      } = n;
-      l.value && !e?.[t] && P();
+        builtinPlacements,
+        popupPlacement
+      } = props;
+      if (mergedOpen.value && !builtinPlacements?.[popupPlacement]) {
+        triggerAlign();
+      }
     });
-    const Oe = u(() => {
-      const e = hn(n.builtinPlacements, n.prefixCls, H.value, n.alignPoint);
-      return ve(e, n?.getPopupClassNameFromAlign?.(H.value));
+    const alignedClassName = computed(() => {
+      const baseClassName = getAlignPopupClassName(props.builtinPlacements, props.prefixCls, alignInfo.value, props.alignPoint);
+      return classNames(baseClassName, props?.getPopupClassNameFromAlign?.(alignInfo.value));
     });
-    ye({
-      nativeElement: I,
-      popupElement: G,
-      forceAlign: P
+    expose({
+      nativeElement: externalForwardRef,
+      popupElement: externalPopupRef,
+      forceAlign: triggerAlign
     });
-    const ie = i(0), re = i(0), se = () => {
-      if (n.stretch && r.value) {
-        const e = r.value.getBoundingClientRect();
-        ie.value = e.width, re.value = e.height;
+    const targetWidth = shallowRef(0);
+    const targetHeight = shallowRef(0);
+    const syncTargetSize = () => {
+      if (props.stretch && targetEle.value) {
+        const rect = targetEle.value.getBoundingClientRect();
+        targetWidth.value = rect.width;
+        targetHeight.value = rect.height;
+      }
+    };
+    const onTargetResize = () => {
+      syncTargetSize();
+      triggerAlign();
+    };
+    const onVisibleChanged = (visible) => {
+      inMotion.value = false;
+      onAlign();
+      props?.afterOpenChange?.(visible);
+      props?.afterPopupVisibleChange?.(visible);
+    };
+    const onPrepare = () => {
+      return new Promise((resolve) => {
+        syncTargetSize();
+        motionPrepareResolve.value = resolve;
+      });
+    };
+    watch([motionPrepareResolve], () => {
+      if (motionPrepareResolve.value) {
+        onAlign();
+        motionPrepareResolve.value();
+        motionPrepareResolve.value = void 0;
       }
-    }, Ve = () => {
-      se(), P();
-    }, Fe = (e) => {
-      y.value = !1, X(), n?.afterOpenChange?.(e), n?.afterPopupVisibleChange?.(e);
-    }, Be = () => new Promise((e) => {
-      se(), A.value = e;
-    });
-    b([A], () => {
-      A.value && (X(), A.value(), A.value = void 0);
     });
-    function C(e, t, a, m, M, o) {
-      e[t] = (f, ...s) => {
-        (!o || !o()) && (M?.(f), d(a, m)), g[t]?.(f, ...s);
+    function wrapperAction(target, eventName, nextOpen, delay, callback, ignoreCheck) {
+      target[eventName] = (event, ...args) => {
+        if (!ignoreCheck || !ignoreCheck()) {
+          callback?.(event);
+          triggerOpen(nextOpen, delay);
+        }
+        originChildProps[eventName]?.(event, ...args);
       };
     }
-    const fe = u(() => k.value?.has("touch")), Y = u(() => h.value?.has("touch")), U = i(!1);
-    B(() => {
-      const e = {};
-      (fe.value || Y.value) && (e.onTouchstart = (...t) => {
-        U.value = !0, v.value && Y.value ? d(!1) : !v.value && fe.value && d(!0), g.onTouchstart?.(...t);
-      }), (oe.value || R.value) && (e.onClick = (t, ...a) => {
-        v.value && R.value ? d(!1) : !v.value && oe.value && (L(t), d(!0)), g?.onClick?.(t, ...a), U.value = !1;
-      }), Q.value = e;
+    const touchToShow = computed(() => showActions.value?.has("touch"));
+    const touchToHide = computed(() => hideActions.value?.has("touch"));
+    const touchedRef = shallowRef(false);
+    watchEffect(() => {
+      const nextCloneProps = {};
+      if (touchToShow.value || touchToHide.value) {
+        nextCloneProps.onTouchstart = (...args) => {
+          touchedRef.value = true;
+          if (openRef.value && touchToHide.value) {
+            triggerOpen(false);
+          } else if (!openRef.value && touchToShow.value) {
+            triggerOpen(true);
+          }
+          originChildProps.onTouchstart?.(...args);
+        };
+      }
+      if (clickToShow.value || clickToHide.value) {
+        nextCloneProps.onClick = (event, ...args) => {
+          if (openRef.value && clickToHide.value) {
+            triggerOpen(false);
+          } else if (!openRef.value && clickToShow.value) {
+            setMousePosByEvent(event);
+            triggerOpen(true);
+          }
+          originChildProps?.onClick?.(event, ...args);
+          touchedRef.value = false;
+        };
+      }
+      baseActionProps.value = nextCloneProps;
     });
-    const je = gn(l, u(() => R.value || Y.value), r, c, u(() => n.mask), u(() => n.maskClosable), ee, d), ze = u(() => k.value?.has("hover")), Ie = u(() => h.value?.has("hover"));
-    let E, W;
-    const O = () => U.value;
-    B(() => {
+    const onPopupPointerDown = useWinClick(mergedOpen, computed(() => clickToHide.value || touchToHide.value), targetEle, popupEle, computed(() => props.mask), computed(() => props.maskClosable), inPopupOrChild, triggerOpen);
+    const hoverToShow = computed(() => showActions.value?.has("hover"));
+    const hoverToHide = computed(() => hideActions.value?.has("hover"));
+    let onPopupMouseEnter;
+    let onPopupMouseLeave;
+    const ignoreMouseTrigger = () => {
+      return touchedRef.value;
+    };
+    watchEffect(() => {
       const {
-        mouseEnterDelay: e,
-        mouseLeaveDelay: t,
-        alignPoint: a,
-        focusDelay: m,
-        blurDelay: M
-      } = n, o = {};
-      if (ze.value) {
-        const f = (s) => {
-          L(s);
+        mouseEnterDelay,
+        mouseLeaveDelay,
+        alignPoint,
+        focusDelay,
+        blurDelay
+      } = props;
+      const nextHoverProps = {};
+      if (hoverToShow.value) {
+        const onMouseEnterCallback = (event) => {
+          setMousePosByEvent(event);
+        };
+        wrapperAction(nextHoverProps, "onMouseenter", true, mouseEnterDelay, onMouseEnterCallback, ignoreMouseTrigger);
+        wrapperAction(nextHoverProps, "onPointerenter", true, mouseEnterDelay, onMouseEnterCallback, ignoreMouseTrigger);
+        onPopupMouseEnter = (event) => {
+          if ((mergedOpen.value || inMotion.value) && popupEle?.value?.contains(event.target)) {
+            triggerOpen(true, mouseEnterDelay);
+          }
+        };
+        if (alignPoint) {
+          nextHoverProps.onMouseMove = (event) => {
+            originChildProps.onMousemove?.(event);
+          };
+        }
+      } else {
+        onPopupMouseEnter = void 0;
+      }
+      if (hoverToHide.value) {
+        wrapperAction(nextHoverProps, "onMouseleave", false, mouseLeaveDelay, void 0, ignoreMouseTrigger);
+        wrapperAction(nextHoverProps, "onPointerleave", false, mouseLeaveDelay, void 0, ignoreMouseTrigger);
+        onPopupMouseLeave = (event) => {
+          const {
+            relatedTarget
+          } = event;
+          if (relatedTarget && inPopupOrChild(relatedTarget)) {
+            return;
+          }
+          triggerOpen(false, mouseLeaveDelay);
+        };
+      } else {
+        onPopupMouseLeave = void 0;
+      }
+      if (showActions.value.has("focus")) {
+        wrapperAction(nextHoverProps, "onFocus", true, focusDelay);
+      }
+      if (hideActions.value.has("focus")) {
+        wrapperAction(nextHoverProps, "onBlur", false, blurDelay);
+      }
+      if (showActions.value.has("contextmenu")) {
+        nextHoverProps.onContextmenu = (event, ...args) => {
+          if (openRef.value && hideActions.value.has("contextmenu")) {
+            triggerOpen(false);
+          } else {
+            setMousePosByEvent(event);
+            triggerOpen(true);
+          }
+          event.preventDefault();
+          originChildProps.onContextmenu?.(event, ...args);
         };
-        C(o, "onMouseenter", !0, e, f, O), C(o, "onPointerenter", !0, e, f, O), E = (s) => {
-          (l.value || y.value) && c?.value?.contains(s.target) && d(!0, e);
-        }, a && (o.onMouseMove = (s) => {
-          g.onMousemove?.(s);
-        });
-      } else
-        E = void 0;
-      Ie.value ? (C(o, "onMouseleave", !1, t, void 0, O), C(o, "onPointerleave", !1, t, void 0, O), W = (f) => {
-        const {
-          relatedTarget: s
-        } = f;
-        s && ee(s) || d(!1, t);
-      }) : W = void 0, k.value.has("focus") && C(o, "onFocus", !0, m), h.value.has("focus") && C(o, "onBlur", !1, M), k.value.has("contextmenu") && (o.onContextmenu = (f, ...s) => {
-        v.value && h.value.has("contextmenu") ? d(!1) : (L(f), d(!0)), f.preventDefault(), g.onContextmenu?.(f, ...s);
-      }), Z.value = o;
+      }
+      hoverActionProps.value = nextHoverProps;
     });
-    const de = i(!1);
-    return B(() => {
-      de.value ||= n.forceRender || l.value || y.value;
-    }), () => {
-      const e = rn(he?.default?.() ?? [])?.[0], t = {
-        ...g,
-        ...we.value
-      }, a = {};
-      ["onContextmenu", "onClick", "onMousedown", "onTouchstart", "onMouseenter", "onMouseleave", "onFocus", "onBlur"].forEach((V) => {
-        $[V] && (a[V] = (...ce) => {
-          t[V]?.(...ce), $[V](...ce);
-        });
+    const rendedRef = shallowRef(false);
+    watchEffect(() => {
+      rendedRef.value ||= props.forceRender || mergedOpen.value || inMotion.value;
+    });
+    return () => {
+      const child = filterEmpty(slots?.default?.() ?? [])?.[0];
+      const mergedChildrenProps = {
+        ...originChildProps,
+        ...cloneProps.value
+      };
+      const passedProps = {};
+      const passedEventList = ["onContextmenu", "onClick", "onMousedown", "onTouchstart", "onMouseenter", "onMouseleave", "onFocus", "onBlur"];
+      passedEventList.forEach((eventName) => {
+        if (attrs[eventName]) {
+          passedProps[eventName] = (...args) => {
+            mergedChildrenProps[eventName]?.(...args);
+            attrs[eventName](...args);
+          };
+        }
       });
-      const M = {
-        x: Ne.value,
-        y: Te.value
-      }, o = S(e, {
-        ...t,
-        ...a,
-        ref: qe
-      }), {
-        unique: f,
-        prefixCls: s,
-        popup: Le,
-        popupClassName: He,
-        popupStyle: Xe,
-        zIndex: Ye,
-        fresh: Ue,
-        onPopupClick: We,
-        mask: $e,
-        popupMotion: Je,
-        maskMotion: _e,
-        forceRender: Ge,
-        getPopupContainer: Ke,
-        stretch: Qe,
-        mobile: Ze
-      } = n;
-      return S(un, null, [S(on, {
-        disabled: !l.value,
-        onResize: Ve
-      }, Pn(o) ? o : {
-        default: () => [o]
-      }), de.value && r.value && (!p || !f) && S(dn, Ce.value, {
-        default: () => [S(yn, {
-          portal: q,
-          ref: be,
-          prefixCls: s,
-          popup: Le,
-          className: ve(He, !J.value && Oe.value),
-          style: Xe,
-          target: r.value,
-          onMouseEnter: E,
-          onMouseLeave: W,
-          onPointerEnter: E,
-          zIndex: Ye,
-          open: l.value,
-          keepDom: y.value,
-          fresh: Ue,
-          onClick: We,
-          onPointerDownCapture: je,
-          mask: $e,
-          motion: Je,
-          maskMotion: _e,
-          onVisibleChanged: Fe,
-          onPrepare: Be,
-          forceRender: Ge,
-          autoDestroy: Pe.value,
-          getPopupContainer: Ke,
-          align: H.value,
-          arrow: ne.value,
-          arrowPos: M,
-          ready: ke.value,
-          offsetX: Me.value,
-          offsetY: Se.value,
-          offsetR: xe.value,
-          offsetB: De.value,
-          onAlign: P,
-          stretch: Qe,
-          targetWidth: ie.value / Re.value,
-          targetHeight: re.value / Ee.value,
-          mobile: Ze
+      const arrowPos = {
+        x: arrowX.value,
+        y: arrowY.value
+      };
+      const triggerNode = createVNode(child, {
+        ...mergedChildrenProps,
+        ...passedProps,
+        ref: setTargetRef
+      });
+      const {
+        unique,
+        prefixCls,
+        popup,
+        popupClassName,
+        popupStyle,
+        zIndex,
+        fresh,
+        onPopupClick,
+        mask,
+        popupMotion,
+        maskMotion,
+        forceRender,
+        getPopupContainer,
+        stretch,
+        mobile
+      } = props;
+      return createVNode(Fragment, null, [createVNode(ResizeObserver, {
+        "disabled": !mergedOpen.value,
+        "onResize": onTargetResize
+      }, _isSlot(triggerNode) ? triggerNode : {
+        default: () => [triggerNode]
+      }), rendedRef.value && targetEle.value && (!uniqueContext || !unique) && createVNode(TriggerContextProvider, context.value, {
+        default: () => [createVNode(Popup, {
+          "portal": PortalComponent,
+          "ref": setPopupRef,
+          "prefixCls": prefixCls,
+          "popup": popup,
+          "className": classNames(popupClassName, !isMobile.value && alignedClassName.value),
+          "style": popupStyle,
+          "target": targetEle.value,
+          "onMouseEnter": onPopupMouseEnter,
+          "onMouseLeave": onPopupMouseLeave,
+          "onPointerEnter": onPopupMouseEnter,
+          "zIndex": zIndex,
+          "open": mergedOpen.value,
+          "keepDom": inMotion.value,
+          "fresh": fresh,
+          "onClick": onPopupClick,
+          "onPointerDownCapture": onPopupPointerDown,
+          "mask": mask,
+          "motion": popupMotion,
+          "maskMotion": maskMotion,
+          "onVisibleChanged": onVisibleChanged,
+          "onPrepare": onPrepare,
+          "forceRender": forceRender,
+          "autoDestroy": mergedAutoDestroy.value,
+          "getPopupContainer": getPopupContainer,
+          "align": alignInfo.value,
+          "arrow": innerArrow.value,
+          "arrowPos": arrowPos,
+          "ready": ready.value,
+          "offsetX": offsetX.value,
+          "offsetY": offsetY.value,
+          "offsetR": offsetR.value,
+          "offsetB": offsetB.value,
+          "onAlign": triggerAlign,
+          "stretch": stretch,
+          "targetWidth": targetWidth.value / scaleX.value,
+          "targetHeight": targetHeight.value / scaleY.value,
+          "mobile": mobile
         }, null)]
       })]);
     };
   }, {
-    props: /* @__PURE__ */ ln({
+    props: /* @__PURE__ */ mergeDefaults({
       action: {
         type: [String, Array],
-        required: !1,
+        required: false,
         default: void 0
       },
       showAction: {
         type: Array,
-        required: !1,
+        required: false,
         default: void 0
       },
       hideAction: {
         type: Array,
-        required: !1,
+        required: false,
         default: void 0
       },
       prefixCls: {
         type: String,
-        required: !1,
+        required: false,
         default: void 0
       },
       zIndex: {
         type: Number,
-        required: !1,
+        required: false,
         default: void 0
       },
       onPopupAlign: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       stretch: {
         type: String,
-        required: !1,
+        required: false,
         default: void 0
       },
       popupVisible: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       defaultPopupVisible: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       onOpenChange: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       afterOpenChange: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       onPopupVisibleChange: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       afterPopupVisibleChange: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       getPopupContainer: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       forceRender: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       autoDestroy: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       mask: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       maskClosable: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       popupMotion: {
         type: Object,
-        required: !1,
+        required: false,
         default: void 0
       },
       maskMotion: {
         type: Object,
-        required: !1,
+        required: false,
         default: void 0
       },
       mouseEnterDelay: {
         type: Number,
-        required: !1,
+        required: false,
         default: void 0
       },
       mouseLeaveDelay: {
         type: Number,
-        required: !1,
+        required: false,
         default: void 0
       },
       focusDelay: {
         type: Number,
-        required: !1,
+        required: false,
         default: void 0
       },
       blurDelay: {
         type: Number,
-        required: !1,
+        required: false,
         default: void 0
       },
       popup: {
         type: [String, Number, null, Array, Function],
-        required: !0,
-        skipCheck: !0,
+        required: true,
+        skipCheck: true,
         default: void 0
       },
       popupPlacement: {
         type: String,
-        required: !1,
+        required: false,
         default: void 0
       },
       builtinPlacements: {
         type: Object,
-        required: !1,
+        required: false,
         default: void 0
       },
       popupAlign: {
         type: Object,
-        required: !1,
+        required: false,
         default: void 0
       },
       popupClassName: {
         type: String,
-        required: !1,
+        required: false,
         default: void 0
       },
       uniqueContainerClassName: {
         type: String,
-        required: !1,
+        required: false,
         default: void 0
       },
       uniqueContainerStyle: {
         type: null,
-        required: !1,
+        required: false,
         default: void 0
       },
       popupStyle: {
         type: null,
-        required: !1,
+        required: false,
         default: void 0
       },
       getPopupClassNameFromAlign: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       onPopupClick: {
         type: Function,
-        required: !1,
+        required: false,
         default: void 0
       },
       alignPoint: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       fresh: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       unique: {
         type: Boolean,
-        required: !1,
+        required: false,
         default: void 0
       },
       arrow: {
         type: [Boolean, Object],
-        required: !1,
+        required: false,
         default: void 0
       },
       mobile: {
         type: Object,
-        required: !1,
+        required: false,
         default: void 0
       }
-    }, Cn)
+    }, defaults)
   });
 }
-const jn = bn(ge);
+const Trigger = generateTrigger(Portal);
 export {
-  jn as Trigger,
-  Ln as UniqueProvider,
-  jn as default,
-  bn as generateTrigger
+  Trigger,
+  default2 as UniqueProvider,
+  Trigger as default,
+  generateTrigger
 };