@kouts/vue-modal - npm Package Compare versions

Comparing version 3.0.9 to 4.0.0

CHANGELOG.md

@@ -0,1 +1,18 @@
+# [4.0.0](https://github.com/kouts/vue-modal/compare/v3.0.9...v4.0.0) (2023-06-04)
+
+
+### Bug Fixes
+
+* fixed exports ([be66ba1](https://github.com/kouts/vue-modal/commit/be66ba1a6e1310be3fd82370d17fa329d394cd49))
+
+
+### Features
+
+* added named modal feature ([be5d19d](https://github.com/kouts/vue-modal/commit/be5d19dfe9e43f0b9857132b4740f43b02b3df4a))
+
+
+### BREAKING CHANGES
+
+* Changed import method
+
 ## [3.0.9](https://github.com/kouts/vue-modal/compare/v3.0.8...v3.0.9) (2023-06-04)
@@ -2,0 +19,0 @@

coverage/coverage-summary.json

@@ -1,3 +0,6 @@
-{"total": {"lines":{"total":25,"covered":25,"skipped":0,"pct":100},"statements":{"total":25,"covered":25,"skipped":0,"pct":100},"functions":{"total":8,"covered":8,"skipped":0,"pct":100},"branches":{"total":14,"covered":12,"skipped":0,"pct":85.71},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"}}
+{"total": {"lines":{"total":37,"covered":25,"skipped":0,"pct":67.56},"statements":{"total":37,"covered":25,"skipped":0,"pct":67.56},"functions":{"total":14,"covered":8,"skipped":0,"pct":57.14},"branches":{"total":14,"covered":12,"skipped":0,"pct":85.71},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"}}
 ,"/home/runner/work/vue-modal/vue-modal/src/Modal.vue": {"lines":{"total":25,"covered":25,"skipped":0,"pct":100},"functions":{"total":8,"covered":8,"skipped":0,"pct":100},"statements":{"total":25,"covered":25,"skipped":0,"pct":100},"branches":{"total":14,"covered":12,"skipped":0,"pct":85.71}}
+,"/home/runner/work/vue-modal/vue-modal/src/index.js": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/home/runner/work/vue-modal/vue-modal/src/modalPlugin.js": {"lines":{"total":2,"covered":0,"skipped":0,"pct":0},"functions":{"total":1,"covered":0,"skipped":0,"pct":0},"statements":{"total":2,"covered":0,"skipped":0,"pct":0},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/home/runner/work/vue-modal/vue-modal/src/useModal.ts": {"lines":{"total":10,"covered":0,"skipped":0,"pct":0},"functions":{"total":5,"covered":0,"skipped":0,"pct":0},"statements":{"total":10,"covered":0,"skipped":0,"pct":0},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
 }

dist/vue-modal.es.js

@@ -1,15 +0,19 @@
-import { openBlock as h, createBlock as x, Teleport as w, createVNode as m, Transition as b, withCtx as v, withDirectives as p, createElementVNode as o, normalizeClass as c, normalizeStyle as f, vShow as g, renderSlot as u, toDisplayString as _, createElementBlock as k, withModifiers as I, createCommentVNode as y } from "vue";
-const S = (e, s) => {
+import { openBlock as m, createBlock as x, Teleport as _, createVNode as b, Transition as v, withCtx as g, withDirectives as p, createElementVNode as n, normalizeClass as u, normalizeStyle as f, vShow as y, renderSlot as h, toDisplayString as k, createElementBlock as S, withModifiers as T, createCommentVNode as C, reactive as I } from "vue";
+const O = (e, s) => {
   const t = e.__vccOpts || e;
-  for (const [n, l] of s)
-    t[n] = l;
+  for (const [i, l] of s)
+    t[i] = l;
   return t;
-}, a = {
+}, o = {
   type: [String, Object, Array],
   default: ""
-}, C = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+}, w = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 let d = 0;
-const T = {
+const A = {
   name: "VueModal",
   props: {
+    name: {
+      type: String,
+      default: ""
+    },
     title: {
@@ -23,10 +27,10 @@ type: String,
     },
-    bgClass: a,
-    wrapperClass: a,
-    modalClass: a,
-    modalStyle: a,
-    inClass: Object.assign({}, a, { default: "vm-fadeIn" }),
-    outClass: Object.assign({}, a, { default: "vm-fadeOut" }),
-    bgInClass: Object.assign({}, a, { default: "vm-fadeIn" }),
-    bgOutClass: Object.assign({}, a, { default: "vm-fadeOut" }),
+    bgClass: o,
+    wrapperClass: o,
+    modalClass: o,
+    modalStyle: o,
+    inClass: Object.assign({}, o, { default: "vm-fadeIn" }),
+    outClass: Object.assign({}, o, { default: "vm-fadeOut" }),
+    bgInClass: Object.assign({}, o, { default: "vm-fadeIn" }),
+    bgOutClass: Object.assign({}, o, { default: "vm-fadeOut" }),
     appendTo: {
@@ -67,5 +71,5 @@ type: String,
   mounted() {
-    this.id = "vm-" + this.$.uid, this.$watch(
+    this.id = "vm-" + this.$.uid, this.name || this.$watch(
       "modelValue",
-      function(e) {
+      (e) => {
         e ? (this.mount = !0, this.$nextTick(() => {
@@ -78,10 +82,20 @@ this.show = !0;
       }
+    ), this.name && this.$modal && this.$watch(
+      "$modal.state.modals",
+      (e) => {
+        e[this.name] ? (this.mount = !0, this.$nextTick(() => {
+          this.show = !0;
+        })) : this.show = !1;
+      },
+      {
+        deep: !0
+      }
     );
   },
   beforeUnmount() {
-    this.elToFocus = null;
+    this.elToFocus = null, this.name && this.$modal.hide(this.name);
   },
   methods: {
     close() {
-      this.enableClose === !0 && this.$emit("update:modelValue", !1);
+      this.enableClose === !0 && (this.$emit("update:modelValue", !1), this.name && this.$modal.hide(this.name));
     },
@@ -93,3 +107,3 @@ clickOutside(e) {
       if ((e.which === 27 || e.keyCode === 27) && this.close(), e.which === 9 || e.keyCode === 9) {
-        const s = [].slice.call(this.$refs["vm-wrapper"].querySelectorAll(C)).filter(function(t) {
+        const s = [].slice.call(this.$refs["vm-wrapper"].querySelectorAll(w)).filter(function(t) {
           return !!(t.offsetWidth || t.offsetHeight || t.getClientRects().length);
@@ -111,3 +125,3 @@ });
       else {
-        const t = e.querySelectorAll(C);
+        const t = e.querySelectorAll(w);
         t.length ? t[0].focus() : e.focus();
@@ -140,5 +154,5 @@ }
             for (let t = 0; t < s.length; t++) {
-              const n = s[t];
-              if (parseInt(n.style.zIndex) === e) {
-                n.contains(this.elToFocus) ? this.elToFocus.focus() : this.handleFocus(n);
+              const i = s[t];
+              if (parseInt(i.style.zIndex) === e) {
+                i.contains(this.elToFocus) ? this.elToFocus.focus() : this.handleFocus(i);
                 break;
@@ -154,9 +168,9 @@ }
   }
-}, O = ["data-vm-backdrop-id"], z = ["data-vm-wrapper-id", "aria-label", "aria-describedby", "aria-labelledby"], E = ["data-vm-id"], A = { class: "vm-titlebar" }, F = ["id"], B = ["aria-label"], V = ["id"];
-function L(e, s, t, n, l, i) {
-  return l.mount ? (h(), x(w, {
+}, E = ["data-vm-backdrop-id"], z = ["data-vm-wrapper-id", "aria-label", "aria-describedby", "aria-labelledby"], F = ["data-vm-id"], B = { class: "vm-titlebar" }, V = ["id"], L = ["aria-label"], Z = ["id"];
+function j(e, s, t, i, l, a) {
+  return l.mount ? (m(), x(_, {
     key: 0,
     to: t.appendTo
   }, [
-    m(b, {
+    b(v, {
       name: "vm-backdrop-transition",
@@ -166,9 +180,9 @@ "enter-active-class": t.bgInClass,
     }, {
-      default: v(() => [
-        p(o("div", {
+      default: g(() => [
+        p(n("div", {
           "data-vm-backdrop-id": l.id,
-          class: c(["vm-backdrop", t.bgClass]),
+          class: u(["vm-backdrop", t.bgClass]),
           style: f({ "z-index": l.zIndex - 1 })
-        }, null, 14, O), [
-          [g, l.show]
+        }, null, 14, E), [
+          [y, l.show]
         ])
@@ -178,19 +192,19 @@ ]),
     }, 8, ["enter-active-class", "leave-active-class"]),
-    m(b, {
+    b(v, {
       name: "vm-transition",
       "enter-active-class": t.inClass,
       "leave-active-class": t.outClass,
-      onBeforeEnter: i.beforeOpen,
-      onEnter: i.opening,
-      onAfterEnter: i.afterOpen,
-      onBeforeLeave: i.beforeClose,
-      onLeave: i.closing,
-      onAfterLeave: i.afterClose
+      onBeforeEnter: a.beforeOpen,
+      onEnter: a.opening,
+      onAfterEnter: a.afterOpen,
+      onBeforeLeave: a.beforeClose,
+      onLeave: a.closing,
+      onAfterLeave: a.afterClose
     }, {
-      default: v(() => [
-        p(o("div", {
+      default: g(() => [
+        p(n("div", {
           ref: "vm-wrapper",
           "data-vm-wrapper-id": l.id,
           tabindex: "-1",
-          class: c(["vm-wrapper", t.wrapperClass]),
+          class: u(["vm-wrapper", t.wrapperClass]),
           style: f({ "z-index": l.zIndex, cursor: t.enableClose ? "pointer" : "default" }),
@@ -202,18 +216,18 @@ role: "dialog",
           "aria-labelledby": `${l.id}-title`,
-          onClick: s[1] || (s[1] = (r) => i.clickOutside(r)),
-          onKeydown: s[2] || (s[2] = (r) => i.keydown(r))
+          onClick: s[1] || (s[1] = (r) => a.clickOutside(r)),
+          onKeydown: s[2] || (s[2] = (r) => a.keydown(r))
         }, [
-          o("div", {
+          n("div", {
             ref: "vm",
-            class: c(["vm", t.modalClass]),
+            class: u(["vm", t.modalClass]),
             "data-vm-id": l.id,
             style: f(t.modalStyle)
           }, [
-            u(e.$slots, "titlebar", {}, () => [
-              o("div", A, [
-                o("h3", {
+            h(e.$slots, "titlebar", {}, () => [
+              n("div", B, [
+                n("h3", {
                   id: `${l.id}-title`,
                   class: "vm-title"
-                }, _(t.title), 9, F),
-                t.enableClose ? (h(), k("button", {
+                }, k(t.title), 9, V),
+                t.enableClose ? (m(), S("button", {
                   key: 0,
@@ -223,17 +237,17 @@ type: "button",
                   "aria-label": t.closeLabel,
-                  onClick: s[0] || (s[0] = I((...r) => i.close && i.close(...r), ["prevent"]))
-                }, null, 8, B)) : y("", !0)
+                  onClick: s[0] || (s[0] = T((...r) => a.close && a.close(...r), ["prevent"]))
+                }, null, 8, L)) : C("", !0)
               ])
             ]),
-            u(e.$slots, "content", {}, () => [
-              o("div", {
+            h(e.$slots, "content", {}, () => [
+              n("div", {
                 id: `${l.id}-content`,
                 class: "vm-content"
               }, [
-                u(e.$slots, "default")
-              ], 8, V)
+                h(e.$slots, "default")
+              ], 8, Z)
             ])
-          ], 14, E)
+          ], 14, F)
         ], 46, z), [
-          [g, l.show]
+          [y, l.show]
         ])
@@ -243,7 +257,26 @@ ]),
     }, 8, ["enter-active-class", "leave-active-class", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-  ], 8, ["to"])) : y("", !0);
+  ], 8, ["to"])) : C("", !0);
 }
-const j = /* @__PURE__ */ S(T, [["render", L]]);
+const N = /* @__PURE__ */ O(A, [["render", j]]), c = I({
+  modals: {}
+}), M = () => {
+  const e = (i) => {
+    c.modals[i] = !0;
+  }, s = (i) => {
+    delete c.modals[i];
+  };
+  return { state: c, show: e, hide: s, hideAll: () => {
+    Object.keys(c.modals).forEach((i) => {
+      s(i);
+    });
+  } };
+}, D = {
+  install(e) {
+    e.config.globalProperties.$modal = M();
+  }
+};
 export {
-  j as default
+  N as Modal,
+  D as modalPlugin,
+  M as useModal
 };

dist/vue-modal.umd.js

@@ -1,1 +0,1 @@
-(function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,e.VueModal=d(e.Vue))})(this,function(e){"use strict";const d="",m=(t,l)=>{const s=t.__vccOpts||t;for(const[a,i]of l)s[a]=i;return s},o={type:[String,Object,Array],default:""},f='a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';let c=0;const u={name:"VueModal",props:{title:{type:String,default:""},baseZindex:{type:Number,default:1051},bgClass:o,wrapperClass:o,modalClass:o,modalStyle:o,inClass:Object.assign({},o,{default:"vm-fadeIn"}),outClass:Object.assign({},o,{default:"vm-fadeOut"}),bgInClass:Object.assign({},o,{default:"vm-fadeIn"}),bgOutClass:Object.assign({},o,{default:"vm-fadeOut"}),appendTo:{type:String,default:"body"},live:{type:Boolean,default:!1},enableClose:{type:Boolean,default:!0},modelValue:{type:Boolean,default:!1},closeLabel:{type:String,default:"Close"}},emits:["before-open","opening","after-open","before-close","closing","after-close","update:modelValue"],data(){return{zIndex:0,id:null,show:!1,mount:!1,elToFocus:null}},created(){this.live&&(this.mount=!0)},mounted(){this.id="vm-"+this.$.uid,this.$watch("modelValue",function(t){t?(this.mount=!0,this.$nextTick(()=>{this.show=!0})):this.show=!1},{immediate:!0})},beforeUnmount(){this.elToFocus=null},methods:{close(){this.enableClose===!0&&this.$emit("update:modelValue",!1)},clickOutside(t){t.target===this.$refs["vm-wrapper"]&&this.close()},keydown(t){if((t.which===27||t.keyCode===27)&&this.close(),t.which===9||t.keyCode===9){const l=[].slice.call(this.$refs["vm-wrapper"].querySelectorAll(f)).filter(function(s){return!!(s.offsetWidth||s.offsetHeight||s.getClientRects().length)});t.shiftKey?(t.target===l[0]||t.target===this.$refs["vm-wrapper"])&&(t.preventDefault(),l[l.length-1].focus()):t.target===l[l.length-1]&&(t.preventDefault(),l[0].focus())}},getAllVisibleWrappers(){return[].slice.call(document.querySelectorAll("[data-vm-wrapper-id]")).filter(t=>t.display!=="none")},getTopZindex(){return this.getAllVisibleWrappers().reduce((t,l)=>parseInt(l.style.zIndex)>t?parseInt(l.style.zIndex):t,0)},handleFocus(t){const l=t.querySelector("[autofocus]");if(l)l.focus();else{const s=t.querySelectorAll(f);s.length?s[0].focus():t.focus()}},beforeOpen(){this.elToFocus=document.activeElement;const t=this.getTopZindex();c?this.zIndex=c+2:this.zIndex=t===0?this.baseZindex:t+2,c=this.zIndex,this.$emit("before-open")},opening(){this.$emit("opening")},afterOpen(){this.handleFocus(this.$refs["vm-wrapper"]),this.$emit("after-open")},beforeClose(){this.$emit("before-close")},closing(){this.$emit("closing")},afterClose(){this.zIndex=0,this.live||(this.mount=!1),this.$nextTick(()=>{window.requestAnimationFrame(()=>{const t=this.getTopZindex();if(t>0){const l=this.getAllVisibleWrappers();for(let s=0;s<l.length;s++){const a=l[s];if(parseInt(a.style.zIndex)===t){a.contains(this.elToFocus)?this.elToFocus.focus():this.handleFocus(a);break}}}else document.body.contains(this.elToFocus)&&this.elToFocus.focus();c=0,this.$emit("after-close")})})}}},h=["data-vm-backdrop-id"],b=["data-vm-wrapper-id","aria-label","aria-describedby","aria-labelledby"],p=["data-vm-id"],y={class:"vm-titlebar"},g=["id"],C=["aria-label"],v=["id"];function w(t,l,s,a,i,n){return i.mount?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:s.appendTo},[e.createVNode(e.Transition,{name:"vm-backdrop-transition","enter-active-class":s.bgInClass,"leave-active-class":s.bgOutClass},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{"data-vm-backdrop-id":i.id,class:e.normalizeClass(["vm-backdrop",s.bgClass]),style:e.normalizeStyle({"z-index":i.zIndex-1})},null,14,h),[[e.vShow,i.show]])]),_:1},8,["enter-active-class","leave-active-class"]),e.createVNode(e.Transition,{name:"vm-transition","enter-active-class":s.inClass,"leave-active-class":s.outClass,onBeforeEnter:n.beforeOpen,onEnter:n.opening,onAfterEnter:n.afterOpen,onBeforeLeave:n.beforeClose,onLeave:n.closing,onAfterLeave:n.afterClose},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref:"vm-wrapper","data-vm-wrapper-id":i.id,tabindex:"-1",class:e.normalizeClass(["vm-wrapper",s.wrapperClass]),style:e.normalizeStyle({"z-index":i.zIndex,cursor:s.enableClose?"pointer":"default"}),role:"dialog","aria-label":s.title,"aria-modal":"true","aria-describedby":`${i.id}-content`,"aria-labelledby":`${i.id}-title`,onClick:l[1]||(l[1]=r=>n.clickOutside(r)),onKeydown:l[2]||(l[2]=r=>n.keydown(r))},[e.createElementVNode("div",{ref:"vm",class:e.normalizeClass(["vm",s.modalClass]),"data-vm-id":i.id,style:e.normalizeStyle(s.modalStyle)},[e.renderSlot(t.$slots,"titlebar",{},()=>[e.createElementVNode("div",y,[e.createElementVNode("h3",{id:`${i.id}-title`,class:"vm-title"},e.toDisplayString(s.title),9,g),s.enableClose?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vm-btn-close","aria-label":s.closeLabel,onClick:l[0]||(l[0]=e.withModifiers((...r)=>n.close&&n.close(...r),["prevent"]))},null,8,C)):e.createCommentVNode("",!0)])]),e.renderSlot(t.$slots,"content",{},()=>[e.createElementVNode("div",{id:`${i.id}-content`,class:"vm-content"},[e.renderSlot(t.$slots,"default")],8,v)])],14,p)],46,b),[[e.vShow,i.show]])]),_:3},8,["enter-active-class","leave-active-class","onBeforeEnter","onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],8,["to"])):e.createCommentVNode("",!0)}return m(u,[["render",w]])});
+(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.VueModal={},o.Vue))})(this,function(o,t){"use strict";const T="",u=(e,l)=>{const s=e.__vccOpts||e;for(const[a,i]of l)s[a]=i;return s},r={type:[String,Object,Array],default:""},m='a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';let c=0;const b={name:"VueModal",props:{name:{type:String,default:""},title:{type:String,default:""},baseZindex:{type:Number,default:1051},bgClass:r,wrapperClass:r,modalClass:r,modalStyle:r,inClass:Object.assign({},r,{default:"vm-fadeIn"}),outClass:Object.assign({},r,{default:"vm-fadeOut"}),bgInClass:Object.assign({},r,{default:"vm-fadeIn"}),bgOutClass:Object.assign({},r,{default:"vm-fadeOut"}),appendTo:{type:String,default:"body"},live:{type:Boolean,default:!1},enableClose:{type:Boolean,default:!0},modelValue:{type:Boolean,default:!1},closeLabel:{type:String,default:"Close"}},emits:["before-open","opening","after-open","before-close","closing","after-close","update:modelValue"],data(){return{zIndex:0,id:null,show:!1,mount:!1,elToFocus:null}},created(){this.live&&(this.mount=!0)},mounted(){this.id="vm-"+this.$.uid,this.name||this.$watch("modelValue",e=>{e?(this.mount=!0,this.$nextTick(()=>{this.show=!0})):this.show=!1},{immediate:!0}),this.name&&this.$modal&&this.$watch("$modal.state.modals",e=>{e[this.name]?(this.mount=!0,this.$nextTick(()=>{this.show=!0})):this.show=!1},{deep:!0})},beforeUnmount(){this.elToFocus=null,this.name&&this.$modal.hide(this.name)},methods:{close(){this.enableClose===!0&&(this.$emit("update:modelValue",!1),this.name&&this.$modal.hide(this.name))},clickOutside(e){e.target===this.$refs["vm-wrapper"]&&this.close()},keydown(e){if((e.which===27||e.keyCode===27)&&this.close(),e.which===9||e.keyCode===9){const l=[].slice.call(this.$refs["vm-wrapper"].querySelectorAll(m)).filter(function(s){return!!(s.offsetWidth||s.offsetHeight||s.getClientRects().length)});e.shiftKey?(e.target===l[0]||e.target===this.$refs["vm-wrapper"])&&(e.preventDefault(),l[l.length-1].focus()):e.target===l[l.length-1]&&(e.preventDefault(),l[0].focus())}},getAllVisibleWrappers(){return[].slice.call(document.querySelectorAll("[data-vm-wrapper-id]")).filter(e=>e.display!=="none")},getTopZindex(){return this.getAllVisibleWrappers().reduce((e,l)=>parseInt(l.style.zIndex)>e?parseInt(l.style.zIndex):e,0)},handleFocus(e){const l=e.querySelector("[autofocus]");if(l)l.focus();else{const s=e.querySelectorAll(m);s.length?s[0].focus():e.focus()}},beforeOpen(){this.elToFocus=document.activeElement;const e=this.getTopZindex();c?this.zIndex=c+2:this.zIndex=e===0?this.baseZindex:e+2,c=this.zIndex,this.$emit("before-open")},opening(){this.$emit("opening")},afterOpen(){this.handleFocus(this.$refs["vm-wrapper"]),this.$emit("after-open")},beforeClose(){this.$emit("before-close")},closing(){this.$emit("closing")},afterClose(){this.zIndex=0,this.live||(this.mount=!1),this.$nextTick(()=>{window.requestAnimationFrame(()=>{const e=this.getTopZindex();if(e>0){const l=this.getAllVisibleWrappers();for(let s=0;s<l.length;s++){const a=l[s];if(parseInt(a.style.zIndex)===e){a.contains(this.elToFocus)?this.elToFocus.focus():this.handleFocus(a);break}}}else document.body.contains(this.elToFocus)&&this.elToFocus.focus();c=0,this.$emit("after-close")})})}}},p=["data-vm-backdrop-id"],g=["data-vm-wrapper-id","aria-label","aria-describedby","aria-labelledby"],y=["data-vm-id"],C={class:"vm-titlebar"},v=["id"],w=["aria-label"],x=["id"];function S(e,l,s,a,i,n){return i.mount?(t.openBlock(),t.createBlock(t.Teleport,{key:0,to:s.appendTo},[t.createVNode(t.Transition,{name:"vm-backdrop-transition","enter-active-class":s.bgInClass,"leave-active-class":s.bgOutClass},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",{"data-vm-backdrop-id":i.id,class:t.normalizeClass(["vm-backdrop",s.bgClass]),style:t.normalizeStyle({"z-index":i.zIndex-1})},null,14,p),[[t.vShow,i.show]])]),_:1},8,["enter-active-class","leave-active-class"]),t.createVNode(t.Transition,{name:"vm-transition","enter-active-class":s.inClass,"leave-active-class":s.outClass,onBeforeEnter:n.beforeOpen,onEnter:n.opening,onAfterEnter:n.afterOpen,onBeforeLeave:n.beforeClose,onLeave:n.closing,onAfterLeave:n.afterClose},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",{ref:"vm-wrapper","data-vm-wrapper-id":i.id,tabindex:"-1",class:t.normalizeClass(["vm-wrapper",s.wrapperClass]),style:t.normalizeStyle({"z-index":i.zIndex,cursor:s.enableClose?"pointer":"default"}),role:"dialog","aria-label":s.title,"aria-modal":"true","aria-describedby":`${i.id}-content`,"aria-labelledby":`${i.id}-title`,onClick:l[1]||(l[1]=d=>n.clickOutside(d)),onKeydown:l[2]||(l[2]=d=>n.keydown(d))},[t.createElementVNode("div",{ref:"vm",class:t.normalizeClass(["vm",s.modalClass]),"data-vm-id":i.id,style:t.normalizeStyle(s.modalStyle)},[t.renderSlot(e.$slots,"titlebar",{},()=>[t.createElementVNode("div",C,[t.createElementVNode("h3",{id:`${i.id}-title`,class:"vm-title"},t.toDisplayString(s.title),9,v),s.enableClose?(t.openBlock(),t.createElementBlock("button",{key:0,type:"button",class:"vm-btn-close","aria-label":s.closeLabel,onClick:l[0]||(l[0]=t.withModifiers((...d)=>n.close&&n.close(...d),["prevent"]))},null,8,w)):t.createCommentVNode("",!0)])]),t.renderSlot(e.$slots,"content",{},()=>[t.createElementVNode("div",{id:`${i.id}-content`,class:"vm-content"},[t.renderSlot(e.$slots,"default")],8,x)])],14,y)],46,g),[[t.vShow,i.show]])]),_:3},8,["enter-active-class","leave-active-class","onBeforeEnter","onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],8,["to"])):t.createCommentVNode("",!0)}const _=u(b,[["render",S]]),f=t.reactive({modals:{}}),h=()=>{const e=a=>{f.modals[a]=!0},l=a=>{delete f.modals[a]};return{state:f,show:e,hide:l,hideAll:()=>{Object.keys(f.modals).forEach(a=>{l(a)})}}},k={install(e){e.config.globalProperties.$modal=h()}};o.Modal=_,o.modalPlugin=k,o.useModal=h,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "@kouts/vue-modal",
   "description": "A modal window component for Vue 3",
-  "version": "3.0.9",
+  "version": "4.0.0",
   "author": "Giannis Koutsaftakis",
@@ -17,2 +17,3 @@ "license": "MIT",
   "unpkg": "dist/vue-modal.umd.js",
+  "sideEffects": false,
   "scripts": {
@@ -19,0 +20,0 @@ "dev": "vite",

playground/main.js

 import App from './App.vue'
 import Default from './layouts/default/Default.vue'
-import Modal from '@/Modal.vue'
+import { Modal, modalPlugin } from '@/index'
 import { createApp } from 'vue'
@@ -15,2 +15,3 @@ import { router } from './router'
 app.use(router)
+app.use(modalPlugin)
 app.mount('#app')

playground/router/index.js

@@ -24,2 +24,10 @@ import Example1 from '../views/Example1.vue'
     }
+  },
+  {
+    path: '/named-example',
+    name: 'NamedExample',
+    component: () => import(/* webpackChunkName: "named-example" */ '../views/NamedExample.vue'),
+    meta: {
+      layout: 'default'
+    }
   }
@@ -26,0 +34,0 @@ ]

vite.config.js

@@ -40,3 +40,3 @@ import vue from '@vitejs/plugin-vue'
     lib: {
-      entry: resolve(__dirname, 'src/Modal.vue'),
+      entry: resolve(__dirname, 'src/index.js'),
       name: 'VueModal',
@@ -43,0 +43,0 @@ fileName: (format) => `vue-modal.${format}.js`

No alert changes

Improved metrics

Total package byte prevSize

139788

3.75%

Number of package files

73

5.8%

Lines of code

1015

8.44%

No dependency changes