accessibleprimevue/tabview/tabview.esm.min.js

Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+

import t from"primevue/icons/chevronleft";import e from"primevue/icons/chevronright";import n from"primevue/ripple";import{UniqueComponentId as i,DomHandler as a}from"primevue/utils";import{mergeProps as r,resolveDirective as o,openBlock as c,createElementBlock as s,createElementVNode as l,withDirectives as d,renderSlot as u,createBlock as p,resolveDynamicComponent as b,createCommentVNode as h,Fragment as f,renderList as v,toDisplayString as g,vShow as y}from"vue";import m from"primevue/basecomponent";import x from"primevue/tabview/style";var T={name:"TabView",extends:{name:"BaseTabView",extends:m,props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null},prevIcon:{type:String,default:void 0},nextIcon:{type:String,default:void 0}},style:x,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:activeIndex","tab-change","tab-click"],data:function(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{"$attrs.id":function(t){this.id=t||i()},activeIndex:function(t){this.d_activeIndex=t,this.scrollInView({index:t})}},mounted:function(){this.id=this.id||i(),this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated:function(){this.updateInkBar(),this.scrollable&&this.updateButtonState()},methods:{isTabPanel:function(t){return"TabPanel"===t.type.name},isTabActive:function(t){return this.d_activeIndex===t},getTabProp:function(t,e){return t.props?t.props[e]:void 0},getKey:function(t,e){return this.getTabProp(t,"header")||e},getTabHeaderActionId:function(t){return"".concat(this.id,"_").concat(t,"_header_action")},getTabContentId:function(t){return"".concat(this.id,"_").concat(t,"_content")},getTabPT:function(t,e,n){var i=this.tabs.length,a={props:t.props,parent:{instance:this,props:this.$props,state:this.$data},context:{index:n,count:i,first:0===n,last:n===i-1,active:this.isTabActive(n)}};return r(this.ptm("tab.".concat(e),{tab:a}),this.ptm("tabpanel.".concat(e),{tabpanel:a}),this.ptm("tabpanel.".concat(e),a),this.ptmo(this.getTabProp(t,"pt"),e,a))},onScroll:function(t){this.scrollable&&this.updateButtonState(),t.preventDefault()},onPrevButtonClick:function(){var t=this.$refs.content,e=a.getWidth(t),n=t.scrollLeft-e;t.scrollLeft=n<=0?0:n},onNextButtonClick:function(){var t=this.$refs.content,e=a.getWidth(t)-this.getVisibleButtonWidths(),n=t.scrollLeft+e,i=t.scrollWidth-e;t.scrollLeft=n>=i?i:n},onTabClick:function(t,e,n){this.changeActiveIndex(t,e,n),this.$emit("tab-click",{originalEvent:t,index:n})},onTabKeyDown:function(t,e,n){switch(t.code){case"ArrowLeft":this.onTabArrowLeftKey(t);break;case"ArrowRight":this.onTabArrowRightKey(t);break;case"Home":this.onTabHomeKey(t);break;case"End":this.onTabEndKey(t);break;case"PageDown":this.onPageDownKey(t);break;case"PageUp":this.onPageUpKey(t);break;case"Enter":case"NumpadEnter":case"Space":this.onTabEnterKey(t,e,n)}},onTabArrowRightKey:function(t){var e=this.findNextHeaderAction(t.target.parentElement);e?this.changeFocusedTab(t,e):this.onTabHomeKey(t),t.preventDefault()},onTabArrowLeftKey:function(t){var e=this.findPrevHeaderAction(t.target.parentElement);e?this.changeFocusedTab(t,e):this.onTabEndKey(t),t.preventDefault()},onTabHomeKey:function(t){var e=this.findFirstHeaderAction();this.changeFocusedTab(t,e),t.preventDefault()},onTabEndKey:function(t){var e=this.findLastHeaderAction();this.changeFocusedTab(t,e),t.preventDefault()},onPageDownKey:function(t){this.scrollInView({index:this.$refs.nav.children.length-2}),t.preventDefault()},onPageUpKey:function(t){this.scrollInView({index:0}),t.preventDefault()},onTabEnterKey:function(t,e,n){this.changeActiveIndex(t,e,n),t.preventDefault()},findNextHeaderAction:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t:t.nextElementSibling;return e?a.getAttribute(e,"data-p-disabled")||"inkbar"===a.getAttribute(e,"data-pc-section")?this.findNextHeaderAction(e):a.findSingle(e,'[data-pc-section="headeraction"]'):null},findPrevHeaderAction:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t:t.previousElementSibling;return e?a.getAttribute(e,"data-p-disabled")||"inkbar"===a.getAttribute(e,"data-pc-section")?this.findPrevHeaderAction(e):a.findSingle(e,'[data-pc-section="headeraction"]'):null},findFirstHeaderAction:function(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction:function(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex:function(t,e,n){this.getTabProp(e,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:t,index:n}),this.scrollInView({index:n}))},changeFocusedTab:function(t,e){if(e&&(a.focus(e),this.scrollInView({element:e}),this.selectOnFocus)){var n=parseInt(e.parentElement.dataset.pcIndex,10);this.changeActiveIndex(t,this.tabs[n],n)}},scrollInView:function(t){var e=t.index,n=t.element||this.$refs.nav.children[void 0===e?-1:e];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar:function(){var t=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=a.getWidth(t)+"px",this.$refs.inkbar.style.left=a.getOffset(t).left-a.getOffset(this.$refs.nav).left+"px"},updateButtonState:function(){var t=this.$refs.content,e=t.scrollLeft,n=t.scrollWidth,i=a.getWidth(t);this.isPrevButtonDisabled=0===e,this.isNextButtonDisabled=parseInt(e)===n-i},getVisibleButtonWidths:function(){var t=this.$refs;return[t.prevBtn,t.nextBtn].reduce((function(t,e){return e?t+a.getWidth(e):t}),0)}},computed:{tabs:function(){var t=this;return this.$slots.default().reduce((function(e,n){return t.isTabPanel(n)?e.push(n):n.children&&n.children instanceof Array&&n.children.forEach((function(n){t.isTabPanel(n)&&e.push(n)})),e}),[])},prevButtonAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0}},directives:{ripple:n},components:{ChevronLeftIcon:t,ChevronRightIcon:e}};function P(t){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},P(t)}function I(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function A(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?I(Object(n),!0).forEach((function(e){B(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function B(t,e,n){var i;return(e="symbol"==P(i=k(e,"string"))?i:String(i))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function k(t,e){if("object"!=P(t)||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,e||"default");if("object"!=P(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}var w=["tabindex","aria-label"],C=["data-p-highlight","data-p-disabled","data-pc-index","data-p-active"],S=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],$=["tabindex","aria-label"],D=["id","aria-labelledby","data-pc-index","data-p-active"];T.render=function(t,e,n,i,a,m){var x=o("ripple");return c(),s("div",r({class:t.cx("root"),role:"tablist"},t.ptmi("root")),[l("div",r({class:t.cx("navContainer")},t.ptm("navContainer")),[t.scrollable&&!a.isPrevButtonDisabled?d((c(),s("button",r({key:0,ref:"prevBtn",type:"button",class:t.cx("previousButton"),tabindex:t.tabindex,"aria-label":m.prevButtonAriaLabel,onClick:e[0]||(e[0]=function(){return m.onPrevButtonClick&&m.onPrevButtonClick.apply(m,arguments)})},A(A({},t.previousButtonProps),t.ptm("previousButton")),{"data-pc-group-section":"navbutton"}),[u(t.$slots,"previousicon",{},(function(){return[(c(),p(b(t.prevIcon?"span":"ChevronLeftIcon"),r({"aria-hidden":"true",class:t.prevIcon},t.ptm("previousIcon")),null,16,["class"]))]}))],16,w)),[[x]]):h("",!0),l("div",r({ref:"content",class:t.cx("navContent"),onScroll:e[1]||(e[1]=function(){return m.onScroll&&m.onScroll.apply(m,arguments)})},t.ptm("navContent")),[l("ul",r({ref:"nav",class:t.cx("nav")},t.ptm("nav")),[(c(!0),s(f,null,v(m.tabs,(function(e,n){return c(),s("li",r({key:m.getKey(e,n),style:m.getTabProp(e,"headerStyle"),class:t.cx("tab.header",{tab:e,index:n}),role:"presentation"},A(A(A({},m.getTabProp(e,"headerProps")),m.getTabPT(e,"root",n)),m.getTabPT(e,"header",n)),{"data-pc-name":"tabpanel","data-p-highlight":a.d_activeIndex===n,"data-p-disabled":m.getTabProp(e,"disabled"),"data-pc-index":n,"data-p-active":a.d_activeIndex===n}),[d((c(),s("a",r({id:m.getTabHeaderActionId(n),class:t.cx("tab.headerAction"),tabindex:m.getTabProp(e,"disabled")||!m.isTabActive(n)?-1:t.tabindex,role:"tab","aria-disabled":m.getTabProp(e,"disabled"),"aria-selected":m.isTabActive(n),"aria-controls":m.getTabContentId(n),onClick:function(t){return m.onTabClick(t,e,n)},onKeydown:function(t){return m.onTabKeyDown(t,e,n)}},A(A({},m.getTabProp(e,"headerActionProps")),m.getTabPT(e,"headerAction",n))),[e.props&&e.props.header?(c(),s("span",r({key:0,class:t.cx("tab.headerTitle")},m.getTabPT(e,"headerTitle",n)),g(e.props.header),17)):h("",!0),e.children&&e.children.header?(c(),p(b(e.children.header),{key:1})):h("",!0)],16,S)),[[x]])],16,C)})),128)),l("li",r({ref:"inkbar",class:t.cx("inkbar"),role:"presentation","aria-hidden":"true"},t.ptm("inkbar")),null,16)],16)],16),t.scrollable&&!a.isNextButtonDisabled?d((c(),s("button",r({key:1,ref:"nextBtn",type:"button",class:t.cx("nextButton"),tabindex:t.tabindex,"aria-label":m.nextButtonAriaLabel,onClick:e[2]||(e[2]=function(){return m.onNextButtonClick&&m.onNextButtonClick.apply(m,arguments)})},A(A({},t.nextButtonProps),t.ptm("nextButton")),{"data-pc-group-section":"navbutton"}),[u(t.$slots,"nexticon",{},(function(){return[(c(),p(b(t.nextIcon?"span":"ChevronRightIcon"),r({"aria-hidden":"true",class:t.nextIcon},t.ptm("nextIcon")),null,16,["class"]))]}))],16,$)),[[x]]):h("",!0)],16),l("div",r({class:t.cx("panelContainer")},t.ptm("panelContainer")),[(c(!0),s(f,null,v(m.tabs,(function(e,n){return c(),s(f,{key:m.getKey(e,n)},[!t.lazy||m.isTabActive(n)?d((c(),s("div",r({key:0,id:m.getTabContentId(n),style:m.getTabProp(e,"contentStyle"),class:t.cx("tab.content",{tab:e}),role:"tabpanel","aria-labelledby":m.getTabHeaderActionId(n)},A(A(A({},m.getTabProp(e,"contentProps")),m.getTabPT(e,"root",n)),m.getTabPT(e,"content",n)),{"data-pc-name":"tabpanel","data-pc-index":n,"data-p-active":a.d_activeIndex===n}),[(c(),p(b(e)))],16,D)),[[y,!!t.lazy||m.isTabActive(n)]]):h("",!0)],64)})),128))],16)],16)};export{T as default};