@volverjs/ui-vue/dist/components/VvDialog/VvDialog.umd.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDialog=t(e.vue,e.core)}(this,function(e,t){"use strict";var o=(e=>(e.local="local",e.session="session",e))(o||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{});const i={modifiers:{type:[String,Array],default:void 0}};r.before;const s={id:[String,Number]};l.bottom,n.button,a.button,o.local;const u={...i,...s,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,keepOpen:{type:Boolean,default:!1},labelClose:{type:String,default:"Close"}};const d={key:0,class:"vv-dialog__header"},c=["aria-label","title"],f={class:"vv-dialog__content"},v={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:u,emits:["open","close","update:modelValue","beforeEnter","afterLeave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(o,{expose:l,emit:r}){const n=o,a=r,i=e.ref(),s=t.useVModel(n,"modelValue",a),u=e.ref(!1),p=e.computed({get:()=>s.value??u.value,set:e=>{void 0!==s.value?s.value=e:u.value=e}}),m=e.ref(null),{modifiers:b}=e.toRefs(n),g=function(t,o,l){return e.computed(()=>{const r={[t]:!0},n="string"==typeof o?.value?o.value.split(" "):o?.value;return n&&Array.isArray(n)&&n.forEach(e=>{e&&(r[`${t}--${e}`]=!0)}),l&&Object.keys(l.value).forEach(o=>{r[`${t}--${o}`]=e.unref(l.value[o])}),r})}("vv-dialog",b,e.computed(()=>n.size?{[n.size]:!!n.size}:{})),k=e.computed(()=>{const{id:e}=n;return{id:e}}),y=e.computed(()=>`vv-dialog--${n.transition}`),h={"before-enter":()=>{i.value?.open||i.value?.showModal(),a("open"),a("beforeEnter")},"after-leave":()=>{i.value?.open&&i.value?.close(),a("close"),a("afterLeave")},enter:()=>{a("enter")},"after-enter":()=>{a("afterEnter")},"enter-cancelled":()=>{a("enterCancelled")},"before-leave":()=>{a("beforeLeave")},leave:()=>{a("leave")},"leave-cancelled":()=>{a("leaveCancelled")}};function C(){p.value=!1}function E(){n.keepOpen||C()}return t.onClickOutside(m,()=>{n.keepOpen||C()}),l({close:C,open:function(){p.value=!0}}),(t,o)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(y)},e.toHandlers(h),{persisted:""}),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(k),{ref_key:"dialogEl",ref:i,class:e.unref(g),onCancel:e.withModifiers(E,["stop","prevent"])}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:m,class:"vv-dialog__wrapper"},[t.$slots.header||t.title?(e.openBlock(),e.createElementBlock("header",d,[e.renderSlot(t.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(t.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":t.labelClose,title:t.labelClose,class:"vv-dialog__close",onClickPassive:C},null,40,c)])])):e.createCommentVNode("v-if",!0),e.createElementVNode("div",f,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("footer",v,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("v-if",!0)],512)],16),[[e.vShow,e.unref(p)]])]),_:3},16,["name"]))}})});