Skip to content

Commit

Permalink
Merge pull request #13911 from primefaces/issue-13910
Browse files Browse the repository at this point in the history 
Fixed #13910 - Menu Templating
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored Oct 25, 2023
2 parents 21e0575 + ea4c2b0 commit da7a7dd
Show file tree
Hide file tree
Showing 12 changed files with 700 additions and 448 deletions.
6 changes: 5 additions & 1 deletion src/app/components/api/menuitem.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { QueryParamsHandling } from '@angular/router';
import { TooltipOptions } from './tooltipoptions';
import { MegaMenuItem } from './megamenuitem';
import { TooltipOptions } from './tooltipoptions';

/**
* MenuItem provides the following properties. Note that not all of them may be utilized by the tabmenu component.
Expand Down Expand Up @@ -143,6 +143,10 @@ export interface MenuItem {
* @see {TooltipOptions}
*/
tooltipOptions?: TooltipOptions;
/**
* Optional
*/
[key: string]: any;
}

/**
Expand Down
34 changes: 26 additions & 8 deletions src/app/components/breadcrumb/breadcrumb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,15 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
[attr.tabindex]="item.disabled ? null : '0'"
[ariaCurrentWhenActive]="isCurrentUrl(item)"
>
<span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
<ng-container *ngIf="item.label">
<span *ngIf="item.escape !== false; else htmlLabel" class="p-menuitem-text">{{ item.label }}</span>
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
<ng-container *ngIf="!itemTemplate">
<span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
<ng-container *ngIf="item.label">
<span *ngIf="item.escape !== false; else htmlLabel" class="p-menuitem-text">{{ item.label }}</span>
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
</ng-container>
</ng-container>
<ng-container *ngIf="itemTemplate">
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
</ng-container>
</a>
<a
Expand All @@ -112,10 +117,15 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
[state]="item.state"
[ariaCurrentWhenActive]="isCurrentUrl(item)"
>
<span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
<ng-container *ngIf="item.label">
<span *ngIf="item.escape !== false; else htmlRouteLabel" class="p-menuitem-text">{{ item.label }}</span>
<ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
<ng-container *ngIf="!itemTemplate">
<span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
<ng-container *ngIf="item.label">
<span *ngIf="item.escape !== false; else htmlRouteLabel" class="p-menuitem-text">{{ item.label }}</span>
<ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
</ng-container>
</ng-container>
<ng-container *ngIf="itemTemplate">
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
</ng-container>
</a>
</li>
Expand Down Expand Up @@ -171,6 +181,8 @@ export class Breadcrumb implements AfterContentInit {

separatorTemplate: TemplateRef<any> | undefined;

itemTemplate: TemplateRef<any> | undefined;

constructor(private router: Router) {}

onClick(event: MouseEvent, item: MenuItem) {
Expand Down Expand Up @@ -208,6 +220,12 @@ export class Breadcrumb implements AfterContentInit {
case 'separator':
this.separatorTemplate = item.template;
break;
case 'item':
this.itemTemplate = item.template;
break;
default:
this.itemTemplate = item.template;
break;
}
});
}
Expand Down
165 changes: 90 additions & 75 deletions src/app/components/contextmenu/contextmenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,12 @@ import {
Inject,
Input,
NgModule,
OnChanges,
OnDestroy,
OnInit,
Output,
PLATFORM_ID,
QueryList,
Renderer2,
SimpleChanges,
TemplateRef,
ViewChild,
ViewContainerRef,
Expand All @@ -34,8 +32,8 @@ import { DomHandler } from 'primeng/dom';
import { AngleRightIcon } from 'primeng/icons/angleright';
import { RippleModule } from 'primeng/ripple';
import { TooltipModule } from 'primeng/tooltip';
import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';

@Component({
selector: 'p-contextMenuSub',
Expand Down Expand Up @@ -90,88 +88,94 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
[tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
>
<div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, processedItem)" (mouseenter)="onItemMouseEnter({$event, processedItem})">
<a
*ngIf="!getItemProp(processedItem, 'routerLink')"
[attr.href]="getItemProp(processedItem, 'url')"
[attr.aria-hidden]="true"
[attr.data-automationid]="getItemProp(processedItem, 'automationId')"
[attr.data-pc-section]="'action'"
[target]="getItemProp(processedItem, 'target')"
[ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
[attr.tabindex]="-1"
pRipple
>
<span
*ngIf="getItemProp(processedItem, 'icon')"
class="p-menuitem-icon"
[ngClass]="getItemProp(processedItem, 'icon')"
[ngStyle]="getItemProp(processedItem, 'iconStyle')"
[attr.data-pc-section]="'icon'"
<ng-container *ngIf="!itemTemplate">
<a
*ngIf="!getItemProp(processedItem, 'routerLink')"
[attr.href]="getItemProp(processedItem, 'url')"
[attr.aria-hidden]="true"
[attr.data-automationid]="getItemProp(processedItem, 'automationId')"
[attr.data-pc-section]="'action'"
[target]="getItemProp(processedItem, 'target')"
[ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
[attr.tabindex]="-1"
pRipple
>
</span>
<span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
{{ getItemLabel(processedItem) }}
</span>
<ng-template #htmlLabel>
<span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
</ng-template>
<span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
<ng-container *ngIf="isItemGroup(processedItem)">
<AngleRightIcon *ngIf="!contextMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
<ng-template *ngTemplateOutlet="contextMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
</ng-container>
</a>
<a
*ngIf="getItemProp(processedItem, 'routerLink')"
[routerLink]="getItemProp(processedItem, 'routerLink')"
[attr.data-automationid]="getItemProp(processedItem, 'automationId')"
[attr.tabindex]="-1"
[attr.aria-hidden]="true"
[attr.data-pc-section]="'action'"
[queryParams]="getItemProp(processedItem, 'queryParams')"
[routerLinkActive]="'p-menuitem-link-active'"
[routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
[target]="getItemProp(processedItem, 'target')"
[ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
[fragment]="getItemProp(processedItem, 'fragment')"
[queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
[preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
[skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
[replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
[state]="getItemProp(processedItem, 'state')"
pRipple
>
<span
*ngIf="getItemProp(processedItem, 'icon')"
class="p-menuitem-icon"
[ngClass]="getItemProp(processedItem, 'icon')"
[ngStyle]="getItemProp(processedItem, 'iconStyle')"
[attr.data-pc-section]="'icon'"
[attr.aria-hidden]="true"
<span
*ngIf="getItemProp(processedItem, 'icon')"
class="p-menuitem-icon"
[ngClass]="getItemProp(processedItem, 'icon')"
[ngStyle]="getItemProp(processedItem, 'iconStyle')"
[attr.data-pc-section]="'icon'"
[attr.aria-hidden]="true"
[attr.tabindex]="-1"
>
</span>
<span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
{{ getItemLabel(processedItem) }}
</span>
<ng-template #htmlLabel>
<span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
</ng-template>
<span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
<ng-container *ngIf="isItemGroup(processedItem)">
<AngleRightIcon *ngIf="!contextMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
<ng-template *ngTemplateOutlet="contextMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
</ng-container>
</a>
<a
*ngIf="getItemProp(processedItem, 'routerLink')"
[routerLink]="getItemProp(processedItem, 'routerLink')"
[attr.data-automationid]="getItemProp(processedItem, 'automationId')"
[attr.tabindex]="-1"
[attr.aria-hidden]="true"
[attr.data-pc-section]="'action'"
[queryParams]="getItemProp(processedItem, 'queryParams')"
[routerLinkActive]="'p-menuitem-link-active'"
[routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
[target]="getItemProp(processedItem, 'target')"
[ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
[fragment]="getItemProp(processedItem, 'fragment')"
[queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
[preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
[skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
[replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
[state]="getItemProp(processedItem, 'state')"
pRipple
>
</span>
<span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
{{ getItemLabel(processedItem) }}
</span>
<ng-template #htmlLabel>
<span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
</ng-template>
<span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
<ng-container *ngIf="isItemGroup(processedItem)">
<AngleRightIcon *ngIf="!contextMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
<ng-template *ngTemplateOutlet="contextMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
</ng-container>
</a>
<span
*ngIf="getItemProp(processedItem, 'icon')"
class="p-menuitem-icon"
[ngClass]="getItemProp(processedItem, 'icon')"
[ngStyle]="getItemProp(processedItem, 'iconStyle')"
[attr.data-pc-section]="'icon'"
[attr.aria-hidden]="true"
[attr.tabindex]="-1"
>
</span>
<span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
{{ getItemLabel(processedItem) }}
</span>
<ng-template #htmlLabel>
<span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
</ng-template>
<span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
<ng-container *ngIf="isItemGroup(processedItem)">
<AngleRightIcon *ngIf="!contextMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
<ng-template *ngTemplateOutlet="contextMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
</ng-container>
</a>
</ng-container>
<ng-container *ngIf="itemTemplate">
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
</ng-container>
</div>
<p-contextMenuSub
*ngIf="isItemVisible(processedItem) && isItemGroup(processedItem)"
[items]="processedItem.items"
[itemTemplate]="itemTemplate"
[menuId]="menuId"
[visible]="isItemActive(processedItem) && isItemGroup(processedItem)"
[activeItemPath]="activeItemPath"
Expand All @@ -195,6 +199,8 @@ export class ContextMenuSub {

@Input() items: any[];

@Input() itemTemplate: HTMLElement | undefined;

@Input() root: boolean | undefined = false;

@Input() autoZIndex: boolean = true;
Expand Down Expand Up @@ -352,6 +358,7 @@ export class ContextMenuSub {
#rootmenu
[root]="true"
[items]="processedItems"
[itemTemplate]="itemTemplate"
[menuId]="id"
[tabindex]="!disabled ? tabindex : -1"
[ariaLabel]="ariaLabel"
Expand Down Expand Up @@ -463,6 +470,8 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {

submenuIconTemplate: Nullable<TemplateRef<any>>;

itemTemplate: Nullable<TemplateRef<any>>;

container: HTMLDivElement | undefined;

outsideClickListener: VoidListener;
Expand Down Expand Up @@ -592,6 +601,12 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
case 'submenuicon':
this.submenuIconTemplate = item.template;
break;
case 'item':
this.itemTemplate = item.template;
break;
default:
this.itemTemplate = item.template;
break;
}
});
}
Expand Down
Loading

1 comment on commit da7a7dd

@vercel
Copy link

@vercel vercel bot commented on da7a7dd Oct 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test.vercel.app
primeng-ssr-test-primeng-test.vercel.app

Please sign in to comment.