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

pf2tw

Browse Source
This commit is contained in:
Çetin
2025-01-03 15:48:50 +03:00
parent 64b1aea5d9
commit 8b2ff9c1b2
41 changed files with 2900 additions and 1575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/uikit/buttondoc.ts
View File

@@ -87,7 +87,7 @@ import {MenuItem} from "primeng/api";
</p-button>
<p-button type="button" outlined severity="success">
<img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
<span class="ml-2 text-bold">PrimeNG</span>
<span class="text-bold">PrimeNG</span>
</p-button>
</div>
</div>
@@ -96,9 +96,9 @@ import {MenuItem} from "primeng/api";
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Icons</div>
<div class="flex flex-wrap gap-2">
<p-button icon="pi pi-star-fill" class="mr-2 mb-2"></p-button>
<p-button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></p-button>
<p-button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></p-button>
<p-button icon="pi pi-star-fill"></p-button>
<p-button label="Bookmark" icon="pi pi-bookmark"></p-button>
<p-button label="Bookmark" icon="pi pi-bookmark" iconPos="right"></p-button>
</div>
</div>
<div class="card flex flex-col gap-4">
@@ -166,10 +166,10 @@ import {MenuItem} from "primeng/api";
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Loading</div>
<div class="flex flex-wrap gap-2">
<p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" loading="loading[0]" (click)="load(0)" />
<p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
<p-button type="button" class="mr-2 mb-2" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
<p-button type="button" class="mr-2 mb-2" label="Search" [loading]="loading[3]" (click)="load(3)" />
<p-button type="button" label="Search" icon="pi pi-search" loading="loading[0]" (click)="load(0)" />
<p-button type="button" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
<p-button type="button" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
<p-button type="button" label="Search" [loading]="loading[3]" (click)="load(3)" />
</div>
</div>
</div>

54
src/views/uikit/chartdoc.ts
View File

@@ -3,47 +3,53 @@ import { ChartModule } from 'primeng/chart';
import { CommonModule } from '@angular/common';
import { debounceTime, Subscription } from 'rxjs';
import { LayoutService } from '@/src/service/layout.service';
import { FluidModule } from 'primeng/fluid';
@Component({
standalone:true,
imports: [
CommonModule,
ChartModule
ChartModule,
FluidModule
],
template: `<div class="grid p-fluid">
<div class="col-12 lg:col-6">
template: ` <p-fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Linear Chart</h5>
<div class="font-semibold text-xl mb-4">Linear</div>
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Pie Chart</h5>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Bar</div>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Pie</div>
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Polar Area Chart</h5>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Doughnut</div>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Polar Area</div>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5>Bar Chart</h5>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Doughnut Chart</h5>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Radar Chart</h5>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Radar</div>
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
</div>
</div>
</div>
</p-fluid>
`,
})
export class ChartDoc {

40
src/views/uikit/filedoc.ts
View File

@@ -9,32 +9,32 @@ import { ToastModule } from 'primeng/toast';
standalone:true,
imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule],
template: `<div class="grid grid-cols-12 gap-8">
<div class="col-span-full lg:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Advanced</div>
<p-fileupload name="demo[]" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000" mode="advanced">
<ng-template #empty>
<div>Drag and drop files to here to upload.</div>
</ng-template>
<ng-template #content>
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
</ul>
</ng-template>
</p-fileupload>
<div class="col-span-full lg:col-span-6">
<div class="col-span-full lg:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Advanced</div>
<p-fileupload name="demo[]" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000" mode="advanced">
<ng-template #empty>
<div>Drag and drop files to here to upload.</div>
</ng-template>
<ng-template #content>
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
</ul>
</ng-template>
</p-fileupload>
</div>
</div>
<div class="col-span-full lg:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Basic</div>
<div class="card flex flex-col gap-6 items-center justify-center">
<p-toast />
<p-fileupload #fu mode="basic" chooseLabel="Choose" chooseIcon="pi pi-upload" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" />
<p-button label="Upload" (onClick)="fu.upload()" severity="secondary" />
<p-fileupload #fu mode="basic" chooseLabel="Choose" chooseIcon="pi pi-upload" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" />
<p-button label="Upload" (onClick)="fu.upload()" severity="secondary" />
</div>
</div>
</div>
</div>
</div>
</div>`,
</div>`,
providers: [MessageService]
})
export class FileDoc {
@@ -55,4 +55,4 @@ export class FileDoc {
this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
}
}
}

16
src/views/uikit/formlayoutdoc.ts
View File

@@ -30,7 +30,7 @@ import {TextareaModule} from "primeng/textarea";
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Vertical Grid</div>
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-6">
<div class="flex flex-col grow basis-0 gap-2">
<label for="name2">Name</label>
<input pInputText id="name2" type="text" />
@@ -45,13 +45,13 @@ import {TextareaModule} from "primeng/textarea";
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Horizontal</div>
<div class="grid grid-cols-12 gap-2">
<div class="grid grid-cols-12 gap-4 grid-cols-12 gap-2">
<label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-span-12 md:col-span-10">
<input pInputText id="name3" type="text" />
</div>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="grid grid-cols-12 gap-4 grid-cols-12 gap-2">
<label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
<div class="col-span-12 md:col-span-10">
<input pInputText id="email3" type="text" />
@@ -61,7 +61,7 @@ import {TextareaModule} from "primeng/textarea";
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Inline</div>
<div class="flex flex-wrap items-start gap-4">
<div class="flex flex-wrap items-start gap-6">
<div class="field">
<label for="firstname1" class="sr-only">Firstname</label>
<input pInputText id="firstname1" type="text" placeholder="Firstname" />
@@ -84,10 +84,10 @@ import {TextareaModule} from "primeng/textarea";
</div>
</div>
<div class="flex mt-8">
<div class="card flex flex-col gap-4 w-full">
<div class="flex mt-20">
<div class="card flex flex-col gap-6 w-full">
<div class="font-semibold text-xl">Advanced</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-wrap gap-2 w-full">
<label for="firstname2">Firstname</label>
<input pInputText id="firstname2" type="text" />
@@ -103,7 +103,7 @@ import {TextareaModule} from "primeng/textarea";
<textarea pTextarea id="address" rows="4"></textarea>
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-wrap gap-2 w-full">
<label for="state">State</label>
<p-select id="state" [(ngModel)]="dropdownItem" [options]="dropdownItems" optionLabel="name" placeholder="Select One" class="w-full"></p-select>

21
src/views/uikit/inputdoc.ts
View File

@@ -61,7 +61,7 @@ import { NodeService } from '@/src/service/node.service';
template: `
<p-fluid class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">InputText</div>
<div class="flex flex-col md:flex-row gap-4">
<input pInputText type="text" placeholder="Default"/>
@@ -100,12 +100,13 @@ import { NodeService } from '@/src/service/node.service';
<p-inputnumber [(ngModel)]="inputNumberValue" showButtons mode="decimal"></p-inputnumber>
</div>
<div class="card flex flex-col gap-4">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Slider</div>
<input pInputText [(ngModel)]="sliderValue" type="number"/>
<p-slider [(ngModel)]="sliderValue"/>
<div class="flex flex-row mt-6">
<div class="flex flex-col gap-4 w-1/2">
<div class="font-semibold text-xl">Rating</div>
<p-rating [(ngModel)]="ratingValue"/>
@@ -121,7 +122,7 @@ import { NodeService } from '@/src/service/node.service';
</div>
</div>
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">RadioButton</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center">
@@ -159,7 +160,7 @@ import { NodeService } from '@/src/service/node.service';
<p-toggleswitch [(ngModel)]="switchValue"/>
</div>
<div class="card flex flex-col gap-4">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Listbox</div>
<p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true"/>
@@ -171,7 +172,7 @@ import { NodeService } from '@/src/service/node.service';
<p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true">
<ng-template #selecteditems let-countries>
@for (country of countries; track country.code) {
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2">
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast text-primary-contrast rounded-border mr-2">
<span [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width: 18px; height: 12px"></span>
<div>{{ country.name }}</div>
</div>
@@ -189,7 +190,7 @@ import { NodeService } from '@/src/service/node.service';
<p-treeselect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeselect>
</div>
<div class="card flex flex-col gap-4">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">ToggleButton</div>
<p-togglebutton [(ngModel)]="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }"/>
@@ -199,10 +200,10 @@ import { NodeService } from '@/src/service/node.service';
</div>
</p-fluid>
<p-fluid class="flex mt-8">
<div class="card flex flex-col gap-4 w-full">
<p-fluid class="flex mt-20">
<div class="card flex flex-col gap-6 w-full">
<div class="font-semibold text-xl">InputGroup</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-6">
<p-inputgroup>
<p-inputgroup-addon>
<i class="pi pi-user"></i>
@@ -221,7 +222,7 @@ import { NodeService } from '@/src/service/node.service';
<p-inputgroup-addon>.00</p-inputgroup-addon>
</p-inputgroup>
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-6">
<p-inputgroup>
<p-button label="Search"/>
<input pInputText placeholder="Keyword"/>

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

@@ -63,7 +63,7 @@ import { Product, ProductService } from '@/src/service/product.service';
</div>
</div>
</div>
<div class="flex flex-col md:items-end gap-8">
<div class="flex flex-col md:items-end gap-20">
<span class="text-xl font-semibold">{{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2">
<p-button icon="pi pi-heart" [outlined]="true"></p-button>
@@ -84,7 +84,7 @@ import { Product, ProductService } from '@/src/service/product.service';
class="col-span-12 sm:col-span-6 lg:col-span-4 p-2">
<div
class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
<div class="bg-surface-50 flex justify-center rounded p-6">
<div class="relative mx-auto">
<img class="rounded w-full"
src="https://primefaces.org/cdn/primevue/images/product/{{item.image}}"
@@ -94,7 +94,7 @@ import { Product, ProductService } from '@/src/service/product.service';
[style]="{left: '4px', top: '4px'}"></p-tag>
</div>
</div>
<div class="pt-6">
<div class="pt-12">
<div class="flex flex-row justify-between items-start gap-2">
<div>
<span
@@ -134,10 +134,10 @@ import { Product, ProductService } from '@/src/service/product.service';
</p-dataview>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<div class="flex flex-col lg:flex-row gap-20">
<div class="lg:w-2/3">
<div class="card">
<div class="font-semibold text-xl mb-4">PickList</div>
<div class="font-semibold text-xl mb-6">PickList</div>
<p-pick-list [source]="sourceCities" [target]="targetCities" breakpoint="1400px">
<ng-template #item let-item>
{{ item.name }}
@@ -148,7 +148,7 @@ import { Product, ProductService } from '@/src/service/product.service';
<div class="lg:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">OrderList</div>
<div class="font-semibold text-xl mb-6">OrderList</div>
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true"
[listStyle]="{'height':'250px'}">
<ng-template #item let-city>

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

@@ -11,56 +11,46 @@ import { PhotoService } from '@/src/service/photo.service';
@Component({
standalone:true,
imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule],
template: `<div class="grid p-fluid">
<div class="col-12">
<div class="card">
<h5>Carousel</h5>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
<ng-template let-product #item>
<div class="border border-surface rounded-border m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-4" width="50%"/>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
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]="carouselResponsiveOptions">
<ng-template let-product #item>
<div class="border border-surface rounded-border m-2 p-6">
<div class="mb-6">
<div class="relative mx-auto">
<img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-lg" width="50%"/>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
</div>
</div>
<div class="mb-6 font-medium">{{ product.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<span>
<p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
</span>
</div>
</div>
</div>
<div class="mb-4 font-medium">{{ product.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<span>
<p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
</span>
</div>
</div>
</ng-template>
</p-carousel>
</div>
</ng-template>
</p-carousel>
</div>
<div class="col-12">
<div class="card">
<h5>Image</h5>
<div class="flex justify-content-center">
<p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
</div>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Image</div>
<p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
</div>
<div class="col-12">
<div class="card">
<h5>Galleria</h5>
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template #item let-item>
<img [src]="item.itemImageSrc" style="width:100%" />
</ng-template>
<ng-template #thumbnail let-item>
<img [src]="item.thumbnailImageSrc" />
</ng-template>
</p-galleria>
</div>
</div>
</div>`,
<div class="card">
<div class="font-semibold text-xl mb-4">Galleria</div>
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template #item let-item>
<img [src]="item.itemImageSrc" style="width:100%" />
</ng-template>
<ng-template #thumbnail let-item>
<img [src]="item.thumbnailImageSrc" />
</ng-template>
</p-galleria>
</div>`,
})
export class MediaDoc implements OnInit {

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

@@ -17,88 +17,88 @@ import { StepperModule } from 'primeng/stepper';
standalone:true,
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule],
template: `
<div class="card">
<div class="font-semibold text-xl mb-4">Menubar</div>
<p-menubar [model]="nestedMenuItems">
<ng-template #end>
<div class="card">
<div class="font-semibold text-xl mb-4">Menubar</div>
<p-menubar [model]="nestedMenuItems">
<ng-template #end>
<span class="p-input-icon-right">
<input type="text" pInputText placeholder="Search">
<i class="pi pi-search"></i>
</span>
</ng-template>
</p-menubar>
</div>
</ng-template>
</p-menubar>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Breadcrumb</div>
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Breadcrumb</div>
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
</div>
<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">Steps</div>
<p-stepper [value]="1">
<p-step-list>
<p-step [value]="1">Header I</p-step>
<p-step [value]="2">Header II</p-step>
<p-step [value]="3">Header III</p-step>
</p-step-list>
</p-stepper>
<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">Steps</div>
<p-stepper [value]="1">
<p-step-list>
<p-step [value]="1">Header I</p-step>
<p-step [value]="2">Header II</p-step>
<p-step [value]="3">Header III</p-step>
</p-step-list>
</p-stepper>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">TabMenu</div>
<p-tabs [value]="0">
<p-tablist>
<p-tab [value]="0">Header I</p-tab>
<p-tab [value]="1">Header II</p-tab>
<p-tab [value]="2">Header III</p-tab>
</p-tablist>
</p-tabs>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">TabMenu</div>
<p-tabs [value]="0">
<p-tablist>
<p-tab [value]="0">Header I</p-tab>
<p-tab [value]="1">Header II</p-tab>
<p-tab [value]="2">Header III</p-tab>
</p-tablist>
</p-tabs>
<div class="flex flex-col md:flex-row gap-8 mt-6">
<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>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<p-menu [model]="menuItems"></p-menu>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<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>
</div>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-6">
<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>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<p-menu [model]="menuItems"></p-menu>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<p-megaMenu [model]="megaMenuItems" />
<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>
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" />
</div>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<p-megaMenu [model]="megaMenuItems" />
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" />
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">PanelMenu</div>
@@ -106,7 +106,6 @@ import { StepperModule } from 'primeng/stepper';
</div>
</div>
</div>
</div>
`,
})
export class MenuDoc {

67
src/views/uikit/messagesdoc.ts
View File

@@ -11,43 +11,42 @@ import { FormsModule } from '@angular/forms';
standalone: true,
imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule],
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">Toast</div>
<div class="flex flex-wrap gap-2">
<p-button (click)="showSuccessViaToast()" label="Success" severity="success" />
<p-button (click)="showInfoViaToast()" label="Info" severity="info" />
<p-button (click)="showWarnViaToast()" label="Warn" severity="warn" />
<p-button (click)="showErrorViaToast()" label="Error" severity="danger" />
</div>
<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">Toast</div>
<div class="flex flex-wrap gap-2">
<p-button (click)="showSuccessViaToast()" label="Success" severity="success" />
<p-button (click)="showInfoViaToast()" label="Info" severity="info" />
<p-button (click)="showWarnViaToast()" label="Warn" severity="warn" />
<p-button (click)="showErrorViaToast()" label="Error" severity="danger" />
</div>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2">
<input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid"/>
<p-message severity="error">Username is required</p-message>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2">
<input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid"/>
<p-message severity="error">Username is required</p-message>
</div>
<div class="flex flex-wrap gap-2">
<input pInputText [(ngModel)]="email" placeholder="Email" aria-label="email" class="ng-dirty ng-invalid" />
<p-message severity="error" icon="pi pi-times-circle" />
</div>
</div>
<div class="flex flex-wrap gap-2">
<input pInputText [(ngModel)]="email" placeholder="Email" aria-label="email" class="ng-dirty ng-invalid" />
<p-message severity="error" icon="pi pi-times-circle" />
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<p-message severity="success">Success Message</p-message>
<p-message severity="info">Info Message</p-message>
<p-message severity="warn">Warn Message</p-message>
<p-message severity="error">Error Message</p-message>
<p-message severity="secondary">Secondary Message</p-message>
<p-message severity="contrast">Contrast Message</p-message>
</div>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<p-message severity="success">Success Message</p-message>
<p-message severity="info">Info Message</p-message>
<p-message severity="warn">Warn Message</p-message>
<p-message severity="error">Error Message</p-message>
<p-message severity="secondary">Secondary Message</p-message>
<p-message severity="contrast">Contrast Message</p-message>
</div>
<!-- <p-message *ngFor="let msg of message" [severity]="msg.severity">{{ msg.content }}</p-message> -->
</div>
</div>
</div>
`,
providers: [MessageService]
})
@@ -96,5 +95,5 @@ export class MessagesDoc {
this.msgs = [];
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
}
}
}

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

@@ -28,184 +28,174 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
ScrollTopModule,
OverlayBadgeModule
],
template: `<div class="grid">
<div class="col-12">
<div class="card">
<h5>ProgressBar</h5>
<div class="grid">
<div class="col">
<p-progressBar [value]="value" [showValue]="true"></p-progressBar>
</div>
<div class="col">
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
</div>
template: `<template>
<div class="card">
<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>
</div>
<div class="md:w-1/2">
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
</div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h4>Badge</h4>
<h5>Numbers</h5>
<div class="flex flex-wrap gap-2">
<p-badge value="2"></p-badge>
<p-badge value="8" severity="success"></p-badge>
<p-badge value="4" severity="info"></p-badge>
<p-badge value="12" severity="warn"></p-badge>
<p-badge value="3" severity="danger"></p-badge>
<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">Badge</div>
<div class="flex gap-2">
<p-badge value="2"></p-badge>
<p-badge value="8" severity="success"></p-badge>
<p-badge value="4" severity="info"></p-badge>
<p-badge value="12" severity="warn"></p-badge>
<p-badge value="3" severity="danger"></p-badge>
</div>
<div class="font-semibold my-4">Overlay</div>
<div class="flex gap-6">
<p-overlaybadge value="2">
<i class="pi pi-bell" style="font-size: 2rem"></i>
</p-overlaybadge>
<p-overlaybadge value="4" severity="danger">
<i class="pi pi-calendar" style="font-size: 2rem"></i>
</p-overlaybadge>
<p-overlaybadge severity="danger">
<i class="pi pi-envelope" style="font-size: 2rem"></i>
</p-overlaybadge>
</div>
<div class="font-semibold my-4">Button</div>
<div class="flex gap-2">
<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
</div>
<div class="font-semibold my-4">Sizes</div>
<div class="flex items-start gap-2">
<p-badge [value]="2"></p-badge>
<p-badge [value]="4" size="large" severity="warn"></p-badge>
<p-badge [value]="6" size="xlarge" severity="success"></p-badge>
</div>
</div>
<h5>Positioned Badge</h5>
<div class="flex flex-wrap gap-2">
<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
<i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
<i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
</div>
<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-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/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>
<h5>Inline Button Badge</h5>
<div class="flex flex-wrap gap-2">
<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
</div>
<h5>Sizes</h5>
<div class="flex flex-wrap gap-2 align-items-end">
<p-overlay-badge value="2"></p-overlay-badge>
<p-overlay-badge value="4" badgeSize="large" severity="warn"></p-overlay-badge>
<p-overlay-badge value="6" badgeSize="xlarge" severity="success"></p-overlay-badge>
</div>
</div>
<div class="card">
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<p-avatarGroup styleClass="mb-3">
<p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
<p-avatar image="assets/demo/images/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>
<h5>Label - Circle</h5>
<div class="flex flex-wrap gap-2 align-items-end">
<div class="font-semibold my-4">Label - Circle</div>
<p-avatar label="P" size="xlarge" shape="circle"></p-avatar>
<p-avatar label="V" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
<p-avatar label="U" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
<div class="font-semibold my-4">Icon - Badge</div>
<p-overlaybadge value="4" severity="danger" class="inline-flex">
<p-avatar label="U" size="xlarge" />
</p-overlaybadge>
</div>
<h5>Icon - Badge</h5>
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" size="xlarge"></p-avatar>
</div>
<div class="card">
<h4>ScrollTop</h4>
<p-scrollPanel [style]="{width: '250px', height: '200px'}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
</p-scrollPanel>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
<div class="flex flex-wrap gap-2">
<p-tag value="Primary"></p-tag>
<p-tag severity="success" value="Success"></p-tag>
<p-tag severity="info" value="Info"></p-tag>
<p-tag severity="warn" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>
</div>
<h5>Pills</h5>
<div class="flex flex-wrap gap-2">
<p-tag value="Primary" [rounded]="true"></p-tag>
<p-tag severity="success" value="Success" [rounded]="true"></p-tag>
<p-tag severity="info" value="Info" [rounded]="true"></p-tag>
<p-tag severity="warn" value="Warning" [rounded]="true"></p-tag>
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
</div>
<h5>Icons</h5>
<div class="flex flex-wrap gap-2">
<p-tag icon="pi pi-user" value="Primary"></p-tag>
<p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
<p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
<p-tag con="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
<div class="card">
<div class="font-semibold text-xl mb-4">ScrollTop</div>
<p-scrollPanel [style]="{width: '250px', height: '200px'}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
</p>
<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
</p-scrollPanel>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Tag</div>
<div class="font-semibold mb-4">Default</div>
<div class="flex gap-2">
<p-tag value="Primary"></p-tag>
<p-tag severity="success" value="Success"></p-tag>
<p-tag severity="info" value="Info"></p-tag>
<p-tag severity="warn" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>
</div>
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
<div class="flex flex-wrap align-items-center">
<p-chip label="Action" styleClass="m-1"></p-chip>
<p-chip label="Comedy" styleClass="m-1"></p-chip>
<p-chip label="Mystery" styleClass="m-1"></p-chip>
<p-chip label="Thriller" styleClass="m-1" [removable]="true"></p-chip>
<div class="font-semibold my-4">Pills</div>
<div class="flex gap-2">
<p-tag value="Primary" [rounded]="true"></p-tag>
<p-tag severity="success" value="Success" [rounded]="true"></p-tag>
<p-tag severity="info" value="Info" [rounded]="true"></p-tag>
<p-tag severity="warn" value="Warning" [rounded]="true"></p-tag>
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
</div>
<div class="font-semibold my-4">Icons</div>
<div class="flex gap-2">
<p-tag icon="pi pi-user" value="Primary"></p-tag>
<p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
<p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
<p-tag con="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
</div>
</div>
<h5>Icon</h5>
<div class="flex flex-wrap align-items-center">
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [removable]="true"></p-chip>
<div class="card">
<div class="font-semibold text-xl mb-4">Chip</div>
<div class="font-semibold mb-4">Basic</div>
<div class="flex items-center flex-col sm:flex-row">
<p-chip label="Action" styleClass="m-1"></p-chip>
<p-chip label="Comedy" styleClass="m-1"></p-chip>
<p-chip label="Mystery" styleClass="m-1"></p-chip>
<p-chip label="Thriller" styleClass="m-1" [removable]="true"></p-chip>
</div>
<div class="font-semibold my-4">Icon</div>
<div class="flex items-center flex-col sm:flex-row">
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [removable]="true"></p-chip>
</div>
<div class="font-semibold my-4">Image</div>
<div class="flex items-center flex-col sm:flex-row">
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip>
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
</div>
</div>
<h5>Image</h5>
<div class="flex flex-wrap align-items-center">
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip>
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
</div>
<h5>Styling</h5>
<div class="flex flex-wrap align-items-center">
<p-chip label="Action" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Comedy" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-1 custom-chip"></p-chip>
</div>
</div>
<div class="card">
<h4>Skeleton</h4>
<div class="border-round border-1 surface-border p-4">
<div class="flex mb-3">
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
<div>
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
<p-skeleton height=".5rem"></p-skeleton>
<div class="card">
<div class="font-semibold text-xl mb-4">Skeleton</div>
<div class="rounded-border border border-surface p-6">
<div class="flex mb-4">
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
<div>
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
<p-skeleton height=".5rem"></p-skeleton>
</div>
</div>
<p-skeleton width="100%" height="150px"></p-skeleton>
<div class="flex justify-between mt-4">
<p-skeleton width="4rem" height="2rem"></p-skeleton>
<p-skeleton width="4rem" height="2rem"></p-skeleton>
</div>
</div>
<p-skeleton width="100%" height="150px"></p-skeleton>
<div class="flex justify-content-between mt-3">
<p-skeleton width="4rem" height="2rem"></p-skeleton>
<p-skeleton width="4rem" height="2rem"></p-skeleton>
</div>
</div>
</div>
</div>
</div>
</template>
`,
})
export class MiscDoc {

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

@@ -9,10 +9,11 @@ import { ConfirmPopupModule } from 'primeng/confirmpopup';
import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms';
import { Product, ProductService } from '@/src/service/product.service';
import { TooltipModule } from 'primeng/tooltip';
@Component({
standalone: true,
imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule],
imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule],
template:`
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">

342
src/views/uikit/panelsdoc.ts
View File

@@ -34,224 +34,178 @@ import { TabsModule } from 'primeng/tabs';
TabsModule,
],
template: `
<div class="grid">
<div class="col-12">
<div class="flex flex-col">
<div class="card">
<h5>Toolbar</h5>
<div class="font-semibold text-xl mb-4">Toolbar</div>
<p-toolbar>
<div class="p-toolbar-group-left flex flex-wrap">
<button pButton type="button" label="New" icon="pi pi-plus" class="mr-2"></button>
<button pButton type="button" label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2"></button>
<ng-template #start>
<p-button icon="pi pi-plus" class="mr-2" severity="secondary" text />
<p-button icon="pi pi-print" class="mr-2" severity="secondary" text />
<p-button icon="pi pi-upload" severity="secondary" text />
</ng-template>
<i class="pi pi-bars p-toolbar-separator"></i>
<template #center>
<p-iconfield>
<p-inputicon>
<i class="pi pi-search" />
</p-inputicon>
<input pInputText placeholder="Search" />
</p-iconfield>
</template>
<button pButton type="button" icon="pi pi-check" class="p-button-success mr-2"></button>
<button pButton type="button" icon="pi pi-trash" class="p-button-warning mr-2"></button>
<button pButton type="button" icon="pi pi-print" class="p-button-danger"></button>
</div>
<div class="p-toolbar-group-right">
<p-splitButton label="Options" icon="pi pi-check" [model]="items"></p-splitButton>
</div>
<ng-template #end><p-splitbutton label="Save" [model]="items"></p-splitbutton></ng-template>
</p-toolbar>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>AccordionPanel</h5>
<p-accordion value="0">
<p-accordion-panel value="0">
<p-accordion-header>Header I</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</p-accordion-content>
</p-accordion-panel>
<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">Accordion</div>
<p-accordion value="0">
<p-accordion-panel value="0">
<p-accordion-header>Header I</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="1">
<p-accordion-header>Header II</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="1">
<p-accordion-header>Header II</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</p-accordion-content>
</p-accordion-panel>
<p-accordion-panel value="2">
<p-accordion-header>Header III</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</p-accordion-content>
</p-accordion-panel>
</p-accordion>
</div>
<div class="card">
<h5>Tabs</h5>
<p-tabs value="0">
<p-tablist>
<p-tab value="0">Header I</p-tab>
<p-tab value="1">Header II</p-tab>
<p-tab value="2">Header III</p-tab>
</p-tablist>
<p-tabpanels>
<p-tabpanel value="0">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</p-tabpanel>
<p-tabpanel value="1">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</p-tabpanel>
<p-tabpanel value="2">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</p-tabpanel>
</p-tabpanels>
</p-tabs>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Panel</h5>
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-panel>
</div>
<div class="card">
<h5>Fieldset</h5>
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-fieldset>
</div>
<div class="card">
<div class="flex align-items-center justify-content-between mb-0">
<h5>Card</h5>
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
<button pButton type="button" icon="pi pi-plus" [text]="true"
(click)="menu.toggle($event)"></button>
<p-accordion-panel value="2">
<p-accordion-header>Header III</p-accordion-header>
<p-accordion-content>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</p-accordion-content>
</p-accordion-panel>
</p-accordion>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Tabs</div>
<p-tabs value="0">
<p-tablist>
<p-tab value="0">Header I</p-tab>
<p-tab value="1">Header II</p-tab>
<p-tab value="2">Header III</p-tab>
</p-tablist>
<p-tabpanels>
<p-tabpanel value="0">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</p-tabpanel>
<p-tabpanel value="1">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</p-tabpanel>
<p-tabpanel value="2">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</p-tabpanel>
</p-tabpanels>
</p-tabs>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Divider</h5>
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid">
<div class="field">
<label for="username">Username</label>
<input pInputText id="username" type="text"/>
</div>
<div class="field">
<label for="password">Password</label>
<input pInputText id="password" type="password"/>
</div>
<p-button label="Login" class="mt-2"></p-button>
</div>
<div class="md:w-1/2 mt-6 md:mt-0">
<div class="card">
<div class="font-semibold text-xl mb-4">Panel</div>
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-panel>
</div>
<div class="col-2">
<p-divider layout="vertical">
<b>OR</b>
</p-divider>
</div>
<div class="col-5 align-items-center justify-content-center">
<p class="line-height-3 m-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
<p-divider layout="horizontal" align="center">
<span class="p-tag">Badge</span>
</p-divider>
<p class="line-height-3 m-0">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
<p-divider align="right">
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
</p-divider>
<p class="line-height-3 m-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
Morbi dapibus luctus odio.</p>
<div class="card">
<div class="font-semibold text-xl mb-4">Fieldset</div>
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p-fieldset>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Splitter</h5>
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[30,70]">
<ng-template pTemplate>
<div class="col flex align-items-center justify-content-center">
Panel 1
<div class="card mt-8">
<div class="font-semibold text-xl mb-4">Divider</div>
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
<div class="flex flex-col gap-2">
<label for="username">Username</label>
<input pInputText id="username" type="text"/>
</div>
<div class="flex flex-col gap-2">
<label for="password">Password</label>
<input pInputText id="password" type="password"/>
</div>
<div class="flex">
<p-button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></p-button>
</div>
</div>
<div class="w-full md:w-2/12">
<p-divider layout="vertical" class="!hidden md:!flex"><b>OR</b></p-divider>
<p-divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></p-divider>
</div>
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
<p-button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></p-button>
</div>
</div>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Splitter</div>
<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-8">
<ng-template #panel>
<div class="col flex items-center justify-center">Panel 1</div>
</ng-template>
<ng-template pTemplate>
<p-splitter layout="vertical" [panelSizes]="[50,50]" [minSizes]="[10,10]">
<ng-template pTemplate>
<div class="col flex align-items-center justify-content-center">
Panel 2
</div>
<ng-template #panel>
<p-splitter layout="vertical" [panelSizes]="[50, 50]">
<ng-template #panel>
<div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div>
</ng-template>
<ng-template pTemplate>
<div class="col flex align-items-center justify-content-center">
Panel 3
</div>
<ng-template #panel>
<p-splitter [panelSizes]="[20, 80]">
<ng-template #panel>
<div class="col flex items-center justify-center">Panel 3</div>
</ng-template>
<ng-template #panel>
<div class="col flex items-center justify-center">Panel 4</div>
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
</div>
</div>
</div>
`,
})
export class PanelsDoc {

663
src/views/uikit/tabledoc.ts
View File

@@ -14,6 +14,7 @@ import { ButtonModule } from 'primeng/button';
import { RatingModule } from 'primeng/rating';
import { Customer, CustomerService, Representative } from '@/src/service/customer.service';
import { Product, ProductService } from '@/src/service/product.service';
import { RippleModule } from 'primeng/ripple';
interface expandedRows {
[key: string]: boolean;
@@ -21,312 +22,370 @@ interface expandedRows {
@Component({
standalone: true,
imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule],
template:`
<div class="grid">
<div class="col-12">
<div class="card">
<h5>Filter Menu</h5>
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<ng-template pTemplate="caption">
<div class="flex justify-content-between flex-column sm:flex-row">
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left mb-2">
<i class="pi pi-search"></i>
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword" class="w-full"/>
</span>
</div>
</ng-template>
<ng-template #header>
<tr>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Name
<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
</div>
</th>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Country
<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
</div>
</th>
<th style="min-width: 14rem">
<div class="flex justify-content-between align-items-center">
Agent
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template #header>
<div class="px-3 pt-3 pb-0">
<span class="font-bold">Agent Picker</span>
</div>
</ng-template>
<ng-template #filter let-value let-filter="filterCallback">
<p-multiselect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option #item>
<div class="p-multiselect-representative-option">
<img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
<span class="ml-2">{{option.name}}</span>
</div>
</ng-template>
</p-multiselect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Date
<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
</div>
</th>
<th style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Balance
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
</div>
</th>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Status
<p-columnFilter field="status" matchMode="equals" display="menu">
<ng-template #filter let-value let-filter="filterCallback">
<p-select [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [style]="{'min-width': '12rem'}" >
<ng-template let-option #item>
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-select>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Activity
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template #filter let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3" [style]="{'min-width': '12rem'}" ></p-slider>
<div class="flex align-items-center justify-content-between px-2">
<span>{{activityValues[0]}}</span>
<span>{{activityValues[1]}}</span>
</div>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width: 8rem">
<div class="flex justify-content-between align-items-center">
Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template #body let-customer>
<tr>
<td>
{{customer.name}}
</td>
<td>
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{customer.country.name}}</span>
</td>
<td>
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
<span class="image-text ml-2">{{customer.representative.name}}</span>
</td>
<td>
{{customer.date | date: 'MM/dd/yyyy'}}
</td>
<td>
{{customer.balance | currency:'USD':'symbol'}}
</td>
<td>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td>
<p-progressbar [value]="customer.activity" [showValue]="false" [style]="{'height': '0.5rem'}" />
</td>
<td class="text-center">
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
</td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="8">No customers found.</td>
</tr>
</ng-template>
<ng-template #loadingbody>
<tr>
<td colspan="8">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table>
</div>
imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule, RippleModule],
template: `
<div class="card">
<div class="font-semibold text-xl mb-4">Filtering</div>
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true"
styleClass="p-datatable-gridlines" [paginator]="true"
[globalFilterFields]="['name','country.name','representative.name','status']"
responsiveLayout="scroll">
<ng-template pTemplate="caption">
<div class="flex justify-content-between flex-column sm:flex-row">
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash"
(click)="clear(dt1)"></button>
<span class="p-input-icon-left mb-2">
<i class="pi pi-search"></i>
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword"
class="w-full" />
</span>
</div>
</ng-template>
<ng-template #header>
<tr>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Name
<p-columnFilter type="text" field="name" display="menu"
placeholder="Search by name"></p-columnFilter>
</div>
</th>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Country
<p-columnFilter type="text" field="country.name" display="menu"
placeholder="Search by country"></p-columnFilter>
</div>
</th>
<th style="min-width: 14rem">
<div class="flex justify-content-between align-items-center">
Agent
<p-columnFilter field="representative" matchMode="in" display="menu"
[showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template #header>
<div class="px-3 pt-3 pb-0">
<span class="font-bold">Agent Picker</span>
</div>
</ng-template>
<ng-template #filter let-value let-filter="filterCallback">
<p-multiselect [ngModel]="value" [options]="representatives" placeholder="Any"
(onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option #item>
<div class="p-multiselect-representative-option">
<img [alt]="option.label"
src="assets/demo/images/avatar/{{option.image}}" width="32"
style="vertical-align: middle" />
<span class="ml-2">{{ option.name }}</span>
</div>
</ng-template>
</p-multiselect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Date
<p-columnFilter type="date" field="date" display="menu"
placeholder="mm/dd/yyyy"></p-columnFilter>
</div>
</th>
<th style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Balance
<p-columnFilter type="numeric" field="balance" display="menu"
currency="USD"></p-columnFilter>
</div>
</th>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Status
<p-columnFilter field="status" matchMode="equals" display="menu">
<ng-template #filter let-value let-filter="filterCallback">
<p-select [ngModel]="value" [options]="statuses"
(onChange)="filter($event.value)" placeholder="Any"
[style]="{'min-width': '12rem'}">
<ng-template let-option #item>
<span
[class]="'customer-badge status-' + option.value">{{ option.label }}</span>
</ng-template>
</p-select>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width: 12rem">
<div class="flex justify-content-between align-items-center">
Activity
<p-columnFilter field="activity" matchMode="between" display="menu"
[showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template #filter let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true"
(onSlideEnd)="filter($event.values)" styleClass="m-3"
[style]="{'min-width': '12rem'}"></p-slider>
<div class="flex align-items-center justify-content-between px-2">
<span>{{ activityValues[0] }}</span>
<span>{{ activityValues[1] }}</span>
</div>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width: 8rem">
<div class="flex justify-content-between align-items-center">
Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template #body let-customer>
<tr>
<td>
{{ customer.name }}
</td>
<td>
<img src="assets/demo/images/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{ customer.country.name }}</span>
</td>
<td>
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span>
</td>
<td>
{{ customer.date | date: 'MM/dd/yyyy' }}
</td>
<td>
{{ customer.balance | currency:'USD':'symbol' }}
</td>
<td>
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</td>
<td>
<p-progressbar [value]="customer.activity" [showValue]="false"
[style]="{'height': '0.5rem'}" />
</td>
<td class="text-center">
<i class="pi"
[ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
</td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="8">No customers found.</td>
</tr>
</ng-template>
<ng-template #loadingbody>
<tr>
<td colspan="8">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Frozen Columns</div>
<p-togglebutton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open"
[onLabel]="'Unfreeze Id'" offLabel="Freeze Id"
[style]="{'width': '12rem'}"></p-togglebutton>
<div class="col-12">
<div class="card">
<h5>Frozen Columns</h5>
<p-togglebutton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-togglebutton>
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px"
styleClass="mt-3" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th style="width:200px" pFrozenColumn>Name</th>
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
<th style="width:200px">Country</th>
<th style="width:200px">Date</th>
<th style="width:200px">Company</th>
<th style="width:200px">Status</th>
<th style="width:200px">Activity</th>
<th style="width:200px">Representative</th>
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="width:200px" pFrozenColumn class="font-bold">{{ customer.name }}</td>
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen"
[ngClass]="{'font-bold': idFrozen}">{{ customer.id }}
</td>
<td style="width:200px">
<img src="assets/demo/images/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{ customer.country.name }}</span>
</td>
<td style="width:200px">{{ customer.date }}</td>
<td style="width:200px">{{ customer.company }}</td>
<td style="width:200px">
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</td>
<td style="width:200px">{{ customer.activity }}</td>
<td style="width:200px">
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span>
</td>
<td style="width:200px" pFrozenColumn class="font-bold"
alignFrozen="right">{{ formatCurrency(customer.balance) }}
</td>
</tr>
</ng-template>
</p-table>
</div>
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th style="width:200px" pFrozenColumn>Name</th>
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
<th style="width:200px">Country</th>
<th style="width:200px">Date</th>
<th style="width:200px">Company</th>
<th style="width:200px">Status</th>
<th style="width:200px">Activity</th>
<th style="width:200px">Representative</th>
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="width:200px" pFrozenColumn class="font-bold">{{customer.name}}</td>
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" [ngClass]="{'font-bold': idFrozen}">{{customer.id}}</td>
<td style="width:200px">
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{customer.country.name}}</span>
</td>
<td style="width:200px">{{customer.date}}</td>
<td style="width:200px">{{customer.company}}</td>
<td style="width:200px">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="width:200px">{{customer.activity}}</td>
<td style="width:200px">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
<span class="image-text ml-2">{{customer.representative.name}}</span>
</td>
<td style="width:200px" pFrozenColumn class="font-bold" alignFrozen="right">{{formatCurrency(customer.balance)}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Row Expansion</div>
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
<ng-template #caption>
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}"
label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
<div class="flex table-header">
</div>
</ng-template>
<ng-template #header>
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="name">Name
<p-sortIcon field="name"></p-sortIcon>
</th>
<th>Image</th>
<th pSortableColumn="price">Price
<p-sortIcon field="price"></p-sortIcon>
</th>
<th pSortableColumn="category">Category
<p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">Reviews
<p-sortIcon field="rating"></p-sortIcon>
</th>
<th pSortableColumn="inventoryStatus">Status
<p-sortIcon field="inventoryStatus"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template #body let-product let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="product"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td style="min-width: 12rem;">{{ product.name }}</td>
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100"
class="shadow-4" /></td>
<td style="min-width: 8rem;">{{ product.price | currency:'USD' }}</td>
<td style="min-width: 10rem;">{{ product.category }}</td>
<td style="min-width: 10rem;">
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
</td>
<td><span
[class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{ product.inventoryStatus }}</span>
</td>
</tr>
</ng-template>
<ng-template #rowexpansion let-product>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id">Id
<p-sortIcon field="price"></p-sortIcon>
</th>
<th pSortableColumn="customer">Customer
<p-sortIcon field="customer"></p-sortIcon>
</th>
<th pSortableColumn="date">Date
<p-sortIcon field="date"></p-sortIcon>
</th>
<th pSortableColumn="amount">Amount
<p-sortIcon field="amount"></p-sortIcon>
</th>
<th pSortableColumn="stats">Status
<p-sortIcon field="status"></p-sortIcon>
</th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template #body let-order>
<tr>
<td>{{ order.id }}</td>
<td>{{ order.customer }}</td>
<td>{{ order.date }}</td>
<td>{{ order.amount | currency:'USD' }}</td>
<td><span
[class]="'order-badge order-' + order.status.toLowerCase()">{{ order.status }}</span>
</td>
<td>
<p-button type="button" icon="pi pi-search"></p-button>
</td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="col-12">
<div class="card">
<h5>Row Expand</h5>
<p-toast></p-toast>
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
<ng-template #caption>
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
<div class="flex table-header">
</div>
</ng-template>
<ng-template #header>
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th>Image</th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template #body let-product let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td style="min-width: 12rem;">{{product.name}}</td>
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
<td style="min-width: 10rem;">{{product.category}}</td>
<td style="min-width: 10rem;"><p-rating [ngModel]="product.rating" [readonly]="true"></p-rating></td>
<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
</tr>
</ng-template>
<ng-template #rowexpansion let-product>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template #body let-order>
<tr>
<td>{{order.id}}</td>
<td>{{order.customer}}</td>
<td>{{order.date}}</td>
<td>{{order.amount | currency:'USD'}}</td>
<td><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
<td><p-button type="button" icon="pi pi-search"></p-button></td>
</tr>
</ng-template>
<ng-template #emptymessage>
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Subheader Grouping</h5>
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
<ng-template #header>
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template #body let-customer let-rowIndex="rowIndex">
<tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5" style="min-width: 200px;">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="font-bold ml-2">{{customer.representative.name}}</span>
</td>
</tr>
<tr>
<td style="min-width: 200px;">
{{customer.name}}
</td>
<td style="min-width: 200px;">
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
</td>
<td style="min-width: 200px;">
{{customer.company}}
</td>
<td style="min-width: 200px;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="min-width: 200px;">
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
`,
<div class="card">
<div class="font-semibold text-xl mb-4">Grouping</div>
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name"
sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll"
[scrollable]="true" scrollHeight="400px">
<ng-template #header>
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template #body let-customer let-rowIndex="rowIndex">
<tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5" style="min-width: 200px;">
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="font-bold ml-2">{{ customer.representative.name }}</span>
</td>
</tr>
<tr>
<td style="min-width: 200px;">
{{ customer.name }}
</td>
<td style="min-width: 200px;">
<img src="assets/demo/images/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span>
</td>
<td style="min-width: 200px;">
{{ customer.company }}
</td>
<td style="min-width: 200px;">
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</td>
<td style="min-width: 200px;">
{{ customer.date }}
</td>
</tr>
</ng-template>
</p-table>
</div>`,
providers: [ConfirmationService, MessageService]
})
export class TableDoc implements OnInit {

108
src/views/uikit/timelinedoc.ts
View File

@@ -12,40 +12,40 @@ import { ButtonModule } from 'primeng/button';
ButtonModule,
CardModule
],
template: `<div class="grid">
<div class="col-12 md:col-6">
template: ` <div class="grid grid-cols-12 gap-8">
<div class="col-span-6">
<div class="card">
<h5>Left Align</h5>
<div class="font-semibold text-xl mb-4">Left Align</div>
<p-timeline [value]="events1">
<ng-template pTemplate="content" let-event>
<ng-template #content let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-6">
<div class="card">
<h5>Right Align</h5>
<div class="font-semibold text-xl mb-4">Right Align</div>
<p-timeline [value]="events1" align="right">
<ng-template pTemplate="content" let-event>
<ng-template #content let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-6">
<div class="card">
<h5>Alternate Align</h5>
<div class="font-semibold text-xl mb-4">Alternate Align</div>
<p-timeline [value]="events1" align="alternate">
<ng-template pTemplate="content" let-event>
<ng-template #content let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-6">
<div class="card">
<h5>Opposite Content</h5>
<div class="font-semibold text-xl mb-4">Opposite Content</div>
<p-timeline [value]="events1">
<ng-template pTemplate="content" let-event>
<small class="p-text-secondary">{{event.date}}</small>
@@ -56,52 +56,54 @@ import { ButtonModule } from 'primeng/button';
</p-timeline>
</div>
</div>
</div>
<div class="card">
<h5>Customized</h5>
<p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
<ng-template pTemplate="marker" let-event>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Templating</div>
<p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
<ng-template pTemplate="marker" let-event>
<span class="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" [style.backgroundColor]="event.color">
<i [ngClass]="event.icon"></i>
</span>
</ng-template>
<ng-template pTemplate="content" let-event>
<p-card [header]="event.status" [subheader]="event.date">
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
<p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<button pButton label="Read more" class="p-button-outlined mb-5"></button>
</p-card>
</ng-template>
</p-timeline>
</div>
</ng-template>
<ng-template pTemplate="content" let-event>
<p-card [header]="event.status" [subheader]="event.date">
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
<p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<button pButton label="Read more" class="p-button-outlined mb-5"></button>
</p-card>
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Horizontal</div>
<div class="font-semibold mb-2">Top Align</div>
<p-timeline [value]="events2" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<div class="card">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<p-timeline [value]="events2" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<div class="font-semibold mt-4 mb-2">Bottom Align</div>
<p-timeline [value]="events2" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<h6>Bottom Align</h6>
<p-timeline [value]="events2" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<h6>Alternate Align</h6>
<p-timeline [value]="events2" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
<ng-template pTemplate="opposite" let-event>
&nbsp;
</ng-template>
</p-timeline>
<div class="font-semibold mt-4 mb-2">Alternate Align</div>
<p-timeline [value]="events2" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
<ng-template pTemplate="opposite" let-event>
&nbsp;
</ng-template>
</p-timeline>
</div>
</div>
</div>`,
})
export class TimelineDoc {

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

@@ -10,40 +10,35 @@ import { NodeService } from '@/src/service/node.service';
standalone: true,
imports: [CommonModule, FormsModule, TreeModule, TreeTableModule],
template: `
<div class="grid">
<div class="col-12">
<div class="card">
<h5>Tree</h5>
<p-tree [value]="treeValue" selectionMode="checkbox" [(selection)]="selectedTreeValue"></p-tree>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>TreeTable</h5>
<p-treetable [value]="treeTableValue" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedTreeTableValue">
<ng-template #header let-columns>
<tr>
@for(col of columns; track col.header){
<th>
{{ col.header }}
</th>
}
</tr>
</ng-template>
<ng-template #body let-rowNode let-rowData="rowData" let-columns="columns">
<tr>
@for(col of columns; track col.field; let i = $index){
<td>
<p-treetabletoggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetabletoggler>
<p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox>
{{ rowData[col.field] }}
</td>
}
</tr>
</ng-template>
</p-treetable>
</div>
</div>
<div class="card">
<div class="font-semibold text-xl">Tree</div>
<p-tree [value]="treeValue" selectionMode="checkbox" [(selection)]="selectedTreeValue"></p-tree>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">TreeTable</div>
<p-treetable [value]="treeTableValue" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedTreeTableValue">
<ng-template #header let-columns>
<tr>
@for(col of columns; track col.header){
<th>
{{ col.header }}
</th>
}
</tr>
</ng-template>
<ng-template #body let-rowNode let-rowData="rowData" let-columns="columns">
<tr>
@for(col of columns; track col.field; let i = $index){
<td>
<p-treetabletoggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetabletoggler>
<p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox>
{{ rowData[col.field] }}
</td>
}
</tr>
</ng-template>
</p-treetable>
</div>
`,
providers: [NodeService]