Refactor

primefaces · Feb 27, 2024 · 0a717ac · 0a717ac
1 parent 9d2f6bb
commit 0a717ac
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/app/showcase/doc/dropdown/customfilterdoc.ts b/src/app/showcase/doc/dropdown/customfilterdoc.ts
@@ -11,7 +11,7 @@ interface City {
     selector: 'dropdown-custom-filter-demo',
     template: `
         <app-docsectiontext>
-            <p>A custom filter dropdown component can be created using a <i>filter template.</i></p>
+            <p>Custom filter can be applied with the <i>filterTemplate</i>.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
@@ -73,7 +73,7 @@ export class CustomFilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
+        basic: `<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" styleClass="w-20rem">
         <ng-template pTemplate="filter" let-options="options">
             <div class="flex gap-1">
                 <div class="p-inputgroup" (click)="$event.stopPropagation()">
@@ -98,7 +98,7 @@ export class CustomFilterDoc implements OnInit {
 </p-dropdown>`,
 
         html: `<div class="card flex justify-content-center">
-<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
+<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" styleClass="w-20rem">
     <ng-template pTemplate="filter" let-options="options">
         <div class="flex gap-1">
             <div class="p-inputgroup" (click)="$event.stopPropagation()">

diff --git a/src/app/showcase/pages/dropdown/dropdowndemo.ts b/src/app/showcase/pages/dropdown/dropdowndemo.ts
@@ -54,13 +54,20 @@ export class DropdownDemo {
         {
             id: 'filter',
             label: 'Filter',
-            component: FilterDoc
-        },
-        {
-            id: 'customfilter',
-            label: 'Custom Filter',
-            component: CustomFilterDoc
+            children: [
+                {
+                    id: 'filterbasic',
+                    label: 'Basic',
+                    component: FilterDoc
+                },
+                {
+                    id: 'customfilter',
+                    label: 'Custom Filter',
+                    component: CustomFilterDoc
+                }
+            ]
         },
+
         {
             id: 'virtualscroll',
             label: 'Virtual Scroll',