@pdanpdan/vue-keyboard-trap - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

dist/index.es.js

@@ -324,15 +324,19 @@ import * as Vue from 'vue';
 
-            setActiveTrapEl(el.parentElement === null ? null : el.parentElement.closest(config.datasetNameSelector));
+            if (ctx.modifiers.escexits === true) {
+              setActiveTrapEl(el.parentElement === null ? null : el.parentElement.closest(config.datasetNameSelector));
 
-            if (ctx.modifiers.escexits === true) {
               const newCtx = getCtx(activeTrapEl);
 
-              if (newCtx !== null && newCtx.refocus() === true) {
-                return;
+              if (newCtx !== null) {
+                newCtx.refocus();
               }
+
+              return;
             }
 
-            if (ctx.modifiers.escrefocus === true) {
-              focus(ctx.relatedFocusTarget);
+            if (ctx.modifiers.escrefocus === true && focus(ctx.relatedFocusTarget) === true) {
+              return;
             }
+
+            setActiveTrapEl(null);
           } else {
@@ -339,0 +343,0 @@ setActiveTrapEl(el);

dist/index.umd.js

@@ -1,2 +0,2 @@
-(function(_,C){typeof exports=="object"&&typeof module<"u"?C(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],C):(_=typeof globalThis<"u"?globalThis:_||self,C(_.VueKeyboardTrap={},_.Vue))})(this,function(_,C){"use strict";function W(o){if(o&&o.__esModule)return o;var a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return o&&Object.keys(o).forEach(function(r){if(r!=="default"){var u=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(a,r,u.get?u:{enumerable:!0,get:function(){return o[r]}})}}),a.default=o,Object.freeze(a)}var H=W(C);function B(o){const a={name:"kbd-trap",focusableSelector:[":focus",'a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"]):not([contenteditable="false"])','[class*="focusable"]:not([disabled]):not([tabindex^="-"])'].join(","),rovingSkipSelector:['input:not([disabled]):not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"])',"select:not([disabled])","select:not([disabled]) *","textarea:not([disabled])",'[contenteditable]:not([contenteditable="false"])','[contenteditable]:not([contenteditable="false"]) *'].join(","),gridSkipSelector:[":not([disabled])",':not([tabindex^="-"])'].join(""),autofocusSelector:['[autofocus]:not([disabled]):not([autofocus="false"])','[data-autofocus]:not([disabled]):not([data-autofocus="false"])'].join(","),trapTabIndex:-9999,...o},r=a.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter(f=>f.length>0).map(f=>`${f[0].toLocaleUpperCase()}${f.slice(1)}`).join("");if(a.datasetName===void 0&&(a.datasetName=`v${r}`),a.datasetNameActive=`${a.datasetName}Active`,a.datasetNamePreventRefocus=`${a.datasetName}PreventRefocus`,typeof window>"u")return a;const u=document.createElement("span");u.dataset[a.datasetName]="";const s=u.getAttributeNames()[0];return a.datasetNameSelector=`[${s}]`,a.datasetNameSelectorRovingHorizontal=`[${s}~="roving"][${s}~="horizontal"],[${s}~="roving"]:not([${s}~="vertical"])`,a.datasetNameSelectorRovingVertical=`[${s}~="roving"][${s}~="vertical"],[${s}~="roving"]:not([${s}~="horizontal"])`,a.datasetNameRow=`${a.datasetName}Row`,a.datasetNameRowSelector=f=>`:focus,[${s}-row~="${f}"]${a.gridSkipSelector},[${s}-row~="*"]${a.gridSkipSelector}`,a.datasetNameCol=`${a.datasetName}Col`,a.datasetNameColSelector=f=>`:focus,[${s}-col~="${f}"]${a.gridSkipSelector},[${s}-col~="*"]${a.gridSkipSelector}`,a}function G(){return!0}function M(o,a=!1){const{left:r,top:u}=o.getBoundingClientRect(),s=document.elementFromPoint(r,u);if(s===null&&a!==!0&&typeof o.scrollIntoView=="function"){const f=[];let S=o.parentElement;for(;S!==null;)f.push([S,S.scrollLeft,S.scrollTop]),S=S.parentElement;o.scrollIntoView();const q=M(o,!0);for(let h=f.length-1;h>=0;h-=1){const[e,m,g]=f[h];e.scrollLeft=m,e.scrollTop=g}return q}return s===null||o.contains(s)===!0}function x(o,a=G){return o===null||typeof o.focus!="function"||a(o)!==!0?!1:(o.focus(),o===document.activeElement)}const J=/(\d+)/;function j(o){const a=J.exec(o);return a===null?"":a[1]}function V(o,a){const r=(o&&o!==a&&o.parentElement||a).closest('[dir="rtl"],[dir="ltr"]');return r&&r.matches('[dir="rtl"]')}let v=null;function D(o,a){const r=B(o),u=e=>{v!==e&&(e!==null&&(e.dataset[r.datasetNameActive]="",e.__vKbdTrapActiveClean=()=>{delete e.dataset[r.datasetNameActive],e.__vKbdTrapActiveClean=void 0}),v!==null&&typeof v.__vKbdTrapActiveClean=="function"&&v.__vKbdTrapActiveClean(),v=e)},s=e=>{const m=(e||{}).__vKbdTrap;return m===Object(m)?m:null},f=(e,m,g)=>{m===!0?(delete e.dataset[r.datasetName],e.tabIndex===r.trapTabIndex&&e.removeAttribute("tabindex")):(e.dataset[r.datasetName]=Object.keys(g.modifiers).filter(t=>g.modifiers[t]===!0).join(" "),e.tabIndex<0&&e.getAttribute("tabindex")===null&&(e.tabIndex=r.trapTabIndex))},S=(e,{value:m,modifiers:g})=>{const t={disable:m===!1,modifiers:g,focusTarget:null,relatedFocusTarget:null,bind(){e.__vKbdTrap=t,e.addEventListener("keydown",t.trap),e.addEventListener("focusin",t.activate),e.addEventListener("focusout",t.deactivate),e.addEventListener("pointerdown",t.overwiteFocusTarget,{passive:!0}),t.disable===!1&&f(e,t.disable,t)},unbind(){delete e.__vKbdTrap,e.removeEventListener("keydown",t.trap),e.removeEventListener("focusin",t.activate),e.removeEventListener("focusout",t.deactivate),e.removeEventListener("pointerdown",t.overwiteFocusTarget),f(e,!0,t)},activate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v!==e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(u(e),t.relatedFocusTarget=i,(i===null||i.dataset[r.datasetNamePreventRefocus]===void 0||e.contains(i)===!1)&&requestAnimationFrame(()=>{t.refocus(t.modifiers.roving!==!0)}))},deactivate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v===e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(t.focusTarget=n.target,u(null))},trap(n){if(t.disable===!0||n.__vKbdTrap===!0)return;const{code:i,shiftKey:z}=n,{activeElement:T}=document;if(i==="Escape"){if(n.__vKbdTrap=!0,v===e){if(t.focusTarget=T,u(e.parentElement===null?null:e.parentElement.closest(r.datasetNameSelector)),t.modifiers.escexits===!0){const c=s(v);if(c!==null&&c.refocus()===!0)return}t.modifiers.escrefocus===!0&&x(t.relatedFocusTarget)}else u(e);return}if(v!==e)return;n.__vKbdTrap=!0;let b=0,w=c=>c,$=!1,y=!1;if(t.modifiers.roving===!0){const c=T.matches(r.rovingSkipSelector);if(i!=="Tab"&&c===!0)return;if(i==="Tab")c===!1&&t.modifiers.tabinside!==!0?($=!0,z===!0?(b=1,w=(l,d)=>d):(b=-1,w=()=>0)):b=z===!0?-1:1;else if(i==="Home")b=1,w=(l,d)=>d;else if(i==="End")b=-1,w=()=>0;else if(e.parentElement!==null&&(t.modifiers.vertical===!0&&t.modifiers.horizontal!==!0&&(i==="ArrowLeft"||i==="ArrowRight")||t.modifiers.horizontal===!0&&t.modifiers.vertical!==!0&&(i==="ArrowUp"||i==="ArrowDown"))){const l=e.parentElement.closest(t.modifiers.vertical===!0?r.datasetNameSelectorRovingHorizontal:r.datasetNameSelectorRovingVertical);l!==null&&($=l,n.__vKbdTrap=void 0,i===(V(T,e)===!0?"ArrowRight":"ArrowLeft")||i==="ArrowUp"?(b=1,w=(d,N)=>N):(b=-1,w=()=>0))}else(t.modifiers.vertical===!0||t.modifiers.horizontal!==!0)&&(i==="ArrowUp"?(b=-1,y="v"):i==="ArrowDown"&&(b=1,y="v")),(t.modifiers.vertical!==!0||t.modifiers.horizontal===!0)&&(i==="ArrowLeft"?(b=-1,y="h"):i==="ArrowRight"&&(b=1,y="h"),b!==0&&y==="h"&&V(T,e)===!0&&(b*=-1))}else i==="Tab"&&(b=z===!0?-1:1);if(b===0)return;$===!1?n.preventDefault():(t.focusTarget=T,t.focusTarget.dataset[r.datasetNamePreventRefocus]="",requestAnimationFrame(()=>{t.focusTarget&&delete t.focusTarget.dataset[r.datasetNamePreventRefocus]}));let p=[];if(y!==!1){let c;if(t.modifiers.grid===!0){const l=j(T.dataset[r.datasetNameRow]),d=j(T.dataset[r.datasetNameCol]),N=y==="v"?r.datasetNameColSelector(d):r.datasetNameRowSelector(l);p=Array.from(e.querySelectorAll(N)),c=new WeakMap(p.map(E=>{const A=j(E.dataset[r.datasetNameRow]),R=j(E.dataset[r.datasetNameCol]);let L;return y==="v"?(A!==l||R===d)&&(L=1e3*A+1*R):(R!==d||A===l)&&(L=1e3*R+1*A),[E,L]}))}else if(e.matches('[role="grid"]')===!0&&T.matches('[role="row"] [role="gridcell"]')){const l=Array.from(e.querySelectorAll('[role="row"]')),d=new WeakMap,N=l.map((P,O)=>{const k=Array.from(P.querySelectorAll('[role="gridcell"]'));return k.forEach((F,Y)=>{d.set(F,[O+1,Y+1])}),k}),E=T.closest('[role="row"]'),A=l.indexOf(E)+1,R=N[A-1].indexOf(T)+1,{focusableSelector:L}=r;p=Array.from(e.querySelectorAll(L)),c=new WeakMap(p.map(P=>{const[O,k]=d.get(P)||[null,null];let F;return y==="v"?k===R&&(F=1*O):O===A&&(F=1*k),[P,F]}))}c!==void 0&&(p=p.filter(l=>c.get(l)!==void 0),p.sort((l,d)=>c.get(l)-c.get(d)))}if(p.length===0){const{focusableSelector:c}=r;if(p=Array.from(e.querySelectorAll(c)),g.indexorder===!0){const l=new WeakMap(p.map(d=>[d,Math.max(d.tabIndex||0,0)]));p.sort((d,N)=>l.get(d)-l.get(N))}e.matches(c)&&p.unshift(e)}const I=p.length-1;let K=w(p.indexOf(T),I);for(let c=0;c<I;c+=1)if(K+=b,K<0?K=I:K>I&&(K=0),x(p[K])===!0){$!==!1&&u($===!0?null:$);return}},overwiteFocusTarget(n){t.disable===!1&&n.__vKbdTrap!==!0&&(n.__vKbdTrap=!0,t.focusTarget=n.target)},refocus(n){return t.disable===!1&&v===e&&t.focusTarget&&t.focusTarget.closest(r.datasetNameSelector)===e?t.focusTarget.tabIndex===r.trapTabIndex?t.modifiers.autofocus===!0&&x(e.querySelector(r.autofocusSelector))===!0||x(e.querySelector(r.focusableSelector))===!0||x(t.focusTarget)===!0:n===!0?!1:x(t.focusTarget)===!0||x(e.querySelector(r.focusableSelector))===!0:!1},autofocus(){requestAnimationFrame(()=>{t.disable===!1&&x(e.querySelector(r.autofocusSelector),M)===!1&&x(e.querySelector(r.focusableSelector),M)})}};t.bind(),g.autofocus===!0&&t.autofocus()},q=(e,{value:m,modifiers:g})=>{const t=s(e);if(t!==null){const n=m===!1;t.modifiers=g,f(e,n,t),v===e&&(n===!0?u(null):e.dataset[r.datasetNameActive]=""),t.disable!==n&&(t.disable=n,g.autofocus===!0&&t.autofocus())}else a!==void 0?S(e,{value:m,modifiers:g}):v===e&&u(null)},h=e=>{const m=s(e);m!==null&&m.unbind(),v===e&&u(null)};return a!==void 0?a({name:r.name,directive:{beforeMount:S,updated:q,unmounted:h,getSSRProps(){}}}):{name:r.name,directive:{bind:S,update:q,unbind:h}}}const{markRaw:U}=H,Q={install(o,a){const{name:r,directive:u}=D(a,U);o.directive(r,u)}},X=o=>D(o,U);_.VueKeyboardTrapDirectiveFactory=X,_.VueKeyboardTrapDirectivePlugin=Q,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(_,C){typeof exports=="object"&&typeof module<"u"?C(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],C):(_=typeof globalThis<"u"?globalThis:_||self,C(_.VueKeyboardTrap={},_.Vue))})(this,function(_,C){"use strict";function W(o){if(o&&o.__esModule)return o;var a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return o&&Object.keys(o).forEach(function(r){if(r!=="default"){var u=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(a,r,u.get?u:{enumerable:!0,get:function(){return o[r]}})}}),a.default=o,Object.freeze(a)}var H=W(C);function B(o){const a={name:"kbd-trap",focusableSelector:[":focus",'a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"]):not([contenteditable="false"])','[class*="focusable"]:not([disabled]):not([tabindex^="-"])'].join(","),rovingSkipSelector:['input:not([disabled]):not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"])',"select:not([disabled])","select:not([disabled]) *","textarea:not([disabled])",'[contenteditable]:not([contenteditable="false"])','[contenteditable]:not([contenteditable="false"]) *'].join(","),gridSkipSelector:[":not([disabled])",':not([tabindex^="-"])'].join(""),autofocusSelector:['[autofocus]:not([disabled]):not([autofocus="false"])','[data-autofocus]:not([disabled]):not([data-autofocus="false"])'].join(","),trapTabIndex:-9999,...o},r=a.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter(f=>f.length>0).map(f=>`${f[0].toLocaleUpperCase()}${f.slice(1)}`).join("");if(a.datasetName===void 0&&(a.datasetName=`v${r}`),a.datasetNameActive=`${a.datasetName}Active`,a.datasetNamePreventRefocus=`${a.datasetName}PreventRefocus`,typeof window>"u")return a;const u=document.createElement("span");u.dataset[a.datasetName]="";const s=u.getAttributeNames()[0];return a.datasetNameSelector=`[${s}]`,a.datasetNameSelectorRovingHorizontal=`[${s}~="roving"][${s}~="horizontal"],[${s}~="roving"]:not([${s}~="vertical"])`,a.datasetNameSelectorRovingVertical=`[${s}~="roving"][${s}~="vertical"],[${s}~="roving"]:not([${s}~="horizontal"])`,a.datasetNameRow=`${a.datasetName}Row`,a.datasetNameRowSelector=f=>`:focus,[${s}-row~="${f}"]${a.gridSkipSelector},[${s}-row~="*"]${a.gridSkipSelector}`,a.datasetNameCol=`${a.datasetName}Col`,a.datasetNameColSelector=f=>`:focus,[${s}-col~="${f}"]${a.gridSkipSelector},[${s}-col~="*"]${a.gridSkipSelector}`,a}function G(){return!0}function M(o,a=!1){const{left:r,top:u}=o.getBoundingClientRect(),s=document.elementFromPoint(r,u);if(s===null&&a!==!0&&typeof o.scrollIntoView=="function"){const f=[];let S=o.parentElement;for(;S!==null;)f.push([S,S.scrollLeft,S.scrollTop]),S=S.parentElement;o.scrollIntoView();const q=M(o,!0);for(let h=f.length-1;h>=0;h-=1){const[e,m,g]=f[h];e.scrollLeft=m,e.scrollTop=g}return q}return s===null||o.contains(s)===!0}function x(o,a=G){return o===null||typeof o.focus!="function"||a(o)!==!0?!1:(o.focus(),o===document.activeElement)}const J=/(\d+)/;function j(o){const a=J.exec(o);return a===null?"":a[1]}function V(o,a){const r=(o&&o!==a&&o.parentElement||a).closest('[dir="rtl"],[dir="ltr"]');return r&&r.matches('[dir="rtl"]')}let v=null;function D(o,a){const r=B(o),u=e=>{v!==e&&(e!==null&&(e.dataset[r.datasetNameActive]="",e.__vKbdTrapActiveClean=()=>{delete e.dataset[r.datasetNameActive],e.__vKbdTrapActiveClean=void 0}),v!==null&&typeof v.__vKbdTrapActiveClean=="function"&&v.__vKbdTrapActiveClean(),v=e)},s=e=>{const m=(e||{}).__vKbdTrap;return m===Object(m)?m:null},f=(e,m,g)=>{m===!0?(delete e.dataset[r.datasetName],e.tabIndex===r.trapTabIndex&&e.removeAttribute("tabindex")):(e.dataset[r.datasetName]=Object.keys(g.modifiers).filter(t=>g.modifiers[t]===!0).join(" "),e.tabIndex<0&&e.getAttribute("tabindex")===null&&(e.tabIndex=r.trapTabIndex))},S=(e,{value:m,modifiers:g})=>{const t={disable:m===!1,modifiers:g,focusTarget:null,relatedFocusTarget:null,bind(){e.__vKbdTrap=t,e.addEventListener("keydown",t.trap),e.addEventListener("focusin",t.activate),e.addEventListener("focusout",t.deactivate),e.addEventListener("pointerdown",t.overwiteFocusTarget,{passive:!0}),t.disable===!1&&f(e,t.disable,t)},unbind(){delete e.__vKbdTrap,e.removeEventListener("keydown",t.trap),e.removeEventListener("focusin",t.activate),e.removeEventListener("focusout",t.deactivate),e.removeEventListener("pointerdown",t.overwiteFocusTarget),f(e,!0,t)},activate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v!==e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(u(e),t.relatedFocusTarget=i,(i===null||i.dataset[r.datasetNamePreventRefocus]===void 0||e.contains(i)===!1)&&requestAnimationFrame(()=>{t.refocus(t.modifiers.roving!==!0)}))},deactivate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v===e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(t.focusTarget=n.target,u(null))},trap(n){if(t.disable===!0||n.__vKbdTrap===!0)return;const{code:i,shiftKey:z}=n,{activeElement:T}=document;if(i==="Escape"){if(n.__vKbdTrap=!0,v===e){if(t.focusTarget=T,t.modifiers.escexits===!0){u(e.parentElement===null?null:e.parentElement.closest(r.datasetNameSelector));const c=s(v);c!==null&&c.refocus();return}if(t.modifiers.escrefocus===!0&&x(t.relatedFocusTarget)===!0)return;u(null)}else u(e);return}if(v!==e)return;n.__vKbdTrap=!0;let b=0,w=c=>c,$=!1,y=!1;if(t.modifiers.roving===!0){const c=T.matches(r.rovingSkipSelector);if(i!=="Tab"&&c===!0)return;if(i==="Tab")c===!1&&t.modifiers.tabinside!==!0?($=!0,z===!0?(b=1,w=(l,d)=>d):(b=-1,w=()=>0)):b=z===!0?-1:1;else if(i==="Home")b=1,w=(l,d)=>d;else if(i==="End")b=-1,w=()=>0;else if(e.parentElement!==null&&(t.modifiers.vertical===!0&&t.modifiers.horizontal!==!0&&(i==="ArrowLeft"||i==="ArrowRight")||t.modifiers.horizontal===!0&&t.modifiers.vertical!==!0&&(i==="ArrowUp"||i==="ArrowDown"))){const l=e.parentElement.closest(t.modifiers.vertical===!0?r.datasetNameSelectorRovingHorizontal:r.datasetNameSelectorRovingVertical);l!==null&&($=l,n.__vKbdTrap=void 0,i===(V(T,e)===!0?"ArrowRight":"ArrowLeft")||i==="ArrowUp"?(b=1,w=(d,N)=>N):(b=-1,w=()=>0))}else(t.modifiers.vertical===!0||t.modifiers.horizontal!==!0)&&(i==="ArrowUp"?(b=-1,y="v"):i==="ArrowDown"&&(b=1,y="v")),(t.modifiers.vertical!==!0||t.modifiers.horizontal===!0)&&(i==="ArrowLeft"?(b=-1,y="h"):i==="ArrowRight"&&(b=1,y="h"),b!==0&&y==="h"&&V(T,e)===!0&&(b*=-1))}else i==="Tab"&&(b=z===!0?-1:1);if(b===0)return;$===!1?n.preventDefault():(t.focusTarget=T,t.focusTarget.dataset[r.datasetNamePreventRefocus]="",requestAnimationFrame(()=>{t.focusTarget&&delete t.focusTarget.dataset[r.datasetNamePreventRefocus]}));let p=[];if(y!==!1){let c;if(t.modifiers.grid===!0){const l=j(T.dataset[r.datasetNameRow]),d=j(T.dataset[r.datasetNameCol]),N=y==="v"?r.datasetNameColSelector(d):r.datasetNameRowSelector(l);p=Array.from(e.querySelectorAll(N)),c=new WeakMap(p.map(E=>{const A=j(E.dataset[r.datasetNameRow]),R=j(E.dataset[r.datasetNameCol]);let L;return y==="v"?(A!==l||R===d)&&(L=1e3*A+1*R):(R!==d||A===l)&&(L=1e3*R+1*A),[E,L]}))}else if(e.matches('[role="grid"]')===!0&&T.matches('[role="row"] [role="gridcell"]')){const l=Array.from(e.querySelectorAll('[role="row"]')),d=new WeakMap,N=l.map((P,O)=>{const k=Array.from(P.querySelectorAll('[role="gridcell"]'));return k.forEach((F,Y)=>{d.set(F,[O+1,Y+1])}),k}),E=T.closest('[role="row"]'),A=l.indexOf(E)+1,R=N[A-1].indexOf(T)+1,{focusableSelector:L}=r;p=Array.from(e.querySelectorAll(L)),c=new WeakMap(p.map(P=>{const[O,k]=d.get(P)||[null,null];let F;return y==="v"?k===R&&(F=1*O):O===A&&(F=1*k),[P,F]}))}c!==void 0&&(p=p.filter(l=>c.get(l)!==void 0),p.sort((l,d)=>c.get(l)-c.get(d)))}if(p.length===0){const{focusableSelector:c}=r;if(p=Array.from(e.querySelectorAll(c)),g.indexorder===!0){const l=new WeakMap(p.map(d=>[d,Math.max(d.tabIndex||0,0)]));p.sort((d,N)=>l.get(d)-l.get(N))}e.matches(c)&&p.unshift(e)}const I=p.length-1;let K=w(p.indexOf(T),I);for(let c=0;c<I;c+=1)if(K+=b,K<0?K=I:K>I&&(K=0),x(p[K])===!0){$!==!1&&u($===!0?null:$);return}},overwiteFocusTarget(n){t.disable===!1&&n.__vKbdTrap!==!0&&(n.__vKbdTrap=!0,t.focusTarget=n.target)},refocus(n){return t.disable===!1&&v===e&&t.focusTarget&&t.focusTarget.closest(r.datasetNameSelector)===e?t.focusTarget.tabIndex===r.trapTabIndex?t.modifiers.autofocus===!0&&x(e.querySelector(r.autofocusSelector))===!0||x(e.querySelector(r.focusableSelector))===!0||x(t.focusTarget)===!0:n===!0?!1:x(t.focusTarget)===!0||x(e.querySelector(r.focusableSelector))===!0:!1},autofocus(){requestAnimationFrame(()=>{t.disable===!1&&x(e.querySelector(r.autofocusSelector),M)===!1&&x(e.querySelector(r.focusableSelector),M)})}};t.bind(),g.autofocus===!0&&t.autofocus()},q=(e,{value:m,modifiers:g})=>{const t=s(e);if(t!==null){const n=m===!1;t.modifiers=g,f(e,n,t),v===e&&(n===!0?u(null):e.dataset[r.datasetNameActive]=""),t.disable!==n&&(t.disable=n,g.autofocus===!0&&t.autofocus())}else a!==void 0?S(e,{value:m,modifiers:g}):v===e&&u(null)},h=e=>{const m=s(e);m!==null&&m.unbind(),v===e&&u(null)};return a!==void 0?a({name:r.name,directive:{beforeMount:S,updated:q,unmounted:h,getSSRProps(){}}}):{name:r.name,directive:{bind:S,update:q,unbind:h}}}const{markRaw:U}=H,Q={install(o,a){const{name:r,directive:u}=D(a,U);o.directive(r,u)}},X=o=>D(o,U);_.VueKeyboardTrapDirectiveFactory=X,_.VueKeyboardTrapDirectivePlugin=Q,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@pdanpdan/vue-keyboard-trap",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Vue3 and Vue2 directive for keyboard navigation - roving movement and trapping inside container",
@@ -49,2 +49,3 @@ "productName": "Vue Keyboard Trap",
     },
+    "./styles/css": "./dist/styles/index.css",
     "./styles": "./dist/styles/index.sass",
@@ -51,0 +52,0 @@ "./types": "./dist/types/index.d.ts"

README.md

@@ -40,3 +40,3 @@ # VueKeyboardTrap (vue-keyboard-trap)
 
-Can be globally registered on the App (plugin mode)
+Use as plugin on Vue3
 ```javascript{2,7-9}
@@ -56,3 +56,18 @@ import { createApp } from 'vue';
 
-or included in specific components (script)
+or as plugin on Vue2
+```javascript{2,5-7}
+import Vue from 'vue';
+import { VueKeyboardTrapDirectivePlugin } from '@pdanpdan/vue-keyboard-trap';
+import App from './App.vue';
+
+Vue.use(VueKeyboardTrapDirectivePlugin, {
+  // ...options if required
+});
+
+new Vue({
+  el: '#app',
+});
+```
+
+or included in specific components (Vue3 script)
 ```html{3,5-7,10-12}
@@ -75,4 +90,4 @@ <script>
 
-or included in specific components (script setup)
-```html{2-6}
+or included in specific components (Vue3 script setup)
+```html{2,4-6}
 <script setup>
@@ -87,4 +102,22 @@ import { VueKeyboardTrapDirectiveFactory } from '@pdanpdan/vue-keyboard-trap';
 
+or included in specific components (Vue2)
+```html{2,4-6,9-11}
+<script>
+  import { VueKeyboardTrapDirectiveFactory } from '@pdanpdan/vue-keyboard-trap';
+
+  const KbdTrap = VueKeyboardTrapDirectiveFactory({
+    // ...options if required
+  }).directive;
+
+  export default {
+    directives: {
+      KbdTrap,
+    },
+  };
+</script>
+```
+
 The directive does not require any CSS styles to work, but for cosmetic purposes (as user hints) some example styles are provided in `dist/styles/index.sass`.
 
+in Javascript
 ```javascript
@@ -94,4 +127,10 @@ import '@pdanpdan/vue-keyboard-trap/styles';
 
+or in SASS
+```sass
+@import '@pdanpdan/vue-keyboard-trap/styles'
+```
+
 or (if the `/styles` export is not used by your bundler)
 
+in Javascript
 ```javascript
@@ -101,2 +140,7 @@ import '@pdanpdan/vue-keyboard-trap/dist/styles/index.sass';
 
+or in SASS
+```sass
+@import '@pdanpdan/vue-keyboard-trap/dist/styles/index.sass'
+```
+
 ### Usage as UMD
@@ -108,3 +152,3 @@
 
-Use as plugin
+Use as plugin on Vue3
 ```javascript{2,6-8}
@@ -120,6 +164,19 @@ const { createApp } = Vue;
 
-app.mount('#q-app');
+app.mount('#app');
 ```
 
-or as directive
+or as plugin on Vue2
+```javascript{1,3-5}
+const { VueKeyboardTrapDirectivePlugin } = VueKeyboardTrap;
+
+Vue.use(VueKeyboardTrapDirectivePlugin, {
+  // ...options if required
+});
+
+new Vue({
+  el: '#app',
+});
+```
+
+or as directive on Vue3
 ```javascript{2,6-8,10}
@@ -137,5 +194,16 @@ const { createApp } = Vue;
 
-app.mount('#q-app');
+app.mount('#app');
 ```
 
+or as directive on Vue2
+```javascript{1,3-5,7}
+const { VueKeyboardTrapDirectiveFactory } = VueKeyboardTrap;
+
+const { name, directive } = VueKeyboardTrapDirectiveFactory({
+  // ...options if required
+});
+
+Vue.directive(name, directive);
+```
+
 If you want you can access the SASS cosmetic style (user hints) from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass).
@@ -282,3 +350,3 @@
 
-A default style is provided in `dist/styles/index.sass` (can be imported as `import from '@pdapdan/vue-keyboard-trap/styles'`, as `import from '@pdapdan/vue-keyboard-trap/dist/styles/index.sass'` (if the bundler does not use the `/styles` export) or included from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass)).
+A default style is provided in `dist/styles/index.sass` (can be imported as `import '@pdapdan/vue-keyboard-trap/styles'`, as `import '@pdapdan/vue-keyboard-trap/dist/styles/index.sass'` (if the bundler does not use the `/styles` export) or included from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass)).
 
@@ -285,0 +353,0 @@ There are some CSS variables that can be used to customize the aspect of the hints:

src/directives/keyboard-trap/directive.js

@@ -182,15 +182,19 @@ import { createConfig } from './options';
 
-            setActiveTrapEl(el.parentElement === null ? null : el.parentElement.closest(config.datasetNameSelector));
+            if (ctx.modifiers.escexits === true) {
+              setActiveTrapEl(el.parentElement === null ? null : el.parentElement.closest(config.datasetNameSelector));
 
-            if (ctx.modifiers.escexits === true) {
               const newCtx = getCtx(activeTrapEl);
 
-              if (newCtx !== null && newCtx.refocus() === true) {
-                return;
+              if (newCtx !== null) {
+                newCtx.refocus();
               }
+
+              return;
             }
 
-            if (ctx.modifiers.escrefocus === true) {
-              focus(ctx.relatedFocusTarget);
+            if (ctx.modifiers.escrefocus === true && focus(ctx.relatedFocusTarget) === true) {
+              return;
             }
+
+            setActiveTrapEl(null);
           } else {
@@ -197,0 +201,0 @@ setActiveTrapEl(el);

No alert changes

Improved metrics

Total package byte prevSize

199217

increased by3.41%

Number of package files

23

increased by9.52%

Lines of code

1487

increased by9.1%

Number of lines in readme file

408

increased by20%

No dependency changes