primevue 3.27.0 → 3.28.0

package/tabmenu/TabMenu.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="p-tabmenu p-component">
-        <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+    <div class="p-tabmenu p-component" v-bind="ptm('root')">
+        <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
             <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
                 <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation">
+                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="getPTOptions('menuitem', i)">
                         <template v-if="!$slots.item">
                             <a
                                 ref="tabLink"
@@ -16,37 +16,40 @@
                                 :tabindex="isExactActive ? '0' : '-1'"
                                 @click="onItemClick($event, item, i, navigate)"
                                 @keydown="onKeydownItem($event, item, i, navigate)"
+                                v-bind="getPTOptions('action', i)"
                             >
                                 <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
-                                <span v-else-if="item.icon" :class="getItemIcon(item)" />
-                                <span class="p-menuitem-text">{{ label(item) }}</span>
+                                <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)">
+                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)" v-bind="getPTOptions('menuitem', i)">
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)">
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
                             <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
-                            <span v-else-if="item.icon" :class="getItemIcon(item)" />
-                            <span class="p-menuitem-text">{{ label(item) }}</span>
+                            <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
                 </li>
             </template>
-            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar"></li>
+            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar" v-bind="ptm('inkbar')"></li>
         </ul>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'TabMenu',
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-change'],
     props: {
         model: {
@@ -94,6 +97,13 @@ export default {
         clearTimeout(this.timeout);
     },
     methods: {
+        getPTOptions(key, index) {
+            return this.ptm(key, {
+                context: {
+                    order: index
+                }
+            });
+        },
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();

package/tabmenu/tabmenu.cjs.js

@@ -1,15 +1,18 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'TabMenu',
+    extends: BaseComponent__default["default"],
     emits: ['update:activeIndex', 'tab-change'],
     props: {
         model: {
@@ -57,6 +60,13 @@ var script = {
         clearTimeout(this.timeout);
     },
     methods: {
+        getPTOptions(key, index) {
+            return this.ptm(key, {
+                context: {
+                    order: index
+                }
+            });
+        },
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
@@ -237,31 +247,23 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-tabmenu p-component" };
-const _hoisted_2 = ["aria-labelledby", "aria-label"];
-const _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
-const _hoisted_4 = { class: "p-menuitem-text" };
-const _hoisted_5 = ["onClick", "onKeydown"];
-const _hoisted_6 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
-const _hoisted_7 = { class: "p-menuitem-text" };
-const _hoisted_8 = {
-  ref: "inkbar",
-  role: "none",
-  class: "p-tabmenu-ink-bar"
-};
+const _hoisted_1 = ["aria-labelledby", "aria-label"];
+const _hoisted_2 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
+const _hoisted_3 = ["onClick", "onKeydown"];
+const _hoisted_4 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("ul", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-tabmenu p-component" }, _ctx.ptm('root')), [
+    vue.createElementVNode("ul", vue.mergeProps({
       ref: "nav",
       class: "p-tabmenu-nav p-reset",
       role: "menubar",
       "aria-labelledby": _ctx.ariaLabelledby,
       "aria-label": _ctx.ariaLabel
-    }, [
+    }, _ctx.ptm('menu')), [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
         return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: $options.label(item) + '_' + i.toString()
@@ -274,16 +276,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                   ($options.visible(item))
-                    ? (vue.openBlock(), vue.createElementBlock("li", {
+                    ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                         key: 0,
                         ref_for: true,
                         ref: "tab",
-                        class: vue.normalizeClass($options.getRouteItemClass(item, isActive, isExactActive)),
-                        style: vue.normalizeStyle(item.style),
+                        class: $options.getRouteItemClass(item, isActive, isExactActive),
+                        style: item.style,
                         role: "presentation"
-                      }, [
+                      }, $options.getPTOptions('menuitem', i)), [
                         (!_ctx.$slots.item)
-                          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                               key: 0,
                               ref_for: true,
                               ref: "tabLink",
@@ -295,7 +297,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               tabindex: isExactActive ? '0' : '-1',
                               onClick: $event => ($options.onItemClick($event, item, i, navigate)),
                               onKeydown: $event => ($options.onKeydownItem($event, item, i, navigate))
-                            }, [
+                            }, $options.getPTOptions('action', i)), [
                               (_ctx.$slots.itemicon)
                                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
                                     key: 0,
@@ -303,13 +305,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     class: vue.normalizeClass($options.getItemIcon(item))
                                   }, null, 8, ["item", "class"]))
                                 : (item.icon)
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                       key: 1,
-                                      class: vue.normalizeClass($options.getItemIcon(item))
-                                    }, null, 2))
+                                      class: $options.getItemIcon(item)
+                                    }, $options.getPTOptions('icon', i)), null, 16))
                                   : vue.createCommentVNode("", true),
-                              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.label(item)), 1)
-                            ], 40, _hoisted_3)), [
+                              vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label', i)), vue.toDisplayString($options.label(item)), 17)
+                            ], 16, _hoisted_2)), [
                               [_directive_ripple]
                             ])
                           : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -317,23 +319,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               item: item,
                               index: i
                             }, null, 8, ["item", "index"]))
-                      ], 6))
+                      ], 16))
                     : vue.createCommentVNode("", true)
                 ]),
                 _: 2
               }, 1032, ["to"]))
             : ($options.visible(item))
-              ? (vue.openBlock(), vue.createElementBlock("li", {
+              ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                   key: 1,
                   ref_for: true,
                   ref: "tab",
-                  class: vue.normalizeClass($options.getItemClass(item, i)),
+                  class: $options.getItemClass(item, i),
                   role: "presentation",
                   onClick: $event => ($options.onItemClick($event, item, i)),
                   onKeydown: $event => ($options.onKeydownItem($event, item, i))
-                }, [
+                }, $options.getPTOptions('menuitem', i)), [
                   (!_ctx.$slots.item)
-                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                         key: 0,
                         ref_for: true,
                         ref: "tabLink",
@@ -344,7 +346,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         "aria-label": $options.label(item),
                         "aria-disabled": $options.disabled(item),
                         tabindex: $options.setTabIndex(i)
-                      }, [
+                      }, $options.getPTOptions('action', i)), [
                         (_ctx.$slots.itemicon)
                           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
                               key: 0,
@@ -352,13 +354,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               class: vue.normalizeClass($options.getItemIcon(item))
                             }, null, 8, ["item", "class"]))
                           : (item.icon)
-                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                 key: 1,
-                                class: vue.normalizeClass($options.getItemIcon(item))
-                              }, null, 2))
+                                class: $options.getItemIcon(item)
+                              }, $options.getPTOptions('icon', i)), null, 16))
                             : vue.createCommentVNode("", true),
-                        vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.label(item)), 1)
-                      ], 8, _hoisted_6)), [
+                        vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label', i)), vue.toDisplayString($options.label(item)), 17)
+                      ], 16, _hoisted_4)), [
                         [_directive_ripple]
                       ])
                     : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -366,13 +368,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         item: item,
                         index: i
                       }, null, 8, ["item", "index"]))
-                ], 42, _hoisted_5))
+                ], 16, _hoisted_3))
               : vue.createCommentVNode("", true)
         ], 64))
       }), 128)),
-      vue.createElementVNode("li", _hoisted_8, null, 512)
-    ], 8, _hoisted_2)
-  ]))
+      vue.createElementVNode("li", vue.mergeProps({
+        ref: "inkbar",
+        role: "none",
+        class: "p-tabmenu-ink-bar"
+      }, _ctx.ptm('inkbar')), null, 16)
+    ], 16, _hoisted_1)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/tabmenu/tabmenu.cjs.min.js

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

package/tabmenu/tabmenu.esm.js

@@ -1,9 +1,11 @@
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createBlock, withCtx, normalizeClass, normalizeStyle, withDirectives, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createElementVNode, Fragment, renderList, createBlock, withCtx, withDirectives, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'TabMenu',
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-change'],
     props: {
         model: {
@@ -51,6 +53,13 @@ var script = {
         clearTimeout(this.timeout);
     },
     methods: {
+        getPTOptions(key, index) {
+            return this.ptm(key, {
+                context: {
+                    order: index
+                }
+            });
+        },
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
@@ -231,31 +240,23 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-tabmenu p-component" };
-const _hoisted_2 = ["aria-labelledby", "aria-label"];
-const _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
-const _hoisted_4 = { class: "p-menuitem-text" };
-const _hoisted_5 = ["onClick", "onKeydown"];
-const _hoisted_6 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
-const _hoisted_7 = { class: "p-menuitem-text" };
-const _hoisted_8 = {
-  ref: "inkbar",
-  role: "none",
-  class: "p-tabmenu-ink-bar"
-};
+const _hoisted_1 = ["aria-labelledby", "aria-label"];
+const _hoisted_2 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
+const _hoisted_3 = ["onClick", "onKeydown"];
+const _hoisted_4 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("ul", {
+  return (openBlock(), createElementBlock("div", mergeProps({ class: "p-tabmenu p-component" }, _ctx.ptm('root')), [
+    createElementVNode("ul", mergeProps({
       ref: "nav",
       class: "p-tabmenu-nav p-reset",
       role: "menubar",
       "aria-labelledby": _ctx.ariaLabelledby,
       "aria-label": _ctx.ariaLabel
-    }, [
+    }, _ctx.ptm('menu')), [
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, i) => {
         return (openBlock(), createElementBlock(Fragment, {
           key: $options.label(item) + '_' + i.toString()
@@ -268,16 +269,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: withCtx(({ navigate, href, isActive, isExactActive }) => [
                   ($options.visible(item))
-                    ? (openBlock(), createElementBlock("li", {
+                    ? (openBlock(), createElementBlock("li", mergeProps({
                         key: 0,
                         ref_for: true,
                         ref: "tab",
-                        class: normalizeClass($options.getRouteItemClass(item, isActive, isExactActive)),
-                        style: normalizeStyle(item.style),
+                        class: $options.getRouteItemClass(item, isActive, isExactActive),
+                        style: item.style,
                         role: "presentation"
-                      }, [
+                      }, $options.getPTOptions('menuitem', i)), [
                         (!_ctx.$slots.item)
-                          ? withDirectives((openBlock(), createElementBlock("a", {
+                          ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
                               key: 0,
                               ref_for: true,
                               ref: "tabLink",
@@ -289,7 +290,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               tabindex: isExactActive ? '0' : '-1',
                               onClick: $event => ($options.onItemClick($event, item, i, navigate)),
                               onKeydown: $event => ($options.onKeydownItem($event, item, i, navigate))
-                            }, [
+                            }, $options.getPTOptions('action', i)), [
                               (_ctx.$slots.itemicon)
                                 ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.itemicon), {
                                     key: 0,
@@ -297,13 +298,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     class: normalizeClass($options.getItemIcon(item))
                                   }, null, 8, ["item", "class"]))
                                 : (item.icon)
-                                  ? (openBlock(), createElementBlock("span", {
+                                  ? (openBlock(), createElementBlock("span", mergeProps({
                                       key: 1,
-                                      class: normalizeClass($options.getItemIcon(item))
-                                    }, null, 2))
+                                      class: $options.getItemIcon(item)
+                                    }, $options.getPTOptions('icon', i)), null, 16))
                                   : createCommentVNode("", true),
-                              createElementVNode("span", _hoisted_4, toDisplayString($options.label(item)), 1)
-                            ], 40, _hoisted_3)), [
+                              createElementVNode("span", mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label', i)), toDisplayString($options.label(item)), 17)
+                            ], 16, _hoisted_2)), [
                               [_directive_ripple]
                             ])
                           : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
@@ -311,23 +312,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               item: item,
                               index: i
                             }, null, 8, ["item", "index"]))
-                      ], 6))
+                      ], 16))
                     : createCommentVNode("", true)
                 ]),
                 _: 2
               }, 1032, ["to"]))
             : ($options.visible(item))
-              ? (openBlock(), createElementBlock("li", {
+              ? (openBlock(), createElementBlock("li", mergeProps({
                   key: 1,
                   ref_for: true,
                   ref: "tab",
-                  class: normalizeClass($options.getItemClass(item, i)),
+                  class: $options.getItemClass(item, i),
                   role: "presentation",
                   onClick: $event => ($options.onItemClick($event, item, i)),
                   onKeydown: $event => ($options.onKeydownItem($event, item, i))
-                }, [
+                }, $options.getPTOptions('menuitem', i)), [
                   (!_ctx.$slots.item)
-                    ? withDirectives((openBlock(), createElementBlock("a", {
+                    ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
                         key: 0,
                         ref_for: true,
                         ref: "tabLink",
@@ -338,7 +339,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         "aria-label": $options.label(item),
                         "aria-disabled": $options.disabled(item),
                         tabindex: $options.setTabIndex(i)
-                      }, [
+                      }, $options.getPTOptions('action', i)), [
                         (_ctx.$slots.itemicon)
                           ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.itemicon), {
                               key: 0,
@@ -346,13 +347,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               class: normalizeClass($options.getItemIcon(item))
                             }, null, 8, ["item", "class"]))
                           : (item.icon)
-                            ? (openBlock(), createElementBlock("span", {
+                            ? (openBlock(), createElementBlock("span", mergeProps({
                                 key: 1,
-                                class: normalizeClass($options.getItemIcon(item))
-                              }, null, 2))
+                                class: $options.getItemIcon(item)
+                              }, $options.getPTOptions('icon', i)), null, 16))
                             : createCommentVNode("", true),
-                        createElementVNode("span", _hoisted_7, toDisplayString($options.label(item)), 1)
-                      ], 8, _hoisted_6)), [
+                        createElementVNode("span", mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label', i)), toDisplayString($options.label(item)), 17)
+                      ], 16, _hoisted_4)), [
                         [_directive_ripple]
                       ])
                     : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
@@ -360,13 +361,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         item: item,
                         index: i
                       }, null, 8, ["item", "index"]))
-                ], 42, _hoisted_5))
+                ], 16, _hoisted_3))
               : createCommentVNode("", true)
         ], 64))
       }), 128)),
-      createElementVNode("li", _hoisted_8, null, 512)
-    ], 8, _hoisted_2)
-  ]))
+      createElementVNode("li", mergeProps({
+        ref: "inkbar",
+        role: "none",
+        class: "p-tabmenu-ink-bar"
+      }, _ctx.ptm('inkbar')), null, 16)
+    ], 16, _hoisted_1)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/tabmenu/tabmenu.esm.min.js

@@ -1 +1 @@
-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};
+import e from"primevue/basecomponent";import t from"primevue/ripple";import{DomHandler as n}from"primevue/utils";import{resolveComponent as i,resolveDirective as a,openBlock as l,createElementBlock as s,mergeProps as r,createElementVNode as o,Fragment as d,renderList as m,createBlock as c,withCtx as p,withDirectives as u,resolveDynamicComponent as b,normalizeClass as f,createCommentVNode as h,toDisplayString as x}from"vue";var I={name:"TabMenu",extends:e,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,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,t){let i=t+1;if(i>=e.length)return{nextItem:e[e.length],i:e.length};let a=e[i];return a?n.hasClass(a,"p-disabled")?this.findNextItem(e,i):{nextItem:a,i:i}:null},findPrevItem(e,t){let i=t-1;if(i<0)return{nextItem:e[0],i:0};let a=e[i];return a?n.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=n.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 i=0;i<e.length;i++){let a=e[i];n.hasClass(a,"p-highlight")&&(this.$refs.inkbar.style.width=n.getWidth(a)+"px",this.$refs.inkbar.style.left=n.getOffset(a).left-n.getOffset(this.$refs.nav).left+"px",t=!0)}t||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:t}};const g=["aria-labelledby","aria-label"],v=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],y=["onClick","onKeydown"],k=["href","target","aria-label","aria-disabled","tabindex"];!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"),I.render=function(e,t,n,I,T,$){const C=i("router-link"),w=a("ripple");return l(),s("div",r({class:"p-tabmenu p-component"},e.ptm("root")),[o("ul",r({ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(l(!0),s(d,null,m(n.model,((t,n)=>(l(),s(d,{key:$.label(t)+"_"+n.toString()},[t.to&&!$.disabled(t)?(l(),c(C,{key:0,to:t.to,custom:""},{default:p((({navigate:i,href:a,isActive:d,isExactActive:m})=>[$.visible(t)?(l(),s("li",r({key:0,ref_for:!0,ref:"tab",class:$.getRouteItemClass(t,d,m),style:t.style,role:"presentation"},$.getPTOptions("menuitem",n)),[e.$slots.item?(l(),c(b(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):u((l(),s("a",r({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:a,class:"p-menuitem-link","aria-label":$.label(t),"aria-disabled":$.disabled(t),tabindex:m?"0":"-1",onClick:e=>$.onItemClick(e,t,n,i),onKeydown:e=>$.onKeydownItem(e,t,n,i)},$.getPTOptions("action",n)),[e.$slots.itemicon?(l(),c(b(e.$slots.itemicon),{key:0,item:t,class:f($.getItemIcon(t))},null,8,["item","class"])):t.icon?(l(),s("span",r({key:1,class:$.getItemIcon(t)},$.getPTOptions("icon",n)),null,16)):h("",!0),o("span",r({class:"p-menuitem-text"},$.getPTOptions("label",n)),x($.label(t)),17)],16,v)),[[w]])],16)):h("",!0)])),_:2},1032,["to"])):$.visible(t)?(l(),s("li",r({key:1,ref_for:!0,ref:"tab",class:$.getItemClass(t,n),role:"presentation",onClick:e=>$.onItemClick(e,t,n),onKeydown:e=>$.onKeydownItem(e,t,n)},$.getPTOptions("menuitem",n)),[e.$slots.item?(l(),c(b(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):u((l(),s("a",r({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":$.label(t),"aria-disabled":$.disabled(t),tabindex:$.setTabIndex(n)},$.getPTOptions("action",n)),[e.$slots.itemicon?(l(),c(b(e.$slots.itemicon),{key:0,item:t,class:f($.getItemIcon(t))},null,8,["item","class"])):t.icon?(l(),s("span",r({key:1,class:$.getItemIcon(t)},$.getPTOptions("icon",n)),null,16)):h("",!0),o("span",r({class:"p-menuitem-text"},$.getPTOptions("label",n)),x($.label(t)),17)],16,k)),[[w]])],16,y)):h("",!0)],64)))),128)),o("li",r({ref:"inkbar",role:"none",class:"p-tabmenu-ink-bar"},e.ptm("inkbar")),null,16)],16,g)],16)};export{I as default};