@aldoivan10/vuetify-dialog
Version:
Plugin to use dialogs from vuetify programatically
2 lines (1 loc) • 4.73 kB
JavaScript
var P=Object.defineProperty;var c=(a,t)=>P(a,"name",{value:t,configurable:!0});import{ref as v,render as $,createVNode as k,h as l,resolveDirective as R,withDirectives as j,reactive as F,isRef as B}from"vue";import{VCard as H,VDialog as T,VCardItem as I,VCardText as x,VSpacer as L,VBtn as q,VCardActions as D}from"vuetify/components";let w=class{static{c(this,"Dialog")}context;$container=document.createElement("div");constructor(t){this.context=t,this.$container.className="v-overlay-container"}isComponent(t){return typeof t=="function"||typeof t=="object"&&("setup"in t||"render"in t)}getDialog(t,n){const e=this.buildActions.bind(this),i=this.buildBody.bind(this),o=this.buildHeader.bind(this),s=this.buildDialog.bind(this),r=k({render(){const{actions:d,auxActions:u,header:f,body:h,...g}=t.value,b=o(f),p=i(h),m=e(u??d),A=Object.assign({modelValue:n.value,"onUpdate:modelValue":c(C=>n.value=C,"onUpdate:modelValue")},g);return s(A,b,p,m)}});return r.appContext=this.context,r}buildDialog(t,n,e,i){const o=[];n&&o.push(n),e&&o.push(e),i&&o.push(i);const s=l(H,null,{default:c(()=>o,"default")});return k(T,t,{default:c(()=>s,"default")})}buildHeader(t){if(t)return this.isComponent(t.content)?l(t.content,this.transformRefs(t.props)):l(I,this.transformRefs({...t.content,...t.props}))}buildBody(t){if(!t)return;const{html:n,...e}=t.props??{};return this.isComponent(t.content)?l(x,null,{default:c(()=>l(t.content,this.transformRefs(e)),"default")}):n?l(x,{innerHTML:t.content}):l(x,null,{default:c(()=>t.content,"default")})}buildActions(t){if(t){if(Array.isArray(t)){const n=[l(L)],e=R("shortcut");for(const{shortcut:i,...o}of t){const s=l(q,this.transformRefs(o));if(i&&e){const{value:r,modifiers:d={}}=this.transformRefs(i),u=j(s,[[e,r,void 0,d]]);n.push(u)}else n.push(s)}return l(D,null,{default:c(()=>n,"default")})}return l(D,null,{default:c(()=>l(t.content,this.transformRefs(t.props)),"default")})}}bindCloseFunction(t,n,e){const i=c(s=>{t(s),n.value=!1},"closeFunction"),o={onCloseDialog:i};Array.isArray(e.actions)?e.auxActions=e.actions.map(s=>{const r=F({...s});return Object.assign(r,{onClick:s.onClick?.bind(void 0,i,r)})}):e.actions&&(e.actions.props=Object.assign({},e.body?.props,o)),e.body&&(e.body.props=Object.assign({},e.body?.props,o)),e.header&&(e.header.props=Object.assign({},e.body?.props,o))}transformRefs(t){if(!t)return{};const n={};for(const e in t)B(t[e])?n[e]=t[e].value:n[e]=t[e];return n}};class N extends w{static{c(this,"InstanceDialog")}constructor(t){super(t);const n=document.querySelector(".v-overlay-container");n?this.$container=n:document.body.appendChild(this.$container)}show(t){return new Promise(n=>{const e=v(!0),i=t.onAfterLeave;this.bindCloseFunction(n,e,t),t.onAfterLeave=()=>{i?.(),$(null,this.$container)};const o=this.getDialog(v(t),e);$(o,this.$container)})}}class E extends w{static{c(this,"SingletonDialog")}visible=v(!1);options=v({});constructor(t){super(t);const n=this.getDialog(this.options,this.visible),e=document.querySelector(".v-overlay-container");e?this.$container=e:document.body.appendChild(this.$container),$(n,this.$container)}show(t){return new Promise(n=>{this.bindCloseFunction(n,this.visible,t),this.options.value=t,this.visible.value=!0})}}class M{static{c(this,"DialogService")}context;constructor(t,n=!0){this.context=t._context,this.init(this.context,n)}init(t,n){this.dialog=n?new E(t):new N(t)}defaultProps(t){const{transition:n="scale-transition",fullscreen:e=!1,persistent:i=!0,minWidth:o="25%",width:s="fit-content",...r}=t;return{transition:n,fullscreen:e,persistent:i,width:s,minWidth:o,...r}}setSingleton(t=!0){this.init(this.context,t)}show(t){const n=this.defaultProps(t);return this.dialog.show(n)}simple(t){return this.show(t)}alert({action:t={variant:"tonal"},...n}){const{value:e,text:i="Aceptar",color:o="secondary",shortcut:s={value:"enter",modifiers:{click:!0}},...r}=t,u=[{text:i,color:o,onClick:c(h=>{h(e)},"onClick"),shortcut:s,variant:"tonal",...r}],f=Object.assign({actions:u},n);return this.show(f)}confirm({acceptBtn:t={},cancelBtn:n={},...e}){const{variant:i="tonal",value:o=!0,text:s="Aceptar",color:r="secondary",shortcut:d={value:"enter",modifiers:{click:!0}},...u}=t,{variant:f="text",value:h=!1,text:g="Cancelar",color:b="secondary",shortcut:p={value:"esc",modifiers:{click:!0}},...m}=n,C=Object.assign({value:o,text:s,color:r,variant:i,onClick:c(y=>y(o),"onAcceptClick"),shortcut:d},u),S=[Object.assign({value:h,text:g,color:b,variant:f,onClick:c(y=>y(h),"onCancelClick"),shortcut:p},m),C],O=Object.assign({actions:S},e);return this.show(O)}}const V=Symbol("AIDialog"),U={install(a,t){const n=new M(a,t?.singleton);a.provide(V,n),a.config.globalProperties.$dialog=n}};export{U as Dialog,V as DialogSymbol};