csb added

src/views/avatar/AvatarDoc.vue

@@ -182,9 +182,12 @@ import AvatarGroup from 'primevue/avatargroup';
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
+					<LiveEditor name="AvatarDemo" :sources="sources" :components="['AvatarGroup']" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="p-grid"&gt;
@@ -279,3 +282,115 @@ import AvatarGroup from 'primevue/avatargroup';
 		</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="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Label</h5>
+                        <Avatar label="P" class="p-mr-2" size="xlarge" />
+                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Label - Circle</h5>
+                        <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Label - Badge</h5>
+                        <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
+                    </div>
+                </div>
+            </div>
+           
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon</h5>
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon - Circle</h5>
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+                    </div>
+                </div>
+
+                 <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon - Badge</h5>
+                        <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Image</h5>
+                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
+                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Avatar Group</h5>
+                        <AvatarGroup class="p-mb-3">
+                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                            <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
+                        </AvatarGroup>
+                    </div>
+                </div>
+
+                 <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Image - Badge</h5>
+                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>

src/views/chip/ChipDoc.vue

@@ -141,9 +141,12 @@ import Chip from 'primevue/chip';
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
+					<LiveEditor name="ChipDemo" :sources="sources" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
@@ -184,3 +187,69 @@ import Chip from 'primevue/chip';
 		</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>Basic</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Action" class="p-mr-2" />
+                    <Chip label="Comedy" class="p-mr-2" />
+                    <Chip label="Mystery" class="p-mr-2" />
+                    <Chip label="Thriller" removable />
+                </div>
+
+                <h5>Icon</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
+                    <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
+                    <Chip label="Google" icon="pi pi-google" class="p-mr-2" />
+                    <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+                </div>
+
+                <h5>Image</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
+                    <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
+                    <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
+                    <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" removable />
+                </div>
+
+                <h5>Styling</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Action" class="p-mr-2 custom-chip" />
+                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
+                    <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 custom-chip" />
+                    <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip" removable />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`,
+					style: `<style lang="scss" scoped>
+.p-chip.custom-chip {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+</style>`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>

src/views/progressbar/ProgressBarDoc.vue

@@ -118,9 +118,12 @@ data() {
 			</TabPanel>
 
 			<TabPanel header="Source">
+				<div class="p-d-flex p-jc-between">
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
+				<LiveEditor name="ProgressBarDemo" :sources="sources" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Dynamic&lt;/h3&gt;
@@ -172,3 +175,68 @@ 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>Dynamic</h5>
+                <ProgressBar :value="value1" />
+
+                <h5>Static</h5>
+                <ProgressBar :value="value2" :showValue="false" />
+
+                <h5>Indeterminate</h5>
+                <ProgressBar mode="indeterminate" style="height: .5em" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 0,
+            value2: 50
+        }
+    },
+    interval: null,
+    methods: {
+        startProgress() {
+            this.interval = setInterval(() => {
+                let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
+                if (newValue >= 100) {
+                    newValue = 100;
+                }
+                this.value1 = newValue;
+            }, 2000);
+        },
+        endProgress() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    },
+    mounted() {
+        this.startProgress();
+    },
+    beforeUnmount() {
+        this.endProgress();
+    }
+}`
+				}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>

src/views/progressspinner/ProgressSpinnerDoc.vue

@@ -107,9 +107,12 @@ import ProgressSpinner from 'primevue/progressspinner';
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -123,3 +126,37 @@ import ProgressSpinner from 'primevue/progressspinner';
 		</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>Basic</h5>
+                <ProgressSpinner />
+
+                <h5>Custom</h5>
+                <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/ripple/RippleDoc.vue

@@ -92,9 +92,12 @@ directives: {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="RippleDemo" :sources="sources" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;div class="card-container p-d-flex"&gt;
@@ -160,3 +163,78 @@ 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-container p-d-flex">
+                <div class="card primary-box p-ripple" v-ripple>Default</div>
+                <div class="card styled-box-green p-ripple" v-ripple>Green</div>
+                <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
+                <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}`,
+                    style: `<style lang="scss" scoped>
+::v-deep(.card-container) {
+    .card {
+        width: 75px;
+        height: 75px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        user-select: none;
+        padding: 0;
+
+        &.primary-box {
+            background-color: var(--primary-color);
+            padding: 0;
+            color: var(--primary-color-text);
+        }
+
+        &.styled-box-green {
+            .p-ink {
+                background: rgba(#4baf50, 0.3);
+            }
+        }
+
+        &.styled-box-orange {
+            .p-ink {
+                background: rgba(#ffc106, 0.3);
+            }
+        }
+
+        &.styled-box-purple {
+            .p-ink {
+                background: rgba(#9c27b0, 0.3);
+            }
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/terminal/TerminalDoc.vue

@@ -138,9 +138,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
+                <div class="p-d-flex p-jc-between">
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
+                    <LiveEditor name="TerminalDemo" :sources="sources" />
+                </div>
 <pre v-code>
 <code>
 &lt;p&gt;Enter "date" to display the current date, "greet &#123;0&#125;" for a message and "random" to get a random number.&lt;/p&gt;
@@ -217,3 +220,89 @@ p {
 		</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">
+                <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+                <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TerminalService from "primevue/terminalservice";
+export default {
+    methods: {
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch(command) {
+                case "date":
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case "greet":
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case "random":
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = "Unknown command: " + command;
+            }
+            
+            TerminalService.emit('response', response);
+        }
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    }
+}`,
+                    style: `<style lang="scss" scoped>
+p {
+    margin-top: 0;
+}
+
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+
+    .p-terminal-command {
+        color: #80CBC4;
+    }
+
+    .p-terminal-prompt {
+        color: #FFD54F;
+    }
+
+    .p-terminal-response {
+        color: #9FA8DA;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>