From c89ea65b118c81c5ec1cff01dba685cf8f9e07f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 7 Jan 2025 11:38:04 +0300 Subject: [PATCH] update uikit components --- src/views/uikit/listdoc.ts | 1 - src/views/uikit/mediadoc.ts | 81 ++++++++------- src/views/uikit/menudoc.ts | 190 ++++++++++++++++++---------------- src/views/uikit/miscdoc.ts | 8 +- src/views/uikit/overlaydoc.ts | 63 +++++++---- 5 files changed, 191 insertions(+), 152 deletions(-) diff --git a/src/views/uikit/listdoc.ts b/src/views/uikit/listdoc.ts index ede5fa6..8af3316 100644 --- a/src/views/uikit/listdoc.ts +++ b/src/views/uikit/listdoc.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; - import { FormsModule } from '@angular/forms'; import { DataViewModule } from 'primeng/dataview'; import { CommonModule } from '@angular/common'; diff --git a/src/views/uikit/mediadoc.ts b/src/views/uikit/mediadoc.ts index e33c220..7fecfd0 100644 --- a/src/views/uikit/mediadoc.ts +++ b/src/views/uikit/mediadoc.ts @@ -9,52 +9,51 @@ 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: `
-
Carousel
- - -
-
-
- - +
Carousel
+ + +
+
+
+ + +
-
-
{{ product.name }}
-
-
{{ '$' + product.price }}
- +
{{ product.name }}
+
+
{{ '$' + product.price }}
+ +
-
- - -
+ + +
-
-
Image
- -
+
+
Image
+ +
-
-
Galleria
- - - - - - - - -
`, - providers: [ProductService, PhotoService], +
+
Galleria
+ + + + + + + + +
`, + 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'; } } - } diff --git a/src/views/uikit/menudoc.ts b/src/views/uikit/menudoc.ts index eeac0e5..e6d00da 100644 --- a/src/views/uikit/menudoc.ts +++ b/src/views/uikit/menudoc.ts @@ -14,106 +14,121 @@ 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: ` -
-
Menubar
- - - - - - - +
+
Menubar
+ + + + + + + + +
+
+
Breadcrumb
+ +
- -
- -
-
Breadcrumb
- -
- -
-
-
-
Steps
- - - Header I - Header II - Header III - - -
-
-
-
-
TabMenu
- - - Header I - Header II - Header III - - -
+
+
+
+
Steps
+ + + Header I + Header II + Header III + +
- -
-
-
-
Tiered Menu
- -
-
-
-
-
Plain Menu
- -
-
-
-
-
Overlay Menu
- - -
- -
-
Context Menu
- Right click to display. - -
+
+
+
TabMenu
+ + + Header I + Header II + Header III + +
+
-
-
-
-
MegaMenu | Horizontal
- - -
MegaMenu | Vertical
- -
-
-
-
-
PanelMenu
- -
+
+
+
+
Tiered Menu
+
- `, +
+
+
Plain Menu
+ +
+
+
+
+
Overlay Menu
+ + +
+ +
+
Context Menu
+ Right click to display. + +
+
+
+ +
+
+
+
MegaMenu | Horizontal
+ + +
MegaMenu | Vertical
+ +
+
+
+
+
PanelMenu
+ +
+
+
+ ` }) export class MenuDoc { - nestedMenuItems = [ { label: 'Customers', @@ -521,5 +536,4 @@ export class MenuDoc { ] } ]; - } diff --git a/src/views/uikit/miscdoc.ts b/src/views/uikit/miscdoc.ts index 16b77b5..cff7360 100644 --- a/src/views/uikit/miscdoc.ts +++ b/src/views/uikit/miscdoc.ts @@ -20,10 +20,10 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
ProgressBar
- +
- +
@@ -70,14 +70,14 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
Avatar
Group
- + - +
Label - Circle
diff --git a/src/views/uikit/overlaydoc.ts b/src/views/uikit/overlaydoc.ts index 6ba3fcc..638f2af 100644 --- a/src/views/uikit/overlaydoc.ts +++ b/src/views/uikit/overlaydoc.ts @@ -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:` -
+ imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule], + template: `
Dialog
@@ -28,16 +28,32 @@ import { Product, ProductService } from '@/src/service/demo/product.service'; - +
Popover
- - + + + + + Name + Image + Price + + + + + {{ product.name }} + + {{ product.price }} + + + +
@@ -87,10 +103,10 @@ import { Product, ProductService } from '@/src/service/demo/product.service';

- - - - + + + +
@@ -105,7 +121,7 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
- + Are you sure you want to proceed?
@@ -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: () => {