From 9f1cb2e193f1f1aad5e5563f74d82af558911efa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 2 Aug 2023 15:30:28 +0300
Subject: [PATCH] Unstyled demo fixes

---
 doc/badge/theming/UnstyledDoc.vue             |   8 +-
 doc/breadcrumb/theming/UnstyledDoc.vue        |   8 +-
 doc/calendar/theming/UnstyledDoc.vue          |   1 -
 doc/carousel/theming/UnstyledDoc.vue          |   5 -
 doc/cascadeselect/theming/UnstyledDoc.vue     |  75 -----------
 doc/checkbox/theming/UnstyledDoc.vue          |   1 -
 doc/chips/theming/UnstyledDoc.vue             |   1 -
 doc/colorpicker/theming/UnstyledDoc.vue       |   1 -
 doc/contextmenu/theming/UnstyledDoc.vue       |  11 +-
 doc/datatable/theming/UnstyledDoc.vue         |  81 -----------
 doc/dataview/theming/UnstyledDoc.vue          |  24 ----
 doc/dialog/theming/UnstyledDoc.vue            |   1 -
 doc/dock/theming/UnstyledDoc.vue              |  56 +-------
 doc/dropdown/theming/UnstyledDoc.vue          |   8 --
 doc/galleria/theming/UnstyledDoc.vue          |  17 +--
 doc/image/theming/UnstyledDoc.vue             |   2 +-
 doc/inlinemessage/theming/UnstyledDoc.vue     |   2 +-
 doc/inputnumber/theming/UnstyledDoc.vue       |   4 -
 doc/inputswitch/theming/UnstyledDoc.vue       |   1 -
 doc/inputtext/theming/UnstyledDoc.vue         |   1 -
 doc/knob/theming/UnstyledDoc.vue              |   1 -
 doc/listbox/theming/UnstyledDoc.vue           |   8 --
 doc/megamenu/theming/UnstyledDoc.vue          | 116 ----------------
 doc/menu/theming/UnstyledDoc.vue              |   4 -
 doc/menubar/theming/UnstyledDoc.vue           | 123 -----------------
 doc/multiselect/theming/UnstyledDoc.vue       |   8 --
 doc/orderlist/theming/UnstyledDoc.vue         |  22 +--
 doc/organizationchart/theming/UnstyledDoc.vue |  48 -------
 doc/panelmenu/theming/UnstyledDoc.vue         | 116 ----------------
 doc/password/theming/UnstyledDoc.vue          |   1 -
 doc/picklist/theming/UnstyledDoc.vue          |   6 -
 doc/radiobutton/theming/UnstyledDoc.vue       |   1 -
 doc/rating/theming/UnstyledDoc.vue            |   1 -
 doc/scrolltop/theming/UnstyledDoc.vue         |  23 +---
 doc/selectbutton/theming/UnstyledDoc.vue      |   2 -
 doc/slider/theming/UnstyledDoc.vue            |   1 -
 doc/speeddial/theming/UnstyledDoc.vue         |  37 -----
 doc/splitbutton/theming/UnstyledDoc.vue       |  29 ----
 doc/splitter/theming/UnstyledDoc.vue          |   4 +-
 doc/steps/theming/UnstyledDoc.vue             |  18 ---
 doc/tabmenu/theming/UnstyledDoc.vue           |   7 -
 doc/tabview/theming/index.vue                 |   2 +-
 doc/terminal/theming/UnstyledDoc.vue          |  24 +---
 doc/textarea/theming/UnstyledDoc.vue          |   1 -
 doc/tieredmenu/theming/UnstyledDoc.vue        | 126 ------------------
 doc/timeline/theming/UnstyledDoc.vue          |   6 -
 doc/togglebutton/theming/UnstyledDoc.vue      |   1 -
 doc/tree/theming/UnstyledDoc.vue              |   5 -
 doc/treeselect/theming/UnstyledDoc.vue        |   7 -
 doc/treetable/theming/UnstyledDoc.vue         |   6 -
 doc/tristatecheckbox/theming/UnstyledDoc.vue  |   1 -
 51 files changed, 20 insertions(+), 1043 deletions(-)

diff --git a/doc/badge/theming/UnstyledDoc.vue b/doc/badge/theming/UnstyledDoc.vue
index 11626cb71..8f0bdc5d1 100644
--- a/doc/badge/theming/UnstyledDoc.vue
+++ b/doc/badge/theming/UnstyledDoc.vue
@@ -12,13 +12,19 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
         <Badge value="4" severity="info"></Badge>
         <Badge value="12" severity="warning"></Badge>
         <Badge value="3" severity="danger"></Badge>
     </div>
+
+    <div class="card flex flex-wrap justify-center gap-4 mt-4">
+        <i v-badge="2" class="pi pi-bell relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
+        <i v-badge.danger="'5+'" class="pi pi-calendar relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
+        <i v-badge.danger class="pi pi-envelope relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
+    </div>
 </template>
 
 <script setup>
diff --git a/doc/breadcrumb/theming/UnstyledDoc.vue b/doc/breadcrumb/theming/UnstyledDoc.vue
index 7788f6923..7e4121693 100644
--- a/doc/breadcrumb/theming/UnstyledDoc.vue
+++ b/doc/breadcrumb/theming/UnstyledDoc.vue
@@ -1,8 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p>
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
-
     <DocSectionCode :code="code" embedded />
 </template>
 
@@ -10,11 +9,6 @@
 export default {
     data() {
         return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/'
-            },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
                 composition: `
 <template>
diff --git a/doc/calendar/theming/UnstyledDoc.vue b/doc/calendar/theming/UnstyledDoc.vue
index 268385e22..05f30543a 100644
--- a/doc/calendar/theming/UnstyledDoc.vue
+++ b/doc/calendar/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            date: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/carousel/theming/UnstyledDoc.vue b/doc/carousel/theming/UnstyledDoc.vue
index 295dcfe5a..67da7a460 100644
--- a/doc/carousel/theming/UnstyledDoc.vue
+++ b/doc/carousel/theming/UnstyledDoc.vue
@@ -2,12 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" embedded />
     <DocSectionCode :code="code" :service="['ProductService']" embedded />
 </template>
 
 <script>
-import { ProductService } from '@/service/ProductService';
 export default {
     data() {
         return {
@@ -82,9 +80,6 @@ const getSeverity = (status) => {
 <\/script>`
             }
         };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
     }
 };
 </script>
diff --git a/doc/cascadeselect/theming/UnstyledDoc.vue b/doc/cascadeselect/theming/UnstyledDoc.vue
index ffef0ec89..92cf25b6d 100644
--- a/doc/cascadeselect/theming/UnstyledDoc.vue
+++ b/doc/cascadeselect/theming/UnstyledDoc.vue
@@ -9,81 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/checkbox/theming/UnstyledDoc.vue b/doc/checkbox/theming/UnstyledDoc.vue
index 6a6bd351c..04e97004e 100644
--- a/doc/checkbox/theming/UnstyledDoc.vue
+++ b/doc/checkbox/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            checked: false,
             code: {
                 composition: `
 <template>
diff --git a/doc/chips/theming/UnstyledDoc.vue b/doc/chips/theming/UnstyledDoc.vue
index ea3039506..9655fe616 100644
--- a/doc/chips/theming/UnstyledDoc.vue
+++ b/doc/chips/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/colorpicker/theming/UnstyledDoc.vue b/doc/colorpicker/theming/UnstyledDoc.vue
index 3e3e63501..d69afe456 100644
--- a/doc/colorpicker/theming/UnstyledDoc.vue
+++ b/doc/colorpicker/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            color: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/contextmenu/theming/UnstyledDoc.vue b/doc/contextmenu/theming/UnstyledDoc.vue
index a828ea05a..192232b92 100644
--- a/doc/contextmenu/theming/UnstyledDoc.vue
+++ b/doc/contextmenu/theming/UnstyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p>
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
     <DocSectionCode :code="code" embedded />
 </template>
@@ -9,10 +9,6 @@
 export default {
     data() {
         return {
-            items: [
-                { label: 'View', icon: 'pi pi-fw pi-search' },
-                { label: 'Delete', icon: 'pi pi-fw pi-trash' }
-            ],
             code: {
                 composition: `
 <template>
@@ -38,11 +34,6 @@ const onImageRightClick = (event) => {
 <\/script>`
             }
         };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
     }
 };
 </script>
diff --git a/doc/datatable/theming/UnstyledDoc.vue b/doc/datatable/theming/UnstyledDoc.vue
index ac8850fa0..0a9bc65b6 100644
--- a/doc/datatable/theming/UnstyledDoc.vue
+++ b/doc/datatable/theming/UnstyledDoc.vue
@@ -6,28 +6,9 @@
 </template>
 
 <script>
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from 'primevue/api';
-
 export default {
     data() {
         return {
-            customers: null,
-            filters: null,
-            representatives: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-                { name: 'Onyama Limba', image: 'onyamalimba.png' },
-                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-            ],
-            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
-            loading: true,
             code: {
                 composition: `
 <template>
@@ -231,68 +212,6 @@ const getSeverity = (status) => {
 <\/script>`
             }
         };
-    },
-    created() {
-        this.initFilters();
-    },
-    mounted() {
-        CustomerService.getCustomersMedium().then((data) => {
-            this.customers = this.getCustomers(data);
-            this.loading = false;
-        });
-    },
-    methods: {
-        formatDate(value) {
-            return value.toLocaleDateString('en-US', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric'
-            });
-        },
-        formatCurrency(value) {
-            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-        },
-        clearFilter() {
-            this.initFilters();
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-                representative: { value: null, matchMode: FilterMatchMode.IN },
-                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-            };
-        },
-        getCustomers(data) {
-            return [...(data || [])].map((d) => {
-                d.date = new Date(d.date);
-
-                return d;
-            });
-        },
-        getSeverity(status) {
-            switch (status) {
-                case 'unqualified':
-                    return 'danger';
-
-                case 'qualified':
-                    return 'success';
-
-                case 'new':
-                    return 'info';
-
-                case 'negotiation':
-                    return 'warning';
-
-                case 'renewal':
-                    return null;
-            }
-        }
     }
 };
 </script>
diff --git a/doc/dataview/theming/UnstyledDoc.vue b/doc/dataview/theming/UnstyledDoc.vue
index 7cdc43fbe..f5b3a4f46 100644
--- a/doc/dataview/theming/UnstyledDoc.vue
+++ b/doc/dataview/theming/UnstyledDoc.vue
@@ -6,13 +6,9 @@
 </template>
 
 <script>
-import { ProductService } from '@/service/ProductService';
-
 export default {
     data() {
         return {
-            products: null,
-            layout: 'grid',
             code: {
                 composition: `
 <template>
@@ -123,26 +119,6 @@ const getSeverity = (product) => {
         `
             }
         };
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
-    },
-    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/dialog/theming/UnstyledDoc.vue b/doc/dialog/theming/UnstyledDoc.vue
index 247fa2e6c..823ea2fba 100644
--- a/doc/dialog/theming/UnstyledDoc.vue
+++ b/doc/dialog/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            visible: false,
             code: {
                 composition: `
 <template>
diff --git a/doc/dock/theming/UnstyledDoc.vue b/doc/dock/theming/UnstyledDoc.vue
index fd983ca2b..50183cf9b 100644
--- a/doc/dock/theming/UnstyledDoc.vue
+++ b/doc/dock/theming/UnstyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.</p>
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
     <DocSectionCode :code="code" embedded />
 </template>
@@ -9,43 +9,6 @@
 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'
-                }
-            ],
-            position: 'bottom',
-            positions: [
-                {
-                    label: 'Bottom',
-                    value: 'bottom'
-                },
-                {
-                    label: 'Top',
-                    value: 'top'
-                },
-                {
-                    label: 'Left',
-                    value: 'left'
-                },
-                {
-                    label: 'Right',
-                    value: 'right'
-                }
-            ],
             code: {
                 composition: `
 <template>
@@ -108,22 +71,7 @@ const positions = ref([
 ]);
 
 <\/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>`
+`
             }
         };
     }
diff --git a/doc/dropdown/theming/UnstyledDoc.vue b/doc/dropdown/theming/UnstyledDoc.vue
index 95db1767e..87ecc8c67 100644
--- a/doc/dropdown/theming/UnstyledDoc.vue
+++ b/doc/dropdown/theming/UnstyledDoc.vue
@@ -9,14 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/galleria/theming/UnstyledDoc.vue b/doc/galleria/theming/UnstyledDoc.vue
index 23dd1fa14..6476b6934 100644
--- a/doc/galleria/theming/UnstyledDoc.vue
+++ b/doc/galleria/theming/UnstyledDoc.vue
@@ -2,12 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" embedded />
     <DocSectionCode :code="code" :service="['PhotoService']" embedded />
 </template>
 
 <script>
-import { PhotoService } from '@/service/PhotoService';
 export default {
     data() {
         return {
@@ -49,22 +47,9 @@ const responsiveOptions = ref([
         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'
-},
-...
-        `
+<\/script>`
             }
         };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (images.value = data));
     }
 };
 </script>
diff --git a/doc/image/theming/UnstyledDoc.vue b/doc/image/theming/UnstyledDoc.vue
index 013121aa8..523682315 100644
--- a/doc/image/theming/UnstyledDoc.vue
+++ b/doc/image/theming/UnstyledDoc.vue
@@ -12,7 +12,7 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 </template>`
diff --git a/doc/inlinemessage/theming/UnstyledDoc.vue b/doc/inlinemessage/theming/UnstyledDoc.vue
index 69d6fea67..d95407ede 100644
--- a/doc/inlinemessage/theming/UnstyledDoc.vue
+++ b/doc/inlinemessage/theming/UnstyledDoc.vue
@@ -12,7 +12,7 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card flex flex-wrap align-center justify-center gap-3">
+    <div class="card flex flex-wrap items-center justify-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
         <InlineMessage severity="warn">Warning Content</InlineMessage>
diff --git a/doc/inputnumber/theming/UnstyledDoc.vue b/doc/inputnumber/theming/UnstyledDoc.vue
index a89fb5606..93ac360a3 100644
--- a/doc/inputnumber/theming/UnstyledDoc.vue
+++ b/doc/inputnumber/theming/UnstyledDoc.vue
@@ -9,10 +9,6 @@
 export default {
     data() {
         return {
-            value1: 42723,
-            value2: 58151,
-            value3: 2351.35,
-            value4: 50,
             code: {
                 composition: `
 <template>
diff --git a/doc/inputswitch/theming/UnstyledDoc.vue b/doc/inputswitch/theming/UnstyledDoc.vue
index 9975bc1fe..3daac4f92 100644
--- a/doc/inputswitch/theming/UnstyledDoc.vue
+++ b/doc/inputswitch/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            checked: false,
             code: {
                 composition: `
 <template>
diff --git a/doc/inputtext/theming/UnstyledDoc.vue b/doc/inputtext/theming/UnstyledDoc.vue
index 82122f095..7c4a57de4 100644
--- a/doc/inputtext/theming/UnstyledDoc.vue
+++ b/doc/inputtext/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/knob/theming/UnstyledDoc.vue b/doc/knob/theming/UnstyledDoc.vue
index e88f1d960..ed63f0a41 100644
--- a/doc/knob/theming/UnstyledDoc.vue
+++ b/doc/knob/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: 0,
             code: {
                 composition: `
 <template>
diff --git a/doc/listbox/theming/UnstyledDoc.vue b/doc/listbox/theming/UnstyledDoc.vue
index 895b4ff41..86b8fbff1 100644
--- a/doc/listbox/theming/UnstyledDoc.vue
+++ b/doc/listbox/theming/UnstyledDoc.vue
@@ -9,14 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/megamenu/theming/UnstyledDoc.vue b/doc/megamenu/theming/UnstyledDoc.vue
index 19fc81a2a..2b9c70ad0 100644
--- a/doc/megamenu/theming/UnstyledDoc.vue
+++ b/doc/megamenu/theming/UnstyledDoc.vue
@@ -9,122 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/menu/theming/UnstyledDoc.vue b/doc/menu/theming/UnstyledDoc.vue
index 48dad8726..ff3c33fce 100644
--- a/doc/menu/theming/UnstyledDoc.vue
+++ b/doc/menu/theming/UnstyledDoc.vue
@@ -9,10 +9,6 @@
 export default {
     data() {
         return {
-            items: [
-                { label: 'New', icon: 'pi pi-fw pi-plus' },
-                { label: 'Delete', icon: 'pi pi-fw pi-trash' }
-            ],
             code: {
                 composition: `
 <template>
diff --git a/doc/menubar/theming/UnstyledDoc.vue b/doc/menubar/theming/UnstyledDoc.vue
index bf9c94290..25f126e63 100644
--- a/doc/menubar/theming/UnstyledDoc.vue
+++ b/doc/menubar/theming/UnstyledDoc.vue
@@ -9,129 +9,6 @@
 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: 'Archieve',
-                            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: {
                 composition: `
 <template>
diff --git a/doc/multiselect/theming/UnstyledDoc.vue b/doc/multiselect/theming/UnstyledDoc.vue
index f0e6f8bbe..f681c29bb 100644
--- a/doc/multiselect/theming/UnstyledDoc.vue
+++ b/doc/multiselect/theming/UnstyledDoc.vue
@@ -9,14 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/orderlist/theming/UnstyledDoc.vue b/doc/orderlist/theming/UnstyledDoc.vue
index 545d4268d..90f5ffbad 100644
--- a/doc/orderlist/theming/UnstyledDoc.vue
+++ b/doc/orderlist/theming/UnstyledDoc.vue
@@ -6,11 +6,9 @@
 </template>
 
 <script>
-import { ProductService } from '@/service/ProductService';
 export default {
     data() {
         return {
-            products: null,
             code: {
                 composition: `
 <template>
@@ -43,27 +41,9 @@ 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
-},
-...`
+<\/script>`
             }
         };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data));
     }
 };
 </script>
diff --git a/doc/organizationchart/theming/UnstyledDoc.vue b/doc/organizationchart/theming/UnstyledDoc.vue
index 7b9d27973..855f1804a 100644
--- a/doc/organizationchart/theming/UnstyledDoc.vue
+++ b/doc/organizationchart/theming/UnstyledDoc.vue
@@ -9,54 +9,6 @@
 export default {
     data() {
         return {
-            data: {
-                key: '0',
-                type: 'country',
-                label: 'Argentina',
-                data: 'ar',
-                children: [
-                    {
-                        key: '0_0',
-                        type: 'country',
-                        label: 'Argentina',
-                        data: 'ar',
-                        children: [
-                            {
-                                key: '0_0_0',
-                                type: 'country',
-                                label: 'Argentina',
-                                data: 'ar'
-                            },
-                            {
-                                key: '0_0_1',
-                                type: 'country',
-                                label: 'Croatia',
-                                data: 'hr'
-                            }
-                        ]
-                    },
-                    {
-                        key: '0_1',
-                        type: 'country',
-                        label: 'France',
-                        data: 'fr',
-                        children: [
-                            {
-                                key: '0_1_0',
-                                type: 'country',
-                                label: 'France',
-                                data: 'fr'
-                            },
-                            {
-                                key: '0_1_1',
-                                type: 'country',
-                                label: 'Morocco',
-                                data: 'ma'
-                            }
-                        ]
-                    }
-                ]
-            },
             code: {
                 composition: `
 <template>
diff --git a/doc/panelmenu/theming/UnstyledDoc.vue b/doc/panelmenu/theming/UnstyledDoc.vue
index 4367ad057..171f4804a 100644
--- a/doc/panelmenu/theming/UnstyledDoc.vue
+++ b/doc/panelmenu/theming/UnstyledDoc.vue
@@ -9,122 +9,6 @@
 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: 'Archieve',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ],
             code: {
                 composition: `
 <template>
diff --git a/doc/password/theming/UnstyledDoc.vue b/doc/password/theming/UnstyledDoc.vue
index 30f0c96bb..c8b8513c5 100644
--- a/doc/password/theming/UnstyledDoc.vue
+++ b/doc/password/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/picklist/theming/UnstyledDoc.vue b/doc/picklist/theming/UnstyledDoc.vue
index 6bcff37fc..bc9a36f8f 100644
--- a/doc/picklist/theming/UnstyledDoc.vue
+++ b/doc/picklist/theming/UnstyledDoc.vue
@@ -6,12 +6,9 @@
 </template>
 
 <script>
-import { ProductService } from '@/service/ProductService';
-
 export default {
     data() {
         return {
-            products: null,
             code: {
                 composition: `
 <template>
@@ -64,9 +61,6 @@ onMounted(() => {
         `
             }
         };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
     }
 };
 </script>
diff --git a/doc/radiobutton/theming/UnstyledDoc.vue b/doc/radiobutton/theming/UnstyledDoc.vue
index f82fe2608..584a3ae92 100644
--- a/doc/radiobutton/theming/UnstyledDoc.vue
+++ b/doc/radiobutton/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            ingredient: '',
             code: {
                 composition: `
 <template>
diff --git a/doc/rating/theming/UnstyledDoc.vue b/doc/rating/theming/UnstyledDoc.vue
index a2ac2ea97..2b1655b57 100644
--- a/doc/rating/theming/UnstyledDoc.vue
+++ b/doc/rating/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/scrolltop/theming/UnstyledDoc.vue b/doc/scrolltop/theming/UnstyledDoc.vue
index d0092431c..e621664d1 100644
--- a/doc/scrolltop/theming/UnstyledDoc.vue
+++ b/doc/scrolltop/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            ingredient: '',
             code: {
                 composition: `
 <template>
@@ -26,27 +25,7 @@ export default {
         </ScrollPanel>
     </div>
 </template>
-
-<script setup>
-<\/script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>`
+`
             }
         };
     }
diff --git a/doc/selectbutton/theming/UnstyledDoc.vue b/doc/selectbutton/theming/UnstyledDoc.vue
index e8edcf170..0481024f1 100644
--- a/doc/selectbutton/theming/UnstyledDoc.vue
+++ b/doc/selectbutton/theming/UnstyledDoc.vue
@@ -9,8 +9,6 @@
 export default {
     data() {
         return {
-            value: 'Off',
-            options: ['Off', 'On'],
             code: {
                 composition: `
 <template>
diff --git a/doc/slider/theming/UnstyledDoc.vue b/doc/slider/theming/UnstyledDoc.vue
index 8d295d8f0..9b2ef798c 100644
--- a/doc/slider/theming/UnstyledDoc.vue
+++ b/doc/slider/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: null,
             code: {
                 composition: `
 <template>
diff --git a/doc/speeddial/theming/UnstyledDoc.vue b/doc/speeddial/theming/UnstyledDoc.vue
index b05001227..39fe26adb 100644
--- a/doc/speeddial/theming/UnstyledDoc.vue
+++ b/doc/speeddial/theming/UnstyledDoc.vue
@@ -9,43 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/splitbutton/theming/UnstyledDoc.vue b/doc/splitbutton/theming/UnstyledDoc.vue
index fa8ba7bff..8f9479db3 100644
--- a/doc/splitbutton/theming/UnstyledDoc.vue
+++ b/doc/splitbutton/theming/UnstyledDoc.vue
@@ -9,30 +9,6 @@
 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: {
                 composition: `
 <template>
@@ -83,11 +59,6 @@ const save = () => {
 <\/script>`
             }
         };
-    },
-    methods: {
-        save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-        }
     }
 };
 </script>
diff --git a/doc/splitter/theming/UnstyledDoc.vue b/doc/splitter/theming/UnstyledDoc.vue
index 71e73ac75..9e465eb79 100644
--- a/doc/splitter/theming/UnstyledDoc.vue
+++ b/doc/splitter/theming/UnstyledDoc.vue
@@ -14,8 +14,8 @@ export default {
 <template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
 </template>
diff --git a/doc/steps/theming/UnstyledDoc.vue b/doc/steps/theming/UnstyledDoc.vue
index 41d8eccb2..f82b3c5ed 100644
--- a/doc/steps/theming/UnstyledDoc.vue
+++ b/doc/steps/theming/UnstyledDoc.vue
@@ -9,24 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/tabmenu/theming/UnstyledDoc.vue b/doc/tabmenu/theming/UnstyledDoc.vue
index 1578dc598..a72b03772 100644
--- a/doc/tabmenu/theming/UnstyledDoc.vue
+++ b/doc/tabmenu/theming/UnstyledDoc.vue
@@ -9,13 +9,6 @@
 export default {
     data() {
         return {
-            items: [
-                { label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
-                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
-                { label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
-                { label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
-                { label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
-            ],
             code: {
                 composition: `
 <template>
diff --git a/doc/tabview/theming/index.vue b/doc/tabview/theming/index.vue
index 1bc51c636..892cbf37b 100644
--- a/doc/tabview/theming/index.vue
+++ b/doc/tabview/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Tabview Theming</h1>
+            <h1>TabView Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/terminal/theming/UnstyledDoc.vue b/doc/terminal/theming/UnstyledDoc.vue
index 83035c5fb..2a08fa439 100644
--- a/doc/terminal/theming/UnstyledDoc.vue
+++ b/doc/terminal/theming/UnstyledDoc.vue
@@ -54,29 +54,7 @@ const commandHandler = (text) => {
     
     TerminalService.emit('response', response);
 }
-<\/script>
-
-<style scoped>
-p {
-    margin-top: 0;
-}
-::v-deep(.dark-demo-terminal) {
-    background-color: #212121;
-    color: #ffffff;
-}
-
-::v-deep(.dark-demo-terminal .p-terminal-command) {
-    color: #80cbc4;
-}
-
-::v-deep(.dark-demo-terminal .p-terminal-prompt) {
-    color: #ffd54f;
-}
-
-::v-deep(.dark-demo-terminal .p-terminal-response) {
-    color: #9fa8da;
-}
-</style>`
+<\/script>`
             }
         };
     }
diff --git a/doc/textarea/theming/UnstyledDoc.vue b/doc/textarea/theming/UnstyledDoc.vue
index ddf0d4ea6..9f095040b 100644
--- a/doc/textarea/theming/UnstyledDoc.vue
+++ b/doc/textarea/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: '',
             code: {
                 composition: `
 <template>
diff --git a/doc/tieredmenu/theming/UnstyledDoc.vue b/doc/tieredmenu/theming/UnstyledDoc.vue
index 332994ca6..02b998386 100644
--- a/doc/tieredmenu/theming/UnstyledDoc.vue
+++ b/doc/tieredmenu/theming/UnstyledDoc.vue
@@ -9,132 +9,6 @@
 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: 'Archieve',
-                            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: {
                 composition: `
 <template>
diff --git a/doc/timeline/theming/UnstyledDoc.vue b/doc/timeline/theming/UnstyledDoc.vue
index abbbaa8b9..4b01bb956 100644
--- a/doc/timeline/theming/UnstyledDoc.vue
+++ b/doc/timeline/theming/UnstyledDoc.vue
@@ -9,12 +9,6 @@
 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: {
                 composition: `
 <template>
diff --git a/doc/togglebutton/theming/UnstyledDoc.vue b/doc/togglebutton/theming/UnstyledDoc.vue
index 6cc6cbe15..3d431bf60 100644
--- a/doc/togglebutton/theming/UnstyledDoc.vue
+++ b/doc/togglebutton/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            checked: false,
             code: {
                 composition: `
 <template>
diff --git a/doc/tree/theming/UnstyledDoc.vue b/doc/tree/theming/UnstyledDoc.vue
index 4aa8c20a5..602f850d2 100644
--- a/doc/tree/theming/UnstyledDoc.vue
+++ b/doc/tree/theming/UnstyledDoc.vue
@@ -6,11 +6,9 @@
 </template>
 
 <script>
-import { NodeService } from '@/service/NodeService';
 export default {
     data() {
         return {
-            nodes: null,
             code: {
                 composition: `
 <template>
@@ -58,9 +56,6 @@ onMounted(() => {
 ...`
             }
         };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 };
 </script>
diff --git a/doc/treeselect/theming/UnstyledDoc.vue b/doc/treeselect/theming/UnstyledDoc.vue
index a853929b2..0a8ca5848 100644
--- a/doc/treeselect/theming/UnstyledDoc.vue
+++ b/doc/treeselect/theming/UnstyledDoc.vue
@@ -6,13 +6,9 @@
 </template>
 
 <script>
-import { NodeService } from '/service/NodeService';
-
 export default {
     data() {
         return {
-            nodes: null,
-            selectedValue: null,
             code: {
                 composition: `
 <template>
@@ -61,9 +57,6 @@ onMounted(() => {
 ...`
             }
         };
-    },
-    mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 };
 </script>
diff --git a/doc/treetable/theming/UnstyledDoc.vue b/doc/treetable/theming/UnstyledDoc.vue
index 0019a6c12..4ae328438 100644
--- a/doc/treetable/theming/UnstyledDoc.vue
+++ b/doc/treetable/theming/UnstyledDoc.vue
@@ -6,12 +6,9 @@
 </template>
 
 <script>
-import { NodeService } from '@/service/NodeService';
-
 export default {
     data() {
         return {
-            nodes: null,
             code: {
                 composition: `
 <template>
@@ -64,9 +61,6 @@ const nodes = ref();
 `
             }
         };
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 };
 </script>
diff --git a/doc/tristatecheckbox/theming/UnstyledDoc.vue b/doc/tristatecheckbox/theming/UnstyledDoc.vue
index 9cf057f27..601efd1c7 100644
--- a/doc/tristatecheckbox/theming/UnstyledDoc.vue
+++ b/doc/tristatecheckbox/theming/UnstyledDoc.vue
@@ -9,7 +9,6 @@
 export default {
     data() {
         return {
-            value: null,
             code: {
                 composition: `
 <template>