Fluid demo added

apps/showcase/assets/menu/menu.json

@@ -99,6 +99,10 @@
                             "name": "FloatLabel",
                             "to": "/floatlabel"
                         },
+                        {
+                            "name": "Fluid",
+                            "to": "/fluid"
+                        },
                         {
                             "name": "IconField",
                             "to": "/iconfield"

apps/showcase/components/doc/codeeditor/templates.js

@@ -172,6 +172,7 @@ import DynamicDialog from 'primevue/dynamicdialog';
 import Fieldset from 'primevue/fieldset';
 import FileUpload from 'primevue/fileupload';
 import FloatLabel from 'primevue/floatlabel';
+import Fluid from 'primevue/fluid';
 import FocusTrap from 'primevue/focustrap';
 import Galleria from 'primevue/galleria';
 import IconField from 'primevue/iconfield';
@@ -313,6 +314,7 @@ app.component('DynamicDialog', DynamicDialog);
 app.component('Fieldset', Fieldset);
 app.component('FileUpload', FileUpload);
 app.component('FloatLabel', FloatLabel);
+app.component('Fluid', Fluid);
 app.component('Galleria', Galleria);
 app.component('IconField', IconField);
 app.component('Image', Image);

apps/showcase/doc/fluid/AccessibilityDoc.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Fluid does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>

apps/showcase/doc/fluid/BasicDoc.vue

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Fluid used by making the input's width 100%.</p>
+    </DocSectionText>
+    <div class="card">
+        <Fluid>
+            <InputText id="username" v-model="value" placeholder="Username" />
+        </Fluid>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Fluid>
+    <InputText id="username" v-model="value" placeholder="Username" />
+</Fluid>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Fluid>
+            <InputText id="username" v-model="value" placeholder="Username" />
+        </Fluid>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Fluid>
+            <InputText id="username" v-model="value" placeholder="Username" />
+        </Fluid>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/fluid/ImportDoc.vue

@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Fluid from 'primevue/fluid';
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/fluid/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

apps/showcase/doc/fluid/pt/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Fluid Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOptions } from '@/components/doc/helpers';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.floatlabel',
+                    label: 'Fluid PT Options',
+                    component: DocApiTable,
+                    data: getPTOptions('Fluid')
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/fluid/theming/TailwindDoc.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
+            PrimeVue components with Tailwind CSS.
+        </p>
+    </DocSectionText>
+</template>

apps/showcase/doc/fluid/theming/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Fluid Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Fluid')
+                        }
+                    ]
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/inputtext/FluidDoc.vue

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,37 @@
+<template>
+    <DocComponent title="Vue Fluid" header="Fluid" description="Fluid spans 100% width of the container." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['Fluid']" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/fluid/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/fluid/BasicDoc.vue';
+import ImportDoc from '@/doc/fluid/ImportDoc.vue';
+import PTComponent from '@/doc/fluid/pt/index.vue';
+import ThemingDoc from '@/doc/fluid/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>

apps/showcase/pages/inputtext/index.vue

@@ -8,6 +8,7 @@ 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';
@@ -49,6 +50,11 @@ export default {
                     label: 'Filled',
                     component: FilledDoc
                 },
+                {
+                    id: 'fluid',
+                    label: 'Fluid',
+                    component: FluidDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',