vue-html-dialog/dist/vue-html-dialog.umd.cjs

A native HTML Dialog written in Vue.

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VueHtmlDialog={},i.Vue))})(this,function(i,e){"use strict";const C=["id","aria-describedby"],y={role:"document"},k=e.defineComponent({__name:"HtmlDialog",props:{showBackdrop:{type:Boolean,default:!0},closeOnBackdropClick:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},titleId:String,dialogId:String,dialogClass:String,backdropClass:String,closeButtonClass:String,enterActiveClass:{type:String,default:"fade-enter-active"},leaveActiveClass:{type:String,default:"fade-leave-active"},transitionDuration:{type:Number,default:300}},emits:["open","close"],setup(c,{expose:p,emit:a}){const l=c,d=e.ref(null),s=e.ref(!1);function r(){s.value=!0}function u(){s.value=!1}function m(o){o.target===o.currentTarget&&l.closeOnBackdropClick&&u()}function f(o){o.key==="Escape"&&l.closeOnEscape&&u()}return e.watch(s,o=>{o?window.addEventListener("keydown",f):window.removeEventListener("keydown",f)}),e.onBeforeUnmount(()=>{window.removeEventListener("keydown",f)}),p({openDialog:r,closeDialog:u}),(o,t)=>(e.openBlock(),e.createBlock(e.Transition,{"enter-active-class":o.enterActiveClass,onAfterEnter:t[4]||(t[4]=n=>o.$emit("open")),"leave-active-class":o.leaveActiveClass,onAfterLeave:t[5]||(t[5]=n=>o.$emit("close"))},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["backdrop",o.backdropClass]),onPointerup:m,onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"])),onTouchend:t[3]||(t[3]=e.withModifiers(()=>{},["stop"])),role:"presentation",style:e.normalizeStyle({"--transition-duration":o.transitionDuration+"ms"})},[e.createElementVNode("dialog",{ref_key:"dialogEl",ref:d,open:"",id:o.dialogId,class:e.normalizeClass(["dialog",o.dialogClass]),role:"dialog",onClick:t[0]||(t[0]=e.withModifiers(()=>{},["stop"])),onTouchend:t[1]||(t[1]=e.withModifiers(()=>{},["stop"])),"aria-modal":"true","aria-describedby":o.titleId},[e.createElementVNode("div",y,[o.showCloseButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["close-button",o.closeButtonClass]),onPointerup:u,"aria-label":"Close the modal"},"×",34)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},void 0,!0)])],42,C)],38),[[e.vShow,s.value&&o.showBackdrop]])]),_:3},8,["enter-active-class","leave-active-class"]))}}),g=(c,p)=>{const a=c.__vccOpts||c;for(const[l,d]of p)a[l]=d;return a},w=g(k,[["__scopeId","data-v-16e8dd23"]]),B={role:"document"},E=g(e.defineComponent({__name:"FullNativeDialog",props:{modelValue:Boolean,closeOnEscape:{type:Boolean,default:!0},closeButton:{type:Boolean,default:!0},dialogClass:String,closeButtonClass:String,enterActiveClass:{type:String,default:"fade-enter-active"},leaveActiveClass:{type:String,default:"fade-leave-active"},transitionDuration:{type:Number,default:300}},emits:["update:modelValue","open","close"],setup(c,{emit:p}){const a=c,l=e.ref(null),d=e.ref(!1),s=e.ref(null),r=p;function u(){l.value&&(l.value.open||(l.value.showModal(),r("update:modelValue",!0),r("open"),l.value.focus()))}function m(){!l.value||d.value||(d.value=!0,l.value.classList.add(a.leaveActiveClass),setTimeout(()=>{var t,n;(t=l.value)==null||t.close(),d.value=!1,(n=l.value)==null||n.classList.remove(a.leaveActiveClass),r("update:modelValue",!1),r("close")},a.transitionDuration))}e.watch(()=>a.modelValue,t=>{var n;t?(u(),s.value&&clearTimeout(s.value),(n=l.value)==null||n.classList.add(a.enterActiveClass),s.value=window.setTimeout(()=>{var v;(v=l.value)==null||v.classList.remove(a.enterActiveClass),s.value=null},a.transitionDuration)):m()});function f(t){a.closeOnEscape||t.preventDefault()}function o(){r("update:modelValue",!1),r("close")}return e.onMounted(()=>{var t,n;(t=l.value)==null||t.addEventListener("cancel",f),(n=l.value)==null||n.addEventListener("close",o)}),e.onBeforeUnmount(()=>{var t,n;(t=l.value)==null||t.removeEventListener("cancel",f),(n=l.value)==null||n.removeEventListener("close",o)}),(t,n)=>(e.openBlock(),e.createElementBlock("dialog",{ref_key:"dialogEl",ref:l,class:e.normalizeClass([t.dialogClass]),role:"dialog",onPointerdown:n[0]||(n[0]=e.withModifiers(()=>{},["stop"])),"aria-modal":"true"},[e.createElementVNode("div",B,[t.closeButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["close-button",t.closeButtonClass]),onPointerdown:e.withModifiers(m,["prevent"]),"aria-label":"Close dialog",type:"button"},"×",34)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)])],34))}}),[["__scopeId","data-v-6c2d8e9f"]]);i.FullNativeDialog=E,i.HtmlDialog=w,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});