primevue 3.30.0 → 3.30.2

package/splitbutton/splitbutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,n,e,o,u,l,r){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=i(t),s=i(n),p=i(e),d=i(u);function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}function b(t,n,e){return(n=m(n))in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function m(t){var n=f(t,"string");return"symbol"===c(n)?n:String(n)}function f(t,n){if("object"!==c(t)||null===t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var o=e.call(t,n||"default");if("object"!==c(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}var y={root:function(t){var n,e=t.props;return["p-splitbutton p-component",(n={},b(n,"p-button-".concat(e.severity),e.severity),b(n,"p-button-raised",e.raised),b(n,"p-button-rounded",e.rounded),b(n,"p-button-text",e.text),b(n,"p-button-outlined",e.outlined),b(n,"p-button-sm","small"===e.size),b(n,"p-button-lg","large"===e.size),n)]},button:"p-splitbutton-defaultbutton",menuButton:"p-splitbutton-menubutton"},v=l.useStyle("\n.p-splitbutton {\n    display: inline-flex;\n    position: relative;\n}\n\n.p-splitbutton .p-splitbutton-defaultbutton,\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {\n    flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n\n.p-splitbutton-menubutton,\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-splitbutton .p-menu {\n    min-width: 100%;\n}\n\n.p-fluid .p-splitbutton {\n    display: flex;\n}\n",{name:"splitbutton",manual:!0}),h={name:"SplitButton",extends:{name:"BaseSplitButton",extends:d.default,props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},css:{classes:y,loadStyle:v.load},provide:function(){return{$parentInstance:this}}},emits:["click"],data:function(){return{isExpanded:!1}},mounted:function(){var t=this;this.$watch("$refs.menu.visible",(function(n){t.isExpanded=n}))},methods:{onDropdownButtonClick:function(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=this.$refs.menu.visible},onDropdownKeydown:function(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick:function(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:function(){return o.UniqueComponentId()},containerClass:function(){return[this.cx("root"),this.class]}},components:{PVSButton:a.default,PVSMenu:p.default,ChevronDownIcon:s.default}},B=["data-pc-severity"];return h.render=function(t,n,e,o,u,l){var i=r.resolveComponent("PVSButton"),a=r.resolveComponent("PVSMenu");return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:l.containerClass,style:t.style},t.ptm("root"),{"data-pc-name":"splitbutton","data-pc-severity":t.severity}),[r.renderSlot(t.$slots,"default",{},(function(){return[r.createVNode(i,r.mergeProps({type:"button",class:t.cx("button"),label:t.label,disabled:t.disabled,"aria-label":t.label,onClick:l.onDefaultButtonClick,pt:t.ptm("button")},t.buttonProps,{unstyled:t.unstyled}),r.createSlots({_:2},[t.icon?{name:"icon",fn:r.withCtx((function(n){return[r.renderSlot(t.$slots,"icon",{class:r.normalizeClass(n.class)},(function(){return[r.createElementVNode("span",r.mergeProps({class:[t.icon,n.class]},t.ptm("button").icon),null,16)]}))]})),key:"0"}:void 0]),1040,["class","label","disabled","aria-label","onClick","pt","unstyled"])]})),r.createVNode(i,r.mergeProps({ref:"button",type:"button",class:t.cx("menuButton"),disabled:t.disabled,"aria-haspopup":"true","aria-expanded":u.isExpanded,"aria-controls":l.ariaId+"_overlay",onClick:l.onDropdownButtonClick,onKeydown:l.onDropdownKeydown,pt:t.ptm("menuButton")},t.menuButtonProps,{unstyled:t.unstyled}),{icon:r.withCtx((function(n){return[r.renderSlot(t.$slots,"menubuttonicon",{class:r.normalizeClass(n.class)},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.menuButtonIcon?"span":"ChevronDownIcon"),r.mergeProps({class:[t.menuButtonIcon,n.class]},t.ptm("menuButton").icon),null,16,["class"]))]}))]})),_:3},16,["class","disabled","aria-expanded","aria-controls","onClick","onKeydown","pt","unstyled"]),r.createVNode(a,{ref:"menu",id:l.ariaId+"_overlay",model:t.model,popup:!0,autoZIndex:t.autoZIndex,baseZIndex:t.baseZIndex,appendTo:t.appendTo,unstyled:t.unstyled,pt:t.ptm("menu")},null,8,["id","model","autoZIndex","baseZIndex","appendTo","unstyled","pt"])],16,B)},h}(primevue.button,primevue.icons.chevrondown,primevue.tieredmenu,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);
+this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,n,e,o,u,l,r){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=i(t),s=i(n),p=i(e),d=i(u);function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}function b(t,n,e){return(n=m(n))in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function m(t){var n=f(t,"string");return"symbol"===c(n)?n:String(n)}function f(t,n){if("object"!==c(t)||null===t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var o=e.call(t,n||"default");if("object"!==c(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}var y={root:function(t){var n,e=t.props;return["p-splitbutton p-component",(n={},b(n,"p-button-".concat(e.severity),e.severity),b(n,"p-button-raised",e.raised),b(n,"p-button-rounded",e.rounded),b(n,"p-button-text",e.text),b(n,"p-button-outlined",e.outlined),b(n,"p-button-sm","small"===e.size),b(n,"p-button-lg","large"===e.size),n)]},button:"p-splitbutton-defaultbutton",menuButton:"p-splitbutton-menubutton"},v=l.useStyle("\n.p-splitbutton {\n    display: inline-flex;\n    position: relative;\n}\n\n.p-splitbutton .p-splitbutton-defaultbutton,\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {\n    flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n\n.p-splitbutton-menubutton,\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-splitbutton .p-menu {\n    min-width: 100%;\n}\n\n.p-fluid .p-splitbutton {\n    display: flex;\n}\n",{name:"splitbutton",manual:!0}),h={name:"SplitButton",extends:{name:"BaseSplitButton",extends:d.default,props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:void 0},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},css:{classes:y,loadStyle:v.load},provide:function(){return{$parentInstance:this}}},emits:["click"],data:function(){return{isExpanded:!1}},mounted:function(){var t=this;this.$watch("$refs.menu.visible",(function(n){t.isExpanded=n}))},methods:{onDropdownButtonClick:function(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=this.$refs.menu.visible},onDropdownKeydown:function(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick:function(t){this.isExpanded&&this.$refs.menu.hide(t),this.$emit("click",t)}},computed:{ariaId:function(){return o.UniqueComponentId()},containerClass:function(){return[this.cx("root"),this.class]}},components:{PVSButton:a.default,PVSMenu:p.default,ChevronDownIcon:s.default}},B=["data-pc-severity"];return h.render=function(t,n,e,o,u,l){var i=r.resolveComponent("PVSButton"),a=r.resolveComponent("PVSMenu");return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:l.containerClass,style:t.style},t.ptm("root"),{"data-pc-name":"splitbutton","data-pc-severity":t.severity}),[r.renderSlot(t.$slots,"default",{},(function(){return[r.createVNode(i,r.mergeProps({type:"button",class:t.cx("button"),label:t.label,disabled:t.disabled,"aria-label":t.label,onClick:l.onDefaultButtonClick,pt:t.ptm("button")},t.buttonProps,{unstyled:t.unstyled,"data-pc-section":"button"}),r.createSlots({_:2},[t.icon?{name:"icon",fn:r.withCtx((function(n){return[r.renderSlot(t.$slots,"icon",{class:r.normalizeClass(n.class)},(function(){return[r.createElementVNode("span",r.mergeProps({class:[t.icon,n.class]},t.ptm("button").icon),null,16)]}))]})),key:"0"}:void 0]),1040,["class","label","disabled","aria-label","onClick","pt","unstyled"])]})),r.createVNode(i,r.mergeProps({ref:"button",type:"button",class:t.cx("menuButton"),disabled:t.disabled,"aria-haspopup":"true","aria-expanded":u.isExpanded,"aria-controls":l.ariaId+"_overlay",onClick:l.onDropdownButtonClick,onKeydown:l.onDropdownKeydown,pt:t.ptm("menuButton")},t.menuButtonProps,{unstyled:t.unstyled,"data-pc-section":"menubutton"}),{icon:r.withCtx((function(n){return[r.renderSlot(t.$slots,"menubuttonicon",{class:r.normalizeClass(n.class)},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.menuButtonIcon?"span":"ChevronDownIcon"),r.mergeProps({class:[t.menuButtonIcon,n.class]},t.ptm("menuButton").icon),null,16,["class"]))]}))]})),_:3},16,["class","disabled","aria-expanded","aria-controls","onClick","onKeydown","pt","unstyled"]),r.createVNode(a,{ref:"menu",id:l.ariaId+"_overlay",model:t.model,popup:!0,autoZIndex:t.autoZIndex,baseZIndex:t.baseZIndex,appendTo:t.appendTo,unstyled:t.unstyled,pt:t.ptm("menu")},null,8,["id","model","autoZIndex","baseZIndex","appendTo","unstyled","pt"])],16,B)},h}(primevue.button,primevue.icons.chevrondown,primevue.tieredmenu,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/splitter/Splitter.d.ts

@@ -11,7 +11,7 @@ import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type SplitterPassThroughOptionType = SplitterPassThroughAttributes | ((options: SplitterPassThroughMethodOptions) => SplitterPassThroughAttributes) | null | undefined;
+export declare type SplitterPassThroughOptionType = SplitterPassThroughAttributes | ((options: SplitterPassThroughMethodOptions) => SplitterPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/splitterpanel/SplitterPanel.d.ts

@@ -11,7 +11,7 @@ import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroughAttributes | ((options: SplitterPanelPassThroughMethodOptions) => SplitterPanelPassThroughAttributes) | null | undefined;
+export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroughAttributes | ((options: SplitterPanelPassThroughMethodOptions) => SplitterPanelPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/steps/Steps.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((options: StepsPassThroughMethodOptions) => StepsPassThroughAttributes) | null | undefined;
+export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((options: StepsPassThroughMethodOptions) => StepsPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/tabmenu/TabMenu.d.ts

@@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes | ((options: TabMenuPassThroughMethodOptions) => TabMenuPassThroughAttributes) | null | undefined;
+export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes | ((options: TabMenuPassThroughMethodOptions) => TabMenuPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/tabmenu/TabMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tabmenu">
         <ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
-            <template v-for="(item, i) of focusableItems" :key="label(item) + '_' + i.toString()">
+            <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)"
@@ -22,9 +22,9 @@
                                 :class="cx('action')"
                                 :aria-label="label(item)"
                                 :aria-disabled="disabled(item)"
-                                :tabindex="isExactActive ? '0' : '-1'"
+                                :tabindex="-1"
                                 @click="onItemClick($event, item, i, navigate)"
-                                @keydown="onKeydownItem($event, i, navigate)"
+                                @keydown="onKeydownItem($event, item, i, navigate)"
                                 v-bind="getPTOptions('action', i)"
                             >
                                 <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
@@ -41,13 +41,13 @@
                     :class="[cx('menuitem', { item, index: i }), item.class]"
                     role="presentation"
                     @click="onItemClick($event, item, i)"
-                    @keydown="onKeydownItem($event, i)"
+                    @keydown="onKeydownItem($event, item, i)"
                     v-bind="getPTOptions('menuitem', i)"
                     :data-p-highlight="d_activeIndex === i"
                     :data-p-disabled="disabled(item)"
                 >
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', i)">
                             <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
                             <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
                             <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
@@ -86,6 +86,10 @@ export default {
     },
     mounted() {
         this.updateInkBar();
+
+        const activeItem = this.findActiveItem();
+
+        activeItem && (activeItem.tabIndex = '0');
     },
     updated() {
         this.updateInkBar();
@@ -129,39 +133,28 @@ export default {
                 index: index
             });
         },
-        onKeydownItem(event, index) {
-            let i = index;
-
-            let foundElement = {};
-            const tabLinkRef = this.$refs.tabLink;
-
+        onKeydownItem(event, item, index, navigate) {
             switch (event.code) {
                 case 'ArrowRight': {
-                    foundElement = this.findNextItem(this.$refs.tab, i);
-                    i = foundElement.i;
-
+                    this.navigateToNextItem(event.target);
+                    event.preventDefault();
                     break;
                 }
 
                 case 'ArrowLeft': {
-                    foundElement = this.findPrevItem(this.$refs.tab, i);
-                    i = foundElement.i;
-
+                    this.navigateToPrevItem(event.target);
+                    event.preventDefault();
                     break;
                 }
 
-                case 'End': {
-                    foundElement = this.findPrevItem(this.$refs.tab, this.model.length);
-                    i = foundElement.i;
-
+                case 'Home': {
+                    this.navigateToFirstItem(event.target);
                     event.preventDefault();
                     break;
                 }
 
-                case 'Home': {
-                    foundElement = this.findNextItem(this.$refs.tab, -1);
-                    i = foundElement.i;
-
+                case 'End': {
+                    this.navigateToLastItem(event.target);
                     event.preventDefault();
                     break;
                 }
@@ -169,73 +162,88 @@ export default {
                 case 'Space':
 
                 case 'Enter': {
-                    if (event.currentTarget) {
-                        event.currentTarget.click();
-                    }
-
+                    this.onItemClick(event, item, index, navigate);
                     event.preventDefault();
                     break;
                 }
 
                 case 'Tab': {
-                    this.setDefaultTabIndexes(tabLinkRef);
-
+                    this.onTabKey();
                     break;
                 }
 
                 default:
                     break;
             }
+        },
+        navigateToNextItem(target) {
+            const nextItem = this.findNextItem(target);
 
-            if (tabLinkRef[i] && tabLinkRef[index]) {
-                tabLinkRef[index].tabIndex = '-1';
-                tabLinkRef[i].tabIndex = '0';
-                tabLinkRef[i].focus();
-            }
+            nextItem && this.setFocusToMenuitem(target, nextItem);
         },
-        findNextItem(items, index) {
-            let i = index + 1;
+        navigateToPrevItem(target) {
+            const prevItem = this.findPrevItem(target);
 
-            if (i >= items.length) {
-                return { nextItem: items[items.length], i: items.length };
-            }
+            prevItem && this.setFocusToMenuitem(target, prevItem);
+        },
+        navigateToFirstItem(target) {
+            const firstItem = this.findFirstItem(target);
 
-            let nextItem = items[i];
+            firstItem && this.setFocusToMenuitem(target, firstItem);
+        },
+        navigateToLastItem(target) {
+            const lastItem = this.findLastItem(target);
 
-            if (nextItem) return DomHandler.getAttribute(nextItem, 'data-p-disabled') ? this.findNextItem(items, i) : { nextItem, i };
-            else return null;
+            lastItem && this.setFocusToMenuitem(target, lastItem);
         },
-        findPrevItem(items, index) {
-            let i = index - 1;
+        findNextItem(item) {
+            const nextItem = item.parentElement.nextElementSibling;
 
-            if (i < 0) {
-                return { nextItem: items[0], i: 0 };
-            }
+            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0]) : null;
+        },
+        findPrevItem(item) {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;
+        },
+        findFirstItem() {
+            const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
 
-            let prevItem = items[i];
+            return firstSibling ? firstSibling.children[0] : null;
+        },
+        findLastItem() {
+            const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
 
-            if (prevItem) return DomHandler.getAttribute(prevItem, 'data-p-disabled') ? this.findPrevItem(items, i) : { prevItem, i };
-            else return null;
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        },
+        findActiveItem() {
+            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+
+            return activeItem ? activeItem.children[0] : null;
+        },
+        setFocusToMenuitem(target, focusableItem) {
+            target.tabIndex = '-1';
+            focusableItem.tabIndex = '0';
+            focusableItem.focus();
+        },
+        onTabKey() {
+            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+            const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]');
+
+            if (focusedItem !== activeItem.children[0]) {
+                activeItem && (activeItem.children[0].tabIndex = '0');
+                focusedItem.tabIndex = '-1';
+            }
         },
         visible(item) {
             return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;
         },
         label(item) {
             return typeof item.label === 'function' ? item.label() : item.label;
         },
-        setDefaultTabIndexes(tabLinkRef) {
-            setTimeout(() => {
-                tabLinkRef.forEach((item) => {
-                    item.tabIndex = DomHandler.getAttribute(item.parentElement, 'data-p-highlight') ? '0' : '-1';
-                });
-            }, 300);
-        },
-        setTabIndex(index) {
-            return this.d_activeIndex === index ? '0' : '-1';
-        },
         updateInkBar() {
             let tabs = this.$refs.nav.children;
             let inkHighlighted = false;
@@ -256,15 +264,6 @@ export default {
             }
         }
     },
-    computed: {
-        focusableItems() {
-            return (this.model || []).reduce((result, item) => {
-                this.visible(item) && !this.disabled(item) && result.push(item);
-
-                return result;
-            }, []);
-        }
-    },
     directives: {
         ripple: Ripple
     }

package/tabmenu/tabmenu.cjs.js

@@ -96,6 +96,8 @@ var script = {
   },
   mounted: function mounted() {
     this.updateInkBar();
+    var activeItem = this.findActiveItem();
+    activeItem && (activeItem.tabIndex = '0');
   },
   updated: function updated() {
     this.updateInkBar();
@@ -134,105 +136,104 @@ var script = {
         index: index
       });
     },
-    onKeydownItem: function onKeydownItem(event, index) {
-      var i = index;
-      var foundElement = {};
-      var tabLinkRef = this.$refs.tabLink;
+    onKeydownItem: function onKeydownItem(event, item, index, navigate) {
       switch (event.code) {
         case 'ArrowRight':
           {
-            foundElement = this.findNextItem(this.$refs.tab, i);
-            i = foundElement.i;
+            this.navigateToNextItem(event.target);
+            event.preventDefault();
             break;
           }
         case 'ArrowLeft':
           {
-            foundElement = this.findPrevItem(this.$refs.tab, i);
-            i = foundElement.i;
+            this.navigateToPrevItem(event.target);
+            event.preventDefault();
             break;
           }
-        case 'End':
+        case 'Home':
           {
-            foundElement = this.findPrevItem(this.$refs.tab, this.model.length);
-            i = foundElement.i;
+            this.navigateToFirstItem(event.target);
             event.preventDefault();
             break;
           }
-        case 'Home':
+        case 'End':
           {
-            foundElement = this.findNextItem(this.$refs.tab, -1);
-            i = foundElement.i;
+            this.navigateToLastItem(event.target);
             event.preventDefault();
             break;
           }
         case 'Space':
         case 'Enter':
           {
-            if (event.currentTarget) {
-              event.currentTarget.click();
-            }
+            this.onItemClick(event, item, index, navigate);
             event.preventDefault();
             break;
           }
         case 'Tab':
           {
-            this.setDefaultTabIndexes(tabLinkRef);
+            this.onTabKey();
             break;
           }
       }
-      if (tabLinkRef[i] && tabLinkRef[index]) {
-        tabLinkRef[index].tabIndex = '-1';
-        tabLinkRef[i].tabIndex = '0';
-        tabLinkRef[i].focus();
-      }
     },
-    findNextItem: function findNextItem(items, index) {
-      var i = index + 1;
-      if (i >= items.length) {
-        return {
-          nextItem: items[items.length],
-          i: items.length
-        };
-      }
-      var nextItem = items[i];
-      if (nextItem) return utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') ? this.findNextItem(items, i) : {
-        nextItem: nextItem,
-        i: i
-      };else return null;
+    navigateToNextItem: function navigateToNextItem(target) {
+      var nextItem = this.findNextItem(target);
+      nextItem && this.setFocusToMenuitem(target, nextItem);
+    },
+    navigateToPrevItem: function navigateToPrevItem(target) {
+      var prevItem = this.findPrevItem(target);
+      prevItem && this.setFocusToMenuitem(target, prevItem);
+    },
+    navigateToFirstItem: function navigateToFirstItem(target) {
+      var firstItem = this.findFirstItem(target);
+      firstItem && this.setFocusToMenuitem(target, firstItem);
+    },
+    navigateToLastItem: function navigateToLastItem(target) {
+      var lastItem = this.findLastItem(target);
+      lastItem && this.setFocusToMenuitem(target, lastItem);
     },
-    findPrevItem: function findPrevItem(items, index) {
-      var i = index - 1;
-      if (i < 0) {
-        return {
-          nextItem: items[0],
-          i: 0
-        };
+    findNextItem: function findNextItem(item) {
+      var nextItem = item.parentElement.nextElementSibling;
+      return nextItem ? utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
+    },
+    findPrevItem: function findPrevItem(item) {
+      var prevItem = item.parentElement.previousElementSibling;
+      return prevItem ? utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
+    },
+    findFirstItem: function findFirstItem() {
+      var firstSibling = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+      return firstSibling ? firstSibling.children[0] : null;
+    },
+    findLastItem: function findLastItem() {
+      var siblings = utils.DomHandler.find(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+      return siblings ? siblings[siblings.length - 1].children[0] : null;
+    },
+    findActiveItem: function findActiveItem() {
+      var activeItem = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+      return activeItem ? activeItem.children[0] : null;
+    },
+    setFocusToMenuitem: function setFocusToMenuitem(target, focusableItem) {
+      target.tabIndex = '-1';
+      focusableItem.tabIndex = '0';
+      focusableItem.focus();
+    },
+    onTabKey: function onTabKey() {
+      var activeItem = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+      var focusedItem = utils.DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]');
+      if (focusedItem !== activeItem.children[0]) {
+        activeItem && (activeItem.children[0].tabIndex = '0');
+        focusedItem.tabIndex = '-1';
       }
-      var prevItem = items[i];
-      if (prevItem) return utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') ? this.findPrevItem(items, i) : {
-        prevItem: prevItem,
-        i: i
-      };else return null;
     },
     visible: function visible(item) {
       return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
     },
     disabled: function disabled(item) {
-      return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;
     },
     label: function label(item) {
       return typeof item.label === 'function' ? item.label() : item.label;
     },
-    setDefaultTabIndexes: function setDefaultTabIndexes(tabLinkRef) {
-      setTimeout(function () {
-        tabLinkRef.forEach(function (item) {
-          item.tabIndex = utils.DomHandler.getAttribute(item.parentElement, 'data-p-highlight') ? '0' : '-1';
-        });
-      }, 300);
-    },
-    setTabIndex: function setTabIndex(index) {
-      return this.d_activeIndex === index ? '0' : '-1';
-    },
     updateInkBar: function updateInkBar() {
       var tabs = this.$refs.nav.children;
       var inkHighlighted = false;
@@ -250,15 +251,6 @@ var script = {
       }
     }
   },
-  computed: {
-    focusableItems: function focusableItems() {
-      var _this2 = this;
-      return (this.model || []).reduce(function (result, item) {
-        _this2.visible(item) && !_this2.disabled(item) && result.push(item);
-        return result;
-      }, []);
-    }
-  },
   directives: {
     ripple: Ripple__default["default"]
   }
@@ -266,9 +258,9 @@ var script = {
 
 var _hoisted_1 = ["aria-labelledby", "aria-label"];
 var _hoisted_2 = ["data-p-highlight", "data-p-disabled"];
-var _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
+var _hoisted_3 = ["href", "aria-label", "aria-disabled", "onClick", "onKeydown"];
 var _hoisted_4 = ["onClick", "onKeydown", "data-p-highlight", "data-p-disabled"];
-var _hoisted_5 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
+var _hoisted_5 = ["href", "target", "aria-label", "aria-disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_router_link = vue.resolveComponent("router-link");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -282,7 +274,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     role: "menubar",
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel
-  }, _ctx.ptm('menu')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.focusableItems, function (item, i) {
+  }, _ctx.ptm('menu')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model, function (item, i) {
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
       key: $options.label(item) + '_' + i.toString()
     }, [item.to && !$options.disabled(item) ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -318,12 +310,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "class": _ctx.cx('action'),
           "aria-label": $options.label(item),
           "aria-disabled": $options.disabled(item),
-          tabindex: isExactActive ? '0' : '-1',
+          tabindex: -1,
           onClick: function onClick($event) {
             return $options.onItemClick($event, item, i, navigate);
           },
           onKeydown: function onKeydown($event) {
-            return $options.onKeydownItem($event, i, navigate);
+            return $options.onKeydownItem($event, item, i, navigate);
           }
         }, $options.getPTOptions('action', i)), [_ctx.$slots.itemicon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
           key: 0,
@@ -354,7 +346,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         return $options.onItemClick($event, item, i);
       },
       onKeydown: function onKeydown($event) {
-        return $options.onKeydownItem($event, i);
+        return $options.onKeydownItem($event, item, i);
       }
     }, $options.getPTOptions('menuitem', i), {
       "data-p-highlight": $data.d_activeIndex === i,
@@ -369,7 +361,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       target: item.target,
       "aria-label": $options.label(item),
       "aria-disabled": $options.disabled(item),
-      tabindex: $options.setTabIndex(i)
+      tabindex: -1
     }, $options.getPTOptions('action', i)), [_ctx.$slots.itemicon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
       key: 0,
       item: item,

package/tabmenu/tabmenu.cjs.min.js

@@ -1 +1 @@
-"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 r=l(e),o=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:o.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()},updated:function(){this.updateInkBar()},beforeUnmount:function(){clearTimeout(this.timeout)},methods:{getPTOptions:function(e,t){return this.ptm(e,{context:{order:t}})},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){var n=t,i=this.$refs.tabLink;switch(e.code){case"ArrowRight":n=this.findNextItem(this.$refs.tab,n).i;break;case"ArrowLeft":n=this.findPrevItem(this.$refs.tab,n).i;break;case"End":n=this.findPrevItem(this.$refs.tab,this.model.length).i,e.preventDefault();break;case"Home":n=this.findNextItem(this.$refs.tab,-1).i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[n]&&i[t]&&(i[t].tabIndex="-1",i[n].tabIndex="0",i[n].focus())},findNextItem:function(e,n){var i=n+1;if(i>=e.length)return{nextItem:e[e.length],i:e.length};var a=e[i];return a?t.DomHandler.getAttribute(a,"data-p-disabled")?this.findNextItem(e,i):{nextItem:a,i:i}:null},findPrevItem:function(e,n){var i=n-1;if(i<0)return{nextItem:e[0],i:0};var a=e[i];return a?t.DomHandler.getAttribute(a,"data-p-disabled")?this.findPrevItem(e,i):{prevItem:a,i:i}:null},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},setDefaultTabIndexes:function(e){setTimeout((function(){e.forEach((function(e){e.tabIndex=t.DomHandler.getAttribute(e.parentElement,"data-p-highlight")?"0":"-1"}))}),300)},setTabIndex:function(e){return this.d_activeIndex===e?"0":"-1"},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")}},computed:{focusableItems:function(){var e=this;return(this.model||[]).reduce((function(t,n){return e.visible(n)&&!e.disabled(n)&&t.push(n),t}),[])}},directives:{ripple:r.default}},d=["aria-labelledby","aria-label"],m=["data-p-highlight","data-p-disabled"],u=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],p=["onClick","onKeydown","data-p-highlight","data-p-disabled"],b=["href","target","aria-label","aria-disabled","tabindex"];c.render=function(e,t,n,i,l,r){var o=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(r.focusableItems,(function(t,n){return a.openBlock(),a.createElementBlock(a.Fragment,{key:r.label(t)+"_"+n.toString()},[t.to&&!r.disabled(t)?(a.openBlock(),a.createBlock(o,{key:0,to:t.to,custom:""},{default:a.withCtx((function(i){var l=i.navigate,o=i.href,c=i.isActive,d=i.isExactActive;return[r.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"},r.getPTOptions("menuitem",n),{"data-p-highlight":e.exact?d:c,"data-p-disabled":r.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:o,class:e.cx("action"),"aria-label":r.label(t),"aria-disabled":r.disabled(t),tabindex:d?"0":"-1",onClick:function(e){return r.onItemClick(e,t,n,l)},onKeydown:function(e){return r.onKeydownItem(e,n,l)}},r.getPTOptions("action",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]},r.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},r.getPTOptions("label",n)),a.toDisplayString(r.label(t)),17)],16,u)),[[s]])],16,m)):a.createCommentVNode("",!0)]})),_:2},1032,["to"])):r.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 r.onItemClick(e,t,n)},onKeydown:function(e){return r.onKeydownItem(e,n)}},r.getPTOptions("menuitem",n),{"data-p-highlight":l.d_activeIndex===n,"data-p-disabled":r.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":r.label(t),"aria-disabled":r.disabled(t),tabindex:r.setTabIndex(n)},r.getPTOptions("action",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]},r.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},r.getPTOptions("label",n)),a.toDisplayString(r.label(t)),17)],16,b)),[[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;
+"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){return this.ptm(e,{context:{order:t}})},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",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",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",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},o.getPTOptions("label",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",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",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",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},o.getPTOptions("label",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;