From e18a2d09e20d00d97253399e16b5deeee5a6c761 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: Mon, 11 Oct 2021 16:58:47 +0300
Subject: [PATCH] browser source added for misc

---
 src/views/avatar/AvatarDoc.vue                | 111 ++++++++++++
 src/views/badge/BadgeDoc.vue                  |  45 +++++
 src/views/blockui/BlockUIDoc.vue              |  72 ++++++++
 src/views/chip/ChipDoc.vue                    |  58 ++++++
 src/views/inplace/InplaceDoc.vue              |  72 ++++++++
 src/views/progressbar/ProgressBarDoc.vue      |  58 ++++++
 .../progressspinner/ProgressSpinnerDoc.vue    |  25 +++
 src/views/ripple/RippleDoc.vue                |  64 +++++++
 src/views/scrolltop/ScrollTopDoc.vue          |  58 ++++++
 src/views/skeleton/SkeletonDoc.vue            | 170 ++++++++++++++++++
 src/views/styleclass/StyleClassDemo.vue       |   1 +
 src/views/styleclass/StyleClassDoc.vue        |  70 ++++++++
 src/views/tag/TagDoc.vue                      |  42 +++++
 src/views/terminal/TerminalDoc.vue            |  85 +++++++++
 14 files changed, 931 insertions(+)

diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 166882e08..c95237fbc 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -370,6 +370,117 @@ export default {
 export default {
 }
 <\\/script>`
+				},
+                'browser-source': {
+					tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Label</h5>
+                        <p-avatar label="P" class="p-mr-2" size="xlarge"></p-avatar>
+                        <p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
+                        <p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Label - Circle</h5>
+                        <p-avatar label="P" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
+                        <p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
+                        <p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Label - Badge</h5>
+                        <p-avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4"></p-avatar>
+                    </div>
+                </div>
+            </div>
+           
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon</h5>
+                        <p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon - Circle</h5>
+                        <p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon - Badge</h5>
+                        <p-avatar icon="pi pi-user" size="xlarge" v-badge="4"></p-avatar>
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Image</h5>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle"></p-avatar>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle"></p-avatar>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>p-avatar Group</h5>
+                        <p-avatargroup class="p-mb-3">
+                            <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
+                            <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
+                            <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
+                            <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
+                            <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
+                            <p-avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
+                        </p-avatargroup>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Image - Badge</h5>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4"></p-avatar>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp } = Vue;
+        const BadgeDirective = primevue.badgedirective;
+        
+        const App = {
+            components: {
+                "p-avatar": primevue.avatar,
+                "p-avatargroup": primevue.avatargroup
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .directive("badge", BadgeDirective)
+            .mount("#app");
+        <\\/script>`
 				}
 			}
 		}
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index a3a56b950..5a70e6202 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -249,6 +249,51 @@ export default {
 <script>
 export default {
 }
+<\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/badge/badge.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Numbers</h5>
+            <p-badge value="2" class="p-mr-2"></p-badge>
+            <p-badge value="8" severity="success" class="p-mr-2"></p-badge>
+            <p-badge value="4" severity="info" class="p-mr-2"></p-badge>
+            <p-badge value="12" severity="warning" class="p-mr-2"></p-badge>
+            <p-badge value="3" severity="danger"></p-badge>
+
+            <h5 class="p-mb-4">Positioned Badge</h5>
+            <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+            <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+            <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
+
+            <h5>Button Badge</h5>
+            <p-button type="button" label="Emails" badge="8" class="p-mr-2"></p-button>
+            <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+
+            <h5>Sizes</h5>
+            <p-badge value="2" class="p-mr-2"></p-badge>
+            <p-badge value="4" class="p-mr-2" size="large" severity="warning"></p-badge>
+            <p-badge value="6" size="xlarge" severity="success"></p-badge>
+        </div>
+
+<script type="module">
+const { createApp } = Vue;
+const BadgeDirective = primevue.badgedirective;
+
+const App = {
+    components: {
+        "p-badge": primevue.badge,
+        "p-button": primevue.button
+    }
+};
+
+const app = createApp(App);
+app.use(primevue.config.default);
+app.directive('badge', BadgeDirective);
+app.mount('#app');
 <\\/script>`
                 }
             }
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue
index d49114517..fe8e02de1 100755
--- a/src/views/blockui/BlockUIDoc.vue
+++ b/src/views/blockui/BlockUIDoc.vue
@@ -268,6 +268,78 @@ button {
     margin-right: .5rem;
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Document</h5>
+            <p-blockui :blocked="blockedDocument" :full-screen="true"></p-blockui>
+
+            <p-button type="button" label="Block" @click="blockDocument()"></p-button>
+
+            <h5>Panel</h5>
+            <p-button type="button" label="Block" @click="blockPanel()"></p-button>
+            <p-button type="button" label="Unblock" @click="unblockPanel()"></p-button>
+
+            <p-blockui :blocked="blockedPanel">
+                <p-panel header="Godfather I" style="margin-top: 20px">
+                    <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
+                </p-panel>
+            </p-blockui>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const blockedPanel = ref(false);
+                const blockedDocument = ref(false);
+                const blockDocument = () => {
+                    blockedDocument.value = true;
+
+                    setTimeout(() => {
+                        blockedDocument.value = false;
+                    }, 3000);
+                };
+                const blockPanel = () => {
+                    blockedPanel.value = true;
+                };
+                const unblockPanel = () => {
+                    blockedPanel.value = false;
+                };
+
+                return { blockedPanel, blockedDocument, blockDocument, blockPanel, unblockPanel }
+            },
+            components: {
+                "p-blockui": primevue.blockui,
+                "p-panel": primevue.panel,
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-panel p {
+            line-height: 1.5;
+            margin: 0;
+        }
+
+        .p-button {
+            margin-right: .5rem;
+        }
+        </style>
+`
                 }
             }
         }
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index ec420dc46..94049d697 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -241,6 +241,64 @@ export default {
     color: var(--primary-color-text);
 }
 </style>`
+				},
+				'browser-source': {
+					tabName: 'Browser Source',
+					imports: `<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"><\\/script>`,
+					content: `
+	<div id="app">
+		<h5>Basic</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <p-chip label="Action" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Comedy" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Mystery" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Thriller" class="p-mb-2" removable></p-chip>
+        </div>
+
+        <h5>Icon</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable></p-chip>
+        </div>
+
+        <h5>Image</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
+            <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable></p-chip>
+        </div>
+
+        <h5>Styling</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <p-chip label="Action" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
+            <p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
+            <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
+            <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable></p-chip>
+        </div>
+	</div>
+
+	<script type="module">
+		const { createApp } = Vue;
+
+		const App = {
+			components: {
+				"p-chip": primevue.chip
+			}
+		};
+
+		createApp(App).mount('#app');
+	<\\/script>
+
+	<style>
+	.p-chip.custom-chip {
+	    background: var(--primary-color);
+	    color: var(--primary-color-text);
+	}
+	</style>
+`
 				}
 			}
 		}
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index f8f9922fe..af8f4dbf6 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -316,6 +316,78 @@ export default {
     }
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/inplace/inplace.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="./ProductService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Input</h5>
+            <p-inplace :closable="true">
+                <template #display>
+                    {{text || 'Click to Edit'}}
+                </template>
+                <template #content>
+                    <p-inputtext v-model="text" autoFocus></p-inputtext>
+                </template>
+            </p-inplace>
+
+            <h5>Image</h5>
+            <p-inplace>
+                <template #display>
+                    <span class="pi pi-search" style="vertical-align: middle"></span>
+                    <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
+                </template>
+                <template #content>
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
+                </template>
+            </p-inplace>
+
+            <h5>Lazy Data</h5>
+            <p-inplace @open="loadData">
+                <template #display>
+                    View Data
+                </template>
+                <template #content>
+                    <p-datatable :value="products" responsive-layout="scroll" >
+                        <p-column field="code" header="Code"></p-column>
+                        <p-column field="name" header="Name"></p-column>
+                        <p-column field="category" header="Category"></p-column>
+                        <p-column field="quantity" header="Quantity"></p-column>
+                    </p-datatable>
+                </template>
+            </p-inplace>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const productService = ref(new ProductService());
+                const text = ref(null);
+                const products = ref(null);
+                const loadData = () => {
+                    productService.value.getProductsSmall().then(data => products.value = data);
+                }
+
+                return { productService, text, products, loadData }
+            },
+            components: {
+                "p-inplace": primevue.inplace,
+                "p-datatable": primevue.datatable,
+                "p-column": primevue.column,
+                "p-inputtext": primevue.inputtext
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>`
                 }
             }
         }
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 0be52ef70..3a48a4445 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -217,6 +217,64 @@ export default {
 }
 <\\/script>`
 
+				},
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/progressbar/progressbar.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <h5>Dynamic</h5>
+            <p-progressbar :value="value1"></p-progressbar>
+
+            <h5>Static</h5>
+            <p-progressbar :value="value2" :showValue="false"></p-progressbar>
+
+            <h5>Indeterminate</h5>
+            <p-progressbar mode="indeterminate" style="height: .5em"></p-progressbar>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted, onBeforeUnmount } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    startProgress();
+                })
+
+                onBeforeUnmount(() => {
+                    endProgress();
+                })
+                
+                const value1 = ref(0);
+                const value2 = ref(50);
+                const interval = ref(null);
+                const startProgress = () => {
+                    interval.value = setInterval(() => {
+                        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
+                        if (newValue >= 100) {
+                            newValue = 100;
+                        }
+                        value1.value = newValue;
+                    }, 2000);
+                };
+                const endProgress = () => {
+                    clearInterval(interval.value);
+                    interval.value = null;
+                };
+
+                return { value1, value2 }
+            },
+            components: {
+                "p-progressbar": primevue.progressbar
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>`
+
 				}
 			}
 		}
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index bbb03c5b1..9d9e3a7db 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -143,7 +143,32 @@ export default {
 export default {
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/progressspinner/progressspinner.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-progressspinner></p-progressspinner>
 
+            <h5>Custom</h5>
+            <p-progressspinner style="width:50px;height:50px" stroke-width="8" fill="#EEEEEE" animation-duration=".5s"></p-progressspinner>
+        </div>
+
+        <script type="module">
+        const { createApp } = Vue;
+
+        const App = {
+            components: {
+                "p-progressspinner": primevue.progressspinner
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>`
                 }
             }
         }
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index b9335dc82..eedf89197 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -222,6 +222,70 @@ export default {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    content: `
+    <div id="app" class="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>
+
+    <script type="module">
+        const { createApp } = Vue;
+        const Ripple = primevue.ripple;
+
+        const App = {
+            directives: {
+                "ripple": Ripple
+            }
+        };
+
+        const app = createApp(App);
+        app.use(primevue.config.default, { ripple: true });
+        app.mount("#app");
+    <\\/script>
+    
+    <style>
+        .card {
+            width: 75px;
+            height: 75px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            user-select: none;
+            padding: 0;
+            background: #ffffff;
+            padding: 2rem;
+            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+            border-radius: 4px;
+            margin-bottom: 2rem;
+        }
+        .card.primary-box {
+            background-color: var(--primary-color);
+            padding: 0;
+            color: var(--primary-color-text);
+        }
+
+        .card.styled-box-green .p-ink {
+            background: #4baf50;
+        }
+
+        .card.styled-box-orange .p-ink {
+            background: #ffc106;
+        }
+
+        .card.styled-box-purple .p-ink {
+            background: #9c27b0;
+        }
+
+        .card:last-child {
+            margin-right: 0;
+        }
+    </style>`
                 }
             }
         }
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index 4b5cdfea2..c355dfe4c 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -199,6 +199,64 @@ export default {
         color: var(--primary-color-text);
     }
 }
+</style>`
+				},
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/scrolltop/scrolltop.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/scrollpanel/scrollpanel.min.js"><\\/script>`,
+					content: `
+    <div id="app">
+        <h5>Element</h5>
+        <p-scrollpanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Vitae et leo duis ut diam.
+                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <p-scrolltop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up"></p-scrolltop>
+        </p-scrollpanel>
+    </div>
+
+        <script type="module">
+        const { createApp } = Vue;
+
+        const App = {
+            components: {
+                "p-scrolltop": primevue.scrolltop,
+                "p-scrollpanel": primevue.scrollpanel
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+<style>
+.custom-scrolltop {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 4px;
+    background-color: var(--primary-color) !important;
+}
+
+.custom-scrolltop:hover {
+	background-color: var(--primary-color);
+}
+
+.custom-scrolltop .p-scrolltop-icon {
+    font-size: 1rem;
+    color: var(--primary-color-text);
+}
 </style>`
 				}
 			}
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 02837bc26..33b6cd909 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -449,6 +449,176 @@ export default {
     }
 }
 </style>`
+				},
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <div class="card">
+                <div class="p-grid p-formgrid">
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>Rectangle</h5>
+                        <p-skeleton class="p-mb-2"></p-skeleton>
+                        <p-skeleton width="10rem" class="p-mb-2"></p-skeleton>
+                        <p-skeleton width="5rem" class="p-mb-2"></p-skeleton>
+                        <p-skeleton height="2rem" class="p-mb-2"></p-skeleton>
+                        <p-skeleton width="10rem" height="4rem"></p-skeleton>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>Rounded</h5>
+                        <p-skeleton class="p-mb-2" border-radius="16px"></p-skeleton>
+                        <p-skeleton width="10rem" class="p-mb-2" border-radius="16px"></p-skeleton>
+                        <p-skeleton width="5rem" border-radius="16px" class="p-mb-2"></p-skeleton>
+                        <p-skeleton height="2rem" class="p-mb-2" border-radius="16px"></p-skeleton>
+                        <p-skeleton width="10rem" height="4rem" border-radius="16px"></p-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">
+                            <p-skeleton size="2rem" class="p-mr-2"></p-skeleton>
+                            <p-skeleton size="3rem" class="p-mr-2"></p-skeleton>
+                            <p-skeleton size="4rem" class="p-mr-2"></p-skeleton>
+                            <p-skeleton size="5rem"></p-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">
+                            <p-skeleton shape="circle" size="2rem" class="p-mr-2"></p-skeleton>
+                            <p-skeleton shape="circle" size="3rem" class="p-mr-2"></p-skeleton>
+                            <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                            <p-skeleton shape="circle" size="5rem"></p-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">
+                                <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                <div>
+                                    <p-skeleton width="10rem" class="p-mb-2"></p-skeleton>
+                                    <p-skeleton width="5rem" class="p-mb-2"></p-skeleton>
+                                    <p-skeleton height=".5rem"></p-skeleton>
+                                </div>
+                            </div>
+                            <p-skeleton width="100%" height="150px"></p-skeleton>
+                            <div class="p-d-flex p-jc-between p-mt-3">
+                                <p-skeleton width="4rem" height="2rem"></p-skeleton>
+                                <p-skeleton width="4rem" height="2rem"></p-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">
+                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                        <div style="flex: 1">
+                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="75%"></p-skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                        <div style="flex: 1">
+                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="75%"></p-skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                        <div style="flex: 1">
+                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="75%"></p-skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="p-d-flex">
+                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                        <div style="flex: 1">
+                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="75%"></p-skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <h5>DataTable</h5>
+                <p-datatable :value="products" responsive-layout="scroll">
+                    <p-column field="code" header="Code">
+                        <template #body>
+                            <p-skeleton></p-skeleton>
+                        </template>
+                    </p-column>
+                    <p-column field="name" header="Name">
+                        <template #body>
+                            <p-skeleton></p-skeleton>
+                        </template>
+                    </p-column>
+                    <p-column field="category" header="Category">
+                        <template #body>
+                            <p-skeleton></p-skeleton>
+                        </template>
+                    </p-column>
+                    <p-column field="quantity" header="Quantity">
+                        <template #body>
+                            <p-skeleton></p-skeleton>
+                        </template>
+                    </p-column>
+                </p-datatable>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const products = ref(new Array(4));
+
+                return { products }
+            },
+            components: {
+                "p-skeleton": primevue.skeleton,
+                "p-datatable": primevue.datatable,
+                "p-column": primevue.column
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .custom-skeleton {
+            border: 1px solid var(--surface-d);
+            border-radius: 4px;
+        }
+
+        .custom-skeleton ul {
+            list-style: none;
+        }
+        </style>`
 				}
 			}
 		}
diff --git a/src/views/styleclass/StyleClassDemo.vue b/src/views/styleclass/StyleClassDemo.vue
index 36cb76ab0..86cb7f733 100644
--- a/src/views/styleclass/StyleClassDemo.vue
+++ b/src/views/styleclass/StyleClassDemo.vue
@@ -5,6 +5,7 @@
                 <h1>StyleClass</h1>
                 <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
             </div>
+            <AppDemoActions />
         </div>
     </div>
 
diff --git a/src/views/styleclass/StyleClassDoc.vue b/src/views/styleclass/StyleClassDoc.vue
index 31c8657ee..30ab8b973 100644
--- a/src/views/styleclass/StyleClassDoc.vue
+++ b/src/views/styleclass/StyleClassDoc.vue
@@ -246,6 +246,76 @@ export default {
 }
 </style>
 
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/styleclass/styleclass.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Toggle Class</h5>
+            <p-button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }"></p-button>
+            <p-inputtext class="p-d-block p-mt-3"></p-inputtext>
+
+            <h5>Animations</h5>
+            <p-button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }"></p-button>
+            <p-button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }"></p-button>
+            <div class="box p-d-none">Content</div>
+        </div>
+
+        <script>
+            const { createApp } = Vue;
+            const StyleClass = primevue.styleclass;
+
+            const App = {
+                components: {
+                    "p-inputtext": primevue.inputtext,
+                    "p-button": primevue.button
+                }
+            };
+
+            createApp(App)
+                .use(primevue.config.default)
+                .directive("styleclass", StyleClass)
+                .mount("#app");
+        <\\/script>
+
+        <style>
+        .box {
+            background-color: var(--green-500);
+            color: #ffffff;
+            width: 100px;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            border-radius: 4px;
+            margin-top: 1rem;
+            font-weight: bold;
+            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+        }
+
+        @keyframes my-fadein {
+            0%   { opacity: 0; }
+            100% { opacity: 1; }
+        }
+
+        @keyframes my-fadeout {
+            0%   { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        .my-fadein {
+            animation: my-fadein 150ms linear;
+        }
+                
+        .my-fadeout {
+            animation: my-fadeout 150ms linear;
+        }
+        </style>
+
 `
                 }
             }
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index 74cbf0abf..441ca1ddd 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -187,6 +187,48 @@ export default {
 export default {
 }
 <\\/script>
+`
+				},
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/tag/tag.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <h5>Tags</h5>
+            <p-tag class="p-mr-2" value="Primary"></p-tag>
+            <p-tag class="p-mr-2" severity="success" value="Success"></p-tag>
+            <p-tag class="p-mr-2" severity="info" value="Info"></p-tag>
+            <p-tag class="p-mr-2" severity="warning" value="Warning"></p-tag>
+            <p-tag severity="danger" value="Danger"></p-tag>
+
+            <h5>Pills</h5>
+            <p-tag class="p-mr-2" value="Primary" rounded></p-tag>
+            <p-tag class="p-mr-2" severity="success" value="Success" rounded></p-tag>
+            <p-tag class="p-mr-2" severity="info" value="Info" rounded></p-tag>
+            <p-tag class="p-mr-2" severity="warning" value="Warning" rounded></p-tag>
+            <p-tag severity="danger" value="Danger" rounded></p-tag>
+
+            <h5>Icons</h5>
+            <p-tag class="p-mr-2" icon="pi pi-user" value="Primary"></p-tag>
+            <p-tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
+            <p-tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
+            <p-tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
+            <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
+        </div>
+
+        <script type="module">
+        const { createApp } = Vue;
+
+        const App = {
+            components: {
+                "p-tag": primevue.tag
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
 				}
 			}
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index ff921754c..457a5e739 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -278,6 +278,91 @@ p {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/terminal/terminal.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+            <p-terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal"></p-terminal>
+        </div>
+
+        <script type="module">
+        const { createApp, onMounted, onBeforeUnmount } = Vue;
+        const TerminalService = primevue.terminalservice;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    TerminalService.on('command', commandHandler);
+                })
+
+                onBeforeUnmount(() => {
+                    TerminalService.off('command', commandHandler);
+                })
+
+                const 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);
+                }
+
+                return { commandHandler }
+            },
+            components: {
+                "p-terminal": primevue.terminal
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        p {
+            margin-top: 0;
+        }
+
+        .dark-demo-terminal {
+            background-color: #212121;
+            color: #ffffff;
+        }
+
+        .dark-demo-terminal .p-terminal-command {
+            color: #80CBC4;
+        }
+
+        .dark-demo-terminal .p-terminal-prompt {
+            color: #FFD54F;
+        }
+
+        .dark-demo-terminal .p-terminal-response {
+            color: #9FA8DA;
+        }
+        </style>
+
+`
                 }
             }
         }