From af3974fc61059881e83c55dc0014fffc62b5581b Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Mon, 18 Apr 2022 12:44:17 +0000 Subject: [PATCH] chore(release): set `package.json` to 3.0.3 [skip ci] ## [3.0.3](https://github.com/kouts/vue-modal/compare/v3.0.2...v3.0.3) (2022-04-18) ### Bug Fixes * added aria attributes ([50a52a0](https://github.com/kouts/vue-modal/commit/50a52a0146082502eb88d534ab2ee46ac2b889f8)) * added keyCode for keydown event ([084ec52](https://github.com/kouts/vue-modal/commit/084ec525fbb0a437412c00df7868b3e8cbf90c65)) * added prop for close button label ([cd8a0c8](https://github.com/kouts/vue-modal/commit/cd8a0c802df7e219504fbbeeb923d7ece045d949)) --- CHANGELOG.md | 9 +++++++++ dist/vue-modal.es.js | 38 ++++++++++++++++++++++++++------------ dist/vue-modal.umd.js | 2 +- 3 files changed, 36 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2b1a34..860e169 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [3.0.3](https://github.com/kouts/vue-modal/compare/v3.0.2...v3.0.3) (2022-04-18) + + +### Bug Fixes + +* added aria attributes ([50a52a0](https://github.com/kouts/vue-modal/commit/50a52a0146082502eb88d534ab2ee46ac2b889f8)) +* added keyCode for keydown event ([084ec52](https://github.com/kouts/vue-modal/commit/084ec525fbb0a437412c00df7868b3e8cbf90c65)) +* added prop for close button label ([cd8a0c8](https://github.com/kouts/vue-modal/commit/cd8a0c802df7e219504fbbeeb923d7ece045d949)) + ## [3.0.2](https://github.com/kouts/vue-modal/compare/v3.0.1...v3.0.2) (2022-01-08) diff --git a/dist/vue-modal.es.js b/dist/vue-modal.es.js index 3485dbb..5cc0b6a 100644 --- a/dist/vue-modal.es.js +++ b/dist/vue-modal.es.js @@ -1,10 +1,11 @@ import { openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, renderSlot, toDisplayString, createElementBlock, withModifiers, createCommentVNode } from "vue"; var Modal_vue_vue_type_style_index_0_lang = ""; var _export_sfc = (sfc, props) => { + const target = sfc.__vccOpts || sfc; for (const [key, val] of props) { - sfc[key] = val; + target[key] = val; } - return sfc; + return target; }; const TYPE_CSS = { type: [String, Object, Array], @@ -46,6 +47,10 @@ const _sfc_main = { modelValue: { type: Boolean, default: false + }, + closeLabel: { + type: String, + default: "Close" } }, emits: ["before-open", "opening", "after-open", "before-close", "closing", "after-close", "update:modelValue"], @@ -93,10 +98,10 @@ const _sfc_main = { } }, keydown(e) { - if (e.which === 27) { + if (e.which === 27 || e.keyCode === 27) { this.close(); } - if (e.which === 9) { + if (e.which === 9 || e.keyCode === 9) { const all = [].slice.call(this.$refs["vm-wrapper"].querySelectorAll(FOCUSABLE_ELEMENTS)).filter(function(el) { return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length); }); @@ -188,11 +193,12 @@ const _sfc_main = { } }; const _hoisted_1 = ["data-vm-backdrop-id"]; -const _hoisted_2 = ["data-vm-wrapper-id", "aria-label"]; +const _hoisted_2 = ["data-vm-wrapper-id", "aria-label", "aria-describedby", "aria-labelledby"]; const _hoisted_3 = ["data-vm-id"]; const _hoisted_4 = { class: "vm-titlebar" }; -const _hoisted_5 = { class: "vm-title" }; -const _hoisted_6 = { class: "vm-content" }; +const _hoisted_5 = ["id"]; +const _hoisted_6 = ["aria-label"]; +const _hoisted_7 = ["id"]; function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { return $data.mount ? (openBlock(), createBlock(Teleport, { key: 0, @@ -235,6 +241,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { role: "dialog", "aria-label": $props.title, "aria-modal": "true", + "aria-describedby": `${$data.id}-content`, + "aria-labelledby": `${$data.id}-title`, onClick: _cache[1] || (_cache[1] = ($event) => $options.clickOutside($event)), onKeydown: _cache[2] || (_cache[2] = ($event) => $options.keydown($event)) }, [ @@ -246,20 +254,26 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { }, [ renderSlot(_ctx.$slots, "titlebar", {}, () => [ createElementVNode("div", _hoisted_4, [ - createElementVNode("h3", _hoisted_5, toDisplayString($props.title), 1), + createElementVNode("h3", { + id: `${$data.id}-title`, + class: "vm-title" + }, toDisplayString($props.title), 9, _hoisted_5), $props.enableClose ? (openBlock(), createElementBlock("button", { key: 0, type: "button", class: "vm-btn-close", - "aria-label": "Close", + "aria-label": $props.closeLabel, onClick: _cache[0] || (_cache[0] = withModifiers((...args) => $options.close && $options.close(...args), ["prevent"])) - })) : createCommentVNode("", true) + }, null, 8, _hoisted_6)) : createCommentVNode("", true) ]) ]), renderSlot(_ctx.$slots, "content", {}, () => [ - createElementVNode("div", _hoisted_6, [ + createElementVNode("div", { + id: `${$data.id}-content`, + class: "vm-content" + }, [ renderSlot(_ctx.$slots, "default") - ]) + ], 8, _hoisted_7) ]) ], 14, _hoisted_3) ], 46, _hoisted_2), [ diff --git a/dist/vue-modal.umd.js b/dist/vue-modal.umd.js index 595e9a9..2584062 100644 --- a/dist/vue-modal.umd.js +++ b/dist/vue-modal.umd.js @@ -1 +1 @@ -(function(e,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis!="undefined"?globalThis:e||self,e.VueModal=d(e.Vue))})(this,function(e){"use strict";var d="",m=(t,l)=>{for(const[s,o]of l)t[s]=o;return t};const i={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:i,wrapperClass:i,modalClass:i,modalStyle:i,inClass:Object.assign({},i,{default:"vm-fadeIn"}),outClass:Object.assign({},i,{default:"vm-fadeOut"}),bgInClass:Object.assign({},i,{default:"vm-fadeIn"}),bgOutClass:Object.assign({},i,{default:"vm-fadeOut"}),appendTo:{type:String,default:"body"},live:{type:Boolean,default:!1},enableClose:{type:Boolean,default:!0},modelValue:{type:Boolean,default:!1}},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&&this.close(),t.which===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[e.withDirectives(e.createElementVNode("div",{"data-vm-backdrop-id":a.id,class:e.normalizeClass(["vm-backdrop",s.bgClass]),style:e.normalizeStyle({"z-index":a.zIndex-1})},null,14,h),[[e.vShow,a.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":a.id,tabindex:"-1",class:e.normalizeClass(["vm-wrapper",s.wrapperClass]),style:e.normalizeStyle({"z-index":a.zIndex,cursor:s.enableClose?"pointer":"default"}),role:"dialog","aria-label":s.title,"aria-modal":"true",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":a.id,style:e.normalizeStyle(s.modalStyle)},[e.renderSlot(t.$slots,"titlebar",{},()=>[e.createElementVNode("div",g,[e.createElementVNode("h3",y,e.toDisplayString(s.title),1),s.enableClose?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vm-btn-close","aria-label":"Close",onClick:l[0]||(l[0]=e.withModifiers((...r)=>n.close&&n.close(...r),["prevent"]))})):e.createCommentVNode("",!0)])]),e.renderSlot(t.$slots,"content",{},()=>[e.createElementVNode("div",v,[e.renderSlot(t.$slots,"default")])])],14,p)],46,b),[[e.vShow,a.show]])]),_:3},8,["enter-active-class","leave-active-class","onBeforeEnter","onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],8,["to"])):e.createCommentVNode("",!0)}var w=m(u,[["render",C]]);return w}); +(function(e,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis!="undefined"?globalThis:e||self,e.VueModal=d(e.Vue))})(this,function(e){"use strict";var d="",m=(t,s)=>{const l=t.__vccOpts||t;for(const[o,i]of s)l[o]=i;return l};const a={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: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"}),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 s=[].slice.call(this.$refs["vm-wrapper"].querySelectorAll(f)).filter(function(l){return!!(l.offsetWidth||l.offsetHeight||l.getClientRects().length)});t.shiftKey?(t.target===s[0]||t.target===this.$refs["vm-wrapper"])&&(t.preventDefault(),s[s.length-1].focus()):t.target===s[s.length-1]&&(t.preventDefault(),s[0].focus())}},getAllVisibleWrappers(){return[].slice.call(document.querySelectorAll("[data-vm-wrapper-id]")).filter(t=>t.display!=="none")},getTopZindex(){return this.getAllVisibleWrappers().reduce((t,s)=>parseInt(s.style.zIndex)>t?parseInt(s.style.zIndex):t,0)},handleFocus(t){const s=t.querySelector("[autofocus]");if(s)s.focus();else{const l=t.querySelectorAll(f);l.length?l[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 s=this.getAllVisibleWrappers();for(let l=0;l[e.withDirectives(e.createElementVNode("div",{"data-vm-backdrop-id":i.id,class:e.normalizeClass(["vm-backdrop",l.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":l.inClass,"leave-active-class":l.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",l.wrapperClass]),style:e.normalizeStyle({"z-index":i.zIndex,cursor:l.enableClose?"pointer":"default"}),role:"dialog","aria-label":l.title,"aria-modal":"true","aria-describedby":`${i.id}-content`,"aria-labelledby":`${i.id}-title`,onClick:s[1]||(s[1]=r=>n.clickOutside(r)),onKeydown:s[2]||(s[2]=r=>n.keydown(r))},[e.createElementVNode("div",{ref:"vm",class:e.normalizeClass(["vm",l.modalClass]),"data-vm-id":i.id,style:e.normalizeStyle(l.modalStyle)},[e.renderSlot(t.$slots,"titlebar",{},()=>[e.createElementVNode("div",y,[e.createElementVNode("h3",{id:`${i.id}-title`,class:"vm-title"},e.toDisplayString(l.title),9,g),l.enableClose?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vm-btn-close","aria-label":l.closeLabel,onClick:s[0]||(s[0]=e.withModifiers((...r)=>n.close&&n.close(...r),["prevent"]))},null,8,v)):e.createCommentVNode("",!0)])]),e.renderSlot(t.$slots,"content",{},()=>[e.createElementVNode("div",{id:`${i.id}-content`,class:"vm-content"},[e.renderSlot(t.$slots,"default")],8,C)])],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)}var x=m(u,[["render",w]]);return x});