From 16fe00529e81a67f305a2d8e932e694cfe161fa3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 27 Aug 2021 11:09:41 +0300
Subject: [PATCH] #1275 for menu

---
 api-generator/components/menu.js |  6 ++++++
 src/components/menu/Menu.d.ts    |  1 +
 src/components/menu/Menu.vue     |  8 ++++++--
 src/components/menu/Menuitem.vue | 15 ++++++++++-----
 src/views/menu/MenuDoc.vue       | 18 ++++++++++++++++++
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/api-generator/components/menu.js b/api-generator/components/menu.js
index 946e28718..9116b4e47 100644
--- a/api-generator/components/menu.js
+++ b/api-generator/components/menu.js
@@ -28,6 +28,12 @@ const MenuProps = [
         type: "boolean",
         default: "true",
         description: "Whether to automatically manage layering."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: "true",
+        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
     }
 ];
 
diff --git a/src/components/menu/Menu.d.ts b/src/components/menu/Menu.d.ts
index 34269f643..2ee9605d7 100755
--- a/src/components/menu/Menu.d.ts
+++ b/src/components/menu/Menu.d.ts
@@ -6,6 +6,7 @@ interface MenuProps {
     appendTo?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
+    exact?: boolean;
 }
 
 declare class Menu {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index aa05b1fec..c6a56637b 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -9,12 +9,12 @@
                                 <slot name="item" :item="item">{{item.label}}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + j">
-                                <Menuitem v-if="visible(child) && !child.separator" :item="child" @click="itemClick" :template="$slots.item" />
+                                <Menuitem v-if="visible(child) && !child.separator" :item="child" @click="itemClick" :template="$slots.item" :exact="exact" />
                                 <li v-else-if="visible(child) && child.separator" :class="['p-menu-separator', child.class]" :style="child.style" :key="'separator' + i + j" role="separator"></li>
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :class="['p-menu-separator', item.class]" :style="item.style" :key="'separator' + i.toString()" role="separator"></li>
-                        <Menuitem v-else :key="item.label + i.toString()" :item="item" @click="itemClick" :template="$slots.item" />
+                        <Menuitem v-else :key="item.label + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
                     </template>
                 </ul>
             </div>
@@ -51,6 +51,10 @@ export default {
         baseZIndex: {
             type: Number,
             default: 0
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 41a1f5df4..49241e197 100755
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -1,8 +1,8 @@
 <template>
     <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
         <template v-if="!template">
-            <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
-                <a :href="href" @click="onClick($event, navigate)" :class="linkClass(item)" v-ripple role="menuitem">
+            <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                <a :href="href" @click="onClick($event, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </a>
@@ -25,7 +25,8 @@ export default {
     emits: ['click'],
     props: {
         item: null,
-        template: null
+        template: null,
+        exact: null
     },
     methods: {
         onClick(event, navigate) {
@@ -35,8 +36,12 @@ export default {
                 navigate: navigate
             });
         },
-        linkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
+        linkClass(item, routerProps) {
+            return ['p-menuitem-link', {
+                'p-disabled': this.disabled(item),
+                'router-link-active': routerProps && routerProps.isActive,
+                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+            }];
         },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index aff161c64..79dc7221a 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -95,6 +95,18 @@ toggle(event) {
     &lt;/template&gt;
 &lt;/Menu&gt;
 </template>
+</code></pre>
+
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+<pre v-code><code><template v-pre>
+&lt;Menu :model="items"&gt;
+    &lt;template #item="{item}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+        &lt;/router-link&gt;
+    &lt;/template&gt;
+&lt;/Menu&gt;
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -139,6 +151,12 @@ toggle(event) {
                         <td>boolean</td>
                         <td>true</td>
                         <td>Whether to automatically manage layering.</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>