@v-c/trigger 0.0.10 → 0.0.12

package/dist/Popup/index.js

@@ -1,331 +1,366 @@
-import { defineComponent as Z, computed as l, shallowRef as C, watchEffect as _, nextTick as ee, createVNode as o, Transition as te, withDirectives as ne, mergeProps as re, vShow as oe, mergeDefaults as ue } from "vue";
-import ie from "@v-c/resize-observer";
-import { classNames as de } from "@v-c/util";
-import { toPropsRefs as ae } from "@v-c/util/dist/props-util";
-import { getTransitionProps as fe } from "@v-c/util/dist/utils/transition";
-import le from "../hooks/useOffsetStyle.js";
-import { Arrow as se } from "./Arrow.js";
-import pe from "./Mask.js";
-import me from "./PopupContent.js";
-const ce = {
-  autoDestroy: !0
-}, xe = /* @__PURE__ */ Z((e, {
-  attrs: w,
-  expose: x
+import { defineComponent, computed, shallowRef, watchEffect, nextTick, createVNode, Transition, withDirectives, mergeProps, vShow, mergeDefaults } from "vue";
+import ResizeObserver from "@v-c/resize-observer";
+import { classNames } from "@v-c/util";
+import { toPropsRefs } from "@v-c/util/dist/props-util";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+import useOffsetStyle from "../hooks/useOffsetStyle.js";
+import { Arrow } from "./Arrow.js";
+import Mask from "./Mask.js";
+import PopupContent from "./PopupContent.js";
+const defaults = {
+  autoDestroy: true
+};
+const Popup = /* @__PURE__ */ defineComponent((props, {
+  attrs,
+  slots,
+  expose
 }) => {
-  const k = l(() => typeof e.popup == "function" ? e.popup() : e.popup), {
-    offsetX: M,
-    offsetR: N,
-    offsetY: B,
-    offsetB: A,
-    open: u,
-    ready: E,
-    align: R
-  } = ae(e, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align"), D = l(() => e.open || e.keepDom), s = l(() => !!e.mobile), z = e?.getPopupContainer?.length > 0, F = l(() => {
+  const popupContent = computed(() => typeof props.popup === "function" ? props.popup() : props.popup);
+  const {
+    offsetX,
+    offsetR,
+    offsetY,
+    offsetB,
+    open,
+    ready,
+    align
+  } = toPropsRefs(props, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align");
+  const isNodeVisible = computed(() => props.open || props.keepDom);
+  const isMobile = computed(() => !!props.mobile);
+  const getPopupContainerNeedParams = props?.getPopupContainer?.length > 0;
+  const mergedProps = computed(() => {
     const {
-      mobile: t,
-      mask: n,
-      maskMotion: i,
-      motion: c
-    } = e;
-    return t ? [t.mask, t.maskMotion, t.motion] : [n, i, c];
-  }), p = C(!e.getPopupContainer || !z);
-  _(async () => {
-    await ee();
-    const t = e?.getPopupContainer?.length > 0, n = e.target;
-    !p.value && t && n && (p.value = !0);
+      mobile,
+      mask,
+      maskMotion,
+      motion
+    } = props;
+    if (mobile) {
+      return [mobile.mask, mobile.maskMotion, mobile.motion];
+    }
+    return [mask, maskMotion, motion];
+  });
+  const show = shallowRef(!props.getPopupContainer || !getPopupContainerNeedParams);
+  watchEffect(async () => {
+    await nextTick();
+    const getPopupContainerNeedParams2 = props?.getPopupContainer?.length > 0;
+    const target = props.target;
+    if (!show.value && getPopupContainerNeedParams2 && target) {
+      show.value = true;
+    }
   });
-  const O = (t, n) => {
-    e?.onResize?.(t, n), e?.onAlign?.();
-  }, S = le(s, E, u, R, N, A, M, B), m = C();
-  return x({
-    getElement: () => m.value,
-    nativeElement: m
-  }), () => {
-    if (!p.value)
+  const onInternalResize = (size, element) => {
+    props?.onResize?.(size, element);
+    props?.onAlign?.();
+  };
+  const offsetStyle = useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
+  const popupElementRef = shallowRef();
+  expose({
+    getElement: () => popupElementRef.value,
+    nativeElement: popupElementRef
+  });
+  return () => {
+    if (!show.value) {
       return null;
+    }
     const {
-      stretch: t,
-      targetHeight: n,
-      targetWidth: i,
-      portal: c,
-      forceRender: $,
-      getPopupContainer: P,
-      target: j,
-      autoDestroy: T,
-      zIndex: h,
-      prefixCls: f,
+      stretch,
+      targetHeight,
+      targetWidth,
+      portal: Portal,
+      forceRender,
+      getPopupContainer,
+      target,
+      autoDestroy,
+      zIndex,
+      prefixCls,
       // Arrow
-      arrow: b,
-      arrowPos: y,
-      align: H,
-      onMouseEnter: I,
-      onMouseLeave: L,
-      onPointerEnter: V,
-      onPointerDownCapture: W,
-      onClick: X,
-      fresh: Y,
-      onPrepare: v,
-      onVisibleChanged: g
-    } = e, d = {};
-    t && (t.includes("height") && n ? d.height = `${n}px` : t.includes("minHeight") && n && (d.minHeight = `${n}px`), t.includes("width") && i ? d.width = `${i}px` : t.includes("minWidth") && i && (d.minWidth = `${i}px`)), u.value || (d.pointerEvents = "none");
-    const [G, J, q] = F.value, K = q?.name ?? q?.motionName, a = fe(K, q), Q = {
-      ...a,
-      onBeforeAppear: (r) => {
-        v?.(), a?.onBeforeAppear?.(r);
-      },
-      onBeforeEnter: (r) => {
-        v?.(), a?.onBeforeEnter?.(r);
-      },
-      onAfterAppear: (r) => {
-        a?.onAfterAppear?.(r), g?.(!0);
+      arrow,
+      arrowPos,
+      align: align2,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerEnter,
+      onPointerDownCapture,
+      onClick,
+      fresh,
+      onPrepare,
+      onVisibleChanged
+    } = props;
+    const miscStyle = {};
+    if (stretch) {
+      if (stretch.includes("height") && targetHeight) {
+        miscStyle.height = `${targetHeight}px`;
+      } else if (stretch.includes("minHeight") && targetHeight) {
+        miscStyle.minHeight = `${targetHeight}px`;
+      }
+      if (stretch.includes("width") && targetWidth) {
+        miscStyle.width = `${targetWidth}px`;
+      } else if (stretch.includes("minWidth") && targetWidth) {
+        miscStyle.minWidth = `${targetWidth}px`;
+      }
+    }
+    if (!open.value) {
+      miscStyle.pointerEvents = "none";
+    }
+    const [mergedMask, mergedMaskMotion, mergedPopupMotion] = mergedProps.value;
+    const popupMotionName = mergedPopupMotion?.name ?? mergedPopupMotion?.motionName;
+    const baseTransitionProps = getTransitionProps(popupMotionName, mergedPopupMotion);
+    const mergedTransitionProps = {
+      ...baseTransitionProps,
+      onBeforeEnter: (element) => {
+        onPrepare?.();
+        baseTransitionProps?.onBeforeEnter?.(element);
       },
-      onAfterEnter: (r) => {
-        a?.onAfterEnter?.(r), g?.(!0);
+      onAfterEnter: (element) => {
+        baseTransitionProps?.onAfterEnter?.(element);
+        onVisibleChanged?.(true);
       },
-      onAfterLeave: (r) => {
-        a.onAfterLeave?.(r), g?.(!1);
+      onAfterLeave: (element) => {
+        baseTransitionProps.onAfterLeave?.(element);
+        onVisibleChanged?.(false);
       }
-    }, U = de(f, w.class, e.className, {
-      [`${f}-mobile`]: s.value
+    };
+    const cls = classNames(prefixCls, attrs.class, props.className, {
+      [`${prefixCls}-mobile`]: isMobile.value
     });
-    return o(c, {
-      open: $ || D.value,
-      getContainer: P && (() => P(j)),
-      autoDestroy: T
+    return createVNode(Portal, {
+      "open": forceRender || isNodeVisible.value,
+      "getContainer": getPopupContainer && (() => getPopupContainer(target)),
+      "autoDestroy": autoDestroy
     }, {
-      default: () => [o(pe, {
-        prefixCls: f,
-        open: u.value,
-        zIndex: h,
-        mask: G,
-        motion: J,
-        mobile: s.value
-      }, null), o(ie, {
-        onResize: O,
-        disabled: !u.value
+      default: () => [createVNode(Mask, {
+        "prefixCls": prefixCls,
+        "open": open.value,
+        "zIndex": zIndex,
+        "mask": mergedMask,
+        "motion": mergedMaskMotion,
+        "mobile": isMobile.value
+      }, null), createVNode(ResizeObserver, {
+        "onResize": onInternalResize,
+        "disabled": !open.value
       }, {
-        default: () => [o(te, Q, {
-          default: () => [ne(o("div", re({
-            ref: m,
-            class: U,
-            style: [{
-              "--arrow-x": `${y.x || 0}px`,
-              "--arrow-y": `${y.y || 0}px`
-            }, S.value, d, {
+        default: () => [createVNode(Transition, mergedTransitionProps, {
+          default: () => [withDirectives(createVNode("div", mergeProps({
+            "ref": popupElementRef,
+            "class": cls,
+            "style": [{
+              "--arrow-x": `${arrowPos.x || 0}px`,
+              "--arrow-y": `${arrowPos.y || 0}px`
+            }, offsetStyle.value, miscStyle, {
               boxSizing: "border-box",
-              zIndex: h
-            }, e.style],
-            onMouseenter: I,
-            onMouseleave: L,
-            onPointerenter: V,
-            onClick: X
+              zIndex
+            }, props.style],
+            "onMouseenter": onMouseEnter,
+            "onMouseleave": onMouseLeave,
+            "onPointerenter": onPointerEnter,
+            "onClick": onClick
           }, {
-            onPointerdownCapture: W
-          }), [b && o(se, {
-            prefixCls: f,
-            arrow: b,
-            arrowPos: y,
-            align: H
-          }, null), o(me, {
-            cache: !u.value && !Y
+            onPointerdownCapture: onPointerDownCapture
+          }), [arrow && createVNode(Arrow, {
+            "prefixCls": prefixCls,
+            "arrow": arrow,
+            "arrowPos": arrowPos,
+            "align": align2
+          }, null), createVNode(PopupContent, {
+            "cache": !open.value && !fresh
           }, {
-            default: () => [k.value]
-          })]), [[oe, u.value]])]
+            default: () => [popupContent.value]
+          })]), [[vShow, open.value]])]
         })]
-      })]
+      }), slots?.default?.()]
     });
   };
 }, {
-  props: /* @__PURE__ */ ue({
+  props: /* @__PURE__ */ mergeDefaults({
     prefixCls: {
       type: String,
-      required: !0,
+      required: true,
       default: void 0
     },
     className: {
       type: String,
-      required: !1,
+      required: false,
       default: void 0
     },
     style: {
       type: null,
-      required: !1,
+      required: false,
       default: void 0
     },
     popup: {
       type: Function,
-      required: !1,
-      skipCheck: !0,
+      required: false,
+      skipCheck: true,
       default: void 0
     },
     target: {
       type: null,
-      required: !0,
+      required: true,
       default: void 0
     },
     onMouseEnter: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     },
     onMouseLeave: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     },
     onPointerEnter: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     },
     onPointerDownCapture: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     },
     zIndex: {
       type: Number,
-      required: !1,
+      required: false,
       default: void 0
     },
     mask: {
       type: Boolean,
-      required: !1,
+      required: false,
       default: void 0
     },
     onVisibleChanged: {
       type: Function,
-      required: !0,
+      required: true,
       default: void 0
     },
     align: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     },
     arrow: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     },
     arrowPos: {
       type: Object,
-      required: !0,
+      required: true,
       default: void 0
     },
     open: {
       type: Boolean,
-      required: !0,
+      required: true,
       default: void 0
     },
     keepDom: {
       type: Boolean,
-      required: !0,
+      required: true,
       default: void 0
     },
     fresh: {
       type: Boolean,
-      required: !1,
+      required: false,
       default: void 0
     },
     onClick: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     },
     motion: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     },
     maskMotion: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     },
     forceRender: {
       type: Boolean,
-      required: !1,
+      required: false,
       default: void 0
     },
     getPopupContainer: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     },
     autoDestroy: {
       type: Boolean,
-      required: !1,
+      required: false,
       default: void 0
     },
     portal: {
       type: null,
-      required: !0,
+      required: true,
       default: void 0
     },
     ready: {
       type: Boolean,
-      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
     },
     offsetR: {
       type: Number,
-      required: !0,
+      required: true,
       default: void 0
     },
     offsetB: {
       type: Number,
-      required: !0,
+      required: true,
       default: void 0
     },
     onAlign: {
       type: null,
-      required: !0,
+      required: true,
       default: void 0
     },
     onPrepare: {
       type: Function,
-      required: !0,
+      required: true,
       default: void 0
     },
     stretch: {
       type: String,
-      required: !1,
+      required: false,
       default: void 0
     },
     targetWidth: {
       type: Number,
-      required: !1,
+      required: false,
       default: void 0
     },
     targetHeight: {
       type: Number,
-      required: !1,
+      required: false,
       default: void 0
     },
     onResize: {
       type: null,
-      required: !1,
+      required: false,
       default: void 0
     },
     mobile: {
       type: Object,
-      required: !1,
+      required: false,
       default: void 0
     }
-  }, ce)
+  }, defaults)
 });
 export {
-  xe as default
+  Popup as default
 };

package/dist/UniqueProvider/UniqueContainer.cjs

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