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) 8.88 kB
"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("primevue/basecomponent"),i=require("primevue/usestyle"),a=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),r=l(n),s=i.useStyle("\n.p-tabmenu {\n overflow-x: auto;\n}\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\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\n.p-tabmenu-nav a:focus {\n z-index: 1;\n}\n\n.p-tabmenu-nav .p-menuitem-text {\n line-height: 1;\n}\n\n.p-tabmenu-ink-bar {\n display: none;\n z-index: 1;\n}\n\n.p-tabmenu::-webkit-scrollbar {\n display: none;\n}\n",{name:"tabmenu",manual:!0}),c={name:"TabMenu",extends:{name:"BaseTabMenu",extends:r.default,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}},css:{classes:{root:"p-tabmenu p-component",menu:"p-tabmenu-nav p-reset",menuitem:function(e){var t=e.instance;return["p-tabmenuitem",{"p-highlight":(e.props.exact?e.isExactActive:e.isActive)||t.d_activeIndex===e.index,"p-disabled":t.disabled(e.item)}]},action:"p-menuitem-link",icon:"p-menuitem-icon",label:"p-menuitem-text",inkbar:"p-tabmenu-ink-bar"},loadStyle:s.load},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}},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,n){return this.ptm(e,{context:{item:t,index:n}})},onItemClick:function(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:function(e,t,n,i){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,n,i),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 n=e.parentElement.nextElementSibling;return n?!0===t.DomHandler.getAttribute(n,"data-p-disabled")?this.findNextItem(n.children[0]):n.children[0]:null},findPrevItem:function(e){var n=e.parentElement.previousElementSibling;return n?!0===t.DomHandler.getAttribute(n,"data-p-disabled")?this.findPrevItem(n.children[0]):n.children[0]:null},findFirstItem:function(){var e=t.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},findLastItem:function(){var e=t.DomHandler.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.DomHandler.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.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),n=t.DomHandler.findSingle(this.$refs.nav,'[data-pc-section="action"][tabindex="0"]');n!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),n.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,n=!1,i=0;i<e.length;i++){var a=e[i];t.DomHandler.getAttribute(a,"data-p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(a)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(a).left-t.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:o.default}},d=["aria-labelledby","aria-label"],m=["data-p-highlight","data-p-disabled"],u=["href","aria-label","aria-disabled","onClick","onKeydown"],p=["onClick","onKeydown","data-p-highlight","data-p-disabled"],f=["href","target","aria-label","aria-disabled"];c.render=function(e,t,n,i,l,o){var r=a.resolveComponent("router-link"),s=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"tabmenu"}),[a.createElementVNode("ul",a.mergeProps({ref:"nav",class:e.cx("menu"),role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(e.model,(function(t,n){return a.openBlock(),a.createElementBlock(a.Fragment,{key:o.label(t)+"_"+n.toString()},[t.to&&!o.disabled(t)?(a.openBlock(),a.createBlock(r,{key:0,to:t.to,custom:""},{default:a.withCtx((function(i){var l=i.navigate,r=i.href,c=i.isActive,d=i.isExactActive;return[o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:0,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,isActive:c,isExactActive:d}),t.class],style:t.style,role:"presentation"},o.getPTOptions("menuitem",t,n),{"data-p-highlight":e.exact?d:c,"data-p-disabled":o.disabled(t)}),[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:r,class:e.cx("action"),"aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:-1,onClick:function(e){return o.onItemClick(e,t,n,l)},onKeydown:function(e){return o.onKeydownItem(e,t,n,l)}},o.getPTOptions("action",t,n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:[e.cx("icon"),t.icon]},o.getPTOptions("icon",t,n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},o.getPTOptions("label",t,n)),a.toDisplayString(o.label(t)),17)],16,u)),[[s]])],16,m)):a.createCommentVNode("",!0)]})),_:2},1032,["to"])):o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:1,ref_for:!0,ref:"tab",class:[e.cx("menuitem",{item:t,index:n}),t.class],role:"presentation",onClick:function(e){return o.onItemClick(e,t,n)},onKeydown:function(e){return o.onKeydownItem(e,t,n)}},o.getPTOptions("menuitem",t,n),{"data-p-highlight":l.d_activeIndex===n,"data-p-disabled":o.disabled(t)}),[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:e.cx("action"),target:t.target,"aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:-1},o.getPTOptions("action",t,n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass([e.cx("icon"),t.icon])},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:[e.cx("icon"),t.icon]},o.getPTOptions("icon",t,n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},o.getPTOptions("label",t,n)),a.toDisplayString(o.label(t)),17)],16,f)),[[s]])],16,p)):a.createCommentVNode("",!0)],64)})),128)),a.createElementVNode("li",a.mergeProps({ref:"inkbar",role:"none",class:e.cx("inkbar")},e.ptm("inkbar")),null,16)],16,d)],16)},module.exports=c;