primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 4 kB
JavaScript
import{DomHandler as e}from"primevue/utils";import t from"primevue/ripple";import{resolveComponent as n,resolveDirective as i,openBlock as l,createBlock as s,createVNode as a,Fragment as o,renderList as r,withCtx as m,withDirectives as p,createCommentVNode as d,toDisplayString as u,resolveDynamicComponent as c}from"vue";var f={name:"TabMenu",props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0}},timeout:null,mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)}},methods:{onItemClick(e,t,n){t.disabled?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},getItemClass:e=>["p-tabmenuitem",e.class,{"p-disabled":e.disabled}],getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":e.disabled}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,updateInkBar(){let t=this.$refs.nav.children,n=!1;for(let i=0;i<t.length;i++){let l=t[i];e.hasClass(l,"p-highlight")&&(this.$refs.inkbar.style.width=e.getWidth(l)+"px",this.$refs.inkbar.style.left=e.getOffset(l).left-e.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:t}};const b={class:"p-tabmenu p-component"},h={ref:"nav",class:"p-tabmenu-nav p-reset",role:"tablist"},k={class:"p-menuitem-text"},y={class:"p-menuitem-text"},x={ref:"inkbar",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],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-tabmenu-nav {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n padding: 0;\n list-style-type: none;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n.p-tabmenu-nav a {\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\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"),f.render=function(e,t,f,v,g,I){const C=n("router-link"),w=i("ripple");return l(),s("div",b,[a("ul",h,[(l(!0),s(o,null,r(f.model,((t,n)=>(l(),s(o,{key:t.label+"_"+n.toString()},[t.to&&!t.disabled?(l(),s(C,{key:0,to:t.to,custom:""},{default:m((({navigate:n,href:i,isActive:o,isExactActive:r})=>[I.visible(t)?(l(),s("li",{key:0,class:I.getRouteItemClass(t,o,r),style:t.style,role:"tab"},[e.$slots.item?(l(),s(c(e.$slots.item),{key:1,item:t},null,8,["item"])):p((l(),s("a",{key:0,href:i,class:"p-menuitem-link",onClick:e=>I.onItemClick(e,t,n),role:"presentation"},[t.icon?(l(),s("span",{key:0,class:I.getItemIcon(t)},null,2)):d("",!0),a("span",k,u(t.label),1)],8,["href","onClick"])),[[w]])],6)):d("",!0)])),_:2},1032,["to"])):I.visible(t)?(l(),s("li",{key:1,class:I.getItemClass(t),role:"tab"},[e.$slots.item?(l(),s(c(e.$slots.item),{key:1,item:t},null,8,["item"])):p((l(),s("a",{key:0,href:t.url,class:"p-menuitem-link",target:t.target,onClick:e=>I.onItemClick(e,t),role:"presentation",tabindex:t.disabled?null:"0"},[t.icon?(l(),s("span",{key:0,class:I.getItemIcon(t)},null,2)):d("",!0),a("span",y,u(t.label),1)],8,["href","target","onClick","tabindex"])),[[w]])],2)):d("",!0)],64)))),128)),a("li",x,null,512)],512)])};export default f;