primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
2 lines (1 loc) • 3.67 kB
JavaScript
import{DomHandler as e,ObjectUtils as t}from"primevue/utils";import o from"primevue/basedirective";import s from"primevue/focustrap/style";var n=o.extend({style:s}).extend("focustrap",{mounted:function(e,t){(t.value||{}).disabled||(this.createHiddenFocusableElements(e,t),this.bind(e,t),this.autoFocus(e,t)),e.setAttribute("data-pd-focustrap",!0),this.$el=e},updated:function(e,t){(t.value||{}).disabled&&this.unbind(e)},unmounted:function(e){this.unbind(e)},methods:{getComputedSelector:function(e){return':not(.p-hidden-focusable):not([data-p-hidden-focusable="true"])'.concat(null!=e?e:"")},bind:function(o,s){var n=this,u=s.value||{},c=u.onFocusIn,i=u.onFocusOut;o.$_pfocustrap_mutationobserver=new MutationObserver((function(s){s.forEach((function(s){if("childList"===s.type&&!o.contains(document.activeElement)){e.focus(function s(u){var c=e.isFocusableElement(u)?e.isFocusableElement(u,n.getComputedSelector(o.$_pfocustrap_focusableselector))?u:e.getFirstFocusableElement(o,n.getComputedSelector(o.$_pfocustrap_focusableselector)):e.getFirstFocusableElement(u);return t.isNotEmpty(c)?c:u.nextSibling&&s(u.nextSibling)}(s.nextSibling))}}))})),o.$_pfocustrap_mutationobserver.disconnect(),o.$_pfocustrap_mutationobserver.observe(o,{childList:!0}),o.$_pfocustrap_focusinlistener=function(e){return c&&c(e)},o.$_pfocustrap_focusoutlistener=function(e){return i&&i(e)},o.addEventListener("focusin",o.$_pfocustrap_focusinlistener),o.addEventListener("focusout",o.$_pfocustrap_focusoutlistener)},unbind:function(e){e.$_pfocustrap_mutationobserver&&e.$_pfocustrap_mutationobserver.disconnect(),e.$_pfocustrap_focusinlistener&&e.removeEventListener("focusin",e.$_pfocustrap_focusinlistener)&&(e.$_pfocustrap_focusinlistener=null),e.$_pfocustrap_focusoutlistener&&e.removeEventListener("focusout",e.$_pfocustrap_focusoutlistener)&&(e.$_pfocustrap_focusoutlistener=null)},autoFocus:function(t,o){var s=o.value||{},n=s.autoFocusSelector,u=s.firstFocusableSelector,c=void 0===u?"":u,i=s.autoFocus,r=void 0!==i&&i,a=e.getFirstFocusableElement(t,"[autofocus]".concat(this.getComputedSelector(void 0===n?"":n)));r&&!a&&(a=e.getFirstFocusableElement(t,this.getComputedSelector(c))),e.focus(a)},onFirstHiddenElementFocus:function(t){var o,s=t.currentTarget,n=t.relatedTarget,u=n!==s.$_pfocustrap_lasthiddenfocusableelement&&null!==(o=this.$el)&&void 0!==o&&o.contains(n)?s.$_pfocustrap_lasthiddenfocusableelement:e.getFirstFocusableElement(s.parentElement,this.getComputedSelector(s.$_pfocustrap_focusableselector));e.focus(u)},onLastHiddenElementFocus:function(t){var o,s=t.currentTarget,n=t.relatedTarget,u=n!==s.$_pfocustrap_firsthiddenfocusableelement&&null!==(o=this.$el)&&void 0!==o&&o.contains(n)?s.$_pfocustrap_firsthiddenfocusableelement:e.getLastFocusableElement(s.parentElement,this.getComputedSelector(s.$_pfocustrap_focusableselector));e.focus(u)},createHiddenFocusableElements:function(t,o){var s=this,n=o.value||{},u=n.tabIndex,c=void 0===u?0:u,i=n.firstFocusableSelector,r=void 0===i?"":i,a=n.lastFocusableSelector,l=void 0===a?"":a,d=function(t){return e.createElement("span",{class:"p-hidden-accessible p-hidden-focusable",tabIndex:c,role:"presentation","aria-hidden":!0,"data-p-hidden-accessible":!0,"data-p-hidden-focusable":!0,onFocus:null==t?void 0:t.bind(s)})},f=d(this.onFirstHiddenElementFocus),p=d(this.onLastHiddenElementFocus);f.$_pfocustrap_lasthiddenfocusableelement=p,f.$_pfocustrap_focusableselector=r,f.setAttribute("data-pc-section","firstfocusableelement"),p.$_pfocustrap_firsthiddenfocusableelement=f,p.$_pfocustrap_focusableselector=l,p.setAttribute("data-pc-section","lastfocusableelement"),t.prepend(f),t.append(p)}}});export{n as default};