update docs

primefaces · Nov 12, 2024 · cba6c73 · cba6c73
1 parent e64bd4f
commit cba6c73
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 86 deletions.
diff --git a/apps/showcase/src/app/showcase/doc/paginator/basicdoc.ts b/apps/showcase/src/app/showcase/doc/paginator/basicdoc.ts
@@ -34,20 +34,10 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `<p-paginator 
-    (onPageChange)="onPageChange($event)" 
-    [first]="first"
-    [rows]="rows" 
-    [totalRecords]="120" 
-    [rowsPerPageOptions]="[10, 20, 30]" />`,
+        basic: `<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" />`,
 
         html: `<div class="card flex justify-center">
-    <p-paginator 
-        (onPageChange)="onPageChange($event)" 
-        [first]="first" 
-        [rows]="rows" 
-        [totalRecords]="120" 
-        [rowsPerPageOptions]="[10, 20, 30]" />
+    <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';

diff --git a/apps/showcase/src/app/showcase/doc/paginator/templatedoc.ts b/apps/showcase/src/app/showcase/doc/paginator/templatedoc.ts
@@ -17,7 +17,7 @@ interface PageEvent {
         <div class="card flex flex-col gap-4">
             <div class="flex items-center justify-center">
                 <div>
-                    <p-button icon="pi pi-star" styleClass="p-button-outlined" />
+                    <p-button icon="pi pi-star" outlined />
                 </div>
                 <div class="flex-1">
                     <p-paginator (onPageChange)="onPageChange1($event)" [first]="first1" [rows]="rows1" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" [showFirstLastIcon]="false" />
@@ -101,7 +101,7 @@ export class TemplateDoc {
     code: Code = {
         basic: `<div class="flex items-center justify-center">
     <div>
-        <p-button icon="pi pi-star" styleClass="p-button-outlined" />
+        <p-button icon="pi pi-star" outlined />
     </div>
     <div class="flex-1">
         <p-paginator (onPageChange)="onPageChange1($event)" [first]="first1" [rows]="rows1" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" [showFirstLastIcon]="false" />
@@ -130,7 +130,7 @@ export class TemplateDoc {
         html: `<div class="card flex flex-col gap-4">
     <div class="flex items-center justify-center">
         <div>
-            <p-button icon="pi pi-star" styleClass="p-button-outlined" />
+            <p-button icon="pi pi-star" outlined />
         </div>
         <div class="flex-1">
             <p-paginator (onPageChange)="onPageChange1($event)" [first]="first1" [rows]="rows1" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" [showFirstLastIcon]="false" />

diff --git a/apps/showcase/src/app/showcase/doc/steps/confirmationdemo.ts b/apps/showcase/src/app/showcase/doc/steps/confirmationdemo.ts
@@ -49,7 +49,7 @@ import { Router } from '@angular/router';
                 <ng-template pTemplate="footer">
                     <div class="grid grid-cols-12 gap-4 grid-nogutter justify-between">
                         <p-button label="Back" (onClick)="prevPage()" icon="pi pi-angle-left"></p-button>
-                        <p-button label="Complete" (onClick)="complete()" icon="pi pi-angle-right" iconPos="right" styleClass="p-button-success"></p-button>
+                        <p-button label="Complete" (onClick)="complete()" icon="pi pi-angle-right" iconPos="right" severity="success"></p-button>
                     </div>
                 </ng-template>
             </p-card>

diff --git a/apps/showcase/src/app/showcase/doc/steps/controlleddoc.ts b/apps/showcase/src/app/showcase/doc/steps/controlleddoc.ts
@@ -40,47 +40,17 @@ export class ControlledDoc implements OnInit {
 
     code: Code = {
         basic: `<div class="flex mb-8 gap-2 justify-end">
-    <p-button 
-        (click)="active = 0" 
-        [rounded]="true" 
-        label="1" 
-        styleClass="w-8 h-8 p-0" 
-        [outlined]="active !== 0" />
-    <p-button 
-        (click)="active = 1" 
-        [rounded]="true"
-        label="2" 
-        styleClass="w-8 h-8 p-0" 
-        [outlined]="active !== 1" />
-    <p-button 
-        (click)="active = 2" 
-        [rounded]="true" 
-        label="3" 
-        styleClass="w-8 h-8 p-0" 
-        [outlined]="active !== 2" />
+    <p-button (click)="active = 0" [rounded]="true" label="1" styleClass="w-8 h-8 p-0" [outlined]="active !== 0" />
+    <p-button (click)="active = 1" [rounded]="true" label="2" styleClass="w-8 h-8 p-0" [outlined]="active !== 1" />
+    <p-button (click)="active = 2" [rounded]="true" label="3" styleClass="w-8 h-8 p-0" [outlined]="active !== 2" />
 </div>
 <p-steps [activeIndex]="active" [model]="items" />`,
 
         html: `<div class="card">
     <div class="flex mb-8 gap-2 justify-end">
-        <p-button 
-            (click)="active = 0" 
-            [rounded]="true" 
-            label="1" 
-            styleClass="w-8 h-8 p-0" 
-            [outlined]="active !== 0" />
-        <p-button 
-            (click)="active = 1" 
-            [rounded]="true" 
-            label="2" 
-            styleClass="w-8 h-8 p-0" 
-            [outlined]="active !== 1" />
-        <p-button 
-            (click)="active = 2" 
-            [rounded]="true" 
-            label="3" 
-            styleClass="w-8 h-8 p-0" 
-            [outlined]="active !== 2" />
+        <p-button (click)="active = 0" [rounded]="true" label="1" styleClass="w-8 h-8 p-0" [outlined]="active !== 0" />
+        <p-button (click)="active = 1" [rounded]="true" label="2" styleClass="w-8 h-8 p-0" [outlined]="active !== 1" />
+        <p-button (click)="active = 2" [rounded]="true" label="3" styleClass="w-8 h-8 p-0" [outlined]="active !== 2" />
     </div>
     <p-steps [activeIndex]="active" [model]="items" />
 </div>`,

diff --git a/apps/showcase/src/app/showcase/doc/steps/interactivedoc.ts b/apps/showcase/src/app/showcase/doc/steps/interactivedoc.ts
@@ -50,19 +50,11 @@ export class InteractiveDoc implements OnInit {
 
     code: Code = {
         basic: `<p-toast />
-<p-steps 
-    [model]="items" 
-    [readonly]="false" 
-    [activeIndex]="activeIndex" 
-    (activeIndexChange)="onActiveIndexChange($event)" />`,
+<p-steps [model]="items" [readonly]="false" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)" />`,
 
         html: `<div class="card">
     <p-toast />
-    <p-steps 
-        [model]="items" 
-        [readonly]="false" 
-        [activeIndex]="activeIndex" 
-        (activeIndexChange)="onActiveIndexChange($event)" />
+    <p-steps [model]="items" [readonly]="false" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)" />
 </div>`,
 
         typescript: `import { Component, OnInit } from '@angular/core';

diff --git a/apps/showcase/src/app/showcase/doc/steps/routingdoc.ts b/apps/showcase/src/app/showcase/doc/steps/routingdoc.ts
@@ -70,8 +70,7 @@ export class RoutingDoc implements OnInit {
 </div>
 <router-outlet></router-outlet>`,
 
-        html: `
-<div class="card">
+        html: `<div class="card">
     <p-toast />
     <p-steps [model]="items" [readonly]="false" />
 </div>
@@ -427,7 +426,7 @@ import { Router } from '@angular/router';
                 <ng-template pTemplate="footer">
                     <div class="grid grid-cols-12 gap-4 grid-nogutter justify-between">
                         <p-button label="Back" (onClick)="prevPage()" icon="pi pi-angle-left"></p-button>
-                        <p-button label="Complete" (onClick)="complete()" icon="pi pi-angle-right" iconPos="right" styleClass="p-button-success"></p-button>
+                        <p-button label="Complete" (onClick)="complete()" icon="pi pi-angle-right" iconPos="right" severity="success"></p-button>
                     </div>
                 </ng-template>
             </p-card>

diff --git a/apps/showcase/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/apps/showcase/src/app/showcase/doc/table/expandablerowgroupdoc.ts
@@ -23,7 +23,7 @@ import { CustomerService } from '@service/customerservice';
                     <ng-template #groupheader let-customer let-rowIndex="rowIndex" let-expanded="expanded">
                         <tr>
                             <td colspan="5">
-                                <button type="button" pButton pRipple [pRowToggler]="customer" class="p-button-text p-button-rounded p-button-plain mr-2" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
+                                <button type="button" pButton pRipple [pRowToggler]="customer" text rounded plain class="mr-2" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
                                 <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
                                 <span class="font-bold ml-2">{{ customer.representative.name }}</span>
                             </td>
@@ -135,7 +135,10 @@ export class ExpandableRowGroupDoc {
                         pButton
                         pRipple
                         [pRowToggler]="customer"
-                        class="p-button-text p-button-rounded p-button-plain mr-2"
+                        text 
+                        rounded 
+                        plain 
+                        class="mr-2"
                         [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'">
                     </button>
                     <img
@@ -203,7 +206,10 @@ export class ExpandableRowGroupDoc {
                             pButton
                             pRipple
                             [pRowToggler]="customer"
-                            class="p-button-text p-button-rounded p-button-plain mr-2"
+                            text 
+                            rounded 
+                            plain 
+                            class="mr-2"
                             [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'">
                         </button>
                         <img

diff --git a/apps/showcase/src/app/showcase/doc/table/frozenrowsdoc.ts b/apps/showcase/src/app/showcase/doc/table/frozenrowsdoc.ts
@@ -27,7 +27,7 @@ import { CustomerService } from '@service/customerservice';
                             <td>{{ customer.company }}</td>
                             <td>{{ customer.representative.name }}</td>
                             <td>
-                                <button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer, true, index)" class="p-button-sm p-button-text"></button>
+                                <button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer, true, index)" size="small" text></button>
                             </td>
                         </tr>
                     </ng-template>
@@ -38,7 +38,7 @@ import { CustomerService } from '@service/customerservice';
                             <td>{{ customer.company }}</td>
                             <td>{{ customer.representative.name }}</td>
                             <td>
-                                <button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length >= 2" (click)="toggleLock(customer, false, index)" class="p-button-sm p-button-text"></button>
+                                <button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length >= 2" (click)="toggleLock(customer, false, index)" size="small" text></button>
                             </td>
                         </tr>
                     </ng-template>
@@ -127,7 +127,8 @@ export class FrozenRowsDoc {
                         type="button" 
                         [icon]="'pi pi-lock-open'" 
                         (click)="toggleLock(customer,true,index)" 
-                        class="p-button-sm p-button-text">
+                        size="small"
+                        text>
                     </button>
                 </td>
             </tr>
@@ -146,7 +147,8 @@ export class FrozenRowsDoc {
                         [icon]="'pi pi-lock'" 
                         [disabled]="lockedCustomers.length >= 2" 
                         (click)="toggleLock(customer,false,index)" 
-                        class="p-button-sm p-button-text">
+                        size="small"
+                        text>
                     </button>
                 </td>
             </tr>
@@ -181,7 +183,8 @@ export class FrozenRowsDoc {
                             type="button" 
                             [icon]="'pi pi-lock-open'" 
                             (click)="toggleLock(customer,true,index)" 
-                            class="p-button-sm p-button-text">
+                            size="small"
+                            text>
                         </button>
                     </td>
                 </tr>
@@ -200,7 +203,8 @@ export class FrozenRowsDoc {
                             [icon]="'pi pi-lock'" 
                             [disabled]="lockedCustomers.length >= 2" 
                             (click)="toggleLock(customer,false,index)" 
-                            class="p-button-sm p-button-text">
+                            size="small"
+                            text>
                         </button>
                     </td>
                 </tr>

diff --git a/apps/showcase/src/app/showcase/doc/table/paginatorlocaledoc.ts b/apps/showcase/src/app/showcase/doc/table/paginatorlocaledoc.ts
@@ -40,10 +40,10 @@ import { CustomerService } from '@service/customerservice';
                         </tr>
                     </ng-template>
                     <ng-template pTemplate="paginatorleft">
-                        <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
+                        <p-button type="button" icon="pi pi-plus" text></p-button>
                     </ng-template>
                     <ng-template pTemplate="paginatorright">
-                        <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
+                        <p-button type="button" icon="pi pi-cloud" text></p-button>
                     </ng-template>
                 </p-table>
             </div>
@@ -94,10 +94,10 @@ export class PaginatorLocaleDoc {
         </tr>
     </ng-template>
     <ng-template pTemplate="paginatorleft">
-        <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
+        <p-button type="button" icon="pi pi-plus" text></p-button>
     </ng-template>
     <ng-template pTemplate="paginatorright">
-        <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
+        <p-button type="button" icon="pi pi-cloud" text></p-button>
     </ng-template>
 </p-table>`,
         html: `
@@ -129,10 +129,10 @@ export class PaginatorLocaleDoc {
             </tr>
         </ng-template>
         <ng-template pTemplate="paginatorleft">
-            <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
+            <p-button type="button" icon="pi pi-plus" text></p-button>
         </ng-template>
         <ng-template pTemplate="paginatorright">
-            <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
+            <p-button type="button" icon="pi pi-cloud" text></p-button>
         </ng-template>
     </p-table>
 </div>`,

diff --git a/apps/showcase/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/apps/showcase/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
@@ -35,11 +35,11 @@ interface Column {
                         </tr>
                     </ng-template>
                     <ng-template pTemplate="paginatorleft">
-                        <p-button icon="pi pi-refresh" styleClass="p-button-text" />
+                        <p-button icon="pi pi-refresh" text />
                     </ng-template>
 
                     <ng-template pTemplate="paginatorright">
-                        <p-button icon="pi pi-download" styleClass="p-button-text" />
+                        <p-button icon="pi pi-download" text />
                     </ng-template>
                 </p-treetable>
             </p-deferred-demo>
@@ -107,10 +107,10 @@ export class PaginatorTemplateDoc {
             </tr>
         </ng-template>
         <ng-template pTemplate="paginatorleft">
-            <p-button icon="pi pi-refresh" styleClass="p-button-text" />
+            <p-button icon="pi pi-refresh" text />
         </ng-template>
         <ng-template pTemplate="paginatorright">
-            <p-button icon="pi pi-download" styleClass="p-button-text" />
+            <p-button icon="pi pi-download" text />
         </ng-template>
 </p-treetable>`,
 
@@ -138,10 +138,10 @@ export class PaginatorTemplateDoc {
                 </tr>
             </ng-template>
             <ng-template pTemplate="paginatorleft">
-                <p-button icon="pi pi-refresh" styleClass="p-button-text" />
+                <p-button icon="pi pi-refresh" text />
             </ng-template>
             <ng-template pTemplate="paginatorright">
-                <p-button icon="pi pi-download" styleClass="p-button-text" />
+                <p-button icon="pi pi-download" text />
             </ng-template>
     </p-treetable>
 </div>`,