Fixed #1564 - Add tooltipOptions property to Dock v2

primefaces · Sep 20, 2021 · ff78ee4 · ff78ee4
1 parent a2671a2
commit ff78ee4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,19 +1,19 @@
 <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>
                         <DockSubIconTemplate v-else :icon="item.icon" />
                     </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
@@ -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>