vue-popup-plus 1.3.4 → 1.4.0

package/dist/vue-popup-plus.umd.cjs

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".popup-mask[data-v-53a2b502]{position:fixed;inset:0;background-color:var(--popup-color-mask)}.popup-mask.is-blur[data-v-53a2b502]{-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%)}.popup-view-wrapper[data-v-1aed2cbe]{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;pointer-events:none}.popup-view-wrapper .popup-view[data-v-1aed2cbe]{position:relative;margin:auto;overflow:auto;pointer-events:auto}.vue-popup-plus-animation{animation-timing-function:linear;animation-duration:var(--v9a56ef92)}.vue-popup-plus-animation-enter-fade{animation-name:vue-popup-plus-animation-enter-fade}.vue-popup-plus-animation-leave-fade{animation-name:vue-popup-plus-animation-leave-fade}.vue-popup-plus-animation-enter-scale-enlarge{animation-name:vue-popup-plus-animation-enter-scale-enlarge}.vue-popup-plus-animation-leave-scale-enlarge{animation-name:vue-popup-plus-animation-leave-scale-enlarge}.vue-popup-plus-animation-enter-scale-shrink{animation-name:vue-popup-plus-animation-enter-scale-shrink}.vue-popup-plus-animation-leave-scale-shrink{animation-name:vue-popup-plus-animation-leave-scale-shrink}.vue-popup-plus-animation-enter-fly-top{animation-name:vue-popup-plus-animation-enter-fly-top}.vue-popup-plus-animation-leave-fly-top{animation-name:vue-popup-plus-animation-leave-fly-top}.vue-popup-plus-animation-enter-fly-left{animation-name:vue-popup-plus-animation-enter-fly-left}.vue-popup-plus-animation-leave-fly-left{animation-name:vue-popup-plus-animation-leave-fly-left}.vue-popup-plus-animation-enter-fly-right{animation-name:vue-popup-plus-animation-enter-fly-right}.vue-popup-plus-animation-leave-fly-right{animation-name:vue-popup-plus-animation-leave-fly-right}.vue-popup-plus-animation-enter-fly-bottom{animation-name:vue-popup-plus-animation-enter-fly-bottom}.vue-popup-plus-animation-leave-fly-bottom{animation-name:vue-popup-plus-animation-leave-fly-bottom}@-moz-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-o-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-moz-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-o-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-moz-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-o-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-moz-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}:root{--popup-color-mask: rgba(125,125,125,.3);--popup-color-mask-dark-lite: rgba(112,112,112,.3);--popup-color-mask-dark: rgba(94,94,94,.3);--popup-color-mask-dark-most: rgba(50,50,50,.3);--popup-color-mask-light-lite: rgba(138,138,138,.3);--popup-color-mask-light: rgba(157,157,157,.3);--popup-color-mask-light-most: rgba(203,203,203,.3)}.dark{--popup-color-mask: rgba(75,75,75,.3);--popup-color-mask-dark-lite: rgba(68,68,68,.3);--popup-color-mask-dark: rgba(56,56,56,.3);--popup-color-mask-dark-most: rgba(30,30,30,.3);--popup-color-mask-light-lite: rgba(93,93,93,.3);--popup-color-mask-light: rgba(120,120,120,.3);--popup-color-mask-light-most: rgba(183,183,183,.3)}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VuePopupPlus={},r.Vue))})(this,(function(r,e){"use strict";const w="vue-popup-plus",p={INSTANCE_ID:Symbol(`${w}-instance-id`),COMPUTED_VIEW_STYLE:Symbol(`${w}-computed-view-style`)},f={INSTANCE_STORE:Symbol(`${w}-instance-store`)};function E(o=0){return new Promise(t=>{window.setTimeout(t,o)})}const N=e.defineComponent({name:"PopupMask",__name:"PopupMask",setup(o){const t=e.inject(p.INSTANCE_ID),i=e.inject(f.INSTANCE_STORE);function n(){i.maskClickClose&&T().destroy(t)}return(s,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["popup-mask",{"is-blur":e.unref(i).maskBlur.value}]),style:e.normalizeStyle({zIndex:e.unref(i).zIndex.value}),onClick:n},null,6))}}),v=(o,t)=>{const i=o.__vccOpts||o;for(const[n,s]of t)i[n]=s;return i},I=v(N,[["__scopeId","data-v-53a2b502"]]),x=v(e.defineComponent({name:"PopupView",__name:"PopupView",setup(o){const t=e.ref(),i=e.inject(p.INSTANCE_ID),n=e.inject(f.INSTANCE_STORE),s=e.ref(0),a=e.ref(0),u=e.computed(()=>typeof n.component=="function"?e.defineAsyncComponent(n.component):n.component),h=e.computed(()=>n.viewTranslateOverflow.value?n.viewTranslateX.value:n.viewTranslateX.value>0?Math.min(n.viewTranslateX.value,(window.innerWidth-s.value)/2):Math.max(n.viewTranslateX.value,-(window.innerWidth-s.value)/2)),_=e.computed(()=>n.viewTranslateOverflow.value?n.viewTranslateY.value:n.viewTranslateY.value>0?Math.min(n.viewTranslateY.value,(window.innerHeight-a.value)/2):Math.max(n.viewTranslateY.value,-(window.innerHeight-a.value)/2)),P=e.computed(()=>({width:d(n.width.value),maxWidth:d(n.maxWidth.value),minWidth:d(n.minWidth.value),height:d(n.height.value),maxHeight:d(n.maxHeight.value),minHeight:d(n.minHeight.value),transform:`translate(${h.value}px, ${_.value}px)`})),j=e.computed(()=>({width:s.value,height:a.value,zIndex:n.zIndex.value,translateX:h.value,translateY:_.value}));e.provide(p.COMPUTED_VIEW_STYLE,j),e.onMounted(()=>{window.setTimeout(S,n.animationDuration.value)}),e.onUpdated(()=>{S()});async function S(){await e.nextTick();const c=t.value?.getBoundingClientRect();c&&(s.value=c.width,a.value=c.height)}function d(c){return typeof c=="number"?`${c}px`:c}return(c,X)=>(e.openBlock(),e.createElementBlock("div",{class:"popup-view-wrapper",style:e.normalizeStyle({zIndex:e.unref(n).zIndex.value})},[e.createElementVNode("div",{class:"popup-view",style:e.normalizeStyle(P.value),ref_key:"popupViewRef",ref:t},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value),e.mergeProps({key:`${e.unref(i).name}-component`},e.unref(n).componentProps),null,16))],4)],4))}}),[["__scopeId","data-v-1aed2cbe"]]),y=e.defineComponent({name:"PopupAnimation",__name:"PopupAnimation",props:{type:{},duration:{}},setup(o){e.useCssVars(u=>({v9a56ef92:a.value}));const t=e.inject(f.INSTANCE_STORE),i=e.ref(!1),n=e.computed(()=>`vue-popup-plus-animation vue-popup-plus-animation-enter-${o.type}`),s=e.computed(()=>`vue-popup-plus-animation vue-popup-plus-animation-leave-${o.type}`),a=e.computed(()=>`${o.duration}ms`);return e.onMounted(()=>{i.value=!0}),(u,h)=>(e.openBlock(),e.createBlock(e.Transition,{"enter-active-class":n.value,"leave-active-class":s.value},{default:e.withCtx(()=>[i.value&&!e.unref(t).isBeforeUnmount.value?e.renderSlot(u.$slots,"default",{key:0,style:e.normalizeStyle({animationDuration:`${o.duration}ms`})}):e.createCommentVNode("",!0)]),_:3},8,["enter-active-class","leave-active-class"]))}}),g=e.defineComponent({name:"Popup",__name:"Popup",props:{store:{}},setup(o){return e.provide(p.INSTANCE_ID,o.store.id),e.provide(f.INSTANCE_STORE,o.store),(t,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.store.mask?(e.openBlock(),e.createBlock(y,{key:0,duration:o.store.animationDuration.value,type:o.store.maskAnimation.value},{default:e.withCtx(()=>[e.createVNode(I)]),_:1},8,["duration","type"])):e.createCommentVNode("",!0),e.createVNode(y,{duration:o.store.animationDuration.value,type:o.store.viewAnimation.value},{default:e.withCtx(()=>[e.createVNode(x)]),_:1},8,["duration","type"])],64))}}),k=(o,{component:t,componentProps:i,onMounted:n,onUnmounted:s,appendTo:a,mask:u,maskClickClose:h,disableScroll:_,...P})=>({id:o,parentElement:A(a),appendTo:a,mask:u,maskClickClose:h,disableScroll:_,component:t,componentProps:i,onMounted:n,onUnmounted:s,isBeforeUnmount:e.ref(!1),...e.toRefs(e.reactive(P))});function A(o){return typeof o=="string"&&(o=document.querySelector(o)||document.body),o}class O{#t;get seed(){return this.#t}get name(){return`vue-popup-plus-instance-${this.seed}`}constructor(t){this.#t=t}}class b{#t;#i;#e;#n;#s;#o;get id(){return this.#i}get store(){return this.#e}get renderType(){return this.#t.config.debugMode?"app":"vnode"}constructor(t,i){this.#t=t,this.#i=new O(t.seed),this.#e=k(this.#i,i),this.renderType==="app"?(this.#n=e.createApp(g,{store:this.#e}),this.#n._context.components=this.#t.app._context.components,this.#n._context.provides=this.#t.app._context.provides,this.#n._context.config=this.#t.app._context.config,this.#n._context.directives=this.#t.app._context.directives,this.#n._context.mixins=this.#t.app._context.mixins):(this.#s=e.createVNode(g,{store:this.#e}),this.#s.appContext=this.#t.app._context,this.#s.appContext.components.Popup=g)}mount(){return this.#o=document.createElement("div"),this.renderType==="app"?this.#n.mount(this.#o):e.render(this.#s,this.#o),this.#e.parentElement.appendChild(this.#o),this.#e.onMounted(),this.id}async unmount(t){this.#e.isBeforeUnmount.value=!0,await E(this.#e.animationDuration.value),this.renderType==="app"?this.#n.unmount():e.render(null,this.#o),this.#e.parentElement.removeChild(this.#o),this.#e.onUnmounted(t)}update(t){for(const i in t){const n=i,s=t[n]===void 0?this.#e[n].value:t[n];this.#e[n].value=s}}}class m extends Error{constructor(t){super(t)}toString(){return`vue-popup-plus error: ${this.message}`}}class ${NONE="none";FADE="fade";SCALE_ENLARGE="scale-enlarge";SCALE_SHRINK="scale-shrink";FLY_TOP="fly-top";FLY_LEFT="fly-left";FLY_RIGHT="fly-right";FLY_BOTTOM="fly-bottom";constructor(){}}const l=new $,M=o=>o,B=o=>new Proxy(o,{set(t,i,n){throw new m(`${i} 是只读属性，不能被覆盖`)},get(t,i){return i==="customProperties"?D(o):i==="customAnimations"?V():o[i]}});function D(o){return new Proxy({},{set:(t,i,n)=>{if(i in o)throw new m(`定义插件扩展属性 ${i} 时失败，${i} 是只读属性，不能被覆盖`);return o.__proto__[i]=n,!0},get:(t,i)=>{if(i in o)return o.__proto__[i]}})}function V(o){return new Proxy({},{set:(t,i,n)=>{if(i in l)throw new m(`定义插件扩展动画类型 ${i} 时失败，${i} 是只读属性，不能被覆盖`);return l.__proto__[i]=n,!0},get:(t,i)=>{if(i in l)return l.__proto__[i]}})}const U={appendTo:document.body,mask:!0,maskClickClose:!1,disableScroll:!0,componentProps:{},onMounted:()=>{},onUnmounted:()=>{},width:"auto",maxWidth:"auto",minWidth:"auto",height:"auto",maxHeight:"auto",minHeight:"auto",viewTranslateX:0,viewTranslateY:0,viewTranslateOverflow:!1,viewAnimation:l.FADE,maskAnimation:l.FADE,maskBlur:!0,animationDuration:100};class Y{_core;constructor(t){this._core=t}install(t){t.config.globalProperties[this._core.config.prototypeName]=this,this._core.app=t}use(t){if(!this._core.addPlugin(t))throw new m(`使用插件 ${t.name} 失败，已存在同名插件 ${t.name}`);t.install(B(this),this._core.config)}render({zIndex:t,...i}){t=t??this._core.config.zIndex++;const n=new b(this._core,{...U,...i,zIndex:t});return this._core.addInstance(n),n.mount(),n.id}update(t,i){const n=this._core.getInstance(t);n&&n.update(i)}async destroy(t,i){const n=this._core.getInstance(t);n&&(await n.unmount(i),this._core.removeInstance(n))}}let C=null;function R(o){return new H(o)}function W(){return C}class H{app;#t=1;#i={};#e;#n;#s={};#o="";get seed(){return this.#t++}get config(){return this.#n}get controller(){return this.#e}constructor({zIndex:t=1e3,prototypeName:i="$popup",autoDisableScroll:n=!0,debugMode:s=!1}={}){this.#n={zIndex:t,prototypeName:i,autoDisableScroll:n,debugMode:s},this.#e=new Y(this),C=this}addInstance(t){this.#i[t.id.name]=t,this.config.autoDisableScroll&&t.store.disableScroll&&this.#r()}getInstance(t){return this.#i[t.name]}removeInstance(t){delete this.#i[t.id.name],Object.values(this.#i).filter(i=>i.store.disableScroll).length===0&&this.#a()}addPlugin(t){return this.getPlugin(t.name)?!1:(this.#s[t.name]=t,!0)}getPlugin(t){return this.#s[t]}removePlugin(t){delete this.#s[t]}#r(){document.body.style.overflow!=="hidden"&&(this.#o=document.body.style.overflow,document.body.style.overflow="hidden")}#a(){this.config.autoDisableScroll&&(document.body.style.overflow=this.#o)}}const z="1.3.4";function L(o){return R(o).controller}function T(){const o=W();if(!o)throw new m("调用 usePopup 前请先调用 createPopup 创建弹出层插件实例");return o.controller}r.POPUP_ANIMATIONS=l,r.POPUP_COMPONENT_INJECTS=p,r.createPopup=L,r.definePlugin=M,r.usePopup=T,r.version=z,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".popup-mask[data-v-53a2b502]{position:fixed;inset:0;background-color:var(--popup-color-mask)}.popup-mask.is-blur[data-v-53a2b502]{-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%)}.popup-view-wrapper[data-v-14a39a91]{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;pointer-events:none}.popup-view-wrapper .popup-view[data-v-14a39a91]{position:relative;margin:auto;overflow:auto;pointer-events:auto}.vue-popup-plus-animation{animation-timing-function:linear;animation-duration:var(--v9a56ef92)}.vue-popup-plus-animation-enter-fade{animation-name:vue-popup-plus-animation-enter-fade}.vue-popup-plus-animation-leave-fade{animation-name:vue-popup-plus-animation-leave-fade}.vue-popup-plus-animation-enter-scale-enlarge{animation-name:vue-popup-plus-animation-enter-scale-enlarge}.vue-popup-plus-animation-leave-scale-enlarge{animation-name:vue-popup-plus-animation-leave-scale-enlarge}.vue-popup-plus-animation-enter-scale-reduce{animation-name:vue-popup-plus-animation-enter-scale-reduce}.vue-popup-plus-animation-leave-scale-reduce{animation-name:vue-popup-plus-animation-leave-scale-reduce}.vue-popup-plus-animation-enter-fly-top{animation-name:vue-popup-plus-animation-enter-fly-top}.vue-popup-plus-animation-leave-fly-top{animation-name:vue-popup-plus-animation-leave-fly-top}.vue-popup-plus-animation-enter-fly-left{animation-name:vue-popup-plus-animation-enter-fly-left}.vue-popup-plus-animation-leave-fly-left{animation-name:vue-popup-plus-animation-leave-fly-left}.vue-popup-plus-animation-enter-fly-right{animation-name:vue-popup-plus-animation-enter-fly-right}.vue-popup-plus-animation-leave-fly-right{animation-name:vue-popup-plus-animation-leave-fly-right}.vue-popup-plus-animation-enter-fly-bottom{animation-name:vue-popup-plus-animation-enter-fly-bottom}.vue-popup-plus-animation-leave-fly-bottom{animation-name:vue-popup-plus-animation-leave-fly-bottom}@-moz-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-o-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-moz-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-o-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-moz-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-o-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-moz-keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}:root{--popup-color-mask: rgba(125,125,125,.3);--popup-color-mask-dark-lite: rgba(112,112,112,.3);--popup-color-mask-dark: rgba(94,94,94,.3);--popup-color-mask-dark-most: rgba(50,50,50,.3);--popup-color-mask-light-lite: rgba(138,138,138,.3);--popup-color-mask-light: rgba(157,157,157,.3);--popup-color-mask-light-most: rgba(203,203,203,.3)}.dark{--popup-color-mask: rgba(75,75,75,.3);--popup-color-mask-dark-lite: rgba(68,68,68,.3);--popup-color-mask-dark: rgba(56,56,56,.3);--popup-color-mask-dark-most: rgba(30,30,30,.3);--popup-color-mask-light-lite: rgba(93,93,93,.3);--popup-color-mask-light: rgba(120,120,120,.3);--popup-color-mask-light-most: rgba(183,183,183,.3)}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.VuePopupPlus={},s.Vue))})(this,(function(s,e){"use strict";const w="vue-popup-plus",p={INSTANCE_ID:Symbol(`${w}-instance-id`),COMPUTED_VIEW_STYLE:Symbol(`${w}-computed-view-style`)},f={INSTANCE_STORE:Symbol(`${w}-instance-store`)};function N(i=0){return new Promise(t=>{window.setTimeout(t,i)})}const I=e.defineComponent({name:"PopupMask",__name:"PopupMask",setup(i){const t=e.inject(p.INSTANCE_ID),o=e.inject(f.INSTANCE_STORE);function n(){o.maskClickClose&&E().destroy(t)}return(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["popup-mask",{"is-blur":e.unref(o).maskBlur.value}]),style:e.normalizeStyle({zIndex:e.unref(o).zIndex.value}),onClick:n},null,6))}}),v=(i,t)=>{const o=i.__vccOpts||i;for(const[n,r]of t)o[n]=r;return o},x=v(I,[["__scopeId","data-v-53a2b502"]]),k=v(e.defineComponent({name:"PopupView",__name:"PopupView",setup(i){const t=e.ref(),o=e.inject(p.INSTANCE_ID),n=e.inject(f.INSTANCE_STORE),r=e.ref(0),a=e.ref(0),u=e.computed(()=>typeof n.component=="function"?e.defineAsyncComponent(n.component):n.component),h=e.computed(()=>n.viewTranslateOverflow.value?n.viewTranslateX.value:n.viewTranslateX.value>0?Math.min(n.viewTranslateX.value,(window.innerWidth-r.value)/2):Math.max(n.viewTranslateX.value,-(window.innerWidth-r.value)/2)),_=e.computed(()=>n.viewTranslateOverflow.value?n.viewTranslateY.value:n.viewTranslateY.value>0?Math.min(n.viewTranslateY.value,(window.innerHeight-a.value)/2):Math.max(n.viewTranslateY.value,-(window.innerHeight-a.value)/2)),P=e.computed(()=>({width:d(n.width.value),maxWidth:d(n.maxWidth.value),minWidth:d(n.minWidth.value),height:d(n.height.value),maxHeight:d(n.maxHeight.value),minHeight:d(n.minHeight.value),transform:`translate(${h.value}px, ${_.value}px)`})),j=e.computed(()=>({width:r.value,height:a.value,zIndex:n.zIndex.value,translateX:h.value,translateY:_.value}));e.provide(p.COMPUTED_VIEW_STYLE,j),e.onMounted(()=>{window.setTimeout(S,n.animationDuration.value)}),e.onUpdated(()=>{S()});async function S(){await e.nextTick();const c=t.value?.getBoundingClientRect();c&&(r.value=c.width,a.value=c.height)}function d(c){return typeof c=="number"?`${c}px`:c}return(c,X)=>(e.openBlock(),e.createElementBlock("div",{class:"popup-view-wrapper",style:e.normalizeStyle({zIndex:e.unref(n).zIndex.value})},[e.createElementVNode("div",{class:"popup-view",style:e.normalizeStyle(P.value),ref_key:"popupViewRef",ref:t},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value),e.mergeProps({key:`${e.unref(o).name}-component`},e.unref(n).componentProps),null,16))],4)],4))}}),[["__scopeId","data-v-14a39a91"]]),y=e.defineComponent({name:"PopupAnimation",__name:"PopupAnimation",props:{type:{},duration:{}},setup(i){e.useCssVars(u=>({v9a56ef92:a.value}));const t=e.inject(f.INSTANCE_STORE),o=e.ref(!1),n=e.computed(()=>`vue-popup-plus-animation vue-popup-plus-animation-enter-${i.type}`),r=e.computed(()=>`vue-popup-plus-animation vue-popup-plus-animation-leave-${i.type}`),a=e.computed(()=>`${i.duration}ms`);return e.onMounted(()=>{o.value=!0}),(u,h)=>(e.openBlock(),e.createBlock(e.Transition,{"enter-active-class":n.value,"leave-active-class":r.value},{default:e.withCtx(()=>[o.value&&!e.unref(t).isBeforeUnmount.value?e.renderSlot(u.$slots,"default",{key:0,style:e.normalizeStyle({animationDuration:`${i.duration}ms`})}):e.createCommentVNode("",!0)]),_:3},8,["enter-active-class","leave-active-class"]))}}),g=e.defineComponent({name:"Popup",__name:"Popup",props:{store:{}},setup(i){return e.provide(p.INSTANCE_ID,i.store.id),e.provide(f.INSTANCE_STORE,i.store),(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[i.store.mask?(e.openBlock(),e.createBlock(y,{key:0,duration:i.store.animationDuration.value,type:i.store.maskAnimation.value},{default:e.withCtx(()=>[e.createVNode(x)]),_:1},8,["duration","type"])):e.createCommentVNode("",!0),e.createVNode(y,{duration:i.store.animationDuration.value,type:i.store.viewAnimation.value},{default:e.withCtx(()=>[e.createVNode(k)]),_:1},8,["duration","type"])],64))}}),A=(i,{component:t,componentProps:o,onMounted:n,onUnmounted:r,appendTo:a,mask:u,maskClickClose:h,disableScroll:_,...P})=>({id:i,parentElement:O(a),appendTo:a,mask:u,maskClickClose:h,disableScroll:_,component:t,componentProps:o,onMounted:n,onUnmounted:r,isBeforeUnmount:e.ref(!1),...e.toRefs(e.reactive(P))});function O(i){return typeof i=="string"&&(i=document.querySelector(i)||document.body),i}class b{#t;get seed(){return this.#t}get name(){return`vue-popup-plus-instance-${this.seed}`}constructor(t){this.#t=t}}class ${#t;#i;#e;#n;#r;#o;get id(){return this.#i}get store(){return this.#e}get renderType(){return this.#t.config.debugMode?"app":"vnode"}constructor(t,o){this.#t=t,this.#i=new b(t.seed),this.#e=A(this.#i,o),this.renderType==="app"?(this.#n=e.createApp(g,{store:this.#e}),this.#n._context.components=this.#t.app._context.components,this.#n._context.provides=this.#t.app._context.provides,this.#n._context.config=this.#t.app._context.config,this.#n._context.directives=this.#t.app._context.directives,this.#n._context.mixins=this.#t.app._context.mixins):(this.#r=e.createVNode(g,{store:this.#e}),this.#r.appContext=this.#t.app._context,this.#r.appContext.components.Popup=g)}mount(){return this.#o=document.createElement("div"),this.renderType==="app"?this.#n.mount(this.#o):e.render(this.#r,this.#o),this.#e.parentElement.appendChild(this.#o),this.#e.onMounted(),this.id}async unmount(t){this.#e.isBeforeUnmount.value=!0,await N(this.#e.animationDuration.value),this.renderType==="app"?this.#n.unmount():e.render(null,this.#o),this.#e.parentElement.removeChild(this.#o),this.#e.onUnmounted(t)}update(t){for(const o in t){const n=o,r=t[n]===void 0?this.#e[n].value:t[n];this.#e[n].value=r}}}class m extends Error{constructor(t){super(t)}toString(){return`vue-popup-plus error: ${this.message}`}}class M{get NONE(){return"none"}get FADE(){return"fade"}get SCALE_ENLARGE(){return"scale-enlarge"}get SCALE_REDUCE(){return"scale-reduce"}get FLY_TOP(){return"fly-top"}get FLY_LEFT(){return"fly-left"}get FLY_RIGHT(){return"fly-right"}get FLY_BOTTOM(){return"fly-bottom"}constructor(){}}const l=new M,D=i=>i,B=i=>new Proxy(i,{set(t,o,n){throw new m(`${o} 是只读属性，不能被覆盖`)},get(t,o){return o==="customProperties"?V(i):o==="customAnimations"?U():i[o]}});function V(i){return new Proxy({},{set:(t,o,n)=>{if(o in i)throw new m(`定义插件扩展属性 ${o} 时失败，${o} 是只读属性，不能被覆盖`);return i.__proto__[o]=n,!0},get:(t,o)=>{if(o in i)return i.__proto__[o]}})}function U(i){return new Proxy({},{set:(t,o,n)=>{if(o in l)throw new m(`定义插件扩展动画类型 ${o} 时失败，${o} 是只读属性，不能被覆盖`);return l.__proto__[o]=n,!0},get:(t,o)=>{if(o in l)return l.__proto__[o]}})}const C="1.4.0",Y={appendTo:document.body,mask:!0,maskClickClose:!1,disableScroll:!0,componentProps:{},onMounted:()=>{},onUnmounted:()=>{},width:"auto",maxWidth:"auto",minWidth:"auto",height:"auto",maxHeight:"auto",minHeight:"auto",viewTranslateX:0,viewTranslateY:0,viewTranslateOverflow:!1,viewAnimation:l.FADE,maskAnimation:l.FADE,maskBlur:!0,animationDuration:100};class R{_core;get version(){return C}constructor(t){this._core=t}install(t){t.config.globalProperties[this._core.config.prototypeName]=this,this._core.app=t}use(t,o){if(!this._core.addPlugin(t))throw new m(`使用插件 ${t.name} 失败，已存在同名插件 ${t.name}`);t.install(B(this),this._core.config,o)}render({zIndex:t,...o}){t=t??this._core.config.zIndex++;const n=new $(this._core,{...Y,...o,zIndex:t});return this._core.addInstance(n),n.mount(),n.id}update(t,o){const n=this._core.getInstance(t);n&&n.update(o)}async destroy(t,o){const n=this._core.getInstance(t);n&&(await n.unmount(o),this._core.removeInstance(n))}}let T=null;function W(i){return new H(i)}function z(){return T}class H{app;#t=1;#i={};#e;#n;#r={};#o="";get seed(){return this.#t++}get config(){return this.#n}get controller(){return this.#e}constructor({zIndex:t=1e3,prototypeName:o="$popup",autoDisableScroll:n=!0,debugMode:r=!1}={}){this.#n={zIndex:t,prototypeName:o,autoDisableScroll:n,debugMode:r},this.#e=new R(this),T=this}addInstance(t){this.#i[t.id.name]=t,this.config.autoDisableScroll&&t.store.disableScroll&&this.#s()}getInstance(t){return this.#i[t.name]}removeInstance(t){delete this.#i[t.id.name],Object.values(this.#i).filter(o=>o.store.disableScroll).length===0&&this.#a()}addPlugin(t){return this.getPlugin(t.name)?!1:(this.#r[t.name]=t,!0)}getPlugin(t){return this.#r[t]}removePlugin(t){delete this.#r[t]}#s(){document.body.style.overflow!=="hidden"&&(this.#o=document.body.style.overflow,document.body.style.overflow="hidden")}#a(){this.config.autoDisableScroll&&(document.body.style.overflow=this.#o)}}function L(i){return W(i).controller}function E(){const i=z();if(!i)throw new m("调用 usePopup 前请先调用 createPopup 创建弹出层控制器实例");return i.controller}s.POPUP_ANIMATIONS=l,s.POPUP_COMPONENT_INJECTS=p,s.createPopup=L,s.definePlugin=D,s.usePopup=E,s.version=C,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-popup-plus",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "keywords": [
     "vue",
     "vue3",