primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 7.61 kB
JavaScript
import e from"primevue/ripple";import{DomHandler as t}from"primevue/utils";import{mergeProps as i,resolveComponent as n,resolveDirective as a,openBlock as l,createElementBlock as s,createElementVNode as r,Fragment as o,renderList as c,createBlock as d,withCtx as u,withDirectives as m,resolveDynamicComponent as f,normalizeClass as b,createCommentVNode as p,toDisplayString as h}from"vue";import v from"primevue/basecomponent";import g from"primevue/tabmenu/style";var x={name:"TabMenu",extends:{name:"BaseTabMenu",extends:v,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}},style:g,provide:function(){return{$parentInstance:this}}},emits:["update:activeIndex","tab-change"],timeout:null,data:function(){return{d_activeIndex:this.activeIndex}},watch:{$route:function(){var e=this;this.timeout=setTimeout((function(){return e.updateInkBar()}),50)},activeIndex:function(e){this.d_activeIndex=e}},beforeMount:function(){this.$slots.item||console.warn("In future versions, vue-router support will be removed. Item templating should be used.")},mounted:function(){this.updateInkBar();var e=this.findActiveItem();e&&(e.tabIndex="0")},updated:function(){this.updateInkBar()},beforeUnmount:function(){clearTimeout(this.timeout)},methods:{getPTOptions:function(e,t,i){return this.ptm(e,{context:{item:t,index:i}})},onItemClick:function(e,t,i,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e),i!==this.d_activeIndex&&(this.d_activeIndex=i,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:i}))},onKeydownItem:function(e,t,i,n){switch(e.code){case"ArrowRight":this.navigateToNextItem(e.target),e.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(e.target),e.preventDefault();break;case"Home":this.navigateToFirstItem(e.target),e.preventDefault();break;case"End":this.navigateToLastItem(e.target),e.preventDefault();break;case"Space":case"Enter":this.onItemClick(e,t,i,n),e.preventDefault();break;case"Tab":this.onTabKey()}},navigateToNextItem:function(e){var t=this.findNextItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToPrevItem:function(e){var t=this.findPrevItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToFirstItem:function(e){var t=this.findFirstItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToLastItem:function(e){var t=this.findLastItem(e);t&&this.setFocusToMenuitem(e,t)},findNextItem:function(e){var i=e.parentElement.nextElementSibling;return i?!0===t.getAttribute(i,"data-p-disabled")?this.findNextItem(i.children[0]):i.children[0]:null},findPrevItem:function(e){var i=e.parentElement.previousElementSibling;return i?!0===t.getAttribute(i,"data-p-disabled")?this.findPrevItem(i.children[0]):i.children[0]:null},findFirstItem:function(){var e=t.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},findLastItem:function(){var e=t.find(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e[e.length-1].children[0]:null},findActiveItem:function(){var e=t.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');return e?e.children[0]:null},setFocusToMenuitem:function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},onTabKey:function(){var e=t.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),i=t.findSingle(this.$refs.nav,'[data-pc-section="action"][tabindex="0"]');i!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),i.tabIndex="-1")},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():!0===e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},updateInkBar:function(){for(var e=this.$refs.nav.children,i=!1,n=0;n<e.length;n++){var a=e[n];t.getAttribute(a,"data-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",i=!0)}i||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")},getMenuItemProps:function(e,t){var n=this;return{action:i({class:this.cx("action"),tabindex:-1,onClick:function(i){return n.onItemClick(i,e,t)},onKeyDown:function(i){return n.onKeydownItem(i,e,t)}},this.getPTOptions("action",e,t)),icon:i({class:[this.cx("icon"),e.icon]},this.getPTOptions("icon",e,t)),label:i({class:this.cx("label")},this.getPTOptions("label",e,t))}}},directives:{ripple:e}},I=["aria-labelledby","aria-label"],y=["data-p-highlight","data-p-disabled"],k=["href","aria-label","aria-disabled","onClick","onKeydown"],T=["onClick","onKeydown","data-p-highlight","data-p-disabled"],$=["href","target","aria-label","aria-disabled"];x.render=function(e,t,v,g,x,P){var w=n("router-link"),O=a("ripple");return l(),s("div",i({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabmenu"}),[r("ul",i({ref:"nav",class:e.cx("menu"),role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(l(!0),s(o,null,c(e.model,(function(t,n){return l(),s(o,{key:P.label(t)+"_"+n.toString()},[t.to&&!P.disabled(t)?(l(),d(w,{key:0,to:t.to,custom:""},{default:u((function(a){var o=a.navigate,c=a.href,u=a.isActive,v=a.isExactActive;return[P.visible(t)?(l(),s("li",i({key:0,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,isActive:u,isExactActive:v}),t.class],style:t.style,role:"presentation"},P.getPTOptions("menuitem",t,n),{"data-p-highlight":e.exact?v:u,"data-p-disabled":P.disabled(t)}),[e.$slots.item?(l(),d(f(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):m((l(),s("a",i({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:c,class:e.cx("action"),"aria-label":P.label(t),"aria-disabled":P.disabled(t),tabindex:-1,onClick:function(e){return P.onItemClick(e,t,n,o)},onKeydown:function(e){return P.onKeydownItem(e,t,n,o)}},P.getPTOptions("action",t,n)),[e.$slots.itemicon?(l(),d(f(e.$slots.itemicon),{key:0,item:t,class:b([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(l(),s("span",i({key:1,class:[e.cx("icon"),t.icon]},P.getPTOptions("icon",t,n)),null,16)):p("",!0),r("span",i({class:e.cx("label")},P.getPTOptions("label",t,n)),h(P.label(t)),17)],16,k)),[[O]])],16,y)):p("",!0)]})),_:2},1032,["to"])):P.visible(t)?(l(),s("li",i({key:1,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,index:n}),t.class],role:"presentation",onClick:function(e){return P.onItemClick(e,t,n)},onKeydown:function(e){return P.onKeydownItem(e,t,n)}},P.getPTOptions("menuitem",t,n),{"data-p-highlight":x.d_activeIndex===n,"data-p-disabled":P.disabled(t)}),[e.$slots.item?(l(),d(f(e.$slots.item),{key:1,item:t,index:n,label:P.label(t),props:P.getMenuItemProps(t,n)},null,8,["item","index","label","props"])):m((l(),s("a",i({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:e.cx("action"),target:t.target,"aria-label":P.label(t),"aria-disabled":P.disabled(t),tabindex:-1},P.getPTOptions("action",t,n)),[e.$slots.itemicon?(l(),d(f(e.$slots.itemicon),{key:0,item:t,class:b([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(l(),s("span",i({key:1,class:[e.cx("icon"),t.icon]},P.getPTOptions("icon",t,n)),null,16)):p("",!0),r("span",i({class:e.cx("label")},P.getPTOptions("label",t,n)),h(P.label(t)),17)],16,$)),[[O]])],16,T)):p("",!0)],64)})),128)),r("li",i({ref:"inkbar",role:"none",class:e.cx("inkbar")},e.ptm("inkbar")),null,16)],16,I)],16)};export{x as default};