From 44e640bfb4b3127e9b3ca1306d61811434a912b4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 11:07:27 +0300
Subject: [PATCH] Remove pt demos

---
 doc/accordion/pt/PTDoc.vue         | 127 --------
 doc/accordion/pt/index.vue         |   6 -
 doc/autocomplete/pt/PTDoc.vue      | 109 -------
 doc/autocomplete/pt/index.vue      |   6 -
 doc/avatar/pt/PTDoc.vue            |  43 ---
 doc/avatar/pt/index.vue            |   6 -
 doc/badge/pt/PTDoc.vue             | 100 ------
 doc/badge/pt/index.vue             |   6 -
 doc/blockui/pt/PTDoc.vue           |  56 ----
 doc/blockui/pt/index.vue           |   6 -
 doc/breadcrumb/pt/PTDoc.vue        | 107 -------
 doc/breadcrumb/pt/index.vue        |   6 -
 doc/button/pt/PTDoc.vue            |  47 ---
 doc/button/pt/index.vue            |   6 -
 doc/calendar/pt/PTDoc.vue          |  88 ------
 doc/calendar/pt/index.vue          |   6 -
 doc/card/pt/PTDoc.vue              |  67 ----
 doc/card/pt/index.vue              |   6 -
 doc/carousel/pt/PTDoc.vue          | 299 ------------------
 doc/carousel/pt/index.vue          |   6 -
 doc/cascadeselect/pt/PTDoc.vue     | 314 -------------------
 doc/cascadeselect/pt/index.vue     |   6 -
 doc/chart/pt/PTDoc.vue             | 166 ----------
 doc/chart/pt/index.vue             |   6 -
 doc/checkbox/pt/PTDoc.vue          |  84 -----
 doc/checkbox/pt/index.vue          |   6 -
 doc/chip/pt/PTDoc.vue              |  59 ----
 doc/chip/pt/index.vue              |   6 -
 doc/chips/pt/PTDoc.vue             |  80 -----
 doc/chips/pt/index.vue             |   6 -
 doc/colorpicker/pt/PTDoc.vue       |  76 -----
 doc/colorpicker/pt/index.vue       |   6 -
 doc/confirmdialog/pt/PTDoc.vue     | 113 -------
 doc/confirmdialog/pt/index.vue     |   6 -
 doc/confirmpopup/pt/PTDoc.vue      | 120 --------
 doc/confirmpopup/pt/index.vue      |   6 -
 doc/contextmenu/pt/PTDoc.vue       | 471 -----------------------------
 doc/contextmenu/pt/index.vue       |   6 -
 doc/datatable/pt/PTDoc.vue         | 259 ----------------
 doc/datatable/pt/index.vue         |   6 -
 doc/dataview/pt/PTDoc.vue          | 417 -------------------------
 doc/dataview/pt/index.vue          |   6 -
 doc/dialog/pt/PTDoc.vue            | 103 -------
 doc/dialog/pt/index.vue            |   6 -
 doc/divider/pt/PTDoc.vue           |  83 -----
 doc/divider/pt/index.vue           |   6 -
 doc/dock/pt/PTDoc.vue              | 197 ------------
 doc/dock/pt/index.vue              |   6 -
 doc/dropdown/pt/PTDoc.vue          | 117 -------
 doc/dropdown/pt/index.vue          |   6 -
 doc/dynamicdialog/pt/PTDoc.vue     |  40 ---
 doc/dynamicdialog/pt/index.vue     |   6 -
 doc/editor/pt/PTDoc.vue            |  76 -----
 doc/editor/pt/index.vue            |   6 -
 doc/fieldset/pt/PTDoc.vue          |  76 -----
 doc/fieldset/pt/index.vue          |   6 -
 doc/fileupload/pt/PTDoc.vue        | 117 -------
 doc/fileupload/pt/index.vue        |   6 -
 doc/galleria/pt/PTDoc.vue          | 163 ----------
 doc/galleria/pt/index.vue          |   6 -
 doc/image/pt/PTDoc.vue             |  68 -----
 doc/image/pt/index.vue             |   6 -
 doc/inlinemessage/pt/PTDoc.vue     |  69 -----
 doc/inlinemessage/pt/index.vue     |   6 -
 doc/inplace/pt/PTDoc.vue           |  91 ------
 doc/inplace/pt/index.vue           |   6 -
 doc/inputmask/pt/PTDoc.vue         |  85 ------
 doc/inputmask/pt/index.vue         |   6 -
 doc/inputnumber/pt/PTDoc.vue       | 136 ---------
 doc/inputnumber/pt/index.vue       |   6 -
 doc/inputswitch/pt/PTDoc.vue       |  80 -----
 doc/inputswitch/pt/index.vue       |   6 -
 doc/inputtext/pt/PTDoc.vue         |  77 -----
 doc/inputtext/pt/index.vue         |   6 -
 doc/knob/pt/PTDoc.vue              |  72 -----
 doc/knob/pt/index.vue              |   6 -
 doc/listbox/pt/PTDoc.vue           | 113 -------
 doc/listbox/pt/index.vue           |   6 -
 doc/megamenu/pt/PTDoc.vue          | 425 --------------------------
 doc/megamenu/pt/index.vue          |   6 -
 doc/menu/pt/PTDoc.vue              | 193 ------------
 doc/menu/pt/index.vue              |   6 -
 doc/menubar/pt/PTDoc.vue           | 446 ---------------------------
 doc/menubar/pt/index.vue           |   6 -
 doc/message/pt/PTDoc.vue           |  65 ----
 doc/message/pt/index.vue           |   6 -
 doc/multiselect/pt/PTDoc.vue       | 121 --------
 doc/multiselect/pt/index.vue       |   6 -
 doc/orderlist/pt/PTDoc.vue         | 177 -----------
 doc/orderlist/pt/index.vue         |   6 -
 doc/organizationchart/pt/PTDoc.vue | 178 -----------
 doc/organizationchart/pt/index.vue |   6 -
 doc/overlaypanel/pt/PTDoc.vue      |  87 ------
 doc/overlaypanel/pt/index.vue      |   6 -
 doc/paginator/pt/PTDoc.vue         |  73 -----
 doc/paginator/pt/index.vue         |   6 -
 doc/panel/pt/PTDoc.vue             |  76 -----
 doc/panel/pt/index.vue             |   6 -
 doc/panelmenu/pt/PTDoc.vue         | 417 -------------------------
 doc/panelmenu/pt/index.vue         |   6 -
 doc/password/pt/PTDoc.vue          |  72 -----
 doc/password/pt/index.vue          |   6 -
 doc/picklist/pt/PTDoc.vue          | 198 ------------
 doc/picklist/pt/index.vue          |   6 -
 doc/progressbar/pt/PTDoc.vue       |  55 ----
 doc/progressbar/pt/index.vue       |   6 -
 doc/progressspinner/pt/PTDoc.vue   |  61 ----
 doc/progressspinner/pt/index.vue   |   6 -
 doc/radiobutton/pt/PTDoc.vue       | 129 --------
 doc/radiobutton/pt/index.vue       |   6 -
 doc/rating/pt/PTDoc.vue            |  72 -----
 doc/rating/pt/index.vue            |   6 -
 doc/ripple/pt/PTDoc.vue            |  77 -----
 doc/ripple/pt/index.vue            |   6 -
 doc/scrollpanel/pt/PTDoc.vue       | 105 -------
 doc/scrollpanel/pt/index.vue       |   6 -
 doc/scrolltop/pt/PTDoc.vue         |  77 -----
 doc/scrolltop/pt/index.vue         |   6 -
 doc/selectbutton/pt/PTDoc.vue      |  91 ------
 doc/selectbutton/pt/index.vue      |   6 -
 doc/sidebar/pt/PTDoc.vue           |  79 -----
 doc/sidebar/pt/index.vue           |   6 -
 doc/skeleton/pt/PTDoc.vue          |  43 ---
 doc/skeleton/pt/index.vue          |   6 -
 doc/slider/pt/PTDoc.vue            |  80 -----
 doc/slider/pt/index.vue            |   6 -
 doc/speeddial/pt/PTDoc.vue         | 200 ------------
 doc/speeddial/pt/index.vue         |   6 -
 doc/splitbutton/pt/PTDoc.vue       | 175 -----------
 doc/splitbutton/pt/index.vue       |   6 -
 doc/splitter/pt/PTDoc.vue          |  59 ----
 doc/splitter/pt/index.vue          |   6 -
 doc/steps/pt/PTDoc.vue             | 131 --------
 doc/steps/pt/index.vue             |   6 -
 doc/tabmenu/pt/PTDoc.vue           | 143 ---------
 doc/tabmenu/pt/index.vue           |   6 -
 doc/tabview/pt/PTDoc.vue           | 127 --------
 doc/tabview/pt/index.vue           |   6 -
 doc/tag/pt/PTDoc.vue               |  47 ---
 doc/tag/pt/index.vue               |   6 -
 doc/terminal/pt/PTDoc.vue          | 185 -----------
 doc/terminal/pt/index.vue          |   6 -
 doc/textarea/pt/PTDoc.vue          |  84 -----
 doc/textarea/pt/index.vue          |   6 -
 doc/tieredmenu/pt/PTDoc.vue        | 455 ----------------------------
 doc/tieredmenu/pt/index.vue        |   6 -
 doc/timeline/pt/PTDoc.vue          | 104 -------
 doc/timeline/pt/index.vue          |   6 -
 doc/toast/pt/PTDoc.vue             |  83 -----
 doc/toast/pt/index.vue             |   6 -
 doc/togglebutton/pt/PTDoc.vue      |  80 -----
 doc/togglebutton/pt/index.vue      |   6 -
 doc/toolbar/pt/PTDoc.vue           |  82 -----
 doc/toolbar/pt/index.vue           |   6 -
 doc/tooltip/pt/PTDoc.vue           |  81 -----
 doc/tooltip/pt/index.vue           |   6 -
 doc/tree/pt/PTDoc.vue              | 126 --------
 doc/tree/pt/index.vue              |   6 -
 doc/treeselect/pt/PTDoc.vue        | 144 ---------
 doc/treeselect/pt/index.vue        |   6 -
 doc/treetable/pt/PTDoc.vue         | 199 ------------
 doc/treetable/pt/index.vue         |   6 -
 doc/tristatecheckbox/pt/PTDoc.vue  |  83 -----
 doc/tristatecheckbox/pt/index.vue  |   6 -
 doc/virtualscroller/pt/PTDoc.vue   |  98 ------
 doc/virtualscroller/pt/index.vue   |   6 -
 166 files changed, 11546 deletions(-)
 delete mode 100644 doc/accordion/pt/PTDoc.vue
 delete mode 100644 doc/autocomplete/pt/PTDoc.vue
 delete mode 100644 doc/avatar/pt/PTDoc.vue
 delete mode 100644 doc/badge/pt/PTDoc.vue
 delete mode 100644 doc/blockui/pt/PTDoc.vue
 delete mode 100644 doc/breadcrumb/pt/PTDoc.vue
 delete mode 100644 doc/button/pt/PTDoc.vue
 delete mode 100644 doc/calendar/pt/PTDoc.vue
 delete mode 100644 doc/card/pt/PTDoc.vue
 delete mode 100644 doc/carousel/pt/PTDoc.vue
 delete mode 100644 doc/cascadeselect/pt/PTDoc.vue
 delete mode 100644 doc/chart/pt/PTDoc.vue
 delete mode 100644 doc/checkbox/pt/PTDoc.vue
 delete mode 100644 doc/chip/pt/PTDoc.vue
 delete mode 100644 doc/chips/pt/PTDoc.vue
 delete mode 100644 doc/colorpicker/pt/PTDoc.vue
 delete mode 100644 doc/confirmdialog/pt/PTDoc.vue
 delete mode 100644 doc/confirmpopup/pt/PTDoc.vue
 delete mode 100644 doc/contextmenu/pt/PTDoc.vue
 delete mode 100644 doc/datatable/pt/PTDoc.vue
 delete mode 100644 doc/dataview/pt/PTDoc.vue
 delete mode 100644 doc/dialog/pt/PTDoc.vue
 delete mode 100644 doc/divider/pt/PTDoc.vue
 delete mode 100644 doc/dock/pt/PTDoc.vue
 delete mode 100644 doc/dropdown/pt/PTDoc.vue
 delete mode 100644 doc/dynamicdialog/pt/PTDoc.vue
 delete mode 100644 doc/editor/pt/PTDoc.vue
 delete mode 100644 doc/fieldset/pt/PTDoc.vue
 delete mode 100644 doc/fileupload/pt/PTDoc.vue
 delete mode 100644 doc/galleria/pt/PTDoc.vue
 delete mode 100644 doc/image/pt/PTDoc.vue
 delete mode 100644 doc/inlinemessage/pt/PTDoc.vue
 delete mode 100644 doc/inplace/pt/PTDoc.vue
 delete mode 100644 doc/inputmask/pt/PTDoc.vue
 delete mode 100644 doc/inputnumber/pt/PTDoc.vue
 delete mode 100644 doc/inputswitch/pt/PTDoc.vue
 delete mode 100644 doc/inputtext/pt/PTDoc.vue
 delete mode 100644 doc/knob/pt/PTDoc.vue
 delete mode 100644 doc/listbox/pt/PTDoc.vue
 delete mode 100644 doc/megamenu/pt/PTDoc.vue
 delete mode 100644 doc/menu/pt/PTDoc.vue
 delete mode 100644 doc/menubar/pt/PTDoc.vue
 delete mode 100644 doc/message/pt/PTDoc.vue
 delete mode 100644 doc/multiselect/pt/PTDoc.vue
 delete mode 100644 doc/orderlist/pt/PTDoc.vue
 delete mode 100644 doc/organizationchart/pt/PTDoc.vue
 delete mode 100644 doc/overlaypanel/pt/PTDoc.vue
 delete mode 100644 doc/paginator/pt/PTDoc.vue
 delete mode 100644 doc/panel/pt/PTDoc.vue
 delete mode 100644 doc/panelmenu/pt/PTDoc.vue
 delete mode 100644 doc/password/pt/PTDoc.vue
 delete mode 100644 doc/picklist/pt/PTDoc.vue
 delete mode 100644 doc/progressbar/pt/PTDoc.vue
 delete mode 100644 doc/progressspinner/pt/PTDoc.vue
 delete mode 100644 doc/radiobutton/pt/PTDoc.vue
 delete mode 100644 doc/rating/pt/PTDoc.vue
 delete mode 100644 doc/ripple/pt/PTDoc.vue
 delete mode 100644 doc/scrollpanel/pt/PTDoc.vue
 delete mode 100644 doc/scrolltop/pt/PTDoc.vue
 delete mode 100644 doc/selectbutton/pt/PTDoc.vue
 delete mode 100644 doc/sidebar/pt/PTDoc.vue
 delete mode 100644 doc/skeleton/pt/PTDoc.vue
 delete mode 100644 doc/slider/pt/PTDoc.vue
 delete mode 100644 doc/speeddial/pt/PTDoc.vue
 delete mode 100644 doc/splitbutton/pt/PTDoc.vue
 delete mode 100644 doc/splitter/pt/PTDoc.vue
 delete mode 100644 doc/steps/pt/PTDoc.vue
 delete mode 100644 doc/tabmenu/pt/PTDoc.vue
 delete mode 100644 doc/tabview/pt/PTDoc.vue
 delete mode 100644 doc/tag/pt/PTDoc.vue
 delete mode 100644 doc/terminal/pt/PTDoc.vue
 delete mode 100644 doc/textarea/pt/PTDoc.vue
 delete mode 100644 doc/tieredmenu/pt/PTDoc.vue
 delete mode 100644 doc/timeline/pt/PTDoc.vue
 delete mode 100644 doc/toast/pt/PTDoc.vue
 delete mode 100644 doc/togglebutton/pt/PTDoc.vue
 delete mode 100644 doc/toolbar/pt/PTDoc.vue
 delete mode 100644 doc/tooltip/pt/PTDoc.vue
 delete mode 100644 doc/tree/pt/PTDoc.vue
 delete mode 100644 doc/treeselect/pt/PTDoc.vue
 delete mode 100644 doc/treetable/pt/PTDoc.vue
 delete mode 100644 doc/tristatecheckbox/pt/PTDoc.vue
 delete mode 100644 doc/virtualscroller/pt/PTDoc.vue

diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
deleted file mode 100644
index 9279bd184..000000000
--- a/doc/accordion/pt/PTDoc.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab
-                v-for="(tab, index) in tabs"
-                :key="tab.title"
-                :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }"
-            >
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: `Header ${i + 1}`,
-                content: `Tab ${i + 1} Content`
-            })),
-            code: {
-                basic: `
-<Accordion :activeIndex="0">
-    <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-        :pt="{
-            headerAction: ({ props, parent }) => ({
-                class: panelClass(props, parent, index)
-            })
-        }">
-        <p>{{ tab.content }}</p>
-    </AccordionTab>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: \`Header \${i + 1}\`,
-                content: \`Tab \${i + 1} Content\`
-            }))
-        }
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
-    title: \`Header \${i + 1}\`,
-    content: \`Tab \${i + 1} Content\`
-})));
-
-const panelClass = (props, parent, index) => {
-    return [
-        {
-            'bg-primary': parent.state.d_activeIndex === index
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-};
-</script>
diff --git a/doc/accordion/pt/index.vue b/doc/accordion/pt/index.vue
index fb05d45e3..aba986ce4 100644
--- a/doc/accordion/pt/index.vue
+++ b/doc/accordion/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'AccordionTab PT Options',
                     component: DocApiTable,
                     data: getPTOption('AccordionTab')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/autocomplete/pt/PTDoc.vue b/doc/autocomplete/pt/PTDoc.vue
deleted file mode 100644
index 2b065ec30..000000000
--- a/doc/autocomplete/pt/PTDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete
-    v-model="value"
-    :suggestions="items"
-    @complete="search"
-    :pt="{
-        input: { class: 'w-16rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/doc/autocomplete/pt/index.vue b/doc/autocomplete/pt/index.vue
index c938bf4d9..afa1dbc54 100644
--- a/doc/autocomplete/pt/index.vue
+++ b/doc/autocomplete/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'AutoComplete PT Options',
                     component: DocApiTable,
                     data: getPTOption('AutoComplete')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/avatar/pt/PTDoc.vue b/doc/avatar/pt/PTDoc.vue
deleted file mode 100644
index 229a20b8b..000000000
--- a/doc/avatar/pt/PTDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" :pt="{ image: { class: 'w-4rem h-4rem' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-    :pt="{
-        image: { class: 'w-4rem h-4rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            image: { class: 'w-4rem h-4rem' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            image: { class: 'w-4rem h-4rem' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/avatar/pt/index.vue b/doc/avatar/pt/index.vue
index 3c435f9eb..3107ed8d2 100644
--- a/doc/avatar/pt/index.vue
+++ b/doc/avatar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'AvatarGroup PT Options',
                     component: DocApiTable,
                     data: getPTOption('AvatarGroup')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
deleted file mode 100644
index 8008e637d..000000000
--- a/doc/badge/pt/PTDoc.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-// component
-<Badge
-    value="2"
-    :pt="{
-        root: 'bg-primary border-round-xl'
-    }"
-/>
-
-// directive
-<i
-    v-badge.danger="{
-        value: '5+',
-        pt: {
-            root: 'bg-primary'
-        }
-    }"
-    class="pi pi-calendar text-4xl"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        // component
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-
-        // directive
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        // component
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-
-        // directive
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/badge/pt/index.vue b/doc/badge/pt/index.vue
index aeeda45b0..a4b244f92 100644
--- a/doc/badge/pt/index.vue
+++ b/doc/badge/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Badge PT Options',
                     component: DocApiTable,
                     data: getPTOption('Badge')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
deleted file mode 100644
index 8f9071e2f..000000000
--- a/doc/blockui/pt/PTDoc.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <div class="mb-3">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </BlockUI>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false,
-            code: {
-                basic: `
-<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</BlockUI>
-`,
-                options: `
-<template>
-    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </BlockUI>
-</template>
-`,
-                composition: `
-<template>
-    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </BlockUI>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/blockui/pt/index.vue b/doc/blockui/pt/index.vue
index 04f93c43d..e22dc8ce7 100644
--- a/doc/blockui/pt/index.vue
+++ b/doc/blockui/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'BlockUI PT Options',
                     component: DocApiTable,
                     data: getPTOption('BlockUI')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/breadcrumb/pt/PTDoc.vue b/doc/breadcrumb/pt/PTDoc.vue
deleted file mode 100644
index 74c8f282e..000000000
--- a/doc/breadcrumb/pt/PTDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Breadcrumb
-            :home="home"
-            :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/'
-            },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
-            code: {
-                basic: `
-<Breadcrumb :home="home" :model="items"
-    :pt="{
-        root: { class: 'surface-ground' },
-        label: ({ props }) => ({
-            class: props.index === items.length - 1 ? 'font-italic' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Breadcrumb :home="home" :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/',
-            },
-            items: [
-                {label: 'Computer'},
-                {label: 'Notebook'},
-                {label: 'Accessories'},
-                {label: 'Backpacks'},
-                {label: 'Item'}
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Breadcrumb :home="home" :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({
-    icon: 'pi pi-home',
-    to: '/',
-});
-
-const items = ref([
-    {label: 'Computer'},
-    {label: 'Notebook'},
-    {label: 'Accessories'},
-    {label: 'Backpacks'},
-    {label: 'Item'}
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/breadcrumb/pt/index.vue b/doc/breadcrumb/pt/index.vue
index a7c2e4e5a..4edc6924f 100644
--- a/doc/breadcrumb/pt/index.vue
+++ b/doc/breadcrumb/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Breadcrumb PT Options',
                     component: DocApiTable,
                     data: getPTOption('Breadcrumb')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/button/pt/PTDoc.vue b/doc/button/pt/PTDoc.vue
deleted file mode 100644
index 248b1a06e..000000000
--- a/doc/button/pt/PTDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check" :pt="{ root: { class: 'bg-indigo-600 border-indigo-600' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Submit" icon="pi pi-check"
-    :pt="{ 
-        root: { class: 'bg-indigo-600 border-indigo-600' } 
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check"
-            :pt="{ 
-                root: { class: 'bg-indigo-600 border-indigo-600' } 
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check"
-            :pt="{ 
-                root: { class: 'bg-indigo-600 border-indigo-600' } 
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/button/pt/index.vue b/doc/button/pt/index.vue
index 3864e7558..f6fe78f23 100644
--- a/doc/button/pt/index.vue
+++ b/doc/button/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Button PT Options',
                     component: DocApiTable,
                     data: getPTOption('Button')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/calendar/pt/PTDoc.vue b/doc/calendar/pt/PTDoc.vue
deleted file mode 100644
index fbd5b564a..000000000
--- a/doc/calendar/pt/PTDoc.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<Calendar
-    v-model="date"
-    showIcon
-    :pt="{
-        input: { class: 'w-16rem' },
-        dropdownButton: {
-            root: { class: 'bg-teal-500 border-teal-500' }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/calendar/pt/index.vue b/doc/calendar/pt/index.vue
index 4e530ebd7..259fef8a9 100644
--- a/doc/calendar/pt/index.vue
+++ b/doc/calendar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Calendar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Calendar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/card/pt/PTDoc.vue b/doc/card/pt/PTDoc.vue
deleted file mode 100644
index 9f2914070..000000000
--- a/doc/card/pt/PTDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-    <template #title> Simple Card </template>
-    <template #content>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-            quas!
-        </p>
-    </template>
-</Card>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/card/pt/index.vue b/doc/card/pt/index.vue
index 52eacd4ae..a0471e14d 100644
--- a/doc/card/pt/index.vue
+++ b/doc/card/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Card PT Options',
                     component: DocApiTable,
                     data: getPTOption('Card')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
deleted file mode 100644
index 982634c22..000000000
--- a/doc/carousel/pt/PTDoc.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            code: {
-                basic: `
-<Carousel
-    :value="products"
-    :numVisible="3"
-    :numScroll="3"
-    :responsiveOptions="responsiveOptions"
-    :pt="{
-        indicatorButton: { class: 'border-round-lg' }
-    }"
->
-    <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-            <div class="mb-3">
-                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                </div>
-            </div>
-        </div>
-    </template>
-</Carousel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1400px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '1199px',
-        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/doc/carousel/pt/index.vue b/doc/carousel/pt/index.vue
index 2e99b0bfc..64b6dd602 100644
--- a/doc/carousel/pt/index.vue
+++ b/doc/carousel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Carousel PT Options',
                     component: DocApiTable,
                     data: getPTOption('Carousel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/cascadeselect/pt/PTDoc.vue b/doc/cascadeselect/pt/PTDoc.vue
deleted file mode 100644
index 0e0f74689..000000000
--- a/doc/cascadeselect/pt/PTDoc.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect
-    v-model="selectedCity"
-    :options="countries"
-    optionLabel="cname"
-    optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']"
-    placeholder="Select a City"
-    :pt="{
-        root: { style: { minWidth: '14rem' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/cascadeselect/pt/index.vue b/doc/cascadeselect/pt/index.vue
index c0632165d..00555854e 100644
--- a/doc/cascadeselect/pt/index.vue
+++ b/doc/cascadeselect/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'CascadeSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('CascadeSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/chart/pt/PTDoc.vue b/doc/chart/pt/PTDoc.vue
deleted file mode 100644
index 95b89fd73..000000000
--- a/doc/chart/pt/PTDoc.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            },
-            code: {
-                basic: `
-<Chart
-    type="pie"
-    :data="chartData"
-    :options="chartOptions"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            }
-        };
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-    },
-    methods: {
-        setChartData() {
-            const documentStyle = getComputedStyle(document.body);
-
-            return {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [540, 325, 702],
-                        backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                        hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-                    }
-                ]
-            };
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-
-onMounted(() => {
-    chartData.value = setChartData();
-});
-
-const chartData = ref();
-const chartOptions = ref({
-    plugins: {
-        legend: {
-            labels: {
-                usePointStyle: true
-            }
-        }
-    }
-});
-
-const setChartData = () => {
-    const documentStyle = getComputedStyle(document.body);
-
-    return {
-        labels: ['A', 'B', 'C'],
-        datasets: [
-            {
-                data: [540, 325, 702],
-                backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-            }
-        ]
-    };
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-    },
-    methods: {
-        setChartData() {
-            const documentStyle = getComputedStyle(document.body);
-
-            return {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [540, 325, 702],
-                        backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                        hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-                    }
-                ]
-            };
-        }
-    }
-};
-</script>
diff --git a/doc/chart/pt/index.vue b/doc/chart/pt/index.vue
index 428ec336f..d0f684a0f 100644
--- a/doc/chart/pt/index.vue
+++ b/doc/chart/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chart PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chart')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/checkbox/pt/PTDoc.vue b/doc/checkbox/pt/PTDoc.vue
deleted file mode 100644
index 60d305eb3..000000000
--- a/doc/checkbox/pt/PTDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox
-    v-model="checked"
-    binary
-    :pt="{
-        input: ({ props, state }) => ({
-            class: state.focused ? 'border-orange-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/checkbox/pt/index.vue b/doc/checkbox/pt/index.vue
index 8f7d18198..308b8c1f0 100644
--- a/doc/checkbox/pt/index.vue
+++ b/doc/checkbox/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Checkbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('Checkbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/chip/pt/PTDoc.vue b/doc/chip/pt/PTDoc.vue
deleted file mode 100644
index a693f00bf..000000000
--- a/doc/chip/pt/PTDoc.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chip
-            label="Amy Elsner"
-            image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-                label: { class: 'text-white' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip
-    label="Amy Elsner"
-    image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-    :pt="{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-        label: { class: 'text-white' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Chip
-        label="Amy Elsner"
-        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-            label: { class: 'text-white' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Chip
-        label="Amy Elsner"
-        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-            label: { class: 'text-white' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chip/pt/index.vue b/doc/chip/pt/index.vue
index 4655cf448..922646382 100644
--- a/doc/chip/pt/index.vue
+++ b/doc/chip/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chip PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chip')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/chips/pt/PTDoc.vue b/doc/chips/pt/PTDoc.vue
deleted file mode 100644
index d7820a737..000000000
--- a/doc/chips/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Chips
-    v-model="value"
-    :pt="{
-        root: { class: 'flex' },
-        container: { class: 'flex-1' },
-        token: { class: 'bg-primary' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chips/pt/index.vue b/doc/chips/pt/index.vue
index dd4b70c04..30757ad87 100644
--- a/doc/chips/pt/index.vue
+++ b/doc/chips/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chips PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chips')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/colorpicker/pt/PTDoc.vue b/doc/colorpicker/pt/PTDoc.vue
deleted file mode 100644
index c452931a5..000000000
--- a/doc/colorpicker/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null,
-            code: {
-                basic: `
-<ColorPicker
-    v-model="color"
-    inline
-    :pt="{
-        colorHandler: { class: 'w-1rem h-1rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/colorpicker/pt/index.vue b/doc/colorpicker/pt/index.vue
index 4099b6f99..32d4562a3 100644
--- a/doc/colorpicker/pt/index.vue
+++ b/doc/colorpicker/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ColorPicker PT Options',
                     component: DocApiTable,
                     data: getPTOption('ColorPicker')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/confirmdialog/pt/PTDoc.vue b/doc/confirmdialog/pt/PTDoc.vue
deleted file mode 100644
index 33d312a98..000000000
--- a/doc/confirmdialog/pt/PTDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <ConfirmDialog group="pt" :pt="{ headerTitle: { class: 'text-primary' } }" />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog
-    group="pt"
-    :pt="{
-        headerTitle: { class: 'text-primary' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <ConfirmDialog
-        group="pt"
-        :pt="{
-            headerTitle: { class: 'text-primary' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm() {
-            this.$confirm.require({
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <ConfirmDialog
-        group="pt"
-        :pt="{
-            headerTitle: { class: 'text-primary' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirm() {
-            this.$confirm.require({
-                group: 'pt',
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/doc/confirmdialog/pt/index.vue b/doc/confirmdialog/pt/index.vue
index 82ff6819e..848795e1f 100644
--- a/doc/confirmdialog/pt/index.vue
+++ b/doc/confirmdialog/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ConfirmDialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('ConfirmDialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/confirmpopup/pt/PTDoc.vue b/doc/confirmpopup/pt/PTDoc.vue
deleted file mode 100644
index c5c4ee8b8..000000000
--- a/doc/confirmpopup/pt/PTDoc.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmPopup
-    group="pt"
-    :pt="{
-        root: { class: 'surface-100' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <Toast />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm(event) {
-            this.$confirm.require({
-                group: 'pt',
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <Toast />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm = (event) => {
-    confirm.require({
-        group: 'pt',
-        target: event.currentTarget,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirm(event) {
-            this.$confirm.require({
-                group: 'pt',
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/doc/confirmpopup/pt/index.vue b/doc/confirmpopup/pt/index.vue
index 01b93443d..bfcc4019e 100644
--- a/doc/confirmpopup/pt/index.vue
+++ b/doc/confirmpopup/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ConfirmPopup PT Options',
                     component: DocApiTable,
                     data: getPTOption('ConfirmPopup')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
deleted file mode 100644
index 541b724eb..000000000
--- a/doc/contextmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu
-    ref="menu"
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const menu = ref();
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-
-const onImageRightClick = (event) => {
-    menu.value.show(event);
-};
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-</script>
diff --git a/doc/contextmenu/pt/index.vue b/doc/contextmenu/pt/index.vue
index aa66309fa..6009a524f 100644
--- a/doc/contextmenu/pt/index.vue
+++ b/doc/contextmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ContextMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('ContextMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
deleted file mode 100644
index 0b65c687c..000000000
--- a/doc/datatable/pt/PTDoc.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="products"
-                sortMode="multiple"
-                :pt="{
-                    table: { style: { minWidth: '50rem' } }
-                }"
-            >
-                <Column
-                    field="code"
-                    header="Code"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="name"
-                    header="Name"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="category"
-                    header="Category"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="quantity"
-                    header="Quantity"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable
-    :value="products"
-    sortMode="multiple"
-    :pt="{
-        table: { style: { minWidth: '50rem' } }
-    }"
->
-    <Column
-        field="code"
-        header="Code"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="category"
-        header="Category"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="quantity"
-        header="Quantity"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="products"
-            sortMode="multiple"
-            :pt="{
-                table: { style: { minWidth: '50rem' } }
-            }"
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="products"
-            sortMode="multiple"
-            :pt="{
-                table: { style: { minWidth: '50rem' } }
-            }"
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>
diff --git a/doc/datatable/pt/index.vue b/doc/datatable/pt/index.vue
index 300940999..c2de789f3 100644
--- a/doc/datatable/pt/index.vue
+++ b/doc/datatable/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -46,11 +45,6 @@ export default {
                     label: 'Row PT Options',
                     component: DocApiTable,
                     data: getPTOption('Row')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
deleted file mode 100644
index 839155556..000000000
--- a/doc/dataview/pt/PTDoc.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid',
-            code: {
-                basic: `
-<DataView
-    :value="products"
-    :layout="layout"
-    :pt="{
-        grid: { class: 'surface-ground' }
-    }"
->
-    <template #header>
-        <div class="flex justify-content-end">
-            <DataViewLayoutOptions
-                v-model="layout"
-                :pt="{
-                    listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                    gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                }"
-            />
-        </div>
-    </template>
-
-    <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                            <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                            <div class="flex align-items-center gap-3">
-                                <span class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </span>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                        </div>
-                        <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template #grid="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div class="p-4 border-1 surface-border surface-card border-round">
-                    <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag"></i>
-                            <span class="font-semibold">{{ item.category }}</span>
-                        </div>
-                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                    </div>
-                    <div class="flex flex-column align-items-center gap-3 py-5">
-                        <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <div class="text-2xl font-bold">{{ item.name }}</div>
-                        <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                    </div>
-                    <div class="flex align-items-center justify-content-between">
-                        <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                        <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid'
-        }
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProducts().then((data) => (products.value = data.slice(0, 6)));
-});
-
-const products = ref();
-const layout = ref('grid');
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-}
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/doc/dataview/pt/index.vue b/doc/dataview/pt/index.vue
index 2ec35e6c3..757805ee9 100644
--- a/doc/dataview/pt/index.vue
+++ b/doc/dataview/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'DataViewLayoutOptions PT Options',
                     component: DocApiTable,
                     data: getPTOption('DataViewLayoutOptions')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
deleted file mode 100644
index 70daa006b..000000000
--- a/doc/dialog/pt/PTDoc.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Dialog
-    v-model:visible="visible"
-    modal
-    header="Header"
-    :pt="{
-        root: { class: 'w-12 sm:w-9 md:w-6' }
-    }"
->
-    <p>Lorem ipsum </p>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dialog/pt/index.vue b/doc/dialog/pt/index.vue
index bc6133c8d..c183b1ff3 100644
--- a/doc/dialog/pt/index.vue
+++ b/doc/dialog/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/divider/pt/PTDoc.vue b/doc/divider/pt/PTDoc.vue
deleted file mode 100644
index a8afec9a0..000000000
--- a/doc/divider/pt/PTDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
-
-<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-    <b>Center</b>
-</Divider>
-
-<p>
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>
-`,
-                options: `
-<template>
-    <div class="card">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/divider/pt/index.vue b/doc/divider/pt/index.vue
index d003d9bfb..4e74657ea 100644
--- a/doc/divider/pt/index.vue
+++ b/doc/divider/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Divider PT Options',
                     component: DocApiTable,
                     data: getPTOption('Divider')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dock/pt/PTDoc.vue b/doc/dock/pt/PTDoc.vue
deleted file mode 100644
index 5c07ede6e..000000000
--- a/doc/dock/pt/PTDoc.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card dock-demo">
-        <div class="dock-window">
-            <Dock :model="items" position="bottom" :pt="{ container: { style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' } } }">
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-                }
-            ],
-            code: {
-                basic: `
-<Dock :model="items" position="bottom"
-    :pt="{ 
-        container: {
-            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-        }
-    }"
->
-    <template #icon="{ item }">
-        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-    </template>
-</Dock>
-`,
-                options: `
-<template>
-    <div class="card dock-demo">
-        <div class="dock-window">
-            <Dock :model="items" position="bottom"
-                :pt="{ 
-                    container: {
-                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                    }
-                }"
-            >
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-</style>
-`,
-                composition: `
-<template>
-    <div class="card dock-demo">
-        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
-            <Dock :model="items" position="bottom"
-                :pt="{ 
-                    container: {
-                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                    }
-                }"
-            >
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Finder',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-    },
-    {
-        label: 'App Store',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-    },
-    {
-        label: 'Photos',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-    },
-    {
-        label: 'Trash',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-    }
-]);
-
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-
-.dock-demo .p-menubar {
-    padding: 0;
-    border-radius: 0;
-}
-</style>
diff --git a/doc/dock/pt/index.vue b/doc/dock/pt/index.vue
index c9b2caaaf..e096c2d94 100644
--- a/doc/dock/pt/index.vue
+++ b/doc/dock/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dock PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dock')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dropdown/pt/PTDoc.vue b/doc/dropdown/pt/PTDoc.vue
deleted file mode 100644
index dc7811089..000000000
--- a/doc/dropdown/pt/PTDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Dropdown
-    v-model="selectedCity"
-    :options="cities"
-    optionLabel="name"
-    placeholder="Select a City"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dropdown/pt/index.vue b/doc/dropdown/pt/index.vue
index 14965d722..ff5cf3e27 100644
--- a/doc/dropdown/pt/index.vue
+++ b/doc/dropdown/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dropdown PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dropdown')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
deleted file mode 100644
index f8174c51f..000000000
--- a/doc/dynamicdialog/pt/PTDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DynamicDialog
-    :pt="{
-        root: { class: 'w-12 sm:w-9 md:w-6' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <DynamicDialog
-        :pt="{
-            root: { class: 'w-12 sm:w-9 md:w-6' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <DynamicDialog
-        :pt="{
-            root: { class: 'w-12 sm:w-9 md:w-6' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dynamicdialog/pt/index.vue b/doc/dynamicdialog/pt/index.vue
index 45417ede2..c992d9484 100644
--- a/doc/dynamicdialog/pt/index.vue
+++ b/doc/dynamicdialog/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/editor/pt/PTDoc.vue b/doc/editor/pt/PTDoc.vue
deleted file mode 100644
index 1ec8f90f2..000000000
--- a/doc/editor/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Editor
-    v-model="value"
-    :pt="{
-        content: { style: { height: '320px' } },
-        toolbar: { class: 'surface-ground' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/editor/pt/index.vue b/doc/editor/pt/index.vue
index d5e5b01c0..70da55c63 100644
--- a/doc/editor/pt/index.vue
+++ b/doc/editor/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Editor PT Options',
                     component: DocApiTable,
                     data: getPTOption('Editor')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/fieldset/pt/PTDoc.vue b/doc/fieldset/pt/PTDoc.vue
deleted file mode 100644
index 49728a2f6..000000000
--- a/doc/fieldset/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true" :pt="{ legend: { class: 'bg-primary' }, legendTitle: { class: 'text-white' }, togglerIcon: { class: 'text-white' } }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Fieldset
-    legend="Header"
-    :toggleable="true"
-    :pt="{
-        legend: { class: 'bg-primary' },
-        legendTitle: { class: 'text-white' },
-        togglerIcon: { class: 'text-white' }
-    }">
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Fieldset>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fieldset
-            legend="Header"
-            :toggleable="true"
-            :pt="{
-                legend: { class: 'bg-primary' },
-                legendTitle: { class: 'text-white' },
-                togglerIcon: { class: 'text-white' }
-            }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset
-            legend="Header"
-            :toggleable="true"
-            :pt="{
-                legend: { class: 'bg-primary' },
-                legendTitle: { class: 'text-white' },
-                togglerIcon: { class: 'text-white' }
-            }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Fieldset>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/fieldset/pt/index.vue b/doc/fieldset/pt/index.vue
index e88e54fd6..e00ceccf2 100644
--- a/doc/fieldset/pt/index.vue
+++ b/doc/fieldset/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Fieldset PT Options',
                     component: DocApiTable,
                     data: getPTOption('Fieldset')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/fileupload/pt/PTDoc.vue b/doc/fileupload/pt/PTDoc.vue
deleted file mode 100644
index c8c78dfab..000000000
--- a/doc/fileupload/pt/PTDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<FileUpload
-    name="demo[]"
-    url="./upload.php"
-    @upload="onAdvancedUpload($event)"
-    :multiple="true"
-    accept="image/*"
-    :maxFileSize="1000000"
-    :pt="{
-        content: { class: 'surface-ground' }
-    }"
->
-    <template #empty>
-        <p>Drag and drop files to here to upload.</p>
-    </template>
-</FileUpload>
-`,
-                options: `
-<template>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        onAdvancedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const onAdvancedUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onAdvancedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/doc/fileupload/pt/index.vue b/doc/fileupload/pt/index.vue
index 6468dd10f..dd148005a 100644
--- a/doc/fileupload/pt/index.vue
+++ b/doc/fileupload/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'FileUpload PT Options',
                     component: DocApiTable,
                     data: getPTOption('FileUpload')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/galleria/pt/PTDoc.vue b/doc/galleria/pt/PTDoc.vue
deleted file mode 100644
index d927f166b..000000000
--- a/doc/galleria/pt/PTDoc.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Galleria
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="5"
-            :pt="{
-                root: { style: { maxWidth: '640px' } }
-            }"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-    <DocSectionCode :code="code" :service="['PhotoService']" />
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
-            code: {
-                basic: `
-<Galleria
-    :value="images"
-    :responsiveOptions="responsiveOptions"
-    :numVisible="5"
-    :pt="{
-        root: { style: { maxWidth: '640px' } }
-    }"
->
-    <template #item="slotProps">
-        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-    </template>
-    <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-    </template>
-</Galleria>
-`,
-                options: `
-<template>
-    <div class="card md:flex md:justify-content-center">
-        <Galleria
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="5"
-            :pt="{
-                root: { style: { maxWidth: '640px' } }
-            }"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script>
-import { PhotoService } from '@/service/PhotoService';
-
-export default {
-    data() {
-        return {
-            images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1300px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card md:flex md:justify-content-center">
-        <Galleria
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="5"
-            :pt="{
-                root: { style: { maxWidth: '640px' } }
-            }"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1300px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>
-`,
-                data: `
-/* PhotoService */
-{
-    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
-    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
-    alt: 'Description for Image 1',
-    title: 'Title 1'
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-</script>
diff --git a/doc/galleria/pt/index.vue b/doc/galleria/pt/index.vue
index 489a2f1af..c9ceb35fb 100644
--- a/doc/galleria/pt/index.vue
+++ b/doc/galleria/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Galleria PT Options',
                     component: DocApiTable,
                     data: getPTOption('Galleria')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/image/pt/PTDoc.vue b/doc/image/pt/PTDoc.vue
deleted file mode 100644
index 0ed025ebd..000000000
--- a/doc/image/pt/PTDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Image
-            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-            alt="Image"
-            width="250"
-            preview
-            :pt="{
-                image: { class: 'w-15rem' }
-            }"
-        />
-    </div>
-
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Image
-    src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-    alt="Image"
-    width="250"
-    preview
-    :pt="{
-        image: { class: 'w-15rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Image
-            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-            alt="Image"
-            width="250"
-            preview
-            :pt="{
-                image: { class: 'w-15rem' }
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Image
-            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-            alt="Image"
-            width="250"
-            preview
-            :pt="{
-                image: { class: 'w-15rem' }
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/image/pt/index.vue b/doc/image/pt/index.vue
index 29cac5db5..da6ddf4f1 100644
--- a/doc/image/pt/index.vue
+++ b/doc/image/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Image PT Options',
                     component: DocApiTable,
                     data: getPTOption('Image')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inlinemessage/pt/PTDoc.vue b/doc/inlinemessage/pt/PTDoc.vue
deleted file mode 100644
index 6ae5a8c5c..000000000
--- a/doc/inlinemessage/pt/PTDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InlineMessage
-            :pt="{
-                root: { class: 'bg-yellow-100' },
-                icon: { class: 'hidden' }
-            }"
-        >
-            Username is required
-        </InlineMessage>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InlineMessage
-    :pt="{
-        root: { class: 'bg-yellow-100' },
-        icon: { class: 'hidden' }
-    }"
->
-    Username is required
-</InlineMessage>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InlineMessage
-            :pt="{
-                root: { class: 'bg-indigo-100' },
-                icon: { class: 'hidden' }
-            }"
-        >
-            Username is required
-        </InlineMessage>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InlineMessage
-            :pt="{
-                root: { class: 'bg-indigo-100' },
-                icon: { class: 'hidden' }
-            }"
-        >
-            Username is required
-        </InlineMessage>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inlinemessage/pt/index.vue b/doc/inlinemessage/pt/index.vue
index 108635cb1..3c6edfe4f 100644
--- a/doc/inlinemessage/pt/index.vue
+++ b/doc/inlinemessage/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InlineMessage PT Options',
                     component: DocApiTable,
                     data: getPTOption('InlineMessage')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inplace/pt/PTDoc.vue b/doc/inplace/pt/PTDoc.vue
deleted file mode 100644
index e5aa268b7..000000000
--- a/doc/inplace/pt/PTDoc.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Inplace
-            :pt="{
-                display: { class: 'bg-primary' }
-            }"
-        >
-            <template #display> View Content </template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </template>
-        </Inplace>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Inplace
-    :pt="{
-        display: { class: 'bg-primary' }
-    }"
->
-    <template #display> View Content </template>
-    <template #content>
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </template>
-</Inplace>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Inplace
-            :pt="{
-                display: { class: 'bg-primary' }
-            }"
-        >
-            <template #display> View Content </template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script>
-
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Inplace
-            :pt="{
-                display: { class: 'bg-primary' }
-            }"
-        >
-            <template #display> View Content </template>
-            <template #content>
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </template>
-        </Inplace>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inplace/pt/index.vue b/doc/inplace/pt/index.vue
index 9430ec46d..d14b97ea9 100644
--- a/doc/inplace/pt/index.vue
+++ b/doc/inplace/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Inplace PT Options',
                     component: DocApiTable,
                     data: getPTOption('Inplace')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputmask/pt/PTDoc.vue b/doc/inputmask/pt/PTDoc.vue
deleted file mode 100644
index b7a928a68..000000000
--- a/doc/inputmask/pt/PTDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputMask
-            id="basic"
-            v-model="value"
-            mask="99-999999"
-            placeholder="99-999999"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<InputMask
-    id="basic"
-    v-model="value"
-    mask="99-999999"
-    placeholder="99-999999"
-    :pt="{
-        root: { class: 'border-teal-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputMask
-            id="basic"
-            v-model="value"
-            mask="99-999999"
-            placeholder="99-999999"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputMask
-            id="basic"
-            v-model="value"
-            mask="99-999999"
-            placeholder="99-999999"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputmask/pt/index.vue b/doc/inputmask/pt/index.vue
index 97e853d2a..cd115f883 100644
--- a/doc/inputmask/pt/index.vue
+++ b/doc/inputmask/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputMask PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputMask')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputnumber/pt/PTDoc.vue b/doc/inputnumber/pt/PTDoc.vue
deleted file mode 100644
index b96d0fb99..000000000
--- a/doc/inputnumber/pt/PTDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="horizontal"
-            :step="0.25"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-            mode="currency"
-            currency="EUR"
-            :pt="{
-                decrementButton: {
-                    root: {
-                        class: 'bg-orange-500 border-orange-500'
-                    }
-                },
-                incrementButton: {
-                    root: {
-                        class: 'bg-teal-500 border-teal-500'
-                    }
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 20,
-            code: {
-                basic: `
-<InputNumber
-    v-model="value"
-    showButtons
-    buttonLayout="horizontal"
-    :step="0.25"
-    incrementButtonIcon="pi pi-plus"
-    decrementButtonIcon="pi pi-minus"
-    mode="currency"
-    currency="EUR"
-    :pt="{
-        decrementButton: {
-            root: {
-                class: 'bg-orange-500 border-orange-500'
-            }
-        },
-        incrementButton: {
-            root: {
-                class: 'bg-teal-500 border-teal-500'
-            }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="horizontal"
-            :step="0.25"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-            mode="currency"
-            currency="EUR"
-            :pt="{
-                decrementButton: {
-                    root: {
-                        class: 'bg-orange-500 border-orange-500'
-                    }
-                },
-                incrementButton: {
-                    root: {
-                        class: 'bg-teal-500 border-teal-500'
-                    }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 20
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="horizontal"
-            :step="0.25"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-            mode="currency"
-            currency="EUR"
-            :pt="{
-                decrementButton: {
-                    root: {
-                        class: 'bg-orange-500 border-orange-500'
-                    }
-                },
-                incrementButton: {
-                    root: {
-                        class: 'bg-teal-500 border-teal-500'
-                    }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(20);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputnumber/pt/index.vue b/doc/inputnumber/pt/index.vue
index aa8973fed..91111efe1 100644
--- a/doc/inputnumber/pt/index.vue
+++ b/doc/inputnumber/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputNumber PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputNumber')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputswitch/pt/PTDoc.vue b/doc/inputswitch/pt/PTDoc.vue
deleted file mode 100644
index 24a84809e..000000000
--- a/doc/inputswitch/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputSwitch
-            v-model="checked"
-            :pt="{
-                slider: ({ props }) => ({
-                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<InputSwitch
-    v-model="checked"
-    :pt="{
-        slider: ({ props }) => ({
-            class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputSwitch
-            v-model="checked"
-            :pt="{
-                slider: ({ props }) => ({
-                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputSwitch
-            v-model="checked"
-            :pt="{
-                slider: ({ props }) => ({
-                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputswitch/pt/index.vue b/doc/inputswitch/pt/index.vue
index 65d839ad0..584d9a293 100644
--- a/doc/inputswitch/pt/index.vue
+++ b/doc/inputswitch/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputSwitch PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputSwitch')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputtext/pt/PTDoc.vue b/doc/inputtext/pt/PTDoc.vue
deleted file mode 100644
index 81fac3215..000000000
--- a/doc/inputtext/pt/PTDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputText
-            v-model="value"
-            type="text"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputText
-    v-model="value"
-    type="text"
-    :pt="{
-        root: { class: 'border-teal-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputText
-            v-model="value"
-            type="text"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputText
-            v-model="value"
-            type="text"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputtext/pt/index.vue b/doc/inputtext/pt/index.vue
index e9b6db7c0..c800812a4 100644
--- a/doc/inputtext/pt/index.vue
+++ b/doc/inputtext/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputText PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputText')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/knob/pt/PTDoc.vue b/doc/knob/pt/PTDoc.vue
deleted file mode 100644
index ee22b0874..000000000
--- a/doc/knob/pt/PTDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Knob
-            v-model="value"
-            :pt="{
-                value: { style: { stroke: 'var(--cyan-500)' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0,
-            code: {
-                basic: `
-<Knob
-    v-model="value"
-    :pt="{
-        value: { style: { stroke: 'var(--cyan-500)' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Knob
-            v-model="value"
-            :pt="{
-                value: { style: { stroke: 'var(--cyan-500)' } }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Knob
-            v-model="value"
-            :pt="{
-                value: { style: { stroke: 'var(--cyan-500)' } }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/knob/pt/index.vue b/doc/knob/pt/index.vue
index 50477735f..e21667a61 100644
--- a/doc/knob/pt/index.vue
+++ b/doc/knob/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Knob PT Options',
                     component: DocApiTable,
                     data: getPTOption('Knob')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/listbox/pt/PTDoc.vue b/doc/listbox/pt/PTDoc.vue
deleted file mode 100644
index cc96b312a..000000000
--- a/doc/listbox/pt/PTDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Listbox
-    v-model="selectedCity"
-    :options="cities"
-    optionLabel="name"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Listbox
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Listbox
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/listbox/pt/index.vue b/doc/listbox/pt/index.vue
index a345882da..de1beb154 100644
--- a/doc/listbox/pt/index.vue
+++ b/doc/listbox/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Listbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('Listbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
deleted file mode 100644
index 4b4275c25..000000000
--- a/doc/megamenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,425 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <MegaMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<MegaMenu
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <MegaMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MegaMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Videos',
-        icon: 'pi pi-fw pi-video',
-        items: [
-            [
-                {
-                    label: 'Video 1',
-                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Video 3',
-                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                },
-                {
-                    label: 'Video 4',
-                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-users',
-        items: [
-            [
-                {
-                    label: 'User 1',
-                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                },
-                {
-                    label: 'User 2',
-                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 3',
-                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                },
-                {
-                    label: 'User 4',
-                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 5',
-                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                },
-                {
-                    label: 'User 6',
-                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            [
-                {
-                    label: 'Event 1',
-                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Event 3',
-                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Technology 4',
-                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                }
-            ]
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/megamenu/pt/index.vue b/doc/megamenu/pt/index.vue
index 9ce90cb18..895c40638 100644
--- a/doc/megamenu/pt/index.vue
+++ b/doc/megamenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'MegaMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('MegaMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
deleted file mode 100644
index ad4db098a..000000000
--- a/doc/menu/pt/PTDoc.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Menu
-            :model="items"
-            :pt="{
-                submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, context }) => ({
-                    class: context.focused ? 'bg-primary-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Options',
-                    items: [
-                        {
-                            label: 'Update',
-                            icon: 'pi pi-refresh',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times',
-                            command: () => {
-                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menu
-    :model="items"
-    :pt="{
-        submenuHeader: { class: 'text-surface-900' },
-        action: ({ props, state, context }) => ({
-            class: context.focused ? 'bg-primary-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Menu
-            :model="items"
-            :pt="{
-                submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, context }) => ({
-                    class: context.focused ? 'bg-primary-400' : undefined
-                })
-            }"
-        />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Options',
-                    items: [
-                        {
-                            label: 'Update',
-                            icon: 'pi pi-refresh',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                            }
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-times',
-                            command: () => {
-                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Menu
-            :model="items"
-            :pt="{
-                submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, context }) => ({
-                    class: context.focused ? 'bg-primary-400' : undefined
-                })
-            }"
-        />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-const items = ref([
-    {
-        label: 'Options',
-        items: [
-            {
-                label: 'Update',
-                icon: 'pi pi-refresh',
-                command: () => {
-                    toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                }
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-times',
-                command: () => {
-                    toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                }
-            }
-        ]
-    },
-    {
-        label: 'Navigate',
-        items: [
-            {
-                label: 'Vue Website',
-                icon: 'pi pi-external-link',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Router',
-                icon: 'pi pi-upload',
-                to: '/fileupload'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/menu/pt/index.vue b/doc/menu/pt/index.vue
index 9c1bf63c9..8fafa419b 100644
--- a/doc/menu/pt/index.vue
+++ b/doc/menu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Menu PT Options',
                     component: DocApiTable,
                     data: getPTOption('Menu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
deleted file mode 100644
index 54aaf7690..000000000
--- a/doc/menubar/pt/PTDoc.vue
+++ /dev/null
@@ -1,446 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card relative z-2">
-        <Menubar
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<Menubar
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card relative z-2">
-        <Menubar
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card relative z-2">
-        <Menubar
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/menubar/pt/index.vue b/doc/menubar/pt/index.vue
index 7bd315444..6176280b6 100644
--- a/doc/menubar/pt/index.vue
+++ b/doc/menubar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Menubar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Menubar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/message/pt/PTDoc.vue b/doc/message/pt/PTDoc.vue
deleted file mode 100644
index ff1cc39b9..000000000
--- a/doc/message/pt/PTDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Message
-            :pt="{
-                root: { class: 'bg-yellow-100' }
-            }"
-        >
-            Message Content
-        </Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message
-    :pt="{
-        root: { class: 'bg-yellow-100' }
-    }"
->
-    Message Content
-</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message
-            :pt="{
-                root: { class: 'bg-yellow-100' }
-            }"
-        >
-            Message Content
-        </Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message
-            :pt="{
-                root: { class: 'bg-yellow-100' }
-            }"
-        >
-            Message Content
-        </Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/message/pt/index.vue b/doc/message/pt/index.vue
index ed31eb743..a22ff9ecc 100644
--- a/doc/message/pt/index.vue
+++ b/doc/message/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Message PT Options',
                     component: DocApiTable,
                     data: getPTOption('Message')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/multiselect/pt/PTDoc.vue b/doc/multiselect/pt/PTDoc.vue
deleted file mode 100644
index 5653495df..000000000
--- a/doc/multiselect/pt/PTDoc.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect
-            v-model="selectedCities"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select Cities"
-            :maxSelectedLabels="3"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<MultiSelect
-    v-model="selectedCities"
-    :options="cities"
-    optionLabel="name"
-    placeholder="Select Cities"
-    :maxSelectedLabels="3"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <MultiSelect
-            v-model="selectedCities"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select Cities"
-            :maxSelectedLabels="3"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCities: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <MultiSelect
-            v-model="selectedCities"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select Cities"
-            :maxSelectedLabels="3"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/multiselect/pt/index.vue b/doc/multiselect/pt/index.vue
index 2ddac9271..c4f6bd142 100644
--- a/doc/multiselect/pt/index.vue
+++ b/doc/multiselect/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'MultiSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('MultiSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
deleted file mode 100644
index 48bbd2dd3..000000000
--- a/doc/orderlist/pt/PTDoc.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                list: { style: { height: 'auto' } },
-                moveUpButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">${{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<OrderList
-    v-model="products"
-    dataKey="id"
-    :pt="{
-        list: { style: { height: 'auto' } },
-        moveUpButton: {
-            root: { class: 'bg-teal-400 border-teal-400' }
-        }
-    }"
->
-    <template #header> List of Products </template>
-    <template #item="slotProps">
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ slotProps.item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ slotProps.item.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-        </div>
-    </template>
-</OrderList>
-`,
-                options: `
-<template>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                list: { style: { height: 'auto' } },
-                moveUpButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService'
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                list: { style: { height: 'auto' } },
-                moveUpButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (this.products = data));
-});
-<\/script>
-`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
-    }
-};
-</script>
diff --git a/doc/orderlist/pt/index.vue b/doc/orderlist/pt/index.vue
index 57e52ebfe..a657128bf 100644
--- a/doc/orderlist/pt/index.vue
+++ b/doc/orderlist/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'OrderList PT Options',
                     component: DocApiTable,
                     data: getPTOption('OrderList')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/organizationchart/pt/PTDoc.vue b/doc/organizationchart/pt/PTDoc.vue
deleted file mode 100644
index 2aae3df7b..000000000
--- a/doc/organizationchart/pt/PTDoc.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card overflow-x-auto">
-        <OrganizationChart
-            :value="data"
-            collapsible
-            :pt="{
-                node: ({ context }) => ({
-                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-                })
-            }"
-        >
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                label: 'Argentina',
-                children: [
-                    {
-                        label: 'Argentina',
-                        children: [
-                            {
-                                label: 'Argentina'
-                            },
-                            {
-                                label: 'Croatia'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'France',
-                        children: [
-                            {
-                                label: 'France'
-                            },
-                            {
-                                label: 'Morocco'
-                            }
-                        ]
-                    }
-                ]
-            },
-            code: {
-                basic: `
-<OrganizationChart
-    :value="data"
-    collapsible
-    :pt="{
-        node: ({ context }) => ({
-            class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-        })
-    }"
->
-    <template #default="slotProps">
-        <span>{{ slotProps.node.label }}</span>
-    </template>
-</OrganizationChart>
-`,
-                options: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart
-            :value="data"
-            collapsible
-            :pt="{
-                node: ({ context }) => ({
-                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-                })
-            }"
-        >
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            data: {
-                label: 'Argentina',
-                children: [
-                    {
-                        label: 'Argentina',
-                        children: [
-                            {
-                                label: 'Argentina'
-                            },
-                            {
-                                label: 'Croatia'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'France',
-                        children: [
-                            {
-                                label: 'France'
-                            },
-                            {
-                                label: 'Morocco'
-                            }
-                        ]
-                    }
-                ]
-            }
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart
-            :value="data"
-            collapsible
-            :pt="{
-                node: ({ context }) => ({
-                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-                })
-            }"
-        >
-            <template #default="slotProps">
-                <span>{{ slotProps.node.label }}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const data = ref({
-    label: 'Argentina',
-    children: [
-        {
-            label: 'Argentina',
-            children: [
-                {
-                    label: 'Argentina'
-                },
-                {
-                    label: 'Croatia'
-                }
-            ]
-        },
-        {
-            label: 'France',
-            children: [
-                {
-                    label: 'France'
-                },
-                {
-                    label: 'Morocco'
-                }
-            ]
-        }
-    ]
-});
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/organizationchart/pt/index.vue b/doc/organizationchart/pt/index.vue
index 97d76909c..93162e6b3 100644
--- a/doc/organizationchart/pt/index.vue
+++ b/doc/organizationchart/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'OrganizationChart PT Options',
                     component: DocApiTable,
                     data: getPTOption('OrganizationChart')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
deleted file mode 100644
index bb0963f6a..000000000
--- a/doc/overlaypanel/pt/PTDoc.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op" :pt="{ root: { class: 'surface-ground' } }">
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-<OverlayPanel ref="op"
-    :pt="{
-        root: { class: 'surface-ground' }
-    }"
->
-    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-</OverlayPanel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op"
-            :pt="{
-                root: { class: 'surface-ground' }
-            }"
-        >
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op"
-            :pt="{
-                root: { class: 'surface-ground' }
-            }"
-        >
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const op = ref();
-const toggle = (event) => {
-    op.value.toggle(event);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        }
-    }
-};
-</script>
diff --git a/doc/overlaypanel/pt/index.vue b/doc/overlaypanel/pt/index.vue
index da9a6389d..ac2aedfa7 100644
--- a/doc/overlaypanel/pt/index.vue
+++ b/doc/overlaypanel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'OverlayPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('OverlayPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/paginator/pt/PTDoc.vue b/doc/paginator/pt/PTDoc.vue
deleted file mode 100644
index 1323885a0..000000000
--- a/doc/paginator/pt/PTDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Paginator
-            :rows="10"
-            :totalRecords="120"
-            :pt="{
-                pageButton: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Paginator
-    :rows="10"
-    :totalRecords="120"
-    :pt="{
-        pageButton: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator
-            :rows="10"
-            :totalRecords="120"
-            :pt="{
-                pageButton: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator
-            :rows="10"
-            :totalRecords="120"
-            :pt="{
-                pageButton: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/paginator/pt/index.vue b/doc/paginator/pt/index.vue
index 290fb27fb..284d9d3ec 100644
--- a/doc/paginator/pt/index.vue
+++ b/doc/paginator/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Paginator PT Options',
                     component: DocApiTable,
                     data: getPTOption('Paginator')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
deleted file mode 100644
index 22bf093f7..000000000
--- a/doc/panel/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card">
-        <Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" toggleable>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Panel header="Header" toggleable
-    :pt="{
-        header: { class: 'bg-primary' },
-        title: { class: 'text-white' },
-        toggler: { class: 'text-white hover:bg-primary-reverse' }
-    }">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</Panel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Panel header="Header" toggleable
-            :pt="{
-                header: { class: 'bg-primary' },
-                title: { class: 'text-white' },
-                toggler: { class: 'text-white hover:bg-primary-reverse' }
-            }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Panel header="Header" toggleable
-            :pt="{
-                header: { class: 'bg-primary' },
-                title: { class: 'text-white' },
-                toggler: { class: 'text-white hover:bg-primary-reverse' }
-            }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </Panel>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/panel/pt/index.vue b/doc/panel/pt/index.vue
index 58366e149..81b853aaa 100644
--- a/doc/panel/pt/index.vue
+++ b/doc/panel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Panel PT Options',
                     component: DocApiTable,
                     data: getPTOption('Panel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/panelmenu/pt/PTDoc.vue b/doc/panelmenu/pt/PTDoc.vue
deleted file mode 100644
index 6a427b92c..000000000
--- a/doc/panelmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu
-            :model="items"
-            :pt="{
-                root: { class: 'w-full md:w-25rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu
-    :model="items"
-    :pt="{
-        root: { class: 'w-full md:w-25rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <PanelMenu
-            :model="items"
-            :pt="{
-                root: { class: 'w-full md:w-25rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <PanelMenu
-            :model="items"
-            :pt="{
-                root: { class: 'w-full md:w-25rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/panelmenu/pt/index.vue b/doc/panelmenu/pt/index.vue
index f89a29949..381ff4ed7 100644
--- a/doc/panelmenu/pt/index.vue
+++ b/doc/panelmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'PanelMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('PanelMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/password/pt/PTDoc.vue b/doc/password/pt/PTDoc.vue
deleted file mode 100644
index e2977749c..000000000
--- a/doc/password/pt/PTDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Password
-            v-model="value"
-            :pt="{
-                info: { class: 'font-bold' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password
-    v-model="value"
-    :pt="{
-        info: { class: 'font-bold' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Password
-            v-model="value"
-            :pt="{
-                info: { class: 'font-bold' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Password
-            v-model="value"
-            :pt="{
-                info: { class: 'font-bold' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/password/pt/index.vue b/doc/password/pt/index.vue
index 6bc38dd94..10724ccfe 100644
--- a/doc/password/pt/index.vue
+++ b/doc/password/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Password PT Options',
                     component: DocApiTable,
                     data: getPTOption('Password')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
deleted file mode 100644
index 66e493d1a..000000000
--- a/doc/picklist/pt/PTDoc.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <PickList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                sourceList: { style: { height: '342px' } },
-                targetList: { style: { height: '342px' } },
-                moveAllToTargetButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                },
-                moveAllToSourceButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">${{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<PickList
-    v-model="products"
-    dataKey="id"
-    :pt="{
-        sourceList: { style: { height: '342px' } },
-        targetList: { style: { height: '342px' } },
-        moveAllToTargetButton: {
-            root: { class: 'bg-teal-400 border-teal-400' }
-        },
-        moveAllToSourceButton: {
-            root: { class: 'bg-teal-400 border-teal-400' }
-        }
-    }"
->
-    <template #sourceheader> Available </template>
-    <template #targetheader> Selected </template>
-    <template #item="slotProps">
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ slotProps.item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ slotProps.item.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-        </div>
-    </template>
-</PickList>
-`,
-                options: `
-<template>
-    <div class="card">
-        <PickList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                sourceList: { style: { height: '342px' } },
-                targetList: { style: { height: '342px' } },
-                moveAllToTargetButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                },
-                moveAllToSourceButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService'
-export default {
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <PickList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                sourceList: { style: { height: '342px' } },
-                targetList: { style: { height: '342px' } },
-                moveAllToTargetButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                },
-                moveAllToSourceButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
-});
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: '/bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
-    }
-};
-</script>
diff --git a/doc/picklist/pt/index.vue b/doc/picklist/pt/index.vue
index 7a048e8c0..157a24314 100644
--- a/doc/picklist/pt/index.vue
+++ b/doc/picklist/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'PickList PT Options',
                     component: DocApiTable,
                     data: getPTOption('PickList')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/progressbar/pt/PTDoc.vue b/doc/progressbar/pt/PTDoc.vue
deleted file mode 100644
index b35b2902c..000000000
--- a/doc/progressbar/pt/PTDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card">
-        <ProgressBar
-            :value="50"
-            :pt="{
-                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressBar :value="50"
-    :pt="{
-        value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-    }" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"
-            :pt="{
-                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-            }" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"
-            :pt="{
-                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-            }" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/progressbar/pt/index.vue b/doc/progressbar/pt/index.vue
index 3acb4d6ce..896382c54 100644
--- a/doc/progressbar/pt/index.vue
+++ b/doc/progressbar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ProgressBar PT Options',
                     component: DocApiTable,
                     data: getPTOption('ProgressBar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/progressspinner/pt/PTDoc.vue b/doc/progressspinner/pt/PTDoc.vue
deleted file mode 100644
index 0da8386d3..000000000
--- a/doc/progressspinner/pt/PTDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card flex justify-content-center">
-        <ProgressSpinner
-            :pt="{
-                spinner: { style: { animationDuration: '0s' } },
-                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressSpinner
-    :pt="{
-        spinner: { style: { animationDuration: '0s' } },
-        circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ProgressSpinner
-            :pt="{
-                spinner: { style: { animationDuration: '0s' } },
-                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ProgressSpinner
-            :pt="{
-                spinner: { style: { animationDuration: '0s' } },
-                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/progressspinner/pt/index.vue b/doc/progressspinner/pt/index.vue
index 70e2b897e..3d5d7b23f 100644
--- a/doc/progressspinner/pt/index.vue
+++ b/doc/progressspinner/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ProgressSpinner PT Options',
                     component: DocApiTable,
                     data: getPTOption('ProgressSpinner')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/radiobutton/pt/PTDoc.vue b/doc/radiobutton/pt/PTDoc.vue
deleted file mode 100644
index bb79f3cc3..000000000
--- a/doc/radiobutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton
-                    v-model="selectedCategory"
-                    :inputId="category.key"
-                    name="pizza"
-                    :value="category.name"
-                    :pt="{
-                        input: ({ props }) => ({
-                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-                        })
-                    }"
-                />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            categories: [
-                { name: 'Accounting', key: 'A' },
-                { name: 'Marketing', key: 'M' },
-                { name: 'Production', key: 'P' },
-                { name: 'Research', key: 'R' }
-            ],
-            selectedCategory: 'Production',
-            code: {
-                basic: `
-<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-    <RadioButton
-        v-model="selectedCategory"
-        :inputId="category.key"
-        name="pizza"
-        :value="category.name"
-        :pt="{
-            input: ({ props }) => ({
-                class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-            })
-        }"
-    />
-    <label :for="category.key" class="ml-2">{{ category.name }}</label>
-</div>
-
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton
-                    v-model="selectedCategory"
-                    :inputId="category.key"
-                    name="pizza"
-                    :value="category.name"
-                    :pt="{
-                        input: ({ props }) => ({
-                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-                        })
-                    }"
-                />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCategory: 'Production',
-            categories: [
-                { name: 'Accounting', key: 'A' },
-                { name: 'Marketing', key: 'M' },
-                { name: 'Production', key: 'P' },
-                { name: 'Research', key: 'R' }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton
-                    v-model="selectedCategory"
-                    :inputId="category.key"
-                    name="pizza"
-                    :value="category.name"
-                    :pt="{
-                        input: ({ props }) => ({
-                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-                        })
-                    }"
-                />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const selectedCategory = ref('Production');
-const categories = ref([
-    { name: 'Accounting', key: 'A' },
-    { name: 'Marketing', key: 'M' },
-    { name: 'Production', key: 'P' },
-    { name: 'Research', key: 'R' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/radiobutton/pt/index.vue b/doc/radiobutton/pt/index.vue
index 7ae715972..c88388e1e 100644
--- a/doc/radiobutton/pt/index.vue
+++ b/doc/radiobutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'RadioButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('RadioButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
deleted file mode 100644
index aa71f489a..000000000
--- a/doc/rating/pt/PTDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Rating
-            v-model="value"
-            :pt="{
-                onIcon: { class: 'text-orange-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Rating
-    v-model="value"
-    :pt="{
-        onIcon: { class: 'text-orange-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Rating
-            v-model="value"
-            :pt="{
-                onIcon: { class: 'text-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Rating
-            v-model="value"
-            :pt="{
-                onIcon: { class: 'text-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/rating/pt/index.vue b/doc/rating/pt/index.vue
index 2c8d4fd05..be33f3d52 100644
--- a/doc/rating/pt/index.vue
+++ b/doc/rating/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Rating PT Options',
                     component: DocApiTable,
                     data: getPTOption('Rating')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/ripple/pt/PTDoc.vue b/doc/ripple/pt/PTDoc.vue
deleted file mode 100644
index 02db2a30d..000000000
--- a/doc/ripple/pt/PTDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center align-items-center">
-        <div
-            v-ripple="{
-                pt: {
-                    root: 'bg-yellow-400'
-                }
-            }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
-        >
-            Default
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div
-    v-ripple="{
-        pt: {
-            root: 'bg-yellow-400'
-        }
-    }"
-    class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
->
-    Default
-</div>
-`,
-                options: `
-<template>
-    <div class="card card-container flex justify-content-center align-items-center">
-        <div
-            v-ripple="{
-                pt: {
-                    root: 'bg-yellow-400'
-                }
-            }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
-        >
-            Default
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card card-container flex justify-content-center align-items-center">
-        <div
-            v-ripple="{
-                pt: {
-                    root: 'bg-yellow-400'
-                }
-            }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
-        >
-            Default
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/ripple/pt/index.vue b/doc/ripple/pt/index.vue
index b78b713be..606a606ad 100644
--- a/doc/ripple/pt/index.vue
+++ b/doc/ripple/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Ripple PT Options',
                     component: DocApiTable,
                     data: getPTOption('Ripple')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/scrollpanel/pt/PTDoc.vue b/doc/scrollpanel/pt/PTDoc.vue
deleted file mode 100644
index 67af86d3a..000000000
--- a/doc/scrollpanel/pt/PTDoc.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <ScrollPanel :pt="{ root: { style: { width: '100%', height: '200px' } }, bary: { class: 'bg-primary' } }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </ScrollPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollPanel
-    :pt="{
-        root: { 
-            style: { width: '100%', height: '200px' }
-        },
-        barY: { class: 'bg-primary' }
-    }">
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-    <p>
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-        voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-    </p>
-    <p>
-        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-        officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-    </p>
-</ScrollPanel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ScrollPanel
-            :pt="{
-                root: { 
-                    style: { width: '100%', height: '200px' }
-                },
-                barY: { class: 'bg-primary' }
-            }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </ScrollPanel>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ScrollPanel
-            :pt="{
-                root: { 
-                    style: { width: '100%', height: '200px' }
-                },
-                barY: { class: 'bg-primary' }
-            }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <p>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p>
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </ScrollPanel>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/scrollpanel/pt/index.vue b/doc/scrollpanel/pt/index.vue
index 7964242ca..76eb2aa26 100644
--- a/doc/scrollpanel/pt/index.vue
+++ b/doc/scrollpanel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ScrollPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('ScrollPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/scrolltop/pt/PTDoc.vue b/doc/scrolltop/pt/PTDoc.vue
deleted file mode 100644
index d4751e06b..000000000
--- a/doc/scrolltop/pt/PTDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <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
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent" :pt="{ root: { class: 'w-2rem h-2rem bg-primary' }, icon: { class: 'w-1rem h-1rem' } }" />
-        </ScrollPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollTop target="parent"
-    :pt="{ 
-        root: { class: 'w-2rem h-2rem bg-primary' },
-        icon: { class: 'w-1rem h-1rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <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
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent"
-                :pt="{ 
-                    root: { class: 'w-2rem h-2rem bg-primary' },
-                    icon: { class: 'w-1rem h-1rem' }
-                }"
-            />
-        </ScrollPanel>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <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
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent"
-                :pt="{ 
-                    root: { class: 'w-2rem h-2rem bg-primary' },
-                    icon: { class: 'w-1rem h-1rem' }
-                }"
-            />
-        </ScrollPanel>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/scrolltop/pt/index.vue b/doc/scrolltop/pt/index.vue
index ceb706801..c9a413df7 100644
--- a/doc/scrolltop/pt/index.vue
+++ b/doc/scrolltop/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ScrollTop PT Options',
                     component: DocApiTable,
                     data: getPTOption('ScrollTop')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
deleted file mode 100644
index 9864819f0..000000000
--- a/doc/selectbutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <SelectButton
-            v-model="value"
-            :options="options"
-            aria-labelledby="basic"
-            :pt="{
-                button: ({ context }) => ({
-                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'Off',
-            options: ['Off', 'On'],
-            code: {
-                basic: `
-<SelectButton
-    v-model="value"
-    :options="options"
-    aria-labelledby="basic"
-    :pt="{
-        button: ({ context }) => ({
-            class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <SelectButton
-            v-model="value"
-            :options="options"
-            aria-labelledby="basic"
-            :pt="{
-                button: ({ context }) => ({
-                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'off',
-            options: ['Off', 'On']
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <SelectButton
-            v-model="value"
-            :options="options"
-            aria-labelledby="basic"
-            :pt="{
-                button: ({ context }) => ({
-                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('off');
-const options = ref(['Off', 'On']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/selectbutton/pt/index.vue b/doc/selectbutton/pt/index.vue
index c52069d25..ab39cb9a4 100644
--- a/doc/selectbutton/pt/index.vue
+++ b/doc/selectbutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'SelectButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('SelectButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
deleted file mode 100644
index 99401d371..000000000
--- a/doc/sidebar/pt/PTDoc.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" :pt="{ root: { class: 'w-25rem' } }">
-            <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>
-        </Sidebar>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Sidebar v-model:visible="visible"
-    header="Sidebar"
-    :pt="{
-        root: { class: 'w-25rem' }
-    }"
->
-    <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>
-</Sidebar>
-<Button icon="pi pi-arrow-right" @click="visible = true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible"
-            header="Sidebar"
-            :pt="{
-                root: { class: 'w-25rem' }
-            }"
-        >
-            <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>
-        </Sidebar>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible"
-            header="Sidebar"
-            :pt="{
-                root: { class: 'w-25rem' }
-            }"
-        >
-            <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>
-        </Sidebar>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/sidebar/pt/index.vue b/doc/sidebar/pt/index.vue
index 326142c7a..7485585fc 100644
--- a/doc/sidebar/pt/index.vue
+++ b/doc/sidebar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Sidebar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Sidebar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/skeleton/pt/PTDoc.vue b/doc/skeleton/pt/PTDoc.vue
deleted file mode 100644
index f7c977cd4..000000000
--- a/doc/skeleton/pt/PTDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Skeleton :pt="{ root: { class: 'w-3rem h-3rem' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Skeleton
-    :pt="{
-        root: { class: 'w-3rem h-3rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Skeleton
-        :pt="{
-            root: { class: 'w-3rem h-3rem' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Skeleton
-        :pt="{
-            root: { class: 'w-3rem h-3rem' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/skeleton/pt/index.vue b/doc/skeleton/pt/index.vue
index 07c7f51d7..ea296e2a3 100644
--- a/doc/skeleton/pt/index.vue
+++ b/doc/skeleton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Skeleton PT Options',
                     component: DocApiTable,
                     data: getPTOption('Skeleton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
deleted file mode 100644
index ff694b64c..000000000
--- a/doc/slider/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Slider
-            v-model="value"
-            :pt="{
-                root: { class: 'w-14rem' },
-                handle: { class: 'bg-orange-400 border-900' },
-                range: { class: 'bg-orange-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Slider
-    v-model="value"
-    :pt="{
-        root: { class: 'w-14rem' },
-        handle: { class: 'bg-orange-400 border-900' },
-        range: { class: 'bg-orange-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Slider
-            v-model="value"
-            :pt="{
-                root: { class: 'w-14rem' },
-                handle: { class: 'bg-orange-400 border-900' },
-                range: { class: 'bg-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Slider
-            v-model="value"
-            :pt="{
-                root: { class: 'w-14rem' },
-                handle: { class: 'bg-orange-400 border-900' },
-                range: { class: 'bg-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/slider/pt/index.vue b/doc/slider/pt/index.vue
index b70472fae..62eb80b84 100644
--- a/doc/slider/pt/index.vue
+++ b/doc/slider/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Slider PT Options',
                     component: DocApiTable,
                     data: getPTOption('Slider')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/speeddial/pt/PTDoc.vue b/doc/speeddial/pt/PTDoc.vue
deleted file mode 100644
index 65c7643c8..000000000
--- a/doc/speeddial/pt/PTDoc.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '300px' }">
-            <SpeedDial
-                :model="items"
-                direction="down"
-                :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-                :pt="{
-                    action: ({ props, state, context }) => ({
-                        class: context.active ? 'bg-primary' : undefined
-                    })
-                }"
-            />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '300px' }">
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-                :pt="{
-                    action: ({ props, state, context }) => ({
-                        class: context.active ? 'bg-primary' : undefined
-                    })
-                }"
-            />
-        </div>
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Add',
-                    icon: 'pi pi-pencil',
-                    command: () => {
-                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('/fileupload');
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                }
-            ]
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '300px' }">
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-                :pt="{
-                    action: ({ props, state, context }) => ({
-                        class: context.active ? 'bg-primary' : undefined
-                    })
-                }"
-            />
-        </div>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/speeddial/pt/index.vue b/doc/speeddial/pt/index.vue
index eb4273654..6414ad4a3 100644
--- a/doc/speeddial/pt/index.vue
+++ b/doc/speeddial/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'SpeedDial PT Options',
                     component: DocApiTable,
                     data: getPTOption('SpeedDial')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
deleted file mode 100644
index bca26444f..000000000
--- a/doc/splitbutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <SplitButton
-            label="Save"
-            @click="save"
-            :model="items"
-            :pt="{
-                menu: {
-                    root: { class: 'surface-ground' }
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save"
-    @click="save"
-    :model="items"
-    :pt="{
-        menu: {
-            root: { class: 'surface-ground' }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <SplitButton
-            label="Save"
-            icon="pi pi-plus"
-            @click="save"
-            :model="items"
-            :pt="{
-                menu: {
-                    root: { class: 'surface-ground' }
-                }
-            }"
-        />
-    </div>
-    <Toast />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: () => {
-                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
-            ]
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <SplitButton
-            label="Save"
-            icon="pi pi-plus"
-            @click="save"
-            :model="items"
-            :pt="{
-                menu: {
-                    root: { class: 'surface-ground' }
-                }
-            }"
-        />
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/doc/splitbutton/pt/index.vue b/doc/splitbutton/pt/index.vue
index 35b9a21bd..adaba446b 100644
--- a/doc/splitbutton/pt/index.vue
+++ b/doc/splitbutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'SplitButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('SplitButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/splitter/pt/PTDoc.vue b/doc/splitter/pt/PTDoc.vue
deleted file mode 100644
index 5d831916f..000000000
--- a/doc/splitter/pt/PTDoc.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Splitter :pt="{ root: { style: { height: '300px' } }, gutterHandler: { class: 'bg-primary' } }">
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Splitter
-    :pt="{
-        root: { style: { height: '300px' } },
-        gutterHandler: { class: 'bg-primary' }
-    }">
-    <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-    <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-</Splitter>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Splitter
-            :pt="{
-                root: { style: { height: '300px' } },
-                gutterHandler: { class: 'bg-primary' }
-            }">
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Splitter
-            :pt="{
-                root: { style: { height: '300px' } },
-                gutterHandler: { class: 'bg-primary' }
-            }">
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/splitter/pt/index.vue b/doc/splitter/pt/index.vue
index 17f7ba902..33e5c8177 100644
--- a/doc/splitter/pt/index.vue
+++ b/doc/splitter/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'SplitterPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('SplitterPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/steps/pt/PTDoc.vue b/doc/steps/pt/PTDoc.vue
deleted file mode 100644
index 7687e9b87..000000000
--- a/doc/steps/pt/PTDoc.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Steps
-            :model="items"
-            :readonly="false"
-            :pt="{
-                root: { class: 'w-30rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal',
-                    to: '/steps'
-                },
-                {
-                    label: 'Seat',
-                    to: '/steps/seat'
-                },
-                {
-                    label: 'Payment',
-                    to: '/steps/payment'
-                },
-                {
-                    label: 'Confirmation',
-                    to: '/steps/confirmation'
-                }
-            ],
-            code: {
-                basic: `
-<Steps
-    :model="items"
-    :readonly="false"
-    :pt="{
-        root: { class: 'w-30rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div>        
-        <div class="card">
-            <Steps
-                :model="items"
-                :readonly="false"
-                :pt="{
-                    root: { class: 'w-30rem' }
-                }"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal',
-                    to: '/'
-                },
-                {
-                    label: 'Seat',
-                    to: '/seat'
-                },
-                {
-                    label: 'Payment',
-                    to: '/payment'
-                },
-                {
-                    label: 'Confirmation',
-                    to: '/confirmation'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div>
-        <div class="card">
-            <Steps
-                :model="items"
-                :readonly="false"
-                :pt="{
-                    root: { class: 'w-30rem' }
-                }"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal',
-        to: "/"
-    },
-    {
-        label: 'Seat',
-        to: "/seat",
-    },
-    {
-        label: 'Payment',
-        to: "/payment",
-    },
-    {
-        label: 'Confirmation',
-        to: "/confirmation",
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/steps/pt/index.vue b/doc/steps/pt/index.vue
index ced2c0a2d..9575a05b1 100644
--- a/doc/steps/pt/index.vue
+++ b/doc/steps/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Steps PT Options',
                     component: DocApiTable,
                     data: getPTOption('Steps')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
deleted file mode 100644
index e867b9999..000000000
--- a/doc/tabmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <TabMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
-            ],
-            code: {
-                basic: `
-<TabMenu
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-fw pi-home'
-    },
-    {
-        label: 'Calendar',
-        icon: 'pi pi-fw pi-calendar'
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil'
-    },
-    {
-        label: 'Documentation',
-        icon: 'pi pi-fw pi-file'
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tabmenu/pt/index.vue b/doc/tabmenu/pt/index.vue
index daff110df..86abbbf60 100644
--- a/doc/tabmenu/pt/index.vue
+++ b/doc/tabmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TabMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('TabMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tabview/pt/PTDoc.vue b/doc/tabview/pt/PTDoc.vue
deleted file mode 100644
index 85d9aa96a..000000000
--- a/doc/tabview/pt/PTDoc.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <TabView>
-            <TabPanel
-                v-for="(tab, index) in tabs"
-                :key="tab.title"
-                :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }"
-            >
-                <p>{{ tab.content }}</p>
-            </TabPanel>
-        </TabView>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: `Header ${i + 1}`,
-                content: `Tab ${i + 1} Content`
-            })),
-            code: {
-                basic: `
-<TabView>
-    <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-        :pt="{
-            headerAction: ({ props, parent }) => ({
-                class: panelClass(props, parent, index)
-            })
-        }">
-        <p>{{ tab.content }}</p>
-    </TabPanel>
-</TabView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabView>
-            <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </TabPanel>
-        </TabView>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: \`Header \${i + 1}\`,
-                content: \`Tab \${i + 1} Content\`
-            }))
-        }
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabView>
-            <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headeraction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </TabPanel>
-        </TabView>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
-    title: \`Header \${i + 1}\`,
-    content: \`Tab \${i + 1} Content\`
-})));
-
-const panelClass = (props, parent, index) => {
-    return [
-        {
-            'bg-primary': parent.state.d_activeIndex === index
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-};
-</script>
diff --git a/doc/tabview/pt/index.vue b/doc/tabview/pt/index.vue
index ac7ad9adc..c26073919 100644
--- a/doc/tabview/pt/index.vue
+++ b/doc/tabview/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'TabPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('TabPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tag/pt/PTDoc.vue b/doc/tag/pt/PTDoc.vue
deleted file mode 100644
index 44d220f56..000000000
--- a/doc/tag/pt/PTDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tag icon="pi pi-user" value="Waiting" :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag icon="pi pi-user" value="Waiting"
-    :pt="{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tag icon="pi pi-user" value="Waiting"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tag icon="pi pi-user" value="Waiting"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tag/pt/index.vue b/doc/tag/pt/index.vue
index f9199aff0..c19db2f9a 100644
--- a/doc/tag/pt/index.vue
+++ b/doc/tag/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Tag PT Options',
                     component: DocApiTable,
                     data: getPTOption('Tag')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/terminal/pt/PTDoc.vue b/doc/terminal/pt/PTDoc.vue
deleted file mode 100644
index 0214e0956..000000000
--- a/doc/terminal/pt/PTDoc.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card">
-        <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 $"
-            :pt="{
-                root: { class: 'surface-900 text-white' },
-                command: { class: 'text-blue-500' },
-                prompt: { class: 'text-yellow-500' },
-                response: { class: 'text-purple-500' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import TerminalService from 'primevue/terminalservice';
-
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Terminal
-    welcomeMessage="Welcome to PrimeVue"
-    prompt="primevue $"
-    :pt="{
-        root: { class: 'surface-900 text-white' },
-        command: { class: 'text-blue-500' },
-        prompt: { class: 'text-yellow-500' },
-        response: { class: 'text-purple-500' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div>
-        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal
-            welcomeMessage="Welcome to PrimeVue"
-            prompt="primevue $"
-            :pt="{
-                root: { class: 'surface-900 text-white' },
-                command: { class: 'text-blue-500' },
-                prompt: { class: 'text-yellow-500' },
-                response: { class: 'text-purple-500' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-import TerminalService from "primevue/terminalservice";
-
-export default {
-    methods: {
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch(command) {
-                case "date":
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case "greet":
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case "random":
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = "Unknown command: " + command;
-            }
-            
-            TerminalService.emit('response', response);
-        }
-    },
-    mounted() {
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div>
-        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal
-            welcomeMessage="Welcome to PrimeVue"
-            prompt="primevue $"
-            :pt="{
-                root: { class: 'surface-900 text-white' },
-                command: { class: 'text-blue-500' },
-                prompt: { class: 'text-yellow-500' },
-                response: { class: 'text-purple-500' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import TerminalService from "primevue/terminalservice";
-
-onMounted(() => {
-    TerminalService.on('command', commandHandler);
-})
-
-onBeforeUnmount(() => {
-    TerminalService.off('command', commandHandler);
-})
-
-const commandHandler = (text) => {
-    let response;
-    let argsIndex = text.indexOf(' ');
-    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-    switch(command) {
-        case "date":
-            response = 'Today is ' + new Date().toDateString();
-            break;
-
-        case "greet":
-            response = 'Hola ' + text.substring(argsIndex + 1);
-            break;
-
-        case "random":
-            response = Math.floor(Math.random() * 100);
-            break;
-
-        default:
-            response = "Unknown command: " + command;
-    }
-    
-    TerminalService.emit('response', response);
-}
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    },
-    methods: {
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch (command) {
-                case 'date':
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case 'greet':
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case 'random':
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = 'Unknown command: ' + command;
-            }
-
-            TerminalService.emit('response', response);
-        }
-    }
-};
-</script>
diff --git a/doc/terminal/pt/index.vue b/doc/terminal/pt/index.vue
index 8dd3e250d..3ea4e7357 100644
--- a/doc/terminal/pt/index.vue
+++ b/doc/terminal/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Terminal PT Options',
                     component: DocApiTable,
                     data: getPTOption('Terminal')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/textarea/pt/PTDoc.vue b/doc/textarea/pt/PTDoc.vue
deleted file mode 100644
index df3637747..000000000
--- a/doc/textarea/pt/PTDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Textarea
-            v-model="value"
-            :pt="{
-                root: {
-                    rows: 5,
-                    cols: 30
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Textarea
-    v-model="value"
-    :pt="{
-        root: {
-            rows: 5,
-            cols: 30
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Textarea
-            v-model="value"
-            :pt="{
-                root: {
-                    rows: 5,
-                    cols: 30
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Textarea
-            v-model="value"
-            :pt="{
-                root: {
-                    rows: 5,
-                    cols: 30
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/textarea/pt/index.vue b/doc/textarea/pt/index.vue
index 85ac92e35..f8f270e20 100644
--- a/doc/textarea/pt/index.vue
+++ b/doc/textarea/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Textarea PT Options',
                     component: DocApiTable,
                     data: getPTOption('Textarea')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
deleted file mode 100644
index 9477aeff4..000000000
--- a/doc/tieredmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,455 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <TieredMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<TieredMenu
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <TieredMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <TieredMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tieredmenu/pt/index.vue b/doc/tieredmenu/pt/index.vue
index bc4681d5b..186157a65 100644
--- a/doc/tieredmenu/pt/index.vue
+++ b/doc/tieredmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TieredMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('TieredMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/timeline/pt/PTDoc.vue b/doc/timeline/pt/PTDoc.vue
deleted file mode 100644
index 74567dba9..000000000
--- a/doc/timeline/pt/PTDoc.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Timeline
-            :value="events"
-            :pt="{
-                marker: { class: 'border-orange-400' }
-            }"
-        >
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { 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' }
-            ],
-            code: {
-                basic: `
-<Timeline
-    :value="events"
-    :pt="{
-        marker: { class: 'border-orange-400' }
-    }"
->
-    <template #content="slotProps">
-        {{ slotProps.item.status }}
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Timeline
-            :value="events"
-            :pt="{
-                marker: { class: 'border-orange-400' }
-            }"
-        >
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            events: [
-                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-                { 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' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Timeline
-            :value="events"
-            :pt="{
-                marker: { class: 'border-orange-400' }
-            }"
-        >
-            <template #content="slotProps">
-                {{ slotProps.item.status }}
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref([
-    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-    { 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' }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/timeline/pt/index.vue b/doc/timeline/pt/index.vue
index 7a795590f..2c30df927 100644
--- a/doc/timeline/pt/index.vue
+++ b/doc/timeline/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Timeline PT Options',
                     component: DocApiTable,
                     data: getPTOption('Timeline')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/toast/pt/PTDoc.vue b/doc/toast/pt/PTDoc.vue
deleted file mode 100644
index 8408c7397..000000000
--- a/doc/toast/pt/PTDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Toast
-            group="pt"
-            :pt="{
-                container: { class: 'bg-yellow-100' }
-            }"
-        />
-        <Button label="Show" @click="show()" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast
-    group="pt"
-    :pt="{
-        container: { class: 'bg-yellow-100' }
-    }"
-/>
-<Button label="Show" @click="show()" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Toast
-            group="pt"
-            :pt="{
-                container: { class: 'bg-yellow-100' }
-            }"
-        />
-        <Button label="Show" @click="show()" />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Toast
-            group="pt"
-            :pt="{
-                container: { class: 'bg-yellow-100' }
-            }"
-        />
-        <Button label="Show" @click="show()" />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const show = () => {
-    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/doc/toast/pt/index.vue b/doc/toast/pt/index.vue
index b92e88beb..530cab834 100644
--- a/doc/toast/pt/index.vue
+++ b/doc/toast/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Toast PT Options',
                     component: DocApiTable,
                     data: getPTOption('Toast')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
deleted file mode 100644
index ae38bfcfe..000000000
--- a/doc/togglebutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <ToggleButton
-            v-model="checked"
-            :pt="{
-                root: {
-                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleButton
-    v-model="checked"
-    :pt="{
-        root: {
-            class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ToggleButton
-            v-model="checked"
-            :pt="{
-                root: {
-                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ToggleButton
-            v-model="checked"
-            :pt="{
-                root: {
-                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/togglebutton/pt/index.vue b/doc/togglebutton/pt/index.vue
index 33c500bb2..614488d49 100644
--- a/doc/togglebutton/pt/index.vue
+++ b/doc/togglebutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ToggleButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('ToggleButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
deleted file mode 100644
index 5e8ba87ae..000000000
--- a/doc/toolbar/pt/PTDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-help" />
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<TabView>
-    <Toolbar
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-        }">
-        <template #start>
-            <Button label="New" icon="pi pi-plus" class="p-button-help" />
-        </template>
-
-        <template #end>
-            <Button icon="pi pi-search" class="mr-2" />
-            <Button icon="pi pi-times" severity="danger" />
-        </template>
-    </Toolbar>
-</TabView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toolbar
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }">
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-help" />
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toolbar
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }">
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-help" />
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/toolbar/pt/index.vue b/doc/toolbar/pt/index.vue
index 9b4e4a46f..9b3f41fa4 100644
--- a/doc/toolbar/pt/index.vue
+++ b/doc/toolbar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Toolbar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Toolbar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
deleted file mode 100644
index 2a4ced1f1..000000000
--- a/doc/tooltip/pt/PTDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText
-            v-tooltip.right="{
-                value: `PrimeVue Rocks!`,
-                pt: {
-                    text: 'bg-primary'
-                }
-            }"
-            type="text"
-            placeholder="PassThrough Tooltip"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText
-    v-tooltip.right="{
-        value: \`PrimeVue Rocks!\`,
-        pt: {
-            arrow: {
-                style: {
-                    borderRightColor: 'var(--primary-color)'
-                }
-            },
-            text: 'bg-primary font-medium'
-        }
-    }"
-    type="text"
-    placeholder="PassThrough Tooltip"
-/>
-`,
-                options: `<div class="card flex flex-wrap justify-content-center gap-2">
-    <InputText
-        v-tooltip.right="{
-            value: \`PrimeVue Rocks!\`,
-            pt: {
-                arrow: {
-                    style: {
-                        borderRightColor: 'var(--primary-color)'
-                    }
-                },
-                text: 'bg-primary font-medium'
-            }
-        }"
-        type="text"
-        placeholder="PassThrough Tooltip"
-    />
-</div>
-`,
-                composition: `
-                <div class="card flex flex-wrap justify-content-center gap-2">
-    <InputText
-        v-tooltip.right="{
-            value: \`PrimeVue Rocks!\`,
-            pt: {
-                arrow: {
-                    style: {
-                        borderRightColor: 'var(--primary-color)'
-                    }
-                },
-                text: 'bg-primary font-medium'
-            }
-        }"
-        type="text"
-        placeholder="PassThrough Tooltip"
-    />
-</div>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tooltip/pt/index.vue b/doc/tooltip/pt/index.vue
index aef79610a..4d916c823 100644
--- a/doc/tooltip/pt/index.vue
+++ b/doc/tooltip/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Tooltip PT Options',
                     component: DocApiTable,
                     data: getPTOption('Tooltip')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tree/pt/PTDoc.vue b/doc/tree/pt/PTDoc.vue
deleted file mode 100644
index 9eb6c6916..000000000
--- a/doc/tree/pt/PTDoc.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tree
-            :value="nodes"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                content: ({ props, state, context }) => ({
-                    class: context.expanded ? 'bg-blue-100' : 'undefined'
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<Tree
-    :value="nodes"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' },
-        content: ({ props, state, context }) => ({
-            class: context.expanded ? 'bg-blue-100' : 'undefined'
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tree
-            :value="nodes"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                content: ({ props, state, context }) => ({
-                    class: context.expanded ? 'bg-blue-100' : 'undefined'
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    } 
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tree
-            :value="nodes"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                content: ({ props, state, context }) => ({
-                    class: context.expanded ? 'bg-blue-100' : 'undefined'
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const nodes = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/doc/tree/pt/index.vue b/doc/tree/pt/index.vue
index 569166de0..2b8c6e285 100644
--- a/doc/tree/pt/index.vue
+++ b/doc/tree/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Tree PT Options',
                     component: DocApiTable,
                     data: getPTOption('Tree')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/treeselect/pt/PTDoc.vue b/doc/treeselect/pt/PTDoc.vue
deleted file mode 100644
index 9e130397b..000000000
--- a/doc/treeselect/pt/PTDoc.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <TreeSelect
-            v-model="selectedValue"
-            :options="nodes"
-            placeholder="Select Item"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ props, state, context }) => ({
-                        class: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '/service/NodeService';
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-            code: {
-                basic: `
-<TreeSelect
-    v-model="selectedValue"
-    :options="nodes"
-    placeholder="Select Item"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' },
-        tree: {
-            content: ({ props, state, context }) => ({
-                class: context.expanded ? 'bg-blue-100' : 'undefined'
-            })
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <TreeSelect
-            v-model="selectedValue"
-            :options="nodes"
-            placeholder="Select Item"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ props, state, context }) => ({
-                        class: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-import { NodeService } from './service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            selectedValue: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <TreeSelect
-            v-model="selectedValue"
-            :options="nodes"
-            placeholder="Select Item"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ props, state, context }) => ({
-                        class: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }"
-        />
-    </div> 
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/doc/treeselect/pt/index.vue b/doc/treeselect/pt/index.vue
index 114251b1b..0f5b05b39 100644
--- a/doc/treeselect/pt/index.vue
+++ b/doc/treeselect/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TreeSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('TreeSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/treetable/pt/PTDoc.vue b/doc/treetable/pt/PTDoc.vue
deleted file mode 100644
index b9394bb6a..000000000
--- a/doc/treetable/pt/PTDoc.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                expander
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="size"
-                header="Size"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="type"
-                header="Type"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-        </TreeTable>
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" sortMode="multiple">
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        expander
-        :pt="{
-            sortBadge: { class: 'text-orange-400' }
-        }"
-    />
-    <Column
-        field="size"
-        header="Size"
-        sortable
-        :pt="{
-            sortBadge: { class: 'text-orange-400' }
-        }"
-    />
-    <Column
-        field="type"
-        header="Type"
-        sortable
-        :pt="{
-            sortBadge: { class: 'text-orange-400' }
-        }"
-    />
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                expander
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="size"
-                header="Size"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="type"
-                header="Type"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                expander
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="size"
-                header="Size"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="type"
-                header="Type"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/doc/treetable/pt/index.vue b/doc/treetable/pt/index.vue
index 27336526d..a7f19f064 100644
--- a/doc/treetable/pt/index.vue
+++ b/doc/treetable/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'Column PT Options',
                     component: DocApiTable,
                     data: getPTOption('Column')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
deleted file mode 100644
index 7ba213eaa..000000000
--- a/doc/tristatecheckbox/pt/PTDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox
-            v-model="value"
-            :pt="{
-                checkbox: {
-                    class: value ? 'bg-teal-500 border-white' : undefined
-                }
-            }"
-        />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<TriStateCheckbox
-    v-model="value"
-    :pt="{
-        checkbox: {
-            class: value ? 'bg-teal-500 border-white' : undefined
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox
-            v-model="value"
-            :pt="{
-                checkbox: {
-                    class: value ? 'bg-teal-500 border-white' : undefined
-                }
-            }"
-        />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>  
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox
-            v-model="value"
-            :pt="{
-                checkbox: {
-                    class: value ? 'bg-teal-500 border-white' : undefined
-                }
-            }"
-        />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>  
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tristatecheckbox/pt/index.vue b/doc/tristatecheckbox/pt/index.vue
index 597bf4d49..c57485885 100644
--- a/doc/tristatecheckbox/pt/index.vue
+++ b/doc/tristatecheckbox/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TriStateCheckbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('TriStateCheckbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/virtualscroller/pt/PTDoc.vue b/doc/virtualscroller/pt/PTDoc.vue
deleted file mode 100644
index 7d69f49e8..000000000
--- a/doc/virtualscroller/pt/PTDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <VirtualScroller
-            :items="items"
-            :itemSize="50"
-            :pt="{
-                root: {
-                    class: 'border-1 surface-border border-round',
-                    style: { width: '200px', height: '200px' }
-                }
-            }"
-        >
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
-            </template>
-        </VirtualScroller>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null,
-            code: {
-                basic: `
-<VirtualScroller
-    :items="items"
-    :itemSize="50"
-    :pt="{
-        root: {
-            class: 'border-1 surface-border border-round',
-            style: { width: '200px', height: '200px' }
-        }
-    }"
->
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller
-            :items="items"
-            :itemSize="50"
-            :pt="{
-                root: {
-                    class: 'border-1 surface-border border-round',
-                    style: { width: '200px', height: '200px' }
-                }
-            }"
-        >
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: null
-        };
-    },
-    created() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller
-            :items="items"
-            :itemSize="50"
-            :pt="{
-                root: {
-                    class: 'border-1 surface-border border-round',
-                    style: { width: '200px', height: '200px' }
-                }
-            }"
-        >
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
-    }
-};
-</script>
diff --git a/doc/virtualscroller/pt/index.vue b/doc/virtualscroller/pt/index.vue
index d8d8676e7..7b403f1f1 100644
--- a/doc/virtualscroller/pt/index.vue
+++ b/doc/virtualscroller/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'VirtualScroller PT Options',
                     component: DocApiTable,
                     data: getPTOption('VirtualScroller')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };