primevue/tabmenu/tabmenu.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import e from"primevue/ripple";import{DomHandler as t}from"primevue/utils";import{resolveComponent as n,resolveDirective as i,openBlock as a,createElementBlock as l,createElementVNode as s,Fragment as r,renderList as d,createBlock as o,withCtx as m,normalizeClass as c,normalizeStyle as u,withDirectives as b,resolveDynamicComponent as p,createCommentVNode as f,toDisplayString as h}from"vue";var x={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{onItemClick(e,t,n,i){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&i&&i(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let i=n,a={};const l=this.$refs.tabLink;switch(e.code){case"ArrowRight":a=this.findNextItem(this.$refs.tab,i),i=a.i;break;case"ArrowLeft":a=this.findPrevItem(this.$refs.tab,i),i=a.i;break;case"End":a=this.findPrevItem(this.$refs.tab,this.model.length),i=a.i,e.preventDefault();break;case"Home":a=this.findNextItem(this.$refs.tab,-1),i=a.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(l)}l[i]&&l[n]&&(l[n].tabIndex="-1",l[i].tabIndex="0",l[i].focus())},findNextItem(e,n){let i=n+1;if(i>=e.length)return{nextItem:e[e.length],i:e.length};let a=e[i];return a?t.hasClass(a,"p-disabled")?this.findNextItem(e,i):{nextItem:a,i:i}:null},findPrevItem(e,n){let i=n-1;if(i<0)return{nextItem:e[0],i:0};let a=e[i];return a?t.hasClass(a,"p-disabled")?this.findPrevItem(e,i):{prevItem:a,i:i}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=t.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,n=!1;for(let i=0;i<e.length;i++){let a=e[i];t.hasClass(a,"p-highlight")&&(this.$refs.inkbar.style.width=t.getWidth(a)+"px",this.$refs.inkbar.style.left=t.getOffset(a).left-t.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:e}};const I={class:"p-tabmenu p-component"},v=["aria-labelledby","aria-label"],y=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],g={class:"p-menuitem-text"},k=["onClick","onKeydown"],$=["href","target","aria-label","aria-disabled","tabindex"],C={class:"p-menuitem-text"},w={ref:"inkbar",role:"none",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),x.render=function(e,t,x,T,_,E){const B=n("router-link"),K=i("ripple");return a(),l("div",I,[s("ul",{ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},[(a(!0),l(r,null,d(x.model,((t,n)=>(a(),l(r,{key:E.label(t)+"_"+n.toString()},[t.to&&!E.disabled(t)?(a(),o(B,{key:0,to:t.to,custom:""},{default:m((({navigate:i,href:r,isActive:d,isExactActive:m})=>[E.visible(t)?(a(),l("li",{key:0,ref_for:!0,ref:"tab",class:c(E.getRouteItemClass(t,d,m)),style:u(t.style),role:"presentation"},[e.$slots.item?(a(),o(p(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):b((a(),l("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:r,class:"p-menuitem-link","aria-label":E.label(t),"aria-disabled":E.disabled(t),tabindex:m?"0":"-1",onClick:e=>E.onItemClick(e,t,n,i),onKeydown:e=>E.onKeydownItem(e,t,n,i)},[e.$slots.itemicon?(a(),o(p(e.$slots.itemicon),{key:0,item:t,class:c(E.getItemIcon(t))},null,8,["item","class"])):t.icon?(a(),l("span",{key:1,class:c(E.getItemIcon(t))},null,2)):f("",!0),s("span",g,h(E.label(t)),1)],40,y)),[[K]])],6)):f("",!0)])),_:2},1032,["to"])):E.visible(t)?(a(),l("li",{key:1,ref_for:!0,ref:"tab",class:c(E.getItemClass(t,n)),role:"presentation",onClick:e=>E.onItemClick(e,t,n),onKeydown:e=>E.onKeydownItem(e,t,n)},[e.$slots.item?(a(),o(p(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):b((a(),l("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":E.label(t),"aria-disabled":E.disabled(t),tabindex:E.setTabIndex(n)},[e.$slots.itemicon?(a(),o(p(e.$slots.itemicon),{key:0,item:t,class:c(E.getItemIcon(t))},null,8,["item","class"])):t.icon?(a(),l("span",{key:1,class:c(E.getItemIcon(t))},null,2)):f("",!0),s("span",C,h(E.label(t)),1)],8,$)),[[K]])],42,k)):f("",!0)],64)))),128)),s("li",w,null,512)],8,v)])};export{x as default};