vue3-use-modal/dist/use-modal.umd.js

vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal. It is not only component based but also lets using modal either asynchronous or synchronous behavior.

var v=Object.defineProperty;var g=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var y=(t,e,n)=>e in t?v(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,m=(t,e)=>{for(var n in e||(e={}))_.call(e,n)&&y(t,n,e[n]);if(g)for(var n of g(e))R.call(e,n)&&y(t,n,e[n]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.useModal={},t.vue))})(this,function(t,e){"use strict";const n=d=>{throw new Error(`useModal Error: ${d}`)},M=Symbol("modal_key");class u{constructor(l){return l!==M&&n(`Invalid construct key ${l}`),this}static getInstance(){return this.modalProxy?this.modalProxy:(this.modalProxy=new u(M),this.modalProxy)}setModalExposed(l){return this.modalExposed=l,this}addModal(l){var r;if(typeof window!="undefined")return(r=this.modalExposed)==null?void 0:r.addModal(l)}closeModal(l){var r;if(typeof window!="undefined")return(r=this.modalExposed)==null?void 0:r.closeModal({key:l})}}const h=()=>u.getInstance(),P=e.defineComponent({setup(d,{expose:l}){const r=e.ref(0),i=e.ref([]),f=({key:c,component:s,props:o={}})=>(s||n("Invalid component was passed."),new Promise((a,k)=>{i.value.push({key:c,id:r.value++,component:e.markRaw(s),props:o,resolve:a,reject:k})})),p=({id:c,key:s})=>{s?i.value=i.value.filter(({key:o})=>s!==o):i.value=i.value.filter(({id:o})=>c!==o)},w=(c,s,o)=>{o(c),p({id:s})},b=(c,s,o)=>{o(c),p({id:s})};return l({addModal:f,closeModal:p}),(c,s)=>(e.openBlock(),e.createElementBlock("div",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),e.mergeProps({key:o.id},o.props,{onResolve:a=>w(a,o.id,o.resolve),onReject:a=>b(a,o.id,o.reject),onClose:()=>p({id:o.id})}),null,16,["onResolve","onReject","onClose"]))),128))]))}}),x=()=>{document||n("No document.");const d=document.createElement("div");return d.setAttribute("id","modal"),document.body.prepend(d),d};var E={install(d){const l=x(),r=e.createApp(P),i=u.getInstance(),f=r.mount(l);i.setModalExposed(f),d.config.globalProperties.$modal=i,r.config.globalProperties=m(m({},r.config.globalProperties),d.config.globalProperties)}};t.ModalPlugin=E,t.useModal=h,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});