From 1bdf46a22ce459e2d9c695ccba7423bd89239569 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 27 Aug 2021 14:48:05 +0300
Subject: [PATCH] #1275 for breadcrumb

---
 api-generator/components/breadcrumb.js       |  6 ++++++
 src/components/breadcrumb/Breadcrumb.d.ts    |  1 +
 src/components/breadcrumb/Breadcrumb.vue     | 10 +++++++---
 src/components/breadcrumb/BreadcrumbItem.vue | 15 +++++++++++----
 src/views/breadcrumb/BreadcrumbDoc.vue       | 18 ++++++++++++++++++
 src/views/menu/MenuDoc.vue                   |  2 +-
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/api-generator/components/breadcrumb.js b/api-generator/components/breadcrumb.js
index 9026db2fd..035226d42 100644
--- a/api-generator/components/breadcrumb.js
+++ b/api-generator/components/breadcrumb.js
@@ -10,6 +10,12 @@ const BreadcrumbProps = [
         type: "menuitem",
         default: "null",
         description: "Configuration for the home icon."
+    },
+    {
+        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/breadcrumb/Breadcrumb.d.ts b/src/components/breadcrumb/Breadcrumb.d.ts
index b2524342a..76cbaaee7 100755
--- a/src/components/breadcrumb/Breadcrumb.d.ts
+++ b/src/components/breadcrumb/Breadcrumb.d.ts
@@ -1,6 +1,7 @@
 interface BreadcrumbProps {
     home?: any;
     model?: any[];
+    exact?: boolean;
 }
 
 declare class Breadcrumb {
diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index fde0b6b9c..eb7db95c2 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -1,10 +1,10 @@
 <template>
     <nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
         <ul>
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item"/>
-            <template v-for="item of model" :key="item.label" >
+            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
+            <template v-for="item of model" :key="item.label">
                 <li class="p-breadcrumb-chevron pi pi-chevron-right"></li>
-                <BreadcrumbItem :item="item" :template="$slots.item" />
+                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
             </template>
         </ul>
     </nav>
@@ -23,6 +23,10 @@ export default {
         home: {
             type: null,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     components: {
diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index cd32dcb8d..39134cffd 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -1,13 +1,13 @@
 <template>
     <li :class="containerClass(item)" v-if="visible()">
         <template v-if="!template">
-            <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
-                <a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
+            <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onClick($event, navigate)">
                     <span v-if="item.icon" :class="iconClass"></span>
                     <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
+            <a v-else :href="item.url||'#'" :class="linkClass()" @click="onClick" :target="item.target">
                 <span v-if="item.icon" :class="iconClass"></span>
                 <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
             </a>
@@ -21,7 +21,8 @@ export default {
     name: 'BreadcrumbItem',
     props: {
         item: null,
-        template: null
+        template: null,
+        exact: null
     },
     methods: {
         onClick(event, navigate) {
@@ -39,6 +40,12 @@ export default {
         containerClass(item) {
             return [{'p-disabled': this.disabled(item)}, this.item.class];
         },
+        linkClass(routerProps) {
+            return ['p-menuitem-link', {
+                '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/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index e7414af37..ecf370260 100755
--- a/src/views/breadcrumb/BreadcrumbDoc.vue
+++ b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -43,6 +43,18 @@ export default {
     &lt;/template&gt;
 &lt;/Breadcrumb&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;Breadcrumb :home="home" :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;/Breadcrumb&gt;
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -69,6 +81,12 @@ export default {
                         <td>menuitem</td>
                         <td>null</td>
                         <td>Configuration for the home icon.</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>
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index 79dc7221a..c5b76c021 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -152,7 +152,7 @@ toggle(event) {
                         <td>true</td>
                         <td>Whether to automatically manage layering.</td>
                     </tr>
-                     <tr>
+                    <tr>
                         <td>exact</td>
                         <td>boolean</td>
                         <td>true</td>