From ff78ee47aa6e6b2025507528ad0160b54a63ea4a 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: Mon, 20 Sep 2021 13:52:30 +0300
Subject: [PATCH] Fixed #1564 - Add tooltipOptions property to Dock v2

---
 api-generator/components/dock.js | 6 ++++++
 src/components/dock/Dock.d.ts    | 1 +
 src/components/dock/Dock.vue     | 5 +++--
 src/components/dock/DockSub.vue  | 9 +++++----
 src/views/dock/DockDoc.vue       | 6 ++++++
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index 64d5863cd7..f20d3033a6 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -22,6 +22,12 @@ const DockProps = [
         type: "object",
         default: "null",
         description: "Inline style of the element."
+    },
+    {
+        name: "tooltipOptions",
+        type: "object",
+        default: "null",
+        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'."
     }
 ];
 
diff --git a/src/components/dock/Dock.d.ts b/src/components/dock/Dock.d.ts
index b55175f5e2..d1e45c9aeb 100644
--- a/src/components/dock/Dock.d.ts
+++ b/src/components/dock/Dock.d.ts
@@ -5,6 +5,7 @@ declare class Dock extends Vue {
     model?: any[];
     className?: string;
     styles?: any;
+    tooltipOptions?: any;
     $slots: {
         'item': VNode[];
     }
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index e8e9f68778..c1f51c131e 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="styles">
-        <DockSub :model="model" :templates="$scopedSlots"></DockSub>
+        <DockSub :model="model" :templates="$scopedSlots" :tooltipOptions="tooltipOptions"></DockSub>
     </div>
 </template>
 
@@ -16,7 +16,8 @@ export default {
         },
         model: null,
         className: null,
-        styles: null
+        styles: null,
+        tooltipOptions: null
     },
     data() {
         return {
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index cff37ba46b..4c9b4afa9d 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -1,11 +1,11 @@
 <template>
     <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
         <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
-            <DockSubTemplate v-if="templates['item']" :item="item" :template="templates['item']" />
+            <DockSubTemplate v-if="templates['item']" :item="item" :template="templates['item']" :tooltipOptions="tooltipOptions" />
             <template v-else>
                 <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{href}">
                     <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target"
-                        :data-pr-tooltip="item.label" @click="onItemClick(e, item)">
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick(e, item)">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
@@ -13,7 +13,7 @@
                     </a>
                 </router-link>
                 <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target"
-                    :data-pr-tooltip="item.label" @click="onItemClick($event, item)">
+                    v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)">
                     <template v-if="typeof item.icon === 'string'">
                         <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                     </template>
@@ -69,7 +69,8 @@ export default {
         templates: {
             type: null,
             default: null
-        }
+        },
+        tooltipOptions: null
     },
     data() {
         return {
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index 1366954cc0..0d866ae9b7 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -81,6 +81,12 @@ export default {
                             <td>null</td>
                             <td>Inline style of the element.</td>
                         </tr>
+                        <tr>
+                            <td>tooltipOptions</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <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>
                     </tbody>
                 </table>
             </div>