@vuesimple/vs-modal 1.4.15 → 3.0.0

package/README.md

@@ -31,10 +31,6 @@ Code Sandbox: [Link](https://codesandbox.io/s/vs-modal-n2wwm)
 npm i @vuesimple/vs-modal
 ```
 
-```bash
-yarn add @vuesimple/vs-modal
-```
-
 <br />
 
 ### 🚀 Usage
@@ -42,9 +38,7 @@ yarn add @vuesimple/vs-modal
 ```html
 <template>
   <button size="sm" @click="openModal('modal1')">Basic Modal</button>
-  <vs-modal ref="modal1" title="Funny, Modal Works 🥳">
-    Hello Peeps from vs-modal!!
-  </vs-modal>
+  <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
 
   <button size="sm" @click="openModal('backdrop-modal')">Basic Modal (with blur backdrop)</button>
   <vs-modal ref="backdrop-modal" backdropBlur title="Funny, Modal Works 🥳">
@@ -81,12 +75,15 @@ yarn add @vuesimple/vs-modal
 <script src="https://unpkg.com/@vuesimple/vs-modal@<version>/dist/vs-modal.min.js"></script>
 ```
 
+```javascript
+// Main/Entry file
+app.use(VsModal);
+```
+
 ```html
 <template>
   <button size="sm" @click="openModal('modal1')">Basic Modal</button>
-  <vs-modal ref="modal1" title="Funny, Modal Works 🥳">
-    Hello Peeps from vs-modal!!
-  </vs-modal>
+  <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from vs-modal!! </vs-modal>
 </template>
 
 <script>
@@ -140,9 +137,7 @@ After installation,
     <button size="sm" @click="openModal('modal1')">Basic Modal</button>
 
     <client-only>
-      <vs-modal ref="modal1" title="Funny, Modal Works 🥳">
-        Hello Peeps from V-Simple-Modal!!
-      </vs-modal>
+      <vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from V-Simple-Modal!! </vs-modal>
     </client-only>
   </template>
 

package/build/vite.config.js

@@ -0,0 +1,33 @@
+import vue from '@vitejs/plugin-vue';
+import VitePluginStyleInject from 'vite-plugin-style-inject';
+
+export default {
+  plugins: [vue(), VitePluginStyleInject()],
+  build: {
+    // separate css file or not
+    cssCodeSplit: false,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'umd', 'iife'],
+      name: 'VsModal',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.js';
+        }
+        return 'index.min.js';
+      },
+    },
+    rollupOptions: {
+      // Not to bundle vue core in this plugin
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+};

package/dist/index.js

@@ -0,0 +1,341 @@
+(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:21px 24px}.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";
+const C = (e, t) => {
+  const s = e.__vccOpts || e;
+  for (const [r, o] of t)
+    s[r] = o;
+  return s;
+}, z = {
+  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(e, t) {
+      if (!this.containFocus) {
+        this.$emit("focus-overflow", e, t);
+        return;
+      }
+      if (e.stopPropagation(), this.focusRedirector) {
+        this.focusRedirector(e, t);
+        return;
+      }
+      t.isTabbingForward ? this.$refs.content.focus() : this.$refs.lastFocusable.focus();
+    }
+  }
+}, K = {
+  ref: "content",
+  class: "vs-focus-container__content",
+  tabindex: "-1"
+}, N = {
+  key: 1,
+  ref: "lastFocusable",
+  class: "vs-focus-container__last-focusable",
+  tabindex: "-1"
+};
+function j(e, t, s, r, o, n) {
+  return i(), b(E(s.tag), { class: "vs-focus-container" }, {
+    default: p(() => [
+      n.renderRedirector ? (i(), l("span", {
+        key: 0,
+        class: "vs-focus-container__focus-redirector",
+        tabindex: "0",
+        onFocus: t[0] || (t[0] = (d) => n.redirectFocus(d, { isTabbingForward: !1 }))
+      }, null, 32)) : c("", !0),
+      a("div", K, [
+        f(e.$slots, "default")
+      ], 512),
+      !s.disabled && s.containFocus ? (i(), l("span", N, null, 512)) : c("", !0),
+      n.renderRedirector ? (i(), l("span", {
+        key: 2,
+        class: "vs-focus-container__focus-redirector",
+        tabindex: "0",
+        onFocus: t[1] || (t[1] = (d) => n.redirectFocus(d, { isTabbingForward: !0 }))
+      }, null, 32)) : c("", !0)
+    ]),
+    _: 3
+  });
+}
+const H = /* @__PURE__ */ C(z, [["render", j]]), O = /^\s+|\s+$/g, B = /\s+/g;
+function L(e) {
+  return e && typeof e == "object" && typeof e.nodeName == "string" && e.nodeType === 1;
+}
+function F(e) {
+  return typeof HTMLElement == "object" ? e instanceof HTMLElement : L(e);
+}
+function h(e) {
+  return F(e) ? (e.getAttribute("class") || "").replace(O, "").split(B) : [];
+}
+function m(e) {
+  return typeof e == "string" ? e.replace(O, "").split(B) : e;
+}
+function _(e, t) {
+  F(e) && e.setAttribute("class", m(t).join(" "));
+}
+function k(e, t) {
+  const s = h(e);
+  return m(t).forEach((o) => {
+    const n = s.indexOf(o);
+    n !== -1 && s.splice(n, 1);
+  }), _(e, s), s;
+}
+function U(e, t) {
+  const s = k(e, t), r = m(t);
+  return s.push(...r), _(e, s), s;
+}
+function y(e, t) {
+  const s = h(e);
+  return m(t).every((o) => s.indexOf(o) !== -1);
+}
+const g = {
+  add: U,
+  remove: k,
+  contains: y,
+  has: y,
+  set: _,
+  get: h
+}, q = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=";
+const D = {
+  name: "VsModal",
+  components: {
+    VsFocusContainer: H
+  },
+  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 e = document.body.getAttribute("data-open-modals");
+      return e === void 0 ? 0 : Number(e);
+    },
+    setOpenModalCount(e) {
+      const t = Math.max(0, e);
+      return t === 0 ? document.body.removeAttribute("data-open-modals") : document.body.setAttribute("data-open-modals", t), t;
+    },
+    incrementOpenModalCount() {
+      return this.setOpenModalCount(this.getOpenModalCount() + 1);
+    },
+    decrementOpenModalCount() {
+      return this.setOpenModalCount(this.getOpenModalCount() - 1);
+    }
+  }
+}, Q = ["role"], Y = {
+  key: 0,
+  class: "vs-modal__header"
+}, J = { class: "vs-modal__header-text" }, G = { class: "vs-modal__close-button" }, $ = /* @__PURE__ */ a("img", {
+  src: q,
+  alt: "close"
+}, null, -1), P = [
+  $
+], W = { class: "vs-modal__body" }, Z = {
+  key: 1,
+  class: "vs-modal__footer"
+};
+function X(e, t, s, r, o, n) {
+  const d = w("vs-focus-container");
+  return i(), b(M, {
+    name: n.toggleTransition,
+    onAfterEnter: n.onEnter,
+    onAfterLeave: n.onLeave
+  }, {
+    default: p(() => [
+      S(a("div", {
+        class: v(["vs-modal vs-modal__mask", n.classes]),
+        role: s.role,
+        onClick: t[2] || (t[2] = A((...u) => n.onBackdropClick && n.onBackdropClick(...u), ["self"]))
+      }, [
+        a("div", {
+          class: v(["vs-modal__wrapper", { "has-dummy-scrollbar": s.preventShift }]),
+          style: T(n.alignTopStyle),
+          onClick: t[1] || (t[1] = A((...u) => n.onBackdropClick && n.onBackdropClick(...u), ["self"]))
+        }, [
+          x(d, {
+            ref: "focusContainer",
+            class: "vs-modal__container",
+            tabindex: "-1",
+            onKeydown: R(A(n.onEsc, ["stop"]), ["native", "esc"])
+          }, {
+            default: p(() => [
+              s.removeHeader ? c("", !0) : (i(), l("div", Y, [
+                f(e.$slots, "header", {}, () => [
+                  a("h2", J, V(s.title), 1)
+                ])
+              ])),
+              a("div", G, [
+                f(e.$slots, "close", {}, () => [
+                  n.dismissOnCloseButton && !s.removeCloseButton && s.dismissible ? (i(), l("button", {
+                    key: 0,
+                    onClick: t[0] || (t[0] = (...u) => n.close && n.close(...u))
+                  }, P)) : c("", !0)
+                ])
+              ]),
+              a("div", W, [
+                f(e.$slots, "default")
+              ]),
+              n.hasFooter ? (i(), l("div", Z, [
+                f(e.$slots, "footer")
+              ])) : c("", !0)
+            ]),
+            _: 3
+          }, 8, ["onKeydown"])
+        ], 6)
+      ], 10, Q), [
+        [I, o.isOpen]
+      ])
+    ]),
+    _: 3
+  }, 8, ["name", "onAfterEnter", "onAfterLeave"]);
+}
+const ee = /* @__PURE__ */ C(D, [["render", X]]), se = {
+  install(e) {
+    e.component("VsModal", ee);
+  }
+};
+export {
+  se as default
+};

package/dist/index.min.js

@@ -0,0 +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:21px 24px}.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(e){"use strict";const z="",f=(t,s)=>{const o=t.__vccOpts||t;for(const[i,r]of s)o[i]=r;return o},y={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()}}},C={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},b={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function B(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]=a=>n.redirectFocus(a,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",b,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 k=f(y,[["render",B]]),m=/^\s+|\s+$/g,A=/\s+/g;function O(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function p(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:O(t)}function d(t){return p(t)?(t.getAttribute("class")||"").replace(m,"").split(A):[]}function c(t){return typeof t=="string"?t.replace(m,"").split(A):t}function u(t,s){p(t)&&t.setAttribute("class",c(s).join(" "))}function h(t,s){const o=d(t);return c(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),u(t,o),o}function E(t,s){const o=h(t,s),i=c(s);return o.push(...i),u(t,o),o}function _(t,s){const o=d(t);return c(s).every(r=>o.indexOf(r)!==-1)}const g={add:E,remove:h,contains:_,has:_,set:u,get:d},F="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",K="",w={name:"VsModal",components:{VsFocusContainer:k},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)}}},M=["role"],S={key:0,class:"vs-modal__header"},V={class:"vs-modal__header-text"},T={class:"vs-modal__close-button"},N=[e.createElementVNode("img",{src:F,alt:"close"},null,-1)],x={class:"vs-modal__body"},v={key:1,class:"vs-modal__footer"};function R(t,s,o,i,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((...l)=>n.onBackdropClick&&n.onBackdropClick(...l),["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((...l)=>n.onBackdropClick&&n.onBackdropClick(...l),["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",S,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",V,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",T,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...l)=>n.close&&n.close(...l))},N)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",x,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",v,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,M),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const I=f(w,[["render",R]]);return{install(t){t.component("VsModal",I)}}}(Vue);

package/dist/index.umd.js

@@ -0,0 +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:21px 24px}.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(e,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(e=typeof globalThis<"u"?globalThis:e||self,e.VsModal=c(e.Vue))})(this,function(e){"use strict";const c="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[r,i]of s)o[r]=i;return o},g={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"},B={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function k(t,s,o,r,i,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",B,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 O=m(g,[["render",k]]),A=/^\s+|\s+$/g,p=/\s+/g;function E(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function h(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:E(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(i=>{const n=o.indexOf(i);n!==-1&&o.splice(n,1)}),f(t,o),o}function F(t,s){const o=_(t,s),r=d(s);return o.push(...r),f(t,o),o}function y(t,s){const o=u(t);return d(s).every(i=>o.indexOf(i)!==-1)}const C={add:F,remove:_,contains:y,has:y,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",j="",M={name:"VsModal",components:{VsFocusContainer:O},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(),C.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&&C.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)}}},S=["role"],V={key:0,class:"vs-modal__header"},T={class:"vs-modal__header-text"},x={class:"vs-modal__close-button"},N=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],v={class:"vs-modal__body"},R={key:1,class:"vs-modal__footer"};function I(t,s,o,r,i,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",V,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",T,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",x,[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))},N)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,S),[[e.vShow,i.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const z=m(M,[["render",I]]);return{install(t){t.component("VsModal",z)}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuesimple/vs-modal",
-  "version": "1.4.15",
+  "version": "3.0.0",
   "description": "A simple vue modal. Perfect for all your modal/ dialogs scenarios.",
   "main": "dist/vs-modal.umd.js",
   "module": "dist/vs-modal.esm.js",
@@ -9,20 +9,14 @@
     "./sfc": "src/vs-modal.vue"
   },
   "scripts": {
-    "build": "rm -rfv dist && npm run build:umd & npm run build:es & npm run build:unpkg",
-    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vs-modal.umd.js",
-    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vs-modal.esm.js",
-    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-modal.min.js"
+    "build": "rm -rfv dist && vite build --config build/vite.config.js"
   },
   "devDependencies": {
-    "@rollup/plugin-buble": "0.21.3",
-    "@rollup/plugin-image": "2.0.5",
-    "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"
+    "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.54.4",
+    "vite": "^3.0.5",
+    "vite-plugin-style-inject": "0.0.1",
+    "vue": "^3.2.37"
   },
   "private": false,
   "repository": {
@@ -51,5 +45,5 @@
     "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
   },
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-modal",
-  "gitHead": "e3d2d8adc6417d73ef774c0321eaa1ae10f24589"
+  "gitHead": "c666ac905df7e5b10f9198cd056cdd3fa88e212e"
 }

package/src/index.js

@@ -1,28 +1,9 @@
-// Import vue component
 import VsModal from './vs-modal.vue';
 
-// Declare install function executed by Vue.use()
-export function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.component('VsModal', VsModal);
-}
-
-// Create module definition for Vue.use()
 const plugin = {
-  install,
+  install(Vue) {
+    Vue.component('VsModal', VsModal);
+  },
 };
 
-// Auto-install when vue is found (eg. in browser via <script> tag)
-let GlobalVue = null;
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-
-// To allow use as module (npm/webpack/etc.) export component
-export default VsModal;
+export default plugin;

package/src/vs-modal.vue

@@ -457,12 +457,12 @@
     }
 
     // Transitions
-    &--transition-fade-enter,
+    &--transition-fade-enter-from,
     &--transition-fade-leave-active {
       opacity: 0;
     }
 
-    &--transition-slide-up-enter,
+    &--transition-slide-up-enter-from,
     &--transition-slide-up-leave-active {
       opacity: 0;
 
@@ -471,7 +471,7 @@
       }
     }
 
-    &--transition-slide-down-enter,
+    &--transition-slide-down-enter-from,
     &--transition-slide-down-leave-active {
       opacity: 0;