@vuesimple/vs-modal 1.3.39 → 1.4.1

package/README.md

@@ -107,7 +107,7 @@ yarn add @vuesimple/vs-modal
 <br />
 
 <h3> 
-  <img src="https://nuxtjs.org/favicon.ico" width="20px"> Nuxt.js
+  <img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
 </h3>
 
 Nuxt Demo - Code Sandbox: [Link](https://codesandbox.io/s/vs-modal-nuxt-w35gj)

package/build/rollup.config.js

@@ -1,8 +1,8 @@
 // rollup.config.js
+import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
-import buble from 'rollup-plugin-buble';
+import buble from '@rollup/plugin-buble';
 import image from '@rollup/plugin-image';
-import { terser } from 'rollup-plugin-terser';
 import minimist from 'minimist';
 
 const argv = minimist(process.argv.slice(2));

package/dist/vs-modal.esm.js

@@ -642,7 +642,7 @@ var __vue_render__$1 = function() {
               if ($event.target !== $event.currentTarget) {
                 return null
               }
-              return _vm.onBackdropClick.apply(null, arguments)
+              return _vm.onBackdropClick($event)
             }
           }
         },
@@ -658,7 +658,7 @@ var __vue_render__$1 = function() {
                   if ($event.target !== $event.currentTarget) {
                     return null
                   }
-                  return _vm.onBackdropClick.apply(null, arguments)
+                  return _vm.onBackdropClick($event)
                 }
               }
             },
@@ -681,43 +681,39 @@ var __vue_render__$1 = function() {
                         return null
                       }
                       $event.stopPropagation();
-                      return _vm.onEsc.apply(null, arguments)
+                      return _vm.onEsc($event)
                     }
                   }
                 },
                 [
-                  _vm._t("header", function() {
-                    return [
-                      !_vm.removeHeader
-                        ? _c("div", { staticClass: "vs-modal__header" }, [
-                            _c("h2", { staticClass: "vs-modal__header-text" }, [
-                              _vm._v(_vm._s(_vm.title))
-                            ])
+                  _vm._t("header", [
+                    !_vm.removeHeader
+                      ? _c("div", { staticClass: "vs-modal__header" }, [
+                          _c("h2", { staticClass: "vs-modal__header-text" }, [
+                            _vm._v(_vm._s(_vm.title))
                           ])
-                        : _vm._e()
-                    ]
-                  }),
+                        ])
+                      : _vm._e()
+                  ]),
                   _vm._v(" "),
                   _c(
                     "div",
                     { staticClass: "vs-modal__close-button" },
                     [
-                      _vm._t("close", function() {
-                        return [
-                          _vm.dismissOnCloseButton &&
-                          !_vm.removeCloseButton &&
-                          _vm.dismissible
-                            ? _c("button", { on: { click: _vm.close } }, [
-                                _c("img", {
-                                  attrs: {
-                                    src: img,
-                                    alt: "close"
-                                  }
-                                })
-                              ])
-                            : _vm._e()
-                        ]
-                      })
+                      _vm._t("close", [
+                        _vm.dismissOnCloseButton &&
+                        !_vm.removeCloseButton &&
+                        _vm.dismissible
+                          ? _c("button", { on: { click: _vm.close } }, [
+                              _c("img", {
+                                attrs: {
+                                  src: img,
+                                  alt: "close"
+                                }
+                              })
+                            ])
+                          : _vm._e()
+                      ])
                     ],
                     2
                   ),

package/dist/vs-modal.min.js

@@ -1 +1 @@
-var VsModal=function(n){"use strict";var e={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:function(){return!this.disabled&&(!this.lazy||this.containFocus)}},methods:{focus:function(){this.$refs.content.focus()},redirectFocus:function(n,e){this.containFocus?(n.stopPropagation(),this.focusRedirector?this.focusRedirector(n,e):e.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()):this.$emit("focus-overflow",n,e)}}};function t(n,e,t,o,s,i,a,r,l,d){"boolean"!=typeof a&&(l=r,r=a,a=!1);var c,u="function"==typeof t?t.options:t;if(n&&n.render&&(u.render=n.render,u.staticRenderFns=n.staticRenderFns,u._compiled=!0,s&&(u.functional=!0)),o&&(u._scopeId=o),i?(c=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,l(n)),n&&n._registeredComponents&&n._registeredComponents.add(i)},u._ssrRegister=c):e&&(c=a?function(n){e.call(this,d(n,this.$root.$options.shadowRoot))}:function(n){e.call(this,r(n))}),c)if(u.functional){var p=u.render;u.render=function(n,e){return c.call(e),p(n,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return t}var o,s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(n){return function(n,e){return function(n,e){var t=s?e.media||"default":n,i=a[t]||(a[t]={ids:new Set,styles:[]});if(!i.ids.has(n)){i.ids.add(n);var r=e.source;if(e.map&&(r+="\n/*# sourceURL="+e.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(r),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var l=i.ids.size-1,d=document.createTextNode(r),c=i.element.childNodes;c[l]&&i.element.removeChild(c[l]),c.length?i.element.insertBefore(d,c[l]):i.element.appendChild(d)}}}(n,e)}}var a={};var r=e,l=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t(n.tag,{tag:"component",staticClass:"vs-focus-container"},[n.renderRedirector?t("span",{staticClass:"vs-focus-container__focus-redirector",attrs:{tabindex:"0"},on:{focus:function(e){return n.redirectFocus(e,{isTabbingForward:!1})}}}):n._e(),n._v(" "),t("div",{ref:"content",staticClass:"vs-focus-container__content",attrs:{tabindex:"-1"}},[n._t("default")],2),n._v(" "),!n.disabled&&n.containFocus?t("span",{ref:"lastFocusable",staticClass:"vs-focus-container__last-focusable",attrs:{tabindex:"-1"}}):n._e(),n._v(" "),n.renderRedirector?t("span",{staticClass:"vs-focus-container__focus-redirector",attrs:{tabindex:"0"},on:{focus:function(e){return n.redirectFocus(e,{isTabbingForward:!0})}}}):n._e()])};l._withStripped=!0;var d=/^\s+|\s+$/g,c=/\s+/g;function u(n){return"object"==typeof HTMLElement?n instanceof HTMLElement:function(n){return n&&"object"==typeof n&&"string"==typeof n.nodeName&&1===n.nodeType}(n)}function p(n){return u(n)?(n.getAttribute("class")||"").replace(d,"").split(c):[]}function f(n){return"string"==typeof n?n.replace(d,"").split(c):n}function m(n,e){u(n)&&n.setAttribute("class",f(e).join(" "))}function v(n,e){var t=p(n);return f(e).forEach((function(n){var e=t.indexOf(n);-1!==e&&t.splice(e,1)})),m(n,t),t}function h(n,e){var t=p(n);return f(e).every((function(n){return-1!==t.indexOf(n)}))}var _={add:function(n,e){var t=v(n,e),o=f(e);return t.push.apply(t,o),m(n,t),t},remove:v,contains:h,has:h,set:m,get:p},g={name:"VsModal",components:{VsFocusContainer:t({render:l,staticRenderFns:[]},(function(n){n&&n("data-v-23d7d588_0",{source:".vs-focus-container__focus-redirector, .vs-focus-container__last-focusable {\n  opacity: 0;\n  position: absolute;\n}\n.vs-focus-container__content {\n  outline: none;\n}",map:void 0,media:void 0})}),r,void 0,!1,void 0,!1,i,void 0,void 0)},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:function(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes:function(){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:function(){return this.alignTop?{"padding-top":this.alignTopMargin+"px"}:null},toggleTransition:function(){return"vs-modal--transition-"+this.transition},hasFooter:function(){return Boolean(this.$slots.footer)},dismissOnBackdrop:function(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton:function(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc:function(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen:function(){var n=this;this.$nextTick((function(){n[n.isOpen?"onOpen":"onClose"]()}))}},beforeDestroy:function(){this.isOpen&&this.returnFocus()},methods:{open:function(){this.isOpen=!0},close:function(){this.dismissible&&(this.isOpen=!1)},redirectFocus:function(){this.$refs.focusContainer.focus()},returnFocus:function(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick:function(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc:function(){this.dismissOnEsc&&this.close()},onOpen:function(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),_.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose:function(){this.$emit("close"),this.returnFocus()},onEnter:function(){this.$emit("reveal")},onLeave:function(){this.$emit("hide"),0===this.decrementOpenModalCount()&&_.remove(document.body,"vs-modal--is-open")},getOpenModalCount:function(){var n=document.body.getAttribute("data-open-modals");return void 0===n?0:Number(n)},setOpenModalCount:function(n){var e=Math.max(0,n);return 0===e?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",e),e},incrementOpenModalCount:function(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount:function(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},A=g,b=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("transition",{attrs:{name:n.toggleTransition},on:{"after-enter":n.onEnter,"after-leave":n.onLeave}},[t("div",{directives:[{name:"show",rawName:"v-show",value:n.isOpen,expression:"isOpen"}],staticClass:"vs-modal vs-modal__mask",class:n.classes,attrs:{role:n.role},on:{click:function(e){return e.target!==e.currentTarget?null:n.onBackdropClick.apply(null,arguments)}}},[t("div",{staticClass:"vs-modal__wrapper",class:{"has-dummy-scrollbar":n.preventShift},style:n.alignTopStyle,on:{click:function(e){return e.target!==e.currentTarget?null:n.onBackdropClick.apply(null,arguments)}}},[t("vs-focus-container",{ref:"focusContainer",staticClass:"vs-modal__container",attrs:{tabindex:"-1"},nativeOn:{keydown:function(e){return!e.type.indexOf("key")&&n._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:(e.stopPropagation(),n.onEsc.apply(null,arguments))}}},[n._t("header",(function(){return[n.removeHeader?n._e():t("div",{staticClass:"vs-modal__header"},[t("h2",{staticClass:"vs-modal__header-text"},[n._v(n._s(n.title))])])]})),n._v(" "),t("div",{staticClass:"vs-modal__close-button"},[n._t("close",(function(){return[n.dismissOnCloseButton&&!n.removeCloseButton&&n.dismissible?t("button",{on:{click:n.close}},[t("img",{attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",alt:"close"}})]):n._e()]}))],2),n._v(" "),t("div",{staticClass:"vs-modal__body"},[n._t("default")],2),n._v(" "),n.hasFooter?t("div",{staticClass:"vs-modal__footer"},[n._t("footer")],2):n._e()],2)],1)])])};b._withStripped=!0;var y=t({render:b,staticRenderFns:[]},(function(n){n&&n("data-v-7c65300a_0",{source:".vs-modal {\n  font-size: 0.875em;\n}\n.vs-modal.is-aligned-top .vs-modal__wrapper {\n  vertical-align: initial;\n}\n.vs-modal.is-aligned-top.has-footer .vs-modal__body {\n  max-height: calc(100vh - 125px);\n}\n.vs-modal.has-footer .vs-modal__body {\n  max-height: calc(100vh - 125px);\n}\n.vs-modal:not(.has-footer) .vs-modal__body {\n  padding: 21px 24px;\n}\n.vs-modal--is-open {\n  overflow: hidden;\n}\n.vs-modal.is-backdrop-blur {\n  backdrop-filter: blur(3px);\n}\n.vs-modal__mask {\n  display: table;\n  position: fixed;\n  z-index: 800;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  transition: opacity 0.3s ease;\n  background-color: rgba(51, 51, 51, 0.5);\n}\n.vs-modal__wrapper {\n  display: table-cell;\n  overflow-x: hidden;\n  text-align: center;\n  vertical-align: middle;\n}\n.vs-modal__wrapper.has-dummy-scrollbar {\n  overflow-y: scroll;\n}\n.vs-modal__container {\n  display: inline-block;\n  position: relative;\n  width: 530px;\n  max-width: 100vw;\n  max-height: 100vh;\n  margin: 0 auto;\n  padding: 0;\n  overflow: hidden;\n  transition: all 0.3s ease;\n  border-radius: 3px;\n  outline: none;\n  background-color: #ffffff;\n  box-shadow: 0 2px 8px rgba(51, 51, 51, 0.33);\n  text-align: initial;\n}\n.vs-modal__header {\n  display: flex;\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  height: 55px;\n  padding: 0 24px;\n}\n.vs-modal__header-text {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  margin: 0;\n  font-size: 1.125em;\n  font-weight: normal;\n}\n.vs-modal__close-button button {\n  position: absolute;\n  z-index: 100;\n  top: 20px;\n  right: 20px;\n  background: none;\n  border: none;\n  text-align: right;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n.vs-modal__close-button button img {\n  width: 12px;\n  height: 12px;\n}\n.vs-modal__body {\n  max-height: calc(100vh - 55px);\n  padding: 16px 24px;\n  overflow-y: auto;\n}\n.vs-modal__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 70px;\n  padding: 0 24px;\n}\n.vs-modal--size-s > .vs-modal__wrapper > .vs-modal__container {\n  width: 320px;\n}\n.vs-modal--size-l > .vs-modal__wrapper > .vs-modal__container {\n  width: 850px;\n}\n.vs-modal--size-fullscreen > .vs-modal__wrapper > .vs-modal__container {\n  width: 100vw;\n  border-radius: 0;\n}\n.vs-modal--size-fullscreen > .vs-modal__wrapper > .vs-modal__container .vs-modal__body {\n  height: 100vh;\n  max-height: 100vh;\n}\n.vs-modal--size-auto > .vs-modal__wrapper > .vs-modal__container {\n  width: initial;\n}\n.vs-modal--transition-fade-enter, .vs-modal--transition-fade-leave-active {\n  opacity: 0;\n}\n.vs-modal--transition-slide-up-enter, .vs-modal--transition-slide-up-leave-active {\n  opacity: 0;\n}\n.vs-modal--transition-slide-up-enter .vs-modal__container, .vs-modal--transition-slide-up-leave-active .vs-modal__container {\n  transform: translateY(20px);\n}\n.vs-modal--transition-slide-down-enter, .vs-modal--transition-slide-down-leave-active {\n  opacity: 0;\n}\n.vs-modal--transition-slide-down-enter .vs-modal__container, .vs-modal--transition-slide-down-leave-active .vs-modal__container {\n  transform: translateY(-20px);\n}",map:void 0,media:void 0})}),A,void 0,!1,void 0,!1,i,void 0,void 0);function x(n){x.installed||(x.installed=!0,n.component("VsModal",y))}var C={install:x},w=null;return"undefined"!=typeof window?w=window.Vue:"undefined"!=typeof global&&(w=global.Vue),w&&w.use(C),n.default=y,n.install=x,n}({});
+var VsModal=function(e){"use strict";var n={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:function(){return!this.disabled&&(!this.lazy||this.containFocus)}},methods:{focus:function(){this.$refs.content.focus()},redirectFocus:function(e,n){this.containFocus?(e.stopPropagation(),this.focusRedirector?this.focusRedirector(e,n):n.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()):this.$emit("focus-overflow",e,n)}}};function t(e,n,t,o,s,i,a,r,d,l){"boolean"!=typeof a&&(d=r,r=a,a=!1);var c,u="function"==typeof t?t.options:t;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,s&&(u.functional=!0)),o&&(u._scopeId=o),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=c):n&&(c=a?function(e){n.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,r(e))}),c)if(u.functional){var p=u.render;u.render=function(e,n){return c.call(n),p(e,n)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,c):[c]}return t}var o,s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return function(e,n){return function(e,n){var t=s?n.media||"default":e,i=a[t]||(a[t]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var r=n.source;if(n.map&&(r+="\n/*# sourceURL="+n.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",n.media&&i.element.setAttribute("media",n.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(r),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var d=i.ids.size-1,l=document.createTextNode(r),c=i.element.childNodes;c[d]&&i.element.removeChild(c[d]),c.length?i.element.insertBefore(l,c[d]):i.element.appendChild(l)}}}(e,n)}}var a={};var r=n,d=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t(e.tag,{tag:"component",staticClass:"vs-focus-container"},[e.renderRedirector?t("span",{staticClass:"vs-focus-container__focus-redirector",attrs:{tabindex:"0"},on:{focus:function(n){return e.redirectFocus(n,{isTabbingForward:!1})}}}):e._e(),e._v(" "),t("div",{ref:"content",staticClass:"vs-focus-container__content",attrs:{tabindex:"-1"}},[e._t("default")],2),e._v(" "),!e.disabled&&e.containFocus?t("span",{ref:"lastFocusable",staticClass:"vs-focus-container__last-focusable",attrs:{tabindex:"-1"}}):e._e(),e._v(" "),e.renderRedirector?t("span",{staticClass:"vs-focus-container__focus-redirector",attrs:{tabindex:"0"},on:{focus:function(n){return e.redirectFocus(n,{isTabbingForward:!0})}}}):e._e()])};d._withStripped=!0;var l=/^\s+|\s+$/g,c=/\s+/g;function u(e){return"object"==typeof HTMLElement?e instanceof HTMLElement:function(e){return e&&"object"==typeof e&&"string"==typeof e.nodeName&&1===e.nodeType}(e)}function p(e){return u(e)?(e.getAttribute("class")||"").replace(l,"").split(c):[]}function m(e){return"string"==typeof e?e.replace(l,"").split(c):e}function f(e,n){u(e)&&e.setAttribute("class",m(n).join(" "))}function v(e,n){var t=p(e);return m(n).forEach((function(e){var n=t.indexOf(e);-1!==n&&t.splice(n,1)})),f(e,t),t}function h(e,n){var t=p(e);return m(n).every((function(e){return-1!==t.indexOf(e)}))}var _={add:function(e,n){var t=v(e,n),o=m(n);return t.push.apply(t,o),f(e,t),t},remove:v,contains:h,has:h,set:f,get:p},g={name:"VsModal",components:{VsFocusContainer:t({render:d,staticRenderFns:[]},(function(e){e&&e("data-v-23d7d588_0",{source:".vs-focus-container__focus-redirector, .vs-focus-container__last-focusable {\n  opacity: 0;\n  position: absolute;\n}\n.vs-focus-container__content {\n  outline: none;\n}",map:void 0,media:void 0})}),r,void 0,!1,void 0,!1,i,void 0,void 0)},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:function(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes:function(){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:function(){return this.alignTop?{"padding-top":this.alignTopMargin+"px"}:null},toggleTransition:function(){return"vs-modal--transition-"+this.transition},hasFooter:function(){return Boolean(this.$slots.footer)},dismissOnBackdrop:function(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton:function(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc:function(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen:function(){var e=this;this.$nextTick((function(){e[e.isOpen?"onOpen":"onClose"]()}))}},beforeDestroy:function(){this.isOpen&&this.returnFocus()},methods:{open:function(){this.isOpen=!0},close:function(){this.dismissible&&(this.isOpen=!1)},redirectFocus:function(){this.$refs.focusContainer.focus()},returnFocus:function(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick:function(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc:function(){this.dismissOnEsc&&this.close()},onOpen:function(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),_.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose:function(){this.$emit("close"),this.returnFocus()},onEnter:function(){this.$emit("reveal")},onLeave:function(){this.$emit("hide"),0===this.decrementOpenModalCount()&&_.remove(document.body,"vs-modal--is-open")},getOpenModalCount:function(){var e=document.body.getAttribute("data-open-modals");return void 0===e?0:Number(e)},setOpenModalCount:function(e){var n=Math.max(0,e);return 0===n?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",n),n},incrementOpenModalCount:function(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount:function(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},A=g,b=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("transition",{attrs:{name:e.toggleTransition},on:{"after-enter":e.onEnter,"after-leave":e.onLeave}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"vs-modal vs-modal__mask",class:e.classes,attrs:{role:e.role},on:{click:function(n){return n.target!==n.currentTarget?null:e.onBackdropClick(n)}}},[t("div",{staticClass:"vs-modal__wrapper",class:{"has-dummy-scrollbar":e.preventShift},style:e.alignTopStyle,on:{click:function(n){return n.target!==n.currentTarget?null:e.onBackdropClick(n)}}},[t("vs-focus-container",{ref:"focusContainer",staticClass:"vs-modal__container",attrs:{tabindex:"-1"},nativeOn:{keydown:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"esc",27,n.key,["Esc","Escape"])?null:(n.stopPropagation(),e.onEsc(n))}}},[e._t("header",[e.removeHeader?e._e():t("div",{staticClass:"vs-modal__header"},[t("h2",{staticClass:"vs-modal__header-text"},[e._v(e._s(e.title))])])]),e._v(" "),t("div",{staticClass:"vs-modal__close-button"},[e._t("close",[e.dismissOnCloseButton&&!e.removeCloseButton&&e.dismissible?t("button",{on:{click:e.close}},[t("img",{attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",alt:"close"}})]):e._e()])],2),e._v(" "),t("div",{staticClass:"vs-modal__body"},[e._t("default")],2),e._v(" "),e.hasFooter?t("div",{staticClass:"vs-modal__footer"},[e._t("footer")],2):e._e()],2)],1)])])};b._withStripped=!0;var y=t({render:b,staticRenderFns:[]},(function(e){e&&e("data-v-7c65300a_0",{source:".vs-modal {\n  font-size: 0.875em;\n}\n.vs-modal.is-aligned-top .vs-modal__wrapper {\n  vertical-align: initial;\n}\n.vs-modal.is-aligned-top.has-footer .vs-modal__body {\n  max-height: calc(100vh - 125px);\n}\n.vs-modal.has-footer .vs-modal__body {\n  max-height: calc(100vh - 125px);\n}\n.vs-modal:not(.has-footer) .vs-modal__body {\n  padding: 21px 24px;\n}\n.vs-modal--is-open {\n  overflow: hidden;\n}\n.vs-modal.is-backdrop-blur {\n  backdrop-filter: blur(3px);\n}\n.vs-modal__mask {\n  display: table;\n  position: fixed;\n  z-index: 800;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  transition: opacity 0.3s ease;\n  background-color: rgba(51, 51, 51, 0.5);\n}\n.vs-modal__wrapper {\n  display: table-cell;\n  overflow-x: hidden;\n  text-align: center;\n  vertical-align: middle;\n}\n.vs-modal__wrapper.has-dummy-scrollbar {\n  overflow-y: scroll;\n}\n.vs-modal__container {\n  display: inline-block;\n  position: relative;\n  width: 530px;\n  max-width: 100vw;\n  max-height: 100vh;\n  margin: 0 auto;\n  padding: 0;\n  overflow: hidden;\n  transition: all 0.3s ease;\n  border-radius: 3px;\n  outline: none;\n  background-color: #ffffff;\n  box-shadow: 0 2px 8px rgba(51, 51, 51, 0.33);\n  text-align: initial;\n}\n.vs-modal__header {\n  display: flex;\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  height: 55px;\n  padding: 0 24px;\n}\n.vs-modal__header-text {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  margin: 0;\n  font-size: 1.125em;\n  font-weight: normal;\n}\n.vs-modal__close-button button {\n  position: absolute;\n  z-index: 100;\n  top: 20px;\n  right: 20px;\n  background: none;\n  border: none;\n  text-align: right;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n.vs-modal__close-button button img {\n  width: 12px;\n  height: 12px;\n}\n.vs-modal__body {\n  max-height: calc(100vh - 55px);\n  padding: 16px 24px;\n  overflow-y: auto;\n}\n.vs-modal__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 70px;\n  padding: 0 24px;\n}\n.vs-modal--size-s > .vs-modal__wrapper > .vs-modal__container {\n  width: 320px;\n}\n.vs-modal--size-l > .vs-modal__wrapper > .vs-modal__container {\n  width: 850px;\n}\n.vs-modal--size-fullscreen > .vs-modal__wrapper > .vs-modal__container {\n  width: 100vw;\n  border-radius: 0;\n}\n.vs-modal--size-fullscreen > .vs-modal__wrapper > .vs-modal__container .vs-modal__body {\n  height: 100vh;\n  max-height: 100vh;\n}\n.vs-modal--size-auto > .vs-modal__wrapper > .vs-modal__container {\n  width: initial;\n}\n.vs-modal--transition-fade-enter, .vs-modal--transition-fade-leave-active {\n  opacity: 0;\n}\n.vs-modal--transition-slide-up-enter, .vs-modal--transition-slide-up-leave-active {\n  opacity: 0;\n}\n.vs-modal--transition-slide-up-enter .vs-modal__container, .vs-modal--transition-slide-up-leave-active .vs-modal__container {\n  transform: translateY(20px);\n}\n.vs-modal--transition-slide-down-enter, .vs-modal--transition-slide-down-leave-active {\n  opacity: 0;\n}\n.vs-modal--transition-slide-down-enter .vs-modal__container, .vs-modal--transition-slide-down-leave-active .vs-modal__container {\n  transform: translateY(-20px);\n}",map:void 0,media:void 0})}),A,void 0,!1,void 0,!1,i,void 0,void 0);function x(e){x.installed||(x.installed=!0,e.component("VsModal",y))}var C={install:x},w=null;return"undefined"!=typeof window?w=window.Vue:"undefined"!=typeof global&&(w=global.Vue),w&&w.use(C),e.default=y,e.install=x,e}({});

package/dist/vs-modal.umd.js

@@ -648,7 +648,7 @@
                 if ($event.target !== $event.currentTarget) {
                   return null
                 }
-                return _vm.onBackdropClick.apply(null, arguments)
+                return _vm.onBackdropClick($event)
               }
             }
           },
@@ -664,7 +664,7 @@
                     if ($event.target !== $event.currentTarget) {
                       return null
                     }
-                    return _vm.onBackdropClick.apply(null, arguments)
+                    return _vm.onBackdropClick($event)
                   }
                 }
               },
@@ -687,43 +687,39 @@
                           return null
                         }
                         $event.stopPropagation();
-                        return _vm.onEsc.apply(null, arguments)
+                        return _vm.onEsc($event)
                       }
                     }
                   },
                   [
-                    _vm._t("header", function() {
-                      return [
-                        !_vm.removeHeader
-                          ? _c("div", { staticClass: "vs-modal__header" }, [
-                              _c("h2", { staticClass: "vs-modal__header-text" }, [
-                                _vm._v(_vm._s(_vm.title))
-                              ])
+                    _vm._t("header", [
+                      !_vm.removeHeader
+                        ? _c("div", { staticClass: "vs-modal__header" }, [
+                            _c("h2", { staticClass: "vs-modal__header-text" }, [
+                              _vm._v(_vm._s(_vm.title))
                             ])
-                          : _vm._e()
-                      ]
-                    }),
+                          ])
+                        : _vm._e()
+                    ]),
                     _vm._v(" "),
                     _c(
                       "div",
                       { staticClass: "vs-modal__close-button" },
                       [
-                        _vm._t("close", function() {
-                          return [
-                            _vm.dismissOnCloseButton &&
-                            !_vm.removeCloseButton &&
-                            _vm.dismissible
-                              ? _c("button", { on: { click: _vm.close } }, [
-                                  _c("img", {
-                                    attrs: {
-                                      src: img,
-                                      alt: "close"
-                                    }
-                                  })
-                                ])
-                              : _vm._e()
-                          ]
-                        })
+                        _vm._t("close", [
+                          _vm.dismissOnCloseButton &&
+                          !_vm.removeCloseButton &&
+                          _vm.dismissible
+                            ? _c("button", { on: { click: _vm.close } }, [
+                                _c("img", {
+                                  attrs: {
+                                    src: img,
+                                    alt: "close"
+                                  }
+                                })
+                              ])
+                            : _vm._e()
+                        ])
                       ],
                       2
                     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-modal",
-  "version": "1.3.39",
+  "version": "1.4.1",
   "description": "A simple vue modal. Perfect for all your modal/ dialogs scenarios.",
   "main": "dist/vs-modal.umd.js",
   "module": "dist/vs-modal.esm.js",
@@ -15,14 +15,14 @@
     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-modal.min.js"
   },
   "devDependencies": {
+    "@rollup/plugin-buble": "0.21.3",
     "@rollup/plugin-image": "2.0.5",
-    "minimist": "^1.2.0",
-    "rollup": "^1.32.0",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "minimist": "1.2.5",
+    "rollup": "1.32.0",
+    "rollup-plugin-terser": "6.1.0",
+    "rollup-plugin-vue": "5.1.9",
+    "vue": "2.6.10",
+    "vue-template-compiler": "2.6.10"
   },
   "private": false,
   "repository": {
@@ -51,5 +51,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-modal",
-  "gitHead": "9c5fdc68803a938a74d3987f658e02ded5eea18d"
+  "gitHead": "4a6fbd8716221364e5fc2710645a6c5882746929"
 }