Refactor #3965 - For Breadcrumb
Tuğçe Küçükoğlu
parent
07c234c0ed
commit
b1d229f2c8
|
|
@ -0,0 +1,87 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-breadcrumb {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-breadcrumb-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-breadcrumb p-component',
|
||||
menu: 'p-breadcrumb-list',
|
||||
home: 'p-breadcrumb-home',
|
||||
separator: 'p-menuitem-separator',
|
||||
menuitem: ({ context }) => ['p-menuitem', { 'p-disabled': context.disabled() }],
|
||||
action: ({ context, routerProps }) => [
|
||||
'p-menuitem-link',
|
||||
{
|
||||
'router-link-active': routerProps && routerProps.isActive,
|
||||
'router-link-active-exact': context.exact && routerProps && routerProps.isExactActive
|
||||
}
|
||||
],
|
||||
icon: 'p-menuitem-icon',
|
||||
label: 'p-menuitem-text'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseBreadcrumb',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
home: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -96,6 +96,11 @@ export interface BreadcrumbProps {
|
|||
* @type {BreadcrumbPassThroughOptions}
|
||||
*/
|
||||
pt?: BreadcrumbPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<nav class="p-breadcrumb p-component" v-bind="ptm('root')">
|
||||
<ol class="p-breadcrumb-list" v-bind="ptm('menu')">
|
||||
<BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" :pt="pt" />
|
||||
<nav :class="cx('root')" v-bind="ptm('root')">
|
||||
<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')" />
|
||||
<template v-for="(item, i) of model" :key="item.label">
|
||||
<li v-if="home || i !== 0" class="p-menuitem-separator" v-bind="ptm('separator')">
|
||||
<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>
|
||||
|
|
@ -15,64 +15,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import ChevronRightIcon from 'primevue/icons/chevronright';
|
||||
import BaseBreadcrumb from './BaseBreadcrumb.vue';
|
||||
import BreadcrumbItem from './BreadcrumbItem.vue';
|
||||
|
||||
export default {
|
||||
name: 'Breadcrumb',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
home: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
extends: BaseBreadcrumb,
|
||||
components: {
|
||||
BreadcrumbItem: BreadcrumbItem,
|
||||
ChevronRightIcon: ChevronRightIcon
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-breadcrumb {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-breadcrumb-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<li v-if="visible()" :class="containerClass()" v-bind="ptm('menuitem')">
|
||||
<li v-if="visible()" :class="[getCXOptions('menuitem'), item.class]" v-bind="ptm('menuitem')">
|
||||
<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="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
|
||||
<span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
|
||||
<span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
|
||||
<a :href="href" :class="getCXOptions('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
|
||||
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
|
||||
<span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
|
||||
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
|
||||
<span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
|
||||
<span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
|
||||
<a v-else :href="item.url || '#'" :class="getCXOptions('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="getCXOptions('icon')" />
|
||||
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
|
||||
<span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates.item" :item="item"></component>
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseBreadcrumb from './BaseBreadcrumb.vue';
|
||||
|
||||
export default {
|
||||
name: 'BreadcrumbItem',
|
||||
extends: BaseComponent,
|
||||
extends: BaseBreadcrumb,
|
||||
props: {
|
||||
item: null,
|
||||
templates: null,
|
||||
|
|
@ -31,6 +31,12 @@ export default {
|
|||
index: null
|
||||
},
|
||||
methods: {
|
||||
getCXOptions(key, params) {
|
||||
return this.cx(key, {
|
||||
...params,
|
||||
context: this
|
||||
});
|
||||
},
|
||||
onClick(event, navigate) {
|
||||
if (this.item.command) {
|
||||
this.item.command({
|
||||
|
|
@ -43,18 +49,6 @@ export default {
|
|||
navigate(event);
|
||||
}
|
||||
},
|
||||
containerClass() {
|
||||
return ['p-menuitem', { 'p-disabled': this.disabled() }, 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;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue