From 62dceb0e81b15b1ec1951cc483ba87a828093b0c 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: Fri, 8 Jan 2021 17:28:57 +0300
Subject: [PATCH] update LiveEditor

---
 src/views/chart/BarChartDoc.vue       | 151 +++++++++++++++++++++++++-
 src/views/chart/ComboChartDoc.vue     |  62 ++++++++++-
 src/views/chart/DoughnutChartDoc.vue  |  49 ++++++++-
 src/views/chart/LineChartDoc.vue      | 130 +++++++++++++++++++++-
 src/views/chart/PieChartDoc.vue       |  49 ++++++++-
 src/views/chart/PolarAreaChartDoc.vue |  47 +++++++-
 src/views/chart/RadarChartDoc.vue     |  64 ++++++++++-
 src/views/liveeditor/LiveEditor.vue   |  34 ++++--
 src/views/sidebar/SidebarDoc.vue      |  75 ++++++++++++-
 src/views/toast/ToastDoc.vue          | 107 +++++++++++++++++-
 src/views/tooltip/TooltipDoc.vue      |  61 ++++++++++-
 11 files changed, 804 insertions(+), 25 deletions(-)

diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index 457ff28f8..034692590 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources"  class="p-ml-auto"/>
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Vertical&lt;/h3&gt;
@@ -167,4 +170,150 @@ 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>Vertical</h5>
+                <Chart type="bar" :data="basicData" :options="basicOptions" />
+            </div>
+
+            <div class="card">
+                <h5>Horizontal</h5>
+                <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+            </div>
+
+            <div class="card">
+                <h5>Multi Axis</h5>
+                <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
+            </div>
+
+            <div class="card">
+                <h5>Stacked</h5>
+                <Chart type="bar" :data="stackedData" :options="stackedOptions" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            basicData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                    {
+                        label: 'My First dataset',
+                        backgroundColor: '#42A5F5',
+                        data: [65, 59, 80, 81, 56, 55, 40]
+                    },
+                    {
+                        label: 'My Second dataset',
+                        backgroundColor: '#FFA726',
+                        data: [28, 48, 40, 19, 86, 27, 90]
+                    }
+                ]
+            },
+            multiAxisData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label: 'Dataset 1',
+                    backgroundColor: ['#EC407A','#AB47BC','#42A5F5','#7E57C2','#66BB6A','#FFCA28','#26A69A'],
+                    yAxisID: 'y-axis-1',
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                }, {
+                    label: 'Dataset 2',
+                    backgroundColor: '#78909C',
+                    yAxisID: 'y-axis-2',
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }]
+            },
+            multiAxisOptions: {
+                responsive: true,
+                tooltips: {
+                    mode: 'index',
+                    intersect: true
+                },
+                scales: {
+                    yAxes: [{
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        id: 'y-axis-1',
+                        ticks: {
+                            min: 0,
+                            max: 100
+                        }
+                    },
+                    {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        id: 'y-axis-2',
+                        gridLines: {
+                            drawOnChartArea: false
+                        },
+                        ticks: {
+                            min: 0,
+                            max: 100
+                        }
+                    }]
+                }
+            },
+            stackedData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    type: 'bar',
+                    label: 'Dataset 1',
+                    backgroundColor: '#42A5F5',
+                    data: [50,25,12,48,90,76,42]
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: '#66BB6A',
+                    data: [21,84,24,75,37,65,34]
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: '#FFA726',
+                    data: [41,52,24,74,23,21,32]
+                }]
+            },
+            stackedOptions: {
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
+                },
+                responsive: true,
+                scales: {
+                    xAxes: [{
+                        stacked: true,
+                    }],
+                    yAxes: [{
+                        stacked: true
+                    }]
+                }
+            },
+            basicOptions: null
+        }
+    }
+}`
+                }
+            }
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 4bf7d83b7..53428774e 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
@@ -81,4 +84,61 @@ 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">
+                <Chart type="bar" :data="chartData"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    type: 'line',
+                    label: 'Dataset 1',
+                    borderColor: '#42A5F5',
+                    borderWidth: 2,
+                    fill: false,
+                    data: [50,25,12,48,56,76,42]
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: '#66BB6A',
+                    data: [21,84,24,75,37,65,34],
+                    borderColor: 'white',
+                    borderWidth: 2
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: '#FFA726',
+                    data: [41,52,24,74,23,21,32]
+                }]
+            }
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index f8ce14ee0..c4c5a8b90 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;Chart type="doughnut" :data="chartData" /&gt;
@@ -39,4 +42,48 @@ 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">
+                <Chart type="doughnut" :data="chartData" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                labels: ['A','B','C'],
+                datasets: [
+                    {
+                        data: [300, 50, 100],
+                        backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],
+                        hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
+                    }
+                ]
+            }
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index 334f70d08..bee253812 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -114,4 +117,129 @@ 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>
+                <Chart type="line" :data="basicData" :options="basicOptions" />
+            </div>
+
+            <div class="card">
+                <h5>Multi Axis</h5>
+                <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
+            </div>
+
+            <div class="card">
+                <h5>Line Styles</h5>
+                <Chart type="line" :data="lineStylesData" :options="basicOptions" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            basicData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                    {
+                        label: 'First Dataset',
+                        data: [65, 59, 80, 81, 56, 55, 40],
+                        fill: false,
+                        borderColor: '#42A5F5'
+                    },
+                    {
+                        label: 'Second Dataset',
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        fill: false,
+                        borderColor: '#FFA726'
+                    }
+                ]
+            },
+            multiAxisData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label: 'Dataset 1',
+                    fill: false,
+                    borderColor: '#42A5F5',
+                    yAxisID: 'y-axis-1',
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                }, {
+                    label: 'Dataset 2',
+                    fill: false,
+                    borderColor: '#00bb7e',
+                    yAxisID: 'y-axis-2',
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }]
+            },
+            multiAxisOptions: {
+                responsive: true,
+                hoverMode: 'index',
+                stacked: false,
+                scales: {
+                    yAxes: [{
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        id: 'y-axis-1',
+                    }, {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        id: 'y-axis-2',
+                        gridLines: {
+                            drawOnChartArea: false
+                        }
+                    }]
+                }
+            },
+            lineStylesData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                    {
+                        label: 'First Dataset',
+                        data: [65, 59, 80, 81, 56, 55, 40],
+                        fill: false,
+                        borderColor: '#42A5F5'
+                    },
+                    {
+                        label: 'Second Dataset',
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        fill: false,
+                        borderDash: [5, 5],
+                        borderColor: '#66BB6A'
+                    },
+                    {
+                        label: 'Third Dataset',
+                        data: [12, 51, 62, 33, 21, 62, 45],
+                        fill: true,
+                        borderColor: '#FFA726',
+                        backgroundColor: 'rgba(255,167,38,0.2)'
+                    }
+                ]
+            },
+            basicOptions: null
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components:  {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index 8f6c4dc0b..95d92cb43 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;Chart type="pie" :data="chartData" /&gt;
@@ -39,4 +42,48 @@ 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">
+                <Chart type="pie" :data="chartData" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                labels: ['A','B','C'],
+                datasets: [
+                    {
+                        data: [300, 50, 100],
+                        backgroundColor: ["#42A5F5","#66BB6A","#FFA726"],
+                        hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
+                    }
+                ]
+            }
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index c4adcb99d..6772589a3 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;Chart type="polarArea" :data="chartData" /&gt;
@@ -47,4 +50,46 @@ 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">
+                <Chart type="polarArea" :data="chartData" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                datasets: [{
+                    data: [11,16,7,3,14],
+                    backgroundColor: ["#42A5F5","#66BB6A","#FFA726","#26C6DA","#7E57C2"],
+                    label: 'My dataset'
+                }],
+                labels: ["Red","Green","Yellow","Grey","Blue"]
+            }
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index 947b781d6..de6c5383d 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -2,6 +2,9 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Source">
+				<div class="p-d-flex">
+					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;Chart type="radar" :data="chartData" /&gt;
@@ -46,4 +49,63 @@ 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">
+                <Chart type="radar" :data="chartData" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+                datasets: [
+                    {
+                        label: 'My First dataset',
+                        backgroundColor: 'rgba(179,181,198,0.2)',
+                        borderColor: 'rgba(179,181,198,1)',
+                        pointBackgroundColor: 'rgba(179,181,198,1)',
+                        pointBorderColor: '#fff',
+                        pointHoverBackgroundColor: '#fff',
+                        pointHoverBorderColor: 'rgba(179,181,198,1)',
+                        data: [65, 59, 90, 81, 56, 55, 40]
+                    },
+                    {
+                        label: 'My Second dataset',
+                        backgroundColor: 'rgba(255,99,132,0.2)',
+                        borderColor: 'rgba(255,99,132,1)',
+                        pointBackgroundColor: 'rgba(255,99,132,1)',
+                        pointBorderColor: '#fff',
+                        pointHoverBackgroundColor: '#fff',
+                        pointHoverBorderColor: 'rgba(255,99,132,1)',
+                        data: [28, 48, 40, 19, 96, 27, 100]
+                    }
+                ]
+            },
+        }
+    }    
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index 89be88050..cbc1da8e8 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -121,7 +121,7 @@ export default {
             let content = this.sources.template.content;
             let style = this.sources.template.style || '';
             let scriptText = 'script';
-            let _files = {}, components = '', imports = '';
+            let _files = {}, element = '', components = '', imports = '', directives = '';
 
             _files[`src/components/${name}${extension}`] = {       
                 content: `${content}
@@ -130,6 +130,13 @@ export default {
 ${style}`   
             }
 
+            if(name === 'ToastDemo'){
+                imports += `import ToastService from 'primevue/toastservice';
+`;
+                directives += `app.use(ToastService);
+`;
+            }
+
             if(this.components) {
                 this.components.forEach(comp => {
                     imports += `import ${comp} from "primevue/${comp.toLowerCase()}";
@@ -139,6 +146,15 @@ ${style}`
                 })
             } 
 
+            if(name !== 'TooltipDemo') {
+                element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
+            }
+
+            if(name === 'TooltipDemo' || name === 'BadgeDemo'){
+                directives += `app.directive('${name.slice(0, -4).toLowerCase()}', ${name.slice(0, -4)});
+`;
+            }
+
             _files['src/main.js'] = {
                 content: `import { createApp } from "vue";
 import "primeflex/primeflex.css";
@@ -147,11 +163,12 @@ import "primevue/resources/primevue.min.css";
 import "primeicons/primeicons.css";
 import App from "./App.vue";
 import PrimeVue from "primevue/config";
-import ${this.name.slice(0, -4)} from "primevue/${this.name.slice(0, -4).toLowerCase()}";
+import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";
 ${imports}
 const app = createApp(App);
 app.use(PrimeVue, { ripple: true });
-app.component("${this.name.slice(0, -4)}", ${this.name.slice(0, -4)});
+${directives}
+${element}
 ${components}
 app.mount("#app");
 `
@@ -443,20 +460,23 @@ img.flag {
                 });
             }
 
-            if(this.name === 'EditorDemo') {
+            if(name === 'EditorDemo') {
                 extDependencies['quill'] =  "^1.3.7";
             }
-            if(this.name === 'FullCalendarDemo') {
+            if(name === 'FullCalendarDemo') {
                 extDependencies['@fullcalendar/core'] = "5.4.0";
                 extDependencies['@fullcalendar/daygrid'] = "5.4.0";
                 extDependencies['@fullcalendar/interaction'] = "5.4.0";
                 extDependencies['@fullcalendar/timegrid'] = "5.4.0";
             }
+            if(name === 'ChartDemo') {
+                extDependencies['chart.js'] = "2.7.3";
+            }
 
-            let mittComponents = ['OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo'];
+            let mittComponents = ['ToastDemo', 'OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo'];
 
             mittComponents.forEach(cmp => {
-                if(this.name === cmp) {
+                if(name === cmp) {
                     extDependencies['mitt'] = "^2.1.0";
                 }
             });
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index 7f1399d0b..fd5ca95b3 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -209,9 +209,12 @@ import Sidebar from 'primevue/sidebar';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/sidebar" 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/sidebar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="SidebarDemo" :sources="sources" :components="['Button', 'Calendar']"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /&gt;
@@ -260,4 +263,68 @@ 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">
+                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
+                <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
+                <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
+                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
+                <Button icon="pi pi-th-large" @click="visibleFull = true"  />
+
+                <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
+                    <h3>Left Sidebar</h3>
+                    <Calendar id="basic" />
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
+                    <h3>Right Sidebar</h3>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
+                    <h3>Top Sidebar</h3>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
+                    <h3>Bottom Sidebar</h3>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
+                    <h3>Full Screen</h3>
+                </Sidebar>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visibleLeft: false,
+            visibleRight: false,
+            visibleTop: false,
+            visibleBottom: false,
+            visibleFull: false
+        }
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 09bcf3136..e350e1f87 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -282,9 +282,12 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/toast" 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/toast" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="ToastDemo" :sources="sources" :components="['Button']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Severities&lt;/h5&gt;
@@ -356,3 +359,101 @@ 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>Severities</h5>
+                <Button label="Success" class="p-button-success" @click="showSuccess" />
+                <Button label="Info" class="p-button-info" @click="showInfo" />
+                <Button label="Warn" class="p-button-warning" @click="showWarn" />
+                <Button label="Error" class="p-button-danger" @click="showError" />
+
+                <h5>Positions</h5>
+                <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+                <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
+                <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+
+                <h5>Options</h5>
+                <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
+                <Button @click="showSticky" label="Sticky" />
+
+                <h5>Remove All</h5>
+                <Button @click="clear" label="Clear" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            messages: [],
+        }
+    },
+    methods: {
+        showSuccess() {
+            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
+        },
+        showInfo() {
+            this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
+        },
+        showWarn() {
+            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
+        },
+        showError() {
+            this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
+        },
+        showTopLeft() {
+            this.$toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
+        },
+        showBottomLeft() {
+            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
+        },
+        showBottomRight() {
+            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
+        },
+        showSticky() {
+            this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
+        },
+        showMultiple() {
+            this.$toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
+            this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
+            this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
+        },
+        clear() {
+            this.$toast.removeAllGroups();
+        }
+    }
+}`
+                },
+                style: `<style lang="scss" scoped>
+button {
+    min-width: 10rem;
+    margin-right: .5rem;
+}
+
+@media screen and (max-width: 960px) {
+    button {
+        width: 100%;
+        margin-bottom: .5rem;
+    }
+}
+</style>`
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index 74a1298cc..a4bf58a8c 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -89,9 +89,12 @@ directives: {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tooltip" 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/tooltip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                    <span>View on GitHub</span>
+                </a>
+                <LiveEditor name="TooltipDemo" :sources="sources" :components="['InputText', 'Button']"/>
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Positions&lt;/h3&gt;
@@ -126,4 +129,54 @@ 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>Positions</h5>
+                <div class="p-grid p-fluid">
+                    <div class="p-col-12 p-md-3">
+                        <InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
+                    </div>
+                    <div class="p-col-12 p-md-3">
+                        <InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
+                    </div>
+                    <div class="p-col-12 p-md-3">
+                        <InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
+                    </div>
+                    <div class="p-col-12 p-md-3">
+                        <InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
+                    </div>
+                </div>
+
+                <h5>Focus and Blur</h5>
+                <InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" />
+
+                <h5>Button</h5>
+                <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>
\ No newline at end of file