Update Fluid Docs

apps/showcase/assets/menu/menu.json

@@ -99,10 +99,6 @@
                             "name": "FloatLabel",
                             "to": "/floatlabel"
                         },
-                        {
-                            "name": "Fluid",
-                            "to": "/fluid"
-                        },
                         {
                             "name": "IconField",
                             "to": "/iconfield"
@@ -441,6 +437,10 @@
                             "name": "Inplace",
                             "to": "/inplace"
                         },
+                        {
+                            "name": "Fluid",
+                            "to": "/fluid"
+                        },
                         {
                             "name": "MeterGroup",
                             "to": "/metergroup"

apps/showcase/doc/fluid/BasicDoc.vue

@@ -1,10 +1,30 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Fluid used by making the input's width 100%.</p>
+        <p>
+            Components with the <i>fluid</i> option like <i>InputText</i> have the ability to span the full width of their component. Enabling the <i>fluid</i> for each component individually may be cumbersome so wrap the content with <i>Fluid</i> to
+            instead for an easier alternative.
+        </p>
+        <p>Any component that has the <i>fluid</i> property can be nested inside the <i>Fluid</i> component. The <i>fluid</i> property of a child component has higher precedence than the fluid container as shown in the last sample.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card flex flex-col gap-6">
+        <div>
+            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+            <InputText id="non-fluid" fluid />
+        </div>
+
         <Fluid>
-            <InputText id="username" v-model="value" placeholder="Username" />
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div><InputText /></div>
+                <div><InputText /></div>
+                <div class="col-span-full"><InputText /></div>
+                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+            </div>
         </Fluid>
     </div>
     <DocSectionCode :code="code" />
@@ -17,43 +37,83 @@ export default {
             value: null,
             code: {
                 basic: `
+<div>
+    <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+    <InputText id="non-fluid" />
+</div>
+
+<div>
+    <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+    <InputText id="non-fluid" fluid />
+</div>
+
 <Fluid>
-    <InputText id="username" v-model="value" placeholder="Username" />
+    <span class="font-bold mb-2 block">Fluid Container</span>
+    <div class="grid grid-cols-2 gap-4">
+        <div><InputText /></div>
+        <div><InputText /></div>
+        <div class="col-span-full"><InputText /></div>
+        <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+    </div>
 </Fluid>
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex flex-col gap-6">
+        <div>
+            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+            <InputText id="non-fluid" fluid />
+        </div>
+
         <Fluid>
-            <InputText id="username" v-model="value" placeholder="Username" />
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div><InputText /></div>
+                <div><InputText /></div>
+                <div class="col-span-full"><InputText /></div>
+                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+            </div>
         </Fluid>
     </div>
 </template>
 
-<script setup>
+<script>
-export default {
+
-    data() {
-        return {
-            value: null
-        }
-    }
-}
 <\/script>
 
 `,
                 composition: `
 <template>
-    <div class="card">
+     <div class="card flex flex-col gap-6">
+        <div>
+            <label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
+            <InputText id="non-fluid" fluid />
+        </div>
+
         <Fluid>
-            <InputText id="username" v-model="value" placeholder="Username" />
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div><InputText /></div>
+                <div><InputText /></div>
+                <div class="col-span-full"><InputText /></div>
+                <div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
+            </div>
         </Fluid>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
 
-const value = ref(null);
 <\/script>
 `
             }

apps/showcase/doc/guides/migration/v4/changes/BreakingDoc.vue

@@ -47,7 +47,7 @@
         <ul class="flex flex-col gap-2 leading-normal">
             <li><i class="mark">.p-link</i>, use a button in link mode.</li>
             <li><i class="mark">.p-highlight</i>, each component have its own class such as <i class="mark">.p-select-option-selected</i>.</li>
-            <li><i class="mark">.p-fluid</i>, use the new built-in <i class="mark">fluid</i> properties of components.</li>
+            <li><i class="mark">.p-fluid</i>, use the new built-in <i class="mark">fluid</i> property of the supported components or the <i class="mark">Fluid</i> component.</li>
         </ul>
 
         <h4>Tailwind CSS Presets</h4>

apps/showcase/doc/inputtext/FluidDoc.vue

@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Fluid makes the input's width 100%. Visit <PrimeVueNuxtLink to="/fluid">Fluid</PrimeVueNuxtLink> documentation for more information.</p>
-    </DocSectionText>
-    <div class="card">
-        <Fluid>
-            <InputText v-model="value" type="text" />
-        </Fluid>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Fluid>
-    <InputText v-model="value" type="text" />
-</Fluid>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fluid>
-            <InputText v-model="value" type="text" />
-        </Fluid>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fluid>
-            <InputText v-model="value" type="text" />
-        </Fluid>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>

apps/showcase/pages/fluid/index.vue

@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Fluid" header="Fluid" description="Fluid spans 100% width of the container." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['Fluid']" :themingDocs="themingDoc" />
+    <DocComponent
+        title="Vue Fluid Component"
+        header="Fluid"
+        description="Fluid is a layout component to make descendant components span full width of their container."
+        :componentDocs="docs"
+        :ptTabComponent="ptComponent"
+        :apiDocs="['Fluid']"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>

apps/showcase/pages/inputtext/index.vue

@@ -8,7 +8,6 @@ import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
 import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
-import FluidDoc from '@/doc/inputtext/FluidDoc.vue';
 import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
@@ -50,11 +49,6 @@ export default {
                     label: 'Filled',
                     component: FilledDoc
                 },
-                {
-                    id: 'fluid',
-                    label: 'Fluid',
-                    component: FluidDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',