vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #4190 - For Breadcrumb

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-07-24 17:18:43 +03:00
parent 7f67f640e5
commit 62a83920b4
2 changed files with 33 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/lib/breadcrumb/Breadcrumb.d.ts vendored
View file

@ -20,6 +20,7 @@ export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttri
export interface BreadcrumbPassThroughMethodOptions { export interface BreadcrumbPassThroughMethodOptions {
instance: any; instance: any;
props: BreadcrumbProps; props: BreadcrumbProps;
context: BreadcrumbContext;
} }
/** /**
@ -73,6 +74,20 @@ export interface BreadcrumbPassThroughAttributes {
[key: string]: any; [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. * Defines valid properties in Breadcrumb component.
*/ */

26
components/lib/breadcrumb/BreadcrumbItem.vue
View file

@ -1,17 +1,17 @@
<template> <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"> <template v-if="!templates || !templates.item">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom> <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')" /> <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-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')">{{ label() }}</span> <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')"> <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')" /> <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')" /> <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')">{{ label() }}</span> <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
</a> </a>
</template> </template>
<component v-else :is="templates.item" :item="item"></component> <component v-else :is="templates.item" :item="item"></component>
@ -59,6 +59,16 @@ export default {
return to === lastPath || url === lastPath ? 'page' : undefined; return to === lastPath || url === lastPath ? 'page' : undefined;
} }
},
computed: {
ptmOptions() {
return {
context: {
item: this.item,
index: this.index
}
};
}
} }
}; };
</script> </script>