diff --git a/demo/index.bbee436f.js b/demo/index.bbee436f.js deleted file mode 100644 index 56dad3f..0000000 --- a/demo/index.bbee436f.js +++ /dev/null @@ -1 +0,0 @@ -var e=Object.defineProperty,l=Object.prototype.hasOwnProperty,o=Object.getOwnPropertySymbols,a=Object.prototype.propertyIsEnumerable,t=(l,o,a)=>o in l?e(l,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[o]=a,s=(e,s)=>{for(var n in s||(s={}))l.call(s,n)&&t(e,n,s[n]);if(o)for(var n of o(s))a.call(s,n)&&t(e,n,s[n]);return e};import{d as n,r as d,c as r,a as u,F as i,b as c,o as m,w as v,e as b,f as h,p,g as f,h as M,i as w,n as y,j as C,k as S,l as g,t as k,m as E,q as x,T as V,s as _,u as L,v as A,x as U,y as j,z as D,A as R,B as O}from"./vendor.020e047f.js";!function(e=".",l="__import__"){try{self[l]=new Function("u","return import(u)")}catch(o){const a=new URL(e,location),t=e=>{URL.revokeObjectURL(e.src),e.remove()};self[l]=e=>new Promise(((o,s)=>{const n=new URL(e,a);if(self[l].moduleMap[n])return o(self[l].moduleMap[n]);const d=new Blob([`import * as m from '${n}';`,`${l}.moduleMap['${n}']=m;`],{type:"text/javascript"}),r=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(d),onerror(){s(new Error(`Failed to import: ${e}`)),t(r)},onload(){o(self[l].moduleMap[n]),t(r)}});document.head.appendChild(r)})),self[l].moduleMap={}}}("/vue-universal-modal/demo/");const $={h3:"mt-6 mb-2 text-xl font-bold",ul:"mt-2 list-disc list-inside",button:"mt-2 rounded-full py-1 px-4 bg-white transition border-blue-500 border-2 text-blue-500 text-sm hover:border-blue-700 hover:text-blue-700 focus:bg-blue-700 focus:text-white focus:outline-none"};var T=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$}}});const B={class:"modal"},K=u("p",null," Hello ",-1);T.render=function(e,l,o,a,t,s){const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 1. basic ",2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=(...l)=>e.showModal&&e.showModal(...l))}," Show modal ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/1.basic.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{modelValue:e.isShow,"onUpdate:modelValue":l[3]||(l[3]=l=>e.isShow=l),close:e.closeModal},{default:v((()=>[u("div",B,[K,u("button",{class:e.style.button,onClick:l[2]||(l[2]=(...l)=>e.closeModal&&e.closeModal(...l))}," close ",2)])])),_:1},8,["modelValue","close"])],64)};var N=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$}}});const F={class:"modal"},I=u("p",null," change v-show ",-1);N.render=function(e,l,o,a,t,s){const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 2. change v-show (always mounted) ",2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=(...l)=>e.showModal&&e.showModal(...l))}," Show modal ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/2.visible.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{"model-value":!0,close:e.closeModal,disabled:!e.isShow},{default:v((()=>[u("div",F,[I,u("button",{class:e.style.button,onClick:l[2]||(l[2]=(...l)=>e.closeModal&&e.closeModal(...l))}," close ",2)])])),_:1},8,["close","disabled"])],64)};var P=n({setup(){const e=b({modal1:!1,modal2:!1});return{isShowModal:e,options:{transition:!1,closeClickDimmed:!1,closeKeyCode:!1,styleModalContent:{justifyContent:"flex-start"}},showModal:function(l){e[l]=!0},closeModal:function(l){e[l]=!1},style:$}}});const H=u("li",null,"transition: false",-1),q=u("li",null,"closeClickDimmed: false",-1),z=u("li",null,"closeKeyCode: false",-1),G=u("li",null,"styleModalContent: { justifyContent: 'flex-start' }",-1),J={class:"modal"},Q=u("p",null," modal1 ",-1),W={class:"modal"},X=u("p",null," modal2 ",-1);P.render=function(e,l,o,a,t,s){const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 3. options ",2),u("ul",{class:e.style.ul},[H,q,z,G],2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=l=>e.showModal("modal1"))}," Show modal ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/3.options.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{modelValue:e.isShowModal.modal1,"onUpdate:modelValue":l[4]||(l[4]=l=>e.isShowModal.modal1=l),close:()=>e.closeModal("modal1"),options:e.options,style:{backgroundColor:"rgba(59, 130, 246, 0.3)"}},{default:v((()=>[u("div",J,[Q,u("button",{class:[e.style.button,"mr-2"],onClick:l[2]||(l[2]=l=>e.showModal("modal2"))}," open modal2 ",2),u("button",{class:e.style.button,onClick:l[3]||(l[3]=()=>e.closeModal("modal1"))}," close ",2)])])),_:1},8,["modelValue","close","options","style"]),u(n,{modelValue:e.isShowModal.modal2,"onUpdate:modelValue":l[6]||(l[6]=l=>e.isShowModal.modal2=l),close:()=>e.closeModal("modal2"),options:e.options},{default:v((()=>[u("div",W,[X,u("button",{class:e.style.button,onClick:l[5]||(l[5]=()=>e.closeModal("modal2"))}," close ",2)])])),_:1},8,["modelValue","close","options"])],64)};var Y=n({setup(){const e=b({modal1:!1,modal2:!1});return{isShowModal:e,showModal:function(l){e[l]=!0},closeModal:function(l){e[l]=!1},style:$}}});const Z={class:"modal"},ee=u("p",null," modal1 ",-1),le={class:"modal"},oe=u("p",null," modal2 ",-1);Y.render=function(e,l,o,a,t,s){const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 4. modal in modal ",2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=l=>e.showModal("modal1"))}," Show modal1 ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/4.modal.on.modal.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{modelValue:e.isShowModal.modal1,"onUpdate:modelValue":l[4]||(l[4]=l=>e.isShowModal.modal1=l),close:()=>e.closeModal("modal1")},{default:v((()=>[u("div",Z,[ee,u("button",{class:e.style.button,style:{marginRight:"10px"},onClick:l[2]||(l[2]=l=>e.showModal("modal2"))}," open modal2 ",2),u("button",{class:e.style.button,onClick:l[3]||(l[3]=()=>e.closeModal("modal1"))}," close ",2)])])),_:1},8,["modelValue","close"]),u(n,{modelValue:e.isShowModal.modal2,"onUpdate:modelValue":l[6]||(l[6]=l=>e.isShowModal.modal2=l),close:()=>e.closeModal("modal2")},{default:v((()=>[u("div",le,[oe,u("button",{class:e.style.button,onClick:l[5]||(l[5]=()=>e.closeModal("modal2"))}," close ",2)])])),_:1},8,["modelValue","close"])],64)};var ae=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$}}});const te=h();p("data-v-118afcd2");const se={class:"modal"},ne=u("p",null," Hello ",-1);f();const de=te(((e,l,o,a,t,s)=>{const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 5. custom animation ",2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=(...l)=>e.showModal&&e.showModal(...l))}," Show modal ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/5.custom.animation.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{modelValue:e.isShow,"onUpdate:modelValue":l[3]||(l[3]=l=>e.isShow=l),close:e.closeModal},{default:te((()=>[u("div",se,[ne,u("button",{class:e.style.button,onClick:l[2]||(l[2]=(...l)=>e.closeModal&&e.closeModal(...l))}," close ",2)])])),_:1},8,["modelValue","close"])],64)}));ae.render=de,ae.__scopeId="data-v-118afcd2";var re=n({setup(){const e=b({modal1:!1,modal2:!1});return{isShowModal:e,showModal:function(l){e[l]=!0},closeModal:function(l){e[l]=!1},style:$}}});const ue={class:"modal"},ie=u("h2",{id:"heading-modal1"}," wai-aria1 ",-1),ce={class:"modal"},me=u("h2",{id:"heading-modal2"}," wai-aria2 ",-1);re.render=function(e,l,o,a,t,s){const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 6. wai-aria ",2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=l=>e.showModal("modal1"))}," Show modal1 ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/6.wai-aria.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{id:"aria-modal1",modelValue:e.isShowModal.modal1,"onUpdate:modelValue":l[4]||(l[4]=l=>e.isShowModal.modal1=l),class:"border-8 border-white-700 focus:border-blue-700","aria-labelledby":"heading-modal1",close:()=>e.closeModal("modal1")},{default:v((()=>[u("div",ue,[ie,u("button",{class:[e.style.button,"mr-2"],onClick:l[2]||(l[2]=l=>e.showModal("modal2"))}," open modal2 ",2),u("button",{class:e.style.button,onClick:l[3]||(l[3]=()=>e.closeModal("modal1"))}," close ",2)])])),_:1},8,["modelValue","close"]),u(n,{id:"aria-modal2",modelValue:e.isShowModal.modal2,"onUpdate:modelValue":l[6]||(l[6]=l=>e.isShowModal.modal2=l),class:"border-8 border-white-700 focus:border-blue-700","aria-labelledby":"heading-modal2",close:()=>e.closeModal("modal2")},{default:v((()=>[u("div",ce,[me,u("button",{class:e.style.button,onClick:l[5]||(l[5]=()=>e.closeModal("modal2"))}," close ",2)])])),_:1},8,["modelValue","close"])],64)};var ve=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$,beforeEnter:function(){console.log("before enter")},afterEnter:function(){console.log("after enter")},beforeLeave:function(){console.log("before leave")},afterLeave:function(){console.log("after leave")}}}});const be={class:"modal"},he=u("p",null," Hello ",-1);ve.render=function(e,l,o,a,t,s){const n=c("Modal");return m(),r(i,null,[u("h3",{class:e.style.h3}," 7. event (please see console) ",2),u("div",null,[u("button",{class:e.style.button,onClick:l[1]||(l[1]=(...l)=>e.showModal&&e.showModal(...l))}," Show modal ",2),u("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/7.event.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),u(n,{modelValue:e.isShow,"onUpdate:modelValue":l[3]||(l[3]=l=>e.isShow=l),close:e.closeModal,onBeforeEnter:e.beforeEnter,onAfterEnter:e.afterEnter,onBeforeLeave:e.beforeLeave,onAfterLeave:e.afterLeave},{default:v((()=>[u("div",be,[he,u("button",{class:e.style.button,onClick:l[2]||(l[2]=(...l)=>e.closeModal&&e.closeModal(...l))}," close ",2)])])),_:1},8,["modelValue","close","onBeforeEnter","onAfterEnter","onBeforeLeave","onAfterLeave"])],64)};var pe=n({components:{Example1:T,Example2:N,Example3:P,Example4:Y,Example5:ae,Example6:re,Example7:ve}});const fe=u("h2",{class:"text-2xl font-bold mt-8 mb-4"}," Examples ",-1);pe.render=function(e,l,o,a,t,s){const n=c("Example1"),d=c("Example2"),v=c("Example3"),b=c("Example4"),h=c("Example5"),p=c("Example6"),f=c("Example7");return m(),r(i,null,[fe,u(n),u(d),u(v),u(b),u(h),u(p),u(f)],64)};const Me=({modalRef:e,latest:l,show:o})=>{let a;function t(o){const t=o.target.closest(`.${Ce}`);if(l.value&&(!t||t!==e.value)){if(t&&!t.classList.contains(`${Ce}-show`))return;a=o.target}}M((()=>{document.addEventListener("click",t),w((()=>o.value),(l=>{y((()=>function(l){l?e.value&&e.value.focus():a&&a.focus()}(l)))}),{immediate:o.value})})),C((()=>{document.removeEventListener("click",t)}))};var we=n({inheritAttrs:!1,props:{close:{type:Function,default:()=>{}},disabled:{type:Boolean,default:!1},modelValue:{type:Boolean,default:!0},options:{type:Object,default:()=>({})}},emits:["before-enter","enter","after-enter","enter-cancelled","before-leave","leave","after-leave","leave-cancelled"],setup(e,l){const{teleportTarget:o}=g(ye),{close:a,disabled:t,options:n,modelValue:r}=k(e),u=d(void 0===r.value||r.value),i=d(null),c=d(!t.value),m=s({transition:300,closeClickDimmed:!0,closeKeyCode:27,styleModalContent:{}},n.value);w([()=>r.value,()=>t.value],(()=>{const e=r.value&&!t.value;c.value=e,r.value&&(u.value=r.value)}),{immediate:!0});const{latest:v}=(({modalRef:e,show:l})=>{const{visibleModals:o,addVisibleModals:a,removeVisibleModals:t}=g(ye),s=S((()=>{const l=[...o.value.values()];return!(!l.length||!e.value)&&l[l.length-1]===e.value}));return w((()=>l.value),(()=>{y((()=>{e.value&&(l.value?a(e.value):t(e.value))}))}),{immediate:!0}),{latest:s}})({modalRef:i,show:c});Me({latest:v,modalRef:i,show:c});const{onClickDimmed:b}=(({close:e,closeClickDimmed:l,closeKeyCode:o,latest:a})=>{function t(l){l.keyCode===o&&a.value&&e.value()}return M((()=>{o&&document.addEventListener("keyup",t)})),C((()=>{o&&document.removeEventListener("keyup",t)})),{onClickDimmed:function(){l&&e.value()}}})({close:a,closeClickDimmed:m.closeClickDimmed,closeKeyCode:m.closeKeyCode,latest:v}),h={beforeEnter:()=>l.emit("before-enter"),enter:()=>l.emit("enter"),afterEnter:()=>l.emit("after-enter"),enterCancelled:()=>l.emit("enter-cancelled"),beforeLeave:()=>l.emit("before-leave"),leave:()=>l.emit("leave"),afterLeave:()=>{l.emit("after-leave"),!1===r.value&&(u.value=!1)},leaveCancelled:()=>l.emit("leave-cancelled")};return{CLASS_NAME:Ce,emitClose:()=>{console.warn("emitClose was deprecated.\nhttps://github.com/hoiheart/vue-universal-modal#usage-modal"),a.value()},inserted:u,latest:v,mergeOptions:m,modalRef:i,onClickDimmed:b,onTransitionEmit:h,show:c,teleportTarget:o,transition:!!m.transition&&m.transition/1e3+"s"}}});we.render=function(e,l,o,a,t,n){return e.inserted?(m(),r(_,{key:0,to:e.teleportTarget,disabled:e.disabled},[u(V,E({appear:"",name:e.CLASS_NAME},x(e.onTransitionEmit)),{default:v((()=>{var o;return[A(u("div",E({ref:"modalRef",role:"dialog",tabindex:"-1","aria-modal":"true","aria-label":"Modal window",class:[e.CLASS_NAME,{[`${e.CLASS_NAME}-show`]:e.show},{[`${e.CLASS_NAME}-latest`]:e.latest}],style:{transitionDuration:e.transition}},e.$attrs),[u("div",{class:`${e.CLASS_NAME}-content`,style:s({transitionDuration:e.transition},null==(o=e.mergeOptions)?void 0:o.styleModalContent),onClick:l[1]||(l[1]=j(((...l)=>e.onClickDimmed&&e.onClickDimmed(...l)),["self"]))},[D(e.$slots,"default",{emitClose:e.emitClose}),D(e.$slots,"close")],6)],16),[[U,e.show]])]})),_:3},16,["name"])],8,["to","disabled"])):L("",!0)};const ye="VueUniversalModal",Ce="vue-universal-modal";var Se={install:(e,l={})=>{const{teleportTarget:o="",teleportComponent:a="",teleportComponentId:t="",modalComponent:s="Modal"}=l;if(!o)return console.error("teleportTarget is required.");if(a||t)return console.error("teleportComponent, teleportComponentId was deprecated. use teleportTarget instead. (https://github.com/hoiheart/vue-universal-modal)");const n=d(new Set);e.provide(ye,{teleportTarget:o,visibleModals:R(n),addVisibleModals:e=>{n.value.add(e)},removeVisibleModals:e=>{n.value.delete(e)}}),e.component(s,we)}};const ge=O(pe);ge.use(Se,{teleportTarget:"#modals"}),ge.mount("#app"); diff --git a/demo/index.c2b2a454.js b/demo/index.c2b2a454.js new file mode 100644 index 0000000..f158591 --- /dev/null +++ b/demo/index.c2b2a454.js @@ -0,0 +1 @@ +var e=Object.defineProperty,o=Object.prototype.hasOwnProperty,l=Object.getOwnPropertySymbols,a=Object.prototype.propertyIsEnumerable,t=(o,l,a)=>l in o?e(o,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):o[l]=a,s=(e,s)=>{for(var n in s||(s={}))o.call(s,n)&&t(e,n,s[n]);if(l)for(var n of l(s))a.call(s,n)&&t(e,n,s[n]);return e};import{d as n,r as d,c as u,a as r,w as i,F as c,b as m,o as v,e as b,f as h,p,g as f,h as M,i as w,n as y,j as C,k as g,l as S,t as k,m as E,q as x,T as V,s as _,u as L,v as D,x as U,y as A,z as j,A as R,B as O}from"./vendor.2f2c88a5.js";!function(e=".",o="__import__"){try{self[o]=new Function("u","return import(u)")}catch(l){const a=new URL(e,location),t=e=>{URL.revokeObjectURL(e.src),e.remove()};self[o]=e=>new Promise(((l,s)=>{const n=new URL(e,a);if(self[o].moduleMap[n])return l(self[o].moduleMap[n]);const d=new Blob([`import * as m from '${n}';`,`${o}.moduleMap['${n}']=m;`],{type:"text/javascript"}),u=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(d),onerror(){s(new Error(`Failed to import: ${e}`)),t(u)},onload(){l(self[o].moduleMap[n]),t(u)}});document.head.appendChild(u)})),self[o].moduleMap={}}}("/vue-universal-modal/demo/");const $={h3:"mt-6 mb-2 text-xl font-bold",ul:"mt-2 list-disc list-inside",button:"mt-2 rounded-full py-1 px-4 bg-white transition border-blue-500 border-2 text-blue-500 text-sm hover:border-blue-700 hover:text-blue-700 focus:bg-blue-700 focus:text-white focus:outline-none"};var T=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$}}});const B={class:"modal"},K=r("p",null," Hello ",-1);T.render=function(e,o,l,a,t,s){const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 1. basic ",2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=(...o)=>e.showModal&&e.showModal(...o))}," Show modal ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/1.basic.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{modelValue:e.isShow,"onUpdate:modelValue":o[3]||(o[3]=o=>e.isShow=o),close:e.closeModal},{default:i((()=>[r("div",B,[K,r("button",{class:e.style.button,onClick:o[2]||(o[2]=(...o)=>e.closeModal&&e.closeModal(...o))}," close ",2)])])),_:1},8,["modelValue","close"])],64)};var N=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$}}});const F={class:"modal"},I=r("p",null," change v-show ",-1);N.render=function(e,o,l,a,t,s){const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 2. change v-show (always mounted) ",2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=(...o)=>e.showModal&&e.showModal(...o))}," Show modal ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/2.visible.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{"model-value":!0,close:e.closeModal,disabled:!e.isShow},{default:i((()=>[r("div",F,[I,r("button",{class:e.style.button,onClick:o[2]||(o[2]=(...o)=>e.closeModal&&e.closeModal(...o))}," close ",2)])])),_:1},8,["close","disabled"])],64)};var P=n({setup(){const e=b({modal1:!1,modal2:!1});return{isShowModal:e,options:{transition:!1,closeClickDimmed:!1,closeKeyCode:!1,styleModalContent:{justifyContent:"flex-start"}},showModal:function(o){e[o]=!0},closeModal:function(o){e[o]=!1},style:$}}});const H=r("li",null,"transition: false",-1),q=r("li",null,"closeClickDimmed: false",-1),z=r("li",null,"closeKeyCode: false",-1),G=r("li",null,"styleModalContent: { justifyContent: 'flex-start' }",-1),J={class:"modal"},Q=r("p",null," modal1 ",-1),W={class:"modal"},X=r("p",null," modal2 ",-1);P.render=function(e,o,l,a,t,s){const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 3. options ",2),r("ul",{class:e.style.ul},[H,q,z,G],2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=o=>e.showModal("modal1"))}," Show modal ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/3.options.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{modelValue:e.isShowModal.modal1,"onUpdate:modelValue":o[4]||(o[4]=o=>e.isShowModal.modal1=o),close:()=>e.closeModal("modal1"),options:e.options,style:{backgroundColor:"rgba(59, 130, 246, 0.3)"}},{default:i((()=>[r("div",J,[Q,r("button",{class:[e.style.button,"mr-2"],onClick:o[2]||(o[2]=o=>e.showModal("modal2"))}," open modal2 ",2),r("button",{class:e.style.button,onClick:o[3]||(o[3]=()=>e.closeModal("modal1"))}," close ",2)])])),_:1},8,["modelValue","close","options","style"]),r(n,{modelValue:e.isShowModal.modal2,"onUpdate:modelValue":o[6]||(o[6]=o=>e.isShowModal.modal2=o),close:()=>e.closeModal("modal2"),options:e.options},{default:i((()=>[r("div",W,[X,r("button",{class:e.style.button,onClick:o[5]||(o[5]=()=>e.closeModal("modal2"))}," close ",2)])])),_:1},8,["modelValue","close","options"])],64)};var Y=n({setup(){const e=b({modal1:!1,modal2:!1});return{isShowModal:e,showModal:function(o){e[o]=!0},closeModal:function(o){e[o]=!1},style:$}}});const Z={class:"modal"},ee=r("p",null," modal1 ",-1),oe={class:"modal"},le=r("p",null," modal2 ",-1);Y.render=function(e,o,l,a,t,s){const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 4. modal in modal ",2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=o=>e.showModal("modal1"))}," Show modal1 ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/4.modal.on.modal.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{modelValue:e.isShowModal.modal1,"onUpdate:modelValue":o[4]||(o[4]=o=>e.isShowModal.modal1=o),close:()=>e.closeModal("modal1")},{default:i((()=>[r("div",Z,[ee,r("button",{class:e.style.button,style:{marginRight:"10px"},onClick:o[2]||(o[2]=o=>e.showModal("modal2"))}," open modal2 ",2),r("button",{class:e.style.button,onClick:o[3]||(o[3]=()=>e.closeModal("modal1"))}," close ",2)])])),_:1},8,["modelValue","close"]),r(n,{modelValue:e.isShowModal.modal2,"onUpdate:modelValue":o[6]||(o[6]=o=>e.isShowModal.modal2=o),close:()=>e.closeModal("modal2")},{default:i((()=>[r("div",oe,[le,r("button",{class:e.style.button,onClick:o[5]||(o[5]=()=>e.closeModal("modal2"))}," close ",2)])])),_:1},8,["modelValue","close"])],64)};var ae=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$}}});const te=h();p("data-v-118afcd2");const se={class:"modal"},ne=r("p",null," Hello ",-1);f();const de=te(((e,o,l,a,t,s)=>{const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 5. custom animation ",2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=(...o)=>e.showModal&&e.showModal(...o))}," Show modal ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/5.custom.animation.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{modelValue:e.isShow,"onUpdate:modelValue":o[3]||(o[3]=o=>e.isShow=o),close:e.closeModal},{default:te((()=>[r("div",se,[ne,r("button",{class:e.style.button,onClick:o[2]||(o[2]=(...o)=>e.closeModal&&e.closeModal(...o))}," close ",2)])])),_:1},8,["modelValue","close"])],64)}));ae.render=de,ae.__scopeId="data-v-118afcd2";var ue=n({setup(){const e=b({modal1:!1,modal2:!1});return{isShowModal:e,showModal:function(o){e[o]=!0},closeModal:function(o){e[o]=!1},style:$}}});const re={class:"modal"},ie=r("h2",{id:"heading-modal1"}," wai-aria1 ",-1),ce={class:"modal"},me=r("h2",{id:"heading-modal2"}," wai-aria2 ",-1);ue.render=function(e,o,l,a,t,s){const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 6. wai-aria ",2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=o=>e.showModal("modal1"))}," Show modal1 ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/6.wai-aria.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{id:"aria-modal1",modelValue:e.isShowModal.modal1,"onUpdate:modelValue":o[4]||(o[4]=o=>e.isShowModal.modal1=o),class:"border-8 border-white-700 focus:border-blue-700","aria-labelledby":"heading-modal1",close:()=>e.closeModal("modal1")},{default:i((()=>[r("div",re,[ie,r("button",{class:[e.style.button,"mr-2"],onClick:o[2]||(o[2]=o=>e.showModal("modal2"))}," open modal2 ",2),r("button",{class:e.style.button,onClick:o[3]||(o[3]=()=>e.closeModal("modal1"))}," close ",2)])])),_:1},8,["modelValue","close"]),r(n,{id:"aria-modal2",modelValue:e.isShowModal.modal2,"onUpdate:modelValue":o[6]||(o[6]=o=>e.isShowModal.modal2=o),class:"border-8 border-white-700 focus:border-blue-700","aria-labelledby":"heading-modal2",close:()=>e.closeModal("modal2")},{default:i((()=>[r("div",ce,[me,r("button",{class:e.style.button,onClick:o[5]||(o[5]=()=>e.closeModal("modal2"))}," close ",2)])])),_:1},8,["modelValue","close"])],64)};var ve=n({setup(){const e=d(!1);return{isShow:e,showModal:function(){e.value=!0},closeModal:function(){e.value=!1},style:$,beforeEnter:function(){console.log("before enter")},afterEnter:function(){console.log("after enter")},beforeLeave:function(){console.log("before leave")},afterLeave:function(){console.log("after leave")}}}});const be={class:"modal"},he=r("p",null," Hello ",-1);ve.render=function(e,o,l,a,t,s){const n=m("Modal");return v(),u(c,null,[r("h3",{class:e.style.h3}," 7. event (please see console) ",2),r("div",null,[r("button",{class:e.style.button,onClick:o[1]||(o[1]=(...o)=>e.showModal&&e.showModal(...o))}," Show modal ",2),r("a",{href:"https://github.com/hoiheart/vue-universal-modal/blob/master/example/7.event.vue",target:"_blank",class:[e.style.button,"ml-2"]}," Source ",2)]),r(n,{modelValue:e.isShow,"onUpdate:modelValue":o[3]||(o[3]=o=>e.isShow=o),close:e.closeModal,onBeforeEnter:e.beforeEnter,onAfterEnter:e.afterEnter,onBeforeLeave:e.beforeLeave,onAfterLeave:e.afterLeave},{default:i((()=>[r("div",be,[he,r("button",{class:e.style.button,onClick:o[2]||(o[2]=(...o)=>e.closeModal&&e.closeModal(...o))}," close ",2)])])),_:1},8,["modelValue","close","onBeforeEnter","onAfterEnter","onBeforeLeave","onAfterLeave"])],64)};var pe=n({components:{Example1:T,Example2:N,Example3:P,Example4:Y,Example5:ae,Example6:ue,Example7:ve}});const fe=r("h2",{class:"text-2xl font-bold mt-8 mb-4"}," Examples ",-1);pe.render=function(e,o,l,a,t,s){const n=m("Example1"),d=m("Example2"),i=m("Example3"),b=m("Example4"),h=m("Example5"),p=m("Example6"),f=m("Example7");return v(),u(c,null,[fe,r(n),r(d),r(i),r(b),r(h),r(p),r(f)],64)};const Me=({modalRef:e,latest:o,show:l})=>{let a;function t(l){const t=l.target.closest(`.${Ce}`);if(o.value&&(!t||t!==e.value)){if(t&&!t.classList.contains(`${Ce}-show`))return;a=l.target}}M((()=>{document.addEventListener("click",t),w((()=>l.value),(o=>{y((()=>function(o){o?e.value&&e.value.focus():a&&a.focus()}(o)))}),{immediate:l.value})})),C((()=>{document.removeEventListener("click",t)}))};var we=n({inheritAttrs:!1,props:{close:{type:Function,default:()=>{}},disabled:{type:Boolean,default:!1},modelValue:{type:Boolean,default:!0},options:{type:Object,default:()=>({})}},emits:["before-enter","enter","after-enter","enter-cancelled","before-leave","leave","after-leave","leave-cancelled"],setup(e,o){const{teleportTarget:l}=S(ye),{close:a,disabled:t,options:n,modelValue:u}=k(e),r=d(void 0===u.value||u.value),i=d(null),c=d(!t.value),m=s({transition:300,closeClickDimmed:!0,closeKeyCode:27,styleModalContent:{}},n.value);w([()=>u.value,()=>t.value],(()=>{const e=u.value&&!t.value;c.value=e,u.value&&(r.value=u.value)}),{immediate:!0});const{latest:v}=(({modalRef:e,show:o})=>{const{visibleModals:l,addVisibleModals:a,removeVisibleModals:t}=S(ye),s=g((()=>{const o=[...l.value.values()];return!(!o.length||!e.value)&&o[o.length-1]===e.value}));return w((()=>o.value),(()=>{y((()=>{e.value&&(o.value?a(e.value):t(e.value))}))}),{immediate:!0}),{latest:s}})({modalRef:i,show:c});Me({latest:v,modalRef:i,show:c});const{onMouseDownDimmed:b,onMouseUpDimmed:h}=(({close:e,closeClickDimmed:o,closeKeyCode:l,latest:a})=>{let t=null;function s(o){o.keyCode===l&&a.value&&e.value()}return M((()=>{l&&document.addEventListener("keyup",s)})),C((()=>{l&&document.removeEventListener("keyup",s)})),{onMouseDownDimmed:function(e){t=e.target},onMouseUpDimmed:function(l){o&&t===l.target&&e.value(),t=null}}})({close:a,closeClickDimmed:m.closeClickDimmed,closeKeyCode:m.closeKeyCode,latest:v}),p={beforeEnter:()=>o.emit("before-enter"),enter:()=>o.emit("enter"),afterEnter:()=>o.emit("after-enter"),enterCancelled:()=>o.emit("enter-cancelled"),beforeLeave:()=>o.emit("before-leave"),leave:()=>o.emit("leave"),afterLeave:()=>{o.emit("after-leave"),!1===u.value&&(r.value=!1)},leaveCancelled:()=>o.emit("leave-cancelled")};return{CLASS_NAME:Ce,emitClose:()=>{console.warn("emitClose was deprecated.\nhttps://github.com/hoiheart/vue-universal-modal#usage-modal"),a.value&&a.value()},inserted:r,latest:v,mergeOptions:m,modalRef:i,onMouseDownDimmed:b,onMouseUpDimmed:h,onTransitionEmit:p,show:c,teleportTarget:l,transition:!!m.transition&&m.transition/1e3+"s"}}});we.render=function(e,o,l,a,t,n){return e.inserted?(v(),u(_,{key:0,to:e.teleportTarget,disabled:e.disabled},[r(V,E({appear:"",name:e.CLASS_NAME},x(e.onTransitionEmit)),{default:i((()=>{var l;return[D(r("div",E({ref:"modalRef",role:"dialog",tabindex:"-1","aria-modal":"true","aria-label":"Modal window",class:[e.CLASS_NAME,{[`${e.CLASS_NAME}-show`]:e.show},{[`${e.CLASS_NAME}-latest`]:e.latest}],style:{transitionDuration:e.transition}},e.$attrs),[r("div",{class:`${e.CLASS_NAME}-content`,style:s({transitionDuration:e.transition},null==(l=e.mergeOptions)?void 0:l.styleModalContent),onMousedown:o[1]||(o[1]=A(((...o)=>e.onMouseDownDimmed&&e.onMouseDownDimmed(...o)),["self"])),onMouseup:o[2]||(o[2]=(...o)=>e.onMouseUpDimmed&&e.onMouseUpDimmed(...o))},[j(e.$slots,"default",{emitClose:e.emitClose}),j(e.$slots,"close")],38)],16),[[U,e.show]])]})),_:3},16,["name"])],8,["to","disabled"])):L("",!0)};const ye="VueUniversalModal",Ce="vue-universal-modal";var ge={install:(e,o={})=>{const{teleportTarget:l="",teleportComponent:a="",teleportComponentId:t="",modalComponent:s="Modal"}=o;if(!l)return console.error("teleportTarget is required.");if(a||t)return console.error("teleportComponent, teleportComponentId was deprecated. use teleportTarget instead. (https://github.com/hoiheart/vue-universal-modal)");const n=d(new Set);e.provide(ye,{teleportTarget:l,visibleModals:R(n),addVisibleModals:e=>{n.value.add(e)},removeVisibleModals:e=>{n.value.delete(e)}}),e.component(s,we)}};const Se=O(pe);Se.use(ge,{teleportTarget:"#modals"}),Se.mount("#app"); diff --git a/demo/index.html b/demo/index.html index adfe771..9ae8ed1 100644 --- a/demo/index.html +++ b/demo/index.html @@ -11,8 +11,8 @@ - - + +
diff --git a/demo/vendor.020e047f.js b/demo/vendor.020e047f.js deleted file mode 100644 index 7e9d74a..0000000 --- a/demo/vendor.020e047f.js +++ /dev/null @@ -1 +0,0 @@ -function e(e,t){const n=Object.create(null),o=e.split(",");for(let r=0;rf?se(e,r,s,!0,!1,p):M(t,n,o,r,s,l,i,c,p)},X=(e,t,n,o,r,s,l,i,c)=>{let u=0;const f=t.length;let p=e.length-1,d=f-1;for(;u<=p&&u<=d;){const o=e[u],a=t[u]=c?bo(t[u]):_o(t[u]);if(!uo(o,a))break;x(o,a,n,null,r,s,l,i,c),u++}for(;u<=p&&u<=d;){const o=e[p],a=t[d]=c?bo(t[d]):_o(t[d]);if(!uo(o,a))break;x(o,a,n,null,r,s,l,i,c),p--,d--}if(u>p){if(u<=d){const e=d+1,a=e f?se(e,r,s,!0,!1,p):L(t,n,o,r,s,l,i,c,p)},X=(e,t,n,o,r,s,l,i,c)=>{let u=0;const f=t.length;let p=e.length-1,d=f-1;for(;u<=p&&u<=d;){const o=e[u],a=t[u]=c?jo(t[u]):Ro(t[u]);if(!Eo(o,a))break;x(o,a,n,null,r,s,l,i,c),u++}for(;u<=p&&u<=d;){const o=e[p],a=t[d]=c?jo(t[d]):Ro(t[d]);if(!Eo(o,a))break;x(o,a,n,null,r,s,l,i,c),p--,d--}if(u>p){if(u<=d){const e=d+1,a=e