Fixed #1488 - activeIndex for TabMenu

api-generator/components/tabmenu.js

@@ -10,6 +10,31 @@ const TabMenuProps = [
         type: "boolean",
         default: "true",
         description: "Defines if active route highlight should match the exact route path."
+    },
+    {
+        name: "activeIndex",
+        type: "number",
+        default: "0",
+        description: "Active index of menuitem."
+    }
+];
+
+const TabMenuEvents = [
+    {
+        name: "tab-change",
+        description: "Callback to invoke when an active tab is changed.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "event.index",
+                type: "number",
+                description: "Index of the selected tab"
+            }
+        ]
     }
 ];
 
@@ -25,6 +50,7 @@ module.exports = {
         name: "TabMenu",
         description: "TabMenu is a navigation component that displays items as tab headers.",
         props: TabMenuProps,
+        events: TabMenuEvents,
         slots: TabMenuSlots
     }
 };

src/components/tabmenu/TabMenu.d.ts

@@ -3,6 +3,7 @@ import { VNode } from 'vue';
 interface TabMenuProps {
     model?: any[];
     exact?: boolean;
+    activeIndex?: number;
 }
 
 declare class TabMenu {

src/components/tabmenu/TabMenu.vue

@@ -5,7 +5,7 @@
                 <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                     <li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab">
                         <template v-if="!$slots.item">
-                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
+                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, i, navigate)" role="presentation" v-ripple>
                                 <span :class="getItemIcon(item)" v-if="item.icon"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
@@ -13,9 +13,9 @@
                         <component v-else :is="$slots.item" :item="item"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" :class="getItemClass(item)" role="tab">
+                <li v-else-if="visible(item)" :class="getItemClass(item, i)" role="tab">
                     <template v-if="!$slots.item">
-                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
+                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item, i)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
                             <span :class="getItemIcon(item)" v-if="item.icon"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
@@ -34,6 +34,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'TabMenu',
+    emits: ['update:activeIndex', 'tab-change'],
     props: {
 		model: {
             type: Array,
@@ -42,9 +43,18 @@ export default {
         exact: {
             type: Boolean,
             default: true
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
         }
     },
     timeout: null,
+    data() {
+        return {
+            d_activeIndex: this.activeIndex
+        }
+    },
     mounted() {
         this.updateInkBar();
     },
@@ -57,10 +67,13 @@ export default {
     watch: {
         $route() {
             this.timeout = setTimeout(() => this.updateInkBar(), 50);
+        },
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
         }
     },
     methods: {
-        onItemClick(event, item, navigate) {
+        onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
                 return;
@@ -76,9 +89,20 @@ export default {
             if (item.to && navigate) {
                 navigate(event);
             }
+
+            if (index !== this.d_activeIndex) {
+                this.d_activeIndex = index;
+                this.$emit('update:activeIndex', this.d_activeIndex);
+            }
+
+            this.$emit('tab-change', {
+                originalEvent: event,
+                index: index
+            });
         },
-        getItemClass(item) {
+        getItemClass(item, index) {
             return ['p-tabmenuitem', item.class, {
+                'p-highlight': this.d_activeIndex === index,
                 'p-disabled': this.disabled(item)
             }];
         },