carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update uikit components

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-07 11:38:04 +03:00
parent 078d0636b4
commit c89ea65b11
5 changed files with 191 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/uikit/listdoc.ts
View File

@@ -1,5 +1,4 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { DataViewModule } from 'primeng/dataview'; import { DataViewModule } from 'primeng/dataview';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';

17
src/views/uikit/mediadoc.ts
View File

@@ -9,8 +9,8 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
import { PhotoService } from '@/src/service/demo/photo.service'; import { PhotoService } from '@/src/service/demo/photo.service';
@Component({ @Component({
standalone:true, standalone: true,
imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule], imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
template: `<div class="card"> template: `<div class="card">
<div class="font-semibold text-xl mb-4">Carousel</div> <div class="font-semibold text-xl mb-4">Carousel</div>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions"> <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions">
@@ -51,10 +51,9 @@ import { PhotoService } from '@/src/service/demo/photo.service';
</ng-template> </ng-template>
</p-galleria> </p-galleria>
</div>`, </div>`,
providers: [ProductService, PhotoService], providers: [ProductService, PhotoService]
}) })
export class MediaDoc implements OnInit { export class MediaDoc implements OnInit {
products!: Product[]; products!: Product[];
images!: any[]; images!: any[];
@@ -96,14 +95,17 @@ export class MediaDoc implements OnInit {
} }
]; ];
constructor(private productService: ProductService, private photoService: PhotoService) { } constructor(
private productService: ProductService,
private photoService: PhotoService
) {}
ngOnInit() { ngOnInit() {
this.productService.getProductsSmall().then(products => { this.productService.getProductsSmall().then((products) => {
this.products = products; this.products = products;
}); });
this.photoService.getImages().then(images => { this.photoService.getImages().then((images) => {
this.images = images; this.images = images;
}); });
} }
@@ -120,5 +122,4 @@ export class MediaDoc implements OnInit {
return 'success'; return 'success';
} }
} }
} }

44
src/views/uikit/menudoc.ts
View File

@@ -14,22 +14,38 @@ import { StepperModule } from 'primeng/stepper';
import { IconField, IconFieldModule } from 'primeng/iconfield'; import { IconField, IconFieldModule } from 'primeng/iconfield';
import { InputIcon, InputIconModule } from 'primeng/inputicon'; import { InputIcon, InputIconModule } from 'primeng/inputicon';
@Component({ @Component({
standalone:true, standalone: true,
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, IconFieldModule, InputIconModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule, IconField, InputIcon], imports: [
CommonModule,
BreadcrumbModule,
TieredMenuModule,
IconFieldModule,
InputIconModule,
MenuModule,
ButtonModule,
ContextMenuModule,
MegaMenuModule,
PanelMenuModule,
TabsModule,
MenubarModule,
InputTextModule,
TabsModule,
StepperModule,
TabsModule,
IconField,
InputIcon
],
template: ` template: `
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Menubar</div> <div class="font-semibold text-xl mb-4">Menubar</div>
<p-menubar [model]="nestedMenuItems"> <p-menubar [model]="nestedMenuItems">
<ng-template #end> <ng-template #end>
<p-iconfield> <p-iconfield>
<p-inputicon class="pi pi-search"/> <p-inputicon class="pi pi-search" />
<input type="text" pInputText placeholder="Search"> <input type="text" pInputText placeholder="Search" />
</p-iconfield> </p-iconfield>
</ng-template> </ng-template>
</p-menubar> </p-menubar>
</div> </div>
@@ -69,7 +85,7 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
<div class="md:w-1/3"> <div class="md:w-1/3">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Tiered Menu</div> <div class="font-semibold text-xl mb-4">Tiered Menu</div>
<p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu> <p-tieredmenu [model]="tieredMenuItems"></p-tieredmenu>
</div> </div>
</div> </div>
<div class="md:w-1/3"> <div class="md:w-1/3">
@@ -88,7 +104,7 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
<div class="card" #anchor> <div class="card" #anchor>
<div class="font-semibold text-xl mb-4">Context Menu</div> <div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display. Right click to display.
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu> <p-contextmenu [target]="anchor" [model]="contextMenuItems"></p-contextmenu>
</div> </div>
</div> </div>
</div> </div>
@@ -97,23 +113,22 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div> <div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<p-megaMenu [model]="megaMenuItems" /> <p-megamenu [model]="megaMenuItems" />
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div> <div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" /> <p-megamenu [model]="megaMenuItems" orientation="vertical" />
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">PanelMenu</div> <div class="font-semibold text-xl mb-4">PanelMenu</div>
<p-panelMenu [model]="panelMenuItems" /> <p-panelmenu [model]="panelMenuItems" />
</div> </div>
</div> </div>
</div> </div>
`, `
}) })
export class MenuDoc { export class MenuDoc {
nestedMenuItems = [ nestedMenuItems = [
{ {
label: 'Customers', label: 'Customers',
@@ -521,5 +536,4 @@ export class MenuDoc {
] ]
} }
]; ];
} }

8
src/views/uikit/miscdoc.ts
View File

@@ -20,10 +20,10 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
<div class="font-semibold text-xl mb-4">ProgressBar</div> <div class="font-semibold text-xl mb-4">ProgressBar</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2"> <div class="md:w-1/2">
<p-progressBar [value]="value" [showValue]="true"></p-progressBar> <p-progressbar [value]="value" [showValue]="true"></p-progressbar>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<p-progressBar [value]="50" [showValue]="false"></p-progressBar> <p-progressbar [value]="50" [showValue]="false"></p-progressbar>
</div> </div>
</div> </div>
</div> </div>
@@ -70,14 +70,14 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Avatar</div> <div class="font-semibold text-xl mb-4">Avatar</div>
<div class="font-semibold mb-4">Group</div> <div class="font-semibold mb-4">Group</div>
<p-avatarGroup styleClass="mb-4"> <p-avatargroup styleClass="mb-4">
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle"></p-avatar>
<p-avatar label="+2" shape="circle" size="large" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }"></p-avatar> <p-avatar label="+2" shape="circle" size="large" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }"></p-avatar>
</p-avatarGroup> </p-avatargroup>
<div class="font-semibold my-4">Label - Circle</div> <div class="font-semibold my-4">Label - Circle</div>
<p-avatar class="mr-2" label="P" size="xlarge" shape="circle"></p-avatar> <p-avatar class="mr-2" label="P" size="xlarge" shape="circle"></p-avatar>

63
src/views/uikit/overlaydoc.ts
View File

@@ -10,12 +10,12 @@ import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { TooltipModule } from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip';
import { Product, ProductService } from '@/src/service/demo/product.service'; import { Product, ProductService } from '@/src/service/demo/product.service';
import { TableModule } from 'primeng/table';
@Component({ @Component({
standalone: true, standalone: true,
imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule], imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule],
template:` template: ` <div class="flex flex-col md:flex-row gap-8">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Dialog</div> <div class="font-semibold text-xl mb-4">Dialog</div>
@@ -28,16 +28,32 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
<p-button label="Save" (click)="close()" /> <p-button label="Save" (click)="close()" />
</ng-template> </ng-template>
</p-dialog> </p-dialog>
<p-button label="Show" [style]="{width: 'auto'}" (click)="open()" /> <p-button label="Show" [style]="{ width: 'auto' }" (click)="open()" />
</div> </div>
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Popover</div> <div class="font-semibold text-xl mb-4">Popover</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<p-button type="button" label="Show" (click)="toggleDataTable(op2, $event)" /> <p-button type="button" label="Show" (click)="toggleDataTable(op2, $event)" />
<p-popover #op2 id="overlay_panel" [style]="{width: '450px'}"> <p-popover #op2 id="overlay_panel" [style]="{ width: '450px' }">
<!-- TABLE --> <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="id" [rows]="5" [paginator]="true" (onRowSelect)="onProductSelect(op2, $event)">
<ng-template #header>
<tr>
<th>Name</th>
<th>Image</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template #body let-product>
<tr [pSelectableRow]="product">
<td>{{ product.name }}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" class="w-16 shadow-sm" /></td>
<td>{{ product.price }}</td>
</tr>
</ng-template>
</p-table>
</p-popover> </p-popover>
<p-toast />
</div> </div>
</div> </div>
@@ -87,10 +103,10 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
</p> </p>
</p-drawer> </p-drawer>
<p-button icon="pi pi-arrow-right" (click)="visibleLeft = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-right" (click)="visibleLeft = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-arrow-left" (click)="visibleRight = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-left" (click)="visibleRight = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-arrow-down" (click)="visibleTop = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-down" (click)="visibleTop = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-arrow-up" (click)="visibleBottom = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-up" (click)="visibleBottom = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-external-link" (click)="visibleFull = true" /> <p-button icon="pi pi-external-link" (click)="visibleFull = true" />
</div> </div>
@@ -105,7 +121,7 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
<p-button label="Delete" icon="pi pi-trash" severity="danger" [style]="{ width: 'auto' }" (click)="openConfirmation()" /> <p-button label="Delete" icon="pi pi-trash" severity="danger" [style]="{ width: 'auto' }" (click)="openConfirmation()" />
<p-dialog header="Confirmation" [(visible)]="displayConfirmation" [style]="{ width: '350px' }" [modal]="true"> <p-dialog header="Confirmation" [(visible)]="displayConfirmation" [style]="{ width: '350px' }" [modal]="true">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" > </i> <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem"> </i>
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<ng-template #footer> <ng-template #footer>
@@ -119,7 +135,6 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
providers: [ConfirmationService, MessageService, ProductService] providers: [ConfirmationService, MessageService, ProductService]
}) })
export class OverlayDoc implements OnInit { export class OverlayDoc implements OnInit {
images: any[] = []; images: any[] = [];
display: boolean = false; display: boolean = false;
@@ -138,34 +153,44 @@ export class OverlayDoc implements OnInit {
displayConfirmation: boolean = false; displayConfirmation: boolean = false;
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { } selectedProduct!: Product;
constructor(
private productService: ProductService,
private confirmationService: ConfirmationService,
private messageService: MessageService
) {}
ngOnInit() { ngOnInit() {
this.productService.getProductsSmall().then(products => this.products = products); this.productService.getProductsSmall().then((products) => (this.products = products));
this.images = []; this.images = [];
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos1.jpg', source: 'assets/demo/images/sopranos/sopranos1.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1' thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg',
title: 'Sopranos 1'
}); });
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos2.jpg', source: 'assets/demo/images/sopranos/sopranos2.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2' thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg',
title: 'Sopranos 2'
}); });
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos3.jpg', source: 'assets/demo/images/sopranos/sopranos3.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3' thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg',
title: 'Sopranos 3'
}); });
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos4.jpg', source: 'assets/demo/images/sopranos/sopranos4.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4' thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg',
title: 'Sopranos 4'
}); });
} }
confirm(event: Event) { confirm(event: Event) {
this.confirmationService.confirm({ this.confirmationService.confirm({
key: 'confirm2', key: 'confirm2',
target: event.target || new EventTarget, target: event.target || new EventTarget(),
message: 'Are you sure that you want to proceed?', message: 'Are you sure that you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
accept: () => { accept: () => {