From f4758cd54b165569cef48b8195850b7cac96eb1c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 5 Apr 2021 12:29:28 +0300
Subject: [PATCH] Added demo actions

---
 src/AppDemoActions.vue                        | 48 ++++++++++++++++
 src/AppDocumentation.vue                      | 55 +++++++++----------
 src/assets/images/icons/codesandbox.svg       |  1 +
 src/assets/styles/app/_content.scss           |  6 ++
 src/main.js                                   |  2 +
 src/views/accordion/AccordionDoc.vue          |  4 +-
 src/views/autocomplete/AutoCompleteDemo.vue   |  2 +-
 src/views/autocomplete/AutoCompleteDoc.vue    |  4 +-
 src/views/avatar/AvatarDoc.vue                |  4 +-
 src/views/badge/BadgeDoc.vue                  |  4 +-
 src/views/blockui/BlockUIDoc.vue              |  4 +-
 src/views/breadcrumb/BreadcrumbDoc.vue        |  4 +-
 src/views/button/ButtonDoc.vue                |  4 +-
 src/views/calendar/CalendarDemo.vue           |  2 +-
 src/views/calendar/CalendarDoc.vue            |  4 +-
 src/views/card/CardDoc.vue                    |  4 +-
 src/views/carousel/CarouselDoc.vue            |  4 +-
 src/views/cascadeselect/CascadeSelectDemo.vue |  2 +-
 src/views/cascadeselect/CascadeSelectDoc.vue  |  4 +-
 src/views/chart/BarChartDoc.vue               |  4 +-
 src/views/chart/ComboChartDoc.vue             |  4 +-
 src/views/chart/LineChartDoc.vue              |  4 +-
 src/views/chart/PieChartDoc.vue               |  4 +-
 src/views/chart/PolarAreaChartDoc.vue         |  4 +-
 src/views/chart/RadarChartDoc.vue             |  4 +-
 src/views/checkbox/CheckboxDemo.vue           |  2 +-
 src/views/checkbox/CheckboxDoc.vue            |  4 +-
 src/views/chip/ChipDoc.vue                    |  4 +-
 src/views/chips/ChipsDemo.vue                 |  2 +-
 src/views/chips/ChipsDoc.vue                  |  4 +-
 src/views/colorpicker/ColorPickerDoc.vue      |  4 +-
 src/views/confirmdialog/ConfirmDialogDoc.vue  |  4 +-
 src/views/confirmpopup/ConfirmPopupDoc.vue    |  4 +-
 src/views/contextmenu/ContextMenuDoc.vue      |  4 +-
 src/views/datatable/DataTableBasicDoc.vue     |  4 +-
 src/views/datatable/DataTableColGroupDemo.vue |  4 +-
 .../datatable/DataTableColResizeDemo.vue      |  4 +-
 .../datatable/DataTableColToggleDemo.vue      |  4 +-
 .../datatable/DataTableContextMenuDemo.vue    |  4 +-
 src/views/datatable/DataTableCrudDemo.vue     |  4 +-
 src/views/datatable/DataTableDoc.vue          |  4 +-
 .../datatable/DataTableDynamicColumnsDemo.vue |  4 +-
 src/views/datatable/DataTableEditDemo.vue     |  4 +-
 src/views/datatable/DataTableExportDemo.vue   |  4 +-
 src/views/datatable/DataTableFilterDemo.vue   |  4 +-
 .../datatable/DataTableFlexScrollDemo.vue     |  4 +-
 .../datatable/DataTableGridLinesDemo.vue      |  4 +-
 src/views/datatable/DataTableLazyDemo.vue     |  4 +-
 .../datatable/DataTablePaginatorDemo.vue      |  4 +-
 src/views/datatable/DataTableReorderDemo.vue  |  4 +-
 .../datatable/DataTableResponsiveDemo.vue     |  4 +-
 .../datatable/DataTableRowExpandDemo.vue      |  4 +-
 src/views/datatable/DataTableRowGroupDemo.vue |  4 +-
 src/views/datatable/DataTableScrollDemo.vue   |  4 +-
 .../datatable/DataTableSelectionDemo.vue      |  4 +-
 src/views/datatable/DataTableSizeDemo.vue     |  4 +-
 src/views/datatable/DataTableSortDemo.vue     |  4 +-
 src/views/datatable/DataTableStateDemo.vue    |  4 +-
 src/views/datatable/DataTableStripedDemo.vue  |  4 +-
 src/views/datatable/DataTableStyleDemo.vue    |  4 +-
 .../datatable/DataTableTemplatingDemo.vue     |  4 +-
 src/views/dataview/DataViewDoc.vue            |  4 +-
 .../deferredcontent/DeferredContentDoc.vue    |  4 +-
 src/views/dialog/DialogDoc.vue                |  4 +-
 src/views/display/DisplayDoc.vue              |  4 +-
 src/views/divider/DividerDoc.vue              |  4 +-
 src/views/dropdown/DropdownDemo.vue           |  2 +-
 src/views/dropdown/DropdownDoc.vue            |  4 +-
 src/views/editor/EditorDoc.vue                |  4 +-
 src/views/elevation/ElevationDoc.vue          |  4 +-
 src/views/fieldset/FieldsetDoc.vue            |  4 +-
 src/views/fileupload/FileUploadDoc.vue        |  4 +-
 src/views/filterservice/FilterServiceDoc.vue  |  4 +-
 src/views/floatlabel/FloatLabelDemo.vue       |  6 +-
 src/views/formlayout/FormLayoutDemo.vue       |  2 +-
 src/views/formlayout/FormLayoutDoc.vue        |  4 +-
 src/views/fullcalendar/FullCalendarDoc.vue    |  4 +-
 src/views/grid/GridDoc.vue                    |  4 +-
 src/views/inplace/InplaceDoc.vue              |  4 +-
 src/views/inputgroup/InputGroupDemo.vue       |  2 +-
 src/views/inputgroup/InputGroupDoc.vue        |  4 +-
 src/views/inputmask/InputMaskDemo.vue         |  2 +-
 src/views/inputmask/InputMaskDoc.vue          |  4 +-
 src/views/inputnumber/InputNumberDemo.vue     |  2 +-
 src/views/inputswitch/InputSwitchDoc.vue      |  4 +-
 src/views/inputtext/InputTextDemo.vue         |  2 +-
 src/views/inputtext/InputTextDoc.vue          |  6 +-
 src/views/invalid/InvalidDemo.vue             |  2 +-
 src/views/knob/KnobDoc.vue                    |  4 +-
 src/views/listbox/ListboxDemo.vue             |  2 +-
 src/views/listbox/ListboxDoc.vue              |  4 +-
 src/views/liveeditor/LiveEditor.vue           | 12 +++-
 src/views/megamenu/MegaMenuDoc.vue            |  4 +-
 src/views/menu/MenuDoc.vue                    |  4 +-
 src/views/menubar/MenubarDoc.vue              |  4 +-
 src/views/message/MessageDoc.vue              |  4 +-
 src/views/multiselect/MultiSelectDemo.vue     |  2 +-
 src/views/multiselect/MultiSelectDoc.vue      |  4 +-
 src/views/orderlist/OrderListDoc.vue          |  4 +-
 .../OrganizationChartDoc.vue                  |  4 +-
 src/views/overlaypanel/OverlayPanelDoc.vue    |  4 +-
 src/views/paginator/PaginatorDoc.vue          |  4 +-
 src/views/panel/PanelDoc.vue                  |  4 +-
 src/views/panelmenu/PanelMenuDoc.vue          |  4 +-
 src/views/password/PasswordDemo.vue           |  2 +-
 src/views/password/PasswordDoc.vue            |  4 +-
 src/views/picklist/PickListDoc.vue            |  4 +-
 src/views/progressbar/ProgressBarDoc.vue      |  4 +-
 .../progressspinner/ProgressSpinnerDoc.vue    |  4 +-
 src/views/radiobutton/RadioButtonDemo.vue     |  2 +-
 src/views/radiobutton/RadioButtonDoc.vue      |  4 +-
 src/views/rating/RatingDoc.vue                |  4 +-
 src/views/responsive/ResponsiveDemo.vue       |  4 +-
 src/views/ripple/RippleDoc.vue                |  4 +-
 src/views/scrollpanel/ScrollPanelDoc.vue      |  4 +-
 src/views/scrolltop/ScrollTopDoc.vue          |  4 +-
 src/views/selectbutton/SelectButtonDoc.vue    |  4 +-
 src/views/sidebar/SidebarDoc.vue              |  4 +-
 src/views/skeleton/SkeletonDoc.vue            |  4 +-
 src/views/slider/SliderDemo.vue               |  2 +-
 src/views/slider/SliderDoc.vue                |  4 +-
 src/views/spacing/SpacingDoc.vue              |  4 +-
 src/views/splitbutton/SplitButtonDoc.vue      |  4 +-
 src/views/splitter/SplitterDoc.vue            |  4 +-
 src/views/steps/StepsDoc.vue                  |  4 +-
 src/views/tabmenu/TabMenuDoc.vue              |  4 +-
 src/views/tabview/TabViewDoc.vue              |  4 +-
 src/views/tag/TagDoc.vue                      |  4 +-
 src/views/terminal/TerminalDoc.vue            |  4 +-
 src/views/text/TextDoc.vue                    |  4 +-
 src/views/textarea/TextareaDemo.vue           |  2 +-
 src/views/textarea/TextareaDoc.vue            |  4 +-
 src/views/tieredmenu/TieredMenuDoc.vue        |  4 +-
 src/views/timeline/TimelineDoc.vue            |  4 +-
 src/views/toast/ToastDoc.vue                  |  4 +-
 src/views/togglebutton/ToggleButtonDoc.vue    |  4 +-
 src/views/toolbar/ToolbarDoc.vue              |  4 +-
 src/views/tooltip/TooltipDoc.vue              |  4 +-
 src/views/tree/TreeDoc.vue                    |  4 +-
 src/views/tree/TreeFilterDemo.vue             |  4 +-
 src/views/tree/TreeLazyDemo.vue               |  4 +-
 src/views/tree/TreeSelectionDemo.vue          |  4 +-
 src/views/tree/TreeTemplatingDemo.vue         |  4 +-
 .../treetable/TreeTableColResizeDemo.vue      |  4 +-
 .../treetable/TreeTableColToggleDemo.vue      |  4 +-
 src/views/treetable/TreeTableDoc.vue          |  4 +-
 src/views/treetable/TreeTableFilterDemo.vue   |  4 +-
 src/views/treetable/TreeTableLazyDemo.vue     |  4 +-
 .../treetable/TreeTablePaginatorDemo.vue      |  4 +-
 .../treetable/TreeTableResponsiveDemo.vue     |  4 +-
 .../treetable/TreeTableSelectionDemo.vue      |  4 +-
 src/views/treetable/TreeTableSizeDemo.vue     |  4 +-
 src/views/treetable/TreeTableSortDemo.vue     |  4 +-
 .../treetable/TreeTableTemplatingDemo.vue     |  4 +-
 .../tristatecheckbox/TriStateCheckboxDemo.vue |  2 +-
 .../tristatecheckbox/TriStateCheckboxDoc.vue  |  4 +-
 src/views/validation/VuelidateFormDemo.vue    |  6 +-
 157 files changed, 381 insertions(+), 315 deletions(-)
 create mode 100644 src/AppDemoActions.vue
 create mode 100644 src/assets/images/icons/codesandbox.svg

diff --git a/src/AppDemoActions.vue b/src/AppDemoActions.vue
new file mode 100644
index 000000000..143d82d19
--- /dev/null
+++ b/src/AppDemoActions.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="app-demoactions p-d-flex p-ai-end p-jc-end p-mt-3">
+        <Button class="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" @click="toggleMenu">
+            <svg role="img" viewBox="0 0 24 24" width="17" height="17" fill="var(--text-color-secondary)" style="display:block">
+                <path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/>
+            </svg>
+        </Button>
+        <Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="viewOnGitHub"></Button>
+        <Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="scrollToDocs"></Button>
+        <Menu ref="menu" :model="items" :popup="true" style="width:14rem"/>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/AppEventBus';
+
+export default {
+    data() {
+        return {
+			items: [
+                {
+                    label: 'Options API Demo',
+                    command: () => {
+                        EventBus.emit('run-demo', 'options-api');
+                    }
+                },
+                {
+                    label: 'Composition API Demo',
+                    command: () => {
+                        EventBus.emit('run-demo', 'composition-api');
+                    }
+                }
+			]
+		}
+    },
+    methods: {
+        toggleMenu(event) {
+            this.$refs.menu.toggle(event);
+        },
+        scrollToDocs() {
+            document.getElementById('app-doc').scrollIntoView({behavior: 'smooth'});
+        },
+        viewOnGitHub() {
+            EventBus.emit('view-github');
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue
index aa79b044e..ec1f65c1f 100644
--- a/src/AppDocumentation.vue
+++ b/src/AppDocumentation.vue
@@ -1,4 +1,5 @@
 <script>
+import EventBus from '@/AppEventBus';
 import LiveEditor from './views/liveeditor/LiveEditor';
 import { services, data } from './views/liveeditor/LiveEditorData';
 
@@ -12,7 +13,16 @@ export default {
         dependencies: null,
         extPages: null,
         extFiles: null,
-        component: null
+        component: null,
+        github: null
+    },
+    mounted() {
+        EventBus.on('view-github', () => {
+            window.open('https://github.com/primefaces/primevue/blob/master/src/views/' + this.github, '_blank');
+        });
+    },
+    beforeUnmount() {
+        EventBus.off('view-github');
     },
     methods: {
         renderPanels() {
@@ -22,31 +32,8 @@ export default {
                 tabs.push(<TabPanel header="Documentation">{this.$slots.default()}</TabPanel>);
             }
 
-            if (this.sources) {
-                const sourceType = this.$appState.sourceType; //options-api or composition-api
-                /* eslint-disable */
-                tabs.push(
-                    <TabPanel header={this.sources[sourceType].tabName}>
-                        <LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles} component={this.component}/>
-                        <pre v-code><code>
-                            {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
-                        </code></pre>
-                    </TabPanel>
-                );
-            }
-
-            if (this.extPages) {
-                /* eslint-disable */
-                this.extPages.forEach(file => {
-                    tabs.push(
-                        <TabPanel key={file.tabName} header={file.tabName}>
-                            <pre v-code><code>
-                                {file.content.replace('<\\/script>', '<\/script>')}
-                            </code></pre>
-                        </TabPanel>
-                    );
-                });
-            }
+            this.renderSource('options-api', tabs);
+            this.renderSource('composition-api', tabs);
 
             if (this.service) {
                 let serviceArr = [];
@@ -57,7 +44,7 @@ export default {
                 /* eslint-disable */
                 serviceArr.forEach((el, i) => {
                     tabs.push(
-                        <TabPanel key="service" header={`${el}.js`}>
+                        <TabPanel key={el} header={`${el}.js`}>
                             <pre v-code="script"><code>
                                 {services[el]}
                             </code></pre>
@@ -85,11 +72,23 @@ export default {
             }
 
             return tabs;
+        },
+        renderSource(sourceType, tabs) {
+            if (this.sources && this.sources[sourceType]) {
+                tabs.push(
+                    <TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
+                        <pre v-code><code>
+                            {this.sources[sourceType].content.replace('<\\/script>', '<\\/script>')}
+                        </code></pre>
+                    </TabPanel>
+                );
+            }
         }
     },
     render() {
         return (
-            <div class="content-section documentation">
+            <div class="content-section documentation" id="app-doc">
+                <LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles} component={this.component} />
                 <TabView>
                     {
                         this.renderPanels()
diff --git a/src/assets/images/icons/codesandbox.svg b/src/assets/images/icons/codesandbox.svg
new file mode 100644
index 000000000..b4f4f2b20
--- /dev/null
+++ b/src/assets/images/icons/codesandbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg role="img" viewBox="0 0 24 24" stroke="var(--text-color)" xmlns="http://www.w3.org/2000/svg"><title/><path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 442e4ae21..1e43731c2 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -34,6 +34,12 @@
                     }
                 }
             }
+
+            .app-demoactions {
+                .p-button-icon-only {
+                    padding: .5rem 0;
+                }
+            }
         }
 
         &.implementation {
diff --git a/src/main.js b/src/main.js
index 626a60cb1..b6c798851 100644
--- a/src/main.js
+++ b/src/main.js
@@ -95,6 +95,7 @@ import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
 import Galleria from './components/galleria/Galleria';
 
 import AppInputStyleSwitch from './AppInputStyleSwitch';
+import AppDemoActions from './AppDemoActions';
 import AppDocumentation from './AppDocumentation';
 import CodeHighlight from './AppCodeHighlight';
 
@@ -208,6 +209,7 @@ app.component('TreeTable', TreeTable);
 app.component('TriStateCheckbox', TriStateCheckbox);
 app.component('Galleria', Galleria);
 
+app.component('AppDemoActions', AppDemoActions);
 app.component('AppInputStyleSwitch', AppInputStyleSwitch);
 app.component('AppDoc', AppDocumentation);
 app.directive('code', CodeHighlight);
diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index bb3df8058..2c7c1e36f 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -309,7 +309,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -438,7 +438,7 @@ export default {
 </style>`
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue
index 1a7ec56f5..a39ac7310 100755
--- a/src/views/autocomplete/AutoCompleteDemo.vue
+++ b/src/views/autocomplete/AutoCompleteDemo.vue
@@ -5,7 +5,7 @@
                 <h1>AutoComplete</h1>
                 <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 814a59faf..32d60878f 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -371,7 +371,7 @@ export default {
         return {
             sources:{
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content:`
 <template>
     <div>
@@ -488,7 +488,7 @@ export default {
 <\\/script>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content:`
 <template>
     <div>
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 89a365c98..463f9dfdb 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -179,7 +179,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div class="p-grid">
@@ -276,7 +276,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div class="p-grid">
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 13b8d32f6..0f5b3de9f 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -176,7 +176,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -210,7 +210,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue
index ab32ef3b1..94e0d0ec7 100755
--- a/src/views/blockui/BlockUIDoc.vue
+++ b/src/views/blockui/BlockUIDoc.vue
@@ -146,7 +146,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -208,7 +208,7 @@ button {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index fa8f8afeb..2fa7789ca 100755
--- a/src/views/breadcrumb/BreadcrumbDoc.vue
+++ b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -105,7 +105,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -135,7 +135,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index d4f1596e4..b31430e0f 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -221,7 +221,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -385,7 +385,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 649e81f16..8d6e00350 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Calendar</h1>
                 <p>Calendar is an input component to select a date.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 372eb74a3..f32d2062a 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -572,7 +572,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -705,7 +705,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index 898988c63..7320dd1c0 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -108,7 +108,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -157,7 +157,7 @@ p {
 </style>`
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 03da51e74..5b48dc067 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -297,7 +297,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -439,7 +439,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/cascadeselect/CascadeSelectDemo.vue b/src/views/cascadeselect/CascadeSelectDemo.vue
index e79a85724..351327478 100644
--- a/src/views/cascadeselect/CascadeSelectDemo.vue
+++ b/src/views/cascadeselect/CascadeSelectDemo.vue
@@ -5,7 +5,7 @@
                 <h1>CascadeSelect</h1>
                 <p>CascadeSelect displays a nested structure of options.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index 4785ff12e..4b6945c09 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -337,7 +337,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -456,7 +456,7 @@ img {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index f0cf4d715..545174ff2 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -8,7 +8,7 @@ export default {
 		return {
 			sources: {
                 'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -141,7 +141,7 @@ export default {
 
                 },
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 83b6f539c..d753a33b8 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -8,7 +8,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -50,7 +50,7 @@ export default {
 
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index 9bb3d1cc3..b555d07f6 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -8,7 +8,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -120,7 +120,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index 2a9ad6b47..282fa1126 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -9,7 +9,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -38,7 +38,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index e92848297..b51075dbe 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -8,7 +8,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -35,7 +35,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index b5b2b6813..903a85ad0 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -8,7 +8,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -52,7 +52,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index b586564b9..ae309e00b 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Checkbox</h1>
                 <p>Checkbox is an extension to standard checkbox element with theming.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index e0271bdc9..9a65c262a 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -113,7 +113,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -166,7 +166,7 @@ export default {
 <\\/script>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index d7f51c8f8..4d4b075cf 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -141,7 +141,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -192,7 +192,7 @@ export default {
 </style>`
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/chips/ChipsDemo.vue b/src/views/chips/ChipsDemo.vue
index 9790675fa..b2989f39a 100755
--- a/src/views/chips/ChipsDemo.vue
+++ b/src/views/chips/ChipsDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Chips</h1>
                 <p>Chips is used to enter multiple values on an input field.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation p-fluid">
diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue
index 4a99064f2..42df5a959 100755
--- a/src/views/chips/ChipsDoc.vue
+++ b/src/views/chips/ChipsDoc.vue
@@ -166,7 +166,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div class="p-fluid">
@@ -204,7 +204,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div class="p-fluid">
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index 7868fe823..2b820eff9 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -168,7 +168,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -193,7 +193,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index 4ea3f7c93..6075fc324 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -248,7 +248,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -333,7 +333,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue
index f72e67975..5292c90da 100644
--- a/src/views/confirmpopup/ConfirmPopupDoc.vue
+++ b/src/views/confirmpopup/ConfirmPopupDoc.vue
@@ -248,7 +248,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -298,7 +298,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `<template>
     <div>
         <ConfirmPopup></ConfirmPopup>
diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index 992cc4c56..6b95b47ce 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -312,7 +312,7 @@ export default {
         return {
             sources: {
             'options-api': {
-               tabName: 'Source',
+               tabName: 'Options API Source',
                content: `
 <template>
    <div>
@@ -468,7 +468,7 @@ export default {
 `
             },
             'composition-api': {
-               tabName: 'Composition API',
+               tabName: 'Composition API Source',
                content: `
 <template>
    <div>
diff --git a/src/views/datatable/DataTableBasicDoc.vue b/src/views/datatable/DataTableBasicDoc.vue
index 6676d55ea..42742a075 100644
--- a/src/views/datatable/DataTableBasicDoc.vue
+++ b/src/views/datatable/DataTableBasicDoc.vue
@@ -8,7 +8,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -42,7 +42,7 @@ export default {
                     `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index f3691856b..40db8ad15 100755
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -69,7 +69,7 @@ export default {
             sales: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <DataTable :value="sales" responsiveLayout="scroll">
@@ -169,7 +169,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <DataTable :value="sales" responsiveLayout="scroll">
diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue
index 361a74c37..71d143486 100755
--- a/src/views/datatable/DataTableColResizeDemo.vue
+++ b/src/views/datatable/DataTableColResizeDemo.vue
@@ -43,7 +43,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -90,7 +90,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
index d293e5a85..a7d7ecc3c 100755
--- a/src/views/datatable/DataTableColToggleDemo.vue
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -37,7 +37,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -89,7 +89,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index dbbecd493..52ec90141 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -42,7 +42,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -104,7 +104,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index effd48047..f5e11b859 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -183,7 +183,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -479,7 +479,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 299164f36..55bd1acb3 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2599,7 +2599,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -2823,7 +2823,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
index 02eb30212..f83eb6dca 100755
--- a/src/views/datatable/DataTableDynamicColumnsDemo.vue
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -30,7 +30,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -68,7 +68,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index 80864b6b0..ed24655b8 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -115,7 +115,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div class="p-fluid">
@@ -315,7 +315,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div class="p-fluid">
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index d33c0d33f..358108e6e 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -36,7 +36,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -80,7 +80,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 4a68a7dae..a9c97a437 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -249,7 +249,7 @@ export default {
             loading2: true,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -590,7 +590,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableFlexScrollDemo.vue b/src/views/datatable/DataTableFlexScrollDemo.vue
index c5e174172..9a9e398ae 100644
--- a/src/views/datatable/DataTableFlexScrollDemo.vue
+++ b/src/views/datatable/DataTableFlexScrollDemo.vue
@@ -24,7 +24,7 @@ export default {
             customers: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -58,7 +58,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
index 3a1bd6f6d..225b9aeff 100644
--- a/src/views/datatable/DataTableGridLinesDemo.vue
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -37,7 +37,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -77,7 +77,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index fdbd1332e..1cddf8d9b 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -72,7 +72,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -183,7 +183,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index b89a1dfa8..91df1575c 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -41,7 +41,7 @@ export default {
             customers: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -84,7 +84,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index 90ecbb418..e4c1f379b 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -31,7 +31,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -82,7 +82,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index d1e510926..22f267721 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -68,7 +68,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -139,7 +139,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index faac26f49..5a16fa007 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -84,7 +84,7 @@ export default {
             expandedRows: [],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -202,7 +202,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index 486663822..fed2cdc1b 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -120,7 +120,7 @@ export default {
             expandedRowGroups: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -283,7 +283,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index a930cf577..e3c2490c6 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -145,7 +145,7 @@ export default {
             balanceFrozen: false,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -367,7 +367,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index 09a98b530..50766ae97 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -101,7 +101,7 @@ export default {
             selectedProducts3: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -211,7 +211,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index f0940efed..7386f640c 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -59,7 +59,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -122,7 +122,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index 160eb9c22..bfa531658 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -84,7 +84,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -176,7 +176,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index 794297be8..e5a90e773 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -161,7 +161,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -326,7 +326,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
index 01bfd1d67..def26e555 100644
--- a/src/views/datatable/DataTableStripedDemo.vue
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -32,7 +32,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -66,7 +66,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 23c6132f0..0e84e74b7 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -37,7 +37,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -113,7 +113,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index de01e0fa6..63efedd17 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -58,7 +58,7 @@ export default {
             products: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
 	<div>
@@ -136,7 +136,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
 	<div>
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 9c88c135d..1150cf306 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -454,7 +454,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div class="card">
@@ -689,7 +689,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div class="card">
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index dc6322669..d264ef5d4 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -71,7 +71,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -126,7 +126,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 1fe3a3c53..0347a576f 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -293,7 +293,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -496,7 +496,7 @@ p {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue
index ea734720b..b9666d9af 100644
--- a/src/views/display/DisplayDoc.vue
+++ b/src/views/display/DisplayDoc.vue
@@ -47,7 +47,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
    <div>
@@ -83,7 +83,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
    <div>
diff --git a/src/views/divider/DividerDoc.vue b/src/views/divider/DividerDoc.vue
index 5dbf4e734..b34cbd81c 100644
--- a/src/views/divider/DividerDoc.vue
+++ b/src/views/divider/DividerDoc.vue
@@ -174,7 +174,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -325,7 +325,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
index 89ab5cfed..4b68e44e3 100755
--- a/src/views/dropdown/DropdownDemo.vue
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Dropdown</h1>
                 <p>Dropdown is used to select an item from a list of options.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 76c725a56..3d5686d3e 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -463,7 +463,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -577,7 +577,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 4e0eb14d6..9b97e25ee 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -166,7 +166,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -199,7 +199,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index aaad10ba0..36c2d6fd9 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -23,7 +23,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -57,7 +57,7 @@ export default {
 `
                 },
 				'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index e8f8f31ed..bc4007c2d 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -177,7 +177,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -212,7 +212,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index 92fb8fd3c..6dd125d07 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -338,7 +338,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -371,7 +371,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/filterservice/FilterServiceDoc.vue b/src/views/filterservice/FilterServiceDoc.vue
index 6fe33138a..cd2d7b61f 100644
--- a/src/views/filterservice/FilterServiceDoc.vue
+++ b/src/views/filterservice/FilterServiceDoc.vue
@@ -203,7 +203,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -285,7 +285,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 0817a6efe..cc142de07 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Float Label</h1>
                 <p>All input text components support floating labels.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
@@ -218,7 +218,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -453,7 +453,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/formlayout/FormLayoutDemo.vue b/src/views/formlayout/FormLayoutDemo.vue
index e07b7c4ea..2ac4c8a0c 100644
--- a/src/views/formlayout/FormLayoutDemo.vue
+++ b/src/views/formlayout/FormLayoutDemo.vue
@@ -6,7 +6,7 @@
                 <p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
                 a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index a28816dba..4c2822649 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -229,7 +229,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -440,7 +440,7 @@ textarea {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/fullcalendar/FullCalendarDoc.vue b/src/views/fullcalendar/FullCalendarDoc.vue
index 4edb0ff90..941ac177e 100755
--- a/src/views/fullcalendar/FullCalendarDoc.vue
+++ b/src/views/fullcalendar/FullCalendarDoc.vue
@@ -208,7 +208,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -259,7 +259,7 @@ export default {
 </style>`
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index 44bffb660..5549dc6dd 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -340,7 +340,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div class="flexgrid-demo p-p-2">
@@ -782,7 +782,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div class="flexgrid-demo p-p-2">
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index 3a20811ac..8ccf0a0ec 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -191,7 +191,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -257,7 +257,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/inputgroup/InputGroupDemo.vue b/src/views/inputgroup/InputGroupDemo.vue
index 8341784b2..3c99f587e 100755
--- a/src/views/inputgroup/InputGroupDemo.vue
+++ b/src/views/inputgroup/InputGroupDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputGroup</h1>
                 <p>Text, icon, buttons and other content can be grouped next to an input.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue
index f5a656aab..560dffa39 100755
--- a/src/views/inputgroup/InputGroupDoc.vue
+++ b/src/views/inputgroup/InputGroupDoc.vue
@@ -8,7 +8,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -130,7 +130,7 @@ export default {
 <\\/script>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/inputmask/InputMaskDemo.vue b/src/views/inputmask/InputMaskDemo.vue
index a960cb0dc..001fe5ba7 100755
--- a/src/views/inputmask/InputMaskDemo.vue
+++ b/src/views/inputmask/InputMaskDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputMask</h1>
                 <p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
index e4e8bda45..cff9c42d0 100755
--- a/src/views/inputmask/InputMaskDoc.vue
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -128,7 +128,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -183,7 +183,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/inputnumber/InputNumberDemo.vue b/src/views/inputnumber/InputNumberDemo.vue
index 56a8fbcfb..513becfe9 100755
--- a/src/views/inputnumber/InputNumberDemo.vue
+++ b/src/views/inputnumber/InputNumberDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputNumber</h1>
                 <p>InputNumber is an input component to provide numerical input.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index 6ccde2206..d253b7512 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -101,7 +101,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -126,7 +126,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue
index 152f8b349..fbf632b70 100755
--- a/src/views/inputtext/InputTextDemo.vue
+++ b/src/views/inputtext/InputTextDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputText</h1>
                 <p>InputText renders a text field to enter data.</p>
             </div>
-            <AppInputStyleSwitch />
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index dcf70c998..c14ff4539 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InputTextDemo" :sources="sources">
+	<AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import InputText from 'primevue/inputtext';
@@ -149,7 +149,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content:`
 <template>
     <div>
@@ -233,7 +233,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content:`
 <template>
     <div>
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index 50094003a..06d0a7d29 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Invalid State</h1>
                 <p>All form components have an invalid state style to display the validation errors.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
index 9837a914a..6b4f4b79e 100644
--- a/src/views/knob/KnobDoc.vue
+++ b/src/views/knob/KnobDoc.vue
@@ -207,7 +207,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -272,7 +272,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index 92043c649..7cff1b09b 100755
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Listbox</h1>
                 <p>Listbox is used to select one or more values from a list of items.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index 6890ba90c..4407a4431 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -355,7 +355,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -444,7 +444,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index f202cabe4..069ebfb61 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -1,11 +1,13 @@
 <template>
     <span v-if="showEditor" class="p-d-flex p-jc-end">
-        <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" />
+        <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false"/>
     </span>
 </template>
 
 <script>
+import EventBus from '@/AppEventBus';
 import { services, data } from './LiveEditorData';
+
 export default {
     data() {
         return {
@@ -51,6 +53,14 @@ export default {
             default: null
         }
     },
+    mounted() {
+        EventBus.on('run-demo', type => {
+            this.postSandboxParameters(type);
+        });
+    },
+    beforeUnmount() {
+        EventBus.off('view-github');
+    },
     methods: {
         postSandboxParameters(sourceType) {
             fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index c0a4ed409..b00455c66 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -251,7 +251,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -386,7 +386,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index dff58451a..1bcb77885 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -210,7 +210,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -278,7 +278,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 4176c7d43..00c8cd58a 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -267,7 +267,7 @@ export default {
         return {
             sources: {
             'options-api': {
-               tabName: 'Source',
+               tabName: 'Options API Source',
                content: `
 <template>
     <div>
@@ -421,7 +421,7 @@ export default {
 `
             },
             'composition-api': {
-               tabName: 'Composition API',
+               tabName: 'Composition API Source',
                content: `
 <template>
     <div>
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 700d33a01..0ac70a694 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -256,7 +256,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -337,7 +337,7 @@ button.p-button {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 089bc612f..9a54e3eb2 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -5,7 +5,7 @@
                 <h1>MultiSelect</h1>
                 <p>MultiSelect is used to multiple values from a list of options.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 035121840..85ccba726 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -452,7 +452,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -585,7 +585,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index da4c0dfbd..a55f6267d 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -203,7 +203,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div class="card">
@@ -308,7 +308,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div class="card">
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index d54c91603..a9a512a3b 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -485,7 +485,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -700,7 +700,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
    <div>
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 6c0cd1f0c..0df0e6064 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -172,7 +172,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -242,7 +242,7 @@ button {
 </style>`
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index 928075057..6edb5007c 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -274,7 +274,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -327,7 +327,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
index 45b221077..3a5134e0d 100755
--- a/src/views/panel/PanelDoc.vue
+++ b/src/views/panel/PanelDoc.vue
@@ -205,7 +205,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -295,7 +295,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index a4c85ef33..3bae00003 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -224,7 +224,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -366,7 +366,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/password/PasswordDemo.vue b/src/views/password/PasswordDemo.vue
index 82c81fd1d..ce419bd0b 100755
--- a/src/views/password/PasswordDemo.vue
+++ b/src/views/password/PasswordDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Password</h1>
                 <p>Password displays strength indicator for password fields.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 5c4909f3e..6400a04db 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -212,7 +212,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -266,7 +266,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index ce372ea49..70dd5e001 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -265,7 +265,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -367,7 +367,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 08f1fa6e7..49e6fd9c5 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -117,7 +117,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -167,7 +167,7 @@ export default {
 `
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index 326031a59..31b25e50e 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -108,7 +108,7 @@ export default {
         return {
            sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -127,7 +127,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index 28a01248a..496674630 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -5,7 +5,7 @@
                 <h1>RadioButton</h1>
                 <p>RadioButton is an extension to standard radio button element with theming.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 5e3650a26..200a824d2 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -109,7 +109,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -161,7 +161,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index ce811df37..0913afd8b 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -137,7 +137,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -168,7 +168,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index 6ac568cc2..b4b14d938 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -732,7 +732,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -1609,7 +1609,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 381536af0..431307d16 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -90,7 +90,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -157,7 +157,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index e9455d3c6..a4e2447f6 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -94,7 +94,7 @@ export default {
         return {
            sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -200,7 +200,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index 9e8b0087c..af6bb374e 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -106,7 +106,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -154,7 +154,7 @@ export default {
 </style>`
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index 1af18d7c9..840ac5e15 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -176,7 +176,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -220,7 +220,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index 3f74c1d6c..dcffee641 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -208,7 +208,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -256,7 +256,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 7d7d406c6..b99cde093 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -133,7 +133,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -291,7 +291,7 @@ export default {
 </style>`
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/slider/SliderDemo.vue b/src/views/slider/SliderDemo.vue
index c6b0f7496..0c0fdc2f8 100755
--- a/src/views/slider/SliderDemo.vue
+++ b/src/views/slider/SliderDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Slider</h1>
                 <p>Slider is an input component to provide a numerical input.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index b35108d9e..5424548a0 100755
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -180,7 +180,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -226,7 +226,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 63e86e9fc..44bbbe03d 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -69,7 +69,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -150,7 +150,7 @@ export default {
 `
 				},
                 'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 7c486aca5..9a942e4a6 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -189,7 +189,7 @@ export default {
 		return {
 			sources:{
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content:`
 <template>
     <div>
@@ -258,7 +258,7 @@ export default {
 }
 </style>`		},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content:`
 <template>
     <div>
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
index d2efe5cd9..d0bd3b304 100644
--- a/src/views/splitter/SplitterDoc.vue
+++ b/src/views/splitter/SplitterDoc.vue
@@ -263,7 +263,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -325,7 +325,7 @@ export default {
 <\\/script>`
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index c05611c62..f9c75b07a 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -129,7 +129,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -200,7 +200,7 @@ export default {
                     `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `<template>
     <div>
         <Toast />
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 9e6ff7fe6..33d5bef78 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -107,7 +107,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -159,7 +159,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 1d9db48b4..1d29d8e7c 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -280,7 +280,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -423,7 +423,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index 367659fdb..dab7414b4 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -122,7 +122,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -156,7 +156,7 @@ export default {
 `
 				},
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 628ce67ea..e5ffc1883 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -131,7 +131,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -203,7 +203,7 @@ p {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index 512daf0b8..f0572a746 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -71,7 +71,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -111,7 +111,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/textarea/TextareaDemo.vue b/src/views/textarea/TextareaDemo.vue
index 2ceec3b31..a84b2c72a 100755
--- a/src/views/textarea/TextareaDemo.vue
+++ b/src/views/textarea/TextareaDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Textarea</h1>
                 <p>Textarea is a multi-line text input element.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue
index 44593f828..6c671dad3 100755
--- a/src/views/textarea/TextareaDoc.vue
+++ b/src/views/textarea/TextareaDoc.vue
@@ -82,7 +82,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -111,7 +111,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index c4937cb28..ad98c2b42 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -301,7 +301,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -461,7 +461,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
index c8e04e03c..39512a49e 100644
--- a/src/views/timeline/TimelineDoc.vue
+++ b/src/views/timeline/TimelineDoc.vue
@@ -263,7 +263,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -419,7 +419,7 @@ export default {
 </style>`
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 176b3869e..dbfac5206 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -271,7 +271,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -361,7 +361,7 @@ button {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index 788928f47..7bbca4891 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -143,7 +143,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -168,7 +168,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index ed89a0220..e7629fa43 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -86,7 +86,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -147,7 +147,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index 88b61d411..a00583a30 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -87,7 +87,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -122,7 +122,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index 4e9cbe9bb..9a806de78 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -737,7 +737,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -801,7 +801,7 @@ button {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index 491cfe7d4..8af0ae64c 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -31,7 +31,7 @@ export default {
             expandedKeys: {},
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -85,7 +85,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index c5fea443a..87656a251 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -27,7 +27,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -104,7 +104,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index 333b8d2d4..ddf043b48 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -45,7 +45,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -103,7 +103,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index dc377ddfd..5e9136908 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -52,7 +52,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -112,7 +112,7 @@ button {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index 05ec39f09..d6379f137 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -42,7 +42,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -87,7 +87,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index 6447b49b1..9e93d19fe 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -36,7 +36,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -87,7 +87,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index e8afcb056..29ba0a156 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1651,7 +1651,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -1742,7 +1742,7 @@ button {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index 3b8b2243c..33c36ce1a 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -82,7 +82,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -176,7 +176,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 2f7537ef7..7ebf7c7d1 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -33,7 +33,7 @@ export default {
             totalRecords: 0,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -137,7 +137,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index d690a78d1..cff5ef0ac 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -28,7 +28,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -79,7 +79,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index ab9a39610..cbda3b6ea 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -39,7 +39,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -97,7 +97,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index fc18fa135..6a1b8bed0 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -73,7 +73,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -161,7 +161,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableSizeDemo.vue b/src/views/treetable/TreeTableSizeDemo.vue
index 4e11f0dbb..3bc69df93 100644
--- a/src/views/treetable/TreeTableSizeDemo.vue
+++ b/src/views/treetable/TreeTableSizeDemo.vue
@@ -55,7 +55,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -115,7 +115,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index e3b53483c..5064a1565 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -49,7 +49,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -103,7 +103,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index 1ffd6f55d..7aa8f88be 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -48,7 +48,7 @@ export default {
             nodes: null,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div>
@@ -98,7 +98,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
index e9411b1b4..88eaf8b45 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
@@ -5,7 +5,7 @@
                 <h1>TriStateCheckbox</h1>
                 <p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index b18dee67f..269c7fc5b 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -81,7 +81,7 @@ export default {
 		return {
 			sources: {
 				'options-api': {
-					tabName: 'Source',
+					tabName: 'Options API Source',
 					content: `
 <template>
     <div>
@@ -104,7 +104,7 @@ export default {
 `
 				},
 				'composition-api': {
-					tabName: 'Composition API',
+					tabName: 'Composition API Source',
 					content: `
 <template>
     <div>
diff --git a/src/views/validation/VuelidateFormDemo.vue b/src/views/validation/VuelidateFormDemo.vue
index fe1e8c861..56babc33c 100644
--- a/src/views/validation/VuelidateFormDemo.vue
+++ b/src/views/validation/VuelidateFormDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Vuelidate</h1>
                 <p>PrimeVue components can be easily used/integrated with <a href="https://vuelidate.js.org/">Vuelidate</a>. In this example, a register panel is simulated using Vuelidate.</p>
             </div>
-            <AppInputStyleSwitch />
+            
         </div>
 
         <div class="content-section implementation form-demo">
@@ -117,7 +117,7 @@ export default {
             showMessage: false,
             sources: {
                 'options-api': {
-                    tabName: 'Source',
+                    tabName: 'Options API Source',
                     content: `
 <template>
     <div class="form-demo">
@@ -304,7 +304,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName: 'Composition API',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div class="form-demo">