From 608e222d609e8adba8db772d766cb52157745ddc 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: Wed, 19 Jul 2023 15:03:52 +0300
Subject: [PATCH] Refactor #4149 - For Dock

---
 components/lib/dock/Dock.d.ts   |  4 ++++
 components/lib/dock/DockSub.vue | 17 +++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/lib/dock/Dock.d.ts b/components/lib/dock/Dock.d.ts
index 8a0c73ae0..289da96f8 100644
--- a/components/lib/dock/Dock.d.ts
+++ b/components/lib/dock/Dock.d.ts
@@ -100,6 +100,10 @@ export interface DockState {
  * Defines current options in Dock component.
  */
 export interface DockContext {
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 44151d62e..96a9739ba 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -25,11 +25,11 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
-                    v-bind="getPTOptions(getItemId(index), 'menuitem')"
+                    v-bind="getPTOptions('menuitem', index)"
                     :data-p-focused="isItemActive(getItemId(index))"
                     :data-p-disabled="disabled(processedItem) || false"
                 >
-                    <div :class="cx('content')" v-bind="getPTOptions(getItemId(index), 'content')">
+                    <div :class="cx('content')" v-bind="getPTOptions('content', index)">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -40,10 +40,10 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
-                                    v-bind="getPTOptions(getItemId(index), 'action')"
+                                    v-bind="getPTOptions('action', index)"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
+                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                                 </a>
@@ -56,10 +56,10 @@
                                 :target="processedItem.target"
                                 tabindex="-1"
                                 aria-hidden="true"
-                                v-bind="getPTOptions(getItemId(index), 'action')"
+                                v-bind="getPTOptions('action', index)"
                             >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
+                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                             </a>
@@ -141,10 +141,11 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
-        getPTOptions(id, key) {
+        getPTOptions(key, index) {
             return this.ptm(key, {
                 context: {
-                    active: this.isItemActive(id)
+                    index,
+                    active: this.isItemActive(this.getItemId(index))
                 }
             });
         },