@kouts/vue-modal - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [5.0.1](https://github.com/kouts/vue-modal/compare/v5.0.0...v5.0.1) (2024-05-12)
+
+
+### Bug Fixes
+
+* switched to pnpm, updated npm packages ([5268e93](https://github.com/kouts/vue-modal/commit/5268e934d6ef918eca26e9b00982c1914895b42f))
+
 # [5.0.0](https://github.com/kouts/vue-modal/compare/v4.1.0...v5.0.0) (2023-06-05)
@@ -2,0 +9,0 @@

dist/vue-modal.es.js

@@ -1,2 +0,2 @@
-import { openBlock as h, 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 m, toDisplayString as k, createElementBlock as S, withModifiers as T, createCommentVNode as C, reactive as I } from "vue";
+import { openBlock as h, createBlock as x, Teleport as k, 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 m, toDisplayString as S, createElementBlock as T, withModifiers as _, createCommentVNode as C, reactive as I } from "vue";
 const O = (e, t) => {
@@ -156,3 +156,3 @@ const s = e.__vccOpts || e;
 function j(e, t, s, i, l, a) {
-  return l.mount ? (h(), x(_, {
+  return l.mount ? (h(), x(k, {
     key: 0,
@@ -214,4 +214,4 @@ to: s.appendTo
                   class: "vm-title"
-                }, k(s.title), 9, V),
-                s.enableClose ? (h(), S("button", {
+                }, S(s.title), 9, V),
+                s.enableClose ? (h(), T("button", {
                   key: 0,
@@ -221,3 +221,3 @@ type: "button",
                   "aria-label": s.closeLabel,
-                  onClick: t[0] || (t[0] = T((...d) => a.close && a.close(...d), ["prevent"]))
+                  onClick: t[0] || (t[0] = _((...d) => a.close && a.close(...d), ["prevent"]))
                 }, null, 8, L)) : C("", !0)
@@ -245,3 +245,3 @@ ])
   modals: {}
-}), M = () => {
+}), q = () => {
   const e = (i) => {
@@ -259,3 +259,3 @@ c.modals[i] = !0;
   install(e) {
-    e.config.globalProperties.$modal = M();
+    e.config.globalProperties.$modal = q();
   }
@@ -266,3 +266,3 @@ };
   W as modalPlugin,
-  M as useModal
+  q as useModal
 };

dist/vue-modal.umd.js

@@ -1,1 +0,1 @@
-(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.VueModal={},a.Vue))})(this,function(a,t){"use strict";const T="",u=(e,l)=>{const s=e.__vccOpts||e;for(const[o,i]of l)s[o]=i;return s},d={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:d,wrapperClass:d,modalClass:d,modalStyle:d,inClass:Object.assign({},d,{default:"vm-fadeIn"}),outClass:Object.assign({},d,{default:"vm-fadeOut"}),bgInClass:Object.assign({},d,{default:"vm-fadeIn"}),bgOutClass:Object.assign({},d,{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","opened","before-close","closing","closed","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;const e=this.name?`$modal.state.modals.${this.name}`:"modelValue";this.$watch(e,l=>{l?(this.mount=!0,this.$nextTick(()=>{this.show=!0})):this.show=!1},{immediate:!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")},opened(){this.handleFocus(this.$refs["vm-wrapper"]),this.$emit("opened")},beforeClose(){this.$emit("before-close")},closing(){this.$emit("closing")},closed(){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 o=l[s];if(parseInt(o.style.zIndex)===e){o.contains(this.elToFocus)?this.elToFocus.focus():this.handleFocus(o);break}}}else document.body.contains(this.elToFocus)&&this.elToFocus.focus();c=0,this.$emit("closed")})})}}},p=["data-vm-backdrop-id"],g=["data-vm-wrapper-id","aria-label","aria-describedby","aria-labelledby"],y=["data-vm-id"],v={class:"vm-titlebar"},C=["id"],w=["aria-label"],x=["id"];function S(e,l,s,o,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.opened,onBeforeLeave:n.beforeClose,onLeave:n.closing,onAfterLeave:n.closed},{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]=r=>n.clickOutside(r)),onKeydown:l[2]||(l[2]=r=>n.keydown(r))},[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",v,[t.createElementVNode("h3",{id:`${i.id}-title`,class:"vm-title"},t.toDisplayString(s.title),9,C),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((...r)=>n.close&&n.close(...r),["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=o=>{f.modals[o]=!0},l=o=>{delete f.modals[o]};return{state:f,show:e,hide:l,hideAll:()=>{Object.keys(f.modals).forEach(o=>{l(o)})}}},k={install(e){e.config.globalProperties.$modal=h()}};a.Modal=_,a.modalPlugin=k,a.useModal=h,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
+(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.VueModal={},a.Vue))})(this,function(a,t){"use strict";const u=(e,l)=>{const s=e.__vccOpts||e;for(const[o,i]of l)s[o]=i;return s},d={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:d,wrapperClass:d,modalClass:d,modalStyle:d,inClass:Object.assign({},d,{default:"vm-fadeIn"}),outClass:Object.assign({},d,{default:"vm-fadeOut"}),bgInClass:Object.assign({},d,{default:"vm-fadeIn"}),bgOutClass:Object.assign({},d,{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","opened","before-close","closing","closed","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;const e=this.name?`$modal.state.modals.${this.name}`:"modelValue";this.$watch(e,l=>{l?(this.mount=!0,this.$nextTick(()=>{this.show=!0})):this.show=!1},{immediate:!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")},opened(){this.handleFocus(this.$refs["vm-wrapper"]),this.$emit("opened")},beforeClose(){this.$emit("before-close")},closing(){this.$emit("closing")},closed(){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 o=l[s];if(parseInt(o.style.zIndex)===e){o.contains(this.elToFocus)?this.elToFocus.focus():this.handleFocus(o);break}}}else document.body.contains(this.elToFocus)&&this.elToFocus.focus();c=0,this.$emit("closed")})})}}},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,o,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.opened,onBeforeLeave:n.beforeClose,onLeave:n.closing,onAfterLeave:n.closed},{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]=r=>n.clickOutside(r)),onKeydown:l[2]||(l[2]=r=>n.keydown(r))},[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((...r)=>n.close&&n.close(...r),["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 k=u(b,[["render",S]]),f=t.reactive({modals:{}}),h=()=>{const e=o=>{f.modals[o]=!0},l=o=>{delete f.modals[o]};return{state:f,show:e,hide:l,hideAll:()=>{Object.keys(f.modals).forEach(o=>{l(o)})}}},T={install(e){e.config.globalProperties.$modal=h()}};a.Modal=k,a.modalPlugin=T,a.useModal=h,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

docs/.vuepress/config.js

 import * as path from 'path'
 import * as url from 'url'
-import { defaultTheme, defineUserConfig } from 'vuepress-webpack'
+import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig } from 'vuepress'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { vueExamplePlugin } from 'vuepress-plugin-vue-example'
+import { webpackBundler } from '@vuepress/bundler-webpack'
 
@@ -15,3 +17,3 @@ const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
     docsearchPlugin({
-      apiKey: 'cf43591b3240a37c852e5fc1ead88efb',
+      apiKey: 'b1beebce60b696f3ab59d523bdc04b94',
       indexName: 'vue-modal',
@@ -24,2 +26,6 @@ appId: 'G4DW29QPYK'
   description: 'A modal plugin for Vue 3',
+  bundler: webpackBundler({
+    postcss: {},
+    vue: {}
+  }),
   theme: defaultTheme({
@@ -26,0 +32,0 @@ contributors: false,

docs/index.md

@@ -24,4 +24,4 @@ # vue-modal
 - Modal intro and outro effects using CSS animation classes
-- Exposes Component events - before-open, opening, opened, before-close, closing, closed, update:modelValue (close)
-- Scrollable when it's contents exceed screen height
+- Exposes Component events - `before-open`, `opening`, `opened`, `before-close`, `closing`, `closed`, `update:modelValue` (close)
+- Scrollable when its contents exceed screen height
 - Closeable by clicking on the upper right "x", the overlay or the `esc` key
@@ -28,0 +28,0 @@ - **Stackable** - Multiple modal windows on top of each other

package.json

 {
   "name": "@kouts/vue-modal",
   "description": "A modal window component for Vue 3",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "author": "Giannis Koutsaftakis",
@@ -25,3 +25,3 @@ "license": "MIT",
     "lint-fix": "eslint . --fix --ext .js,.vue",
-    "prepare": "husky install",
+    "prepare": "husky",
     "docs:dev": "vuepress dev docs",
@@ -31,37 +31,43 @@ "docs:build": "vuepress build docs"
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.4",
-    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.5",
-    "@kouts/eslint-config": "^0.0.13",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@kouts/eslint-config": "^0.0.14",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.4",
-    "@vuepress/plugin-docsearch": "2.0.0-beta.62",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "@vuepress/bundler-webpack": "^2.0.0-rc.9",
+    "@vuepress/client": "2.0.0-rc.9",
+    "@vuepress/plugin-docsearch": "2.0.0-rc.28",
+    "@vuepress/theme-default": "^2.0.0-rc.28",
     "animate.css": "^4.1.1",
-    "babel-jest": "^29.5.0",
+    "babel-jest": "^29.7.0",
     "body-scroll-freezer": "^1.0.5",
     "bootstrap": "^4.6.2",
-    "core-js": "^3.30.2",
+    "core-js": "^3.37.0",
     "eslint": "^8.42.0",
-    "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "lint-staged": "^13.2.2",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.2",
     "make-coverage-badge": "^1.2.0",
-    "prettier": "2.8.8",
-    "sass": "^1.62.1",
-    "vite": "^4.3.9",
-    "vite-plugin-html": "^3.2.0",
-    "vue-router": "^4.2.2",
+    "prettier": "3.2.5",
+    "raw-loader": "^4.0.2",
+    "sass": "~1.64.2",
+    "sass-loader": "^14.2.1",
+    "vite": "^5.2.11",
+    "vite-plugin-html": "^3.2.2",
+    "vue-router": "^4.3.2",
+    "vuepress": "^2.0.0-rc.9",
     "vuepress-plugin-vue-example": "^2.0.8",
-    "vuepress-webpack": "2.0.0-beta.62",
+    "vuepress-webpack": "2.0.0-rc.0",
     "vuex": "^4.1.0"
   }
 }

README.md

@@ -23,4 +23,4 @@ # vue-modal <a href="https://npm.im/@kouts/vue-modal"><img src="https://badgen.net/npm/v/@kouts/vue-modal/next"></a> ![](https://img.badgesize.io/kouts/vue-modal/next/dist/vue-modal.umd.js.svg) ![](https://img.badgesize.io/kouts/vue-modal/next/dist/vue-modal.umd.js.svg?compression=gzip) ![](coverage/badge.svg)
 - Modal intro and outro effects using CSS animation classes
-- Exposes Component events - before-open, opening, opened, before-close, closing, closed, update:modelValue (close)
-- Scrollable when it's contents exceed screen height
+- Exposes Component events - `before-open`, `opening`, `opened`, `before-close`, `closing`, `closed`, `update:modelValue` (close)
+- Scrollable when its contents exceed screen height
 - Closeable by clicking on the upper right "x", the overlay or the `esc` key
@@ -48,4 +48,4 @@ - **Stackable** - Multiple modal windows on top of each other
 ```sh
-npm i
-npm run dev
+pnpm i
+pnpm run dev
 ```

No alert changes

Improved metrics

Total package byte prevSize

147763

0.43%

Lines of code

1015

0.59%

Worsened metrics

Dev dependency count

37

19.35%

Dependency changes

• + Added

  @babel/parser@7.27.2
  (transitive)

• - Removed

  @babel/parser@7.27.1
  (transitive)

• Updated

  vue@^3.4.27