Skip to content

Commit

Permalink
Merge branch 'demo-update-new'
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehmetcetin01140
mehmetcetin01140 committed May 9, 2024
2 parents 7fdceab + 9ed7602 commit d04749e
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 42 deletions.
8 changes: 5 additions & 3 deletions src/app/showcase/doc/avatar/icondoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { Code } from '@domain/code';
</div>
<div class="col-12 md:col-4">
<h5>Badge</h5>
<p-avatar icon="pi pi-user" pBadge value="4" size="xlarge" />
<p-avatar icon="pi pi-user" pBadge value="4" size="xlarge" badgeSize="large" />
</div>
</div>
<app-code [code]="code" selector="avatar-icon-demo"></app-code>
Expand Down Expand Up @@ -64,7 +64,8 @@ export class IconDoc {
icon="pi pi-user"
pBadge
value="4"
size="xlarge" />`,
size="xlarge"
badgeSize="large" />`,
html: `<div class="col-12 md:col-4">
<h5>Icon</h5>
<p-avatar
Expand Down Expand Up @@ -106,7 +107,8 @@ export class IconDoc {
icon="pi pi-user"
pBadge
value="4"
size="xlarge" />
size="xlarge"
badgeSize="large" />
</div>`,
typescript: `import { Component } from '@angular/core';
import { AvatarModule } from 'primeng/avatar';
Expand Down
8 changes: 5 additions & 3 deletions src/app/showcase/doc/avatar/imagedoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { Code } from '@domain/code';
</div>
<div class="flex-auto">
<h5>Badge</h5>
<p-avatar pBadge value="4" image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" size="xlarge" />
<p-avatar pBadge value="4" image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" size="xlarge" badgeSize="large"/>
</div>
<div class="flex-auto">
<h5>Gravatar</h5>
Expand Down Expand Up @@ -48,7 +48,8 @@ export class ImageDoc {
pBadge
value="4"
image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg"
size="xlarge" />
size="xlarge"
badgeSize="large" />
<p-avatar
image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"
Expand Down Expand Up @@ -78,7 +79,8 @@ export class ImageDoc {
pBadge
value="4"
image="https://primefaces.org/cdn/primeng/demo/avatar/walter.jpg"
size="xlarge" />
size="xlarge"
badgeSize="large" />
</div>
<div class="flex-auto">
<h5>Gravatar</h5>
Expand Down
3 changes: 2 additions & 1 deletion src/app/showcase/doc/avatar/labeldoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@ export class LabelDoc {
pBadge
styleClass="mr-2"
value="4"
size="xlarge" />`,
size="xlarge"
badgeSize="large" />`,
html: `<div class="card grid grid-nogutter">
<div class="col-12 md:col-4">
<h5>Label</h5>
Expand Down
12 changes: 6 additions & 6 deletions src/app/showcase/doc/button/badgedoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { Code } from '@domain/code';
<p>Buttons have built-in <i>badge</i> support with badge and <i>badgeClass</i> properties.</p>
</app-docsectiontext>
<div class="card flex justify-content-center flex-wrap gap-3">
<p-button label="Emails" badge="8" styleClass="m-0" />
<p-button label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" styleClass="m-0" outlined="true" />
<p-button label="Emails" badge="2" styleClass="m-0" />
<p-button label="Messages" icon="pi pi-users" badge="2" badgeClass="p-badge-contrast" styleClass="m-0" outlined="true" />
</div>
<app-code [code]="code" selector="button-badge-demo"></app-code>
`
Expand All @@ -20,17 +20,17 @@ export class BadgeDoc {
<p-button
label="Messages"
icon="pi pi-users"
badge="8"
badgeClass="p-badge-danger"
badge="2"
badgeClass="p-badge-contrast"
outlined="true" />`,

html: `<div class="card flex justify-content-center flex-wrap gap-3">
<p-button label="Emails" badge="8" />
<p-button label="Emails" badge="2" />
<p-button
label="Messages"
icon="pi pi-users"
badge="8"
badgeClass="p-badge-danger"
badgeClass="p-badge-contrast"
outlined="true" />
</div>`,

Expand Down
157 changes: 134 additions & 23 deletions src/app/showcase/doc/fileupload/templatedoc.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, inject } from '@angular/core';
import { Component } from '@angular/core';
import { Code } from '@domain/code';
import { PrimeNGConfig } from 'primeng/api';

Expand Down Expand Up @@ -67,7 +67,7 @@ import { PrimeNGConfig } from 'primeng/api';
`
})
export class TemplateDoc {
config = inject(PrimeNGConfig);
constructor(private config: PrimeNGConfig) {}

choose(event, callback) {
callback();
Expand Down Expand Up @@ -97,38 +97,149 @@ export class TemplateDoc {

code: Code = {
basic: `<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="toolbar">
<div class="py-3">Upload 3 Files</div>
</ng-template>
<ng-template let-file pTemplate="file">
<div>Custom UI to display a file</div>
</ng-template>
<ng-template pTemplate="content" let-files>
<div>Additional content.</div>
</ng-template>
<ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback" let-files="files">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<p-button (onClick)="choose($event, chooseCallback)" icon="pi pi-images" [rounded]="true" [outlined]="true" />
<p-button (onClick)="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" [rounded]="true" [outlined]="true" severity="success" [disabled]="!files || files.length === 0" />
<p-button (onClick)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" />
</div>
<p-progressBar [value]="totalSizePercent" [showValue]="false" styleClass="md:w-20rem h-1rem w-full md:ml-auto" [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
<span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
</p-progressBar>
</div>
</ng-template>
<ng-template pTemplate="content" let-files let-uploadedFiles="uploadedFiles" let-removeFileCallback="removeFileCallback" let-removeUploadedFileCallback="removeUploadedFileCallback">
<div *ngIf="uploadedFiles?.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of files; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Pending" severity="warning" />
</div>
</div>
</div>
<div *ngIf="uploadedFiles?.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of uploadedFiles; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Completed" class="mt-3" severity="success" />
<p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="empty">
<div class="flex align-items-center justify-content-center flex-column">
<i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
<p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
</div>
</ng-template>
</p-fileUpload>`,
html: `
<div class="card flex justify-content-center">
html: `<div class="card">
<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="toolbar">
<div class="py-3">Upload 3 Files</div>
<ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback" let-files="files">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<p-button (onClick)="choose($event, chooseCallback)" icon="pi pi-images" [rounded]="true" [outlined]="true" />
<p-button (onClick)="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" [rounded]="true" [outlined]="true" severity="success" [disabled]="!files || files.length === 0" />
<p-button (onClick)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" />
</div>
<p-progressBar [value]="totalSizePercent" [showValue]="false" styleClass="md:w-20rem h-1rem w-full md:ml-auto" [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
<span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
</p-progressBar>
</div>
</ng-template>
<ng-template let-file pTemplate="file">
<div>Custom UI to display a file</div>
<ng-template pTemplate="content" let-files let-uploadedFiles="uploadedFiles" let-removeFileCallback="removeFileCallback" let-removeUploadedFileCallback="removeUploadedFileCallback">
<div *ngIf="uploadedFiles?.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of files; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Pending" severity="warning" />
</div>
</div>
</div>
<div *ngIf="uploadedFiles?.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div *ngFor="let file of uploadedFiles; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Completed" class="mt-3" severity="success" />
<p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="content" let-files>
<div>Additional content.</div>
<ng-template pTemplate="empty">
<div class="flex align-items-center justify-content-center flex-column">
<i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
<p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
</div>
</ng-template>
</p-fileUpload>
</div>`,

typescript: `
import { Component, Input } from '@angular/core';
typescript: `import { Component } from '@angular/core';
import { PrimeNGConfig} from 'primeng/api';
import { FileUploadModule } from 'primeng/fileupload';
import { ButtonModule } from 'primeng/button';
import { CommonModule } from '@angular/common';
import { BadgeModule } from 'primeng/badge';
import { HttpClientModule } from '@angular/common/http';
import { ProgressBarModule } from 'primeng/progressbar';
@Component({
selector: 'file-upload-template-demo',
templateUrl: './file-upload-template-demo.html',
standalone: true,
imports: [FileUploadModule, ButtonModule, BadgeModule, ProgressBarModule, HttpClientModule, CommonModule]
})
export class FileUploadTemplateDemo {}`
export class FileUploadTemplateDemo {
constructor(private config: PrimeNGConfig) {}
choose(event, callback) {
callback();
}
onRemoveTemplatingFile(event, file, removeFileCallback, index) {
removeFileCallback(event, index);
}
uploadEvent(callback) {
callback();
}
formatSize(bytes) {
const k = 1024;
const dm = 3;
const sizes = this.config.translation.fileSizeTypes;
if (bytes === 0) {
return \`0 \${sizes[0]}\`;
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
return \`\${formattedSize} \${sizes[i]}\`;
}
}`
};
}
34 changes: 28 additions & 6 deletions src/app/showcase/doc/splitbutton/templatedoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Code } from '@domain/code';
</app-docsectiontext>
<div class="card flex justify-content-center">
<p-toast />
<p-splitButton label="Save" (onClick)="save('info')" severity="warning" [model]="items">
<p-splitButton label="Save" (onClick)="save('info')" severity="contrast" [model]="items">
<ng-template pTemplate="content">
<span class="flex align-items-center font-bold">
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
Expand All @@ -24,6 +24,8 @@ import { Code } from '@domain/code';
providers: [MessageService]
})
export class TemplateDoc {
items: MenuItem[];

constructor(private messageService: MessageService) {
this.items = [
{
Expand All @@ -44,8 +46,6 @@ export class TemplateDoc {
];
}

items: MenuItem[];

save(severity: string) {
this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' });
}
Expand All @@ -62,14 +62,36 @@ export class TemplateDoc {
basic: `<p-splitButton
label="Save"
(onClick)="save('info')"
[model]="items" />`,
severity="contrast"
[model]="items">
<ng-template pTemplate="content">
<span class="flex align-items-center font-bold">
<img
alt="logo"
src="https://primefaces.org/cdn/primeng/images/logo.svg"
style="height: 1rem; margin-right: 0.5rem" />
<span>PrimeNG</span>
</span>
</ng-template>
</p-splitButton>`,

html: `<div class="card flex justify-content-center">
<p-toast />
<p-splitButton
label="Save"
(onClick)="save('info')"
[model]="items" />
severity="contrast"
[model]="items">
<ng-template pTemplate="content">
<span class="flex align-items-center font-bold">
<img
alt="logo"
src="https://primefaces.org/cdn/primeng/images/logo.svg"
style="height: 1rem; margin-right: 0.5rem" />
<span>PrimeNG</span>
</span>
</ng-template>
</p-splitButton>
</div>`,

typescript: `import { Component } from '@angular/core';
Expand All @@ -86,7 +108,7 @@ import { ToastModule } from 'primeng/toast';
})
export class SplitButtonTemplateDemo {
items: MenuItem[];
constructor(private messageService: MessageService) {
this.items = [
{
Expand Down

0 comments on commit d04749e

Please sign in to comment.