@v-c/trigger 0.0.10 → 0.0.11

package/dist/Popup/index.cjs

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