From c9e95e27989f127b256cf23b473e358347d13d6b 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: Tue, 18 Oct 2022 11:44:24 +0300
Subject: [PATCH] Refactor #3092

---
 api-generator/components/dock.js |   4 +-
 src/components/dock/Dock.d.ts    |   4 +-
 src/components/dock/Dock.vue     |   4 +-
 src/components/dock/DockSub.vue  | 117 ++++++++++++++++---------------
 src/views/dock/DockDoc.vue       |   4 +-
 5 files changed, 69 insertions(+), 64 deletions(-)

diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index 3789ba368f..731145926a 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -36,10 +36,10 @@ const DockProps = [
         description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
     },
     {
-        name: 'listId',
+        name: 'menuId',
         type: 'string',
         default: 'null',
-        description: 'Identifier of the list element.'
+        description: 'Unique identifier of the menu.'
     },
     {
         name: 'tabindex',
diff --git a/src/components/dock/Dock.d.ts b/src/components/dock/Dock.d.ts
index e9335ac69b..a73e543ac7 100644
--- a/src/components/dock/Dock.d.ts
+++ b/src/components/dock/Dock.d.ts
@@ -54,9 +54,9 @@ export interface DockProps {
      */
     tooltipOptions?: DockTooltipOptions;
     /**
-     * Identifier of the list element.
+     * Unique identifier of the menu.
      */
-    listId?: string | undefined;
+    menuId?: string | undefined;
     /**
      * Index of the element in tabbing order.
      */
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index dc470de587..b9237fbe42 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :listId="listId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex"></DockSub>
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex"></DockSub>
     </div>
 </template>
 
@@ -22,7 +22,7 @@ export default {
             type: Boolean,
             default: true
         },
-        listId: {
+        menuId: {
             type: String,
             default: null
         },
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index 621a35527c..fab53c258c 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -15,46 +15,46 @@
             @keydown="onListKeyDown"
             @mouseleave="onListMouseLeave"
         >
-            <li v-for="(item, index) of model" :key="index" :class="itemClass(index)" role="presentation" @mouseenter="onItemMouseEnter(index)">
-                <template v-if="!templates['item']">
-                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                        <a
-                            :id="id + '_' + index"
-                            v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
-                            :href="href"
-                            role="menuitem"
-                            :class="linkClass(item, `${id}_${index}`, { isActive, isExactActive })"
-                            :target="item.target"
-                            :aria-label="item.label"
-                            :aria-disabled="disabled(item)"
-                            @click="onItemClick($event, item, navigate)"
-                        >
-                            <template v-if="!templates['icon']">
-                                <span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
-                            </template>
-                            <component v-else :is="templates['icon']" :item="item"></component>
-                        </a>
-                    </router-link>
-                    <a
-                        v-else
-                        :id="id + '_' + index"
-                        v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
-                        :href="item.url"
-                        role="menuitem"
-                        :class="linkClass(item, `${id}_${index}`)"
-                        :target="item.target"
-                        :aria-label="item.label"
-                        :aria-disabled="disabled(item)"
-                        @click="onItemClick($event, item)"
-                    >
-                        <template v-if="!templates['icon']">
-                            <span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
+            <template v-for="(processedItem, index) of model" :key="index">
+                <div class="p-menuitem-content">
+                    <li :id="getItemId(index)" :class="itemClass(processedItem, index, getItemId(index))" role="menuitem" :aria-label="processedItem.label" :aria-disabled="disabled(processedItem)" @mouseenter="onItemMouseEnter(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
+                                    v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
+                                    :href="href"
+                                    :class="linkClass({ isActive, isExactActive })"
+                                    :target="processedItem.target"
+                                    tabindex="-1"
+                                    aria-hidden="true"
+                                    @click="onItemClick($event, processedItem, navigate)"
+                                >
+                                    <template v-if="!templates['icon']">
+                                        <span v-ripple :class="['p-dock-action-icon', processedItem.icon]"></span>
+                                    </template>
+                                    <component v-else :is="templates['icon']" :item="processedItem"></component>
+                                </a>
+                            </router-link>
+                            <a
+                                v-else
+                                v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
+                                :href="processedItem.url"
+                                :class="linkClass()"
+                                :target="processedItem.target"
+                                tabindex="-1"
+                                aria-hidden="true"
+                                @click="onItemClick($event, processedItem)"
+                            >
+                                <template v-if="!templates['icon']">
+                                    <span v-ripple :class="['p-dock-action-icon', processedItem.icon]"></span>
+                                </template>
+                                <component v-else :is="templates['icon']" :item="processedItem"></component>
+                            </a>
                         </template>
-                        <component v-else :is="templates['icon']" :item="item"></component>
-                    </a>
-                </template>
-                <component v-else :is="templates['item']" :item="item" :index="index"></component>
-            </li>
+                        <component v-else :is="templates['item']" :item="processedItem" :index="index"></component>
+                    </li>
+                </div>
+            </template>
         </ul>
     </div>
 </template>
@@ -85,7 +85,7 @@ export default {
             default: true
         },
         tooltipOptions: null,
-        listId: {
+        menuId: {
             type: String,
             default: null
         },
@@ -110,6 +110,9 @@ export default {
         };
     },
     methods: {
+        getItemId(index) {
+            return `${this.id}_${index}`;
+        },
         onListMouseLeave() {
             this.currentIndex = -3;
         },
@@ -208,43 +211,47 @@ export default {
             this.changeFocusedOptionIndex(0);
         },
         onEndKey() {
-            this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'a.p-dock-action:not(.p-disabled)').length - 1);
+            this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
         },
         onSpaceKey(event) {
-            const links = DomHandler.find(this.$refs.list, 'a.p-dock-action');
-            const matchedOptionIndex = [...links].findIndex((link) => link.id === this.focusedOptionId);
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === this.focusedOptionId);
 
             if (this.model[matchedOptionIndex].to) {
                 this.$router.push(this.model[matchedOptionIndex].to);
             } else if (this.model[matchedOptionIndex].url) {
-                links[matchedOptionIndex].click();
+                menuitems[matchedOptionIndex].children[0].children[0].click();
             } else {
                 this.onItemClick(event, this.model[matchedOptionIndex]);
             }
         },
         findNextOptionIndex(index) {
-            const links = DomHandler.find(this.$refs.list, 'a.p-dock-action:not(.p-disabled)');
-            const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            console.log(matchedOptionIndex);
 
             return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
         },
         findPrevOptionIndex(index) {
-            const links = DomHandler.find(this.$refs.list, 'a.p-dock-action:not(.p-disabled)');
-            const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
 
             return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
         },
         changeFocusedOptionIndex(index) {
-            const links = DomHandler.find(this.$refs.list, 'a.p-dock-action:not(.p-disabled)');
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
 
-            let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+            let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
 
-            this.focusedOptionIndex = links[order].getAttribute('id');
+            this.focusedOptionIndex = menuitems[order].getAttribute('id');
         },
-        itemClass(index) {
+        itemClass(item, index, id) {
             return [
                 'p-dock-item',
                 {
+                    'p-focus': id === this.focusedOptionIndex,
+                    'p-disabled': this.disabled(item),
                     'p-dock-item-second-prev': this.currentIndex - 2 === index,
                     'p-dock-item-prev': this.currentIndex - 1 === index,
                     'p-dock-item-current': this.currentIndex === index,
@@ -253,12 +260,10 @@ export default {
                 }
             ];
         },
-        linkClass(item, id, routerProps) {
+        linkClass(routerProps) {
             return [
                 'p-dock-action',
                 {
-                    'p-focus': id === this.focusedOptionIndex,
-                    'p-disabled': this.disabled(item),
                     'router-link-active': routerProps && routerProps.isActive,
                     'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
                 }
@@ -270,7 +275,7 @@ export default {
     },
     computed: {
         id() {
-            return this.listId || UniqueComponentId();
+            return this.menuId || UniqueComponentId();
         },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index a4fe12fae6..369e892b91 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -103,10 +103,10 @@ import Dock from 'primevue/dock';
                         <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
                     </tr>
                     <tr>
-                        <td>listId</td>
+                        <td>menuId</td>
                         <td>string</td>
                         <td>null</td>
-                        <td>Unique identifier of the list element.</td>
+                        <td>Unique identifier of the menu.</td>
                     </tr>
                     <tr>
                         <td>tabindex</td>