UNPKG

primevue

Version:

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

2 lines (1 loc) 7.49 kB
this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n,a){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e),o=i(t),s={name:"TabMenu",extends:l.default,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:{getPTOptions(e,t){return this.ptm(e,{context:{order:t}})},onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(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 a=n,i={};const l=this.$refs.tabLink;switch(e.code){case"ArrowRight":i=this.findNextItem(this.$refs.tab,a),a=i.i;break;case"ArrowLeft":i=this.findPrevItem(this.$refs.tab,a),a=i.i;break;case"End":i=this.findPrevItem(this.$refs.tab,this.model.length),a=i.i,e.preventDefault();break;case"Home":i=this.findNextItem(this.$refs.tab,-1),a=i.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(l)}l[a]&&l[n]&&(l[n].tabIndex="-1",l[a].tabIndex="0",l[a].focus())},findNextItem(e,t){let a=t+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let i=e[a];return i?n.DomHandler.hasClass(i,"p-disabled")?this.findNextItem(e,a):{nextItem:i,i:a}:null},findPrevItem(e,t){let a=t-1;if(a<0)return{nextItem:e[0],i:0};let i=e[a];return i?n.DomHandler.hasClass(i,"p-disabled")?this.findPrevItem(e,a):{prevItem:i,i:a}: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=n.DomHandler.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,t=!1;for(let a=0;a<e.length;a++){let i=e[a];n.DomHandler.hasClass(i,"p-highlight")&&(this.$refs.inkbar.style.width=n.DomHandler.getWidth(i)+"px",this.$refs.inkbar.style.left=n.DomHandler.getOffset(i).left-n.DomHandler.getOffset(this.$refs.nav).left+"px",t=!0)}t||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:o.default}};const r=["aria-labelledby","aria-label"],m=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],d=["onClick","onKeydown"],c=["href","target","aria-label","aria-disabled","tabindex"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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"),s.render=function(e,t,n,i,l,o){const s=a.resolveComponent("router-link"),p=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:"p-tabmenu p-component"},e.ptm("root")),[a.createElementVNode("ul",a.mergeProps({ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(n.model,((t,n)=>(a.openBlock(),a.createElementBlock(a.Fragment,{key:o.label(t)+"_"+n.toString()},[t.to&&!o.disabled(t)?(a.openBlock(),a.createBlock(s,{key:0,to:t.to,custom:""},{default:a.withCtx((({navigate:i,href:l,isActive:s,isExactActive:r})=>[o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:0,ref_for:!0,ref:"tab",class:o.getRouteItemClass(t,s,r),style:t.style,role:"presentation"},o.getPTOptions("menuitem",n)),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:l,class:"p-menuitem-link","aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:r?"0":"-1",onClick:e=>o.onItemClick(e,t,n,i),onKeydown:e=>o.onKeydownItem(e,t,n,i)},o.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass(o.getItemIcon(t))},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:o.getItemIcon(t)},o.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:"p-menuitem-text"},o.getPTOptions("label",n)),a.toDisplayString(o.label(t)),17)],16,m)),[[p]])],16)):a.createCommentVNode("",!0)])),_:2},1032,["to"])):o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:1,ref_for:!0,ref:"tab",class:o.getItemClass(t,n),role:"presentation",onClick:e=>o.onItemClick(e,t,n),onKeydown:e=>o.onKeydownItem(e,t,n)},o.getPTOptions("menuitem",n)),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:o.setTabIndex(n)},o.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass(o.getItemIcon(t))},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:o.getItemIcon(t)},o.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:"p-menuitem-text"},o.getPTOptions("label",n)),a.toDisplayString(o.label(t)),17)],16,c)),[[p]])],16,d)):a.createCommentVNode("",!0)],64)))),128)),a.createElementVNode("li",a.mergeProps({ref:"inkbar",role:"none",class:"p-tabmenu-ink-bar"},e.ptm("inkbar")),null,16)],16,r)],16)},s}(primevue.basecomponent,primevue.ripple,primevue.utils,Vue);