UNPKG

@determaer/vue-use-modal

Version:

This library was created to simplify utilization process of modal windows in Vue applications with use of async components.

3 lines (2 loc) 1.96 kB
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=document.head.querySelector("meta[property=csp-nonce]")?.content,e.appendChild(document.createTextNode(".use-modal-wrapper-backdrop{position:fixed;inset:0;background-color:#0000004d;display:flex;justify-content:center;align-items:center;z-index:1000}.use-modal-wrapper-frame{background:#fff;box-shadow:2px 2px 10px 1px;max-width:300px;max-height:300px;overflow-x:auto}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(); (function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["vue3-use-modal"]={},n.Vue))})(this,(function(n,e){"use strict";const b={class:"use-modal-wrapper-frame"},C=e.defineComponent({__name:"Modal",emits:["close"],setup(i,{emit:t}){const s=t,a=o=>{o.target instanceof HTMLElement&&o.target.classList.contains("use-modal-wrapper-backdrop")&&s("close")};return(o,u)=>(e.openBlock(),e.createElementBlock("div",{class:"use-modal-wrapper-backdrop",onClick:a},[e.createElementVNode("div",b,[e.renderSlot(o.$slots,"default")])]))}});function _({component:i,loadingComponent:t,errorComponent:s,timeout:a,attrs:o,Modal:u,modalAttrs:y}){return new Promise(d=>{const c=document.createElement("div");document.body.appendChild(c);const l=e.ref(Object.create({})),r=()=>{p.unmount(),document.body.removeChild(c),d(!1)},m=()=>{Object.keys(l.value).length>0&&d(l.value),d(!0),r()},M=f=>{Object.keys(f).forEach(h=>{l.value[h]=f[h]})},g=e.defineComponent({render(){return e.h(u,{...y,onClose:r,onSubmit:m},{default:()=>e.h(e.defineAsyncComponent({loader:()=>i,loadingComponent:t,errorComponent:s,timeout:a}),{...o,onChange:M,onSubmit:m,onClose:r})})}}),p=e.createApp(g);p.mount(c)})}n.Modal=C,n.useModal=_,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));