Merge branch 'primefaces:master' into fix/multiselect-selection-message-locale

apps/showcase/assets/menu/menu.json

@@ -95,9 +95,15 @@
                             "name": "Editor",
                             "to": "/editor"
                         },
+                        {
+                            "name": "IftaLabel",
+                            "to": "/iftalabel",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "FloatLabel",
-                            "to": "/floatlabel"
+                            "to": "/floatlabel",
+                            "badge": "NEW"
                         },
                         {
                             "name": "IconField",
@@ -433,14 +439,14 @@
                             "name": "FocusTrap",
                             "to": "/focustrap"
                         },
-                        {
-                            "name": "Inplace",
-                            "to": "/inplace"
-                        },
                         {
                             "name": "Fluid",
                             "to": "/fluid"
                         },
+                        {
+                            "name": "Inplace",
+                            "to": "/inplace"
+                        },
                         {
                             "name": "MeterGroup",
                             "to": "/metergroup"

apps/showcase/assets/styles/layout/_doc.scss

@@ -432,3 +432,43 @@
         }
     }
 }
+
+.doc-ptviewerwrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 0 !important;
+
+    .doc-ptviewer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-color: var(--border-color);
+        border-width: 0 1px 0 0;
+        padding: 1rem;
+        width: 75%;
+    }
+
+    .doc-ptoptions {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: .5rem;
+        width: 25%;
+        max-height: 720px;
+        overflow-y: auto;
+
+        .doc-ptoption {
+            display: flex;
+            flex-direction: column;
+            padding: .5rem;
+
+            &:hover {
+                background-color: var(--hover-background);
+            }
+
+            .doc-ptoption-text:hover {
+                cursor: default;
+            }
+        }
+    }
+}

apps/showcase/assets/styles/layout/_responsive.scss

@@ -128,6 +128,20 @@
     .DocSearch-Container {
         position: fixed !important;
     }
+
+    .doc-ptviewerwrapper {
+        flex-direction: column;
+
+        .doc-ptviewer {
+            width: 100%;
+            border-width: 0 0 1px 0;
+        }
+
+        .doc-ptoptions {
+            width: 100%;
+            padding: 1rem;
+        }
+    }
 }
 
 @media screen and (max-width: 575px) {

apps/showcase/components/doc/DocPTViewer.vue

@@ -1,14 +1,16 @@
 <template>
-    <div ref="container" class="card flex flex-col md:flex-row !p-0">
+    <div ref="container" class="doc-ptviewerwrapper card">
-        <div class="flex items-center justify-center md:border-r border-b md:border-b-0 border-surface md:w-3/4 w-full p-4">
+        <div id="doc-ptviewer" class="doc-ptviewer">
             <slot />
         </div>
-        <div class="flex flex-col gap-2 p-8 md:p-2 md:w-1/4 w-full max-h-[720px] overflow-y-auto">
+        <div class="doc-ptoptions">
             <template v-if="docs[0].data">
                 <template v-for="doc of docs" :key="doc.key">
-                    <div v-for="item of handleData(doc.data)" :key="item.value" class="flex flex-col p-2 cursor-pointer hover:bg-emphasis" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
+                    <div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
-                        <span>{{ item.label }}</span>
+                        <span class="doc-ptoption-text">
-                        <span class="text-muted-color text-sm">{{ item.label }} element of {{ doc.key }} component</span>
+                            {{ item.label }}
+                            <template v-if="docs.length > 1">| {{ doc.key }}</template>
+                        </span>
                     </div>
                 </template>
             </template>
@@ -28,27 +30,33 @@ export default {
     },
     methods: {
         enterSection(item, componentName) {
-            let selector;
+            let selector,
+                cmpName = componentName;
 
-            if (item.label === 'root') selector = `[data-pc-name="${componentName.toLowerCase()}"]`;
+            if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
+            else if (componentName === 'ScrollTop') cmpName = 'Button';
+
+            if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
             else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;
             else selector = `[data-pc-section="${item.label.toLowerCase()}"]`;
 
             this.hoveredElements = find(this.$refs.container, selector);
 
-            this.hoveredElements.forEach((el) => {
+            if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO:
-                addClass(el, '!ring !ring-red-500');
+
+            this.hoveredElements?.forEach((el) => {
+                addClass(el, '!ring !ring-blue-500 !z-10');
             });
         },
         leaveSection() {
             this.hoveredElements.forEach((el) => {
-                removeClass(el, '!ring !ring-red-500');
+                removeClass(el, '!ring !ring-blue-500 !z-10');
             });
 
             this.hoveredElements = [];
         },
         handleData(doc) {
-            return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition');
+            return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition' && !item.label.includes('hidden'));
         }
     }
 };

apps/showcase/components/landing/BlockSection.vue

@@ -355,7 +355,7 @@
                     <div class="block-content flex-1 p-6 flex flex-col">
                         <div class="block-main h-full flex justify-center items-center flex-col">
                             <div class="block-item block-item-active animation-2 mx-4 w-32 text-center flex flex-col items-center overflow-visible">
-                                <div class="-mt-6">
+                                <div>
                                     <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" />
                                 </div>
                                 <div class="bar w-8 mt-2"></div>

apps/showcase/components/landing/UsersSection.vue

@@ -2,7 +2,7 @@
     <section class="landing-users py-20 px-4 lg:px-20">
         <div class="section-header">Who Uses</div>
         <p class="section-detail">
-            PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
+            PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>200 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
         </p>
         <div class="flex justify-center items-center mt-6">
             <span class="ml-2"> </span>

apps/showcase/components/landing/samples/OverviewApp.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex-1 h-full overflow-y-auto pb-0.5">
-        <div class="flex flex-wrap gap-4 items-start justify-between">
+        <div class="flex flex-wrap gap-4 items-start justify-between p-1">
             <div class="flex-1">
                 <div class="text-muted-color font-medium leading-normal">Overview</div>
                 <div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
@@ -26,7 +26,7 @@
                 </Button>
             </div>
         </div>
-        <div class="mt-4 flex flex-wrap gap-6 items-center justify-between">
+        <div class="mt-4 flex flex-wrap gap-6 items-center justify-between p-1">
             <SelectButton v-model="selectedTime" :options="timeOptions" aria-labelledby="basic" :allowEmpty="false" @change="changeSelect" />
             <div class="flex items-center gap-2">
                 <Button label="Download" icon="pi pi-download" iconPos="right" />

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

@@ -1,8 +0,0 @@
-<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/accordion.jpg" />
-    </div>
-</template>

apps/showcase/doc/accordion/pt/PTViewer.vue

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Accordion value="0">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Accordion'),
+                    key: 'Accordion'
+                },
+                {
+                    data: getPTOptions('AccordionPanel'),
+                    key: 'AccordionPanel'
+                },
+                {
+                    data: getPTOptions('AccordionHeader'),
+                    key: 'AccordionHeader'
+                },
+                {
+                    data: getPTOptions('AccordionContent'),
+                    key: 'AccordionContent'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.accordion',

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

@@ -1,8 +0,0 @@
-<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/breadcrumb.jpg" />
-    </div>
-</template>

apps/showcase/doc/breadcrumb/pt/PTViewer.vue

@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Breadcrumb :home="home" :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home'
+            },
+            items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Breadcrumb'),
+                    key: 'Breadcrumb'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.breadcrumb',

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

@@ -1,8 +0,0 @@
-<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/card.jpg" />
-    </div>
-</template>

apps/showcase/doc/card/pt/PTViewer.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Card style="width: 25rem">
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+            <template #footer>
+                <div class="flex gap-4 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
+            </template>
+        </Card>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Card'),
+                    key: 'Card'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.card',

apps/showcase/doc/chart/pt/PTViewer.vue

@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Chart type="bar" :data="chartData" :options="chartOptions" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    data() {
+        return {
+            chartData: null,
+            chartOptions: null,
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Chart'),
+                    key: 'Chart'
+                }
+            ]
+        };
+    },
+    beforeUnmount() {
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
+    },
+    mounted() {
+        this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
+
+        this.redrawListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
+    },
+    methods: {
+        setChartData() {
+            return {
+                labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+                datasets: [
+                    {
+                        label: 'Sales',
+                        data: [540, 325, 702, 620],
+                        backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
+                        borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
+                        borderWidth: 1
+                    }
+                ]
+            };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--p-text-color');
+            const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color');
+            const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: textColor
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: textColorSecondary
+                        },
+                        grid: {
+                            color: surfaceBorder
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            color: textColorSecondary
+                        },
+                        grid: {
+                            color: surfaceBorder
+                        }
+                    }
+                }
+            };
+        }
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.chart',

apps/showcase/doc/common/apidoc/index.json

@@ -13921,29 +13921,21 @@
                             "description": "Used to pass attributes to the header title's DOM element."
                         },
                         {
-                            "name": "icons",
+                            "name": "headerActions",
                             "optional": true,
                             "readonly": false,
                             "type": "ConfirmDialogPassThroughOptionType",
                             "default": "",
-                            "description": "Used to pass attributes to the header icons' DOM element."
+                            "description": "Used to pass attributes to the header actions' DOM element."
                         },
                         {
-                            "name": "closeButton",
+                            "name": "pcCloseButton",
                             "optional": true,
                             "readonly": false,
                             "type": "ConfirmDialogPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the close button's component."
                         },
-                        {
-                            "name": "closeButtonIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ConfirmDialogPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the close button icon's component."
-                        },
                         {
                             "name": "content",
                             "optional": true,
@@ -25810,12 +25802,12 @@
                             "description": "Used to pass attributes to the legend's DOM element."
                         },
                         {
-                            "name": "toggler",
+                            "name": "toggleButton",
                             "optional": true,
                             "readonly": false,
                             "type": "FieldsetPassThroughOptionType",
                             "default": "",
-                            "description": "Used to pass attributes to the toggler's DOM element."
+                            "description": "Used to pass attributes to the toggle button's DOM element."
                         },
                         {
                             "name": "toggleIcon",
@@ -25825,14 +25817,6 @@
                             "default": "",
                             "description": "Used to pass attributes to the toggle icon's DOM element."
                         },
-                        {
-                            "name": "toggleButton",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "FieldsetPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the legend label's DOM element."
-                        },
                         {
                             "name": "legendLabel",
                             "optional": true,
@@ -27393,10 +27377,10 @@
         }
     },
     "floatlabel": {
-        "description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primevue.org/floatlabel/)",
+        "description": "FloatLabel visually integrates a label with its form element.\n\n[Live Demo](https://www.primevue.org/floatlabel/)",
         "components": {
             "default": {
-                "description": "FloatLabel appears on top of the input field when focused.",
+                "description": "FloatLabel visually integrates a label with its form element.",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -27527,6 +27511,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"in\" | \"over\" | \"on\"",
+                            "default": "false",
+                            "description": "Defines the positioning of the label relative to the input."
                         }
                     ],
                     "methods": []
@@ -27598,7 +27590,7 @@
         }
     },
     "floatlabelstyle": {
-        "description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primevue.org/inputtext/)",
+        "description": "FloatLabel visually integrates a label with its form element.\n\n[Live Demo](https://www.primevue.org/floatlabel/)",
         "interfaces": {
             "description": "Defines the custom interfaces used by the module.",
             "eventDescription": "Defines the custom events used by the component's emit.",
@@ -29473,6 +29465,251 @@
             }
         }
     },
+    "iftalabel": {
+        "description": "IftaLabel visually integrates a label within its form element.\n\n[Live Demo](https://www.primevue.org/iftalabel/)",
+        "components": {
+            "default": {
+                "description": "IftaLabel visually integrates a label within its form element.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "IftaLabelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "IftaLabelProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "IftaLabelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "IftaLabelProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IftaLabelPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "IftaLabelPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "IftaLabelProps": {
+                    "description": "Defines valid properties in IftaLabel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<IftaLabelPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": []
+                },
+                "IftaLabelSlots": {
+                    "description": "Defines valid slots in IftaLabel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "default",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "IftaLabelEmitsOptions": {
+                    "description": "Defines valid emits in IftaLabel component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": []
+                }
+            }
+        },
+        "tokens": {
+            "description": "Define design tokens used by the component.",
+            "values": {
+                "IftaLabelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "props": []
+                },
+                "IftaLabelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "props": []
+                },
+                "IftaLabelPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "props": []
+                },
+                "IftaLabelProps": {
+                    "description": "Defines valid properties in IftaLabel component.",
+                    "props": []
+                },
+                "IftaLabelSlots": {
+                    "description": "Defines valid slots in IftaLabel component.",
+                    "props": []
+                },
+                "IftaLabelEmitsOptions": {
+                    "description": "Defines valid emits in IftaLabel component.",
+                    "props": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "IftaLabelPassThroughOptionType": {
+                    "values": "IftaLabelPassThroughAttributes | (options: IftaLabelPassThroughMethodOptions) => undefined | string | null | undefined"
+                },
+                "IftaLabelPassThroughTransitionType": {
+                    "values": "TransitionProps | (options: IftaLabelPassThroughMethodOptions) => TransitionProps | undefined"
+                },
+                "IftaLabelEmits": {
+                    "values": "EmitFn<IftaLabelEmitsOptions>"
+                }
+            }
+        }
+    },
+    "iftalabelstyle": {
+        "description": "IftaLabel visually integrates a label within its form element.\n\n[Live Demo](https://www.primevue.org/iftalabel/)",
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "IftaLabelStyle": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "default"
+                }
+            }
+        },
+        "tokens": {
+            "description": "Define design tokens used by the component.",
+            "values": {
+                "IftaLabelStyle": {
+                    "props": []
+                }
+            }
+        },
+        "enumerations": {
+            "values": {
+                "IftaLabelClasses": {
+                    "members": [
+                        {
+                            "name": "root",
+                            "optional": false,
+                            "readonly": false,
+                            "value": "\"p-iftalabel\"",
+                            "description": "Class name of the root element"
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "image": {
         "description": "Displays an image with preview and tranformation options. For multiple image, see Galleria.\n\n[Live Demo](https://www.primevue.org/image/)",
         "components": {
@@ -36405,6 +36642,14 @@
                             "default": "",
                             "description": "Used to pass attributes to the mobile popup menu button's DOM element."
                         },
+                        {
+                            "name": "buttonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the mobile popup menu button icon's DOM element."
+                        },
                         {
                             "name": "start",
                             "optional": true,
@@ -44833,7 +45078,7 @@
                             "description": "Used to pass attributes to the root list's DOM element."
                         },
                         {
-                            "name": "menuitem",
+                            "name": "item",
                             "optional": true,
                             "readonly": false,
                             "type": "PanelMenuPassThroughOptionType",
@@ -48524,7 +48769,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "spinner",
+                            "name": "spin",
                             "optional": true,
                             "readonly": false,
                             "type": "ProgressSpinnerPassThroughOptionType",
@@ -50637,15 +50882,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Used to pass attributes to the previous button's DOM element."
+                            "description": "Used to pass attributes to the root's DOM element."
-                        },
-                        {
-                            "name": "button",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "any",
-                            "default": "",
-                            "description": "Used to pass attributes to the previous button's DOM element."
                         },
                         {
                             "name": "hooks",
@@ -79238,6 +79475,22 @@
                             "default": "",
                             "description": "Used to pass tokens of the root section"
                         },
+                        {
+                            "name": "in",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the in section"
+                        },
+                        {
+                            "name": "on",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the on section"
+                        },
                         {
                             "name": "colorScheme",
                             "optional": true,
@@ -79274,6 +79527,15 @@
                             "default": "",
                             "description": "Focus color of root"
                         },
+                        {
+                            "name": "root.activeColor",
+                            "token": "floatlabel.active.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Active color of root"
+                        },
                         {
                             "name": "root.invalidColor",
                             "token": "floatlabel.invalid.color",
@@ -79291,6 +79553,105 @@
                             "type": "string",
                             "default": "",
                             "description": "Transition duration of root"
+                        },
+                        {
+                            "name": "root.positionX",
+                            "token": "floatlabel.position.x",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Position x of root"
+                        },
+                        {
+                            "name": "root.fontWeight",
+                            "token": "floatlabel.font.weight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Font weight of root"
+                        },
+                        {
+                            "name": "focus.top",
+                            "token": "floatlabel.focus.top",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus top of root"
+                        },
+                        {
+                            "name": "focus.fontSize",
+                            "token": "floatlabel.focus.font.size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus font size of root"
+                        },
+                        {
+                            "name": "focus.fontWeight",
+                            "token": "floatlabel.focus.font.weight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus font weight of root"
+                        },
+                        {
+                            "name": "input.paddingTop",
+                            "token": "floatlabel.in.input.padding.top",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Input padding top of in"
+                        },
+                        {
+                            "name": "focus.top",
+                            "token": "floatlabel.in.focus.top",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus top of in"
+                        },
+                        {
+                            "name": "input.paddingTop",
+                            "token": "floatlabel.on.input.padding.top",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Input padding top of on"
+                        },
+                        {
+                            "name": "input.paddingBottom",
+                            "token": "floatlabel.on.input.padding.bottom",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Input padding bottom of on"
+                        },
+                        {
+                            "name": "focus.background",
+                            "token": "floatlabel.on.focus.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus background of on"
+                        },
+                        {
+                            "name": "focus.padding",
+                            "token": "floatlabel.on.focus.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus padding of on"
                         }
                     ]
                 }
@@ -80097,6 +80458,137 @@
             }
         }
     },
+    "themes/iftalabel": {
+        "description": "IftaLabel Design Tokens\n\n[Live Demo](https://www.primevue.org/iftalabel/)",
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "IftaLabelDesignTokens": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the root section"
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the input section"
+                        },
+                        {
+                            "name": "colorScheme",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "ColorSchemeDesignToken<IftaLabelDesignTokens>"
+                }
+            }
+        },
+        "tokens": {
+            "description": "Define design tokens used by the component.",
+            "values": {
+                "IftaLabelDesignTokens": {
+                    "props": [
+                        {
+                            "name": "root.color",
+                            "token": "iftalabel.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Color of root"
+                        },
+                        {
+                            "name": "root.focusColor",
+                            "token": "iftalabel.focus.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Focus color of root"
+                        },
+                        {
+                            "name": "root.invalidColor",
+                            "token": "iftalabel.invalid.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid color of root"
+                        },
+                        {
+                            "name": "root.transitionDuration",
+                            "token": "iftalabel.transition.duration",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Transition duration of root"
+                        },
+                        {
+                            "name": "root.positionX",
+                            "token": "iftalabel.position.x",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Position x of root"
+                        },
+                        {
+                            "name": "root.top",
+                            "token": "iftalabel.top",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Top of root"
+                        },
+                        {
+                            "name": "root.fontSize",
+                            "token": "iftalabel.font.size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Font size of root"
+                        },
+                        {
+                            "name": "root.fontWeight",
+                            "token": "iftalabel.font.weight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Font weight of root"
+                        },
+                        {
+                            "name": "input.paddingTop",
+                            "token": "iftalabel.input.padding.top",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Padding top of input"
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "themes/image": {
         "description": "Image Design Tokens\n\n[Live Demo](https://www.primevue.org/image/)",
         "interfaces": {
@@ -80417,7 +80909,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "AccordionDesignTokens,AutoCompleteDesignTokens,AvatarDesignTokens,BadgeDesignTokens,BlockUIDesignTokens,BreadcrumbDesignTokens,ButtonDesignTokens,CardDesignTokens,CarouselDesignTokens,CascadeSelectDesignTokens,CheckboxDesignTokens,ChipDesignTokens,ColorPickerDesignTokens,ConfirmDialogDesignTokens,ConfirmPopupDesignTokens,ContextMenuDesignTokens,DataTableDesignTokens,DataViewDesignTokens,DatePickerDesignTokens,DialogDesignTokens,DividerDesignTokens,DockDesignTokens,DrawerDesignTokens,EditorDesignTokens,FieldsetDesignTokens,FileUploadDesignTokens,FloatLabelDesignTokens,GalleriaDesignTokens,IconFieldDesignTokens,ImageDesignTokens,InlineMessageDesignTokens,InplaceDesignTokens,InputChipsDesignTokens,InputGroupDesignTokens,InputNumberDesignTokens,InputTextDesignTokens,KnobDesignTokens,ListboxDesignTokens,MegaMenuDesignTokens,MenuDesignTokens,MenubarDesignTokens,MessageDesignTokens,MeterGroupDesignTokens,MultiSelectDesignTokens,OrderListDesignTokens,OrganizationChartDesignTokens,OverlayBadgeDesignTokens,PaginatorDesignTokens,PanelDesignTokens,PanelMenuDesignTokens,PasswordDesignTokens,PickListDesignTokens,PopoverDesignTokens,ProgressBarDesignTokens,ProgressSpinnerDesignTokens,RadioButtonDesignTokens,RatingDesignTokens,RippleDesignTokens,ScrollPanelDesignTokens,SelectDesignTokens,SelectButtonDesignTokens,SkeletonDesignTokens,SliderDesignTokens,SpeedDialDesignTokens,SplitButtonDesignTokens,SplitterDesignTokens,StepperDesignTokens,StepsDesignTokens,TabmenuDesignTokens,TabsDesignTokens,TabViewDesignTokens,TagDesignTokens,TerminalDesignTokens,TextareaDesignTokens,TieredMenuDesignTokens,TimelineDesignTokens,ToastDesignTokens,ToggleButtonDesignTokens,ToggleSwitchDesignTokens,ToolbarDesignTokens,TooltipDesignTokens,TreeDesignTokens,TreeSelectDesignTokens,TreeTableDesignTokens,VirtualScrollerDesignTokens"
+                    "extendedBy": "AccordionDesignTokens,AutoCompleteDesignTokens,AvatarDesignTokens,BadgeDesignTokens,BlockUIDesignTokens,BreadcrumbDesignTokens,ButtonDesignTokens,CardDesignTokens,CarouselDesignTokens,CascadeSelectDesignTokens,CheckboxDesignTokens,ChipDesignTokens,ColorPickerDesignTokens,ConfirmDialogDesignTokens,ConfirmPopupDesignTokens,ContextMenuDesignTokens,DataTableDesignTokens,DataViewDesignTokens,DatePickerDesignTokens,DialogDesignTokens,DividerDesignTokens,DockDesignTokens,DrawerDesignTokens,EditorDesignTokens,FieldsetDesignTokens,FileUploadDesignTokens,FloatLabelDesignTokens,GalleriaDesignTokens,IconFieldDesignTokens,IftaLabelDesignTokens,ImageDesignTokens,InlineMessageDesignTokens,InplaceDesignTokens,InputChipsDesignTokens,InputGroupDesignTokens,InputNumberDesignTokens,InputTextDesignTokens,KnobDesignTokens,ListboxDesignTokens,MegaMenuDesignTokens,MenuDesignTokens,MenubarDesignTokens,MessageDesignTokens,MeterGroupDesignTokens,MultiSelectDesignTokens,OrderListDesignTokens,OrganizationChartDesignTokens,OverlayBadgeDesignTokens,PaginatorDesignTokens,PanelDesignTokens,PanelMenuDesignTokens,PasswordDesignTokens,PickListDesignTokens,PopoverDesignTokens,ProgressBarDesignTokens,ProgressSpinnerDesignTokens,RadioButtonDesignTokens,RatingDesignTokens,RippleDesignTokens,ScrollPanelDesignTokens,SelectDesignTokens,SelectButtonDesignTokens,SkeletonDesignTokens,SliderDesignTokens,SpeedDialDesignTokens,SplitButtonDesignTokens,SplitterDesignTokens,StepperDesignTokens,StepsDesignTokens,TabmenuDesignTokens,TabsDesignTokens,TabViewDesignTokens,TagDesignTokens,TerminalDesignTokens,TextareaDesignTokens,TieredMenuDesignTokens,TimelineDesignTokens,ToastDesignTokens,ToggleButtonDesignTokens,ToggleSwitchDesignTokens,ToolbarDesignTokens,TooltipDesignTokens,TreeDesignTokens,TreeSelectDesignTokens,TreeTableDesignTokens,VirtualScrollerDesignTokens"
                 },
                 "PaletteDesignToken": {
                     "relatedProp": "",

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

@@ -1,8 +0,0 @@
-<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/confirmpopup.jpg" />
-    </div>
-</template>

apps/showcase/doc/confirmpopup/pt/PTViewer.vue

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <ConfirmPopup group="ptviewer"></ConfirmPopup>
+        <Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('ConfirmPopup'),
+                    key: 'ConfirmPopup'
+                }
+            ]
+        };
+    },
+    methods: {
+        confirm1(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Save'
+                },
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.confirmpopup',

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

@@ -1,8 +0,0 @@
-<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/contextmenu.jpg" />
-    </div>
-</template>

apps/showcase/doc/contextmenu/pt/PTViewer.vue

@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
+        <ContextMenu ref="menu" appendTo="#logo" :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'Copy', icon: 'pi pi-copy' },
+                { label: 'Rename', icon: 'pi pi-file-edit' }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('ContextMenu'),
+                    key: 'ContextMenu'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.contextmenu',

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

@@ -1,8 +0,0 @@
-<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/deferred.jpg" />
-    </div>
-</template>

apps/showcase/doc/deferredcontent/pt/PTViewer.vue

@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <DeferredContent>
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
+        </DeferredContent>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('DeferredContent'),
+                    key: 'DeferredContent'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.deferredcontent',

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

@@ -1,8 +0,0 @@
-<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/dialog.jpg" />
-    </div>
-</template>

apps/showcase/doc/dialog/pt/PTViewer.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button type="button" label="Cancel" severity="secondary"></Button>
+                    <Button type="button" label="Save"></Button>
+                </div>
+            </template>
+        </Dialog>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            visible: true,
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Dialog'),
+                    key: 'Dialog'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.dialog',

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

@@ -1,8 +0,0 @@
-<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/dock.jpg" />
-    </div>
-</template>

apps/showcase/doc/dock/pt/PTViewer.vue

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="relative w-full h-[400px]">
+            <Dock :model="items">
+                <template #itemicon="{ item }">
+                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Dock'),
+                    key: 'Dock'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.dock',

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

@@ -1,8 +0,0 @@
-<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/dialog.jpg" />
-    </div>
-</template>

apps/showcase/doc/dynamicdialog/pt/PTViewer.vue

@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For more information visit <PrimeVueNuxtLink to="/dialog/#pt.viewer">Dialog PT</PrimeVueNuxtLink>.</p>
+    </DocSectionText>
+</template>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.dynamicdialog',

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

@@ -1,8 +0,0 @@
-<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/fieldset.jpg" />
-    </div>
-</template>

apps/showcase/doc/fieldset/pt/PTViewer.vue

@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Fieldset legend="Header" toggleable>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Fieldset'),
+                    key: 'Fieldset'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.fieldset',

apps/showcase/doc/floatlabel/BasicDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <FloatLabel>
-            <InputText id="username" v-model="value" />
+            <InputText id="username" v-model="value" autocomplete="off" />
             <label for="username">Username</label>
         </FloatLabel>
     </div>

apps/showcase/doc/floatlabel/InvalidDoc.vue

@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the form element is invalid, the label is also highlighted.</p>
+    </DocSectionText>
+    <div class="card flex justify-center items-center gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" autocomplete="off" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" autocomplete="off" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            code: {
+                basic: `
+<FloatLabel>
+    <InputText id="value1" v-model="value1" :invalid="!value1" />
+    <label for="value1">Username</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <InputText id="value2" v-model="value2" :invalid="!value2" />
+    <label for="value2">Username</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="value3" v-model="value3" :invalid="!value3" />
+    <label for="value3">Username</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center items-center gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center items-center gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/floatlabel/VariantsDoc.vue

@@ -0,0 +1,90 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="inlabel" v-model="value1" autocomplete="off" />
+            <label for="inlabel">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="onlabel" v-model="value2" autocomplete="off" />
+            <label for="onlabel">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            code: {
+                basic: `
+<FloatLabel variant="in">
+    <InputText id="inlabel" v-model="value1" />
+    <label for="inlabel">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="onlabel" v-model="value2" />
+    <label for="onlabel">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="inlabel" v-model="value1" />
+            <label for="inlabel">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="onlabel" v-model="value2" />
+            <label for="onlabel">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="inlabel" v-model="value1" />
+            <label for="inlabel">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="onlabel" v-model="value2" />
+            <label for="onlabel">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/AccessibilityDoc.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>IftaLabel 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/iftalabel/BasicDoc.vue

@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used by wrapping the input and its label.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <InputText id="username" v-model="value" autocomplete="off" />
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/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 IftaLabel from 'primevue/iftalabel';
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/InvalidDoc.vue

@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the form element is invalid, the label is also highlighted.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<IftaLabel>
+    <InputText id="username" v-model="value" :invalid="!value" />
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

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

@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>IftaLabel 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.iftalabel',
+                    label: 'IftaLabel PT Options',
+                    component: DocApiTable,
+                    data: getPTOptions('IftaLabel')
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/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/iftalabel/theming/index.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>IftaLabel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions, getTokenOptions } 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('IftaLabel')
+                        },
+                        {
+                            id: 'theming.tokens',
+                            label: 'Design Tokens',
+                            description: 'List of design tokens used in a preset.',
+                            component: DocApiTable,
+                            data: getTokenOptions('IftaLabel')
+                        }
+                    ]
+                },
+                {
+                    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/megamenu/TemplateDoc.vue

@@ -19,9 +19,8 @@
                 </svg>
             </template>
             <template #item="{ item }">
-                <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
-                    <span class="ml-2">{{ item.label }}</span>
                 </a>
                 <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
                     <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
@@ -108,9 +107,8 @@ export default {
         </svg>
     </template>
     <template #item="{ item }">
-        <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+        <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-            <span :class="item.icon" />
+            <span>{{ item.label }}</span>
-            <span class="ml-2">{{ item.label }}</span>
         </a>
         <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
             <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
@@ -149,9 +147,8 @@ export default {
                 </svg>
             </template>
             <template #item="{ item }">
-                <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
-                    <span class="ml-2">{{ item.label }}</span>
                 </a>
                 <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
                     <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
@@ -249,9 +246,8 @@ export default {
                 </svg>
             </template>
             <template #item="{ item }">
-                <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
-                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
-                    <span class="ml-2">{{ item.label }}</span>
                 </a>
                 <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
                     <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">

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

@@ -1,8 +0,0 @@
-<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/megamenu.jpg" />
-    </div>
-</template>

apps/showcase/doc/megamenu/pt/PTViewer.vue

@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <MegaMenu :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
+                    items: [
+                        [
+                            {
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                            },
+                            {
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
+                    items: [
+                        [
+                            {
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Home Theater',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
+                    items: [
+                        [
+                            {
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                            }
+                        ]
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('MegaMenu'),
+                    key: 'MegaMenu'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.megamenu',

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

@@ -1,8 +0,0 @@
-<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/menu.jpg" />
-    </div>
-</template>

apps/showcase/doc/menu/pt/PTViewer.vue

@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Menu :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Documents',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search'
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Profile',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog'
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out'
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Menu'),
+                    key: 'Menu'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.menu',

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

@@ -1,8 +0,0 @@
-<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/menubar.jpg" />
-    </div>
-</template>

apps/showcase/doc/menubar/pt/PTViewer.vue

@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Menubar :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-home'
+                },
+                {
+                    label: 'Features',
+                    icon: 'pi pi-star'
+                },
+                {
+                    label: 'Projects',
+                    icon: 'pi pi-search',
+                    items: [
+                        {
+                            label: 'Components',
+                            icon: 'pi pi-bolt'
+                        },
+                        {
+                            label: 'Blocks',
+                            icon: 'pi pi-server'
+                        },
+                        {
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil'
+                        },
+                        {
+                            label: 'Templates',
+                            icon: 'pi pi-palette',
+                            items: [
+                                {
+                                    label: 'Apollo',
+                                    icon: 'pi pi-palette'
+                                },
+                                {
+                                    label: 'Ultima',
+                                    icon: 'pi pi-palette'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Contact',
+                    icon: 'pi pi-envelope'
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Menubar'),
+                    key: 'Menubar'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.menubar',

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.panel',

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

@@ -1,8 +0,0 @@
-<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/panelmenu.jpg" />
-    </div>
-</template>

apps/showcase/doc/panelmenu/pt/PTViewer.vue

@@ -0,0 +1,101 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Documents',
+                            icon: 'pi pi-file',
+                            items: [
+                                {
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
+                                    items: [
+                                        {
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
+                                        }
+                                    ]
+                                },
+                                {
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
+                        },
+                        {
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('PanelMenu'),
+                    key: 'PanelMenu'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.panelmenu',

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

@@ -1,8 +0,0 @@
-<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/overlaypanel.jpg" />
-    </div>
-</template>

apps/showcase/doc/popover/pt/PTViewer.vue

@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
+        <Popover ref="op" appendTo="self">
+            <div class="flex flex-col gap-4 w-[25rem]">
+                <div>
+                    <span class="font-medium block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <InputText disabled></InputText>
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
+                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
+                                <span>{{ member.role }}</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Popover'),
+                    key: 'Popover'
+                }
+            ]
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.show(event);
+        }
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.popover',

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

@@ -1,8 +0,0 @@
-<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/scrollpanel.jpg" />
-    </div>
-</template>

apps/showcase/doc/scrollpanel/pt/PTViewer.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <ScrollPanel style="width: 100%; height: 200px" pt:bary="!visible !opacity-100">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <p class="m-0">
+                Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
+            </p>
+        </ScrollPanel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('ScrollPanel'),
+                    key: 'ScrollPanel'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.scrollpanel',

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

@@ -1,8 +0,0 @@
-<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/splitter.jpg" />
-    </div>
-</template>

apps/showcase/doc/splitter/pt/PTViewer.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Splitter style="height: 300px" class="w-full">
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Splitter'),
+                    key: 'Splitter'
+                },
+                {
+                    data: getPTOptions('SplitterPanel'),
+                    key: 'SplitterPanel'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.splitter',

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

@@ -1,8 +0,0 @@
-<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/stepper/pt/PTViewer.vue

@@ -0,0 +1,72 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Stepper value="1" class="basis-[50rem]" linear>
+            <StepList :style="{ overflowX: 'unset' }">
+                <Step value="1">Header I</Step>
+                <Step value="2">Header II</Step>
+                <Step value="3">Header III</Step>
+            </StepList>
+            <StepPanels>
+                <StepPanel value="1">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" />
+                    </div>
+                </StepPanel>
+                <StepPanel value="2">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-6 justify-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" />
+                    </div>
+                </StepPanel>
+                <StepPanel value="3">
+                    <div class="flex flex-col h-48">
+                        <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                    </div>
+                    <div class="pt-6">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" />
+                    </div>
+                </StepPanel>
+            </StepPanels>
+        </Stepper>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Stepper'),
+                    key: 'Stepper'
+                },
+                {
+                    data: getPTOptions('StepList'),
+                    key: 'StepList'
+                },
+                {
+                    data: getPTOptions('Step'),
+                    key: 'Step'
+                },
+                {
+                    data: getPTOptions('StepPanels'),
+                    key: 'StepPanels'
+                },
+                {
+                    data: getPTOptions('StepPanel'),
+                    key: 'StepPanel'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.stepper',

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.tabs',

apps/showcase/doc/theming/styled/ArchitectureDoc.vue

@@ -26,10 +26,16 @@
         </p>
 
         <h3>Best Practices</h3>
-        <p class="mb-0">
+        <p>
             Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific
             component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeVue components using style classes is not a best practice and should be the last resort,
             design tokens are the suggested approach.
         </p>
+
+        <h3>Video Tutorial</h3>
+        <p>Watch the <b>PrimeVue Theming Demystified</b> video to learn more about the architecture with examples.</p>
+        <div class="video-container">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/J3KFw5sih98" frameborder="0" allowfullscreen></iframe>
+        </div>
     </DocSectionText>
 </template>

apps/showcase/doc/theming/styled/DarkModeDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue uses the <i>system</i> as the default <i>darkModeSelector</i> in theme configuration. If you have a dark mode switch in your application, set the <i>darkModeSelector</i> to the selector you utilize such as <i>.my-app-dark</i> so
-            that PrimeVue can fit in seamlessly with your light-dark toggle.
+            that PrimeVue can fit in seamlessly with your color scheme.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>
@@ -12,6 +12,9 @@
         <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
         <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
         <p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
+        <DocSectionCode :code="code4" hideToggleCode hideStackBlitz />
+        <p>It is also possible to disable dark mode completely using <i>false</i> or <i>none</i> as the value of the selector.</p>
+        <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -45,8 +48,22 @@ app.use(PrimeVue, {
             code3: {
                 basic: `
 function toggleDarkMode() {
-    const element = document.querySelector('html');
+    document.documentElement.classList.toggle('my-app-dark');
-    element.classList.toggle('my-app-dark');
+}
+`
+            },
+            code4: {
+                basic: `
+<html class="my-app-dark">
+`
+            },
+            code5: {
+                basic: `
+theme: {
+    preset: Aura,
+    options: {
+        darkModeSelector: false || 'none',
+    }
 }
 `
             }

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

@@ -1,8 +0,0 @@
-<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/tieredmenu.jpg" />
-    </div>
-</template>

apps/showcase/doc/tieredmenu/pt/PTViewer.vue

@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <TieredMenu :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('TieredMenu'),
+                    key: 'TieredMenu'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.tieredmenu',

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

@@ -1,8 +0,0 @@
-<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/toolbar.jpg" />
-    </div>
-</template>

apps/showcase/doc/toolbar/pt/PTViewer.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Toolbar class="w-full">
+            <template #start>
+                <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
+                <Button icon="pi pi-upload" severity="secondary" text />
+            </template>
+
+            <template #center>
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
+                    <InputText placeholder="Search" />
+                </IconField>
+            </template>
+
+            <template #end> <Button label="Save"></Button></template>
+        </Toolbar>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Toolbar'),
+                    key: 'Toolbar'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.toolbar',

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

@@ -1,8 +0,0 @@
-<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/tooltip/pt/PTViewer.vue

@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Tooltip'),
+                    key: 'Tooltip'
+                }
+            ]
+        };
+    }
+};
+</script>

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

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.tooltip',

apps/showcase/nuxt.config.js

@@ -12,6 +12,14 @@ const alias = {
     '@primevue/icons': path.resolve(__dirname, '../../packages/icons/src')
 };
 
+let PROCESS_ENV = {};
+
+try {
+    PROCESS_ENV = process?.env || {};
+} catch {
+    // NOOP
+}
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     typescript: false,
@@ -35,7 +43,14 @@ export default defineNuxtConfig({
         '/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
         '/installation': { redirect: { to: '/vite', statusCode: 301 } }
     },
-    primevue: {
+    primevue:
+        PROCESS_ENV.DEV_ENV === 'hot'
+            ? {
+                  usePrimeVue: false,
+                  autoImport: true,
+                  loadStyles: false
+              }
+            : {
                   autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
                   importTheme: { from: '@/themes/app-theme.js' }
               },
@@ -79,7 +94,8 @@ export default defineNuxtConfig({
     },
     runtimeConfig: {
         public: {
-            contextPath: baseUrl
+            contextPath: baseUrl,
+            DEV_ENV: PROCESS_ENV.DEV_ENV
         }
     },
     gtag: {

apps/showcase/pages/floatlabel/index.vue

@@ -1,13 +1,15 @@
 <template>
-    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
+    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel visually integrates a label with its form element." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/floatlabel/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/floatlabel/BasicDoc.vue';
 import ImportDoc from '@/doc/floatlabel/ImportDoc.vue';
+import InvalidDoc from '@/doc/floatlabel/InvalidDoc.vue';
 import PTComponent from '@/doc/floatlabel/pt/index.vue';
 import ThemingDoc from '@/doc/floatlabel/theming/index.vue';
+import VariantsDoc from '@/doc/floatlabel/VariantsDoc.vue';
 
 export default {
     data() {
@@ -23,6 +25,16 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'variants',
+                    label: 'Variants',
+                    component: VariantsDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',

apps/showcase/pages/iftalabel/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <DocComponent title="Vue Ifta Label" header="IftaLabel" description="IftaLabel visually integrates a label within its form element." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['IftaLabel']" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/iftalabel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/iftalabel/BasicDoc.vue';
+import ImportDoc from '@/doc/iftalabel/ImportDoc.vue';
+import InvalidDoc from '@/doc/iftalabel/InvalidDoc.vue';
+import PTComponent from '@/doc/iftalabel/pt/index.vue';
+import ThemingDoc from '@/doc/iftalabel/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>

apps/showcase/pages/templates/apollo/index.vue

@@ -43,7 +43,7 @@ export default {
                             license: {
                                 documentLink: 'https://apollo.primevue.org/documentation/',
                                 description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                                showDiscount: true,
+                                showDiscount: false,
                                 licenseDetails: [
                                     {
                                         title: 'Basic License',

apps/showcase/pages/templates/atlantis/index.vue

@@ -42,7 +42,7 @@ export default {
                             license: {
                                 documentLink: 'https://atlantis.primevue.org/documentation',
                                 description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                                showDiscount: true,
+                                showDiscount: false,
                                 licenseDetails: [
                                     {
                                         title: 'Basic License',

apps/showcase/pages/templates/avalon/index.vue

@@ -44,7 +44,7 @@ export default {
                             license: {
                                 documentLink: 'https://avalon.primevue.org/documentation',
                                 description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                                showDiscount: true,
+                                showDiscount: false,
                                 licenseDetails: [
                                     {
                                         title: 'Basic License',

apps/showcase/pages/templates/diamond/index.vue

@@ -43,7 +43,7 @@ export default {
                             license: {
                                 documentLink: 'https://diamond.primevue.org/documentation/',
                                 description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                                showDiscount: true,
+                                showDiscount: false,
                                 licenseDetails: [
                                     {
                                         title: 'Basic License',

apps/showcase/pages/templates/freya/index.vue

@@ -43,7 +43,7 @@ export default {
                             license: {
                                 documentLink: 'https://freya.primevue.org/documentation',
                                 description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                                showDiscount: true,
+                                showDiscount: false,
                                 licenseDetails: [
                                     {
                                         title: 'Basic License',

apps/showcase/pages/templates/poseidon/index.vue

@@ -43,7 +43,7 @@ export default {
                             license: {
                                 documentLink: 'https://poseidon.primevue.org/documentation/',
                                 description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                                showDiscount: true,
+                                showDiscount: false,
                                 licenseDetails: [
                                     {
                                         title: 'Basic License',