#1254 for Dock

api-generator/components/dock.js

@@ -22,6 +22,12 @@ const DockProps = [
         type: "object",
         default: "null",
         description: "Inline style of the element."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: "true",
+        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
     }
 ];
 

src/components/dock/Dock.d.ts

@@ -5,6 +5,7 @@ interface DockProps {
     model?: any[];
     class?: string;
     style?: any;
+    exact?: boolean;
 }
 
 declare class Dock {

src/components/dock/Dock.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :template="$slots.item"></DockSub>
+        <DockSub :model="model" :template="$slots.item" :exact="exact"></DockSub>
     </div>
 </template>
 
@@ -16,35 +16,10 @@ export default {
         },
         model: null,
         class: null,
-        style: null
-    },
-    data() {
-        return {
-            currentIndex: -3
-        }
-    },
-    methods: {
-        onListMouseLeave() {
-            this.currentIndex = -3;
-        },
-        onItemMouseEnter(index) {
-            this.currentIndex = index;
-        },
-        onItemClick(e, item) {
-            if (item.command) {
-                item.command({ originalEvent: e, item });
-            }
-
-            e.preventDefault();
-        },
-        itemClass(index) {
-            return ['p-dock-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,
-                'p-dock-item-next': (this.currentIndex + 1) === index,
-                'p-dock-item-second-next': (this.currentIndex + 2) === index
-            }];
+        style: null,
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     computed: {

src/components/dock/DockSub.vue

@@ -3,17 +3,17 @@
         <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)">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
-                        <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
-                            :data-pr-tooltip="item.label" @click="onItemClick(e, item)">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                        <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
+                            :data-pr-tooltip="item.label" @click="onItemClick($event, item, navigate)">
                             <template v-if="typeof item.icon === 'string'">
                                 <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                             </template>
                             <component v-else :is="item.icon"></component>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
-                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)">
+                    <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
+                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
@@ -37,6 +37,10 @@ export default {
         template: {
             type: Function,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -51,12 +55,22 @@ export default {
         onItemMouseEnter(index) {
             this.currentIndex = index;
         },
-        onItemClick(e, item) {
-            if (item.command) {
-                item.command({ originalEvent: e, item });
+        onItemClick(event, item, navigate) {
+            if (this.disabled(item)) {
+                event.preventDefault();
+                return;
             }
 
-            e.preventDefault();
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         itemClass(index) {
             return ['p-dock-item', {
@@ -67,6 +81,13 @@ export default {
                 'p-dock-item-second-next': (this.currentIndex + 2) === index
             }];
         },
+        linkClass(item, routerProps) {
+            return ['p-dock-action', {
+                'p-disabled': this.disabled(item),
+                'router-link-active': routerProps && routerProps.isActive,
+                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+            }];
+        },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }

src/views/dock/DockDoc.vue

@@ -83,6 +83,12 @@ import Dock from 'primevue/dock';
                     <td>null</td>
                     <td>Inline style of the element.</td>
                 </tr>
+                <tr>
+                    <td>exact</td>
+                    <td>boolean</td>
+                    <td>true</td>
+                    <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                </tr>
             </tbody>
         </table>
     </div>