From 39bd79dc10807a801b9f37bdfd87fbd9fbb0bc06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 28 Apr 2023 10:23:20 +0300
Subject: [PATCH] Refactor #3907 - TabMenu options added

---
 components/lib/tabmenu/TabMenu.d.ts | 11 +++++++++++
 components/lib/tabmenu/TabMenu.vue  | 23 +++++++++++++++--------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index 956c8c46a..d5ce6e79e 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -19,6 +19,7 @@ export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes
 export interface TabMenuPassThroughMethodOptions {
     props: TabMenuProps;
     state: TabMenuState;
+    options: TabMenuOptions;
 }
 
 /**
@@ -74,6 +75,16 @@ export interface TabMenuState {
     d_activeIndex: number;
 }
 
+/**
+ * Defines current options in TabMenu component.
+ */
+export interface TabMenuOptions {
+    /**
+     * Order of the menuitem
+     */
+    order: number;
+}
+
 /**
  * Custom change event.
  * @see {@link TabMenuEmits['tab-change']}
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 4e4d6cee7..d06be9806 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -3,7 +3,7 @@
         <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" v-bind="ptm('menuitem')">
+                    <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,22 +16,22 @@
                                 :tabindex="isExactActive ? '0' : '-1'"
                                 @click="onItemClick($event, item, i, navigate)"
                                 @keydown="onKeydownItem($event, item, i, navigate)"
-                                v-bind="ptm('action')"
+                                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)" v-bind="ptm('icon')" />
-                                <span class="p-menuitem-text" v-bind="ptm('label')">{{ 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)" v-bind="ptm('menuitem')">
+                <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)" v-bind="ptm('action')">
+                        <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)" v-bind="ptm('icon')" />
-                            <span class="p-menuitem-text" v-bind="ptm('label')">{{ 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>
@@ -97,6 +97,13 @@ export default {
         clearTimeout(this.timeout);
     },
     methods: {
+        getPTOptions(key, index) {
+            return this.ptm(key, {
+                options: {
+                    order: index
+                }
+            });
+        },
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();