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

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

import{computed as e,unref as t,defineComponent as l,ref as o,toRefs as a,createBlock as r,openBlock as n,Transition as s,mergeProps as i,toHandlers as u,withCtx as v,withDirectives as f,createElementVNode as d,withModifiers as c,createElementBlock as p,createCommentVNode as b,renderSlot as m,createTextVNode as g,toDisplayString as y,vShow as k}from"vue";import{useVModel as _,onClickOutside as C}from"@vueuse/core";var $=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))($||{}),h=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(h||{}),E=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(E||{}),L=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(L||{}),S=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(S||{});const x={modifiers:{type:[String,Array],default:void 0}};E.before;const z={id:[String,Number]};h.bottom,L.button,S.button,$.local;const O={...x,...z,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 V={key:0,class:"vv-dialog__header"},A=["aria-label","title"],w={class:"vv-dialog__content"},B={key:1,class:"vv-dialog__footer"},j=/* @__PURE__ */l({name:"VvDialog",props:O,emits:["open","close","update:modelValue","beforeEnter","afterLeave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(l,{expose:$,emit:h}){const E=l,L=h,S=o(),x=_(E,"modelValue",L),z=o(!1),O=e({get:()=>x.value??z.value,set:e=>{void 0!==x.value?x.value=e:z.value=e}}),j=o(null),{modifiers:D}=a(E),M=function(l,o,a){return e(()=>{const e={[l]:!0},r="string"==typeof o?.value?o.value.split(" "):o?.value;return r&&Array.isArray(r)&&r.forEach(t=>{t&&(e[`${l}--${t}`]=!0)}),a&&Object.keys(a.value).forEach(o=>{e[`${l}--${o}`]=t(a.value[o])}),e})}("vv-dialog",D,e(()=>E.size?{[E.size]:!!E.size}:{})),N=e(()=>{const{id:e}=E;return{id:e}}),P=e(()=>`vv-dialog--${E.transition}`),W={"before-enter":()=>{S.value?.open||S.value?.showModal(),L("open"),L("beforeEnter")},"after-leave":()=>{S.value?.open&&S.value?.close(),L("close"),L("afterLeave")},enter:()=>{L("enter")},"after-enter":()=>{L("afterEnter")},"enter-cancelled":()=>{L("enterCancelled")},"before-leave":()=>{L("beforeLeave")},leave:()=>{L("leave")},"leave-cancelled":()=>{L("leaveCancelled")}};function q(){O.value=!1}function F(){E.keepOpen||q()}return C(j,()=>{E.keepOpen||q()}),$({close:q,open:function(){O.value=!0}}),(e,l)=>(n(),r(s,i({name:t(P)},u(W),{persisted:""}),{default:v(()=>[f(d("dialog",i(t(N),{ref_key:"dialogEl",ref:S,class:t(M),onCancel:c(F,["stop","prevent"])}),[d("article",{ref_key:"modalWrapper",ref:j,class:"vv-dialog__wrapper"},[e.$slots.header||e.title?(n(),p("header",V,[m(e.$slots,"header",{},()=>[g(y(e.title)+" ",1),d("button",{type:"button","aria-label":e.labelClose,title:e.labelClose,class:"vv-dialog__close",onClickPassive:q},null,40,A)])])):b("v-if",!0),d("div",w,[m(e.$slots,"default")]),e.$slots.footer?(n(),p("footer",B,[m(e.$slots,"footer")])):b("v-if",!0)],512)],16),[[k,t(O)]])]),_:3},16,["name"]))}});export{j as default};