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 { FormsModule } from '@angular/forms';
import { DataViewModule } from 'primeng/dataview';
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';
@Component({
standalone:true,
imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule],
standalone: true,
imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
template: `<div class="card">
<div class="font-semibold text-xl mb-4">Carousel</div>
<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>
</p-galleria>
</div>`,
providers: [ProductService, PhotoService],
providers: [ProductService, PhotoService]
})
export class MediaDoc implements OnInit {
products!: Product[];
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() {
this.productService.getProductsSmall().then(products => {
this.productService.getProductsSmall().then((products) => {
this.products = products;
});
this.photoService.getImages().then(images => {
this.photoService.getImages().then((images) => {
this.images = images;
});
}
@@ -120,5 +122,4 @@ export class MediaDoc implements OnInit {
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 { InputIcon, InputIconModule } from 'primeng/inputicon';
@Component({
standalone:true,
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, IconFieldModule, InputIconModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule, IconField, InputIcon],
standalone: true,
imports: [
CommonModule,
BreadcrumbModule,
TieredMenuModule,
IconFieldModule,
InputIconModule,
MenuModule,
ButtonModule,
ContextMenuModule,
MegaMenuModule,
PanelMenuModule,
TabsModule,
MenubarModule,
InputTextModule,
TabsModule,
StepperModule,
TabsModule,
IconField,
InputIcon
],
template: `
<div class="card">
<div class="font-semibold text-xl mb-4">Menubar</div>
<p-menubar [model]="nestedMenuItems">
<ng-template #end>
<p-iconfield>
<p-inputicon class="pi pi-search"/>
<input type="text" pInputText placeholder="Search">
<p-inputicon class="pi pi-search" />
<input type="text" pInputText placeholder="Search" />
</p-iconfield>
</ng-template>
</p-menubar>
</div>
@@ -69,7 +85,7 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
<div class="md:w-1/3">
<div class="card">
<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 class="md:w-1/3">
@@ -88,7 +104,7 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
<div class="card" #anchor>
<div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display.
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
<p-contextmenu [target]="anchor" [model]="contextMenuItems"></p-contextmenu>
</div>
</div>
</div>
@@ -97,23 +113,22 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
<div class="md:w-1/2">
<div class="card">
<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>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" />
<p-megamenu [model]="megaMenuItems" orientation="vertical" />
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">PanelMenu</div>
<p-panelMenu [model]="panelMenuItems" />
<p-panelmenu [model]="panelMenuItems" />
</div>
</div>
</div>
`,
`
})
export class MenuDoc {
nestedMenuItems = [
{
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="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2">
<p-progressBar [value]="value" [showValue]="true"></p-progressBar>
<p-progressbar [value]="value" [showValue]="true"></p-progressbar>
</div>
<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>
@@ -70,14 +70,14 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
<div class="card">
<div class="font-semibold text-xl mb-4">Avatar</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/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/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 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>
<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 { TooltipModule } from 'primeng/tooltip';
import { Product, ProductService } from '@/src/service/demo/product.service';
import { TableModule } from 'primeng/table';
@Component({
standalone: true,
imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule],
template:`
<div class="flex flex-col md:flex-row gap-8">
imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule],
template: ` <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<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()" />
</ng-template>
</p-dialog>
<p-button label="Show" [style]="{width: 'auto'}" (click)="open()" />
<p-button label="Show" [style]="{ width: 'auto' }" (click)="open()" />
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Popover</div>
<div class="flex flex-wrap gap-2">
<p-button type="button" label="Show" (click)="toggleDataTable(op2, $event)" />
<p-popover #op2 id="overlay_panel" [style]="{width: '450px'}">
<!-- TABLE -->
<p-popover #op2 id="overlay_panel" [style]="{ width: '450px' }">
<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-toast />
</div>
</div>
@@ -87,10 +103,10 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
</p>
</p-drawer>
<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-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-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-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-external-link" (click)="visibleFull = true" />
</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-dialog header="Confirmation" [(visible)]="displayConfirmation" [style]="{ width: '350px' }" [modal]="true">
<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>
</div>
<ng-template #footer>
@@ -119,7 +135,6 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
providers: [ConfirmationService, MessageService, ProductService]
})
export class OverlayDoc implements OnInit {
images: any[] = [];
display: boolean = false;
@@ -138,34 +153,44 @@ export class OverlayDoc implements OnInit {
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() {
this.productService.getProductsSmall().then(products => this.products = products);
this.productService.getProductsSmall().then((products) => (this.products = products));
this.images = [];
this.images.push({
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({
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({
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({
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) {
this.confirmationService.confirm({
key: 'confirm2',
target: event.target || new EventTarget,
target: event.target || new EventTarget(),
message: 'Are you sure that you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {