csb service props must be array

src/AppDocumentation.vue

@@ -47,14 +47,21 @@ export default {
             }
 
             if (this.service) {
+                let serviceArr = [];
+
+                this.service.forEach(el => {
+                    serviceArr.push(el.split(','))
+                })
                 /* eslint-disable */
+                serviceArr.forEach((el, i) => {
                     tabs.push(
-                    <TabPanel key="service" header={`${this.service}.js`}>
+                        <TabPanel key="service" header={`${el}.js`}>
                             <pre v-code="script"><code>
-                            {services[this.service]}
+                                {services[el]}
                             </code></pre>
                         </TabPanel>
                     );
+                })
             }
 
             if (this.data) {

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,8 +544,6 @@ export default {
         const filteredCountries = ref();
         const selectedCountries = ref([]);
         const groupedCities = ref ([{
-            label: 'Germany', code: 'DE', 
-                label: 'Germany', code: 'DE', 
             label: 'Germany', code: 'DE',
             items: [
                 {label: 'Berlin', value: 'Berlin'},
@@ -555,8 +553,6 @@ export default {
             ]
         },
         {
-            label: 'USA', code: 'US', 
-                label: 'USA', code: 'US', 
             label: 'USA', code: 'US',
             items: [
                 {label: 'Chicago', value: 'Chicago'},
@@ -566,8 +562,6 @@ export default {
             ]
         },
         {
-            label: 'Japan', code: 'JP', 
-                label: 'Japan', code: 'JP', 
             label: 'Japan', code: 'JP',
             items: [
                 {label: 'Kyoto', value: 'Kyoto'},
@@ -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 }
     }

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';

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>

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>
 

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>
 

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: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct)},
-            {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.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);
+            products.value = products.value.filter((p) => p.id !== product.value.id);
-            toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
+            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) {

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>
 

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';

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>

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>
 

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>
 

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>
 

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>
 

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>
 

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>
 

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>

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>

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>

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>

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>

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>
 

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>

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>

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>

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>

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>

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>
 

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>

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>

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';

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';

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>
 

src/views/formlayout/FormLayoutDoc.vue

@@ -1,7 +1,5 @@
 <template>	
-	<div class="content-section documentation">
+    <AppDoc name="FormLayoutDemo" :sources="sources">
-		<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>
 <pre v-code><code>
@@ -222,201 +220,19 @@
 				</tbody>
 			</table>
 		</div>
-
+    </AppDoc>
-			</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>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
+                'options-api': {
-                    content: `<template>
+                    tabName: 'Source',
-    <div class="layout-content">
+                    content: `
-        <div class="content-section implementation">
+<template>
+    <div>
         <div class="card">
             <h5>Vertical</h5>
             <div class="p-fluid">
@@ -581,7 +397,6 @@ export default {
             </div>
         </div>
     </div>
-    </div>
 </template>
 
 <script>
@@ -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>
-                }
+`
-            }
-        }
                 },
-    components: {
+                'composition-api': {
-        LiveEditor
+                    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>
+`
+                }
+            }
+        }
     }
 }
 </script>

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';

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';

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>
 

src/views/liveeditor/LiveEditor.vue

@@ -27,7 +27,7 @@ export default {
             default: null
         },
         service: {
-            type: String,
+            type: Array,
             default: null
         },
         data: {
@@ -142,7 +142,11 @@ 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 {
+                serviceArr.forEach(serv => {
-                    _files[`src/service/${this.service}.js`] = {
+                     _files[`src/service/${serv}.js`] = {
-                            content: `${services[this.service]}`
+                            content: `${services[serv]}`
                     };
-                }
+                })
             }
 
             element += `import ${name} from "./${name}.vue"`;

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';

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';

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';

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';

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>
 

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>
 

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>
 

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>
 

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>

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>
 

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';

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>
 

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>
 

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>
 

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>
 

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>
 

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>
 

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>
 

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>