From 0d71d3224cb21574841c2ca9566dcc93219c092a Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 14:56:25 +0300
Subject: [PATCH 01/11] PC Prefix section added

---
 apps/showcase/doc/passthrough/PCPrefixDoc.vue | 74 +++++++++++++++++++
 apps/showcase/pages/passthrough/index.vue     |  6 ++
 2 files changed, 80 insertions(+)
 create mode 100644 apps/showcase/doc/passthrough/PCPrefixDoc.vue

diff --git a/apps/showcase/doc/passthrough/PCPrefixDoc.vue b/apps/showcase/doc/passthrough/PCPrefixDoc.vue
new file mode 100644
index 000000000..cf655e90d
--- /dev/null
+++ b/apps/showcase/doc/passthrough/PCPrefixDoc.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button
+            type="button"
+            label="Messages"
+            icon="pi pi-users"
+            badge="2"
+            outlined
+            :pt="{
+                root: 'border-violet-500',
+                label: 'text-violet-900 dark:text-violet-400',
+                icon: 'text-violet-900 dark:text-violet-400',
+                pcBadge: {
+                    root: '!bg-violet-400 !text-white'
+                }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
+    :pt="{
+        root: 'border-violet-500',
+        label: 'text-violet-900 dark:text-violet-400',
+        icon: 'text-violet-900 dark:text-violet-400',
+        pcBadge: {
+            root: '!bg-violet-400 !text-white'
+        }
+    }"
+/>
+`,
+                options: `
+<template>
+    <Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
+        :pt="{
+            root: 'border-violet-500',
+            label: 'text-violet-900 dark:text-violet-400',
+            icon: 'text-violet-900 dark:text-violet-400',
+            pcBadge: {
+                root: '!bg-violet-400 !text-white'
+            }
+        }"
+    />
+</template>
+`,
+                composition: `
+<template>
+    <Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
+        :pt="{
+            root: 'border-violet-500',
+            label: 'text-violet-900 dark:text-violet-400',
+            icon: 'text-violet-900 dark:text-violet-400',
+            pcBadge: {
+                root: '!bg-violet-400 !text-white'
+            }
+        }"
+    />
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/passthrough/index.vue b/apps/showcase/pages/passthrough/index.vue
index 9b37fa0b8..c69c6ca2c 100644
--- a/apps/showcase/pages/passthrough/index.vue
+++ b/apps/showcase/pages/passthrough/index.vue
@@ -21,6 +21,7 @@ import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
 import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
 import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
 import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
+import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
 import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
 
 export default {
@@ -37,6 +38,11 @@ export default {
                     label: 'Declarative',
                     component: DeclarativeDoc
                 },
+                {
+                    id: 'pcprefix',
+                    label: 'PC Prefix',
+                    component: PCPrefixDoc
+                },
                 {
                     id: 'lifecycle',
                     label: 'Lifecycle',

From a646374e32302da73bbcd7b61713244fc5e42b98 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 14:56:43 +0300
Subject: [PATCH 02/11] PTViewer description updated

---
 apps/showcase/components/doc/DocApiSection.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/showcase/components/doc/DocApiSection.vue b/apps/showcase/components/doc/DocApiSection.vue
index 0f49cc07c..1341e1d2b 100644
--- a/apps/showcase/components/doc/DocApiSection.vue
+++ b/apps/showcase/components/doc/DocApiSection.vue
@@ -348,7 +348,6 @@ export default {
             return !findMainInterface || findMainInterface.values.props.length > 0;
         }
     },
-
     computed: {
         description() {
             return this.doc && this.doc.length > 0 ? `API defines helper props, events and others for the PrimeVue ${this.header} module.` : `${this.header} is a CSS feature so does not provide a Javascript API`;

From 2d64e321c23a2463aee606b0a4f8d55fc48612b4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 14:57:01 +0300
Subject: [PATCH 03/11] PTViewer description updated

---
 apps/showcase/components/doc/DocPTViewer.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/showcase/components/doc/DocPTViewer.vue b/apps/showcase/components/doc/DocPTViewer.vue
index f9db9be11..36ec906b3 100644
--- a/apps/showcase/components/doc/DocPTViewer.vue
+++ b/apps/showcase/components/doc/DocPTViewer.vue
@@ -1,4 +1,10 @@
 <template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Some sections may not be visible due to the availability of the particular feature. Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element. Visit the
+            <PrimeVueNuxtLink to="/passthrough/#pcprefix">pass-through</PrimeVueNuxtLink> documentation for more information.
+        </p>
+    </DocSectionText>
     <div ref="container" class="doc-ptviewerwrapper card">
         <div id="doc-ptviewer" class="doc-ptviewer">
             <slot />

From cb52bf2e19038746b9696bdf92c5c141ab9de7e8 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:22:44 +0300
Subject: [PATCH 04/11] Doc Section Text updates

---
 apps/showcase/doc/accordion/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/avatar/pt/PTViewer.vue            | 5 ++---
 apps/showcase/doc/badge/pt/PTViewer.vue             | 5 ++---
 apps/showcase/doc/blockui/pt/PTViewer.vue           | 5 ++---
 apps/showcase/doc/breadcrumb/pt/PTViewer.vue        | 5 ++---
 apps/showcase/doc/button/pt/PTViewer.vue            | 1 -
 apps/showcase/doc/card/pt/PTViewer.vue              | 1 -
 apps/showcase/doc/carousel/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/cascadeselect/pt/PTViewer.vue     | 5 ++---
 apps/showcase/doc/chart/pt/PTViewer.vue             | 5 ++---
 apps/showcase/doc/checkbox/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/chip/pt/PTViewer.vue              | 5 ++---
 apps/showcase/doc/colorpicker/pt/PTViewer.vue       | 1 -
 apps/showcase/doc/confirmpopup/pt/PTViewer.vue      | 5 ++---
 apps/showcase/doc/contextmenu/pt/PTViewer.vue       | 5 ++---
 apps/showcase/doc/datatable/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/dataview/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/datepicker/pt/PTViewer.vue        | 1 -
 apps/showcase/doc/deferredcontent/pt/PTViewer.vue   | 1 -
 apps/showcase/doc/dialog/pt/PTViewer.vue            | 5 ++---
 apps/showcase/doc/divider/pt/PTViewer.vue           | 1 -
 apps/showcase/doc/dock/pt/PTViewer.vue              | 5 ++---
 apps/showcase/doc/editor/pt/PTViewer.vue            | 1 -
 apps/showcase/doc/fieldset/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/fileupload/pt/PTViewer.vue        | 1 -
 apps/showcase/doc/floatlabel/pt/PTViewer.vue        | 1 -
 apps/showcase/doc/fluid/pt/PTViewer.vue             | 5 ++---
 apps/showcase/doc/galleria/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/iconfield/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/iftalabel/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/image/pt/PTViewer.vue             | 1 -
 apps/showcase/doc/inplace/pt/PTViewer.vue           | 5 ++---
 apps/showcase/doc/inputgroup/pt/PTViewer.vue        | 1 -
 apps/showcase/doc/inputmask/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/inputnumber/pt/PTViewer.vue       | 1 -
 apps/showcase/doc/inputotp/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/inputtext/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/knob/pt/PTViewer.vue              | 1 -
 apps/showcase/doc/listbox/pt/PTViewer.vue           | 1 -
 apps/showcase/doc/megamenu/pt/PTViewer.vue          | 5 ++---
 apps/showcase/doc/menu/pt/PTViewer.vue              | 5 ++---
 apps/showcase/doc/menubar/pt/PTViewer.vue           | 5 ++---
 apps/showcase/doc/message/pt/PTViewer.vue           | 1 -
 apps/showcase/doc/metergroup/pt/PTViewer.vue        | 5 ++---
 apps/showcase/doc/multiselect/pt/PTViewer.vue       | 1 -
 apps/showcase/doc/orderlist/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/organizationchart/pt/PTViewer.vue | 1 -
 apps/showcase/doc/paginator/pt/PTViewer.vue         | 5 ++---
 apps/showcase/doc/panel/pt/PTViewer.vue             | 5 ++---
 apps/showcase/doc/panelmenu/pt/PTViewer.vue         | 5 ++---
 apps/showcase/doc/password/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/picklist/pt/PTViewer.vue          | 5 ++---
 apps/showcase/doc/popover/pt/PTViewer.vue           | 5 ++---
 apps/showcase/doc/progressbar/pt/PTViewer.vue       | 5 ++---
 apps/showcase/doc/progressspinner/pt/PTViewer.vue   | 5 ++---
 apps/showcase/doc/radiobutton/pt/PTViewer.vue       | 1 -
 apps/showcase/doc/rating/pt/PTViewer.vue            | 1 -
 apps/showcase/doc/scrollpanel/pt/PTViewer.vue       | 1 -
 apps/showcase/doc/scrolltop/pt/PTViewer.vue         | 5 ++---
 apps/showcase/doc/select/pt/PTViewer.vue            | 1 -
 apps/showcase/doc/selectbutton/pt/PTViewer.vue      | 1 -
 apps/showcase/doc/skeleton/pt/PTViewer.vue          | 5 ++---
 apps/showcase/doc/slider/pt/PTViewer.vue            | 1 -
 apps/showcase/doc/speeddial/pt/PTViewer.vue         | 1 -
 apps/showcase/doc/splitbutton/pt/PTViewer.vue       | 3 +--
 apps/showcase/doc/splitter/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/stepper/pt/PTViewer.vue           | 1 -
 apps/showcase/doc/tabs/pt/PTViewer.vue              | 1 -
 apps/showcase/doc/tag/pt/PTViewer.vue               | 5 ++---
 apps/showcase/doc/terminal/pt/PTViewer.vue          | 5 ++---
 apps/showcase/doc/textarea/pt/PTViewer.vue          | 1 -
 apps/showcase/doc/tieredmenu/pt/PTViewer.vue        | 5 ++---
 apps/showcase/doc/timeline/pt/PTViewer.vue          | 5 ++---
 apps/showcase/doc/toast/pt/PTViewer.vue             | 1 -
 apps/showcase/doc/togglebutton/pt/PTViewer.vue      | 1 -
 apps/showcase/doc/toggleswitch/pt/PTViewer.vue      | 1 -
 apps/showcase/doc/toolbar/pt/PTViewer.vue           | 1 -
 apps/showcase/doc/tooltip/pt/PTViewer.vue           | 5 ++---
 apps/showcase/doc/tree/pt/PTViewer.vue              | 5 ++---
 apps/showcase/doc/treeselect/pt/PTViewer.vue        | 1 -
 apps/showcase/doc/treetable/pt/PTViewer.vue         | 5 ++---
 apps/showcase/doc/virtualscroller/pt/PTViewer.vue   | 1 -
 82 files changed, 67 insertions(+), 149 deletions(-)

diff --git a/apps/showcase/doc/accordion/pt/PTViewer.vue b/apps/showcase/doc/accordion/pt/PTViewer.vue
index b03ea09e9..bb0ff2971 100644
--- a/apps/showcase/doc/accordion/pt/PTViewer.vue
+++ b/apps/showcase/doc/accordion/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Accordion value="0">
             <AccordionPanel value="0">
diff --git a/apps/showcase/doc/avatar/pt/PTViewer.vue b/apps/showcase/doc/avatar/pt/PTViewer.vue
index 213ff18ce..1456a357a 100644
--- a/apps/showcase/doc/avatar/pt/PTViewer.vue
+++ b/apps/showcase/doc/avatar/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="flex flex-wrap gap-8">
             <AvatarGroup>
                 <Avatar label="P" size="xlarge" shape="circle" />
@@ -17,7 +16,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Avatar'),
                     key: 'Avatar'
diff --git a/apps/showcase/doc/badge/pt/PTViewer.vue b/apps/showcase/doc/badge/pt/PTViewer.vue
index 529fe50a2..063645ee2 100644
--- a/apps/showcase/doc/badge/pt/PTViewer.vue
+++ b/apps/showcase/doc/badge/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="flex flex-wrap gap-8">
             <Badge value="2"></Badge>
             <OverlayBadge value="3">
@@ -16,7 +15,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Badge'),
                     key: 'Badge'
diff --git a/apps/showcase/doc/blockui/pt/PTViewer.vue b/apps/showcase/doc/blockui/pt/PTViewer.vue
index 21c0e702c..02278c31e 100644
--- a/apps/showcase/doc/blockui/pt/PTViewer.vue
+++ b/apps/showcase/doc/blockui/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <BlockUI blocked>
             <Panel header="Basic">
                 <p class="m-0">
@@ -18,7 +17,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('BlockUI'),
                     key: 'BlockUI'
diff --git a/apps/showcase/doc/breadcrumb/pt/PTViewer.vue b/apps/showcase/doc/breadcrumb/pt/PTViewer.vue
index 3ba48a2bc..48d674785 100644
--- a/apps/showcase/doc/breadcrumb/pt/PTViewer.vue
+++ b/apps/showcase/doc/breadcrumb/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Breadcrumb :home="home" :model="items" />
     </DocPTViewer>
 </template>
@@ -15,7 +14,7 @@ export default {
                 icon: 'pi pi-home'
             },
             items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Breadcrumb'),
                     key: 'Breadcrumb'
diff --git a/apps/showcase/doc/button/pt/PTViewer.vue b/apps/showcase/doc/button/pt/PTViewer.vue
index b88af9914..5f94e2bee 100644
--- a/apps/showcase/doc/button/pt/PTViewer.vue
+++ b/apps/showcase/doc/button/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Button label="Profile" icon="pi pi-user" severity="secondary" badge="2" badgeSeverity="contrast" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/card/pt/PTViewer.vue b/apps/showcase/doc/card/pt/PTViewer.vue
index 983aeba9b..0150b382d 100644
--- a/apps/showcase/doc/card/pt/PTViewer.vue
+++ b/apps/showcase/doc/card/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Card style="width: 25rem">
             <template #title>Advanced Card</template>
diff --git a/apps/showcase/doc/carousel/pt/PTViewer.vue b/apps/showcase/doc/carousel/pt/PTViewer.vue
index 981575fe5..bb81c440c 100644
--- a/apps/showcase/doc/carousel/pt/PTViewer.vue
+++ b/apps/showcase/doc/carousel/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Carousel :value="products" :numVisible="1" :numScroll="1" :responsiveOptions="responsiveOptions" class="!w-3/4 !p-2">
             <template #item="slotProps">
diff --git a/apps/showcase/doc/cascadeselect/pt/PTViewer.vue b/apps/showcase/doc/cascadeselect/pt/PTViewer.vue
index ed61ec832..e5800ff95 100644
--- a/apps/showcase/doc/cascadeselect/pt/PTViewer.vue
+++ b/apps/showcase/doc/cascadeselect/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </DocPTViewer>
 </template>
@@ -86,7 +85,7 @@ export default {
                     ]
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('CascadeSelect'),
                     key: 'CascadeSelect'
diff --git a/apps/showcase/doc/chart/pt/PTViewer.vue b/apps/showcase/doc/chart/pt/PTViewer.vue
index d25e903ed..6593922ec 100644
--- a/apps/showcase/doc/chart/pt/PTViewer.vue
+++ b/apps/showcase/doc/chart/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </DocPTViewer>
 </template>
@@ -14,7 +13,7 @@ export default {
         return {
             chartData: null,
             chartOptions: null,
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Chart'),
                     key: 'Chart'
diff --git a/apps/showcase/doc/checkbox/pt/PTViewer.vue b/apps/showcase/doc/checkbox/pt/PTViewer.vue
index 36c8f0735..1d2b89ecf 100644
--- a/apps/showcase/doc/checkbox/pt/PTViewer.vue
+++ b/apps/showcase/doc/checkbox/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Checkbox v-model="checked" :binary="true" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/chip/pt/PTViewer.vue b/apps/showcase/doc/chip/pt/PTViewer.vue
index 8a5bebb21..6d78ba55d 100644
--- a/apps/showcase/doc/chip/pt/PTViewer.vue
+++ b/apps/showcase/doc/chip/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="flex flex-wrap gap-8">
             <Chip label="Microsoft" icon="pi pi-microsoft" removable />
             <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
@@ -14,7 +13,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Chip'),
                     key: 'Chip'
diff --git a/apps/showcase/doc/colorpicker/pt/PTViewer.vue b/apps/showcase/doc/colorpicker/pt/PTViewer.vue
index 3597b759a..1f8dc5076 100644
--- a/apps/showcase/doc/colorpicker/pt/PTViewer.vue
+++ b/apps/showcase/doc/colorpicker/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <ColorPicker v-model="color" inline />
     </DocPTViewer>
diff --git a/apps/showcase/doc/confirmpopup/pt/PTViewer.vue b/apps/showcase/doc/confirmpopup/pt/PTViewer.vue
index 9c8d8f3a1..649fa2198 100644
--- a/apps/showcase/doc/confirmpopup/pt/PTViewer.vue
+++ b/apps/showcase/doc/confirmpopup/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <ConfirmPopup group="ptviewer"></ConfirmPopup>
         <Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
     </DocPTViewer>
@@ -12,7 +11,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('ConfirmPopup'),
                     key: 'ConfirmPopup'
diff --git a/apps/showcase/doc/contextmenu/pt/PTViewer.vue b/apps/showcase/doc/contextmenu/pt/PTViewer.vue
index 9197a4449..cfa29f93a 100644
--- a/apps/showcase/doc/contextmenu/pt/PTViewer.vue
+++ b/apps/showcase/doc/contextmenu/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
         <ContextMenu ref="menu" appendTo="#logo" :model="items" />
     </DocPTViewer>
@@ -16,7 +15,7 @@ export default {
                 { label: 'Copy', icon: 'pi pi-copy' },
                 { label: 'Rename', icon: 'pi pi-file-edit' }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('ContextMenu'),
                     key: 'ContextMenu'
diff --git a/apps/showcase/doc/datatable/pt/PTViewer.vue b/apps/showcase/doc/datatable/pt/PTViewer.vue
index 6a98c28d5..b1d4bfe5b 100644
--- a/apps/showcase/doc/datatable/pt/PTViewer.vue
+++ b/apps/showcase/doc/datatable/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/apps/showcase/doc/dataview/pt/PTViewer.vue b/apps/showcase/doc/dataview/pt/PTViewer.vue
index 37fef276a..5538c3c3b 100644
--- a/apps/showcase/doc/dataview/pt/PTViewer.vue
+++ b/apps/showcase/doc/dataview/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <DataView :value="products">
             <template #list="slotProps">
diff --git a/apps/showcase/doc/datepicker/pt/PTViewer.vue b/apps/showcase/doc/datepicker/pt/PTViewer.vue
index 7973527b0..029dd45dc 100644
--- a/apps/showcase/doc/datepicker/pt/PTViewer.vue
+++ b/apps/showcase/doc/datepicker/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <DatePicker v-model="date" showIcon fluid iconDisplay="input" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/deferredcontent/pt/PTViewer.vue b/apps/showcase/doc/deferredcontent/pt/PTViewer.vue
index 2db92f0e0..276b2140f 100644
--- a/apps/showcase/doc/deferredcontent/pt/PTViewer.vue
+++ b/apps/showcase/doc/deferredcontent/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <DeferredContent>
             <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
diff --git a/apps/showcase/doc/dialog/pt/PTViewer.vue b/apps/showcase/doc/dialog/pt/PTViewer.vue
index 6e2827c9d..903320633 100644
--- a/apps/showcase/doc/dialog/pt/PTViewer.vue
+++ b/apps/showcase/doc/dialog/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <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">
@@ -28,7 +27,7 @@ export default {
     data() {
         return {
             visible: true,
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Dialog'),
                     key: 'Dialog'
diff --git a/apps/showcase/doc/divider/pt/PTViewer.vue b/apps/showcase/doc/divider/pt/PTViewer.vue
index cfe43251c..0bc18fb2c 100644
--- a/apps/showcase/doc/divider/pt/PTViewer.vue
+++ b/apps/showcase/doc/divider/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <div>
             <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores debitis praesentium aliquam.</p>
diff --git a/apps/showcase/doc/dock/pt/PTViewer.vue b/apps/showcase/doc/dock/pt/PTViewer.vue
index e353ac980..f8af9ca31 100644
--- a/apps/showcase/doc/dock/pt/PTViewer.vue
+++ b/apps/showcase/doc/dock/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="relative w-full">
             <Dock :model="items">
                 <template #itemicon="{ item }">
@@ -35,7 +34,7 @@ export default {
                     icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Dock'),
                     key: 'Dock'
diff --git a/apps/showcase/doc/editor/pt/PTViewer.vue b/apps/showcase/doc/editor/pt/PTViewer.vue
index 8d3ad030b..7aff166f7 100644
--- a/apps/showcase/doc/editor/pt/PTViewer.vue
+++ b/apps/showcase/doc/editor/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Editor v-model="value" editorStyle="height: 320px" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/fieldset/pt/PTViewer.vue b/apps/showcase/doc/fieldset/pt/PTViewer.vue
index 0ea50c1a1..4a5f0a6bd 100644
--- a/apps/showcase/doc/fieldset/pt/PTViewer.vue
+++ b/apps/showcase/doc/fieldset/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Fieldset legend="Header" toggleable>
             <p class="m-0">
diff --git a/apps/showcase/doc/fileupload/pt/PTViewer.vue b/apps/showcase/doc/fileupload/pt/PTViewer.vue
index b80900131..80617a851 100644
--- a/apps/showcase/doc/fileupload/pt/PTViewer.vue
+++ b/apps/showcase/doc/fileupload/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <div class="w-full">
             <FileUpload name="demo[]" url="/api/upload" :multiple="true" accept="image/*" :maxFileSize="1000000">
diff --git a/apps/showcase/doc/floatlabel/pt/PTViewer.vue b/apps/showcase/doc/floatlabel/pt/PTViewer.vue
index 63daa6ed0..012955b15 100644
--- a/apps/showcase/doc/floatlabel/pt/PTViewer.vue
+++ b/apps/showcase/doc/floatlabel/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <FloatLabel>
             <InputText id="username" v-model="value" autocomplete="off" />
diff --git a/apps/showcase/doc/fluid/pt/PTViewer.vue b/apps/showcase/doc/fluid/pt/PTViewer.vue
index a7b23424e..343b9e986 100644
--- a/apps/showcase/doc/fluid/pt/PTViewer.vue
+++ b/apps/showcase/doc/fluid/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Fluid>
             <InputText />
         </Fluid>
@@ -13,7 +12,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Fluid'),
                     key: 'Fluid'
diff --git a/apps/showcase/doc/galleria/pt/PTViewer.vue b/apps/showcase/doc/galleria/pt/PTViewer.vue
index 345db9be5..13deb0c3b 100644
--- a/apps/showcase/doc/galleria/pt/PTViewer.vue
+++ b/apps/showcase/doc/galleria/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" showItemNavigators :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/apps/showcase/doc/iconfield/pt/PTViewer.vue b/apps/showcase/doc/iconfield/pt/PTViewer.vue
index 36b55d087..c26ca1806 100644
--- a/apps/showcase/doc/iconfield/pt/PTViewer.vue
+++ b/apps/showcase/doc/iconfield/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <IconField>
             <InputIcon class="pi pi-search" />
diff --git a/apps/showcase/doc/iftalabel/pt/PTViewer.vue b/apps/showcase/doc/iftalabel/pt/PTViewer.vue
index be02c8395..1c8b878ac 100644
--- a/apps/showcase/doc/iftalabel/pt/PTViewer.vue
+++ b/apps/showcase/doc/iftalabel/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <IftaLabel>
             <InputText id="username" v-model="value" autocomplete="off" />
diff --git a/apps/showcase/doc/image/pt/PTViewer.vue b/apps/showcase/doc/image/pt/PTViewer.vue
index 8aa980078..48c767973 100644
--- a/apps/showcase/doc/image/pt/PTViewer.vue
+++ b/apps/showcase/doc/image/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </DocPTViewer>
diff --git a/apps/showcase/doc/inplace/pt/PTViewer.vue b/apps/showcase/doc/inplace/pt/PTViewer.vue
index 63db86257..59013c9fe 100644
--- a/apps/showcase/doc/inplace/pt/PTViewer.vue
+++ b/apps/showcase/doc/inplace/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Inplace>
             <template #display> View Content </template>
             <template #content>
@@ -19,7 +18,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Inplace'),
                     key: 'Inplace'
diff --git a/apps/showcase/doc/inputgroup/pt/PTViewer.vue b/apps/showcase/doc/inputgroup/pt/PTViewer.vue
index bc275bcbe..eed1df054 100644
--- a/apps/showcase/doc/inputgroup/pt/PTViewer.vue
+++ b/apps/showcase/doc/inputgroup/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <InputGroup>
             <InputGroupAddon>$</InputGroupAddon>
diff --git a/apps/showcase/doc/inputmask/pt/PTViewer.vue b/apps/showcase/doc/inputmask/pt/PTViewer.vue
index eda147a7d..bed2c11b3 100644
--- a/apps/showcase/doc/inputmask/pt/PTViewer.vue
+++ b/apps/showcase/doc/inputmask/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/inputnumber/pt/PTViewer.vue b/apps/showcase/doc/inputnumber/pt/PTViewer.vue
index 12b425ea8..64bf4f45d 100644
--- a/apps/showcase/doc/inputnumber/pt/PTViewer.vue
+++ b/apps/showcase/doc/inputnumber/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/inputotp/pt/PTViewer.vue b/apps/showcase/doc/inputotp/pt/PTViewer.vue
index 1e5580bca..90c1c76b9 100644
--- a/apps/showcase/doc/inputotp/pt/PTViewer.vue
+++ b/apps/showcase/doc/inputotp/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <InputOtp v-model="value" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/inputtext/pt/PTViewer.vue b/apps/showcase/doc/inputtext/pt/PTViewer.vue
index a1d00a194..853afd007 100644
--- a/apps/showcase/doc/inputtext/pt/PTViewer.vue
+++ b/apps/showcase/doc/inputtext/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <InputText v-model="value" placeholder="Username" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/knob/pt/PTViewer.vue b/apps/showcase/doc/knob/pt/PTViewer.vue
index 22a6f38d5..471146b5e 100644
--- a/apps/showcase/doc/knob/pt/PTViewer.vue
+++ b/apps/showcase/doc/knob/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Knob v-model="value" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/listbox/pt/PTViewer.vue b/apps/showcase/doc/listbox/pt/PTViewer.vue
index f7a41de12..1b8dab189 100644
--- a/apps/showcase/doc/listbox/pt/PTViewer.vue
+++ b/apps/showcase/doc/listbox/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
diff --git a/apps/showcase/doc/megamenu/pt/PTViewer.vue b/apps/showcase/doc/megamenu/pt/PTViewer.vue
index 9cb1f9346..012237fd3 100644
--- a/apps/showcase/doc/megamenu/pt/PTViewer.vue
+++ b/apps/showcase/doc/megamenu/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <MegaMenu :model="items" />
     </DocPTViewer>
 </template>
@@ -71,7 +70,7 @@ export default {
                     ]
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('MegaMenu'),
                     key: 'MegaMenu'
diff --git a/apps/showcase/doc/menu/pt/PTViewer.vue b/apps/showcase/doc/menu/pt/PTViewer.vue
index a43ce301a..3a719d23f 100644
--- a/apps/showcase/doc/menu/pt/PTViewer.vue
+++ b/apps/showcase/doc/menu/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Menu :model="items" />
     </DocPTViewer>
 </template>
@@ -42,7 +41,7 @@ export default {
                     ]
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Menu'),
                     key: 'Menu'
diff --git a/apps/showcase/doc/menubar/pt/PTViewer.vue b/apps/showcase/doc/menubar/pt/PTViewer.vue
index ce7a6bf28..fc50d34eb 100644
--- a/apps/showcase/doc/menubar/pt/PTViewer.vue
+++ b/apps/showcase/doc/menubar/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Menubar :model="items" />
     </DocPTViewer>
 </template>
@@ -57,7 +56,7 @@ export default {
                     icon: 'pi pi-envelope'
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Menubar'),
                     key: 'Menubar'
diff --git a/apps/showcase/doc/message/pt/PTViewer.vue b/apps/showcase/doc/message/pt/PTViewer.vue
index a9a8ff1f8..a8b929c28 100644
--- a/apps/showcase/doc/message/pt/PTViewer.vue
+++ b/apps/showcase/doc/message/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Message closable severity="info" icon="pi pi-send">Info Message</Message>
     </DocPTViewer>
diff --git a/apps/showcase/doc/metergroup/pt/PTViewer.vue b/apps/showcase/doc/metergroup/pt/PTViewer.vue
index c525b650b..171798ffc 100644
--- a/apps/showcase/doc/metergroup/pt/PTViewer.vue
+++ b/apps/showcase/doc/metergroup/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <MeterGroup :value="value" />
     </DocPTViewer>
 </template>
@@ -17,7 +16,7 @@ export default {
                 { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
                 { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('MeterGroup'),
                     key: 'MeterGroup'
diff --git a/apps/showcase/doc/multiselect/pt/PTViewer.vue b/apps/showcase/doc/multiselect/pt/PTViewer.vue
index c414928c1..bccc5ce99 100644
--- a/apps/showcase/doc/multiselect/pt/PTViewer.vue
+++ b/apps/showcase/doc/multiselect/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
             <template #optiongroup="slotProps">
diff --git a/apps/showcase/doc/orderlist/pt/PTViewer.vue b/apps/showcase/doc/orderlist/pt/PTViewer.vue
index d07e8b624..252668cb7 100644
--- a/apps/showcase/doc/orderlist/pt/PTViewer.vue
+++ b/apps/showcase/doc/orderlist/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
             <template #option="{ option }">
diff --git a/apps/showcase/doc/organizationchart/pt/PTViewer.vue b/apps/showcase/doc/organizationchart/pt/PTViewer.vue
index 05b6ad445..1e3a2fc8d 100644
--- a/apps/showcase/doc/organizationchart/pt/PTViewer.vue
+++ b/apps/showcase/doc/organizationchart/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <OrganizationChart :value="data" collapsible>
             <template #default="slotProps">
diff --git a/apps/showcase/doc/paginator/pt/PTViewer.vue b/apps/showcase/doc/paginator/pt/PTViewer.vue
index 1b180f2f7..99b0dfab9 100644
--- a/apps/showcase/doc/paginator/pt/PTViewer.vue
+++ b/apps/showcase/doc/paginator/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="w-full">
             <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
         </div>
@@ -13,7 +12,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Paginator'),
                     key: 'Paginator'
diff --git a/apps/showcase/doc/panel/pt/PTViewer.vue b/apps/showcase/doc/panel/pt/PTViewer.vue
index 1a3d9cb13..c8d44988e 100644
--- a/apps/showcase/doc/panel/pt/PTViewer.vue
+++ b/apps/showcase/doc/panel/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <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.
@@ -16,7 +15,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Panel'),
                     key: 'Panel'
diff --git a/apps/showcase/doc/panelmenu/pt/PTViewer.vue b/apps/showcase/doc/panelmenu/pt/PTViewer.vue
index 6018ea194..66f17c045 100644
--- a/apps/showcase/doc/panelmenu/pt/PTViewer.vue
+++ b/apps/showcase/doc/panelmenu/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <PanelMenu :model="items" class="w-full md:w-80" />
     </DocPTViewer>
 </template>
@@ -89,7 +88,7 @@ export default {
                     ]
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('PanelMenu'),
                     key: 'PanelMenu'
diff --git a/apps/showcase/doc/password/pt/PTViewer.vue b/apps/showcase/doc/password/pt/PTViewer.vue
index 733aba4a2..3bea5fc68 100644
--- a/apps/showcase/doc/password/pt/PTViewer.vue
+++ b/apps/showcase/doc/password/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Password v-model="value" toggleMask />
     </DocPTViewer>
diff --git a/apps/showcase/doc/picklist/pt/PTViewer.vue b/apps/showcase/doc/picklist/pt/PTViewer.vue
index 34217f1fa..6f7a753ca 100644
--- a/apps/showcase/doc/picklist/pt/PTViewer.vue
+++ b/apps/showcase/doc/picklist/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <PickList v-model="products" dataKey="id" breakpoint="1400px" class="w-full">
             <template #option="{ option }">
                 {{ option.name }}
@@ -17,7 +16,7 @@ export default {
     data() {
         return {
             products: null,
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('PickList'),
                     key: 'PickList'
diff --git a/apps/showcase/doc/popover/pt/PTViewer.vue b/apps/showcase/doc/popover/pt/PTViewer.vue
index e8cf83302..01e2c5347 100644
--- a/apps/showcase/doc/popover/pt/PTViewer.vue
+++ b/apps/showcase/doc/popover/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <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]">
@@ -52,7 +51,7 @@ export default {
                 { 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: [
+            docs: [
                 {
                     data: getPTOptions('Popover'),
                     key: 'Popover'
diff --git a/apps/showcase/doc/progressbar/pt/PTViewer.vue b/apps/showcase/doc/progressbar/pt/PTViewer.vue
index bd3c64d95..bb28d6192 100644
--- a/apps/showcase/doc/progressbar/pt/PTViewer.vue
+++ b/apps/showcase/doc/progressbar/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="w-full">
             <ProgressBar :value="50"></ProgressBar>
         </div>
@@ -13,7 +12,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('ProgressBar'),
                     key: 'ProgressBar'
diff --git a/apps/showcase/doc/progressspinner/pt/PTViewer.vue b/apps/showcase/doc/progressspinner/pt/PTViewer.vue
index 1480f137b..49900e7f2 100644
--- a/apps/showcase/doc/progressspinner/pt/PTViewer.vue
+++ b/apps/showcase/doc/progressspinner/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <ProgressSpinner />
     </DocPTViewer>
 </template>
@@ -11,7 +10,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('ProgressSpinner'),
                     key: 'ProgressSpinner'
diff --git a/apps/showcase/doc/radiobutton/pt/PTViewer.vue b/apps/showcase/doc/radiobutton/pt/PTViewer.vue
index 4b7777781..8719f574d 100644
--- a/apps/showcase/doc/radiobutton/pt/PTViewer.vue
+++ b/apps/showcase/doc/radiobutton/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <RadioButton v-model="value" value="1" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/rating/pt/PTViewer.vue b/apps/showcase/doc/rating/pt/PTViewer.vue
index 4d6b7365b..6a7c9972d 100644
--- a/apps/showcase/doc/rating/pt/PTViewer.vue
+++ b/apps/showcase/doc/rating/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Rating v-model="value" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/scrollpanel/pt/PTViewer.vue b/apps/showcase/doc/scrollpanel/pt/PTViewer.vue
index 04d187b50..c194ea172 100644
--- a/apps/showcase/doc/scrollpanel/pt/PTViewer.vue
+++ b/apps/showcase/doc/scrollpanel/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <ScrollPanel style="width: 100%; height: 200px" pt:bary="!visible !opacity-100">
             <p>
diff --git a/apps/showcase/doc/scrolltop/pt/PTViewer.vue b/apps/showcase/doc/scrolltop/pt/PTViewer.vue
index d014951ba..6c77cf6d8 100644
--- a/apps/showcase/doc/scrolltop/pt/PTViewer.vue
+++ b/apps/showcase/doc/scrolltop/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
@@ -20,7 +19,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('ScrollTop'),
                     key: 'ScrollTop'
diff --git a/apps/showcase/doc/select/pt/PTViewer.vue b/apps/showcase/doc/select/pt/PTViewer.vue
index 2e6c142e1..df8fde02e 100644
--- a/apps/showcase/doc/select/pt/PTViewer.vue
+++ b/apps/showcase/doc/select/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
             <template #optiongroup="slotProps">
diff --git a/apps/showcase/doc/selectbutton/pt/PTViewer.vue b/apps/showcase/doc/selectbutton/pt/PTViewer.vue
index 1a7427bb3..87d123d85 100644
--- a/apps/showcase/doc/selectbutton/pt/PTViewer.vue
+++ b/apps/showcase/doc/selectbutton/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <SelectButton v-model="value" :options="options" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/skeleton/pt/PTViewer.vue b/apps/showcase/doc/skeleton/pt/PTViewer.vue
index be4462c10..dc2aca8e9 100644
--- a/apps/showcase/doc/skeleton/pt/PTViewer.vue
+++ b/apps/showcase/doc/skeleton/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div class="w-full">
             <Skeleton class="mb-2"></Skeleton>
             <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -17,7 +16,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Skeleton'),
                     key: 'Skeleton'
diff --git a/apps/showcase/doc/slider/pt/PTViewer.vue b/apps/showcase/doc/slider/pt/PTViewer.vue
index ad02f4e73..dfe19eaa1 100644
--- a/apps/showcase/doc/slider/pt/PTViewer.vue
+++ b/apps/showcase/doc/slider/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Slider v-model="value" class="w-56" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/speeddial/pt/PTViewer.vue b/apps/showcase/doc/speeddial/pt/PTViewer.vue
index 064569ace..7a97d3d53 100644
--- a/apps/showcase/doc/speeddial/pt/PTViewer.vue
+++ b/apps/showcase/doc/speeddial/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <div style="position: relative; height: 300px">
             <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
diff --git a/apps/showcase/doc/splitbutton/pt/PTViewer.vue b/apps/showcase/doc/splitbutton/pt/PTViewer.vue
index 672e5e0e2..e7f44a040 100644
--- a/apps/showcase/doc/splitbutton/pt/PTViewer.vue
+++ b/apps/showcase/doc/splitbutton/pt/PTViewer.vue
@@ -1,7 +1,6 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
-        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />
+        <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" :model="items" />
     </DocPTViewer>
 </template>
 
diff --git a/apps/showcase/doc/splitter/pt/PTViewer.vue b/apps/showcase/doc/splitter/pt/PTViewer.vue
index 82dcdb76f..45dc7f683 100644
--- a/apps/showcase/doc/splitter/pt/PTViewer.vue
+++ b/apps/showcase/doc/splitter/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <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>
diff --git a/apps/showcase/doc/stepper/pt/PTViewer.vue b/apps/showcase/doc/stepper/pt/PTViewer.vue
index 21485d28f..34f514894 100644
--- a/apps/showcase/doc/stepper/pt/PTViewer.vue
+++ b/apps/showcase/doc/stepper/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Stepper value="1" class="basis-[50rem]" linear>
             <StepList :style="{ overflowX: 'unset' }">
diff --git a/apps/showcase/doc/tabs/pt/PTViewer.vue b/apps/showcase/doc/tabs/pt/PTViewer.vue
index 379cdffc4..7246b3b27 100644
--- a/apps/showcase/doc/tabs/pt/PTViewer.vue
+++ b/apps/showcase/doc/tabs/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Tabs value="0">
             <TabList>
diff --git a/apps/showcase/doc/tag/pt/PTViewer.vue b/apps/showcase/doc/tag/pt/PTViewer.vue
index 215d3d5ae..cc00f2e73 100644
--- a/apps/showcase/doc/tag/pt/PTViewer.vue
+++ b/apps/showcase/doc/tag/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Tag icon="pi pi-user" value="Primary"></Tag>
     </DocPTViewer>
 </template>
@@ -11,7 +10,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Tag'),
                     key: 'Tag'
diff --git a/apps/showcase/doc/terminal/pt/PTViewer.vue b/apps/showcase/doc/terminal/pt/PTViewer.vue
index 2ee11d704..41c6a5838 100644
--- a/apps/showcase/doc/terminal/pt/PTViewer.vue
+++ b/apps/showcase/doc/terminal/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <div>
             <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
             <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" />
@@ -15,7 +14,7 @@ import TerminalService from 'primevue/terminalservice';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Terminal'),
                     key: 'Terminal'
diff --git a/apps/showcase/doc/textarea/pt/PTViewer.vue b/apps/showcase/doc/textarea/pt/PTViewer.vue
index 278c7a0f5..cc0eee26f 100644
--- a/apps/showcase/doc/textarea/pt/PTViewer.vue
+++ b/apps/showcase/doc/textarea/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/tieredmenu/pt/PTViewer.vue b/apps/showcase/doc/tieredmenu/pt/PTViewer.vue
index c8a844279..43031bd4d 100644
--- a/apps/showcase/doc/tieredmenu/pt/PTViewer.vue
+++ b/apps/showcase/doc/tieredmenu/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <TieredMenu :model="items" />
     </DocPTViewer>
 </template>
@@ -80,7 +79,7 @@ export default {
                     ]
                 }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('TieredMenu'),
                     key: 'TieredMenu'
diff --git a/apps/showcase/doc/timeline/pt/PTViewer.vue b/apps/showcase/doc/timeline/pt/PTViewer.vue
index a2ec2c920..26394be33 100644
--- a/apps/showcase/doc/timeline/pt/PTViewer.vue
+++ b/apps/showcase/doc/timeline/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Timeline :value="events">
             <template #opposite="slotProps">
                 <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
@@ -24,7 +23,7 @@ export default {
                 { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Timeline'),
                     key: 'Timeline'
diff --git a/apps/showcase/doc/toast/pt/PTViewer.vue b/apps/showcase/doc/toast/pt/PTViewer.vue
index 1cf507704..315039b02 100644
--- a/apps/showcase/doc/toast/pt/PTViewer.vue
+++ b/apps/showcase/doc/toast/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <div class="p-toast p-component" data-pc-name="toast">
             <div>
diff --git a/apps/showcase/doc/togglebutton/pt/PTViewer.vue b/apps/showcase/doc/togglebutton/pt/PTViewer.vue
index 7f424bafc..2402937c1 100644
--- a/apps/showcase/doc/togglebutton/pt/PTViewer.vue
+++ b/apps/showcase/doc/togglebutton/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/toggleswitch/pt/PTViewer.vue b/apps/showcase/doc/toggleswitch/pt/PTViewer.vue
index 4e7a290a7..49b115fa7 100644
--- a/apps/showcase/doc/toggleswitch/pt/PTViewer.vue
+++ b/apps/showcase/doc/toggleswitch/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <ToggleSwitch v-model="checked" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/toolbar/pt/PTViewer.vue b/apps/showcase/doc/toolbar/pt/PTViewer.vue
index e968651e1..8efa15411 100644
--- a/apps/showcase/doc/toolbar/pt/PTViewer.vue
+++ b/apps/showcase/doc/toolbar/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <Toolbar class="w-full">
             <template #start>
diff --git a/apps/showcase/doc/tooltip/pt/PTViewer.vue b/apps/showcase/doc/tooltip/pt/PTViewer.vue
index 637c835c4..3ad55fc34 100644
--- a/apps/showcase/doc/tooltip/pt/PTViewer.vue
+++ b/apps/showcase/doc/tooltip/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" />
     </DocPTViewer>
 </template>
@@ -11,7 +10,7 @@ import { getPTOptions } from '@/components/doc/helpers';
 export default {
     data() {
         return {
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Tooltip'),
                     key: 'Tooltip'
diff --git a/apps/showcase/doc/tree/pt/PTViewer.vue b/apps/showcase/doc/tree/pt/PTViewer.vue
index 99350b041..8c7033181 100644
--- a/apps/showcase/doc/tree/pt/PTViewer.vue
+++ b/apps/showcase/doc/tree/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <Tree v-model:selectionKeys="selectedKey" filter :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </DocPTViewer>
 </template>
@@ -14,7 +13,7 @@ export default {
         return {
             nodes: null,
             selectedKey: null,
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('Tree'),
                     key: 'Tree'
diff --git a/apps/showcase/doc/treeselect/pt/PTViewer.vue b/apps/showcase/doc/treeselect/pt/PTViewer.vue
index 416ec7bd5..54648d51e 100644
--- a/apps/showcase/doc/treeselect/pt/PTViewer.vue
+++ b/apps/showcase/doc/treeselect/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
     </DocPTViewer>
diff --git a/apps/showcase/doc/treetable/pt/PTViewer.vue b/apps/showcase/doc/treetable/pt/PTViewer.vue
index ca54cedd0..880af5c5b 100644
--- a/apps/showcase/doc/treetable/pt/PTViewer.vue
+++ b/apps/showcase/doc/treetable/pt/PTViewer.vue
@@ -1,6 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
-    <DocPTViewer :docs="ptViewerDoc">
+    <DocPTViewer :docs="docs">
         <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander style="width: 34%"></Column>
             <Column field="size" header="Size" style="width: 33%"></Column>
@@ -17,7 +16,7 @@ export default {
     data() {
         return {
             nodes: null,
-            ptViewerDoc: [
+            docs: [
                 {
                     data: getPTOptions('TreeTable'),
                     key: 'TreeTable'
diff --git a/apps/showcase/doc/virtualscroller/pt/PTViewer.vue b/apps/showcase/doc/virtualscroller/pt/PTViewer.vue
index 255b7cf55..930168451 100644
--- a/apps/showcase/doc/virtualscroller/pt/PTViewer.vue
+++ b/apps/showcase/doc/virtualscroller/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">

From 141ce70c8e188c42ca9ab8fcb60adaa19a3c1517 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:23:05 +0300
Subject: [PATCH 05/11] Update PTViewer.vue

---
 apps/showcase/doc/autocomplete/pt/PTViewer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/showcase/doc/autocomplete/pt/PTViewer.vue b/apps/showcase/doc/autocomplete/pt/PTViewer.vue
index 094a54f41..c0c91b3b3 100644
--- a/apps/showcase/doc/autocomplete/pt/PTViewer.vue
+++ b/apps/showcase/doc/autocomplete/pt/PTViewer.vue
@@ -1,5 +1,4 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
     <DocPTViewer :docs="docs">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
     </DocPTViewer>

From 89c5ffe375eb26326f396457b9ed3f5d9bb0382f Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:27:02 +0300
Subject: [PATCH 06/11] Refactor

---
 apps/showcase/doc/textarea/IftaLabelDoc.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/showcase/doc/textarea/IftaLabelDoc.vue b/apps/showcase/doc/textarea/IftaLabelDoc.vue
index c7cf796b0..d4e725504 100644
--- a/apps/showcase/doc/textarea/IftaLabelDoc.vue
+++ b/apps/showcase/doc/textarea/IftaLabelDoc.vue
@@ -15,7 +15,7 @@
 export default {
     data() {
         return {
-            description: null,
+            value: null,
             code: {
                 basic: `
 <IftaLabel>

From 5dc00ba18331cfbcaa9ee4c2de1c9a66f0ea5406 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:47:27 +0300
Subject: [PATCH 07/11] Update Drawer.d.ts

---
 packages/primevue/src/drawer/Drawer.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/primevue/src/drawer/Drawer.d.ts b/packages/primevue/src/drawer/Drawer.d.ts
index baf8da345..fdb6d3a05 100755
--- a/packages/primevue/src/drawer/Drawer.d.ts
+++ b/packages/primevue/src/drawer/Drawer.d.ts
@@ -87,6 +87,10 @@ export interface DrawerPassThroughOptions {
      * Used to pass attributes to the content's DOM element.
      */
     content?: DrawerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the footer's DOM element.
+     */
+    footer?: DrawerPassThroughOptionType;
     /**
      * Used to pass attributes to the mask's DOM element.
      */

From 7215df3ba88c43f7be9f5271782edb9ec416aece Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Fri, 20 Sep 2024 12:48:33 +0000
Subject: [PATCH 08/11] Update API doc

---
 apps/showcase/doc/common/apidoc/index.json |  8 ++++
 pnpm-lock.yaml                             | 47 ++++++++++++----------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index 3ea867abc..cd68adea3 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -24168,6 +24168,14 @@
                             "default": "",
                             "description": "Used to pass attributes to the content's DOM element."
                         },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the footer's DOM element."
+                        },
                         {
                             "name": "mask",
                             "optional": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 828347f05..b140f4084 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -142,7 +142,7 @@ importers:
         version: 0.1.1
       '@primeuix/utils':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       vue:
         specifier: ^3.0.0
         version: 3.5.6(typescript@5.6.2)
@@ -152,7 +152,7 @@ importers:
     dependencies:
       '@primeuix/utils':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       '@primevue/core':
         specifier: workspace:*
         version: link:../core
@@ -175,7 +175,7 @@ importers:
         version: 0.1.1
       '@primeuix/utils':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       '@primevue/auto-import-resolver':
         specifier: workspace:*
         version: link:../auto-import-resolver
@@ -194,7 +194,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^0.8.5
-        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(webpack-sources@3.2.3)
+        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(webpack-sources@3.2.3)
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.57.1)
@@ -206,7 +206,7 @@ importers:
         version: 3.13.2(rollup@4.22.2)(webpack-sources@3.2.3)
       '@nuxt/test-utils':
         specifier: ^3.7.3
-        version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
+        version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
       '@primevue/themes':
         specifier: workspace:*
         version: link:../themes
@@ -233,7 +233,7 @@ importers:
         version: 0.1.1
       '@primeuix/utils':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       '@primevue/core':
         specifier: workspace:*
         version: link:../core
@@ -2145,8 +2145,8 @@ packages:
     resolution: {integrity: sha512-BC4f3PmkTRKVoJxYdX0uL5zGnTjH87qUoeDZrJRB9G1MwIXnwjP7J3nbYlx0J7c9Bbtewdx2UuXqpjWPq4R6nQ==}
     engines: {node: '>=12.11.0'}
 
-  '@primeuix/utils@0.1.1':
-    resolution: {integrity: sha512-HVEFI1/4Fj4OiiHdEWzZNiQhzNGmFWigW8LJn4W0AMRhJQBQYeoGkeEJpEoSFSY6BUYbDZp+72GL3I1APlkZ9A==}
+  '@primeuix/utils@0.1.2':
+    resolution: {integrity: sha512-BzIm30wEhIJGv1nA3F6IIl1D75W0PSm8obDq0q/Zt/MgU0t4aPKbazciBdkfh8wCrO2Chlqkq/2y7QG5eq4GoA==}
     engines: {node: '>=12.11.0'}
 
   '@rollup/plugin-alias@5.1.0':
@@ -8433,12 +8433,13 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(webpack-sources@3.2.3)':
+  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3)
       '@nuxt/schema': 3.13.2(rollup@4.22.2)(webpack-sources@3.2.3)
       execa: 7.2.0
       nuxt: 3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3)
+      vite: 5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -8458,10 +8459,10 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(webpack-sources@3.2.3)':
+  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(webpack-sources@3.2.3)':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(webpack-sources@3.2.3)
+      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.2)(sass@1.79.2)(terser@5.33.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(webpack-sources@3.2.3)
       '@nuxt/devtools-wizard': 0.8.5
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3)
       birpc: 0.2.17
@@ -8492,8 +8493,9 @@ snapshots:
       simple-git: 3.27.0
       sirv: 2.0.4
       unimport: 3.12.0(rollup@4.22.2)(webpack-sources@3.2.3)
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3))(rollup@4.22.2)
-      vite-plugin-vue-inspector: 3.7.2
+      vite: 5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)
+      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))
+      vite-plugin-vue-inspector: 3.7.2(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))
       wait-on: 7.2.0
       which: 3.0.1
       ws: 8.18.0
@@ -8778,7 +8780,7 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/test-utils@3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)':
+  '@nuxt/test-utils@3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3)
       '@nuxt/schema': 3.13.2(rollup@4.22.2)(webpack-sources@3.2.3)
@@ -8804,7 +8806,8 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 1.14.1(webpack-sources@3.2.3)
-      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
+      vite: 5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
       vue: 3.5.6(typescript@5.6.2)
       vue-router: 4.4.5(vue@3.5.6(typescript@5.6.2))
     optionalDependencies:
@@ -8948,9 +8951,9 @@ snapshots:
 
   '@primeuix/styled@0.1.1':
     dependencies:
-      '@primeuix/utils': 0.1.1
+      '@primeuix/utils': 0.1.2
 
-  '@primeuix/utils@0.1.1': {}
+  '@primeuix/utils@0.1.2': {}
 
   '@rollup/plugin-alias@5.1.0(rollup@3.29.4)':
     dependencies:
@@ -14129,7 +14132,7 @@ snapshots:
       optionator: 0.9.4
       typescript: 5.6.2
 
-  vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3))(rollup@4.22.2):
+  vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.22.2)
@@ -14139,13 +14142,14 @@ snapshots:
       open: 9.1.0
       picocolors: 1.1.0
       sirv: 2.0.4
+      vite: 5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)
     optionalDependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-inspector@3.7.2:
+  vite-plugin-vue-inspector@3.7.2(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)):
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
@@ -14156,6 +14160,7 @@ snapshots:
       '@vue/compiler-dom': 3.5.6
       kolorist: 1.8.0
       magic-string: 0.30.11
+      vite: 5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -14193,9 +14198,9 @@ snapshots:
       sass: 1.79.2
       terser: 5.33.0
 
-  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3):
+  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3):
     dependencies:
-      '@nuxt/test-utils': 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
+      '@nuxt/test-utils': 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.22.2)(vite@5.4.6(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.79.2)(terser@5.33.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'

From e3b0999f56a5ed56c767c3cf1ca54a8b66615818 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:48:52 +0300
Subject: [PATCH 09/11] Drawer pt viewer demo added

---
 apps/showcase/doc/drawer/pt/PTImage.vue  |  8 ----
 apps/showcase/doc/drawer/pt/PTViewer.vue | 56 ++++++++++++++++++++++++
 apps/showcase/doc/drawer/pt/index.vue    |  8 ++--
 apps/showcase/doc/toast/pt/PTViewer.vue  |  2 +-
 4 files changed, 61 insertions(+), 13 deletions(-)
 delete mode 100644 apps/showcase/doc/drawer/pt/PTImage.vue
 create mode 100644 apps/showcase/doc/drawer/pt/PTViewer.vue

diff --git a/apps/showcase/doc/drawer/pt/PTImage.vue b/apps/showcase/doc/drawer/pt/PTImage.vue
deleted file mode 100644
index 5f4489a0e..000000000
--- a/apps/showcase/doc/drawer/pt/PTImage.vue
+++ /dev/null
@@ -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/sidebar.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/drawer/pt/PTViewer.vue b/apps/showcase/doc/drawer/pt/PTViewer.vue
new file mode 100644
index 000000000..819ed29cb
--- /dev/null
+++ b/apps/showcase/doc/drawer/pt/PTViewer.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocPTViewer :docs="docs" class="!justify-start">
+        <div class="">
+            <div class="p-drawer p-component h-[450px] w-80" role="complementary" aria-modal="true" data-pc-name="drawer" data-pc-section="root">
+                <span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span>
+                <div class="p-drawer-header" data-pc-section="header">
+                    <div class="p-drawer-title" data-pc-section="title">Drawer</div>
+                    <button
+                        class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-drawer-close-button"
+                        type="button"
+                        aria-label="Close"
+                        data-pc-name="pcclosebutton"
+                        data-p-disabled="false"
+                        data-p-severity="secondary"
+                        data-pc-group-section="iconcontainer"
+                        data-pc-extend="button"
+                        data-pc-section="root"
+                    >
+                        <TimesIcon class="p-button-icon" />
+                    </button>
+                </div>
+                <div class="p-drawer-content" data-pc-section="content">
+                    <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.
+                    </p>
+                </div>
+                <div class="p-drawer-footer" data-pc-section="footer">Footer</div>
+                <span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span>
+            </div>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import TimesIcon from '@primevue/icons/times';
+import { markRaw } from 'vue';
+
+export default {
+    data() {
+        return {
+            visible: true,
+            docs: [
+                {
+                    data: getPTOptions('Drawer'),
+                    key: 'Drawer'
+                }
+            ]
+        };
+    },
+    components: {
+        TimesIcon: markRaw(TimesIcon)
+    }
+};
+</script>
diff --git a/apps/showcase/doc/drawer/pt/index.vue b/apps/showcase/doc/drawer/pt/index.vue
index 3e5778b96..fc6d7922a 100644
--- a/apps/showcase/doc/drawer/pt/index.vue
+++ b/apps/showcase/doc/drawer/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',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.drawer',
diff --git a/apps/showcase/doc/toast/pt/PTViewer.vue b/apps/showcase/doc/toast/pt/PTViewer.vue
index 315039b02..341912cbf 100644
--- a/apps/showcase/doc/toast/pt/PTViewer.vue
+++ b/apps/showcase/doc/toast/pt/PTViewer.vue
@@ -1,6 +1,6 @@
 <template>
     <DocPTViewer :docs="docs">
-        <div class="p-toast p-component" data-pc-name="toast">
+        <div class="p-toast p-component" data-pc-name="toast" data-pc-section="root">
             <div>
                 <div class="p-toast-message p-toast-message-info" data-pc-section="message">
                     <div class="p-toast-message-content" data-pc-section="messagecontent">

From 5bc8f2a8e36354168bd0c14b5bda3462f4a7d04b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:53:30 +0300
Subject: [PATCH 10/11] Refactor #6435 - pcInput

---
 packages/primevue/src/autocomplete/AutoComplete.d.ts          | 2 +-
 packages/primevue/src/autocomplete/AutoComplete.vue           | 4 ++--
 packages/primevue/src/autocomplete/style/AutoCompleteStyle.js | 2 +-
 packages/primevue/src/datepicker/DatePicker.d.ts              | 2 +-
 packages/primevue/src/datepicker/DatePicker.vue               | 4 ++--
 packages/primevue/src/datepicker/style/DatePickerStyle.js     | 2 +-
 packages/primevue/src/inputnumber/InputNumber.d.ts            | 2 +-
 packages/primevue/src/inputnumber/InputNumber.vue             | 4 ++--
 packages/primevue/src/inputnumber/style/InputNumberStyle.js   | 2 +-
 packages/primevue/src/inputotp/InputOtp.d.ts                  | 2 +-
 packages/primevue/src/inputotp/InputOtp.vue                   | 4 ++--
 packages/primevue/src/inputotp/style/InputOtpStyle.js         | 2 +-
 packages/primevue/src/password/Password.d.ts                  | 2 +-
 packages/primevue/src/password/Password.vue                   | 4 ++--
 packages/primevue/src/password/style/PasswordStyle.js         | 2 +-
 15 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts
index 5d480acb1..2265ed9fb 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.d.ts
+++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts
@@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    pcInput?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
+    pcInputText?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the input multiple's DOM element.
      */
diff --git a/packages/primevue/src/autocomplete/AutoComplete.vue b/packages/primevue/src/autocomplete/AutoComplete.vue
index 40cad385d..302aaea5a 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.vue
+++ b/packages/primevue/src/autocomplete/AutoComplete.vue
@@ -5,7 +5,7 @@
             ref="focusInput"
             :id="inputId"
             type="text"
-            :class="[cx('pcInput'), inputClass]"
+            :class="[cx('pcInputText'), inputClass]"
             :style="inputStyle"
             :value="inputValue"
             :placeholder="placeholder"
@@ -29,7 +29,7 @@
             @input="onInput"
             @change="onChange"
             :unstyled="unstyled"
-            :pt="ptm('pcInput')"
+            :pt="ptm('pcInputText')"
         />
         <ul
             v-if="multiple"
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index e3e2fcc9b..d86a4a3bc 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -255,7 +255,7 @@ const classes = {
             'p-autocomplete-fluid': instance.hasFluid
         }
     ],
-    pcInput: 'p-autocomplete-input',
+    pcInputText: 'p-autocomplete-input',
     inputMultiple: ({ props, instance }) => [
         'p-autocomplete-input-multiple',
         {
diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/packages/primevue/src/datepicker/DatePicker.d.ts
index ae258ceaf..6a2739bca 100755
--- a/packages/primevue/src/datepicker/DatePicker.d.ts
+++ b/packages/primevue/src/datepicker/DatePicker.d.ts
@@ -138,7 +138,7 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    pcInput?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    pcInputText?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the dropdown's DOM element.
      */
diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
index 9c04e5ae4..740dbc687 100755
--- a/packages/primevue/src/datepicker/DatePicker.vue
+++ b/packages/primevue/src/datepicker/DatePicker.vue
@@ -5,7 +5,7 @@
             :ref="inputRef"
             :id="inputId"
             role="combobox"
-            :class="[inputClass, cx('pcInput')]"
+            :class="[inputClass, cx('pcInputText')]"
             :style="inputStyle"
             :value="inputFieldValue"
             :placeholder="placeholder"
@@ -30,7 +30,7 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            :pt="ptm('pcInput')"
+            :pt="ptm('pcInputText')"
         />
         <slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton">
             <button
diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index 969ab9c07..e92acfb98 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -380,7 +380,7 @@ const classes = {
             'p-datepicker-fluid': instance.hasFluid
         }
     ],
-    pcInput: 'p-datepicker-input',
+    pcInputText: 'p-datepicker-input',
     dropdown: 'p-datepicker-dropdown',
     inputIconContainer: 'p-datepicker-input-icon-container',
     inputIcon: 'p-datepicker-input-icon',
diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/packages/primevue/src/inputnumber/InputNumber.d.ts
index a837653fe..13a0bedc6 100755
--- a/packages/primevue/src/inputnumber/InputNumber.d.ts
+++ b/packages/primevue/src/inputnumber/InputNumber.d.ts
@@ -104,7 +104,7 @@ export interface InputNumberPassThroughOptions<T = any> {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    pcInput?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
+    pcInputText?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the button group's DOM element.
      */
diff --git a/packages/primevue/src/inputnumber/InputNumber.vue b/packages/primevue/src/inputnumber/InputNumber.vue
index 930ec333e..513c5a63e 100755
--- a/packages/primevue/src/inputnumber/InputNumber.vue
+++ b/packages/primevue/src/inputnumber/InputNumber.vue
@@ -4,7 +4,7 @@
             ref="input"
             :id="inputId"
             role="spinbutton"
-            :class="[cx('pcInput'), inputClass]"
+            :class="[cx('pcInputText'), inputClass]"
             :style="inputStyle"
             :value="formattedValue"
             :aria-valuemin="min"
@@ -25,7 +25,7 @@
             @click="onInputClick"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            :pt="ptm('pcInput')"
+            :pt="ptm('pcInputText')"
             :unstyled="unstyled"
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
index 800699ef3..eccb7ed66 100644
--- a/packages/primevue/src/inputnumber/style/InputNumberStyle.js
+++ b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
@@ -157,7 +157,7 @@ const classes = {
             'p-inputnumber-fluid': instance.hasFluid
         }
     ],
-    pcInput: 'p-inputnumber-input',
+    pcInputText: 'p-inputnumber-input',
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ instance, props }) => [
         'p-inputnumber-button p-inputnumber-increment-button',
diff --git a/packages/primevue/src/inputotp/InputOtp.d.ts b/packages/primevue/src/inputotp/InputOtp.d.ts
index a486947eb..8443ee0a1 100755
--- a/packages/primevue/src/inputotp/InputOtp.d.ts
+++ b/packages/primevue/src/inputotp/InputOtp.d.ts
@@ -68,7 +68,7 @@ export interface InputOtpPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    pcInput?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
+    pcInputText?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/packages/primevue/src/inputotp/InputOtp.vue b/packages/primevue/src/inputotp/InputOtp.vue
index 0cdbf1339..7384a1592 100755
--- a/packages/primevue/src/inputotp/InputOtp.vue
+++ b/packages/primevue/src/inputotp/InputOtp.vue
@@ -5,7 +5,7 @@
                 <OtpInputText
                     :value="tokens[i - 1]"
                     :type="inputType"
-                    :class="cx('pcInput')"
+                    :class="cx('pcInputText')"
                     :inputmode="inputMode"
                     :variant="variant"
                     :readonly="readonly"
@@ -18,7 +18,7 @@
                     @blur="onBlur($event)"
                     @paste="onPaste($event)"
                     @keydown="onKeyDown($event)"
-                    :pt="ptm('pcInput')"
+                    :pt="ptm('pcInputText')"
                 />
             </slot>
         </template>
diff --git a/packages/primevue/src/inputotp/style/InputOtpStyle.js b/packages/primevue/src/inputotp/style/InputOtpStyle.js
index 39c3e89d1..a56881e91 100644
--- a/packages/primevue/src/inputotp/style/InputOtpStyle.js
+++ b/packages/primevue/src/inputotp/style/InputOtpStyle.js
@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
 
 const classes = {
     root: 'p-inputotp p-component',
-    pcInput: 'p-inputotp-input'
+    pcInputText: 'p-inputotp-input'
 };
 
 export default BaseStyle.extend({
diff --git a/packages/primevue/src/password/Password.d.ts b/packages/primevue/src/password/Password.d.ts
index aecc3db3e..f850ecd4a 100755
--- a/packages/primevue/src/password/Password.d.ts
+++ b/packages/primevue/src/password/Password.d.ts
@@ -74,7 +74,7 @@ export interface PasswordPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    pcInput?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
+    pcInputText?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the mask icon's DOM element.
      */
diff --git a/packages/primevue/src/password/Password.vue b/packages/primevue/src/password/Password.vue
index 0db123850..85f51bc29 100755
--- a/packages/primevue/src/password/Password.vue
+++ b/packages/primevue/src/password/Password.vue
@@ -4,7 +4,7 @@
             ref="input"
             :id="inputId"
             :type="inputType"
-            :class="[cx('pcInput'), inputClass]"
+            :class="[cx('pcInputText'), inputClass]"
             :style="inputStyle"
             :value="modelValue"
             :aria-labelledby="ariaLabelledby"
@@ -24,7 +24,7 @@
             @keyup="onKeyUp"
             @invalid="onInvalid"
             v-bind="inputProps"
-            :pt="ptm('pcInput')"
+            :pt="ptm('pcInputText')"
             :unstyled="unstyled"
         />
         <!-- TODO: hideicon and showicon slots are deprecated since v4.0-->
diff --git a/packages/primevue/src/password/style/PasswordStyle.js b/packages/primevue/src/password/style/PasswordStyle.js
index c76719043..cfbc9d919 100644
--- a/packages/primevue/src/password/style/PasswordStyle.js
+++ b/packages/primevue/src/password/style/PasswordStyle.js
@@ -91,7 +91,7 @@ const classes = {
             'p-password-fluid': instance.hasFluid
         }
     ],
-    pcInput: 'p-password-input',
+    pcInputText: 'p-password-input',
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
     overlay: 'p-password-overlay p-component',

From 18add4b52ae7bf82ef2d41cfce0036d4789ab8ab Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Fri, 20 Sep 2024 12:54:35 +0000
Subject: [PATCH 11/11] Update API doc

---
 apps/showcase/doc/common/apidoc/index.json | 10 +++++-----
 pnpm-lock.yaml                             | 14 +++++++-------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index cd68adea3..d7baa3312 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -2204,7 +2204,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "pcInput",
+                            "name": "pcInputText",
                             "optional": true,
                             "readonly": false,
                             "type": "any",
@@ -20083,7 +20083,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "pcInput",
+                            "name": "pcInputText",
                             "optional": true,
                             "readonly": false,
                             "type": "any",
@@ -33136,7 +33136,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "pcInput",
+                            "name": "pcInputText",
                             "optional": true,
                             "readonly": false,
                             "type": "any",
@@ -33975,7 +33975,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "pcInput",
+                            "name": "pcInputText",
                             "optional": true,
                             "readonly": false,
                             "type": "any",
@@ -45915,7 +45915,7 @@
                             "description": "Used to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "pcInput",
+                            "name": "pcInputText",
                             "optional": true,
                             "readonly": false,
                             "type": "any",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b140f4084..b085c4496 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,7 +139,7 @@ importers:
     dependencies:
       '@primeuix/styled':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       '@primeuix/utils':
         specifier: ^0.1.1
         version: 0.1.2
@@ -172,7 +172,7 @@ importers:
         version: 3.13.2(magicast@0.3.5)(rollup@4.22.2)(webpack-sources@3.2.3)
       '@primeuix/styled':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       '@primeuix/utils':
         specifier: ^0.1.1
         version: 0.1.2
@@ -230,7 +230,7 @@ importers:
     dependencies:
       '@primeuix/styled':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
       '@primeuix/utils':
         specifier: ^0.1.1
         version: 0.1.2
@@ -253,7 +253,7 @@ importers:
     dependencies:
       '@primeuix/styled':
         specifier: ^0.1.1
-        version: 0.1.1
+        version: 0.1.2
     publishDirectory: dist
 
 packages:
@@ -2141,8 +2141,8 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
-  '@primeuix/styled@0.1.1':
-    resolution: {integrity: sha512-BC4f3PmkTRKVoJxYdX0uL5zGnTjH87qUoeDZrJRB9G1MwIXnwjP7J3nbYlx0J7c9Bbtewdx2UuXqpjWPq4R6nQ==}
+  '@primeuix/styled@0.1.2':
+    resolution: {integrity: sha512-ThPmQh/XyJxAhmtd1YNmSzNTWAE+ZiHMrtHyKpyAUNh/fuzJA5J0S5oqyOMMLm8zPKWeVzMtNquz/rg7w4DauA==}
     engines: {node: '>=12.11.0'}
 
   '@primeuix/utils@0.1.2':
@@ -8949,7 +8949,7 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@primeuix/styled@0.1.1':
+  '@primeuix/styled@0.1.2':
     dependencies:
       '@primeuix/utils': 0.1.2