Refactor #4190 - For Breadcrumb

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

View file

@ -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>