vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #4351 - For Breadcrumb

pull/4353/head
Tuğçe Küçükoğlu 2023-08-29 18:00:47 +03:00
parent bd1f590365
commit c32aec58a3
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/lib/breadcrumb/Breadcrumb.vue
View File

@ -1,14 +1,14 @@
<template>
<nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
<ol :class="cx('menu')" v-bind="ptm('menu')">
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" v-bind="ptm('home')" />
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
<template v-for="(item, i) of model" :key="item.label">
<li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
<slot name="separator">
<ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
</slot>
</li>
<BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" />
<BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" />
</template>
</ol>
</nav>
@ -22,6 +22,11 @@ import BreadcrumbItem from './BreadcrumbItem.vue';
export default {
name: 'Breadcrumb',
extends: BaseBreadcrumb,
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
components: {
BreadcrumbItem: BreadcrumbItem,
ChevronRightIcon: ChevronRightIcon

31
components/lib/breadcrumb/BreadcrumbItem.vue
View File

@ -1,6 +1,6 @@
<template>
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
<template v-if="!templates || !templates.item">
<template v-if="!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', ptmOptions)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
@ -14,12 +14,13 @@
<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>
<component v-else :is="templates.item" :item="item" :label="item.label && label()" :props="getMenuItemProps"></component>
</li>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { mergeProps } from 'vue';
export default {
name: 'BreadcrumbItem',
@ -55,7 +56,7 @@ export default {
},
isCurrentUrl() {
const { to, url } = this.item;
let lastPath = this.$router ? this.$router.currentRoute.path : '';
const lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
return to === lastPath || url === lastPath ? 'page' : undefined;
}
@ -68,6 +69,30 @@ export default {
index: this.index
}
};
},
getMenuItemProps() {
return {
action: mergeProps(
{
class: this.cx('action'),
'aria-current': this.isCurrentUrl(),
onClick: ($event) => this.onClick($event)
},
this.ptm('action', this.ptmOptions)
),
icon: mergeProps(
{
class: [this.cx('icon'), this.item.icon]
},
this.ptm('icon', this.ptmOptions)
),
label: mergeProps(
{
class: this.cx('label')
},
this.ptm('label', this.ptmOptions)
)
};
}
}
};