@vuesimple/vs-modal 3.0.9 → 3.1.2

package/README.md

@@ -19,9 +19,7 @@ A light weight vue plugin built groundup, with importance to accessibility.
 
 ### 📺 Live Demo
 
-Code Sandbox Demo: [Link](https://n2wwm.csb.app/)
-<br />
-Code Sandbox: [Link](https://codesandbox.io/s/vs-modal-n2wwm)
+Demo: [Link](https://vuesimple.netlify.app)
 
 <br />
 

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}.vs-modal{font-size:.875em}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:3px;outline:none;background-color:#fff;box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as i, createBlock as b, resolveDynamicComponent as E, withCtx as p, createElementBlock as l, createCommentVNode as c, createElementVNode as a, renderSlot as f, resolveComponent as w, Transition as M, withDirectives as S, normalizeClass as v, withModifiers as A, normalizeStyle as T, createVNode as x, withKeys as R, toDisplayString as V, vShow as I } from "vue";
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as i, createBlock as b, resolveDynamicComponent as E, withCtx as p, createElementBlock as l, createCommentVNode as c, createElementVNode as a, renderSlot as f, resolveComponent as w, Transition as M, withDirectives as S, normalizeClass as v, withModifiers as A, normalizeStyle as T, createVNode as x, withKeys as R, toDisplayString as V, vShow as I } from "vue";
 const C = (e, t) => {
   const s = e.__vccOpts || e;
   for (const [r, o] of t)

package/dist/index.min.js

@@ -1 +1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}.vs-modal{font-size:.875em}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:3px;outline:none;background-color:#fff;box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsModal=function(c,e){"use strict";const K="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[i,r]of s)o[i]=r;return o},b={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,s){if(!this.containFocus){this.$emit("focus-overflow",t,s);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,s);return}s.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},B={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},k={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function O(t,s,o,i,r,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[0]||(s[0]=l=>n.redirectFocus(l,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",k,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[1]||(s[1]=l=>n.redirectFocus(l,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const E=m(b,[["render",O]]),A=/^\s+|\s+$/g,h=/\s+/g;function F(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function p(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:F(t)}function u(t){return p(t)?(t.getAttribute("class")||"").replace(A,"").split(h):[]}function d(t){return typeof t=="string"?t.replace(A,"").split(h):t}function f(t,s){p(t)&&t.setAttribute("class",d(s).join(" "))}function _(t,s){const o=u(t);return d(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),f(t,o),o}function M(t,s){const o=_(t,s),i=d(s);return o.push(...i),f(t,o),o}function g(t,s){const o=u(t);return d(s).every(r=>o.indexOf(r)!==-1)}const y={add:M,remove:_,contains:g,has:g,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",H="",S={name:"VsModal",components:{VsFocusContainer:E},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return Boolean(this.$slots.footer)},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){!this.dismissible||(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),y.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&y.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const s=Math.max(0,t);return s===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",s),s},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},V=["role"],T={key:0,class:"vs-modal__header"},N={class:"vs-modal__header-text"},v={class:"vs-modal__close-button"},R=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],x={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function z(t,s,o,i,r,n){const l=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:o.role,onClick:s[2]||(s[2]=e.withModifiers((...a)=>n.onBackdropClick&&n.onBackdropClick(...a),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":o.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:s[1]||(s[1]=e.withModifiers((...a)=>n.onBackdropClick&&n.onBackdropClick(...a),["self"]))},[e.createVNode(l,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[o.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",N,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...a)=>n.close&&n.close(...a))},R)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",x,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,V),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const C=m(S,[["render",z]]),j={install(t){t.component("VsModal",C)}};return c.default=C,c.plugin=j,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),c}({},Vue);
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsModal=function(c,e){"use strict";const K="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[i,r]of s)o[i]=r;return o},b={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,s){if(!this.containFocus){this.$emit("focus-overflow",t,s);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,s);return}s.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},B={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},k={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function O(t,s,o,i,r,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[0]||(s[0]=l=>n.redirectFocus(l,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",k,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[1]||(s[1]=l=>n.redirectFocus(l,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const E=m(b,[["render",O]]),A=/^\s+|\s+$/g,h=/\s+/g;function F(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function p(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:F(t)}function u(t){return p(t)?(t.getAttribute("class")||"").replace(A,"").split(h):[]}function d(t){return typeof t=="string"?t.replace(A,"").split(h):t}function f(t,s){p(t)&&t.setAttribute("class",d(s).join(" "))}function _(t,s){const o=u(t);return d(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),f(t,o),o}function M(t,s){const o=_(t,s),i=d(s);return o.push(...i),f(t,o),o}function g(t,s){const o=u(t);return d(s).every(r=>o.indexOf(r)!==-1)}const y={add:M,remove:_,contains:g,has:g,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",H="",S={name:"VsModal",components:{VsFocusContainer:E},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return Boolean(this.$slots.footer)},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){!this.dismissible||(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),y.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&y.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const s=Math.max(0,t);return s===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",s),s},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},V=["role"],T={key:0,class:"vs-modal__header"},N={class:"vs-modal__header-text"},v={class:"vs-modal__close-button"},R=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],x={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function z(t,s,o,i,r,n){const l=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:o.role,onClick:s[2]||(s[2]=e.withModifiers((...a)=>n.onBackdropClick&&n.onBackdropClick(...a),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":o.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:s[1]||(s[1]=e.withModifiers((...a)=>n.onBackdropClick&&n.onBackdropClick(...a),["self"]))},[e.createVNode(l,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[o.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",N,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...a)=>n.close&&n.close(...a))},R)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",x,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,V),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const C=m(S,[["render",z]]),j={install(t){t.component("VsModal",C)}};return c.default=C,c.plugin=j,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),c}({},Vue);

package/dist/index.umd.js

@@ -1 +1 @@
-(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}.vs-modal{font-size:.875em}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:3px;outline:none;background-color:#fff;box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(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.VsModal={},i.Vue))})(this,function(i,e){"use strict";const K="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[l,r]of s)o[l]=r;return o},b={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,s){if(!this.containFocus){this.$emit("focus-overflow",t,s);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,s);return}s.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},B={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},k={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function O(t,s,o,l,r,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[0]||(s[0]=a=>n.redirectFocus(a,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",k,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[1]||(s[1]=a=>n.redirectFocus(a,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const E=m(b,[["render",O]]),A=/^\s+|\s+$/g,p=/\s+/g;function F(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function h(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:F(t)}function u(t){return h(t)?(t.getAttribute("class")||"").replace(A,"").split(p):[]}function d(t){return typeof t=="string"?t.replace(A,"").split(p):t}function f(t,s){h(t)&&t.setAttribute("class",d(s).join(" "))}function _(t,s){const o=u(t);return d(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),f(t,o),o}function M(t,s){const o=_(t,s),l=d(s);return o.push(...l),f(t,o),o}function y(t,s){const o=u(t);return d(s).every(r=>o.indexOf(r)!==-1)}const g={add:M,remove:_,contains:y,has:y,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",q="",S={name:"VsModal",components:{VsFocusContainer:E},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return Boolean(this.$slots.footer)},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){!this.dismissible||(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),g.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&g.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const s=Math.max(0,t);return s===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",s),s},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},V=["role"],T={key:0,class:"vs-modal__header"},N={class:"vs-modal__header-text"},v={class:"vs-modal__close-button"},x=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],R={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function z(t,s,o,l,r,n){const a=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:o.role,onClick:s[2]||(s[2]=e.withModifiers((...c)=>n.onBackdropClick&&n.onBackdropClick(...c),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":o.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:s[1]||(s[1]=e.withModifiers((...c)=>n.onBackdropClick&&n.onBackdropClick(...c),["self"]))},[e.createVNode(a,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[o.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",N,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...c)=>n.close&&n.close(...c))},x)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",R,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,V),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const C=m(S,[["render",z]]),j={install(t){t.component("VsModal",C)}};i.default=C,i.plugin=j,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(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.VsModal={},i.Vue))})(this,function(i,e){"use strict";const K="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[l,r]of s)o[l]=r;return o},b={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,s){if(!this.containFocus){this.$emit("focus-overflow",t,s);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,s);return}s.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},B={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},k={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function O(t,s,o,l,r,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[0]||(s[0]=a=>n.redirectFocus(a,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",k,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[1]||(s[1]=a=>n.redirectFocus(a,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const E=m(b,[["render",O]]),A=/^\s+|\s+$/g,p=/\s+/g;function F(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function h(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:F(t)}function u(t){return h(t)?(t.getAttribute("class")||"").replace(A,"").split(p):[]}function d(t){return typeof t=="string"?t.replace(A,"").split(p):t}function f(t,s){h(t)&&t.setAttribute("class",d(s).join(" "))}function _(t,s){const o=u(t);return d(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),f(t,o),o}function M(t,s){const o=_(t,s),l=d(s);return o.push(...l),f(t,o),o}function y(t,s){const o=u(t);return d(s).every(r=>o.indexOf(r)!==-1)}const g={add:M,remove:_,contains:y,has:y,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",q="",S={name:"VsModal",components:{VsFocusContainer:E},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return Boolean(this.$slots.footer)},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){!this.dismissible||(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),g.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&g.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const s=Math.max(0,t);return s===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",s),s},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},V=["role"],T={key:0,class:"vs-modal__header"},N={class:"vs-modal__header-text"},v={class:"vs-modal__close-button"},x=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],R={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function z(t,s,o,l,r,n){const a=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:o.role,onClick:s[2]||(s[2]=e.withModifiers((...c)=>n.onBackdropClick&&n.onBackdropClick(...c),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":o.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:s[1]||(s[1]=e.withModifiers((...c)=>n.onBackdropClick&&n.onBackdropClick(...c),["self"]))},[e.createVNode(a,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[o.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",N,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...c)=>n.close&&n.close(...c))},x)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",R,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,V),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const C=m(S,[["render",z]]),j={install(t){t.component("VsModal",C)}};i.default=C,i.plugin=j,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-modal",
-  "version": "3.0.9",
+  "version": "3.1.2",
   "description": "A simple vue modal. Perfect for all your modal/ dialogs scenarios.",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -43,5 +43,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple",
-  "gitHead": "12272a2e4a441a1f5ad5cc45d6234de39aae2309"
+  "gitHead": "7fd4d8145903b0c6cb74e11b5a4de2e49ddbc2bc"
 }

package/src/vs-modal.vue

@@ -302,9 +302,19 @@
   $z-index-modal-overlay: 800;
   $el: '.vs-modal';
 
+  [data-theme='dark'] #{$el},
+  .dark #{$el} {
+    --vs-modal-border: #39434b;
+    --vs-modal-bg: #1c2227;
+    --vs-modal-mask-bg: rgba(10, 13, 14, 0.8);
+  }
+
   #{$el} {
     font-size: $text-body-m1;
-
+    --vs-modal-border-radius: 4px;
+    --vs-modal-border: #d8dcde;
+    --vs-modal-bg: #ffffff;
+    --vs-modal-mask-bg: rgba($color-black, 0.5);
     &.is-aligned-top {
       #{$el}__wrapper {
         vertical-align: initial;
@@ -368,9 +378,10 @@
       padding: 0;
       overflow: hidden;
       transition: all $modal-transition-duration ease;
-      border-radius: 3px;
+      border-radius: var(--vs-modal-border-radius);
       outline: none;
-      background-color: $color-white;
+      background-color: var(--vs-modal-bg);
+      border: solid 1px var(--vs-modal-border);
       box-shadow: 0 2px 8px rgba($color-black, 0.33);
       text-align: initial;
     }