@v-c/trigger 0.0.10 → 0.0.12

package/dist/UniqueProvider/UniqueContainer.js

@@ -1,139 +1,150 @@
-import { defineComponent as g, shallowRef as y, watchEffect as x, watch as N, createVNode as c, Transition as $, withDirectives as O, vShow as P } from "vue";
-import { toPropsRefs as R } from "@v-c/util/dist/props-util";
-import { getTransitionProps as E } from "@v-c/util/dist/utils/transition";
-import j from "../hooks/useOffsetStyle.js";
-const Y = /* @__PURE__ */ g((i) => {
-  const t = y(!1), {
-    open: u,
-    isMobile: m,
-    align: q,
-    ready: a,
-    offsetR: v,
-    offsetB: b,
-    offsetX: h,
-    offsetY: w
-  } = R(i, "open", "isMobile", "align", "ready", "offsetR", "offsetB", "offsetX", "offsetY"), d = j(m, a, u, q, v, b, h, w), l = y(d.value);
-  return x(() => {
-    a.value && (l.value = d.value);
-  }), N(u, (n) => {
-    n && (t.value = !0);
-  }, {
-    immediate: !0
-  }), () => {
+import { defineComponent, shallowRef, watchEffect, watch, nextTick, createVNode, Transition, withDirectives, vShow } from "vue";
+import { toPropsRefs } from "@v-c/util/dist/props-util";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+import useOffsetStyle from "../hooks/useOffsetStyle.js";
+const UniqueContainer = /* @__PURE__ */ defineComponent((props) => {
+  const motionVisible = shallowRef(false);
+  const {
+    open,
+    isMobile,
+    align,
+    ready,
+    offsetR,
+    offsetB,
+    offsetX,
+    offsetY
+  } = toPropsRefs(props, "open", "isMobile", "align", "ready", "offsetR", "offsetB", "offsetX", "offsetY");
+  const offsetStyle = useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
+  const cachedOffsetStyleRef = shallowRef(offsetStyle.value);
+  watchEffect(() => {
+    if (ready.value) {
+      cachedOffsetStyleRef.value = offsetStyle.value;
+    }
+  });
+  watch(open, async (nextVisible) => {
+    await nextTick();
+    if (nextVisible) {
+      motionVisible.value = true;
+    }
+  });
+  return () => {
     const {
-      popupSize: n,
-      motion: s,
-      prefixCls: C,
-      uniqueContainerClassName: S,
-      arrowPos: p,
-      uniqueContainerStyle: A
-    } = i, o = {};
-    n && (o.width = `${n.width}px`, o.height = `${n.height}px`);
-    const r = E(s?.name, s), B = {
-      ...r,
-      onBeforeAppear: (e) => {
-        t.value = !0, r.onBeforeAppear?.(e);
-      },
-      onBeforeEnter: (e) => {
-        t.value = !0, r.onBeforeEnter?.(e);
-      },
-      onAfterAppear: (e) => {
-        t.value = !0, r.onAfterAppear?.(e);
+      popupSize,
+      motion,
+      prefixCls,
+      uniqueContainerClassName,
+      arrowPos,
+      uniqueContainerStyle
+    } = props;
+    const sizeStyle = {};
+    if (popupSize) {
+      sizeStyle.width = `${popupSize.width}px`;
+      sizeStyle.height = `${popupSize.height}px`;
+    }
+    const baseTransitionProps = getTransitionProps(motion?.name, motion);
+    const mergedTransitionProps = {
+      ...baseTransitionProps,
+      onBeforeEnter: (element) => {
+        motionVisible.value = true;
+        baseTransitionProps.onBeforeEnter?.(element);
       },
-      onAfterEnter: (e) => {
-        t.value = !0, r.onAfterEnter?.(e);
+      onAfterEnter: (element) => {
+        motionVisible.value = true;
+        baseTransitionProps.onAfterEnter?.(element);
       },
-      onAfterLeave: (e) => {
-        t.value = !1, r.onAfterLeave?.(e);
+      onAfterLeave: (element) => {
+        motionVisible.value = false;
+        baseTransitionProps.onAfterLeave?.(element);
       }
-    }, f = `${C}-unique-container`;
-    return c($, B, {
-      default: () => [O(c("div", {
-        class: [f, S, {
-          [`${f}-visible`]: t.value,
-          [`${f}-hidden`]: !t.value
+    };
+    const containerCls = `${prefixCls}-unique-container`;
+    return createVNode(Transition, mergedTransitionProps, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": [containerCls, uniqueContainerClassName, {
+          [`${containerCls}-visible`]: motionVisible.value
+          // [`${containerCls}-hidden`]: !motionVisible.value,
         }],
-        style: [{
-          "--arrow-x": `${p?.x || 0}px`,
-          "--arrow-y": `${p?.y || 0}px`
-        }, l.value, o, A]
-      }, null), [[P, u.value]])]
+        "style": [{
+          "--arrow-x": `${arrowPos?.x || 0}px`,
+          "--arrow-y": `${arrowPos?.y || 0}px`
+        }, cachedOffsetStyleRef.value, sizeStyle, uniqueContainerStyle]
+      }, null), [[vShow, open.value]])]
     });
   };
 }, {
   props: {
     prefixCls: {
       type: String,
-      required: !0,
+      required: true,
       default: void 0
     },
     isMobile: {
       type: Boolean,
-      required: !0,
+      required: true,
       default: void 0
     },
     ready: {
       type: Boolean,
-      required: !0,
+      required: true,
       default: void 0
     },
     open: {
       type: Boolean,
-      required: !0,
+      required: true,
       default: void 0
     },
     align: {
       type: Object,
-      required: !0,
+      required: true,
       default: void 0
     },
     offsetR: {
       type: Number,
-      required: !0,
+      required: true,
       default: void 0
     },
     offsetB: {
       type: Number,
-      required: !0,
+      required: true,
       default: void 0
     },
     offsetX: {
       type: Number,
-      required: !0,
+      required: true,
       default: void 0
     },
     offsetY: {
       type: Number,
-      required: !0,
+      required: true,
       default: void 0
     },
     arrowPos: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     },
     popupSize: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     },
     motion: {
       type: Object,
-      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
     }
   }
 });
 export {
-  Y as default
+  UniqueContainer as default
 };

package/dist/UniqueProvider/index.cjs

@@ -1 +1,213 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue"),$=require("@v-c/portal"),p=require("@v-c/util"),a=require("@v-c/util/dist/Dom/findDOMNode"),v=require("../context.cjs"),B=require("../hooks/useAlign.cjs"),U=require("../hooks/useDelay.cjs"),F=require("../Popup/index.cjs"),_=require("../util.cjs"),j=require("./UniqueContainer.cjs"),H=require("./useTargetState.cjs"),W=u.defineComponent((c,{slots:S})=>{const[d,r,s,D]=H.default(),e=u.computed(()=>!s.value||!c.postTriggerProps?s.value:c.postTriggerProps(s.value)),i=u.shallowRef(null),g=u.ref(null),T=u.shallowRef(null),V=t=>{if(!t)return null;if(a.isDOM(t))return t;const l=t;if(a.isDOM(l?.$el))return l.$el;const n=l?.nativeElement;if(a.isDOM(n?.value))return n.value;if(a.isDOM(n))return n;if(typeof l?.getElement=="function"){const R=l.getElement();if(a.isDOM(R))return R}return null},O=t=>{const l=V(t);T.value=l,i.value!==l&&(i.value=l)},m=u.shallowRef(),C=U.default(),k=(t,l)=>{m.value=l,C(()=>{d(t)},t.delay)},A=t=>{C(()=>{m.value?.()||d(!1)},t)},E=t=>{D(t)},[P,q,x,y,N,h,M,,,o,f]=B.default(r,i,u.computed(()=>e.value?.target),u.computed(()=>e.value?.popupPlacement),u.computed(()=>e.value?.builtinPlacements||{}),u.computed(()=>e.value?.popupAlign),void 0,u.ref(!1)),w=u.computed(()=>{if(!e.value)return"";const t=_.getAlignPopupClassName(e.value?.builtinPlacements||{},e.value.prefixCls||"",o.value,!1);return p.classNames(t,e.value?.getPopupClassNameFromAlign?.(o.value))}),z={show:k,hide:A};u.watch(()=>e.value?.target,()=>{f()},{immediate:!0});const I=()=>(f(),Promise.resolve()),b=u.ref({}),X=v.useTriggerContext(),Y=u.computed(()=>({registerSubPopup:(t,l)=>{l?b.value[t]=l:delete b.value[t],X?.value?.registerSubPopup(t,l)}}));return()=>{const t=e?.value?.prefixCls;return u.createVNode(v.UniqueContextProvider,z,{default:()=>[S?.default?.(),!!e.value&&u.createVNode(v.TriggerContextProvider,Y.value,{default:()=>[u.createVNode(F.default,{ref:O,portal:$,prefixCls:t,popup:e.value?.popup,className:p.classNames(e.value?.popupClassName,w.value,`${t}-unique-controlled`),style:e.value?.popupStyle,target:e.value?.target,open:r.value,keepDom:!0,fresh:!0,autoDestroy:!1,onVisibleChanged:E,ready:P.value,offsetX:q.value,offsetY:x.value,offsetR:y.value,offsetB:N.value,onAlign:f,onPrepare:I,onResize:l=>{g.value={width:l.offsetWidth,height:l.offsetHeight}},arrowPos:{x:h.value,y:M.value},align:o.value,zIndex:e.value?.zIndex,mask:e.value?.mask,arrow:e.value?.arrow,motion:e.value?.popupMotion,maskMotion:e.value?.maskMotion,getPopupContainer:e.value.getPopupContainer},{default:()=>[u.createVNode(j.default,{prefixCls:t,isMobile:!1,ready:P.value,open:r.value,align:o.value,offsetX:q.value,offsetY:x.value,offsetR:y.value,offsetB:N.value,arrowPos:{x:h.value,y:M.value},popupSize:g.value,motion:e.value?.popupMotion,uniqueContainerClassName:p.classNames(e.value?.uniqueContainerClassName,w.value),uniqueContainerStyle:e?.value?.uniqueContainerStyle},null)]})]})]})}},{props:{postTriggerProps:{type:Function,required:!1,default:void 0}}});exports.default=W;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Portal = require("@v-c/portal");
+const util$1 = require("@v-c/util");
+const findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+const context = require("../context.cjs");
+const useAlign = require("../hooks/useAlign.cjs");
+const useDelay = require("../hooks/useDelay.cjs");
+const index = require("../Popup/index.cjs");
+const util = require("../util.cjs");
+const UniqueContainer = require("./UniqueContainer.cjs");
+const useTargetState = require("./useTargetState.cjs");
+const UniqueProvider = /* @__PURE__ */ vue.defineComponent((props, {
+  slots
+}) => {
+  const [trigger, open, options, onTargetVisibleChanged] = useTargetState.default();
+  const mergedOptions = vue.computed(() => {
+    if (!options.value || !props.postTriggerProps) {
+      return options.value;
+    }
+    return props.postTriggerProps(options.value);
+  });
+  const popupEle = vue.shallowRef(null);
+  const popupSize = vue.ref(null);
+  const externalPopupRef = vue.shallowRef(null);
+  const resolveToElement = (node) => {
+    if (!node) {
+      return null;
+    }
+    if (findDOMNode.isDOM(node)) {
+      return node;
+    }
+    const exposed = node;
+    if (findDOMNode.isDOM(exposed?.$el)) {
+      return exposed.$el;
+    }
+    const nativeEl = exposed?.nativeElement;
+    if (findDOMNode.isDOM(nativeEl?.value)) {
+      return nativeEl.value;
+    }
+    if (findDOMNode.isDOM(nativeEl)) {
+      return nativeEl;
+    }
+    if (typeof exposed?.getElement === "function") {
+      const el = exposed.getElement();
+      if (findDOMNode.isDOM(el)) {
+        return el;
+      }
+    }
+    return null;
+  };
+  const setPopupRef = (node) => {
+    const element = resolveToElement(node);
+    externalPopupRef.value = element;
+    if (popupEle.value !== element) {
+      popupEle.value = element;
+    }
+  };
+  const isOpenRef = vue.shallowRef();
+  const delayInvoke = useDelay.default();
+  const show = (showOptions, isOpen) => {
+    isOpenRef.value = isOpen;
+    delayInvoke(() => {
+      trigger(showOptions);
+    }, showOptions.delay);
+  };
+  const hide = (delay) => {
+    delayInvoke(() => {
+      if (isOpenRef.value?.()) {
+        return;
+      }
+      trigger(false);
+    }, delay);
+  };
+  const onVisibleChanged = (visible) => {
+    onTargetVisibleChanged(visible);
+  };
+  const [
+    ready,
+    offsetX,
+    offsetY,
+    offsetR,
+    offsetB,
+    arrowX,
+    arrowY,
+    ,
+    ,
+    // scaleX - not used in UniqueProvider
+    // scaleY - not used in UniqueProvider
+    alignInfo,
+    onAlign
+  ] = useAlign.default(
+    open,
+    popupEle,
+    vue.computed(() => mergedOptions.value?.target),
+    vue.computed(() => mergedOptions.value?.popupPlacement),
+    vue.computed(() => mergedOptions.value?.builtinPlacements || {}),
+    vue.computed(() => mergedOptions.value?.popupAlign),
+    void 0,
+    // onPopupAlign
+    vue.ref(false)
+    // isMobile
+  );
+  const alignedClassName = vue.computed(() => {
+    if (!mergedOptions.value) {
+      return "";
+    }
+    const baseClassName = util.getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false);
+    return util$1.classNames(baseClassName, mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
+  });
+  const contextValue = {
+    show,
+    hide
+  };
+  vue.watch(() => mergedOptions.value?.target, () => {
+    onAlign();
+  }, {
+    immediate: true
+  });
+  const onPrepare = () => {
+    onAlign();
+    return Promise.resolve();
+  };
+  const subPopupElements = vue.ref({});
+  const parentContext = context.useTriggerContext();
+  const triggerContextValue = vue.computed(() => {
+    return {
+      registerSubPopup: (id, subPopupEle) => {
+        if (subPopupEle) {
+          subPopupElements.value[id] = subPopupEle;
+        } else {
+          delete subPopupElements.value[id];
+        }
+        parentContext?.value?.registerSubPopup(id, subPopupEle);
+      }
+    };
+  });
+  return () => {
+    const prefixCls = mergedOptions?.value?.prefixCls;
+    return vue.createVNode(context.UniqueContextProvider, contextValue, {
+      default: () => [slots?.default?.(), !!mergedOptions.value && vue.createVNode(context.TriggerContextProvider, triggerContextValue.value, {
+        default: () => [vue.createVNode(index.default, {
+          "ref": setPopupRef,
+          "portal": Portal,
+          "prefixCls": prefixCls,
+          "popup": mergedOptions.value?.popup,
+          "className": util$1.classNames(mergedOptions.value?.popupClassName, alignedClassName.value, `${prefixCls}-unique-controlled`),
+          "style": mergedOptions.value?.popupStyle,
+          "target": mergedOptions.value?.target,
+          "open": open.value,
+          "keepDom": true,
+          "fresh": true,
+          "autoDestroy": false,
+          "onVisibleChanged": onVisibleChanged,
+          "ready": ready.value,
+          "offsetX": offsetX.value,
+          "offsetY": offsetY.value,
+          "offsetR": offsetR.value,
+          "offsetB": offsetB.value,
+          "onAlign": onAlign,
+          "onPrepare": onPrepare,
+          "onResize": (size) => {
+            popupSize.value = {
+              width: size.offsetWidth,
+              height: size.offsetHeight
+            };
+          },
+          "arrowPos": {
+            x: arrowX.value,
+            y: arrowY.value
+          },
+          "align": alignInfo.value,
+          "zIndex": mergedOptions.value?.zIndex,
+          "mask": mergedOptions.value?.mask,
+          "arrow": mergedOptions.value?.arrow,
+          "motion": mergedOptions.value?.popupMotion,
+          "maskMotion": mergedOptions.value?.maskMotion,
+          "getPopupContainer": mergedOptions.value.getPopupContainer
+        }, {
+          default: () => [vue.createVNode(UniqueContainer.default, {
+            "prefixCls": prefixCls,
+            "isMobile": false,
+            "ready": ready.value,
+            "open": open.value,
+            "align": alignInfo.value,
+            "offsetX": offsetX.value,
+            "offsetY": offsetY.value,
+            "offsetR": offsetR.value,
+            "offsetB": offsetB.value,
+            "arrowPos": {
+              x: arrowX.value,
+              y: arrowY.value
+            },
+            "popupSize": popupSize.value,
+            "motion": mergedOptions.value?.popupMotion,
+            "uniqueContainerClassName": util$1.classNames(mergedOptions.value?.uniqueContainerClassName, alignedClassName.value),
+            "uniqueContainerStyle": mergedOptions?.value?.uniqueContainerStyle
+          }, null)]
+        })]
+      })]
+    });
+  };
+}, {
+  props: {
+    postTriggerProps: {
+      type: Function,
+      required: false,
+      default: void 0
+    }
+  }
+});
+exports.default = UniqueProvider;