From 98dbb467d75dc116ce32693ddb8feb0e39f08b39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 23 Mar 2021 13:47:50 +0300
Subject: [PATCH] csb service props must be array

---
 src/AppDocumentation.vue                      |   21 +-
 src/views/autocomplete/AutoCompleteDoc.vue    |   20 +-
 src/views/carousel/CarouselDoc.vue            |    2 +-
 src/views/datatable/DataTableBasicDoc.vue     |    2 +-
 .../datatable/DataTableColResizeDemo.vue      |    2 +-
 .../datatable/DataTableColToggleDemo.vue      |    2 +-
 .../datatable/DataTableContextMenuDemo.vue    |   20 +-
 src/views/datatable/DataTableCrudDemo.vue     |    2 +-
 src/views/datatable/DataTableDoc.vue          |    2 +-
 .../datatable/DataTableDynamicColumnsDemo.vue |    2 +-
 src/views/datatable/DataTableEditDemo.vue     |    2 +-
 src/views/datatable/DataTableExportDemo.vue   |    2 +-
 src/views/datatable/DataTableFilterDemo.vue   |    2 +-
 .../datatable/DataTableFlexScrollDemo.vue     |    2 +-
 .../datatable/DataTableGridLinesDemo.vue      |    2 +-
 src/views/datatable/DataTableLazyDemo.vue     |    2 +-
 .../datatable/DataTablePaginatorDemo.vue      |    2 +-
 src/views/datatable/DataTableReorderDemo.vue  |    2 +-
 .../datatable/DataTableResponsiveDemo.vue     |    2 +-
 .../datatable/DataTableRowExpandDemo.vue      |    2 +-
 src/views/datatable/DataTableRowGroupDemo.vue |    2 +-
 src/views/datatable/DataTableScrollDemo.vue   |    2 +-
 .../datatable/DataTableSelectionDemo.vue      |    2 +-
 src/views/datatable/DataTableSizeDemo.vue     |    2 +-
 src/views/datatable/DataTableSortDemo.vue     |    2 +-
 src/views/datatable/DataTableStateDemo.vue    |    2 +-
 src/views/datatable/DataTableStripedDemo.vue  |    2 +-
 src/views/datatable/DataTableStyleDemo.vue    |    2 +-
 .../datatable/DataTableTemplatingDemo.vue     |    2 +-
 src/views/dataview/DataViewDoc.vue            |    2 +-
 .../deferredcontent/DeferredContentDoc.vue    |    2 +-
 src/views/filterservice/FilterServiceDoc.vue  |    2 +-
 src/views/floatlabel/FloatLabelDemo.vue       |    2 +-
 src/views/formlayout/FormLayoutDoc.vue        |  774 +++---
 src/views/fullcalendar/FullCalendarDoc.vue    |    2 +-
 src/views/inplace/InplaceDoc.vue              |    2 +-
 src/views/invalid/InvalidDemo.vue             |    2 +-
 src/views/liveeditor/LiveEditor.vue           |   20 +-
 src/views/orderlist/OrderListDoc.vue          |    2 +-
 src/views/overlaypanel/OverlayPanelDoc.vue    |    2 +-
 src/views/picklist/PickListDoc.vue            |    2 +-
 src/views/responsive/ResponsiveDemo.vue       | 2390 ++++++++++++-----
 src/views/tree/TreeDoc.vue                    |    2 +-
 src/views/tree/TreeFilterDemo.vue             |    2 +-
 src/views/tree/TreeLazyDemo.vue               |    2 +-
 src/views/tree/TreeSelectionDemo.vue          |    2 +-
 src/views/tree/TreeTemplatingDemo.vue         |    2 +-
 .../treetable/TreeTableColResizeDemo.vue      |    2 +-
 .../treetable/TreeTableColToggleDemo.vue      |    2 +-
 src/views/treetable/TreeTableDoc.vue          |    2 +-
 src/views/treetable/TreeTableFilterDemo.vue   |    2 +-
 src/views/treetable/TreeTableLazyDemo.vue     |    2 +-
 .../treetable/TreeTablePaginatorDemo.vue      |    2 +-
 .../treetable/TreeTableResponsiveDemo.vue     |    2 +-
 .../treetable/TreeTableSelectionDemo.vue      |    2 +-
 src/views/treetable/TreeTableSizeDemo.vue     |    2 +-
 src/views/treetable/TreeTableSortDemo.vue     |    2 +-
 .../treetable/TreeTableTemplatingDemo.vue     |    2 +-
 58 files changed, 2169 insertions(+), 1180 deletions(-)

diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue
index dcf4e6fa9..41dce3fb2 100644
--- a/src/AppDocumentation.vue
+++ b/src/AppDocumentation.vue
@@ -47,14 +47,21 @@ export default {
             }
 
             if (this.service) {
+                let serviceArr = [];
+
+                this.service.forEach(el => {
+                    serviceArr.push(el.split(','))
+                })
                 /* eslint-disable */
-                tabs.push(
-                    <TabPanel key="service" header={`${this.service}.js`}>
-                        <pre v-code="script"><code>
-                            {services[this.service]}
-                        </code></pre>
-                    </TabPanel>
-                );
+                serviceArr.forEach((el, i) => {
+                    tabs.push(
+                        <TabPanel key="service" header={`${el}.js`}>
+                            <pre v-code="script"><code>
+                                {services[el]}
+                            </code></pre>
+                        </TabPanel>
+                    );
+                })
             }
 
             if (this.data) {
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 5a58552a9..de5104d58 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AutoCompleteDemo" :sources="sources" service="CountryService" :data="['countries']">
+    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
@@ -544,9 +544,7 @@ export default {
         const filteredCountries = ref();
         const selectedCountries = ref([]);
         const groupedCities = ref ([{
-            label: 'Germany', code: 'DE', 
-                label: 'Germany', code: 'DE', 
-            label: 'Germany', code: 'DE', 
+            label: 'Germany', code: 'DE',
             items: [
                 {label: 'Berlin', value: 'Berlin'},
                 {label: 'Frankfurt', value: 'Frankfurt'},
@@ -555,9 +553,7 @@ export default {
             ]
         },
         {
-            label: 'USA', code: 'US', 
-                label: 'USA', code: 'US', 
-            label: 'USA', code: 'US', 
+            label: 'USA', code: 'US',
             items: [
                 {label: 'Chicago', value: 'Chicago'},
                 {label: 'Los Angeles', value: 'Los Angeles'},
@@ -566,9 +562,7 @@ export default {
             ]
         },
         {
-            label: 'Japan', code: 'JP', 
-                label: 'Japan', code: 'JP', 
-            label: 'Japan', code: 'JP', 
+            label: 'Japan', code: 'JP',
             items: [
                 {label: 'Kyoto', value: 'Kyoto'},
                 {label: 'Osaka', value: 'Osaka'},
@@ -590,16 +584,16 @@ export default {
         };
         const searchCity = (event) => {
             let query = event.query;
-            let filteredCities = [];
+            let newFilteredCities = [];
 
             for (let country of groupedCities.value) {
                 let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
                 if (filteredItems && filteredItems.length) {
-                    filteredCities.push({...country, ...{items: filteredItems}});
+                    newFilteredCities.push({...country, ...{items: filteredItems}});
                 }
             }
 
-            filteredCities.value = filteredCities;
+            filteredCities.value = newFilteredCities;
         }
         return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity }
     }
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 1cf6ad72b..fd77ca6ee 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" :data="['products-small']">
+	<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
diff --git a/src/views/datatable/DataTableBasicDoc.vue b/src/views/datatable/DataTableBasicDoc.vue
index 7703a5d62..8645e4bba 100644
--- a/src/views/datatable/DataTableBasicDoc.vue
+++ b/src/views/datatable/DataTableBasicDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DataTableDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+    <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 </template>
 
 <script>
diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue
index c459fd889..361a74c37 100755
--- a/src/views/datatable/DataTableColResizeDemo.vue
+++ b/src/views/datatable/DataTableColResizeDemo.vue
@@ -30,7 +30,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColResizeDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
index 0c77ffddc..d293e5a85 100755
--- a/src/views/datatable/DataTableColToggleDemo.vue
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -22,7 +22,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColToggleDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index 5610ef34a..dbbecd493 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -24,7 +24,7 @@
             <ContextMenu :model="menuModel" ref="cm" />
 		</div>
 
-        <AppDoc name="DataTableContextMenuDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
@@ -46,7 +46,8 @@ export default {
                     content: `
 <template>
     <div>
-        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu" responsiveLayout="scroll">
+        <Toast />
+        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
             <Column field="code" header="Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
@@ -91,7 +92,7 @@ export default {
         },
         deleteProduct(product) {
             this.products = this.products.filter((p) => p.id !== product.id);
-            this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
+            this.$toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name});
             this.selectedProduct = null;
         },
         formatCurrency(value) {
@@ -107,7 +108,8 @@ export default {
                     content: `
 <template>
     <div>
-        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu" responsiveLayout="scroll">
+        <Toast />
+        <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
             <Column field="code" header="Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
@@ -139,8 +141,8 @@ export default {
         const productService = ref(new ProductService());
         const selectedProduct = ref();
         const menuModel = ref([
-            {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
-            {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
+            {label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct)},
+            {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct)}
         ]);
         const onRowContextMenu = (event) => {
             cm.value.show(event.originalEvent);
@@ -149,8 +151,8 @@ export default {
             toast.add({severity: 'info', summary: 'Product Selected', detail: product.name});
         };
         const deleteProduct = (product) => {
-            products.value = products.value.filter((p) => p.id !== product.id);
-            toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
+            products.value = products.value.filter((p) => p.id !== product.value.id);
+            toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name});
             selectedProduct.value = null;
         };
         const formatCurrency = (value) => {
@@ -182,7 +184,7 @@ export default {
         },
         deleteProduct(product) {
             this.products = this.products.filter((p) => p.id !== product.id);
-            this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
+            this.$toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name});
             this.selectedProduct = null;
         },
         formatCurrency(value) {
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 211ec61e5..fad827073 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -158,7 +158,7 @@
             </Dialog>
 		</div>
 
-       <AppDoc name="DataTableCrudDemo" :sources="sources" service="ProductService" :data="['products']" />
+       <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index da03b30d0..299164f36 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content-section documentation">
-        <AppDoc name="DataTableDemo" :sources="sources" service="CustomerService" :data="['customers-large']">
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
             <h5>Import</h5>
 			<pre v-code.script><code>
 import DataTable from 'primevue/datatable';
diff --git a/src/views/datatable/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
index c3cdd1373..02eb30212 100755
--- a/src/views/datatable/DataTableDynamicColumnsDemo.vue
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -15,7 +15,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
                     
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index 79fd1ea6c..80864b6b0 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -92,7 +92,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableEditDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index 4843389df..d33c0d33f 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -23,7 +23,7 @@
             </div>
 		</div>
         
-        <AppDoc name="DataTableExportDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 8303d0dff..4a68a7dae 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -208,7 +208,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableFilterDemo" :sources="sources" service="CustomerService" :data="['customers-large']" />
+        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableFlexScrollDemo.vue b/src/views/datatable/DataTableFlexScrollDemo.vue
index 1e160d71e..c5e174172 100644
--- a/src/views/datatable/DataTableFlexScrollDemo.vue
+++ b/src/views/datatable/DataTableFlexScrollDemo.vue
@@ -11,7 +11,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" service="CustomerService" :data="['customers-large']" />    
+        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />    
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
index 8853b37f5..3a1bd6f6d 100644
--- a/src/views/datatable/DataTableGridLinesDemo.vue
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -24,7 +24,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableGridLinesDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index a5279fad7..fdbd1332e 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -39,7 +39,7 @@
             </div>
 		</div>
  
-        <AppDoc name="DataTableLazyDemo" :sources="sources" service="CustomerService" />
+        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index f734557db..b89a1dfa8 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -27,7 +27,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTablePaginatorDemo" :sources="sources" service="CustomerService" :data="['customers-large']" />
+        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
                   
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index 9ba6a1043..90ecbb418 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -16,7 +16,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableReorderDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index 174442877..d1e510926 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -54,7 +54,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableResponsiveDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index aed39253e..faac26f49 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -69,7 +69,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableRowExpandDemo" :sources="sources" service="ProductService" :data="['products-orders-small']" />
+        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" />
             
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index f9d5fa15f..486663822 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -105,7 +105,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableRowGroupDemo" :sources="sources" service="CustomerService" :data="['customers-medium']" />
+        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index 96e0999f1..a930cf577 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -125,7 +125,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableScrollDemo" :sources="sources" service="CustomerService" :data="['customers-medium', 'customers-large']" />
+        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index f1e885000..09a98b530 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -81,7 +81,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSelectionDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
                   
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index 2011e1709..c6144c637 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -45,7 +45,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSizeDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
     
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index 10baaaf32..160eb9c22 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -70,7 +70,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSortDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index d7b21684d..794297be8 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -127,7 +127,7 @@
             </div>
 		</div>
               
-        <AppDoc name="DataTableStateDemo" :sources="sources" service="CustomerService" :data="['customers-medium']" />
+        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
index 3e8ed1c1b..01bfd1d67 100644
--- a/src/views/datatable/DataTableStripedDemo.vue
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -18,7 +18,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableStripedDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 2bf95322a..23c6132f0 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -24,7 +24,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableStyleDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index 2431bfa95..de01e0fa6 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -44,7 +44,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableTemplatingDemo" :sources="sources" service="ProductService" :data="['products-small']" />
+        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 
 	</div>
 </template>
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 3372df7ff..9c88c135d 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DataViewDemo" :sources="sources" service="ProductService" :data="['products']">
+	<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']">
         <h5>Import</h5>
 
 <pre v-code.script><code>
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index bac7917c2..35f2b29e7 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DeferredContentDemo" :sources="sources" service="ProductService" :data="['products-small']">
+	<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
diff --git a/src/views/filterservice/FilterServiceDoc.vue b/src/views/filterservice/FilterServiceDoc.vue
index c4211771a..65a075363 100644
--- a/src/views/filterservice/FilterServiceDoc.vue
+++ b/src/views/filterservice/FilterServiceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FilterServiceDemo" :sources="sources" service="CustomerService" :data="['customers-large']">
+	<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import &#123;FilterService&#125; from 'primevue/api';
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 3097f9d99..f500cbc35 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -107,7 +107,7 @@
             </div>
         </div>
 
-        <AppDoc name="FloatLabelDemo" :sources="sources" service="CountryService" :data="['countries']" />
+        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService']" :data="['countries']" />
     </div>
 </template>
 
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index 725a9604a..a28816dba 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -1,9 +1,7 @@
-<template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Getting Started</h5>
-				<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
+<template>	
+    <AppDoc name="FormLayoutDemo" :sources="sources">
+        <h5>Getting Started</h5>
+		<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
 <pre v-code><code>
 &lt;div class="p-field"&gt;
     &lt;label for="fieldId"&gt;Label&lt;/label&gt;
@@ -12,8 +10,8 @@
 
 </code></pre>
 
-                <h5>Vertical Layout</h5>
-                <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
+        <h5>Vertical Layout</h5>
+        <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
 <pre v-code><code>
 &lt;div class="p-fluid"&gt;
     &lt;div class="p-field"&gt;
@@ -28,9 +26,9 @@
 
 </code></pre>
 
-                <h5>Vertical Layout with Grid</h5>
-                <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
-                below arranges two fields to be displayed next two each other.</p>
+        <h5>Vertical Layout with Grid</h5>
+        <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
+        below arranges two fields to be displayed next two each other.</p>
 <pre v-code><code>
 &lt;div class="p-fluid p-formgrid p-grid"&gt;
         &lt;div class="p-field p-col"&gt;
@@ -45,10 +43,10 @@
 
 </code></pre>
 
-                <h5>Horizontal and Fixed Width</h5>
-                <p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
-                    example, label has a fixed width where container of the inputs gets the remaining space.
-                </p>
+        <h5>Horizontal and Fixed Width</h5>
+        <p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
+            example, label has a fixed width where container of the inputs gets the remaining space.
+        </p>
 <pre v-code><code>
 &lt;div class="p-field p-grid"&gt;
     &lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
@@ -65,8 +63,8 @@
 
 </code></pre>
 
-                <h5>Horizontal and Fluid</h5>
-                <p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
+        <h5>Horizontal and Fluid</h5>
+        <p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
 <pre v-code><code>
 &lt;div class="p-fluid"&gt;
     &lt;div class="p-field p-grid"&gt;
@@ -85,9 +83,9 @@
 
 </code></pre>
 
-                <h5>Inline</h5>
-                <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
-                    are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
+        <h5>Inline</h5>
+        <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
+            are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
 <pre v-code><code>
 &lt;div class="p-formgroup-inline"&gt;
     &lt;div class="p-field"&gt;
@@ -103,9 +101,9 @@
 
 </code></pre>
 
-                <h5>Checkbox and RadioButton</h5>
-                <p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
-                Examples here demonstrates vertical and horizontal layout alternatives.</p>
+        <h5>Checkbox and RadioButton</h5>
+        <p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
+        Examples here demonstrates vertical and horizontal layout alternatives.</p>
 <pre v-code><code>
 &lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
 &lt;div class="p-field-checkbox"&gt;
@@ -156,8 +154,8 @@
 
 </code></pre>
 
-                <h5>Helper text</h5>
-                <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
+        <h5>Helper text</h5>
+        <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
 <pre v-code><code>
 &lt;div class="p-field p-fluid"&gt;
     &lt;label for="username"&gt;Username&lt;/label&gt;
@@ -167,8 +165,8 @@
 
 </code></pre>
 
-                <h5>Advanced Forms</h5>
-                <p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
+        <h5>Advanced Forms</h5>
+        <p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
 <pre v-code><code>
 &lt;div class="p-fluid p-formgrid p-grid"&gt;
     &lt;div class="p-field p-col-12 p-md-6"&gt;
@@ -199,385 +197,202 @@
 
 </code></pre>
 
-                <h5>Customization</h5>
-                <p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>
+        <h5>Customization</h5>
+        <p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>
 
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Variable</th>
-                                <th>Default</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>$fieldMargin</td>
-                                <td>1em</td>
-                            </tr>
-                            <tr>
-                                <td>$fieldLabelMargin</td>
-                                <td>.5em</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
-
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/formlayout" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="FormLayoutDemo" :sources="sources" :components="['InputText', 'Button', 'Checkbox', 'RadioButton', 'Textarea', 'Dropdown']" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;h3&gt;Vertical&lt;/h3&gt;
-&lt;div class="p-fluid"&gt;
-    &lt;div class="p-field"&gt;
-        &lt;label for="firstname1"&gt;Firstname&lt;/label&gt;
-        &lt;InputText id="firstname1" type="text" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field"&gt;
-        &lt;label for="lastname1"&gt;Lastname&lt;/label&gt;
-        &lt;InputText id="lastname1" type="text" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Vertical and Grid&lt;/h3&gt;
-&lt;div class="p-fluid p-formgrid p-grid"&gt;
-    &lt;div class="p-field p-col"&gt;
-        &lt;label for="firstname2"&gt;Firstname&lt;/label&gt;
-        &lt;InputText id="firstname2" type="text" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-col"&gt;
-        &lt;label for="lastname2"&gt;Lastname&lt;/label&gt;
-        &lt;InputText id="lastname2" type="text" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Horizontal and Fixed Width&lt;/h3&gt;
-&lt;div class="p-field p-grid"&gt;
-    &lt;label for="firstname3" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
-    &lt;div class="p-col"&gt;
-        &lt;InputText id="firstname3" type="text" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="p-field p-grid"&gt;
-    &lt;label for="lastname3" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
-    &lt;div class="p-col"&gt;
-        &lt;InputText id="lastname3" type="text" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Horizontal and Fluid&lt;/h3&gt;
-&lt;div class="p-fluid"&gt;
-    &lt;div class="p-field p-grid"&gt;
-        &lt;label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
-        &lt;div class="p-col-12 p-md-10"&gt;
-            &lt;InputText id="firstname4" type="text" /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-grid"&gt;
-        &lt;label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Lastname&lt;/label&gt;
-        &lt;div class="p-col-12 p-md-10"&gt;
-            &lt;InputText id="lastname4" type="text" /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Inline&lt;/h3&gt;
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;div class="p-field"&gt;
-        &lt;label for="firstname5" class="p-sr-only"&gt;Firstname&lt;/label&gt;
-        &lt;InputText id="firstname5" type="text" placeholder="Firstname" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field"&gt;
-        &lt;label for="lastname5" class="p-sr-only"&gt;Lastname&lt;/label&gt;
-        &lt;InputText id="lastname5" type="text" placeholder="Lastname" /&gt;
-    &lt;/div&gt;
-    &lt;Button type="button" label="Submit" /&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
-&lt;div class="p-field-checkbox"&gt;
-    &lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
-    &lt;label for="city1"&gt;Chicago&lt;/label&gt;
-&lt;/div&gt;
-&lt;div class="p-field-checkbox"&gt;
-    &lt;Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /&gt;
-    &lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Horizontal Checkbox&lt;/h3&gt;
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;div class="p-field-checkbox"&gt;
-        &lt;Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /&gt;
-        &lt;label for="city3"&gt;Chicago&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field-checkbox"&gt;
-        &lt;Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /&gt;
-        &lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
-&lt;div class="p-field-radiobutton"&gt;
-    &lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
-    &lt;label for="city5"&gt;Chicago&lt;/label&gt;
-&lt;/div&gt;
-&lt;div class="p-field-radiobutton"&gt;
-    &lt;RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /&gt;
-    &lt;label for="city6"&gt;Los Angeles&lt;/label&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;div class="p-field-radiobutton"&gt;
-        &lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt;
-        &lt;label for="city7"&gt;Chicago&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field-radiobutton"&gt;
-        &lt;RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /&gt;
-        &lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Help Text&lt;/h3&gt;
-&lt;div class="p-field p-fluid"&gt;
-    &lt;label for="username"&gt;Username&lt;/label&gt;
-    &lt;InputText id="username" type="username" aria-describedby="username-help" /&gt;
-    &lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
-&lt;/div&gt;
-
-&lt;h3&gt;Advanced&lt;/h3&gt;
-&lt;div class="p-fluid p-formgrid p-grid"&gt;
-    &lt;div class="p-field p-col-12 p-md-6"&gt;
-        &lt;label for="firstname6"&gt;Firstname&lt;/label&gt;
-        &lt;InputText id="firstname6" type="text" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-6"&gt;
-        &lt;label for="lastname6"&gt;Lastname&lt;/label&gt;
-        &lt;InputText id="lastname6" type="text" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-col-12"&gt;
-        &lt;label for="address"&gt;Address&lt;/label&gt;
-        &lt;Textarea id="address" rows="4" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-6"&gt;
-        &lt;label for="city"&gt;City&lt;/label&gt;
-        &lt;InputText id="city" type="text" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-3"&gt;
-        &lt;label for="state"&gt;State&lt;/label&gt;
-        &lt;Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-3"&gt;
-        &lt;label for="zip"&gt;Zip&lt;/label&gt;
-        &lt;InputText id="zip" type="text" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-    data() {
-        return {
-            selectedState: null,
-            states: [
-                {name: 'Arizona', code: 'Arizona'},
-                {name: 'California', value: 'California'},
-                {name: 'Florida', code: 'Florida'},
-                {name: 'Ohio', code: 'Ohio'},
-                {name: 'Washington', code: 'Washington'}
-            ],
-            cities1: [],
-            cities2: [],
-            city1: null,
-            city2: null
-        }
-    }
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Variable</th>
+                        <th>Default</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>$fieldMargin</td>
+                        <td>1em</td>
+                    </tr>
+                    <tr>
+                        <td>$fieldLabelMargin</td>
+                        <td>.5em</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Vertical</h5>
-                <div class="p-fluid">
-                    <div class="p-field">
-                        <label for="firstname1">Firstname</label>
-                        <InputText id="firstname1" type="text" />
-                    </div>
-                    <div class="p-field">
-                        <label for="lastname1">Lastname</label>
-                        <InputText id="lastname1" type="text" />
-                    </div>
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div>
+        <div class="card">
+            <h5>Vertical</h5>
+            <div class="p-fluid">
+                <div class="p-field">
+                    <label for="firstname1">Firstname</label>
+                    <InputText id="firstname1" type="text" />
+                </div>
+                <div class="p-field">
+                    <label for="lastname1">Lastname</label>
+                    <InputText id="lastname1" type="text" />
                 </div>
             </div>
+        </div>
 
-            <div class="card">
-                <h5>Vertical and Grid</h5>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col">
-                        <label for="firstname2">Firstname</label>
-                        <InputText id="firstname2" type="text" />
-                    </div>
-                    <div class="p-field p-col">
-                        <label for="lastname2">Lastname</label>
-                        <InputText id="lastname2" type="text" />
-                    </div>
+        <div class="card">
+            <h5>Vertical and Grid</h5>
+            <div class="p-fluid p-formgrid p-grid">
+                <div class="p-field p-col">
+                    <label for="firstname2">Firstname</label>
+                    <InputText id="firstname2" type="text" />
+                </div>
+                <div class="p-field p-col">
+                    <label for="lastname2">Lastname</label>
+                    <InputText id="lastname2" type="text" />
                 </div>
             </div>
+        </div>
 
-            <div class="card">
-                <h5>Horizontal and Fixed Width</h5>
+        <div class="card">
+            <h5>Horizontal and Fixed Width</h5>
+            <div class="p-field p-grid">
+                <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
+                <div class="p-col">
+                    <InputText id="firstname3" type="text" />
+                </div>
+            </div>
+            <div class="p-field p-grid">
+                <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
+                <div class="p-col">
+                    <InputText id="lastname3" type="text" />
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Horizontal and Fluid</h5>
+            <div class="p-fluid">
                 <div class="p-field p-grid">
-                    <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
-                    <div class="p-col">
-                        <InputText id="firstname3" type="text" />
+                    <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
+                    <div class="p-col-12 p-md-10">
+                        <InputText id="firstname4" type="text" />
                     </div>
                 </div>
                 <div class="p-field p-grid">
-                    <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
-                    <div class="p-col">
-                        <InputText id="lastname3" type="text" />
+                    <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
+                    <div class="p-col-12 p-md-10">
+                        <InputText id="lastname4" type="text" />
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div class="card">
-                <h5>Horizontal and Fluid</h5>
-                <div class="p-fluid">
-                    <div class="p-field p-grid">
-                        <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
-                        <div class="p-col-12 p-md-10">
-                            <InputText id="firstname4" type="text" />
-                        </div>
-                    </div>
-                    <div class="p-field p-grid">
-                        <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
-                        <div class="p-col-12 p-md-10">
-                            <InputText id="lastname4" type="text" />
-                        </div>
-                    </div>
+        <div class="card">
+            <h5>Inline</h5>
+            <div class="p-formgroup-inline">
+                <div class="p-field">
+                    <label for="firstname5" class="p-sr-only">Firstname</label>
+                    <InputText id="firstname5" type="text" placeholder="Firstname" />
                 </div>
+                <div class="p-field">
+                    <label for="lastname5" class="p-sr-only">Lastname</label>
+                    <InputText id="lastname5" type="text" placeholder="Lastname" />
+                </div>
+                <Button type="button" label="Submit" />
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Vertical Checkbox</h5>
+            <div class="p-field-checkbox">
+                <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
+                <label for="city1">Chicago</label>
+            </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
+                <label for="city2">Los Angeles</label>
             </div>
 
-            <div class="card">
-                <h5>Inline</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field">
-                        <label for="firstname5" class="p-sr-only">Firstname</label>
-                        <InputText id="firstname5" type="text" placeholder="Firstname" />
-                    </div>
-                    <div class="p-field">
-                        <label for="lastname5" class="p-sr-only">Lastname</label>
-                        <InputText id="lastname5" type="text" placeholder="Lastname" />
-                    </div>
-                    <Button type="button" label="Submit" />
-                </div>
-            </div>
-
-            <div class="card">
-                <h5>Vertical Checkbox</h5>
+            <h5>Horizontal Checkbox</h5>
+            <div class="p-formgroup-inline">
                 <div class="p-field-checkbox">
-                    <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
-                    <label for="city1">Chicago</label>
+                    <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
+                    <label for="city3">Chicago</label>
                 </div>
                 <div class="p-field-checkbox">
-                    <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
-                    <label for="city2">Los Angeles</label>
-                </div>
-
-                <h5>Horizontal Checkbox</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field-checkbox">
-                        <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
-                        <label for="city3">Chicago</label>
-                    </div>
-                    <div class="p-field-checkbox">
-                        <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
-                        <label for="city4">Los Angeles</label>
-                    </div>
+                    <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
+                    <label for="city4">Los Angeles</label>
                 </div>
             </div>
+        </div>
 
-            <div class="card">
-                <h5>Vertical RadioButton</h5>
+        <div class="card">
+            <h5>Vertical RadioButton</h5>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
+                <label for="city5">Chicago</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
+                <label for="city6">Los Angeles</label>
+            </div>
+
+            <h5>Horizontal RadioButton</h5>
+            <div class="p-formgroup-inline">
                 <div class="p-field-radiobutton">
-                    <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
-                    <label for="city5">Chicago</label>
+                    <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
+                    <label for="city7">Chicago</label>
                 </div>
                 <div class="p-field-radiobutton">
-                    <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
-                    <label for="city6">Los Angeles</label>
-                </div>
-
-                <h5>Horizontal RadioButton</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field-radiobutton">
-                        <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
-                        <label for="city7">Chicago</label>
-                    </div>
-                    <div class="p-field-radiobutton">
-                        <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
-                        <label for="city8">Los Angeles</label>
-                    </div>
+                    <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
+                    <label for="city8">Los Angeles</label>
                 </div>
             </div>
+        </div>
 
-            <div class="card">
-                <h5>Help Text</h5>
-                <div class="p-field p-fluid">
-                    <label for="username">Username</label>
-                    <InputText id="username" type="username" aria-describedby="username-help" />
-                    <small id="username-help">Enter your username to reset your password.</small>
-                </div>
+        <div class="card">
+            <h5>Help Text</h5>
+            <div class="p-field p-fluid">
+                <label for="username">Username</label>
+                <InputText id="username" type="username" aria-describedby="username-help" />
+                <small id="username-help">Enter your username to reset your password.</small>
             </div>
+        </div>
 
-            <div class="card">
-                <h5>Advanced</h5>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12 p-md-6">
-                        <label for="firstname6">Firstname</label>
-                        <InputText id="firstname6" type="text" />
-                    </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <label for="lastname6">Lastname</label>
-                        <InputText id="lastname6" type="text" />
-                    </div>
-                    <div class="p-field p-col-12">
-                        <label for="address">Address</label>
-                        <Textarea id="address" rows="4" />
-                    </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <label for="city">City</label>
-                        <InputText id="city" type="text" />
-                    </div>
-                    <div class="p-field p-col-12 p-md-3">
-                        <label for="state">State</label>
-                        <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
-                    </div>
-                    <div class="p-field p-col-12 p-md-3">
-                        <label for="zip">Zip</label>
-                        <InputText id="zip" type="text" />
-                    </div>
+        <div class="card">
+            <h5>Advanced</h5>
+            <div class="p-fluid p-formgrid p-grid">
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="firstname6">Firstname</label>
+                    <InputText id="firstname6" type="text" />
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="lastname6">Lastname</label>
+                    <InputText id="lastname6" type="text" />
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="address">Address</label>
+                    <Textarea id="address" rows="4" />
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="city">City</label>
+                    <InputText id="city" type="text" />
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="state">State</label>
+                    <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="zip">Zip</label>
+                    <InputText id="zip" type="text" />
                 </div>
             </div>
         </div>
@@ -602,8 +417,10 @@ export default {
             city2: null
         }
     }
-}`,
-                    style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
 @media screen and (max-width: 489px) {
     .p-formgroup-inline {
         .p-field {
@@ -619,13 +436,224 @@ export default {
 textarea {
     resize: none;
 }
-</style>`
+</style>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div>
+        <div class="card">
+            <h5>Vertical</h5>
+            <div class="p-fluid">
+                <div class="p-field">
+                    <label for="firstname1">Firstname</label>
+                    <InputText id="firstname1" type="text" />
+                </div>
+                <div class="p-field">
+                    <label for="lastname1">Lastname</label>
+                    <InputText id="lastname1" type="text" />
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Vertical and Grid</h5>
+            <div class="p-fluid p-formgrid p-grid">
+                <div class="p-field p-col">
+                    <label for="firstname2">Firstname</label>
+                    <InputText id="firstname2" type="text" />
+                </div>
+                <div class="p-field p-col">
+                    <label for="lastname2">Lastname</label>
+                    <InputText id="lastname2" type="text" />
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Horizontal and Fixed Width</h5>
+            <div class="p-field p-grid">
+                <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
+                <div class="p-col">
+                    <InputText id="firstname3" type="text" />
+                </div>
+            </div>
+            <div class="p-field p-grid">
+                <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
+                <div class="p-col">
+                    <InputText id="lastname3" type="text" />
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Horizontal and Fluid</h5>
+            <div class="p-fluid">
+                <div class="p-field p-grid">
+                    <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
+                    <div class="p-col-12 p-md-10">
+                        <InputText id="firstname4" type="text" />
+                    </div>
+                </div>
+                <div class="p-field p-grid">
+                    <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
+                    <div class="p-col-12 p-md-10">
+                        <InputText id="lastname4" type="text" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Inline</h5>
+            <div class="p-formgroup-inline">
+                <div class="p-field">
+                    <label for="firstname5" class="p-sr-only">Firstname</label>
+                    <InputText id="firstname5" type="text" placeholder="Firstname" />
+                </div>
+                <div class="p-field">
+                    <label for="lastname5" class="p-sr-only">Lastname</label>
+                    <InputText id="lastname5" type="text" placeholder="Lastname" />
+                </div>
+                <Button type="button" label="Submit" />
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Vertical Checkbox</h5>
+            <div class="p-field-checkbox">
+                <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
+                <label for="city1">Chicago</label>
+            </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
+                <label for="city2">Los Angeles</label>
+            </div>
+
+            <h5>Horizontal Checkbox</h5>
+            <div class="p-formgroup-inline">
+                <div class="p-field-checkbox">
+                    <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
+                    <label for="city3">Chicago</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
+                    <label for="city4">Los Angeles</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Vertical RadioButton</h5>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
+                <label for="city5">Chicago</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
+                <label for="city6">Los Angeles</label>
+            </div>
+
+            <h5>Horizontal RadioButton</h5>
+            <div class="p-formgroup-inline">
+                <div class="p-field-radiobutton">
+                    <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
+                    <label for="city7">Chicago</label>
+                </div>
+                <div class="p-field-radiobutton">
+                    <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
+                    <label for="city8">Los Angeles</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Help Text</h5>
+            <div class="p-field p-fluid">
+                <label for="username">Username</label>
+                <InputText id="username" type="username" aria-describedby="username-help" />
+                <small id="username-help">Enter your username to reset your password.</small>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Advanced</h5>
+            <div class="p-fluid p-formgrid p-grid">
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="firstname6">Firstname</label>
+                    <InputText id="firstname6" type="text" />
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="lastname6">Lastname</label>
+                    <InputText id="lastname6" type="text" />
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="address">Address</label>
+                    <Textarea id="address" rows="4" />
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="city">City</label>
+                    <InputText id="city" type="text" />
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="state">State</label>
+                    <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="zip">Zip</label>
+                    <InputText id="zip" type="text" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const selectedState = ref(null);
+        const states = ref([
+            {name: 'Arizona', code: 'Arizona'},
+            {name: 'California', value: 'California'},
+            {name: 'Florida', code: 'Florida'},
+            {name: 'Ohio', code: 'Ohio'},
+            {name: 'Washington', code: 'Washington'}
+        ]);
+        const cities1 = ref([]);
+        const cities2 = ref([]);
+        const city1 = ref(null);
+        const city2 = ref(null);
+
+        return { selectedState, states, cities1, cities2, city1, city2 }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 489px) {
+    .p-formgroup-inline {
+        .p-field {
+            margin-bottom: 1em !important;
+        }
+    }
+}
+
+.layout-content .content-section.implementation > h3 {
+    font-weight: 600;
+}
+
+textarea {
+    resize: none;
+}
+</style>
+`
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/fullcalendar/FullCalendarDoc.vue b/src/views/fullcalendar/FullCalendarDoc.vue
index aa56b396a..f7aabe9cc 100755
--- a/src/views/fullcalendar/FullCalendarDoc.vue
+++ b/src/views/fullcalendar/FullCalendarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FullCalendarDemo" :sources="sources" service="EventService" :data="['events']">
+	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import FullCalendar from 'primevue/fullcalendar';
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index 2cc859e1f..f66e06295 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" :data="['products-small']" >
+	<AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Inplace from 'primevue/inplace';
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index 9480ae363..fed5b64f2 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -49,7 +49,7 @@
             </div>
         </div>
 
-        <AppDoc name="InvalidDemo" :sources="sources" service="CountryService" :data="['countries']" />
+        <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService']" :data="['countries']" />
     </div>
 </template>
 
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index dea709520..5a19fe376 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -27,7 +27,7 @@ export default {
             default: null
         },
         service: {
-            type: String,
+            type: Array,
             default: null
         },
         data: {
@@ -142,8 +142,12 @@ export default {
             }
 
             if (this.service) {
-                let dataArr = [];
+                let dataArr = [], serviceArr = [];
                 
+                this.service.forEach(el => {
+                    serviceArr.push(el.split(','))
+                })
+
                 this.data.forEach(el => {
                     dataArr.push(el.split(','))
                 })
@@ -153,18 +157,14 @@ export default {
                         _files[`public/data/${el}.json`] = {
                             content: data[el]
                         };
-
-                        _files[`src/service/${this.service}.js`] = {
-                            content: `${services[this.service]}`
-                        };
                     });
                 }
 
-                else {
-                    _files[`src/service/${this.service}.js`] = {
-                            content: `${services[this.service]}`
+                serviceArr.forEach(serv => {
+                     _files[`src/service/${serv}.js`] = {
+                            content: `${services[serv]}`
                     };
-                }
+                })
             }
 
             element += `import ${name} from "./${name}.vue"`;
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 92c8f219a..da4c0dfbd 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="OrderListDemo" :sources="sources" service="ProductService" :data="['products-small']">
+	<AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import OrderList from 'primevue/orderlist';
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 5405990ec..18649d18e 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="OverlayPanelDemo" :sources="sources" service="ProductService" :data="['products-small']">
+	<AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import OverlayPanel from 'primevue/overlaypanel';
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 74b418030..5087871bc 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="PickListDemo" :sources="sources" service="ProductService" :data="['products-small']">
+	<AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import PickList from 'primevue/picklist';
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index 8be279093..0b9dc076a 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -516,524 +516,747 @@
             </div>
         </div>
 
-        <div class="content-section documentation">
-            <TabView>
-                <TabPanel header="Source">
-<pre v-code><code><template v-pre>
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12 p-md-6 p-fluid"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;InputText&lt;/h5&gt;
-            &lt;div class="p-grid p-formgrid"&gt;
-                &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-                    &lt;InputText type="text" placeholder="Default"&gt;&lt;/InputText&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-                    &lt;InputText type="text" placeholder="Disabled" :disabled="true"&gt;&lt;/InputText&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-                    &lt;InputText type="text" placeholder="Invalid" class="p-invalid" /&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;h5&gt;Icons&lt;/h5&gt;
-            &lt;div class="p-grid p-formgrid"&gt;
-                &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-                    &lt;span class="p-input-icon-left"&gt;
-                        &lt;i class="pi pi-user" /&gt;
-                        &lt;InputText type="text" placeholder="Username" /&gt;
-                    &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-                    &lt;span class="p-input-icon-right"&gt;
-                        &lt;InputText type="text" placeholder="Search" /&gt;
-                        &lt;i class="pi pi-search" /&gt;
-                    &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
-                    &lt;span class="p-input-icon-left p-input-icon-right"&gt;
-                        &lt;i class="pi pi-user" /&gt;
-                        &lt;InputText type="text" placeholder="Search" /&gt;
-                        &lt;i class="pi pi-search" /&gt;
-                    &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;h5&gt;Float Label&lt;/h5&gt;
-            &lt;span class="p-float-label"&gt;
-                &lt;InputText id="username" type="text" v-model="floatValue"/&gt;
-                &lt;label for="username"&gt;Username&lt;/label&gt;
-            &lt;/span&gt;
-
-            &lt;h5&gt;Textarea&lt;/h5&gt;
-            &lt;Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" /&gt;
-
-            &lt;h5&gt;AutoComplete&lt;/h5&gt;
-            &lt;AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/&gt;
-
-            &lt;h5&gt;Calendar&lt;/h5&gt;
-            &lt;Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"&gt;&lt;/Calendar&gt;
-
-            &lt;h5&gt;Spinner&lt;/h5&gt;
-            &lt;InputNumber v-model="inputNumberValue" showButtons mode="decimal"&gt;&lt;/InputNumber&gt;
-
-            &lt;h5&gt;Chips&lt;/h5&gt;
-            &lt;Chips v-model="chipsValue"/&gt;
-        &lt;/div&gt;
-
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Slider&lt;/h5&gt;
-            &lt;InputText v-model.number="sliderValue" /&gt;
-            &lt;Slider v-model="sliderValue" /&gt;
-
-            &lt;h5&gt;Rating&lt;/h5&gt;
-            &lt;Rating v-model="ratingValue"/&gt;
-
-            &lt;h5&gt;Input Switch&lt;/h5&gt;
-            &lt;InputSwitch v-model="switchValue" /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-md-6"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;RadioButton&lt;/h5&gt;
-            &lt;div class="p-grid"&gt;
-                &lt;div class="p-col-12 p-md-4"&gt;
-                    &lt;div class="p-field-radiobutton"&gt;
-                        &lt;RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" /&gt;
-                        &lt;label for="option1"&gt;Option 1&lt;/label&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-4"&gt;
-                    &lt;div class="p-field-radiobutton"&gt;
-                        &lt;RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" /&gt;
-                        &lt;label for="option2"&gt;Option 2&lt;/label&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-4"&gt;
-                    &lt;div class="p-field-radiobutton"&gt;
-                        &lt;RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" /&gt;
-                        &lt;label for="option3"&gt;Option 3&lt;/label&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;h5&gt;Checkbox&lt;/h5&gt;
-            &lt;div class="p-grid"&gt;
-                &lt;div class="p-col-12 p-md-4"&gt;
-                    &lt;div class="p-field-checkbox"&gt;
-                        &lt;Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" /&gt;
-                        &lt;label for="checkOption1"&gt;Option 1&lt;/label&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-4"&gt;
-                    &lt;div class="p-field-checkbox"&gt;
-                        &lt;Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" /&gt;
-                        &lt;label for="checkOption2"&gt;Option 2&lt;/label&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-4"&gt;
-                    &lt;div class="p-field-checkbox"&gt;
-                        &lt;Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" /&gt;
-                        &lt;label for="checkOption3"&gt;Option 3&lt;/label&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="card p-fluid"&gt;
-            &lt;h5&gt;Listbox&lt;/h5&gt;
-            &lt;Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/&gt;
-
-            &lt;h5&gt;Dropdown&lt;/h5&gt;
-            &lt;Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" /&gt;
-
-            &lt;h5&gt;MultiSelect&lt;/h5&gt;
-            &lt;MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"&gt;&lt;/MultiSelect&gt;
-        &lt;/div&gt;
-
-        &lt;div class="card p-fluid"&gt;
-            &lt;h5&gt;ToggleButton&lt;/h5&gt;
-            &lt;ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No"/&gt;
-
-            &lt;h5&gt;SelectButton&lt;/h5&gt;
-            &lt;SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" /&gt;
-
-            &lt;h5&gt;SelectButton - Multiple&lt;/h5&gt;
-            &lt;SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Buttons&lt;/h5&gt;
-            &lt;Button label="Submit" class="p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-check" class="p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" /&gt;
-        
-            &lt;h5&gt;Severities&lt;/h5&gt;
-            &lt;Button label="Primary" class="p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Success" class="p-button-success p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Info" class="p-button-info p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Help" class="p-button-help p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" /&gt;
-
-            &lt;h5&gt;Raised Buttons&lt;/h5&gt;
-            &lt;Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Danger" class="p-button-raised p-button-danger p-mb-2" /&gt;
-
-            &lt;h5&gt;Rounded Buttons&lt;/h5&gt;
-            &lt;Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" /&gt;
-
-            &lt;h5&gt;Text Buttons&lt;/h5&gt;
-            &lt;Button label="Primary" class="p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Plain" class="p-button-text p-button-plain p-mb-2" /&gt;
-
-            &lt;h5&gt;Raised Text Buttons&lt;/h5&gt;
-            &lt;Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" /&gt;
-
-            &lt;h5&gt;Outlined Buttons&lt;/h5&gt;
-            &lt;Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" /&gt;
-            &lt;Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" /&gt;
-
-            &lt;h5&gt;Rounded Icon Buttons&lt;/h5&gt;
-            &lt;Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" /&gt;
-
-            &lt;h5&gt;Rounded Text Icon Buttons&lt;/h5&gt;
-            &lt;Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" /&gt;
-
-            &lt;h5&gt;Rounded and Outlined Icon Buttons&lt;/h5&gt;
-            &lt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" /&gt;
-            &lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" /&gt;
-
-            &lt;h5&gt;Badges&lt;/h5&gt;
-            &lt;Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" /&gt;
-            &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" /&gt;
-
-            &lt;h5&gt;Button Set&lt;/h5&gt;
-            &lt;span class="p-buttonset"&gt;
-                &lt;Button label="Save" icon="pi pi-check" /&gt;
-                &lt;Button label="Delete" icon="pi pi-trash" /&gt;
-                &lt;Button label="Cancel" icon="pi pi-times" /&gt;
-            &lt;/span&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12"&gt;
-        &lt;div class="card"&gt;
-            &lt;DataTable :value="customers" :paginator="true" :rows="10"
-                dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
-                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
-                &lt;template #header&gt;
-                    &lt;div class="p-d-flex p-ai-center p-jc-between"&gt;
-                        DataTable
-                        &lt;span class="p-input-icon-left"&gt;
-                            &lt;i class="pi pi-search" /&gt;
-                            &lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
-                        &lt;/span&gt;
-                    &lt;/div&gt;
-                &lt;/template&gt;
-                &lt;template #empty&gt;
-                    No customers found.
-                &lt;/template&gt;
-                &lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
-                &lt;Column field="name" header="Name" :sortable="true"&gt;
-                    &lt;template #body="slotProps"&gt;
-                        {{slotProps.data.name}}
-                    &lt;/template&gt;
-                &lt;/Column&gt;
-                &lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
-                    &lt;template #body="slotProps"&gt;
-                        &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" /&gt;
-                        &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
-                    &lt;/template&gt;
-                &lt;/Column&gt;
-                &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
-                    &lt;template #body="slotProps"&gt;
-                        &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
-                    &lt;/template&gt;
-                &lt;/Column&gt;
-                &lt;Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte"&gt;
-                    &lt;template #body="slotProps"&gt;
-                        &lt;ProgressBar :value="slotProps.data.activity" :showValue="false" /&gt;
-                    &lt;/template&gt;
-                &lt;/Column&gt;
-            &lt;/DataTable&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-6"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;AccordionPanel&lt;/h5&gt;
-            &lt;Accordion :multiple="true" :activeIndex="[0]"&gt;
-                &lt;AccordionTab header="Header I"&gt;
-                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
-                &lt;/AccordionTab&gt;
-                &lt;AccordionTab header="Header II"&gt;
-                    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
-                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-                        Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
-                &lt;/AccordionTab&gt;
-                &lt;AccordionTab header="Header III"&gt;
-                    &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
-                        et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
-                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
-                        quo minus.&lt;/p&gt;
-                &lt;/AccordionTab&gt;
-            &lt;/Accordion&gt;
-        &lt;/div&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;TabView&lt;/h5&gt;
-            &lt;TabView&gt;
-                &lt;TabPanel header="Header I"&gt;
-                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&lt;/TabPanel&gt;
-                &lt;TabPanel header="Header II"&gt;
-                    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
-                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-                        Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
-                &lt;/TabPanel&gt;
-                &lt;TabPanel header="Header III"&gt;
-                    &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
-                        et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
-                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
-                        quo minus.&lt;/p&gt;
-                &lt;/TabPanel&gt;
-            &lt;/TabView&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-6"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Panel&lt;/h5&gt;
-            &lt;Panel header="Header" :toggleable="true"&gt;
-                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
-            &lt;/Panel&gt;
-        &lt;/div&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Fieldset&lt;/h5&gt;
-            &lt;Fieldset legend="Legend" :toggleable="true"&gt;
-                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
-            &lt;/Fieldset&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;div class="card p-fluid"&gt;
-            &lt;h5&gt;Overlay Panel&lt;/h5&gt;
-            &lt;Button type="button" label="Choose" @click="toggle" icon="pi pi-search" /&gt;
-            &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}"&gt;
-                &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
-                    &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
-                    &lt;Column header="Image"&gt;
-                        &lt;template #body="slotProps"&gt;
-                            &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
-                        &lt;/template&gt;
-                    &lt;/Column&gt;
-                    &lt;Column field="price" header="Price" sortable&gt;
-                        &lt;template #body="slotProps"&gt;
-                            {{formatCurrency(slotProps.data.price)}}
-                        &lt;/template&gt;
-                    &lt;/Column&gt;
-                &lt;/DataTable&gt;
-            &lt;/OverlayPanel&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;div class="card p-fluid"&gt;
-            &lt;h5&gt;Dialog&lt;/h5&gt;
-            &lt;Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true"&gt;
-                &lt;p&gt;
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
-                    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                &lt;/p&gt;
-                &lt;template #footer&gt;
-                    &lt;Button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"/&gt;
-                &lt;/template&gt;
-            &lt;/Dialog&gt;
-            &lt;Button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"/&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;div class="card p-fluid"&gt;
-            &lt;h5&gt;Confirm Popup&lt;/h5&gt;
-            &lt;Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" /&gt;
-            &lt;ConfirmPopup group="popup"&gt;&lt;/ConfirmPopup&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;div class="card p-fluid"&gt;
-            &lt;h5&gt;Confirm Dialog&lt;/h5&gt;
-            &lt;Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" /&gt;
-            &lt;ConfirmDialog group="dialog"&gt;&gt;&lt;/ConfirmDialog&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;div class="card card-w-title"&gt;
-            &lt;h5&gt;Menubar&lt;/h5&gt;
-            &lt;Menubar :model="tieredMenuItems"&gt;
-                &lt;template #end&gt;
-                    &lt;span class="p-input-icon-left"&gt;
-                        &lt;i class="pi pi-search" /&gt;
-                        &lt;InputText type="text" placeholder="Search" /&gt;
-                    &lt;/span&gt;
-                &lt;/template&gt;
-            &lt;/Menubar&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Plain Menu&lt;/h5&gt;
-            &lt;Menu :model="menuitems" /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Overlay Menu&lt;/h5&gt;
-
-            &lt;Menu ref="menu" :model="menuitems" :popup="true" /&gt;
-            &lt;Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"/&gt;
-        &lt;/div&gt;
-
-        &lt;div class="card" @contextmenu="onContextRightClick"&gt;
-            &lt;h5&gt;ContextMenu&lt;/h5&gt;
-            Right click to display.
-            &lt;ContextMenu ref="contextMenu" :model="contextMenuItems" /&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-lg-6"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Messages&lt;/h5&gt;
-            &lt;Message severity="info"&gt;Info Message&lt;/Message&gt;
-            &lt;Message severity="success"&gt;Success Message&lt;/Message&gt;
-            &lt;Message severity="warn"&gt;Warning Message&lt;/Message&gt;
-            &lt;Message severity="error"&gt;Error Message&lt;/Message&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-lg-6"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Toast&lt;/h5&gt;
-
-            &lt;Toast /&gt;
-            &lt;Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" /&gt;
-            &lt;Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" /&gt;
-            &lt;Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" /&gt;
-            &lt;Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" /&gt;
-        &lt;/div&gt;
-
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Timeline&lt;/h5&gt;
-            &lt;Timeline :value="timelineEvents" align="alternate"&gt;
-                &lt;template #content="slotProps"&gt;
-                    {{slotProps.item.status}}
-                &lt;/template&gt;
-            &lt;/Timeline&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-lg-8"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Inline Message&lt;/h5&gt;
-            &lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
-                &lt;label for="username1" class="p-sr-only"&gt;Username&lt;/label&gt;
-                &lt;InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" /&gt;
-                &lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
-            &lt;/div&gt;
-            &lt;div class="p-formgroup-inline"&gt;
-                &lt;label for="email" class="p-sr-only"&gt;email&lt;/label&gt;
-                &lt;InputText id="email" placeholder="Email" class="p-invalid p-mr-2" /&gt;
-                &lt;InlineMessage /&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="p-col-12 p-lg-4"&gt;
-        &lt;div class="card"&gt;
-            &lt;h5&gt;Helper Text&lt;/h5&gt;
-            &lt;div class="p-field p-fluid"&gt;
-                &lt;label for="username2"&gt;Username&lt;/label&gt;
-                &lt;InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" /&gt;
-                &lt;small id="username-help" class="p-error"&gt;Enter your username to reset your password.&lt;/small&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+        <AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" :data="['countries', 'customers-large', 'products-small']"></AppDoc>
+    </div>
 </template>
-</code></pre>
 
-<pre v-code.script><code>
+<script>
 import CustomerService from '../../service/CustomerService';
 import CountryService from '../../service/CountryService';
 import ProductService from '../../service/ProductService';
     
+export default {
+    data() {
+        return {
+
+            customers: null,
+            selectedCustomers: null,
+            products: null,
+            selectedProduct: null,
+            filters: {},
+            floatValue: null,
+            autoValue: null,
+            selectedAutoValue: null,
+            autoFilteredValue: [],
+            calendarValue: null,
+            inputNumberValue: null,
+            chipsValue: null,
+            sliderValue: null,
+            ratingValue: null,
+            colorValue: '1976D2',
+            radioValue: null,
+            checkboxValue: [],
+            switchValue: false,
+            display: false,
+            listboxValues: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            listboxValue: null,
+            dropdownValues: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            dropdownValue: null,
+            multiselectValue: null,
+            multiselectValues: [
+                {name: 'Australia', code: 'AU'},
+                {name: 'Brazil', code: 'BR'},
+                {name: 'China', code: 'CN'},
+                {name: 'Egypt', code: 'EG'},
+                {name: 'France', code: 'FR'},
+                {name: 'Germany', code: 'DE'},
+                {name: 'India', code: 'IN'},
+                {name: 'Japan', code: 'JP'},
+                {name: 'Spain', code: 'ES'},
+                {name: 'United States', code: 'US'}
+            ],
+            toggleValue: false,
+            selectButtonValues1: [
+                {name: 'Option 1', code: 'O1'},
+                {name: 'Option 2', code: 'O2'},
+                {name: 'Option 3', code: 'O3'},
+            ],
+            selectButtonValue1: null,
+            selectButtonValues2: [
+                {name: 'Option 1', code: 'O1'},
+                {name: 'Option 2', code: 'O2'},
+                {name: 'Option 3', code: 'O3'},
+            ],
+            selectButtonValue2: null,
+			tieredMenuItems: [
+				{
+					label:'Customers',
+					icon:'pi pi-fw pi-table',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-user-plus',
+							items:[
+								{
+									label:'Customer',
+									icon:'pi pi-fw pi-plus'
+								},
+								{
+									label:'Duplicate',
+									icon:'pi pi-fw pi-copy'
+								},
+
+							]
+						},
+						{
+							label:'Edit',
+							icon:'pi pi-fw pi-user-edit'
+						}
+					]
+				},
+				{
+					label:'Orders',
+					icon:'pi pi-fw pi-shopping-cart',
+					items:[
+						{
+							label:'View',
+							icon:'pi pi-fw pi-list'
+						},
+						{
+							label:'Search',
+							icon:'pi pi-fw pi-search'
+						},
+
+					]
+				},
+				{
+					label:'Shipments',
+					icon:'pi pi-fw pi-envelope',
+					items:[
+						{
+							label:'Tracker',
+							icon:'pi pi-fw pi-compass'
+
+						},
+						{
+							label:'Map',
+							icon:'pi pi-fw pi-map-marker'
+
+						},
+						{
+							label:'Manage',
+							icon:'pi pi-fw pi-pencil'
+						}
+					]
+				},
+				{
+					label:'Profile',
+					icon:'pi pi-fw pi-user',
+					items:[
+						{
+							label:'Settings',
+							icon:'pi pi-fw pi-cog'
+						},
+						{
+							label:'Billing',
+							icon:'pi pi-fw pi-file'
+						}
+					]
+				},
+				{
+					separator:true
+				},
+				{
+					label:'Quit',
+					icon:'pi pi-fw pi-sign-out'
+				}
+			],
+			menuitems: [
+				{
+					label:'Customers',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-plus',
+						},
+						{
+							label:'Edit',
+							icon:'pi pi-fw pi-user-edit'
+						}
+					]
+				},
+				{
+					label:'Orders',
+					items:[
+						{
+							label:'View',
+							icon:'pi pi-fw pi-list'
+						},
+						{
+							label:'Search',
+							icon:'pi pi-fw pi-search'
+						},
+
+					]
+				}
+			],
+			contextMenuItems: [
+				{
+					label: 'Save',
+					icon: 'pi pi-save'
+				},
+				{
+					label: 'Update',
+					icon: 'pi pi-refresh'
+				},
+				{
+					label: 'Delete',
+					icon: 'pi pi-trash'
+				},
+				{
+					separator: true
+				},
+				{
+					label: 'Options',
+					icon: 'pi pi-cog'
+				},
+            ],
+            message: [],
+            timelineEvents: [
+                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+            ],
+            sources: {
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div>
+        <h1>Responsive Design</h1>
+        <div class="p-grid">
+            <div class="p-col-12 p-md-6 p-fluid">
+                <div class="card">
+                    <h5>InputText</h5>
+                    <div class="p-grid p-formgrid">
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <InputText type="text" placeholder="Default"></InputText>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <InputText type="text" placeholder="Invalid" class="p-invalid" />
+                        </div>
+                    </div>
+
+                    <h5>Icons</h5>
+                    <div class="p-grid p-formgrid">
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-user" />
+                                <InputText type="text" placeholder="Username" />
+                            </span>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <span class="p-input-icon-right">
+                                <InputText type="text" placeholder="Search" />
+                                <i class="pi pi-search" />
+                            </span>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <span class="p-input-icon-left p-input-icon-right">
+                                <i class="pi pi-user" />
+                                <InputText type="text" placeholder="Search" />
+                                <i class="pi pi-search" />
+                            </span>
+                        </div>
+                    </div>
+
+                    <h5>Float Label</h5>
+                    <span class="p-float-label">
+                        <InputText id="username" type="text" v-model="floatValue"/>
+                        <label for="username">Username</label>
+                    </span>
+
+                    <h5>Textarea</h5>
+                    <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
+
+                    <h5>AutoComplete</h5>
+                    <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/>
+
+                    <h5>Calendar</h5>
+                    <Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
+
+                    <h5>Spinner</h5>
+                    <InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
+
+                    <h5>Chips</h5>
+                    <Chips v-model="chipsValue"/>
+                </div>
+
+                <div class="card">
+                    <h5>Slider</h5>
+                    <InputText v-model.number="sliderValue" />
+                    <Slider v-model="sliderValue" />
+
+                    <h5>Rating</h5>
+                    <Rating v-model="ratingValue"/>
+
+                    <h5>Input Switch</h5>
+                    <InputSwitch v-model="switchValue" />
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-6">
+                <div class="card">
+                    <h5>RadioButton</h5>
+                    <div class="p-grid">
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-radiobutton">
+                                <RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
+                                <label for="option1">Option 1</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-radiobutton">
+                                <RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
+                                <label for="option2">Option 2</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-radiobutton">
+                                <RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
+                                <label for="option3">Option 3</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h5>Checkbox</h5>
+                    <div class="p-grid">
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-checkbox">
+                                <Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
+                                <label for="checkOption1">Option 1</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-checkbox">
+                                <Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
+                                <label for="checkOption2">Option 2</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-checkbox">
+                                <Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
+                                <label for="checkOption3">Option 3</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card p-fluid">
+                    <h5>Listbox</h5>
+                    <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/>
+
+                    <h5>Dropdown</h5>
+                    <Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
+
+                    <h5>MultiSelect</h5>
+                    <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"></MultiSelect>
+                </div>
+
+                <div class="card p-fluid">
+                    <h5>ToggleButton</h5>
+                    <ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No"/>
+
+                    <h5>SelectButton</h5>
+                    <SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
+
+                    <h5>SelectButton - Multiple</h5>
+                    <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/>
+                </div>
+            </div>
+
+            <div class="p-col-12">
+                <div class="card">
+                    <h5>Buttons</h5>
+                    <Button label="Submit" class="p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
+                    <Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
+                    <Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
+                    <Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
+                    
+                    <h5>Severities</h5>
+                    <Button label="Primary" class="p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
+
+                    <h5>Raised Buttons</h5>
+                    <Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
+
+                    <h5>Rounded Buttons</h5>
+                    <Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
+
+                    <h5>Text Buttons</h5>
+                    <Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
+
+                    <h5>Raised Text Buttons</h5>
+                    <Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
+
+                    <h5>Outlined Buttons</h5>
+                    <Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
+                    <Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
+
+                    <h5>Rounded Icon Buttons</h5>
+                    <Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
+
+                    <h5>Rounded Text Icon Buttons</h5>
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
+
+                    <h5>Rounded and Outlined Icon Buttons</h5>
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
+
+                    <h5>Badges</h5>
+                    <Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
+                    <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
+
+                    <h5>Button Set</h5>
+                    <span class="p-buttonset">
+                        <Button label="Save" icon="pi pi-check" />
+                        <Button label="Delete" icon="pi pi-trash" />
+                        <Button label="Cancel" icon="pi pi-times" />
+                    </span>
+                </div>
+            </div>
+
+            <div class="p-col-12">
+                <div class="card">
+                    <DataTable :value="customers" :paginator="true" :rows="10"
+                        dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
+                        <template #header>
+                            <div class="p-d-flex p-ai-center p-jc-between">
+                                DataTable
+                                <span class="p-input-icon-left">
+                                    <i class="pi pi-search" />
+                                    <InputText v-model="filters['global']" placeholder="Global Search" />
+                                </span>
+                            </div>
+                        </template>
+                        <template #empty>
+                            No customers found.
+                        </template>
+                        <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                        <Column field="name" header="Name" :sortable="true" style="min-width:16rem">
+                            <template #body="slotProps">
+                                {{slotProps.data.name}}
+                            </template>
+                        </Column>
+                        <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
+                            <template #body="slotProps">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                <span class="image-text">{{slotProps.data.country.name}}</span>
+                            </template>
+                        </Column>
+                        <Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="min-width:16rem">
+                            <template #body="slotProps">
+                                <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                            </template>
+                        </Column>
+                        <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte" style="min-width:16rem">
+                            <template #body="slotProps">
+                                <ProgressBar :value="slotProps.data.activity" :showValue="false" style="width: 100px"/>
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-6">
+                <div class="card">
+                    <h5>AccordionPanel</h5>
+                    <Accordion :multiple="true" :activeIndex="[0]">
+                        <AccordionTab header="Header I">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </AccordionTab>
+                        <AccordionTab header="Header II">
+                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                                Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                        </AccordionTab>
+                        <AccordionTab header="Header III">
+                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                                et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                                Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                                quo minus.</p>
+                        </AccordionTab>
+                    </Accordion>
+                </div>
+
+                <div class="card">
+                    <h5>TabView</h5>
+                    <TabView>
+                        <TabPanel header="Header I">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></TabPanel>
+                        <TabPanel header="Header II">
+                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                                Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                        </TabPanel>
+                        <TabPanel header="Header III">
+                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                                et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                                Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                                quo minus.</p>
+                        </TabPanel>
+                    </TabView>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-6">
+                <div class="card">
+                    <h5>Panel</h5>
+                    <Panel header="Header" :toggleable="true">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </Panel>
+                </div>
+                <div class="card">
+                    <h5>Fieldset</h5>
+                    <Fieldset legend="Legend" :toggleable="true">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </Fieldset>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Overlay Panel</h5>
+                    <Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
+                    <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
+                        <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                            <Column field="name" header="Name" sortable></Column>
+                            <Column header="Image">
+                                <template #body="slotProps">
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
+                                </template>
+                            </Column>
+                            <Column field="price" header="Price" sortable>
+                                <template #body="slotProps">
+                                    {{formatCurrency(slotProps.data.price)}}
+                                </template>
+                            </Column>
+                        </DataTable>
+                    </OverlayPanel>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Dialog</h5>
+                    <Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+                            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                        <template #footer>
+                            <Button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"/>
+                        </template>
+                    </Dialog>
+                    <Button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"/>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Confirm Popup</h5>
+                    <Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
+                    <ConfirmPopup group="popup"></ConfirmPopup>
+                </div>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Confirm Dialog</h5>
+                    <Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
+                    <ConfirmDialog group="dialog">></ConfirmDialog>
+                </div>
+            </div>
+            <div class="p-col-12">
+                <div class="card card-w-title">
+                    <h5>Menubar</h5>
+                    <Menubar :model="tieredMenuItems">
+                        <template #end>
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-search" />
+                                <InputText type="text" placeholder="Search" />
+                            </span>
+                        </template>
+                    </Menubar>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-4">
+                <div class="card">
+                    <h5>Plain Menu</h5>
+                    <Menu :model="menuitems" />
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-4">
+                <div class="card">
+                    <h5>Overlay Menu</h5>
+
+                    <Menu ref="menu" :model="menuitems" :popup="true" />
+                    <Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"/>
+                </div>
+
+                <div class="card" @contextmenu="onContextRightClick">
+                    <h5>ContextMenu</h5>
+                    Right click to display.
+                    <ContextMenu ref="contextMenu" :model="contextMenuItems" />
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-6">
+                <div class="card">
+                    <h5>Messages</h5>
+                    <Message severity="info">Info Message</Message>
+                    <Message severity="success">Success Message</Message>
+                    <Message severity="warn">Warning Message</Message>
+                    <Message severity="error">Error Message</Message>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-6">
+                <div class="card">
+                    <h5>Toast</h5>
+
+                    <Toast />
+                    <Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
+                    <Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
+                    <Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
+                    <Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
+                </div>
+
+                <div class="card">
+                    <h5>Timeline</h5>
+                    <Timeline :value="timelineEvents" align="alternate">
+                        <template #content="slotProps">
+                            {{slotProps.item.status}}
+                        </template>
+                    </Timeline>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-8">
+                <div class="card">
+                    <h5>Inline Message</h5>
+                    <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                        <label for="username1" class="p-sr-only">Username</label>
+                        <InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
+                        <InlineMessage>Username is required</InlineMessage>
+                    </div>
+                    <div class="p-formgroup-inline">
+                        <label for="email" class="p-sr-only">email</label>
+                        <InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
+                        <InlineMessage />
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-4">
+                <div class="card">
+                    <h5>Helper Text</h5>
+                    <div class="p-field p-fluid">
+                        <label for="username2">Username</label>
+                        <InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
+                        <small id="username-help" class="p-error">Enter your username to reset your password.</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import CustomerService from './service/CustomerService';
+import CountryService from './service/CountryService';
+import ProductService from './service/ProductService';
+    
 export default {
     data() {
         return {
@@ -1322,223 +1545,958 @@ export default {
         }
     }
 }
+<\\/script>
 
-</code></pre>
-                </TabPanel>
-            </TabView>
+<style scoped lang="scss">
+.image-text {
+    vertical-align: middle;
+}
+
+.p-progressbar {
+    height: 4px;
+}
+
+.customer-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background-color: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-unqualified {
+        background-color: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-negotiation {
+        background-color: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.status-new {
+        background-color: #B3E5FC;
+        color: #23547B;
+    }
+
+    &.status-renewal {
+        background-color: #ECCFFF;
+        color: #694382;
+    }
+
+    &.status-proposal {
+        background-color: #FFD8B2;
+        color: #805B36;
+    }
+}
+
+.product-image {
+    width: 50px;
+    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
+}    
+
+::v-deep(.p-paginator) {
+    .p-paginator-current {
+        margin-left: auto;
+    }
+}
+</style>                    
+`
+                },
+                'composition-api': {
+                    tabName: 'composition API',
+                    content: `
+<template>
+    <div>
+        <h1>Responsive Design</h1>
+        <div class="p-grid">
+            <div class="p-col-12 p-md-6 p-fluid">
+                <div class="card">
+                    <h5>InputText</h5>
+                    <div class="p-grid p-formgrid">
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <InputText type="text" placeholder="Default"></InputText>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <InputText type="text" placeholder="Invalid" class="p-invalid" />
+                        </div>
+                    </div>
+
+                    <h5>Icons</h5>
+                    <div class="p-grid p-formgrid">
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-user" />
+                                <InputText type="text" placeholder="Username" />
+                            </span>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <span class="p-input-icon-right">
+                                <InputText type="text" placeholder="Search" />
+                                <i class="pi pi-search" />
+                            </span>
+                        </div>
+                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <span class="p-input-icon-left p-input-icon-right">
+                                <i class="pi pi-user" />
+                                <InputText type="text" placeholder="Search" />
+                                <i class="pi pi-search" />
+                            </span>
+                        </div>
+                    </div>
+
+                    <h5>Float Label</h5>
+                    <span class="p-float-label">
+                        <InputText id="username" type="text" v-model="floatValue"/>
+                        <label for="username">Username</label>
+                    </span>
+
+                    <h5>Textarea</h5>
+                    <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
+
+                    <h5>AutoComplete</h5>
+                    <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/>
+
+                    <h5>Calendar</h5>
+                    <Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
+
+                    <h5>Spinner</h5>
+                    <InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
+
+                    <h5>Chips</h5>
+                    <Chips v-model="chipsValue"/>
+                </div>
+
+                <div class="card">
+                    <h5>Slider</h5>
+                    <InputText v-model.number="sliderValue" />
+                    <Slider v-model="sliderValue" />
+
+                    <h5>Rating</h5>
+                    <Rating v-model="ratingValue"/>
+
+                    <h5>Input Switch</h5>
+                    <InputSwitch v-model="switchValue" />
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-6">
+                <div class="card">
+                    <h5>RadioButton</h5>
+                    <div class="p-grid">
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-radiobutton">
+                                <RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
+                                <label for="option1">Option 1</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-radiobutton">
+                                <RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
+                                <label for="option2">Option 2</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-radiobutton">
+                                <RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
+                                <label for="option3">Option 3</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h5>Checkbox</h5>
+                    <div class="p-grid">
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-checkbox">
+                                <Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
+                                <label for="checkOption1">Option 1</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-checkbox">
+                                <Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
+                                <label for="checkOption2">Option 2</label>
+                            </div>
+                        </div>
+                        <div class="p-col-12 p-md-4">
+                            <div class="p-field-checkbox">
+                                <Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
+                                <label for="checkOption3">Option 3</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card p-fluid">
+                    <h5>Listbox</h5>
+                    <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/>
+
+                    <h5>Dropdown</h5>
+                    <Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
+
+                    <h5>MultiSelect</h5>
+                    <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"></MultiSelect>
+                </div>
+
+                <div class="card p-fluid">
+                    <h5>ToggleButton</h5>
+                    <ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No"/>
+
+                    <h5>SelectButton</h5>
+                    <SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
+
+                    <h5>SelectButton - Multiple</h5>
+                    <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/>
+                </div>
+            </div>
+
+            <div class="p-col-12">
+                <div class="card">
+                    <h5>Buttons</h5>
+                    <Button label="Submit" class="p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
+                    <Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
+                    <Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
+                    <Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
+                    
+                    <h5>Severities</h5>
+                    <Button label="Primary" class="p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
+
+                    <h5>Raised Buttons</h5>
+                    <Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
+
+                    <h5>Rounded Buttons</h5>
+                    <Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
+
+                    <h5>Text Buttons</h5>
+                    <Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
+
+                    <h5>Raised Text Buttons</h5>
+                    <Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
+                    <Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
+
+                    <h5>Outlined Buttons</h5>
+                    <Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
+                    <Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
+                    <Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
+                    <Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
+                    <Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
+                    <Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
+                    <Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
+                    <Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
+
+                    <h5>Rounded Icon Buttons</h5>
+                    <Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
+
+                    <h5>Rounded Text Icon Buttons</h5>
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
+
+                    <h5>Rounded and Outlined Icon Buttons</h5>
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
+
+                    <h5>Badges</h5>
+                    <Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
+                    <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
+
+                    <h5>Button Set</h5>
+                    <span class="p-buttonset">
+                        <Button label="Save" icon="pi pi-check" />
+                        <Button label="Delete" icon="pi pi-trash" />
+                        <Button label="Cancel" icon="pi pi-times" />
+                    </span>
+                </div>
+            </div>
+
+            <div class="p-col-12">
+                <div class="card">
+                    <DataTable :value="customers" :paginator="true" :rows="10"
+                        dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
+                        <template #header>
+                            <div class="p-d-flex p-ai-center p-jc-between">
+                                DataTable
+                                <span class="p-input-icon-left">
+                                    <i class="pi pi-search" />
+                                    <InputText v-model="filters['global']" placeholder="Global Search" />
+                                </span>
+                            </div>
+                        </template>
+                        <template #empty>
+                            No customers found.
+                        </template>
+                        <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                        <Column field="name" header="Name" :sortable="true" style="min-width:16rem">
+                            <template #body="slotProps">
+                                {{slotProps.data.name}}
+                            </template>
+                        </Column>
+                        <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
+                            <template #body="slotProps">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                <span class="image-text">{{slotProps.data.country.name}}</span>
+                            </template>
+                        </Column>
+                        <Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="min-width:16rem">
+                            <template #body="slotProps">
+                                <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                            </template>
+                        </Column>
+                        <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte" style="min-width:16rem">
+                            <template #body="slotProps">
+                                <ProgressBar :value="slotProps.data.activity" :showValue="false" style="width: 100px"/>
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-6">
+                <div class="card">
+                    <h5>AccordionPanel</h5>
+                    <Accordion :multiple="true" :activeIndex="[0]">
+                        <AccordionTab header="Header I">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </AccordionTab>
+                        <AccordionTab header="Header II">
+                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                                Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                        </AccordionTab>
+                        <AccordionTab header="Header III">
+                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                                et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                                Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                                quo minus.</p>
+                        </AccordionTab>
+                    </Accordion>
+                </div>
+
+                <div class="card">
+                    <h5>TabView</h5>
+                    <TabView>
+                        <TabPanel header="Header I">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></TabPanel>
+                        <TabPanel header="Header II">
+                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                                Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                        </TabPanel>
+                        <TabPanel header="Header III">
+                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                                et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                                Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                                quo minus.</p>
+                        </TabPanel>
+                    </TabView>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-6">
+                <div class="card">
+                    <h5>Panel</h5>
+                    <Panel header="Header" :toggleable="true">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </Panel>
+                </div>
+                <div class="card">
+                    <h5>Fieldset</h5>
+                    <Fieldset legend="Legend" :toggleable="true">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </Fieldset>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Overlay Panel</h5>
+                    <Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
+                    <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
+                        <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                            <Column field="name" header="Name" sortable></Column>
+                            <Column header="Image">
+                                <template #body="slotProps">
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
+                                </template>
+                            </Column>
+                            <Column field="price" header="Price" sortable>
+                                <template #body="slotProps">
+                                    {{formatCurrency(slotProps.data.price)}}
+                                </template>
+                            </Column>
+                        </DataTable>
+                    </OverlayPanel>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Dialog</h5>
+                    <Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+                            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                        <template #footer>
+                            <Button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"/>
+                        </template>
+                    </Dialog>
+                    <Button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"/>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Confirm Popup</h5>
+                    <Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
+                    <ConfirmPopup group="popup"></ConfirmPopup>
+                </div>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <div class="card p-fluid">
+                    <h5>Confirm Dialog</h5>
+                    <Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
+                    <ConfirmDialog group="dialog">></ConfirmDialog>
+                </div>
+            </div>
+            <div class="p-col-12">
+                <div class="card card-w-title">
+                    <h5>Menubar</h5>
+                    <Menubar :model="tieredMenuItems">
+                        <template #end>
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-search" />
+                                <InputText type="text" placeholder="Search" />
+                            </span>
+                        </template>
+                    </Menubar>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-4">
+                <div class="card">
+                    <h5>Plain Menu</h5>
+                    <Menu :model="menuitems" />
+                </div>
+            </div>
+
+            <div class="p-col-12 p-md-4">
+                <div class="card">
+                    <h5>Overlay Menu</h5>
+
+                    <Menu ref="menu" :model="menuitems" :popup="true" />
+                    <Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"/>
+                </div>
+
+                <div class="card" @contextmenu="onContextRightClick">
+                    <h5>ContextMenu</h5>
+                    Right click to display.
+                    <ContextMenu ref="contextMenu" :model="contextMenuItems" />
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-6">
+                <div class="card">
+                    <h5>Messages</h5>
+                    <Message severity="info">Info Message</Message>
+                    <Message severity="success">Success Message</Message>
+                    <Message severity="warn">Warning Message</Message>
+                    <Message severity="error">Error Message</Message>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-6">
+                <div class="card">
+                    <h5>Toast</h5>
+
+                    <Toast />
+                    <Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
+                    <Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
+                    <Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
+                    <Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
+                </div>
+
+                <div class="card">
+                    <h5>Timeline</h5>
+                    <Timeline :value="timelineEvents" align="alternate">
+                        <template #content="slotProps">
+                            {{slotProps.item.status}}
+                        </template>
+                    </Timeline>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-8">
+                <div class="card">
+                    <h5>Inline Message</h5>
+                    <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                        <label for="username1" class="p-sr-only">Username</label>
+                        <InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
+                        <InlineMessage>Username is required</InlineMessage>
+                    </div>
+                    <div class="p-formgroup-inline">
+                        <label for="email" class="p-sr-only">email</label>
+                        <InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
+                        <InlineMessage />
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-col-12 p-lg-4">
+                <div class="card">
+                    <h5>Helper Text</h5>
+                    <div class="p-field p-fluid">
+                        <label for="username2">Username</label>
+                        <InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
+                        <small id="username-help" class="p-error">Enter your username to reset your password.</small>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import CustomerService from '../../service/CustomerService';
-import CountryService from '../../service/CountryService';
-import ProductService from '../../service/ProductService';
+import {ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import CustomerService from './service/CustomerService';
+import CountryService from './service/CountryService';
+import ProductService from './service/ProductService';
     
 export default {
-    data() {
-        return {
-            customers: null,
-            selectedCustomers: null,
-            products: null,
-            selectedProduct: null,
-            filters: {},
-            floatValue: null,
-            autoValue: null,
-            selectedAutoValue: null,
-            autoFilteredValue: [],
-            calendarValue: null,
-            inputNumberValue: null,
-            chipsValue: null,
-            sliderValue: null,
-            ratingValue: null,
-            colorValue: '1976D2',
-            radioValue: null,
-            checkboxValue: [],
-            switchValue: false,
-            display: false,
-            listboxValues: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            listboxValue: null,
-            dropdownValues: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            dropdownValue: null,
-            multiselectValue: null,
-            multiselectValues: [
-                {name: 'Australia', code: 'AU'},
-                {name: 'Brazil', code: 'BR'},
-                {name: 'China', code: 'CN'},
-                {name: 'Egypt', code: 'EG'},
-                {name: 'France', code: 'FR'},
-                {name: 'Germany', code: 'DE'},
-                {name: 'India', code: 'IN'},
-                {name: 'Japan', code: 'JP'},
-                {name: 'Spain', code: 'ES'},
-                {name: 'United States', code: 'US'}
-            ],
-            toggleValue: false,
-            selectButtonValues1: [
-                {name: 'Option 1', code: 'O1'},
-                {name: 'Option 2', code: 'O2'},
-                {name: 'Option 3', code: 'O3'},
-            ],
-            selectButtonValue1: null,
-            selectButtonValues2: [
-                {name: 'Option 1', code: 'O1'},
-                {name: 'Option 2', code: 'O2'},
-                {name: 'Option 3', code: 'O3'},
-            ],
-            selectButtonValue2: null,
-			tieredMenuItems: [
-				{
-					label:'Customers',
-					icon:'pi pi-fw pi-table',
-					items:[
-						{
-							label:'New',
-							icon:'pi pi-fw pi-user-plus',
-							items:[
-								{
-									label:'Customer',
-									icon:'pi pi-fw pi-plus'
-								},
-								{
-									label:'Duplicate',
-									icon:'pi pi-fw pi-copy'
-								},
+    setup() {
+        onMounted(() => {
+            countryService.value.getCountries().then(data => autoValue.value = data);
+            customerService.value.getCustomersLarge().then(data => customers.value = data);
+            productService.value.getProductsSmall().then(data => products.value = data);
+        })
 
-							]
-						},
-						{
-							label:'Edit',
-							icon:'pi pi-fw pi-user-edit'
-						}
-					]
-				},
-				{
-					label:'Orders',
-					icon:'pi pi-fw pi-shopping-cart',
-					items:[
-						{
-							label:'View',
-							icon:'pi pi-fw pi-list'
-						},
-						{
-							label:'Search',
-							icon:'pi pi-fw pi-search'
-						},
+        const toast = useToast();
+        const confirm = useConfirm();
+        const customers = ref(null);
+        const selectedCustomers = ref(null);
+        const products = ref(null);
+        const selectedProduct = ref(null);
+        const filters = ref({});
+        const floatValue = ref(null);
+        const autoValue = ref(null);
+        const selectedAutoValue = ref(null);
+        const autoFilteredValue = ref([]);
+        const calendarValue = ref(null);
+        const inputNumberValue = ref(null);
+        const chipsValue = ref(null);
+        const sliderValue = ref(null);
+        const ratingValue = ref(null);
+        const colorValue = ref('1976D2');
+        const radioValue = ref(null);
+        const checkboxValue = ref([]);
+        const switchValue = ref(false);
+        const display = ref(false);
+        const listboxValues = ref([
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
+        ]);
+        const listboxValue = ref(null);
+        const dropdownValues = ref([
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
+        ]);
+        const dropdownValue = ref(null);
+        const multiselectValue = ref(null);
+        const multiselectValues = ref([
+            {name: 'Australia', code: 'AU'},
+            {name: 'Brazil', code: 'BR'},
+            {name: 'China', code: 'CN'},
+            {name: 'Egypt', code: 'EG'},
+            {name: 'France', code: 'FR'},
+            {name: 'Germany', code: 'DE'},
+            {name: 'India', code: 'IN'},
+            {name: 'Japan', code: 'JP'},
+            {name: 'Spain', code: 'ES'},
+            {name: 'United States', code: 'US'}
+        ]);
+        const toggleValue = ref(false);
+        const selectButtonValues1 = ref([
+            {name: 'Option 1', code: 'O1'},
+            {name: 'Option 2', code: 'O2'},
+            {name: 'Option 3', code: 'O3'},
+        ]);
+        const selectButtonValue1 = ref(null);
+        const selectButtonValues2 = ref([
+            {name: 'Option 1', code: 'O1'},
+            {name: 'Option 2', code: 'O2'},
+            {name: 'Option 3', code: 'O3'},
+        ]);
+        const selectButtonValue2= ref(null);
+		const tieredMenuItems = ref([
+			{
+				label:'Customers',
+				icon:'pi pi-fw pi-table',
+				items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-user-plus',
+						items:[
+							{
+								label:'Customer',
+								icon:'pi pi-fw pi-plus'
+							},
+							{
+								label:'Duplicate',
+								icon:'pi pi-fw pi-copy'
+							},
 
-					]
-				},
-				{
-					label:'Shipments',
-					icon:'pi pi-fw pi-envelope',
-					items:[
-						{
-							label:'Tracker',
-							icon:'pi pi-fw pi-compass'
+						]
+					},
+					{
+						label:'Edit',
+						icon:'pi pi-fw pi-user-edit'
+					}
+				]
+			},
+			{
+				label:'Orders',
+				icon:'pi pi-fw pi-shopping-cart',
+				items:[
+					{
+						label:'View',
+						icon:'pi pi-fw pi-list'
+					},
+					{
+						label:'Search',
+						icon:'pi pi-fw pi-search'
+					},
 
-						},
-						{
-							label:'Map',
-							icon:'pi pi-fw pi-map-marker'
+				]
+			},
+			{
+				label:'Shipments',
+				icon:'pi pi-fw pi-envelope',
+				items:[
+					{
+						label:'Tracker',
+						icon:'pi pi-fw pi-compass'
 
-						},
-						{
-							label:'Manage',
-							icon:'pi pi-fw pi-pencil'
-						}
-					]
-				},
-				{
-					label:'Profile',
-					icon:'pi pi-fw pi-user',
-					items:[
-						{
-							label:'Settings',
-							icon:'pi pi-fw pi-cog'
-						},
-						{
-							label:'Billing',
-							icon:'pi pi-fw pi-file'
-						}
-					]
-				},
-				{
-					separator:true
-				},
-				{
-					label:'Quit',
-					icon:'pi pi-fw pi-sign-out'
-				}
-			],
-			menuitems: [
-				{
-					label:'Customers',
-					items:[
-						{
-							label:'New',
-							icon:'pi pi-fw pi-plus',
-						},
-						{
-							label:'Edit',
-							icon:'pi pi-fw pi-user-edit'
-						}
-					]
-				},
-				{
-					label:'Orders',
-					items:[
-						{
-							label:'View',
-							icon:'pi pi-fw pi-list'
-						},
-						{
-							label:'Search',
-							icon:'pi pi-fw pi-search'
-						},
+					},
+					{
+						label:'Map',
+						icon:'pi pi-fw pi-map-marker'
 
-					]
-				}
-			],
-			contextMenuItems: [
-				{
-					label: 'Save',
-					icon: 'pi pi-save'
-				},
-				{
-					label: 'Update',
-					icon: 'pi pi-refresh'
-				},
-				{
-					label: 'Delete',
-					icon: 'pi pi-trash'
-				},
-				{
-					separator: true
-				},
-				{
-					label: 'Options',
-					icon: 'pi pi-cog'
-				},
-            ],
-            message: [],
-            timelineEvents: [
-                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
-                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
-                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
-                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
-            ]
+					},
+					{
+						label:'Manage',
+						icon:'pi pi-fw pi-pencil'
+					}
+				]
+			},
+			{
+				label:'Profile',
+				icon:'pi pi-fw pi-user',
+				items:[
+					{
+						label:'Settings',
+						icon:'pi pi-fw pi-cog'
+					},
+					{
+						label:'Billing',
+						icon:'pi pi-fw pi-file'
+					}
+				]
+			},
+			{
+				separator:true
+			},
+			{
+				label:'Quit',
+				icon:'pi pi-fw pi-sign-out'
+			}
+		]);
+		const menuitems = ref([
+			{
+				label:'Customers',
+				items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-plus',
+					},
+					{
+						label:'Edit',
+						icon:'pi pi-fw pi-user-edit'
+					}
+				]
+			},
+			{
+				label:'Orders',
+				items:[
+					{
+						label:'View',
+						icon:'pi pi-fw pi-list'
+					},
+					{
+						label:'Search',
+						icon:'pi pi-fw pi-search'
+					},
+				]
+			}
+		]);
+		const contextMenuItems = ref([
+			{
+				label: 'Save',
+				icon: 'pi pi-save'
+			},
+			{
+				label: 'Update',
+				icon: 'pi pi-refresh'
+			},
+			{
+				label: 'Delete',
+				icon: 'pi pi-trash'
+			},
+			{
+				separator: true
+			},
+			{
+				label: 'Options',
+				icon: 'pi pi-cog'
+			},
+        ]);
+        const message = ref([]);
+        const timelineEvents = ref([
+            {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+            {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+            {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+            {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+        ]);
+        const countryService = ref(new CountryService());
+        const customerService = ref(new CustomerService());
+        const productService = ref(new ProductService());
+
+        const menu = ref();
+        const contextMenu = ref();
+        const op = ref();
+
+        const toggleMenu = (event) => {
+			menu.value.toggle(event);
+        };
+        const onContextRightClick = (event) => {
+            contextMenu.value.show(event);
+        };
+        const searchCountry = (event) => {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    autoFilteredValue.value = [...autoValue.value];
+                }
+                else {
+                    autoFilteredValue.value = autoValue.value.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        };
+        const addMessage = (severity) => {
+            message.value = [{severity: severity, content: 'Message Detail'}]
+        };
+        const showToast = (severity) => {
+            toast.add({severity: severity, summary: 'Message Summary', detail:'Message Detail', life: 3000});
+        };
+        const open = () => {
+			display.value = true;
+		};
+		const close = () => {
+			display.value = false;
+        };
+        const toggle = (event) => {
+			op.value.toggle(event);
+        };
+        const confirmWithPopup = (event) => {
+            confirm.require({
+                target: event.currentTarget,
+                group: 'popup',
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        };
+        const confirmWithDialog = () => {
+            confirm.require({
+                group: 'dialog',
+                header: 'Confirm',
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        };
+        const formatCurrency = (value) => {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        };
+        const onProductSelect = (event) => {
+            op.value.hide();
+            toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
+        };
+
+        return { menu, contextMenu, op, customers, selectedCustomers, products, selectedProduct, filters, floatValue, autoValue, selectedAutoValue,
+            autoFilteredValue, calendarValue, inputNumberValue, chipsValue, sliderValue, ratingValue, colorValue, radioValue, 
+            checkboxValue, switchValue, display, listboxValues, listboxValue, dropdownValues, dropdownValue, multiselectValue, 
+            multiselectValues, toggleValue, selectButtonValues1, selectButtonValue1, selectButtonValues2, selectButtonValue2,
+            tieredMenuItems, menuitems, contextMenuItems, message, timelineEvents, toggleMenu, onContextRightClick, searchCountry,
+            addMessage, showToast, open, close, toggle, confirmWithPopup, confirmWithDialog, formatCurrency, onProductSelect }
+
+    }
+}
+<\\/script>
+
+<style scoped lang="scss">
+.image-text {
+    vertical-align: middle;
+}
+
+.p-progressbar {
+    height: 4px;
+}
+
+.customer-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background-color: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-unqualified {
+        background-color: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-negotiation {
+        background-color: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.status-new {
+        background-color: #B3E5FC;
+        color: #23547B;
+    }
+
+    &.status-renewal {
+        background-color: #ECCFFF;
+        color: #694382;
+    }
+
+    &.status-proposal {
+        background-color: #FFD8B2;
+        color: #805B36;
+    }
+}
+
+.product-image {
+    width: 50px;
+    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
+}    
+
+::v-deep(.p-paginator) {
+    .p-paginator-current {
+        margin-left: auto;
+    }
+}
+</style>                    
+`
+                }
+            }
         }
     },
     countryService: null,
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index ef7e1d8e1..1339d65c6 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TreeDemo" :sources="sources" service="NodeService" :data="['treenodes']"> 
+	<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']"> 
         <h5>Import</h5>
 <pre v-code.script><code>
 import Tree from 'primevue/tree';
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index c1f51336d..2fa13a264 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeFilterDemo" :sources="sources" service="NodeService" :data="['treenodes']" />
+        <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
     </div>
 </template>
 
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index e0e3cf25d..08ee150bd 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -13,7 +13,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeLazyDemo" :sources="sources" service="NodeService" :data="['treenodes']" />
+        <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
     </div>
 </template>
 
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index ceae69027..0d162fa20 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -27,7 +27,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeSelectionDemo" :sources="sources" service="NodeService" :data="['treenodes']" />
+        <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
     </div>
 </template>
 
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index 310fc02fb..79eb14f79 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -20,7 +20,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTemplatingDemo" :sources="sources" service="NodeService" :data="['treenodes']" />
+        <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index 9e9fb0de9..05ec39f09 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -28,7 +28,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableColResizeDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
                 
     </div>
 </template>
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index 349a9e223..3f0bf8341 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreetableColToggleDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreetableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 9e08f89e1..e8afcb056 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TreeTableDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" >
+	<AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import TreeTable from 'primevue/treetable';
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index df0f16b98..3b8b2243c 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -67,7 +67,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableFilterDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index d0c319e24..8ef51dfec 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -19,7 +19,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableLazyDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index 1749a9d5c..af3862581 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTablePaginatorDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index 53aa4f30b..7ce1c27c5 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -26,7 +26,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableResponsiveDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index da0875b1c..fc18fa135 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -55,7 +55,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSelectionDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableSizeDemo.vue b/src/views/treetable/TreeTableSizeDemo.vue
index 36dba41b3..4e11f0dbb 100644
--- a/src/views/treetable/TreeTableSizeDemo.vue
+++ b/src/views/treetable/TreeTableSizeDemo.vue
@@ -42,7 +42,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSizeDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index 7ab556e05..e3b53483c 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -36,7 +36,7 @@
             </div>
         </div>
         
-        <AppDoc name="TreeTableSortDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index fa5fb5dc7..174050b67 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -34,7 +34,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableTemplatingDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
             
     </div>
 </template>