Merge branch 'primefaces:master' into fix/filter-with-columngroup-type

CHANGELOG.md

@@ -1,6 +1,26 @@
 # Changelog
 
-## [4.0.6](https://github.com/primefaces/primevue/tree/4.0.6) (2024-09-19)
+## [4.0.7](https://github.com/primefaces/primevue/tree/4.0.7) (2024-09-11)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/4.0.6...4.0.7)
+
+**Fixed bugs:**
+
+-   SelectButton pt name correction [\#6382](https://github.com/primefaces/primevue/issues/6382)
+-   ToggleButton: aria-label and aria-labelledby not observed [\#6377](https://github.com/primefaces/primevue/issues/6377)
+-   FileUpload: Fix type of FileUploadState.messages [\#6370](https://github.com/primefaces/primevue/issues/6370)
+-   TreeTable: click and arrow key defect [\#6368](https://github.com/primefaces/primevue/issues/6368)
+-   Dialog: no dragstart event to accompany dragend [\#6357](https://github.com/primefaces/primevue/issues/6357)
+-   Dialog: dragging state is not reset when closed while dragging [\#6356](https://github.com/primefaces/primevue/issues/6356)
+-   InputOtp: IntegerOnly mode accepts "space" [\#6353](https://github.com/primefaces/primevue/issues/6353)
+-   InputOtp: Pasting adds an extra character [\#6351](https://github.com/primefaces/primevue/issues/6351)
+-   DatePicker: Pick month does not work [\#6342](https://github.com/primefaces/primevue/issues/6342)
+-   DataTable: Cannot set properties of null (setting 'tabIndex') [\#6323](https://github.com/primefaces/primevue/issues/6323)
+-   DatePicker showOtherMonths wrong behaviour [\#6307](https://github.com/primefaces/primevue/issues/6307)
+-   Click outside only when not modal [\#6284](https://github.com/primefaces/primevue/pull/6284)
+-   Select: Chinese IME input will be stopped in filter input element [\#6279](https://github.com/primefaces/primevue/issues/6279)
+
+## [4.0.6](https://github.com/primefaces/primevue/tree/4.0.6) (2024-09-10)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/4.0.5...4.0.6)
 

apps/showcase/assets/data/news.json

@@ -1,6 +1,6 @@
 {
-    "id": 65,
+    "id": 67,
-    "content": "Summer Sale: Up to 50% Off 🛍️",
+    "content": "480 Vue Components with Tailwind 🚀",
-    "linkText": "Visit Store",
+    "linkText": "Visit PrimeBlocks",
-    "linkHref": "https://primefaces.org/store"
+    "linkHref": "https://primeblocks.org"
 }

apps/showcase/assets/menu/menu.json

@@ -433,14 +433,14 @@
                             "name": "FocusTrap",
                             "to": "/focustrap"
                         },
-                        {
-                            "name": "Inplace",
-                            "to": "/inplace"
-                        },
                         {
                             "name": "Fluid",
                             "to": "/fluid"
                         },
+                        {
+                            "name": "Inplace",
+                            "to": "/inplace"
+                        },
                         {
                             "name": "MeterGroup",
                             "to": "/metergroup"
@@ -527,7 +527,8 @@
         {
             "name": "PrimeBlocks",
             "icon": "pi pi-server",
-            "href": "https://blocks.primevue.org"
+            "href": "https://primeblocks.org",
+            "badge": "NEW"
         },
         {
             "name": "Guides",
@@ -572,8 +573,7 @@
         {
             "name": "Contribution",
             "to": "/contribution",
-            "icon": "pi pi-users",
+            "icon": "pi pi-users"
-            "badge": "NEW"
         },
         {
             "name": "Discover",

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

@@ -432,3 +432,46 @@
         }
     }
 }
+
+.doc-ptviewerwrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 0 !important;
+
+    .doc-ptviewer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-color: var(--p-content-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;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--p-content-hover-background);
+            }
+
+            .doc-ptoption-text {
+                color: var(--p-text-muted-color);
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+            }
+        }
+    }
+}

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

@@ -13,7 +13,7 @@
 }
 
 @media screen and (max-width: 1199px) {
-    .layout-topbar-inner {   
+    .layout-topbar-inner {
         padding-left: 2rem;
         padding-right: 2rem;
 
@@ -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) {
@@ -174,4 +188,4 @@
             display: none;
         }
     }
-}
+}

apps/showcase/components/doc/DocPTViewer.vue

@@ -0,0 +1,60 @@
+<template>
+    <div ref="container" class="doc-ptviewerwrapper card">
+        <div id="doc-ptviewer" class="doc-ptviewer">
+            <slot />
+        </div>
+        <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="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
+                        <span>{{ item.label }}</span>
+                        <span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span>
+                    </div>
+                </template>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { addClass, find, removeClass } from '@primeuix/utils/dom';
+
+export default {
+    props: ['docs'],
+    data() {
+        return {
+            hoveredElements: []
+        };
+    },
+    methods: {
+        enterSection(item, componentName) {
+            let selector,
+                cmpName = componentName;
+
+            if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
+
+            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);
+
+            if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO:
+
+            this.hoveredElements?.forEach((el) => {
+                addClass(el, '!ring !ring-red-500 !z-10');
+            });
+        },
+        leaveSection() {
+            this.hoveredElements.forEach((el) => {
+                removeClass(el, '!ring !ring-red-500 !z-10');
+            });
+
+            this.hoveredElements = [];
+        },
+        handleData(doc) {
+            return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition');
+        }
+    }
+};
+</script>

apps/showcase/components/doc/helpers/index.js

@@ -19,12 +19,14 @@ export const getPTOptions = (name) => {
                 objToReplace.type = prop.type;
             }
 
-            data.push({
+            if (!prop.deprecated) {
-                value: i + 1,
+                data.push({
-                label: prop.name,
+                    value: i + 1,
-                options: hasSubComp ? subOptions?.props : options?.props,
+                    label: prop.name,
-                description: prop.description
+                    options: hasSubComp ? subOptions?.props : options?.props,
-            });
+                    description: prop.description
+                });
+            }
         } else {
             data.push({
                 value: i + 1,

apps/showcase/components/landing/BlockSection.vue

@@ -3,7 +3,7 @@
         <div class="section-header relative z-30">Blocks</div>
         <p class="section-detail relative z-30">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
         <div class="flex justify-center mt-6 relative z-30">
-            <a href="https://blocks.primevue.org" class="linkbox linkbox-primary">
+            <a href="https://primeblocks.org" class="linkbox linkbox-primary">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>

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/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/common/apidoc/index.json

@@ -11981,7 +11981,20 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom body template."
+                            "description": "Custom body template for DataTable."
+                        },
+                        {
+                            "name": "node",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">data</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Row data.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Row node data.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">column</span>: <span class=\"doc-option-parameter-type\">ColumnNode</span>, <span class=\"doc-option-parameter-type\">// Column node.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">field</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Column field.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Row index.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">frozenRow</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Whether the row is frozen.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">editorInitCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Editor init callback function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">rowTogglerCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Row toggler callback unction</span>\n}",
+                                    "description": "body slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom body template for TreeTable."
                         },
                         {
                             "name": "header",
@@ -13908,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,
@@ -25797,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",
@@ -25812,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,
@@ -50624,15 +50621,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",
@@ -52434,7 +52423,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "pcButton",
+                            "name": "pcToggleButton",
                             "optional": true,
                             "readonly": false,
                             "type": "SelectButtonPassThroughOptionType",
@@ -63686,14 +63675,6 @@
                             "default": "",
                             "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
                         },
-                        {
-                            "name": "ariaLabel",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Establishes a string value that labels the component."
-                        },
                         {
                             "name": "dt",
                             "optional": true,

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/datatable/pt/PTImage.vue

@@ -1,8 +1,37 @@
 <template>
-    <DocSectionText v-bind="$attrs">
+    <DocSectionText v-bind="$attrs" />
-        <p>{{ $attrs.description }}</p>
+    <DocPTViewer :docs="docs">
-    </DocSectionText>
+        <DataTable :value="products" tableStyle="min-width: 50rem">
-    <div class="card">
+            <Column field="code" header="Code"></Column>
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+            <Column field="name" header="Name"></Column>
-    </div>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </DocPTViewer>
 </template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            docs: [
+                {
+                    data: getPTOptions('DataTable'),
+                    key: 'DataTable'
+                },
+                {
+                    data: getPTOptions('Column'),
+                    key: 'Column'
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+</script>

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/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/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/panel/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/panel.jpg" />
-    </div>
-</template>

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

@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Panel header="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>
+        </Panel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Panel'),
+                    key: 'Panel'
+                }
+            ]
+        };
+    }
+};
+</script>

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/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/selectbutton/AccessibilityDoc.vue

@@ -1,10 +1,7 @@
 <template>
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
-        <p>
+        <p>SelectButton component uses ToggleButton internally and has <i>group</i> role. Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
-            SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
-            <i>aria-labelledby</i> property.
-        </p>
 
         <h3>Keyboard Support</h3>
         <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
@@ -19,25 +16,11 @@
                 <tbody>
                     <tr>
                         <td><i>tab</i></td>
-                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
                     </tr>
                     <tr>
-                        <td>
+                        <td><i>shift</i> + <i>tab</i></td>
-                            <span class="inline-flex flex-col">
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                                <i class="mb-1">right arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the previous option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the next option.</td>
                     </tr>
                     <tr>
                         <td><i>space</i></td>

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/BasicDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
+        <p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>TabPanel</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
     </DocSectionText>
     <div class="card">
         <Tabs value="0">

apps/showcase/doc/tabs/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/tabs/pt/PTViewer.vue

@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Tabs value="0">
+            <TabList>
+                <Tab value="0">Header I</Tab>
+                <Tab value="1">Header II</Tab>
+                <Tab value="2">Header III</Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel value="0">
+                    <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>
+                </TabPanel>
+                <TabPanel value="1">
+                    <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>
+                </TabPanel>
+                <TabPanel value="2">
+                    <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>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Tabs'),
+                    key: 'Tabs'
+                },
+                {
+                    data: getPTOptions('TabList'),
+                    key: 'TabList'
+                },
+                {
+                    data: getPTOptions('Tab'),
+                    key: 'Tab'
+                },
+                {
+                    data: getPTOptions('TabPanels'),
+                    key: 'TabPanels'
+                },
+                {
+                    data: getPTOptions('TabPanel'),
+                    key: 'TabPanel'
+                }
+            ]
+        };
+    }
+};
+</script>

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/utils/PaletteDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Returns shades and tints of a given color from 50 to 950 as an array.</p>
+        <p>Returns shades and tints of a given color from 50 to 950 as an object.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>

apps/showcase/doc/togglebutton/AccessibilityDoc.vue

@@ -2,9 +2,9 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props,
+            ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
-            it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
+            highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
-            that does not change related to state.
+            does not change related to state.
         </p>
 
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />

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/layouts/AppNews.vue

@@ -4,7 +4,7 @@
             <i></i>
             <div class="layout-news-content">
                 <span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
-                <a class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
+                <a class="layout-news-link" :href="$appState.announcement.linkHref" target="_blank" rel="noopener noreferrer">{{ $appState.announcement.linkText }}</a>
             </div>
             <a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
                 <span class="pi pi-times"></span>

apps/showcase/package.json

@@ -1,6 +1,6 @@
 {
     "name": "showcase",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",

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',
@@ -195,7 +195,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                     template and requires a separate purchase.`,
                             description4: `
                     Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can

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',
@@ -165,7 +165,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`,
                             description4: `
                     Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can

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',
@@ -196,7 +196,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`,
                             description4: `
                     Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can

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',
@@ -172,7 +172,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`,
                             description4: `
                     Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can

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',
@@ -166,7 +166,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`,
                             description4: `
                                     Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can

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',
@@ -140,7 +140,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`
                         }
                     },

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

@@ -125,7 +125,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`
                         }
                     },

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

@@ -44,7 +44,7 @@ export default {
                             license: {
                                 documentLink: 'https://ultima.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',
@@ -167,7 +167,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`,
                             description4: `
                                                     Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can

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

@@ -43,7 +43,7 @@ export default {
                             license: {
                                 documentLink: 'https://verona.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',
@@ -157,7 +157,7 @@ export default {
                         },
                         slots: {
                             description2: `
-                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
                 template and requires a separate purchase.`,
                             description4: `Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
                 <a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they

apps/showcase/pages/uikit/index.vue

@@ -159,8 +159,8 @@
                                 <div class="text-surface-500 dark:text-surface-400 font-medium">For individual designers</div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <div class="flex flex-wrap gap-4">
-                                    <span class="text-2xl text-muted-color line-through">$99</span>
+                                    <span v-if="false" class="text-2xl text-muted-color line-through">$99</span>
-                                    <span class="text-2xl font-bold">$49</span>
+                                    <span class="text-2xl font-bold">$99</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 grow text-lg">
@@ -202,8 +202,8 @@
                                 <div class="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <div class="flex flex-wrap gap-4">
-                                    <span class="text-2xl text-muted-color line-through">$249</span>
+                                    <span v-if="false" class="text-2xl text-muted-color line-through">$249</span>
-                                    <span class="text-2xl font-bold">$149</span>
+                                    <span class="text-2xl font-bold">$249</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 grow text-lg">

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/monorepo",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "homepage": "https://primevue.org/",
     "repository": {

packages/auto-import-resolver/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/auto-import-resolver",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/core",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -52,8 +52,8 @@
         "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
-        "@primeuix/styled": "^0.0.5",
+        "@primeuix/styled": "^0.1.1",
-        "@primeuix/utils": "^0.0.5"
+        "@primeuix/utils": "^0.1.1"
     },
     "peerDependencies": {
         "vue": "^3.0.0"
@@ -61,4 +61,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}

packages/core/src/basecomponent/BaseComponent.vue

@@ -2,9 +2,9 @@
 import { Theme, ThemeService } from '@primeuix/styled';
 import { findSingle } from '@primeuix/utils/dom';
 import { getKeyValue, isArray, isFunction, isNotEmpty, isString, resolve, toFlatCase } from '@primeuix/utils/object';
+import { uuid } from '@primeuix/utils/uuid';
 import Base from '@primevue/core/base';
 import BaseStyle from '@primevue/core/base/style';
-import { UniqueComponentId } from '@primevue/core/utils';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
 
@@ -57,7 +57,9 @@ export default {
     },
     scopedStyleEl: undefined,
     rootEl: undefined,
+    $attrSelector: undefined,
     beforeCreate() {
+        this.$attrSelector = uuid('pc');
         const _usept = this.pt?.['_usept'];
         const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
         const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
@@ -82,8 +84,7 @@ export default {
         this.rootEl = findSingle(this.$el, `[data-pc-name="${toFlatCase(this.$.type.name)}"]`);
 
         if (this.rootEl) {
-            this.rootEl.setAttribute(this.$attrSelector, '');
+            this.rootEl.$pc = { name: this.$.type.name, attrSelector: this.$attrSelector, ...this.$params };
-            this.rootEl.$pc = { name: this.$.type.name, ...this.$params };
         }
 
         this._hook('onMounted');
@@ -231,7 +232,8 @@ export default {
                 key !== 'transition' && {
                     ...(key === 'root' && {
                         [`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
-                        ...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) })
+                        ...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) }),
+                        [`${this.$attrSelector}`]: ''
                     }),
                     [`${datasetPrefix}section`]: toFlatCase(key)
                 }
@@ -370,9 +372,6 @@ export default {
 
                     return acc;
                 }, {});
-        },
-        $attrSelector() {
-            return UniqueComponentId('pc');
         }
     }
 };

packages/core/src/basedirective/BaseDirective.js

@@ -1,9 +1,9 @@
 import { Theme, ThemeService } from '@primeuix/styled';
 import { getKeyValue, isArray, isEmpty, isFunction, isObject, isString, resolve, toCapitalCase, toFlatCase } from '@primeuix/utils/object';
+import { uuid } from '@primeuix/utils/uuid';
 import Base from '@primevue/core/base';
 import BaseStyle from '@primevue/core/base/style';
 import PrimeVueService from '@primevue/core/service';
-import { UniqueComponentId } from '@primevue/core/utils';
 import { mergeProps } from 'vue';
 
 const BaseDirective = {
@@ -166,7 +166,7 @@ const BaseDirective = {
                 $el: $prevInstance['$el'] || el || undefined,
                 $style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
                 $primevueConfig: config,
-                $attrSelector: el.$attrSelector,
+                $attrSelector: el.$pd?.[name]?.attrSelector,
                 /* computed instance variables */
                 defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
                 isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
@@ -203,10 +203,11 @@ const BaseDirective = {
 
         return {
             created: (el, binding, vnode, prevVnode) => {
+                el.$pd ||= {};
+                el.$pd[name] = { name, attrSelector: uuid('pd') };
                 handleHook('created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                el.$attrSelector = UniqueComponentId('pd');
                 BaseDirective._loadStyles(el, binding, vnode);
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
                 handleWatch(el);

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/icons",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -39,10 +39,10 @@
         "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
-        "@primeuix/utils": "^0.0.5",
+        "@primeuix/utils": "^0.1.1",
         "@primevue/core": "workspace:*"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}

packages/metadata/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/metadata",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",

packages/nuxt-module/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/nuxt-module",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "Nuxt module for PrimeVue",
     "homepage": "https://primevue.org/",
@@ -68,8 +68,8 @@
     },
     "dependencies": {
         "@nuxt/kit": "^3.7.3",
-        "@primeuix/styled": "^0.0.5",
+        "@primeuix/styled": "^0.1.1",
-        "@primeuix/utils": "^0.0.5",
+        "@primeuix/utils": "^0.1.1",
         "primevue": "workspace:*",
         "@primevue/auto-import-resolver": "workspace:*",
         "@primevue/metadata": "workspace:*",
@@ -92,4 +92,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}

packages/primevue/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
     "homepage": "https://primevue.org/",
@@ -329,12 +329,12 @@
         "vitest": "^0.29.8"
     },
     "dependencies": {
-        "@primeuix/styled": "^0.0.5",
+        "@primeuix/styled": "^0.1.1",
-        "@primeuix/utils": "^0.0.5",
+        "@primeuix/utils": "^0.1.1",
         "@primevue/core": "workspace:*",
         "@primevue/icons": "workspace:*"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}

packages/primevue/src/column/Column.d.ts

@@ -642,7 +642,7 @@ export interface ColumnContext {
  */
 export interface ColumnSlots {
     /**
-     * Custom body template.
+     * Custom body template for DataTable.
      * @param {Object} scope - body slot's params.
      */
     body(scope: {
@@ -681,6 +681,46 @@ export interface ColumnSlots {
          */
         rowTogglerCallback: (event: Event) => void;
     }): VNode[];
+    /**
+     * Custom body template for TreeTable.
+     * @param {Object} scope - body slot's params.
+     */
+    node(scope: {
+        /**
+         * Row data.
+         */
+        data: any;
+        /**
+         * Row node data.
+         */
+        node: any;
+        /**
+         * Column node.
+         */
+        column: ColumnNode;
+        /**
+         * Column field.
+         */
+        field: string;
+        /**
+         * Row index.
+         */
+        index: number;
+        /**
+         * Whether the row is frozen.
+         */
+        frozenRow: boolean;
+        /**
+         * Editor init callback function
+         * @param {Event} event - Browser event
+         */
+        editorInitCallback: (event: Event) => void;
+        /**
+         * Row toggler callback unction
+         * @param {Event} event - Browser event
+         */
+        rowTogglerCallback: (event: Event) => void;
+    }): VNode[];
     /**
      * Custom header template.
      * @param {Object} scope - header slot's params.

packages/primevue/src/confirmdialog/ConfirmDialog.d.ts

@@ -78,17 +78,13 @@ export interface ConfirmDialogPassThroughOptions {
      */
     title?: ConfirmDialogPassThroughOptionType;
     /**
-     * Used to pass attributes to the header icons' DOM element.
+     * Used to pass attributes to the header actions' DOM element.
      */
-    icons?: ConfirmDialogPassThroughOptionType;
+    headerActions?: ConfirmDialogPassThroughOptionType;
     /**
      * Used to pass attributes to the close button's component.
      */
-    closeButton?: ConfirmDialogPassThroughOptionType;
+    pcCloseButton?: ConfirmDialogPassThroughOptionType;
-    /**
-     * Used to pass attributes to the close button icon's component.
-     */
-    closeButtonIcon?: ConfirmDialogPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */

packages/primevue/src/datepicker/DatePicker.vue

@@ -728,7 +728,7 @@ export default {
                 return this.modelValue.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
             } else if (this.isRangeSelection()) {
                 if (!this.modelValue[1]) {
-                    return this.modelValue[0].getFullYear() === this.currentYear && this.modelValue[0].getMonth() === month;
+                    return this.modelValue[0]?.getFullYear() === this.currentYear && this.modelValue[0]?.getMonth() === month;
                 } else {
                     const currentDate = new Date(this.currentYear, month, 1);
                     const startDate = new Date(this.modelValue[0].getFullYear(), this.modelValue[0].getMonth(), 1);

packages/primevue/src/drawer/Drawer.vue

@@ -71,9 +71,9 @@ export default {
     watch: {
         dismissable(newValue) {
             if (newValue) {
-                this.bindOutsideClickListener();
+                this.enableDocumentSettings();
             } else {
-                this.unbindOutsideClickListener();
+                this.disableDocumentSettings();
             }
         }
     },

packages/primevue/src/fieldset/Fieldset.d.ts

@@ -75,17 +75,13 @@ export interface FieldsetPassThroughOptions {
      */
     legend?: FieldsetPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggler's DOM element.
+     * Used to pass attributes to the toggle button's DOM element.
      */
-    toggler?: FieldsetPassThroughOptionType;
+    toggleButton?: FieldsetPassThroughOptionType;
     /**
      * Used to pass attributes to the toggle icon's DOM element.
      */
     toggleIcon?: FieldsetPassThroughOptionType;
-    /**
-     * Used to pass attributes to the legend label's DOM element.
-     */
-    toggleButton?: FieldsetPassThroughOptionType;
     /**
      * Used to pass attributes to the legend label's DOM element.
      */

packages/primevue/src/inputotp/InputOtp.vue

@@ -177,7 +177,7 @@ export default {
             let paste = event.clipboardData.getData('text');
 
             if (paste.length) {
-                let pastedCode = paste.substring(0, this.length + 1);
+                let pastedCode = paste.substring(0, this.length);
 
                 if (!this.integerOnly || !isNaN(pastedCode)) {
                     this.tokens = pastedCode.split('');

packages/primevue/src/scrolltop/ScrollTop.d.ts

@@ -67,15 +67,10 @@ export interface ScrollTopSharedPassThroughMethodOptions {
  */
 export interface ScrollTopPassThroughOptions {
     /**
-     * Used to pass attributes to the previous button's DOM element.
+     * Used to pass attributes to the root's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
     root?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the previous button's DOM element.
-     * @see {@link ButtonPassThroughOptions}
-     */
-    button?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

packages/primevue/src/scrolltop/ScrollTop.vue

@@ -1,9 +1,9 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-        <Button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" :aria-label="scrollTopAriaLabel" :unstyled="unstyled" v-bind="buttonProps" :pt="rootPTOptions()">
+        <Button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" :aria-label="scrollTopAriaLabel" :unstyled="unstyled" v-bind="buttonProps" :pt="pt">
             <template #icon="slotProps">
                 <slot name="icon" :class="cx('icon')">
-                    <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon, slotProps.class]" v-bind="iconPTOptions" />
+                    <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon, slotProps.class]" v-bind="ptmi('root')['icon']" />
                 </slot>
             </template>
         </Button>
@@ -15,7 +15,6 @@ import { getWindowScrollTop } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import ChevronUpIcon from '@primevue/icons/chevronup';
 import Button from 'primevue/button';
-import { mergeProps } from 'vue';
 import BaseScrollTop from './BaseScrollTop.vue';
 
 export default {
@@ -89,12 +88,6 @@ export default {
         },
         containerRef(el) {
             this.container = el ? el.$el : undefined;
-        },
-        rootPTOptions() {
-            return mergeProps(this.ptmi('root'), this.ptm('button'));
-        },
-        iconPTOptions() {
-            return mergeProps(this.ptmi('root')['icon'], this.ptm('button')['icon']);
         }
     },
     computed: {

packages/primevue/src/selectbutton/SelectButton.d.ts

@@ -61,7 +61,7 @@ export interface SelectButtonPassThroughOptions {
     /**
      * Used to pass attributes to the ToggleButton component.
      */
-    pcButton?: SelectButtonPassThroughOptionType;
+    pcToggleButton?: SelectButtonPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

packages/primevue/src/selectbutton/SelectButton.vue

@@ -8,11 +8,11 @@
                 :disabled="disabled || isOptionDisabled(option)"
                 :unstyled="unstyled"
                 @change="onOptionSelect($event, option, index)"
-                :pt="ptm('pcButton')"
+                :pt="ptm('pcToggleButton')"
             >
                 <template v-if="$slots.option" #default>
                     <slot name="option" :option="option" :index="index">
-                        <span v-bind="ptm('pcButton')['label']">{{ getOptionLabel(option) }}</span>
+                        <span v-bind="ptm('pcToggleButton')['label']">{{ getOptionLabel(option) }}</span>
                     </slot>
                 </template>
             </ToggleButton>
@@ -41,15 +41,6 @@ export default {
         getOptionRenderKey(option) {
             return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
         },
-        getPTOptions(option, key) {
-            return this.ptm(key, {
-                context: {
-                    active: this.isSelected(option),
-                    disabled: this.isOptionDisabled(option),
-                    option
-                }
-            });
-        },
         isOptionDisabled(option) {
             return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
         },
@@ -74,7 +65,6 @@ export default {
                 newValue = selected ? null : optionValue;
             }
 
-            this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
             this.$emit('change', { event: event, value: newValue });
         },

packages/primevue/src/togglebutton/ToggleButton.d.ts

@@ -150,10 +150,6 @@ export interface ToggleButtonProps {
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     ariaLabelledby?: string | undefined;
-    /**
-     * Establishes a string value that labels the component.
-     */
-    ariaLabel?: string | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/togglebutton/ToggleButton.vue

@@ -1,5 +1,17 @@
 <template>
-    <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-checked="active" :data-p-disabled="disabled">
+    <button
+        v-ripple
+        type="button"
+        :class="cx('root')"
+        :tabindex="tabindex"
+        :disabled="disabled"
+        :aria-pressed="modelValue"
+        @click="onChange"
+        v-bind="getPTOptions('root')"
+        :aria-labelledby="ariaLabelledby"
+        :data-p-checked="active"
+        :data-p-disabled="disabled"
+    >
         <span :class="cx('content')" v-bind="getPTOptions('content')">
             <slot>
                 <slot name="icon" :value="modelValue" :class="cx('icon')">

packages/themes/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@primevue/themes",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
@@ -73,9 +73,9 @@
         "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
-        "@primeuix/styled": "^0.0.5"
+        "@primeuix/styled": "^0.1.1"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}

pnpm-publish-summary.json

@@ -2,31 +2,31 @@
 	"publishedPackages": [
 		{
 			"name": "@primevue/core",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		},
 		{
 			"name": "@primevue/metadata",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		},
 		{
 			"name": "@primevue/themes",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		},
 		{
 			"name": "@primevue/auto-import-resolver",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		},
 		{
 			"name": "@primevue/icons",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		},
 		{
 			"name": "primevue",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		},
 		{
 			"name": "@primevue/nuxt-module",
-			"version": "4.0.6"
+			"version": "4.0.7"
 		}
 	]
 }