From ffcdcbbb7f1434e3b6d8864fe7491cb05ea7f48c 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: Thu, 21 Jan 2021 11:55:32 +0300
Subject: [PATCH] csb added

---
 src/views/contextmenu/ContextMenuDoc.vue      | 182 +++++++++++++-
 .../deferredcontent/DeferredContentDoc.vue    |  79 +++++-
 src/views/floatlabel/FloatLabelDemo.vue       | 233 ++++++++++++++++++
 src/views/invalid/InvalidDemo.vue             | 176 +++++++++++++
 src/views/megamenu/MegaMenuDoc.vue            | 169 ++++++++++++-
 src/views/menubar/MenubarDoc.vue              | 180 +++++++++++++-
 src/views/panelmenu/PanelMenuDoc.vue          | 167 ++++++++++++-
 src/views/tag/TagDoc.vue                      |  60 ++++-
 src/views/tieredmenu/TieredMenuDoc.vue        | 184 +++++++++++++-
 9 files changed, 1403 insertions(+), 27 deletions(-)

diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index 87c35e43b..7315bf854 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -313,9 +313,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+            <div class="p-d-flex p-jc-between">
+               <a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                  <span>View on GitHub</span>
+               </a>
+               <LiveEditor name="ContextMenuDemo" :sources="sources" />
+            </div>
 <pre v-code>
 <code><template v-pre>
 &lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
@@ -472,4 +475,175 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
+                <ContextMenu ref="menu" :model="items" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                   label:'File',
+                   icon:'pi pi-fw pi-file',
+                   items:[
+                      {
+                         label:'New',
+                         icon:'pi pi-fw pi-plus',
+                         items:[
+                            {
+                               label:'Bookmark',
+                               icon:'pi pi-fw pi-bookmark'
+                            },
+                            {
+                               label:'Video',
+                               icon:'pi pi-fw pi-video'
+                            },
+
+                         ]
+                      },
+                      {
+                         label:'Delete',
+                         icon:'pi pi-fw pi-trash'
+                      },
+                      {
+                         separator:true
+                      },
+                      {
+                         label:'Export',
+                         icon:'pi pi-fw pi-external-link'
+                      }
+                   ]
+                },
+                {
+                   label:'Edit',
+                   icon:'pi pi-fw pi-pencil',
+                   items:[
+                      {
+                         label:'Left',
+                         icon:'pi pi-fw pi-align-left'
+                      },
+                      {
+                         label:'Right',
+                         icon:'pi pi-fw pi-align-right'
+                      },
+                      {
+                         label:'Center',
+                         icon:'pi pi-fw pi-align-center'
+                      },
+                      {
+                         label:'Justify',
+                         icon:'pi pi-fw pi-align-justify'
+                      },
+
+                   ]
+                },
+                {
+                   label:'Users',
+                   icon:'pi pi-fw pi-user',
+                   items:[
+                      {
+                         label:'New',
+                         icon:'pi pi-fw pi-user-plus',
+
+                      },
+                      {
+                         label:'Delete',
+                         icon:'pi pi-fw pi-user-minus',
+
+                      },
+                      {
+                         label:'Search',
+                         icon:'pi pi-fw pi-users',
+                         items:[
+                            {
+                               label:'Filter',
+                               icon:'pi pi-fw pi-filter',
+                               items:[
+                                  {
+                                     label:'Print',
+                                     icon:'pi pi-fw pi-print'
+                                  }
+                               ]
+                            },
+                            {
+                               icon:'pi pi-fw pi-bars',
+                               label:'List'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   label:'Events',
+                   icon:'pi pi-fw pi-calendar',
+                   items:[
+                      {
+                         label:'Edit',
+                         icon:'pi pi-fw pi-pencil',
+                         items:[
+                            {
+                               label:'Save',
+                               icon:'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                               label:'Delete',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            },
+
+                         ]
+                      },
+                      {
+                         label:'Archieve',
+                         icon:'pi pi-fw pi-calendar-times',
+                         items:[
+                            {
+                               label:'Remove',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   separator:true
+                },
+                {
+                   label:'Quit',
+                   icon:'pi pi-fw pi-power-off'
+                }
+             ]
+        }
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+}`
+            }
+         }
+      }
+   },
+   components: {
+      LiveEditor
+   }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index 1a629d61b..106d2eaa0 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -70,9 +70,12 @@ import DeferredContent from 'primevue/deferredcontent';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+                <div class="p-d-flex p-jc-between">
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" data="products-small" :components="['DataTable', 'Column']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div style="height: 800px"&gt;
@@ -126,4 +129,72 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <Toast />
+        <div class="content-section implementation">
+            <div class="card">
+                <div style="height: 800px">
+                    Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
+                </div>
+
+                <DeferredContent @load="onImageLoad">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Nature"/>
+                </DeferredContent>
+
+                <div style="height: 500px">
+                </div>
+
+                <DeferredContent @load="onDataLoad">
+                    <DataTable :value="products">
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                    </DataTable>
+                </DeferredContent>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    methods: {
+        onImageLoad() {
+            this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
+        },
+        onDataLoad() {
+            this.productService.getProductsSmall().then(data => this.products = data);
+            this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 70d0465fa..52c89644c 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -104,6 +104,9 @@
          <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="FloatLabelDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="p-fluid p-grid"&gt;
@@ -335,6 +338,7 @@ export default {
 
 <script>
 import CountryService from '../../service/CountryService';
+import LiveEditor from '../liveeditor/LiveEditor';
 
 export default {
     data() {
@@ -361,6 +365,206 @@ export default {
             valueIconLeft: null,
             valueIconRight: null,
             selectedCity: null,
+            cascadeCountries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                {cname: 'Sydney', code: 'A-SY'},
+                                {cname: 'Newcastle', code: 'A-NE'},
+                                {cname: 'Wollongong', code: 'A-WO'}
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                {cname: 'Brisbane', code: 'A-BR'},
+                                {cname: 'Townsville', code: 'A-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'Canada', 
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                {cname: 'Montreal', code: 'C-MO'},
+                                {cname: 'Quebec City', code: 'C-QU'}
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                {cname: 'Ottawa', code: 'C-OT'},
+                                {cname: 'Toronto', code: 'C-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                {cname: 'Los Angeles', code: 'US-LA'},
+                                {cname: 'San Diego', code: 'US-SD'},
+                                {cname: 'San Francisco', code: 'US-SF'}
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                {cname: 'Jacksonville', code: 'US-JA'},
+                                {cname: 'Miami', code: 'US-MI'},
+                                {cname: 'Tampa', code: 'US-TA'},
+                                {cname: 'Orlando', code: 'US-OR'}
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                {cname: 'Austin', code: 'US-AU'},
+                                {cname: 'Dallas', code: 'US-DA'},
+                                {cname: 'Houston', code: 'US-HO'}
+                            ]
+                        }
+                    ]
+                }
+            ],
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <div class="p-fluid p-grid">
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <InputText id="inputtext" type="text" v-model="value1" />
+                            <label for="inputtext">InputText</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label p-input-icon-left">
+                            <i class="pi pi-search" />
+                            <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
+                            <label for="inputtext-left">Left Icon</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                       <span class="p-float-label p-input-icon-right">
+                            <i class="pi pi-search" />
+                            <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
+                            <label for="inputtext-right">Right Icon</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
+                            <label for="autocomplete">AutoComplete</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <Calendar id="calendar" v-model="value3" />
+                            <label for="calendar">Calendar</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <Chips id="chips" v-model="value4" />
+                            <label for="chips">Chips</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+                            <label for="inputmask">InputMask</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <InputNumber id="inputnumber" v-model="value6" />
+                            <label for="inputnumber">InputNumber</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <div class="p-inputgroup">
+                            <span class="p-inputgroup-addon">
+                                <i class="pi pi-user"></i>
+                            </span>
+                            <span class="p-float-label">
+                                <InputText id="inputgroup" type="text" v-model="value7" />
+                                <label for="inputgroup">InputGroup</label>
+                            </span>
+                        </div>
+                    </div>
+                     <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
+                                :optionGroupChildren="['states', 'cities']" />
+                            <label for="multiselect">CascadeSelect</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
+                            <label for="dropdown">Dropdown</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
+                            <label for="multiselect">MultiSelect</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12">
+                        <span class="p-float-label">
+                            <Textarea id="textarea" v-model="value10" rows="3" />
+                            <label for="textarea">Textarea</label>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import CountryService from '../service/CountryService';
+export default {
+    data() {
+        return {
+            countries: null,
+            filteredCountries: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            value1: null,
+            value2: null,
+            value3: null,
+            value4: null,
+            value5: null,
+            value6: null,
+            value7: null,
+            value8: null,
+            value9: null,
+            value10: null,
+            selectedCity: null,
             cascadeCountries: [
                 {
                     name: 'Australia',
@@ -460,6 +664,35 @@ export default {
             }, 250);
         }
     }
+}`
+                }
+            }
+        }
+    },
+    countryService: null,
+    created() {
+        this.countryService = new CountryService();
+    },
+    mounted() {
+        this.countryService.getCountries().then(data => this.countries = data);
+    },
+    methods: {
+        searchCountry(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                }
+                else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    },
+    components: {
+        LiveEditor
+    }
 }
 </script>
 
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index 4d423c984..f196fcefb 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -49,6 +49,9 @@
          <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="InvalidDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="p-fluid p-grid"&gt;
@@ -223,7 +226,151 @@ export default {
 
 <script>
 import CountryService from '../../service/CountryService';
+import LiveEditor from '../liveeditor/LiveEditor';
 
+export default {
+    data() {
+        return {
+            countries: null,
+            filteredCountries: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            value1: null,
+            value2: null,
+            value3: null,
+            value4: null,
+            value5: null,
+            value6: null,
+            value7: null,
+            value8: null,
+            value9: null,
+            selectedCity: null,
+            cascadeCountries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                {cname: 'Sydney', code: 'A-SY'},
+                                {cname: 'Newcastle', code: 'A-NE'},
+                                {cname: 'Wollongong', code: 'A-WO'}
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                {cname: 'Brisbane', code: 'A-BR'},
+                                {cname: 'Townsville', code: 'A-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'Canada', 
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                {cname: 'Montreal', code: 'C-MO'},
+                                {cname: 'Quebec City', code: 'C-QU'}
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                {cname: 'Ottawa', code: 'C-OT'},
+                                {cname: 'Toronto', code: 'C-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                {cname: 'Los Angeles', code: 'US-LA'},
+                                {cname: 'San Diego', code: 'US-SD'},
+                                {cname: 'San Francisco', code: 'US-SF'}
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                {cname: 'Jacksonville', code: 'US-JA'},
+                                {cname: 'Miami', code: 'US-MI'},
+                                {cname: 'Tampa', code: 'US-TA'},
+                                {cname: 'Orlando', code: 'US-OR'}
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                {cname: 'Austin', code: 'US-AU'},
+                                {cname: 'Dallas', code: 'US-DA'},
+                                {cname: 'Houston', code: 'US-HO'}
+                            ]
+                        }
+                    ]
+                }
+            ],
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <div class="p-fluid p-grid">
+                    <div class="p-field p-col-12 p-md-4">
+                        <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <AutoComplete v-model="value2" :suggestions="filteredCountries" multiple @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
+                            :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>                    
+</template>
+<script>
+import CountryService from '../service/CountryService';
 export default {
     data() {
         return {
@@ -345,6 +492,35 @@ export default {
             }, 250);
         }
     }
+}`
+                }
+            }
+        }
+    },
+    countryService: null,
+    created() {
+        this.countryService = new CountryService();
+    },
+    mounted() {
+        this.countryService.getCountries().then(data => this.countries = data);
+    },
+    methods: {
+        searchCountry(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                }
+                else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    },
+    components: {
+        LiveEditor
+    }
 }
 </script>
 
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index ee1b695dd..220a61157 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -252,9 +252,13 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+                <div class="p-d-flex p-jc-between">
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="MegaMenuDemo" :sources="sources" />
+                </div>
+
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Horizontal&lt;/h3&gt;
@@ -390,4 +394,161 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>MegaMenu</h1>
+                <p>MegaMenu is navigation component that displays submenus together.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Horizontal</h5>
+                <MegaMenu :model="items" />
+
+                <h5>Vertical</h5>
+                <MegaMenu :model="items" orientation="vertical"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Videos', icon: 'pi pi-fw pi-video',
+                    items: [
+                        [
+                            {
+                                label: 'Video 1',
+                                items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
+                            },
+                            {
+                                label: 'Video 2',
+                                items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Video 3',
+                                items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
+                            },
+                            {
+                                label: 'Video 4',
+                                items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Users', icon: 'pi pi-fw pi-users',
+                    items: [
+                        [
+                            {
+                                label: 'User 1',
+                                items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
+                            },
+                            {
+                                label: 'User 2',
+                                items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
+                            },
+                        ],
+                        [
+                            {
+                                label: 'User 3',
+                                items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
+                            },
+                            {
+                                label: 'User 4',
+                                items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 5',
+                                items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
+                            },
+                            {
+                                label: 'User 6',
+                                items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Events', icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        [
+                            {
+                                label: 'Event 1',
+                                items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
+                            },
+                            {
+                                label: 'Event 2',
+                                items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Event 3',
+                                items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
+                            },
+                            {
+                                label: 'Event 4',
+                                items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Settings', icon: 'pi pi-fw pi-cog',
+                    items: [
+                        [
+                            {
+                                label: 'Setting 1',
+                                items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
+                            },
+                            {
+                                label: 'Setting 2',
+                                items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
+                            },
+                            {
+                                label: 'Setting 3',
+                                items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Setting 4',
+                                items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
+                            }
+                        ]
+                    ]
+                }
+            ]
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 398626086..4bba1745e 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -245,9 +245,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+            <div class="p-d-flex p-jc-between">
+               <a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                  <span>View on GitHub</span>
+               </a>
+               <LiveEditor name="MenubarDemo" :sources="sources" :components="['InputText']"/>
+            </div>
 <pre v-code>
 <code><template v-pre>
 &lt;Menubar :model="items"&gt;
@@ -403,4 +406,173 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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">
+                <Menubar :model="items">
+                    <template #start>
+                        <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+                    </template>
+                    <template #end>
+                        <InputText placeholder="Search" type="text" />
+                    </template>
+                </Menubar>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                   label:'File',
+                   icon:'pi pi-fw pi-file',
+                   items:[
+                      {
+                         label:'New',
+                         icon:'pi pi-fw pi-plus',
+                         items:[
+                            {
+                               label:'Bookmark',
+                               icon:'pi pi-fw pi-bookmark'
+                            },
+                            {
+                               label:'Video',
+                               icon:'pi pi-fw pi-video'
+                            },
+
+                         ]
+                      },
+                      {
+                         label:'Delete',
+                         icon:'pi pi-fw pi-trash'
+                      },
+                      {
+                         separator:true
+                      },
+                      {
+                         label:'Export',
+                         icon:'pi pi-fw pi-external-link'
+                      }
+                   ]
+                },
+                {
+                   label:'Edit',
+                   icon:'pi pi-fw pi-pencil',
+                   items:[
+                      {
+                         label:'Left',
+                         icon:'pi pi-fw pi-align-left'
+                      },
+                      {
+                         label:'Right',
+                         icon:'pi pi-fw pi-align-right'
+                      },
+                      {
+                         label:'Center',
+                         icon:'pi pi-fw pi-align-center'
+                      },
+                      {
+                         label:'Justify',
+                         icon:'pi pi-fw pi-align-justify'
+                      },
+
+                   ]
+                },
+                {
+                   label:'Users',
+                   icon:'pi pi-fw pi-user',
+                   items:[
+                      {
+                         label:'New',
+                         icon:'pi pi-fw pi-user-plus',
+
+                      },
+                      {
+                         label:'Delete',
+                         icon:'pi pi-fw pi-user-minus',
+
+                      },
+                      {
+                         label:'Search',
+                         icon:'pi pi-fw pi-users',
+                         items:[
+                            {
+                               label:'Filter',
+                               icon:'pi pi-fw pi-filter',
+                               items:[
+                                  {
+                                     label:'Print',
+                                     icon:'pi pi-fw pi-print'
+                                  }
+                               ]
+                            },
+                            {
+                               icon:'pi pi-fw pi-bars',
+                               label:'List'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   label:'Events',
+                   icon:'pi pi-fw pi-calendar',
+                   items:[
+                      {
+                         label:'Edit',
+                         icon:'pi pi-fw pi-pencil',
+                         items:[
+                            {
+                               label:'Save',
+                               icon:'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                               label:'Delete',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            },
+
+                         ]
+                      },
+                      {
+                         label:'Archieve',
+                         icon:'pi pi-fw pi-calendar-times',
+                         items:[
+                            {
+                               label:'Remove',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   label:'Quit',
+                   icon:'pi pi-fw pi-power-off'
+                }
+             ]
+        }
+    }
+}`
+            }
+         }
+      }
+   },
+   components: {
+      LiveEditor
+   }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 4a848dbe0..f8b326161 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -223,9 +223,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+            <div class="p-d-flex p-jc-between">
+               <a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                  <span>View on GitHub</span>
+               </a>
+               <LiveEditor name="PanelMenuDemo" :sources="sources" />
+            </div>
 <pre v-code>
 <code><template v-pre>
 &lt;PanelMenu :model="items" /&gt;
@@ -362,4 +365,160 @@ export default {
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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">
+                <PanelMenu :model="items" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                   label: 'File',
+                   icon:'pi pi-fw pi-file',
+                   items: [
+                      {
+                         label: 'New',
+                         icon:'pi pi-fw pi-plus',
+                         items: [
+                            {
+                               label: 'Bookmark',
+                               icon:'pi pi-fw pi-bookmark'
+                            },
+                            {
+                               label: 'Video',
+                               icon:'pi pi-fw pi-video'
+                            }
+                         ]
+                      },
+                      {
+                         label: 'Delete',
+                         icon:'pi pi-fw pi-trash'
+                      },
+                      {
+                         label: 'Export',
+                         icon:'pi pi-fw pi-external-link'
+                      }
+                   ]
+                },
+                {
+                   label: 'Edit',
+                   icon:'pi pi-fw pi-pencil',
+                   items: [
+                      {
+                         label: 'Left',
+                         icon:'pi pi-fw pi-align-left'
+                      },
+                      {
+                         label: 'Right',
+                         icon:'pi pi-fw pi-align-right'
+                      },
+                      {
+                         label: 'Center',
+                         icon:'pi pi-fw pi-align-center'
+                      },
+                      {
+                         label: 'Justify',
+                         icon:'pi pi-fw pi-align-justify'
+                      }
+                   ]
+                },
+                {
+                   label: 'Users',
+                   icon:'pi pi-fw pi-user',
+                   items: [
+                      {
+                         label: 'New',
+                         icon:'pi pi-fw pi-user-plus',
+
+                      },
+                      {
+                         label: 'Delete',
+                         icon:'pi pi-fw pi-user-minus',
+                      },
+                      {
+                         label: 'Search',
+                         icon:'pi pi-fw pi-users',
+                         items: [
+                            {
+                               label: 'Filter',
+                               icon:'pi pi-fw pi-filter',
+                               items: [
+                                  {
+                                     label: 'Print',
+                                     icon:'pi pi-fw pi-print'
+                                  }
+                               ]
+                            },
+                            {
+                               icon:'pi pi-fw pi-bars',
+                               label: 'List'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   label: 'Events',
+                   icon:'pi pi-fw pi-calendar',
+                   items: [
+                      {
+                         label: 'Edit',
+                         icon:'pi pi-fw pi-pencil',
+                         items: [
+                            {
+                               label: 'Save',
+                               icon:'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                               label: 'Delete',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      },
+                      {
+                         label: 'Archieve',
+                         icon:'pi pi-fw pi-calendar-times',
+                         items: [
+                            {
+                               label: 'Remove',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      }
+                   ]
+                }
+             ]
+        }
+    }
+}`,
+                    style: `<style scoped lang="scss">
+.p-panelmenu {
+    width: 22rem;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index fa63d7ee7..213858b30 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -122,9 +122,12 @@ import Tag from 'primevue/tag';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+				<div class="p-d-flex p-jc-between">
+					<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="TagDemo" :sources="sources" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Tags&lt;/h5&gt;
@@ -152,4 +155,53 @@ import Tag from 'primevue/tag';
 			</TabPanel>
 		</TabView>
 	</div>
-</template>
\ No newline at end of file
+</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>Tags</h5>
+                <Tag class="p-mr-2" value="Primary"></Tag>
+                <Tag class="p-mr-2" severity="success" value="Success"></Tag>
+                <Tag class="p-mr-2" severity="info" value="Info"></Tag>
+                <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+                <Tag severity="danger" value="Danger"></Tag>
+
+                <h5>Pills</h5>
+                <Tag class="p-mr-2" value="Primary" rounded></Tag>
+                <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
+                <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
+                <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+                <Tag severity="danger" value="Danger" rounded></Tag>
+
+                <h5>Icons</h5>
+                <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
+                <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+                <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+                <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+                <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index 70dffd1a3..ca2022fae 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -302,9 +302,12 @@ toggle(event) {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+            <div class="p-d-flex p-jc-between">
+               <a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                    <span>View on GitHub</span>
+               </a>
+               <LiveEditor name="TieredMenuDemo" :sources="sources" :components="['Button']" />
+            </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Inline&lt;/h3&gt;
@@ -466,3 +469,178 @@ export default {
 		</TabView>
 	</div>
 </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>Inline</h5>
+                <TieredMenu :model="items" />
+
+                <h5>Overlay</h5>
+                <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
+                <TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                   label:'File',
+                   icon:'pi pi-fw pi-file',
+                   items:[
+                      {
+                         label:'New',
+                         icon:'pi pi-fw pi-plus',
+                         items:[
+                            {
+                               label:'Bookmark',
+                               icon:'pi pi-fw pi-bookmark'
+                            },
+                            {
+                               label:'Video',
+                               icon:'pi pi-fw pi-video'
+                            },
+
+                         ]
+                      },
+                      {
+                         label:'Delete',
+                         icon:'pi pi-fw pi-trash'
+                      },
+                      {
+                         separator:true
+                      },
+                      {
+                         label:'Export',
+                         icon:'pi pi-fw pi-external-link'
+                      }
+                   ]
+                },
+                {
+                   label:'Edit',
+                   icon:'pi pi-fw pi-pencil',
+                   items:[
+                      {
+                         label:'Left',
+                         icon:'pi pi-fw pi-align-left'
+                      },
+                      {
+                         label:'Right',
+                         icon:'pi pi-fw pi-align-right'
+                      },
+                      {
+                         label:'Center',
+                         icon:'pi pi-fw pi-align-center'
+                      },
+                      {
+                         label:'Justify',
+                         icon:'pi pi-fw pi-align-justify'
+                      },
+
+                   ]
+                },
+                {
+                   label:'Users',
+                   icon:'pi pi-fw pi-user',
+                   items:[
+                      {
+                         label:'New',
+                         icon:'pi pi-fw pi-user-plus',
+
+                      },
+                      {
+                         label:'Delete',
+                         icon:'pi pi-fw pi-user-minus',
+
+                      },
+                      {
+                         label:'Search',
+                         icon:'pi pi-fw pi-users',
+                         items:[
+                            {
+                               label:'Filter',
+                               icon:'pi pi-fw pi-filter',
+                               items:[
+                                  {
+                                     label:'Print',
+                                     icon:'pi pi-fw pi-print'
+                                  }
+                               ]
+                            },
+                            {
+                               icon:'pi pi-fw pi-bars',
+                               label:'List'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   label:'Events',
+                   icon:'pi pi-fw pi-calendar',
+                   items:[
+                      {
+                         label:'Edit',
+                         icon:'pi pi-fw pi-pencil',
+                         items:[
+                            {
+                               label:'Save',
+                               icon:'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                               label:'Delete',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            },
+
+                         ]
+                      },
+                      {
+                         label:'Archieve',
+                         icon:'pi pi-fw pi-calendar-times',
+                         items:[
+                            {
+                               label:'Remove',
+                               icon:'pi pi-fw pi-calendar-minus'
+                            }
+                         ]
+                      }
+                   ]
+                },
+                {
+                   separator:true
+                },
+                {
+                   label:'Quit',
+                   icon:'pi pi-fw pi-power-off'
+                }
+             ]
+        }
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file