From 01d2af1b2c7f2c2c6d9d1d744218913fa13fc4c5 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:40:52 +0300
Subject: [PATCH] csb added

---
 src/views/card/CardDoc.vue                    |   4 +-
 src/views/carousel/CarouselDoc.vue            | 164 ++++++++++-
 src/views/cascadeselect/CascadeSelectDoc.vue  | 144 +++++++++-
 src/views/confirmdialog/ConfirmDialogDoc.vue  | 145 +++++++++-
 src/views/confirmpopup/ConfirmPopupDoc.vue    | 109 +++++++-
 src/views/dataview/DataViewDoc.vue            | 254 +++++++++++++++++-
 src/views/orderlist/OrderListDoc.vue          | 124 ++++++++-
 .../OrganizationChartDoc.vue                  | 238 +++++++++++++++-
 src/views/overlaypanel/OverlayPanelDoc.vue    |  92 ++++++-
 src/views/paginator/PaginatorDoc.vue          |  84 +++++-
 src/views/picklist/PickListDoc.vue            | 127 ++++++++-
 src/views/skeleton/SkeletonDoc.vue            | 180 ++++++++++++-
 src/views/toast/ToastDoc.vue                  |  26 +-
 13 files changed, 1648 insertions(+), 43 deletions(-)

diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index d75828f93..0359b1e78 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -76,7 +76,7 @@ import Card from 'primevue/card';
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
-					<LiveEditor name="CardDemo" :sources="sources" :components="['Card', 'Button']"/>
+					<LiveEditor name="CardDemo" :sources="sources" :components="['Button']"/>
                 </div>
 <pre v-code>
 <code><template v-pre>
@@ -138,7 +138,7 @@ export default {
 
             <Card style="width: 25em">
                 <template #header>
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" />
                 </template>
                 <template #title>
                     Advanced Card
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index f79a94229..8bbd625c5 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -274,9 +274,12 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" 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/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="CarouselDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card"&gt;
@@ -422,3 +425,158 @@ 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">
+                <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+                    <template #header>
+                        <h5>Basic</h5>
+                    </template>
+                    <template #item="slotProps">
+                        <div class="product-item">
+                            <div class="product-item-content">
+                                <div class="p-mb-3">
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                                </div>
+                                <div>
+                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
+                                    <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                    <div class="car-buttons p-mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Carousel>
+            </div>
+
+            <div class="card">
+                <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
+                    <template #header>
+                        <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
+                    </template>
+                    <template #item="slotProps">
+                        <div class="product-item">
+                            <div class="product-item-content">
+                                <div class="p-mb-3">
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                                </div>
+                                <div>
+                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
+                                    <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                    <div class="car-buttons p-mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Carousel>
+            </div>
+
+            <div class="card">
+                <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
+                            style="max-width: 400px; margin-top: 2em">
+                    <template #header>
+                        <h5>Vertical</h5>
+                    </template>
+                    <template #item="slotProps">
+                        <div class="product-item">
+                            <div class="product-item-content">
+                                <div class="p-mb-3">
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                                </div>
+                                <div>
+                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
+                                    <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                    <div class="car-buttons p-mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Carousel>
+            </div>
+		</div>
+	</div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+
+export default {
+	data() {
+		return {
+            products: null,
+			responsiveOptions: [
+				{
+					breakpoint: '1024px',
+					numVisible: 3,
+					numScroll: 3
+				},
+				{
+					breakpoint: '600px',
+					numVisible: 2,
+					numScroll: 2
+				},
+				{
+					breakpoint: '480px',
+					numVisible: 1,
+					numScroll: 1
+				}
+			]
+		}
+	},
+    productService: null,
+	created() {
+        this.productService = new ProductService();
+	},
+	mounted() {
+        this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
+	}
+}`,
+                    style: `<style lang="scss" scoped>
+.product-item {
+    .product-item-content {
+        border: 1px solid var(--surface-d);
+        border-radius: 3px;
+        margin: .3rem;
+        text-align: center;
+        padding: 2rem 0;
+    }
+
+    .product-image {
+        width: 50%;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index 078c03bcb..dac5b5e8f 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -318,9 +318,12 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/cascadeselect" 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/cascadeselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="CascadeSelectDemo" :sources="sources" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
@@ -433,4 +436,137 @@ export default &#123;
 			</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>Basic</h5>
+                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                        :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
+
+                <h5>Templating</h5>
+                <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+                        :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
+                    <template #option="slotProps">
+                        <div class="country-item">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
+                            <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
+                            <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                            <span>{{slotProps.option.cname || slotProps.option.name}}</span>
+                        </div>
+                    </template>
+                </CascadeSelect>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity1: null,
+            selectedCity2: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                {cname: 'Sydney', code: 'A-SY'},
+                                {cname: 'Newcastle', code: 'A-NE'},
+                                {cname: 'Wollongong', code: 'A-WO'}
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                {cname: 'Brisbane', code: 'A-BR'},
+                                {cname: 'Townsville', code: 'A-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'Canada', 
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                {cname: 'Montreal', code: 'C-MO'},
+                                {cname: 'Quebec City', code: 'C-QU'}
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                {cname: 'Ottawa', code: 'C-OT'},
+                                {cname: 'Toronto', code: 'C-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                {cname: 'Los Angeles', code: 'US-LA'},
+                                {cname: 'San Diego', code: 'US-SD'},
+                                {cname: 'San Francisco', code: 'US-SF'}
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                {cname: 'Jacksonville', code: 'US-JA'},
+                                {cname: 'Miami', code: 'US-MI'},
+                                {cname: 'Tampa', code: 'US-TA'},
+                                {cname: 'Orlando', code: 'US-OR'}
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                {cname: 'Austin', code: 'US-AU'},
+                                {cname: 'Dallas', code: 'US-DA'},
+                                {cname: 'Houston', code: 'US-HO'}
+                            ]
+                        }
+                    ]
+                }
+            ]
+        } 
+    }
+}`,
+style: `<style>
+img {
+    width: 18px;
+    margin-right: 0.5rem;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index ff931f7f4..521776232 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -244,9 +244,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" 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/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="ConfirmDialogDemo" :sources="sources" :components="['Button']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
@@ -332,3 +335,139 @@ export default {
 		</TabView>
 	</div>
 </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">
+            <ConfirmDialog></ConfirmDialog>
+            <ConfirmDialog group="positionDialog"></ConfirmDialog>
+
+            <div class="card">
+                <h5>Basic</h5>
+                <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+
+                <h5>Position</h5>
+                <div class="p-grid p-dir-col">
+                    <div class="p-col">
+                        <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
+                        <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+                    </div>
+                    <div class="p-col">
+                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
+                    </div>
+                    <div class="p-col">
+                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm1() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        },
+        confirm2() {
+            this.$confirm.require({
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        },
+        confirmPosition(position) {
+            this.$confirm.require({
+                key: 'positionDialog',
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                position: position,
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+    }
+}`
+                },
+                'api': {
+                    content: `<template>
+    <Toast />
+    <ConfirmDialog />
+    <Button @click="del" icon="pi pi-check" label="Confirm"></Button>
+</template>
+
+<script>
+import { ref, defineComponent } from "vue";
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+export default defineComponent({
+    setup() {
+        const message = ref(null);
+        const confirm = useConfirm();
+        const toast = useToast();
+
+        const del = () => {
+            confirm.require({
+            message: "Are you sure you want to proceed?",
+            header: "Confirmation",
+            icon: "pi pi-exclamation-triangle",
+            accept: () => {
+                //callback to execute when user confirms the action
+                toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+            },
+            reject: () => {
+                //callback to execute when user rejects the action
+                toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+            }
+        })
+    }
+
+    return { message, del };
+  }
+});`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue
index 48d6ee776..5fa7ebbe1 100644
--- a/src/views/confirmpopup/ConfirmPopupDoc.vue
+++ b/src/views/confirmpopup/ConfirmPopupDoc.vue
@@ -258,9 +258,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" 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/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="ConfirmPopupDemo" :sources="sources" :components="['Button']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
@@ -311,3 +314,103 @@ export default {
 		</TabView>
 	</div>
 </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">
+            <ConfirmPopup></ConfirmPopup>
+
+            <div class="card">
+                <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm1(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        },
+        confirm2(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Do you want to delete this record?',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+    }
+}`
+                },
+                'api': {
+                    content: `<template>
+  <ConfirmPopup></ConfirmPopup>
+
+  <Button @click="del($event)" icon="pi pi-check" label="Confirm"></Button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+export default defineComponent({
+    setup() {
+        const confirm = useConfirm();
+        const toast = useToast();
+
+        const del = (event) => {
+            confirm.require({
+                message: "Are you sure you want to proceed?",
+                icon: "pi pi-exclamation-triangle",
+                accept: () => {
+                  //callback to execute when user confirms the action
+                  toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                  //callback to execute when user rejects the action
+                  toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+            });
+        };
+
+        return { del };
+    },
+})
+`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 0a4268886..78f55058b 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -416,9 +416,13 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/showcase/dataview" 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/showcase/dataview" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="DataViewDemo" :sources="sources" service="ProductService" data="products" :components="['Button', 'Dropdown', 'Rating']" />
+                </div>
+
 <pre v-code>
 <code><template v-pre>
 &lt;DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"&gt;
@@ -528,3 +532,247 @@ 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">
+                <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
+					<template #header>
+                        <div class="p-grid p-nogutter">
+                            <div class="p-col-6" style="text-align: left">
+                                <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
+                            </div>
+                            <div class="p-col-6" style="text-align: right">
+                                <DataViewLayoutOptions v-model="layout" />
+                            </div>
+                        </div>
+					</template>
+
+					<template #list="slotProps">
+						<div class="p-col-12">
+							<div class="product-list-item">
+								<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
+								<div class="product-list-detail">
+									<div class="product-name">{{slotProps.data.name}}</div>
+									<div class="product-description">{{slotProps.data.description}}</div>
+									<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
+									<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{slotProps.data.category}}</span>
+								</div>
+								<div class="product-list-action">
+									<span class="product-price">{{slotProps.data.price}}</span>
+									<Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+									<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+								</div>
+							</div>
+						</div>
+					</template>
+
+					<template #grid="slotProps">
+						<div class="p-col-12 p-md-4">
+							<div class="product-grid-item card">
+								<div class="product-grid-item-top">
+									<div>
+										<i class="pi pi-tag product-category-icon"></i>
+										<span class="product-category">{{slotProps.data.category}}</span>
+									</div>
+									<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+								</div>
+								<div class="product-grid-item-content">
+									<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
+									<div class="product-name">{{slotProps.data.name}}</div>
+									<div class="product-description">{{slotProps.data.description}}</div>
+									<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
+								</div>
+								<div class="product-grid-item-bottom">
+									<span class="product-price">{{slotProps.data.price}}</span>
+									<Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+								</div>
+							</div>
+						</div>
+					</template>
+				</DataView>
+            </div>
+		</div>
+	</div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            sortKey: null,
+            sortOrder: null,
+            sortField: null,
+            sortOptions: [
+                {label: 'Price High to Low', value: '!price'},
+                {label: 'Price Low to High', value: 'price'},
+            ]
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProducts().then(data => this.products = data);
+    },
+    methods: {
+        onSortChange(event){
+            const value = event.value.value;
+            const sortValue = event.value;
+
+            if (value.indexOf('!') === 0) {
+                this.sortOrder = -1;
+                this.sortField = value.substring(1, value.length);
+                this.sortKey = sortValue;
+            }
+            else {
+                this.sortOrder = 1;
+                this.sortField = value;
+                this.sortKey = sortValue;
+            }
+        }
+    }
+}`,
+                    style: `<style lang="scss" scoped>
+.p-dropdown {
+    width: 14rem;
+    font-weight: normal;
+}
+
+.product-name {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.product-description {
+	margin: 0 0 1rem 0;
+}
+
+.product-category-icon {
+	vertical-align: middle;
+	margin-right: .5rem;
+}
+
+.product-category {
+	font-weight: 600;
+	vertical-align: middle;
+}
+
+::v-deep(.product-list-item) {
+	display: flex;
+	align-items: center;
+	padding: 1rem;
+	width: 100%;
+
+	img {
+		width: 100px;
+		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+		margin-right: 2rem;
+	}
+
+	.product-list-detail {
+		flex: 1 1 0;
+	}
+
+	.p-rating {
+		margin: 0 0 .5rem 0;
+	}
+
+	.product-price {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-bottom: .5rem;
+		align-self: flex-end;
+	}
+
+	.product-list-action {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.p-button {
+		margin-bottom: .5rem;
+	}
+}
+
+::v-deep(.product-grid-item) {
+	margin: .5rem;
+	border: 1px solid #dee2e6;
+
+	.product-grid-item-top,
+	.product-grid-item-bottom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	img {
+		width: 75%;
+		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+		margin: 2rem 0;
+	}
+
+	.product-grid-item-content {
+		text-align: center;
+	}
+
+	.product-price {
+		font-size: 1.5rem;
+		font-weight: 600;
+	}
+}
+
+@media screen and (max-width: 576px) {
+	.product-list-item {
+		flex-direction: column;
+		align-items: center;
+
+		img {
+			width: 75%;
+			margin: 2rem 0;
+		}
+
+		.product-list-detail {
+			text-align: center;
+		}
+
+		.product-price {
+			align-self: center;
+		}
+
+		.product-list-action {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.product-list-action {
+			margin-top: 2rem;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+		}
+	}
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 4b1d4c299..33bf6184d 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -167,9 +167,12 @@ import OrderList from 'primevue/orderlist';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/orderlist" 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/orderlist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="OrderListDemo" :sources="sources" service="ProductService" data="products-small" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;OrderList v-model="products" listStyle="height:auto" dataKey="id"&gt;
@@ -272,4 +275,117 @@ 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">
+                <OrderList v-model="products" listStyle="height:auto" dataKey="id">
+                    <template #header>
+                        List of Products
+                    </template>
+                    <template #item="slotProps">
+                        <div class="product-item">
+                            <div class="image-container">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
+                            </div>
+                            <div class="product-list-detail">
+                                <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                                <i class="pi pi-tag product-category-icon"></i>
+                                <span class="product-category">{{slotProps.item.category}}</span>
+                            </div>
+                            <div class="product-list-action">
+                                <h6 class="p-mb-2">{{slotProps.item.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
+                            </div>
+                        </div>
+                    </template>
+                </OrderList>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProductsSmall().then(data => this.products = data);
+    }
+}`,
+                    style: `<style lang="scss" scoped>
+.product-item {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	width: 100%;
+
+	img {
+		width: 75px;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+        margin-right: 1rem;
+	}
+
+	.product-list-detail {
+		flex: 1 1 0;
+	}
+
+	.product-list-action {
+		display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    .product-category-icon {
+        vertical-align: middle;
+        margin-right: .5rem;
+    }
+
+    .product-category {
+        vertical-align: middle;
+        line-height: 1;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .product-item {
+        flex-wrap: wrap;
+
+        .image-container {
+            width: 100%;
+            text-align: center;
+        }
+
+        img {
+            margin: 0 0 1rem 0;
+            width: 100px;
+        }
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 236c027e2..14803ac30 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -490,9 +490,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/organizationchart" 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/organizationchart" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="OrganizationChartDemo" :sources="sources" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Advanced&lt;/h3&gt;
@@ -705,4 +708,231 @@ 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">
+                <h5>Advanced</h5>
+                <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
+                    @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
+                    <template #person="slotProps">
+                        <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
+                        <div class="node-content">
+                            <img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
+                            <div>{{slotProps.node.data.name}}</div>
+                        </div>
+                    </template>
+                    <template #default="slotProps">
+                        <span>{{slotProps.node.data.label}}</span>
+                    </template>
+                </OrganizationChart>
+            </div>
+
+            <div class="card">
+                <h5>Basic</h5>
+                <OrganizationChart :value="data2">
+                    <template #default="slotProps">
+                        <span>{{slotProps.node.data.label}}</span>
+                    </template>
+                </OrganizationChart>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data1: {
+                key: '0',
+                type: 'person',
+                styleClass: 'p-person',
+                data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
+                        children:[{
+                            key: '0_0_0',
+                            data: {label: 'Tax'},
+                            selectable: false,
+                            styleClass: 'department-cfo'
+                        },
+                        {
+                            key: '0_0_1',
+                            data: {label: 'Legal'},
+                            selectable: false,
+                            styleClass: 'department-cfo'
+                        }],
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
+                        children:[{
+                            key: '0_1_0',
+                            data: {label: 'Operations'},
+                            selectable: false,
+                            styleClass: 'department-coo'
+                        }]
+                    },
+                    {
+                        key: '0_2',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
+                        children:[{
+                            key: '0_2_0',
+                            data: {label: 'Development'},
+                            selectable: false,
+                            styleClass: 'department-cto',
+                            children:[{
+                                key: '0_2_0_0',
+                                data: {label: 'Analysis'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_0_1',
+                                data: {label: 'Front End'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_0_2',
+                                data: {label: 'Back End'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            }]
+                        },
+                        {
+                            key: '0_2_1',
+                            data: {label: 'QA'},
+                            selectable: false,
+                            styleClass: 'department-cto'
+                        },
+                        {
+                            key: '0_2_2',
+                            data: {label: 'R&D'},
+                            selectable: false,
+                            styleClass: 'department-cto'
+                        }]
+                    }
+                ]
+            },
+            data2 : {
+                key: '0',
+                data: {label: 'F.C. Barcelona'},
+                children: [
+                    {
+                        key: '0_0',
+                        data: {label: 'F.C. Barcelona'},
+                        children: [
+                            {
+                                key: '0_0_0',
+                                data: {label: 'Chelsea F.C.'}
+                            },
+                            {
+                                key: '0_0_1',
+                                data: {label: 'F.C. Barcelona'}
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        data: {label: 'Real Madrid'},
+                        children: [
+                            {
+                                key: '0_1_0',
+                                data: {label: 'Bayern Munich'}
+                            },
+                            {
+                                key: '0_1_1',
+                                data: {label: 'Real Madrid'}
+                            }
+                        ]
+                    }
+                ]
+            },
+            selection: {}
+        }
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.label, life: 3000});
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.label, life: 3000});
+        },
+        onNodeExpand(node) {
+            this.$toast.add({severity:'success', summary: 'Node Expanded', detail: node.data.label, life: 3000});
+        },
+        onNodeCollapse(node) {
+            this.$toast.add({severity:'success', summary: 'Node Collapsed', detail: node.data.label, life: 3000});
+        }
+    }
+}`,
+                    style: `<style scoped lang="scss">
+::v-deep(.p-organizationchart) {
+    .p-person {
+        padding: 0;
+        border: 0 none;
+    }
+
+    .node-header, .node-content {
+        padding: .5em .7rem;
+    }
+
+    .node-header {
+        background-color: #495ebb;
+        color: #ffffff;
+    }
+
+    .node-content {
+        text-align: center;
+        border: 1px solid #495ebb;
+    }
+
+    .node-content img {
+        border-radius: 50%;
+    }
+
+    .department-cfo {
+        background-color: #7247bc;
+        color: #ffffff;
+    }
+
+    .department-coo {
+        background-color: #a534b6;
+        color: #ffffff;
+    }
+
+    .department-cto {
+        background-color: #e9286f;
+        color: #ffffff;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 735f88e04..465a8359c 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -155,9 +155,12 @@ toggle(event) {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/overlaypanel" 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/overlaypanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button', 'DataTable', 'Column']" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
@@ -217,3 +220,86 @@ export default {
 		</TabView>
 	</div>
 </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">
+                <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
+
+                <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
+                    <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                        <Column field="name" header="Name" sortable></Column>
+                        <Column header="Image">
+                            <template #body="slotProps">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
+                            </template>
+                        </Column>
+                        <Column field="price" header="Price" sortable>
+                            <template #body="slotProps">
+                                {{formatCurrency(slotProps.data.price)}}
+                            </template>
+                        </Column>
+                    </DataTable>
+                </OverlayPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+export default {
+    data() {
+        return {
+            products: null,
+            selectedProduct: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProductsSmall().then(data => this.products = data);
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        onProductSelect(event) {
+            this.$refs.op.hide();
+            this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
+        }
+    }
+}`,
+style: `<style lang="scss" scoped>
+button {
+    min-width: 15rem;
+}
+
+.product-image {
+    width: 50px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+}
+</style>`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index 3810537c5..15a285d15 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -257,9 +257,12 @@ onPage(event) {
             </TabPanel>
 
             <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primevue/tree/master/src/showcase/paginator" 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/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="PaginatorDemo" :sources="sources" :components="['Button']" />
+                </div>
 <pre v-code>
 <code>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -321,4 +324,77 @@ 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">
+                <h5>Basic</h5>
+                <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
+
+                <h5>Custom</h5>
+                <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
+                    template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
+                    <template #left>
+                        <Button type="button" icon="pi pi-refresh" @click="reset()"/>
+                    </template>
+                    <template #right>
+                        <Button type="button" icon="pi pi-search" />
+                    </template>
+                </Paginator>
+
+                <div class="image-gallery">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  />
+                </div>
+            </div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+			first: 0,
+            totalRecords: 120,
+            totalRecords2: 12
+        }
+    },
+    methods: {
+        reset() {
+            this.first = 0;
+        }
+    },
+    computed: {
+        image() {
+            return 'nature' + (this.first + 1);
+        }
+    }
+}`,
+                    style: `<style scoped>
+.p-button.p-button-icon-only {
+    border-radius: 0;
+}
+
+.image-gallery {
+    text-align: center;
+    padding: 1rem;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 3df98f530..044a9c526 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -226,9 +226,12 @@ import PickList from 'primevue/picklist';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/picklist" 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/picklist" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="PickListDemo" :sources="sources" service="ProductService" data="products-small" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;PickList v-model="products" listStyle="height:342px" dataKey="id"&gt;
@@ -334,4 +337,120 @@ product-item {
 			</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">
+                <PickList v-model="products" listStyle="height:342px" dataKey="id">
+                    <template #sourceHeader>
+                        Available
+                    </template>
+                    <template #targetHeader>
+                        Selected
+                    </template>
+                    <template #item="slotProps">
+                        <div class="product-item">
+                            <div class="image-container">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                            </div>
+                            <div class="product-list-detail">
+                                <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                                <i class="pi pi-tag product-category-icon"></i>
+                                <span class="product-category">{{slotProps.item.category}}</span>
+                            </div>
+                            <div class="product-list-action">
+                                <h6 class="p-mb-2">{{slotProps.item.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
+                            </div>
+                        </div>
+                    </template>
+                </PickList>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProductsSmall().then(data => this.products = [data, []]);
+    }
+}`,
+                    style: `<style lang="scss" scoped>
+.product-item {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	width: 100%;
+
+	img {
+		width: 75px;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+        margin-right: 1rem;
+	}
+
+	.product-list-detail {
+		flex: 1 1 0;
+	}
+
+	.product-list-action {
+		display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    .product-category-icon {
+        vertical-align: middle;
+        margin-right: .5rem;
+    }
+
+    .product-category {
+        vertical-align: middle;
+        line-height: 1;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .product-item {
+        flex-wrap: wrap;
+
+        .image-container {
+            width: 100%;
+            text-align: center;
+        }
+
+        img {
+            margin: 0 0 1rem 0;
+            width: 100px;
+        }
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index f64e2a91f..216a2dbf5 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -135,9 +135,12 @@ import Skeleton from 'primevue/skeleton';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" 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/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="SkeletonDemo" :sources="sources" :components="['DataTable', 'Column']" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card"&gt;
@@ -276,3 +279,174 @@ import Skeleton from 'primevue/skeleton';
 		</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">
+                 <div class="p-grid p-formgrid">
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>Rectangle</h5>
+                        <Skeleton class="p-mb-2"></Skeleton>
+                        <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                        <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                        <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                        <Skeleton width="10rem" height="4rem"></Skeleton>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>Rounded</h5>
+                        <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
+                        <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5 class="p-mt-3">Square</h5>
+                        <div class="p-d-flex p-ai-end">
+                            <Skeleton size="2rem" class="p-mr-2"></Skeleton>
+                            <Skeleton size="3rem" class="p-mr-2"></Skeleton>
+                            <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                            <Skeleton size="5rem"></Skeleton>
+                        </div>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5 class="p-mt-3">Circle</h5>
+                        <div class="p-d-flex p-ai-end">
+                            <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="5rem"></Skeleton>
+                        </div>
+                    </div>
+                 </div>
+            </div>
+
+            <div class="card">
+                 <div class="p-grid p-formgrid">
+                    <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+                        <h5>Card</h5>
+                        <div class="custom-skeleton p-p-4">
+                            <div class="p-d-flex p-mb-3">
+                                <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                <div>
+                                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                    <Skeleton height=".5rem"></Skeleton>
+                                </div>
+                            </div>
+                            <Skeleton width="100%" height="150px"></Skeleton>
+                            <div class="p-d-flex p-jc-between p-mt-3">
+                                <Skeleton width="4rem" height="2rem"></Skeleton>
+                                <Skeleton width="4rem" height="2rem"></Skeleton>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>List</h5>
+                        <div class="custom-skeleton p-p-4">
+                            <ul class="p-m-0 p-p-0">
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                 </div>
+
+                <h5>DataTable</h5>
+                <DataTable :value="products">
+                    <Column field="code" header="Code">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                    <Column field="name" header="Name">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                    <Column field="category" header="Category">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                    <Column field="quantity" header="Quantity">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            products: new Array(5)
+        }
+    }
+}`,
+					style: `<style lang="scss" scoped>
+.custom-skeleton {
+    border: 1px solid var(--surface-d);
+    border-radius: 4px;
+
+    ul {
+        list-style: none;
+    }
+}
+</style>`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index e350e1f87..3a1642954 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -434,9 +434,8 @@ export default {
             this.$toast.removeAllGroups();
         }
     }
-}`
-                },
-                style: `<style lang="scss" scoped>
+}`,
+                    style: `<style lang="scss" scoped>
 button {
     min-width: 10rem;
     margin-right: .5rem;
@@ -449,6 +448,27 @@ button {
     }
 }
 </style>`
+                },
+                'api': {
+                    content: `<template>
+    <Toast />
+    <Button @click="set" icon="pi pi-check" label="Confirm"></Button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { useToast } from "primevue/usetoast";
+
+export default defineComponent({
+    setup() {
+        const toast = useToast();
+        const set = () => {
+            toast.add({ severity: "info", summary: "Info Message", detail: "Message Content", life: 3000 });
+        };
+    return { set };
+    }
+});`
+                }
             }
         }
     },