From 62a83920b44de8448221de0ce7d0617bf5e38a46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 24 Jul 2023 17:18:43 +0300
Subject: [PATCH] Refactor #4190 - For Breadcrumb

---
 components/lib/breadcrumb/Breadcrumb.d.ts    | 15 +++++++++++
 components/lib/breadcrumb/BreadcrumbItem.vue | 26 ++++++++++++++------
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/components/lib/breadcrumb/Breadcrumb.d.ts b/components/lib/breadcrumb/Breadcrumb.d.ts
index f72a3c166..2c663ce7f 100755
--- a/components/lib/breadcrumb/Breadcrumb.d.ts
+++ b/components/lib/breadcrumb/Breadcrumb.d.ts
@@ -20,6 +20,7 @@ export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttri
 export interface BreadcrumbPassThroughMethodOptions {
     instance: any;
     props: BreadcrumbProps;
+    context: BreadcrumbContext;
 }
 
 /**
@@ -73,6 +74,20 @@ export interface BreadcrumbPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in Breadcrumb component.
+ */
+export interface BreadcrumbContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+}
+
 /**
  * Defines valid properties in Breadcrumb component.
  */
diff --git a/components/lib/breadcrumb/BreadcrumbItem.vue b/components/lib/breadcrumb/BreadcrumbItem.vue
index f86d635dd..0428a16e1 100755
--- a/components/lib/breadcrumb/BreadcrumbItem.vue
+++ b/components/lib/breadcrumb/BreadcrumbItem.vue
@@ -1,17 +1,17 @@
 <template>
-    <li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem')">
+    <li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
         <template v-if="!templates || !templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                <a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
+                <a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action', ptmOptions)">
                     <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
-                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
-                    <span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
+                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
+                    <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
-                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
-                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
-                <span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
+            <a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
+                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
+                <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="templates.item" :item="item"></component>
@@ -59,6 +59,16 @@ export default {
 
             return to === lastPath || url === lastPath ? 'page' : undefined;
         }
+    },
+    computed: {
+        ptmOptions() {
+            return {
+                context: {
+                    item: this.item,
+                    index: this.index
+                }
+            };
+        }
     }
 };
 </script>