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

Refactor #3907 - For Breadcrumb

pull/3913/head
Tuğçe Küçükoğlu 2023-04-26 12:57:16 +03:00
parent 3f169ac365
commit a04d4a470b
4 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/breadcrumb.js
View File

@ -16,6 +16,12 @@ const BreadcrumbProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

60
components/lib/breadcrumb/Breadcrumb.d.ts vendored
View File

@ -11,6 +11,61 @@ import { VNode } from 'vue';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BreadcrumbPassThroughMethodOptions {
props: BreadcrumbProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link BreadcrumbProps.pt}
*/
export interface BreadcrumbPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
menu?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the list item's DOM element.
*/
menuitem?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the action's DOM element.
*/
action?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
*/
icon?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
*/
label?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
*/
separator?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the separator icon's DOM element.
*/
separatorIcon?: BreadcrumbPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface BreadcrumbPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in Breadcrumb component.
*/
@ -36,6 +91,11 @@ export interface BreadcrumbProps {
* Identifier of the underlying menu element.
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {BreadcrumbPassThroughOptions}
*/
pt?: BreadcrumbPassThroughOptions;
}
/**

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

@ -1,25 +1,27 @@
<template>
<nav class="p-breadcrumb p-component">
<ol class="p-breadcrumb-list">
<BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" />
<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" />
<template v-for="(item, i) of model" :key="item.label">
<li v-if="home || i !== 0" class="p-menuitem-separator">
<li v-if="home || i !== 0" class="p-menuitem-separator" v-bind="ptm('separator')">
<slot name="separator">
<ChevronRightIcon aria-hidden="true" />
<ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
</slot>
</li>
<BreadcrumbItem :item="item" :templates="$slots" :exact="exact" />
<BreadcrumbItem :item="item" :templates="$slots" :exact="exact" :pt="pt" />
</template>
</ol>
</nav>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronRightIcon from 'primevue/icons/chevronright';
import BreadcrumbItem from './BreadcrumbItem.vue';
export default {
name: 'Breadcrumb',
extends: BaseComponent,
props: {
model: {
type: Array,

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

@ -1,17 +1,17 @@
<template>
<li v-if="visible()" :class="containerClass()">
<li v-if="visible()" :class="containerClass()" v-bind="ptm('menuitem')">
<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="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)">
<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]" />
<span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
<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>
</router-link>
<a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick">
<a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" 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]" />
<span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
<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>
</template>
<component v-else :is="templates.item" :item="item"></component>
@ -19,8 +19,11 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'BreadcrumbItem',
extends: BaseComponent,
props: {
item: null,
templates: null,