From 0938027c8042e0cf83b6f10fe89ede1e509b621a Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 2 Jul 2024 13:05:17 +0300
Subject: [PATCH] Fluid demo updates

---
 .../showcase/doc/autocomplete/MultipleDoc.vue | 22 ++++----
 apps/showcase/doc/datatable/LazyLoadDoc.vue   | 38 +++++++-------
 .../doc/datatable/edit/CellEditDoc.vue        | 22 ++++----
 .../doc/datatable/edit/RowEditDoc.vue         | 36 ++++++-------
 .../doc/datatable/samples/ProductsDoc.vue     | 36 ++++++-------
 apps/showcase/doc/datepicker/IconDoc.vue      | 30 +++++------
 apps/showcase/doc/datepicker/TimeDoc.vue      | 30 +++++------
 apps/showcase/doc/focustrap/BasicDoc.vue      | 22 ++++----
 apps/showcase/doc/inputmask/MaskDoc.vue       | 30 +++++------
 apps/showcase/doc/inputnumber/ButtonsDoc.vue  | 30 +++++------
 apps/showcase/doc/inputnumber/CurrencyDoc.vue | 36 ++++++-------
 apps/showcase/doc/inputnumber/LocaleDoc.vue   | 38 +++++++-------
 apps/showcase/doc/inputnumber/NumeralsDoc.vue | 38 +++++++-------
 .../doc/inputnumber/PrefixSuffixDoc.vue       | 38 +++++++-------
 apps/showcase/doc/stepper/TemplateDoc.vue     | 52 +++++++++----------
 apps/showcase/doc/tree/LazyDoc.vue            |  6 +--
 16 files changed, 252 insertions(+), 252 deletions(-)

diff --git a/apps/showcase/doc/autocomplete/MultipleDoc.vue b/apps/showcase/doc/autocomplete/MultipleDoc.vue
index 2e800c785..f870122f2 100644
--- a/apps/showcase/doc/autocomplete/MultipleDoc.vue
+++ b/apps/showcase/doc/autocomplete/MultipleDoc.vue
@@ -2,12 +2,12 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
     </DocSectionText>
-    <div class="card p-fluid">
+    <div class="card">
         <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
+        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,19 +22,19 @@ export default {
             code: {
                 basic: `
 <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
+<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
 <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
+<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
 `,
                 options: `
 <template>
-    <div class="card p-fluid">
+    <div class="card">
         <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
+        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
     </div>
 </template>
 
@@ -57,12 +57,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card p-fluid">
+    <div class="card">
         <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
-        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
+        <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/datatable/LazyLoadDoc.vue b/apps/showcase/doc/datatable/LazyLoadDoc.vue
index 11e4e61fc..db04082fd 100644
--- a/apps/showcase/doc/datatable/LazyLoadDoc.vue
+++ b/apps/showcase/doc/datatable/LazyLoadDoc.vue
@@ -11,7 +11,7 @@
         <p>Note that, the implementation of <i>checkbox selection</i> in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.</p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card p-fluid">
+        <div class="card">
             <DataTable
                 ref="dt"
                 v-model:filters="filters"
@@ -38,7 +38,7 @@
                 <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
                 <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
                     </template>
                 </Column>
                 <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -49,12 +49,12 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
                     </template>
                 </Column>
                 <Column field="company" header="Company" filterMatchMode="contains" sortable>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
                     </template>
                 </Column>
                 <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -65,7 +65,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
                     </template>
                 </Column>
             </DataTable>
@@ -108,7 +108,7 @@ export default {
     <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
     <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
         </template>
     </Column>
     <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -119,12 +119,12 @@ export default {
             </div>
         </template>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
         </template>
     </Column>
     <Column field="company" header="Company" filterMatchMode="contains" sortable>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
         </template>
     </Column>
     <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -135,14 +135,14 @@ export default {
             </div>
         </template>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
         </template>
     </Column>
 </DataTable>
 `,
                 options: `
 <template>
-	<div class="card p-fluid">
+	<div class="card">
         <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
             :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
             :globalFilterFields="['name','country.name', 'company', 'representative.name']"
@@ -150,7 +150,7 @@ export default {
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
             <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -161,12 +161,12 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
             <Column field="company" header="Company" filterMatchMode="contains" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
             <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -177,7 +177,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
         </DataTable>
@@ -276,7 +276,7 @@ export default {
 `,
                 composition: `
 <template>
-	<div class="card p-fluid">
+	<div class="card">
         <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
             :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
             :globalFilterFields="['name','country.name', 'company', 'representative.name']"
@@ -284,7 +284,7 @@ export default {
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
             <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -295,12 +295,12 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
             <Column field="company" header="Company" filterMatchMode="contains" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
             <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -311,7 +311,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
                 </template>
             </Column>
         </DataTable>
diff --git a/apps/showcase/doc/datatable/edit/CellEditDoc.vue b/apps/showcase/doc/datatable/edit/CellEditDoc.vue
index 71bfed66c..cd08ed995 100644
--- a/apps/showcase/doc/datatable/edit/CellEditDoc.vue
+++ b/apps/showcase/doc/datatable/edit/CellEditDoc.vue
@@ -3,7 +3,7 @@
         <p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card p-fluid">
+        <div class="card">
             <DataTable
                 :value="products"
                 editMode="cell"
@@ -23,10 +23,10 @@
                     </template>
                     <template #editor="{ data, field }">
                         <template v-if="field !== 'price'">
-                            <InputText v-model="data[field]" autofocus />
+                            <InputText v-model="data[field]" autofocus fluid />
                         </template>
                         <template v-else>
-                            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
+                            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
                         </template>
                     </template>
                 </Column>
@@ -67,10 +67,10 @@ export default {
         </template>
         <template #editor="{ data, field }">
             <template v-if="field !== 'price'">
-                <InputText v-model="data[field]" autofocus />
+                <InputText v-model="data[field]" autofocus fluid />
             </template>
             <template v-else>
-                <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
+                <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
             </template>
         </template>
     </Column>
@@ -78,7 +78,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card p-fluid">
+    <div class="card">
         <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
             :pt="{
                 table: { style: 'min-width: 50rem' },
@@ -95,10 +95,10 @@ export default {
                 </template>
                 <template #editor="{ data, field }">
                     <template v-if="field !== 'price'">
-                        <InputText v-model="data[field]" autofocus />
+                        <InputText v-model="data[field]" autofocus fluid />
                     </template>
                     <template v-else>
-                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
+                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
                     </template>
                 </template>
             </Column>
@@ -164,7 +164,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card p-fluid">
+    <div class="card">
         <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
             :pt="{
                 table: { style: 'min-width: 50rem' },
@@ -181,10 +181,10 @@ export default {
                 </template>
                 <template #editor="{ data, field }">
                     <template v-if="field !== 'price'">
-                        <InputText v-model="data[field]" autofocus />
+                        <InputText v-model="data[field]" autofocus fluid />
                     </template>
                     <template v-else>
-                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
+                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
                     </template>
                 </template>
             </Column>
diff --git a/apps/showcase/doc/datatable/edit/RowEditDoc.vue b/apps/showcase/doc/datatable/edit/RowEditDoc.vue
index 36cd1aa20..d4b134ffd 100644
--- a/apps/showcase/doc/datatable/edit/RowEditDoc.vue
+++ b/apps/showcase/doc/datatable/edit/RowEditDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
-        <div class="card p-fluid">
+        <div class="card">
             <DataTable
                 v-model:editingRows="editingRows"
                 :value="products"
@@ -24,17 +24,17 @@
             >
                 <Column field="code" header="Code" style="width: 20%">
                     <template #editor="{ data, field }">
-                        <InputText v-model="data[field]" />
+                        <InputText v-model="data[field]" fluid />
                     </template>
                 </Column>
                 <Column field="name" header="Name" style="width: 20%">
                     <template #editor="{ data, field }">
-                        <InputText v-model="data[field]" />
+                        <InputText v-model="data[field]" fluid />
                     </template>
                 </Column>
                 <Column field="inventoryStatus" header="Status" style="width: 20%">
                     <template #editor="{ data, field }">
-                        <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+                        <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                             </template>
@@ -49,7 +49,7 @@
                         {{ formatCurrency(data[field]) }}
                     </template>
                     <template #editor="{ data, field }">
-                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
+                        <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
                     </template>
                 </Column>
                 <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
@@ -91,12 +91,12 @@ export default {
     </Column>
     <Column field="name" header="Name" style="width: 20%">
         <template #editor="{ data, field }">
-            <InputText v-model="data[field]" />
+            <InputText v-model="data[field]" fluid />
         </template>
     </Column>
     <Column field="inventoryStatus" header="Status" style="width: 20%">
         <template #editor="{ data, field }">
-            <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+            <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                 </template>
@@ -111,7 +111,7 @@ export default {
             {{ formatCurrency(data[field]) }}
         </template>
         <template #editor="{ data, field }">
-            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
         </template>
     </Column>
     <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
@@ -119,7 +119,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card p-fluid">
+    <div class="card">
         <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
             :pt="{
                 table: { style: 'min-width: 50rem' },
@@ -132,17 +132,17 @@ export default {
         >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" />
+                    <InputText v-model="data[field]" fluid />
                 </template>
             </Column>
             <Column field="name" header="Name" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" />
+                    <InputText v-model="data[field]" fluid />
                 </template>
             </Column>
             <Column field="inventoryStatus" header="Status" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                         </template>
@@ -157,7 +157,7 @@ export default {
                     {{ formatCurrency(data[field]) }}
                 </template>
                 <template #editor="{ data, field }">
-                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
+                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
                 </template>
             </Column>
             <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
@@ -213,7 +213,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card p-fluid">
+    <div class="card">
         <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
             :pt="{
                 table: { style: 'min-width: 50rem' },
@@ -226,17 +226,17 @@ export default {
         >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" />
+                    <InputText v-model="data[field]" fluid />
                 </template>
             </Column>
             <Column field="name" header="Name" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" />
+                    <InputText v-model="data[field]" fluid />
                 </template>
             </Column>
             <Column field="inventoryStatus" header="Status" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                         </template>
@@ -251,7 +251,7 @@ export default {
                     {{ formatCurrency(data[field]) }}
                 </template>
                 <template #editor="{ data, field }">
-                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
+                    <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
                 </template>
             </Column>
             <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
diff --git a/apps/showcase/doc/datatable/samples/ProductsDoc.vue b/apps/showcase/doc/datatable/samples/ProductsDoc.vue
index 85780174c..d66adcdde 100644
--- a/apps/showcase/doc/datatable/samples/ProductsDoc.vue
+++ b/apps/showcase/doc/datatable/samples/ProductsDoc.vue
@@ -75,20 +75,20 @@
     </DeferredDemo>
 
     <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
-        <div class="flex flex-col gap-6 p-fluid">
+        <div class="flex flex-col gap-6">
             <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
             <div>
                 <label for="name" class="block font-bold mb-3">Name</label>
-                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
+                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
                 <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
             </div>
             <div>
                 <label for="description" class="block font-bold mb-3">Description</label>
-                <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
+                <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
             </div>
             <div>
                 <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
-                <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"></Select>
+                <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
             </div>
 
             <div>
@@ -116,11 +116,11 @@
             <div class="grid grid-cols-12 gap-4">
                 <div class="col-span-6">
                     <label for="price" class="block font-bold mb-3">Price</label>
-                    <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
+                    <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
                 </div>
                 <div class="col-span-6">
                     <label for="quantity" class="block font-bold mb-3">Quantity</label>
-                    <InputNumber id="quantity" v-model="product.quantity" integeronly />
+                    <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
                 </div>
             </div>
         </div>
@@ -323,20 +323,20 @@ export default {
         </div>
 
         <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
-            <div class="flex flex-col gap-6 p-fluid">
+            <div class="flex flex-col gap-6">
                 <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
                 <div>
                     <label for="name" class="block font-bold mb-3">Name</label>
-                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
+                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
                     <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
                 </div>
                 <div>
                     <label for="description" class="block font-bold mb-3">Description</label>
-                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
+                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
                 </div>
                 <div>
                     <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
-                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"></Select>
+                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
                 </div>
 
                 <div>
@@ -364,11 +364,11 @@ export default {
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-6">
                         <label for="price" class="block font-bold mb-3">Price</label>
-                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
+                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
                     </div>
                     <div class="col-span-6">
                         <label for="quantity" class="block font-bold mb-3">Quantity</label>
-                        <InputNumber id="quantity" v-model="product.quantity" integeronly />
+                        <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
                     </div>
                 </div>
             </div>
@@ -615,20 +615,20 @@ export default {
         </div>
 
         <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
-            <div class="flex flex-col gap-6 p-fluid">
+            <div class="flex flex-col gap-6">
                 <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
                 <div>
                     <label for="name" class="block font-bold mb-3">Name</label>
-                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
+                    <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
                     <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
                 </div>
                 <div>
                     <label for="description" class="block font-bold mb-3">Description</label>
-                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
+                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
                 </div>
                 <div>
                     <label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
-                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"></Select>
+                    <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
                 </div>
 
                 <div>
@@ -656,11 +656,11 @@ export default {
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-6">
                         <label for="price" class="block font-bold mb-3">Price</label>
-                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
+                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
                     </div>
                     <div class="col-span-6">
                         <label for="quantity" class="block font-bold mb-3">Quantity</label>
-                        <InputNumber id="quantity" v-model="product.quantity" integeronly />
+                        <InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
                     </div>
                 </div>
             </div>
diff --git a/apps/showcase/doc/datepicker/IconDoc.vue b/apps/showcase/doc/datepicker/IconDoc.vue
index 66f861c80..fc5a33210 100644
--- a/apps/showcase/doc/datepicker/IconDoc.vue
+++ b/apps/showcase/doc/datepicker/IconDoc.vue
@@ -2,18 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>An additional icon is displayed next to the input field when <i>showIcon</i> is present.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
+            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
         </div>
         <div class="flex-auto">
             <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
         </div>
         <div class="flex-auto">
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="slotProps">
                     <i class="pi pi-clock" @click="slotProps.clickCallback" />
                 </template>
@@ -32,9 +32,9 @@ export default {
             templatedisplay: null,
             code: {
                 basic: `
-<DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" />
-<DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
-<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
+<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" />
+<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" />
+<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly>
     <template #inputicon="slotProps">
         <i class="pi pi-clock" @click="slotProps.clickCallback" />
     </template>
@@ -42,18 +42,18 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
+            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
         </div>
         <div class="flex-auto">
             <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
         </div>
         <div class="flex-auto">
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="slotProps">
                     <i class="pi pi-clock" @click="slotProps.clickCallback" />
                 </template>
@@ -76,18 +76,18 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
+            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
         </div>
         <div class="flex-auto">
             <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
         </div>
         <div class="flex-auto">
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="slotProps">
                     <i class="pi pi-clock" @click="slotProps.clickCallback" />
                 </template>
diff --git a/apps/showcase/doc/datepicker/TimeDoc.vue b/apps/showcase/doc/datepicker/TimeDoc.vue
index 911f6c121..8094888c8 100644
--- a/apps/showcase/doc/datepicker/TimeDoc.vue
+++ b/apps/showcase/doc/datepicker/TimeDoc.vue
@@ -2,18 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
-            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
         </div>
         <div class="flex-auto">
             <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
-            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
         </div>
         <div class="flex-auto">
             <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -28,24 +28,24 @@ export default {
             time: null,
             code: {
                 basic: `
-<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
-<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
-<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
+<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
+<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
-            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
         </div>
         <div class="flex-auto">
             <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
-            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
         </div>
         <div class="flex-auto">
             <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
         </div>
     </div>
 </template>
@@ -64,18 +64,18 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
-            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
         </div>
         <div class="flex-auto">
             <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
-            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
         </div>
         <div class="flex-auto">
             <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/focustrap/BasicDoc.vue b/apps/showcase/doc/focustrap/BasicDoc.vue
index 02a4fbc43..dceb73f45 100644
--- a/apps/showcase/doc/focustrap/BasicDoc.vue
+++ b/apps/showcase/doc/focustrap/BasicDoc.vue
@@ -2,20 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>FocusTrap is enabled by attaching the directive with the v- prefix.</p>
     </DocSectionText>
-    <div class="card flex justify-center p-fluid">
+    <div class="card flex justify-center">
         <div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
             <IconField>
                 <InputIcon>
                     <i class="pi pi-user" />
                 </InputIcon>
-                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
             </IconField>
 
             <IconField>
                 <InputIcon>
                     <i class="pi pi-envelope" />
                 </InputIcon>
-                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
             </IconField>
 
             <div class="flex items-center gap-2">
@@ -43,14 +43,14 @@ export default {
         <InputIcon>
             <i class="pi pi-user" />
         </InputIcon>
-        <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+        <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
     </IconField>
 
     <IconField>
         <InputIcon>
             <i class="pi pi-envelope" />
         </InputIcon>
-        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+        <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
     </IconField>
 
     <div class="flex items-center gap-2">
@@ -63,20 +63,20 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center p-fluid">
+    <div class="card flex justify-center">
         <div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
             <IconField>
                 <InputIcon>
                     <i class="pi pi-user" />
                 </InputIcon>
-                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
             </IconField>
 
             <IconField>
                 <InputIcon>
                     <i class="pi pi-envelope" />
                 </InputIcon>
-                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
             </IconField>
 
             <div class="flex items-center gap-2">
@@ -103,20 +103,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center p-fluid">
+    <div class="card flex justify-center">
         <div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
             <IconField>
                 <InputIcon>
                     <i class="pi pi-user" />
                 </InputIcon>
-                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
             </IconField>
 
             <IconField>
                 <InputIcon>
                     <i class="pi pi-envelope" />
                 </InputIcon>
-                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
             </IconField>
 
             <div class="flex items-center gap-2">
diff --git a/apps/showcase/doc/inputmask/MaskDoc.vue b/apps/showcase/doc/inputmask/MaskDoc.vue
index 09388a46f..15b457c48 100644
--- a/apps/showcase/doc/inputmask/MaskDoc.vue
+++ b/apps/showcase/doc/inputmask/MaskDoc.vue
@@ -5,20 +5,20 @@
             <i>-</i> are also accepted.
         </p>
     </DocSectionText>
-    <div class="card p-fluid flex flex-wrap gap-4">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="ssn" class="font-bold block mb-2">SSN</label>
-            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="phone" class="font-bold block mb-2">Phone</label>
-            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="serial" class="font-bold block mb-2">Serial</label>
-            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -35,35 +35,35 @@ export default {
                 basic: `
 <div class="flex-auto">
     <label for="ssn" class="font-bold block mb-2">SSN</label>
-    <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
+    <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
 </div>
 
 <div class="flex-auto">
     <label for="phone" class="font-bold block mb-2">Phone</label>
-    <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
+    <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
 </div>
 
 <div class="flex-auto">
     <label for="serial" class="font-bold block mb-2">Serial</label>
-    <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
+    <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
 </div>
 `,
                 options: `
 <template>
-    <div class="card p-fluid flex flex-wrap gap-4">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="ssn" class="font-bold block mb-2">SSN</label>
-            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="phone" class="font-bold block mb-2">Phone</label>
-            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="serial" class="font-bold block mb-2">Serial</label>
-            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
         </div>
     </div>
 </template>
@@ -83,20 +83,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card p-fluid flex flex-wrap gap-4">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="ssn" class="font-bold block mb-2">SSN</label>
-            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
+            <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="phone" class="font-bold block mb-2">Phone</label>
-            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
+            <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="serial" class="font-bold block mb-2">Serial</label>
-            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
+            <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/inputnumber/ButtonsDoc.vue b/apps/showcase/doc/inputnumber/ButtonsDoc.vue
index 12c7ce42b..e14ad3cc7 100644
--- a/apps/showcase/doc/inputnumber/ButtonsDoc.vue
+++ b/apps/showcase/doc/inputnumber/ButtonsDoc.vue
@@ -2,19 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
         </div>
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
                 <template #incrementbuttonicon>
                     <span class="pi pi-plus" />
                 </template>
@@ -36,9 +36,9 @@ export default {
             value3: 10.5,
             code: {
                 basic: `
-<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
-<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
-<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
+<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
+<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
+<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
     <template #incrementbuttonicon>
         <span class="pi pi-plus" />
     </template>
@@ -49,19 +49,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
         </div>
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
                 <template #incrementbuttonicon>
                     <span class="pi pi-plus" />
                 </template>
@@ -87,19 +87,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
         </div>
 
         <div class="flex-auto">
             <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
         </div>
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
                 <template #incrementbuttonicon>
                     <span class="pi pi-plus" />
                 </template>
diff --git a/apps/showcase/doc/inputnumber/CurrencyDoc.vue b/apps/showcase/doc/inputnumber/CurrencyDoc.vue
index 84596cbfc..8ca7c8bab 100644
--- a/apps/showcase/doc/inputnumber/CurrencyDoc.vue
+++ b/apps/showcase/doc/inputnumber/CurrencyDoc.vue
@@ -2,22 +2,22 @@
     <DocSectionText v-bind="$attrs">
         <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -33,29 +33,29 @@ export default {
             value4: 5002,
             code: {
                 basic: `
-<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
+<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
 <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
-<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
-<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
+<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
+<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
         </div>
     </div>
 </template>
@@ -75,22 +75,22 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
+            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
         </div>
         <div class="flex-auto">
             <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
+            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/inputnumber/LocaleDoc.vue b/apps/showcase/doc/inputnumber/LocaleDoc.vue
index e13db5472..82518404b 100644
--- a/apps/showcase/doc/inputnumber/LocaleDoc.vue
+++ b/apps/showcase/doc/inputnumber/LocaleDoc.vue
@@ -2,22 +2,22 @@
     <DocSectionText v-bind="$attrs">
         <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -33,29 +33,29 @@ export default {
             value4: 732762,
             code: {
                 basic: `
-<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
-<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
-<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
-<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
+<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
+<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
+<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
+<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
         </div>
     </div>
 </template>
@@ -75,22 +75,22 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
+            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
+            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
+            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
         </div>
         <div class="flex-auto">
             <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
+            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/inputnumber/NumeralsDoc.vue b/apps/showcase/doc/inputnumber/NumeralsDoc.vue
index 3f983148d..44b9881ee 100644
--- a/apps/showcase/doc/inputnumber/NumeralsDoc.vue
+++ b/apps/showcase/doc/inputnumber/NumeralsDoc.vue
@@ -2,22 +2,22 @@
     <DocSectionText v-bind="$attrs">
         <p>InputNumber is used as a controlled input with <i>v-model</i> property.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" />
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
         </div>
         <div class="flex-auto">
             <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
         </div>
         <div class="flex-auto">
             <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
         </div>
         <div class="flex-auto">
             <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -33,29 +33,29 @@ export default {
             value4: 50,
             code: {
                 basic: `
-<InputNumber v-model="value1" inputId="integeronly" />
-<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
-<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
-<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+<InputNumber v-model="value1" inputId="integeronly" fluid />
+<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
+<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
+<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" />
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
         </div>
         <div class="flex-auto">
             <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
         </div>
         <div class="flex-auto">
             <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
         </div>
         <div class="flex-auto">
             <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
         </div>
     </div>
 </template>
@@ -75,22 +75,22 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" />
+            <InputNumber v-model="value1" inputId="integeronly" fluid />
         </div>
         <div class="flex-auto">
             <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
         </div>
         <div class="flex-auto">
             <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
         </div>
         <div class="flex-auto">
             <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/inputnumber/PrefixSuffixDoc.vue b/apps/showcase/doc/inputnumber/PrefixSuffixDoc.vue
index 5de1b25c2..f812322aa 100644
--- a/apps/showcase/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/apps/showcase/doc/inputnumber/PrefixSuffixDoc.vue
@@ -2,22 +2,22 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
         </div>
         <div class="flex-auto">
             <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" />
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
         </div>
         <div class="flex-auto">
             <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
         </div>
         <div class="flex-auto">
             <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -33,29 +33,29 @@ export default {
             value4: 20,
             code: {
                 basic: `
-<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
-<InputNumber v-model="value2" inputId="percent" prefix="%" />
-<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
-<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
+<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
+<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
+<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
         </div>
         <div class="flex-auto">
             <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" />
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
         </div>
         <div class="flex-auto">
             <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
         </div>
         <div class="flex-auto">
             <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
         </div>
     </div>
 </template>
@@ -75,22 +75,22 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 p-fluid">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
+            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
         </div>
         <div class="flex-auto">
             <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" />
+            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
         </div>
         <div class="flex-auto">
             <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
+            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
         </div>
         <div class="flex-auto">
             <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/stepper/TemplateDoc.vue b/apps/showcase/doc/stepper/TemplateDoc.vue
index 622595053..8a2749b63 100644
--- a/apps/showcase/doc/stepper/TemplateDoc.vue
+++ b/apps/showcase/doc/stepper/TemplateDoc.vue
@@ -57,14 +57,14 @@
                 <StepPanel v-slot="{ activateCallback }" :value="1">
                     <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
                         <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field p-fluid">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                        <div class="field">
+                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
                         </div>
-                        <div class="field p-fluid">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                        <div class="field">
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
                         </div>
-                        <div class="field p-fluid">
-                            <Password v-model="password" placeholder="Password" />
+                        <div class="field">
+                            <Password v-model="password" placeholder="Password" fluid />
                         </div>
                     </div>
                     <div class="flex pt-6 justify-end">
@@ -180,14 +180,14 @@ export default {
         <StepPanel v-slot="{ activateCallback }" :value="1">
             <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
                 <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field p-fluid">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
-                        </div>
-                        <div class="field p-fluid">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                        </div>
-                <div class="field p-fluid">
-                    <Password v-model="password" placeholder="Password" />
+                <div class="field">
+                    <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
+                </div>
+                <div class="field">
+                    <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
+                </div>
+                <div class="field">
+                    <Password v-model="password" placeholder="Password" fluid />
                 </div>
             </div>
             <div class="flex pt-6 justify-end">
@@ -283,14 +283,14 @@ export default {
                 <StepPanel v-slot="{ activateCallback }" :value="1">
                     <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
                         <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field p-fluid">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                        <div class="field">
+                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
                         </div>
-                        <div class="field p-fluid">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                        <div class="field">
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
                         </div>
-                        <div class="field p-fluid">
-                            <Password v-model="password" placeholder="Password" />
+                        <div class="field">
+                            <Password v-model="password" placeholder="Password" fluid />
                         </div>
                     </div>
                     <div class="flex pt-6 justify-end">
@@ -411,14 +411,14 @@ export default {
                 <StepPanel v-slot="{ activateCallback }" :value="1">
                     <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
                         <div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
-                        <div class="field p-fluid">
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                        <div class="field">
+                            <InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
                         </div>
-                        <div class="field p-fluid">
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                        <div class="field">
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
                         </div>
-                        <div class="field p-fluid">
-                            <Password v-model="password" placeholder="Password" />
+                        <div class="field">
+                            <Password v-model="password" placeholder="Password" fluid />
                         </div>
                     </div>
                     <div class="flex pt-6 justify-end">
diff --git a/apps/showcase/doc/tree/LazyDoc.vue b/apps/showcase/doc/tree/LazyDoc.vue
index 6d06cacc7..d080e1361 100644
--- a/apps/showcase/doc/tree/LazyDoc.vue
+++ b/apps/showcase/doc/tree/LazyDoc.vue
@@ -5,7 +5,7 @@
             <i>icon</i> is available.
         </p>
     </DocSectionText>
-    <div class="card flex flex-wrap p-fluid gap-4">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
@@ -32,7 +32,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap p-fluid gap-4">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
@@ -159,7 +159,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap p-fluid gap-4">
+    <div class="card flex flex-wrap gap-4">
         <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
             <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>