From 23f842e2038922e306a39c82c0bc8d7e17506836 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 27 Aug 2021 16:31:55 +0300
Subject: [PATCH] #1275 for PanelMenu

---
 api-generator/components/panelmenu.js     |  6 ++++++
 src/components/panelmenu/PanelMenu.d.ts   |  1 +
 src/components/panelmenu/PanelMenu.vue    | 18 ++++++++++++++----
 src/components/panelmenu/PanelMenuSub.vue | 20 ++++++++++++++------
 src/views/panelmenu/PanelMenuDoc.vue      | 18 ++++++++++++++++++
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/api-generator/components/panelmenu.js b/api-generator/components/panelmenu.js
index b0cd7267f..ccc23a40c 100644
--- a/api-generator/components/panelmenu.js
+++ b/api-generator/components/panelmenu.js
@@ -10,6 +10,12 @@ const PanelMenuProps = [
         type: "array",
         default: "null",
         description: "A map of keys to represent the expansion state in controlled mode."
+    },
+    {
+        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/panelmenu/PanelMenu.d.ts b/src/components/panelmenu/PanelMenu.d.ts
index efdef5b2a..fb541939e 100755
--- a/src/components/panelmenu/PanelMenu.d.ts
+++ b/src/components/panelmenu/PanelMenu.d.ts
@@ -3,6 +3,7 @@ import { VNode } from 'vue';
 interface PanelMenuProps {
     model?: any[];
     expandedKeys?: any;
+    exact?: boolean;
 }
 
 declare class PanelMenu {
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index a5e53ede4..9b920af7c 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -4,13 +4,13 @@
             <div v-if="visible(item)"  :class="getPanelClass(item)" :style="item.style">
                 <div :class="getHeaderClass(item)" :style="item.style">
                     <template v-if="!$slots.item">
-                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
-                            <a :href="href" class="p-panelmenu-header-link" @click="onItemClick($event, item, navigate)" role="treeitem">
+                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                            <a :href="href" :class="getHeaderLinkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem">
                                 <span v-if="item.icon" :class="getPanelIcon(item)"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
+                        <a v-else :href="item.url" :class="getHeaderLinkClass(item)" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
                             :aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
                             <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
                             <span v-if="item.icon" :class="getPanelIcon(item)"></span>
@@ -24,7 +24,7 @@
                         role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'">
                         <div class="p-panelmenu-content" v-if="item.items">
                             <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" 
-                                :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" />
+                                :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
                         </div>
                     </div>
                 </transition>
@@ -48,6 +48,10 @@ export default {
         expandedKeys: {
             type: null,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -107,6 +111,12 @@ export default {
         getPanelIcon(item) {
             return ['p-menuitem-icon', item.icon];
         },
+        getHeaderLinkClass(item, routerProps) {
+            return ['p-panelmenu-header-link', {
+                'router-link-active': routerProps && routerProps.isActive,
+                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+            }];
+        },
         isActive(item) {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
         },
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index e52379e84..08a13d767 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -3,13 +3,13 @@
         <template v-for="(item, i) of model" :key="item.label + i.toString()">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
-                        <a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                        <a :href="href" :class="linkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
+                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)"
                         role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
                         <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
@@ -20,7 +20,7 @@
                 <transition name="p-toggleable-content">
                     <div class="p-toggleable-content" v-show="isActive(item)">
                         <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template" 
-                            :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" />
+                            :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact"/>
                     </div>
                 </transition>
             </li>
@@ -45,6 +45,10 @@ export default {
         expandedKeys: {
             type: null,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -84,8 +88,12 @@ export default {
         getItemClass(item) {
             return ['p-menuitem', item.className];
         },
-        getLinkClass(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
+            }];
         },
         isActive(item) {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 35dee5e55..412bd3152 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -154,6 +154,18 @@ export default {
     &lt;/template&gt;
 &lt;/PanelMenu&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;PanelMenu :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;/PanelMenu&gt;
+</template>
 </code></pre>
 
         <h5>Programmatic Control</h5>
@@ -376,6 +388,12 @@ export default {
                         <td>array</td>
                         <td>null</td>
                         <td>A map of keys to represent the expansion state in controlled mode.</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>