From 9da69765266fbcc2fc6445f581458259ac9f0a7c 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 17:00:34 +0300
Subject: [PATCH] browser source added

---
 src/views/colorpicker/ColorPickerDoc.vue |  33 +
 src/views/display/DisplayDoc.vue         |  43 +
 src/views/elevation/ElevationDoc.vue     |  36 +
 src/views/fileupload/FileUploadDoc.vue   |  49 ++
 src/views/formlayout/FormLayoutDoc.vue   | 225 ++++++
 src/views/grid/GridDoc.vue               | 451 +++++++++++
 src/views/rating/RatingDoc.vue           |  39 +
 src/views/responsive/ResponsiveDemo.vue  | 976 +++++++++++++++++++++++
 src/views/spacing/SpacingDoc.vue         |  88 ++
 src/views/text/TextDoc.vue               |  45 ++
 10 files changed, 1985 insertions(+)

diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index 3273a8352..a5b310b91 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -230,6 +230,39 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Inline</h5>
+            <p-colorpicker v-model="color1" :inline="true"></p-colorpicker>
+
+            <h5>Overlay</h5>
+            <p-colorpicker v-model="color2"></p-colorpicker>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const color1 = ref(null);
+                const color2 = ref('1976D2');
+
+                return { color1, color2 }
+            },
+            components: {
+                "p-colorpicker": primevue.colorpicker
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             },
diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue
index e4218ba8e..6dce69c6c 100644
--- a/src/views/display/DisplayDoc.vue
+++ b/src/views/display/DisplayDoc.vue
@@ -119,6 +119,49 @@ export default {
 
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    content: `
+    <div id="app">
+            <h5>Inline</h5>
+            <p-inputtext class="p-mr-2 p-d-inline"></p-inputtext>
+            <p-inputtext class="p-d-inline"></p-inputtext>
+
+            <h5>Block</h5>
+            <p-inputtext class="p-mb-2 p-d-block"></p-inputtext>
+            <p-inputtext class="p-d-block"></p-inputtext>
+
+            <h5>Visible on a Small Screen</h5>
+            <p>Resize to view.</p>
+            <p-button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none"></p-button>
+
+            <h5>Hidden on a Small Screen</h5>
+            <p>Resize to hide.</p>
+            <p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex"></p-button>
+
+            <h5>Visible to Print, Invisible for Screen</h5>
+            <p class="p-d-none p-d-print-block">Only visible when printed.</p>
+
+            <h5>Visible to Screen, Invisible for Print</h5>
+            <p class="p-d-block p-d-print-none">Not available for printing.</p>
+        </div>
+
+    <script type="module">
+    const { createApp } = Vue;
+    
+    const App = {
+        components: {
+            "p-inputtext": primevue.inputtext,
+            "p-button": primevue.button
+        }
+    };
+
+    createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+    <\\/script>
 `
                 }
             }
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index 8a2fe46b6..fde38e7ee 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -93,6 +93,42 @@ export default {
     background-color: var(--surface-e);
 }
 </style>                    
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    content: `
+        <div id="app">
+            <div class="p-grid">
+                <div class="p-col" v-for="index in 24" :key="index">
+                    <div :class="['shadow-box', 'p-shadow-' + index]">
+                        p-shadow-{{index}}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp } = Vue;
+        
+        const App = {};
+
+        createApp(App).mount("#app");
+        <\\/script>
+
+        <style lang="scss" scoped>
+        .shadow-box {
+            min-height: 100px;
+            min-width: 150px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            margin: 2rem;
+            border-radius: 4px;
+            background-color: var(--surface-e);
+        }
+        </style>                    
 `
                 }
 			}
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index d57aa4bcd..2f1d08dca 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -425,6 +425,55 @@ export default {
 	}
 }
 <\\/script>
+`
+				},
+				'browser-source': {
+					tabName: 'Browser Source',
+					imports: `<script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"><\\/script>
+			<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+			<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
+					content: `
+			<div id="app">
+				<p-toast></p-toast>
+
+				<h5>Advanced</h5>
+				<p-fileupload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :max-file-size="1000000">
+					<template #empty>
+						<p>Drag and drop files to here to upload.</p>
+					</template>
+				</p-fileupload>
+
+				<h5>Basic</h5>
+				<p-fileupload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :max-file-size="1000000" @upload="onUpload"></p-fileupload>
+
+				<h5>Basic with Auto</h5>
+				<p-fileupload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :max-file-size="1000000" @upload="onUpload" :auto="true" choose-label="Browse"></p-fileupload>
+			</div>
+
+			<script type="module">
+			const { createApp, ref } = Vue;
+			const { useToast } = primevue.usetoast;
+
+			const App = {
+				setup() {
+					const toast = useToast();
+					const onUpload = () => {
+						toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
+					}
+
+					return { onUpload };
+				},
+				components: {
+					"p-fileupload": primevue.fileupload,
+					"p-toast": primevue.toast
+				}
+			};
+
+			createApp(App)
+				.use(primevue.config.default)
+				.use(primevue.toastservice)
+				.mount("#app");
+			<\\/script>
 `
 				}
 			}
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index 92cbf5e9f..9e98014e7 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -650,6 +650,231 @@ textarea {
     resize: none;
 }
 </style>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Vertical</h5>
+                <div class="p-fluid">
+                    <div class="p-field">
+                        <label for="firstname1">Firstname</label>
+                        <p-inputtext id="firstname1" type="text"></p-inputtext>
+                    </div>
+                    <div class="p-field">
+                        <label for="lastname1">Lastname</label>
+                        <p-inputtext id="lastname1" type="text"></p-inputtext>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Vertical and Grid</h5>
+                <div class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col">
+                        <label for="firstname2">Firstname</label>
+                        <p-inputtext id="firstname2" type="text"></p-inputtext>
+                    </div>
+                    <div class="p-field p-col">
+                        <label for="lastname2">Lastname</label>
+                        <p-inputtext id="lastname2" type="text"></p-inputtext>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Horizontal and Fixed Width</h5>
+                <div class="p-field p-grid">
+                    <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
+                    <div class="p-col">
+                        <p-inputtext id="firstname3" type="text"></p-inputtext>
+                    </div>
+                </div>
+                <div class="p-field p-grid">
+                    <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
+                    <div class="p-col">
+                        <p-inputtext id="lastname3" type="text"></p-inputtext>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Horizontal and Fluid</h5>
+                <div class="p-fluid">
+                    <div class="p-field p-grid">
+                        <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
+                        <div class="p-col-12 p-md-10">
+                            <p-inputtext id="firstname4" type="text"></p-inputtext>
+                        </div>
+                    </div>
+                    <div class="p-field p-grid">
+                        <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
+                        <div class="p-col-12 p-md-10">
+                            <p-inputtext id="lastname4" type="text"></p-inputtext>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Inline</h5>
+                <div class="p-formgroup-inline">
+                    <div class="p-field">
+                        <label for="firstname5" class="p-sr-only">Firstname</label>
+                        <p-inputtext id="firstname5" type="text" placeholder="Firstname"></p-inputtext>
+                    </div>
+                    <div class="p-field">
+                        <label for="lastname5" class="p-sr-only">Lastname</label>
+                        <p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext>
+                    </div>
+                    <p-button type="button" label="Submit"></p-button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Vertical Checkbox</h5>
+                <div class="p-field-checkbox">
+                    <p-checkbox id="city1" name="city1" value="Chicago" v-model="cities1"></p-checkbox>
+                    <label for="city1">Chicago</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <p-checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1"></p-checkbox>
+                    <label for="city2">Los Angeles</label>
+                </div>
+
+                <h5>Horizontal Checkbox</h5>
+                <div class="p-formgroup-inline">
+                    <div class="p-field-checkbox">
+                        <p-checkbox id="city3" name="city2" value="Chicago" v-model="cities2"></p-checkbox>
+                        <label for="city3">Chicago</label>
+                    </div>
+                    <div class="p-field-checkbox">
+                        <p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox>
+                        <label for="city4">Los Angeles</label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Vertical RadioButton</h5>
+                <div class="p-field-radiobutton">
+                    <p-radiobutton id="city5" name="city1" value="Chicago" v-model="city1"></p-radiobutton>
+                    <label for="city5">Chicago</label>
+                </div>
+                <div class="p-field-radiobutton">
+                    <p-radiobutton id="city6" name="city1" value="Los Angeles" v-model="city1"></p-radiobutton>
+                    <label for="city6">Los Angeles</label>
+                </div>
+
+                <h5>Horizontal RadioButton</h5>
+                <div class="p-formgroup-inline">
+                    <div class="p-field-radiobutton">
+                        <p-radiobutton id="city7" name="city2" value="Chicago" v-model="city2"></p-radiobutton>
+                        <label for="city7">Chicago</label>
+                    </div>
+                    <div class="p-field-radiobutton">
+                        <p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton>
+                        <label for="city8">Los Angeles</label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Help Text</h5>
+                <div class="p-field p-fluid">
+                    <label for="username">Username</label>
+                    <p-inputtext id="username" type="username" aria-describedby="username-help"></p-inputtext>
+                    <small id="username-help">Enter your username to reset your password.</small>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Advanced</h5>
+                <div class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col-12 p-md-6">
+                        <label for="firstname6">Firstname</label>
+                        <p-inputtext id="firstname6" type="text"></p-inputtext>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <label for="lastname6">Lastname</label>
+                        <p-inputtext id="lastname6" type="text"></p-inputtext>
+                    </div>
+                    <div class="p-field p-col-12">
+                        <label for="address">Address</label>
+                        <p-textarea id="address" rows="4"></p-textarea>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <label for="city">City</label>
+                        <p-inputtext id="city" type="text"></p-inputtext>
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="state">State</label>
+                        <p-dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select"></p-dropdown>
+                    </div>
+                    <div class="p-field p-col-12 p-md-3">
+                        <label for="zip">Zip</label>
+                        <p-inputtext id="zip" type="text"></p-inputtext>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const selectedState = ref(null);
+                const states = ref([
+                    {name: 'Arizona', code: 'Arizona'},
+                    {name: 'California', value: 'California'},
+                    {name: 'Florida', code: 'Florida'},
+                    {name: 'Ohio', code: 'Ohio'},
+                    {name: 'Washington', code: 'Washington'}
+                ]);
+                const cities1 = ref([]);
+                const cities2 = ref([]);
+                const city1 = ref(null);
+                const city2 = ref(null);
+
+                return { selectedState, states, cities1, cities2, city1, city2 }
+            },
+            components: {
+                "p-inputtext": primevue.inputtext,
+                "p-button": primevue.button,
+                "p-checkbox": primevue.checkbox,
+                "p-radiobutton": primevue.radiobutton,
+                "p-textarea": primevue.textarea,
+                "p-dropdown": primevue.dropdown
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        @media screen and (max-width: 489px) {
+            .p-formgroup-inline .p-field {
+                margin-bottom: 1em !important;
+            }
+        }
+
+        .layout-content .content-section.implementation > h3 {
+            font-weight: 600;
+        }
+
+        textarea {
+            resize: none;
+        }
+        </style>
 `
                 }
             }
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index 0a9f7d643..a206d3553 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -1233,6 +1233,457 @@ export default {
 }
 </style>
 
+`
+				},
+                'browser-source': {
+					tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <div class="flexgrid-demo p-p-2">
+                <h5>Basic</h5>
+                <div class="p-grid">
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">3</div>
+                    </div>
+                </div>
+
+                <h5>Dynamic</h5>
+                <p-button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em"></p-button>
+                <p-button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1"></p-button>
+
+                <div style="margin-top: .5em">
+                    <transition-group name="dynamic-box" tag="div" class="p-grid">
+                        <div v-for="col of columns" :key="col" class="p-col">
+                            <div class="box">{{col}}</div>
+                        </div>
+                    </transition-group>
+                </div>
+
+                <h5>Reverse Direction</h5>
+                <div class="p-grid p-flex-row-reverse">
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">3</div>
+                    </div>
+                </div>
+
+                <h5>Column Direction</h5>
+                <div class="p-grid p-flex-column">
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">3</div>
+                    </div>
+                </div>
+
+                <h5>Reverse Column Direction</h5>
+                <div class="p-grid p-flex-column-reverse">
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">3</div>
+                    </div>
+                </div>
+
+                <h5>12 Column Grid</h5>
+                <div class="p-grid">
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">1</div>
+                    </div>
+                </div>
+
+                <div class="p-grid">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <div class="p-grid">
+                    <div class="p-col-8">
+                        <div class="box">8</div>
+                    </div>
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                </div>
+
+                <h5>MultiLine</h5>
+                <div class="p-grid">
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                    <div class="p-col-6">
+                        <div class="box">6</div>
+                    </div>
+                </div>
+
+                <h5>Fixed Width Column</h5>
+                <div class="p-grid">
+                    <div class="p-col-fixed" style="width:100px">
+                        <div class="box">100px</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">auto</div>
+                    </div>
+                </div>
+
+                <h5>Responsive</h5>
+                <div class="p-grid">
+                    <div class="p-col-12 p-md-6 p-lg-3">
+                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    </div>
+                    <div class="p-col-12 p-md-6 p-lg-3">
+                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    </div>
+                    <div class="p-col-12 p-md-6 p-lg-3">
+                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    </div>
+                    <div class="p-col-12 p-md-6 p-lg-3">
+                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    </div>
+                </div>
+
+                <h5>Horizontal Alignment - Start</h5>
+                <div class="p-grid p-jc-start">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-1">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Horizontal Alignment - End</h5>
+                <div class="p-grid p-jc-end">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-1">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Horizontal Alignment - Center</h5>
+                <div class="p-grid p-jc-center">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-1">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Horizontal Alignment - Between</h5>
+                <div class="p-grid p-jc-between">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-1">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Horizontal Alignment - Around</h5>
+                <div class="p-grid p-jc-around">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-1">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Horizontal Alignment - Even</h5>
+                <div class="p-grid p-jc-evenly">
+                    <div class="p-col-2">
+                        <div class="box">2</div>
+                    </div>
+                    <div class="p-col-1">
+                        <div class="box">1</div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Vertical Alignment - Start</h5>
+                <div class="p-grid p-ai-start vertical-container">
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Vertical Alignment - End</h5>
+                <div class="p-grid p-ai-end vertical-container">
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Vertical Alignment - Center</h5>
+                <div class="p-grid p-ai-center vertical-container">
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Vertical Alignment - Stretch</h5>
+                <div class="p-grid p-ai-stretch vertical-container">
+                    <div class="p-col">
+                        <div class="box box-stretched">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box box-stretched">4</div>
+                    </div>
+                    <div class="p-col">
+                        <div class="box box-stretched">4</div>
+                    </div>
+                </div>
+
+                <h5>Vertical Alignment - Per Column</h5>
+                <div class="p-grid vertical-container">
+                    <div class="p-col p-as-start">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col p-as-center">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col p-as-end">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Offset</h5>
+                <div class="p-grid">
+                    <div class="p-col-6 p-offset-3">
+                        <div class="box">6</div>
+                    </div>
+                </div>
+
+                <div class="p-grid">
+                    <div class="p-col-4">
+                        <div class="box">4</div>
+                    </div>
+                    <div class="p-col-4 p-offset-4">
+                        <div class="box">4</div>
+                    </div>
+                </div>
+
+                <h5>Nested</h5>
+                <div class="p-grid nested-grid">
+                    <div class="p-col-8">
+                        <div class="p-grid">
+                            <div class="p-col-6">
+                                <div class="box">6</div>
+                            </div>
+                            <div class="p-col-6">
+                                <div class="box">6</div>
+                            </div>
+                            <div class="p-col-12">
+                                <div class="box">12</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-col-4">
+                        <div class="box box-stretched">4</div>
+                    </div>
+                </div>
+
+                <h5>Panels</h5>
+                <div class="p-grid">
+                    <div class="p-col">
+                        <p-panel header="Header">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </p-panel>
+                    </div>
+                    <div class="p-col">
+                        <p-panel header="Header">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </p-panel>
+                    </div>
+                    <div class="p-col">
+                        <p-panel header="Header">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </p-panel>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const columns = ref([0, 1, 2, 3, 4, 5]);
+                const addColumn = () => {
+                    columns.value = [...columns.value, columns.value.length];
+                };
+                const removeColumn = () => {
+                    columns.value.pop();
+                };
+
+                return { columns, addColumn, removeColumn }
+            },
+            components: {
+                "p-button": primevue.button,
+                "p-panel": primevue.panel
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style lang="scss">
+        .flexgrid-demo {
+            background-color: var(--surface-b);
+            color: var(--text-color);
+        }
+
+        .flexgrid-demo .box {
+            background-color: var(--surface-e);
+            text-align: center;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            border-radius: 4px;
+            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);
+        }
+
+        .flexgrid-demo .box-stretched {
+            height: 100%;
+        }
+
+        .flexgrid-demo .vertical-container {
+            margin: 0;
+            height: 200px;
+            background: var(--surface-d);
+            border-radius: 4px;
+        }
+
+        .flexgrid-demo .nested-grid .p-col-4 {
+            padding-bottom: 1rem;
+        }
+
+        .flexgrid-demo .dynamic-box-enter-active, .flexgrid-demo .dynamic-box-leave-active {
+            transition: all .5s;
+        }
+
+        .flexgrid-demo .dynamic-box-enter, .flexgrid-demo .dynamic-box-leave-to {
+            opacity: 0;
+        }
+
+        .flexgrid-demo .dynamic-box-enter, .flexgrid-demo .dynamic-box-leave-to {
+            transform: translateX(30px);
+        }
+
+        .flexgrid-demo p {
+            margin: 0;
+        }
+        </style>
+
 `
 				}
 			}
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index d52833061..21094153d 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -198,6 +198,45 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic {{val1}}</h5>
+            <p-rating v-model="val1"></p-rating>
+
+            <h5>Without Cancel</h5>
+            <p-rating v-model="val2" :cancel="false"></p-rating>
+
+            <h5>ReadOnly</h5>
+            <p-rating :model-value="5" :readonly="true" :stars="10" :cancel="false"></p-rating>
+
+            <h5>Disabled</h5>
+            <p-rating :model-value="8" :disabled="true" :stars="10"></p-rating>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const val1 = ref();
+                const val2 = ref(3);
+
+                return { val1, val2 }
+            },
+            components: {
+                "p-rating": primevue.rating
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index 7b55dcf7b..bf6cf1645 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -2522,6 +2522,982 @@ export default {
     }
 }
 </style>                    
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/slider/slider.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/rating/rating.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/inputswitch/inputswitch.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/listbox/listbox.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.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="https://unpkg.com/primevue@^3/accordion/accordion.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/tabview/tabview.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/tabpanel/tabpanel.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/overlaypanel/overlaypanel.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/dialog/dialog.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/confirmationservice/confirmationservice.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/message/message.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/timeline/timeline.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/inlinemessage/inlinemessage.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>
+        <script src="./CustomerService.js"><\\/script>
+        <script src="./CountryService.js"><\\/script>
+        <script src="./ProductService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h1>Responsive Design</h1>
+            <div class="p-grid">
+                <div class="p-col-12 p-md-6 p-fluid">
+                    <div class="card">
+                        <h5>InputText</h5>
+                        <div class="p-grid p-formgrid">
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <p-inputtext type="text" placeholder="Default"></p-inputtext>
+                            </div>
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <p-inputtext type="text" placeholder="Disabled" :disabled="true"></p-inputtext>
+                            </div>
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <p-inputtext type="text" placeholder="Invalid" class="p-invalid"></p-inputtext>
+                            </div>
+                        </div>
+
+                        <h5>Icons</h5>
+                        <div class="p-grid p-formgrid">
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <span class="p-input-icon-left">
+                                    <i class="pi pi-user"></i>
+                                    <p-inputtext type="text" placeholder="Username"></p-inputtext>
+                                </span>
+                            </div>
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <span class="p-input-icon-right">
+                                    <p-inputtext type="text" placeholder="Search"></p-inputtext>
+                                    <i class="pi pi-search"></i>
+                                </span>
+                            </div>
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <span class="p-input-icon-left p-input-icon-right">
+                                    <i class="pi pi-user"></i>
+                                    <p-inputtext type="text" placeholder="Search"></p-inputtext>
+                                    <i class="pi pi-search"></i>
+                                </span>
+                            </div>
+                        </div>
+
+                        <h5>Float Label</h5>
+                        <span class="p-float-label">
+                            <p-inputtext id="username" type="text" v-model="floatValue"></p-inputtext>
+                            <label for="username">Username</label>
+                        </span>
+
+                        <h5>Textarea</h5>
+                        <p-textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30"></p-textarea>
+
+                        <h5>AutoComplete</h5>
+                        <p-autocomplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"></p-autocomplete>
+
+                        <h5>Calendar</h5>
+                        <p-calendar :show-icon="true" :show-button-bar="true" v-model="calendarValue"></p-calendar>
+
+                        <h5>Spinner</h5>
+                        <p-inputnumber v-model="inputNumberValue" show-buttons mode="decimal"></p-inputnumber>
+
+                        <h5>Chips</h5>
+                        <p-chips v-model="chipsValue"></p-chips>
+                    </div>
+
+                    <div class="card">
+                        <h5>Slider</h5>
+                        <p-inputtext v-model.number="sliderValue"></p-inputtext>
+                        <p-slider v-model="sliderValue"></p-slider>
+
+                        <h5>Rating</h5>
+                        <p-rating v-model="ratingValue"></p-rating>
+
+                        <h5>Input Switch</h5>
+                        <p-inputswitch v-model="switchValue"></p-inputswitch>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>RadioButton</h5>
+                        <div class="p-grid">
+                            <div class="p-col-12 p-md-4">
+                                <div class="p-field-radiobutton">
+                                    <p-radiobutton id="option1" name="option" value="Option 1" v-model="radioValue"></p-radiobutton>
+                                    <label for="option1">Option 1</label>
+                                </div>
+                            </div>
+                            <div class="p-col-12 p-md-4">
+                                <div class="p-field-radiobutton">
+                                    <p-radiobutton id="option2" name="option" value="Option 2" v-model="radioValue"></p-radiobutton>
+                                    <label for="option2">Option 2</label>
+                                </div>
+                            </div>
+                            <div class="p-col-12 p-md-4">
+                                <div class="p-field-radiobutton">
+                                    <p-radiobutton id="option3" name="option" value="Option 3" v-model="radioValue"></p-radiobutton>
+                                    <label for="option3">Option 3</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h5>Checkbox</h5>
+                        <div class="p-grid">
+                            <div class="p-col-12 p-md-4">
+                                <div class="p-field-checkbox">
+                                    <p-checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue"></p-checkbox>
+                                    <label for="checkOption1">Option 1</label>
+                                </div>
+                            </div>
+                            <div class="p-col-12 p-md-4">
+                                <div class="p-field-checkbox">
+                                    <p-checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue"></p-checkbox>
+                                    <label for="checkOption2">Option 2</label>
+                                </div>
+                            </div>
+                            <div class="p-col-12 p-md-4">
+                                <div class="p-field-checkbox">
+                                    <p-checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue"></p-checkbox>
+                                    <label for="checkOption3">Option 3</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card p-fluid">
+                        <h5>Listbox</h5>
+                        <p-listbox v-model="listboxValue" :options="listboxValues" option-label="name" :filter="true"></p-listbox>
+
+                        <h5>Dropdown</h5>
+                        <p-dropdown v-model="dropdownValue" :options="dropdownValues" option-label="name" placeholder="Select"></p-dropdown>
+
+                        <h5>MultiSelect</h5>
+                        <p-multiselect v-model="multiselectValue" :options="multiselectValues" option-label="name" placeholder="Select Countries" :filter="true"></p-multiselect>
+                    </div>
+
+                    <div class="card p-fluid">
+                        <h5>ToggleButton</h5>
+                        <p-togglebutton v-model="toggleValue" on-label="Yes" off-label="No"></p-togglebutton>
+
+                        <h5>SelectButton</h5>
+                        <p-selectbutton v-model="selectButtonValue1" :options="selectButtonValues1" option-label="name"></p-selectbutton>
+
+                        <h5>SelectButton - Multiple</h5>
+                        <p-selectbutton v-model="selectButtonValue2" :options="selectButtonValues2" option-label="name" :multiple="true"></p-selectbutton>
+                    </div>
+                </div>
+
+                <div class="p-col-12">
+                    <div class="card">
+                        <h5>Buttons</h5>
+                        <p-button label="Submit" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-check" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2"></p-button>
+                        
+                        <h5>Severities</h5>
+                        <p-button label="Primary" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Success" class="p-button-success p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Info" class="p-button-info p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-warning p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Help" class="p-button-help p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-danger p-mr-2 p-mb-2"></p-button>
+
+                        <h5>Raised Buttons</h5>
+                        <p-button label="Primary" class="p-button-raised p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-raised p-button-danger p-mb-2"></p-button>
+
+                        <h5>Rounded Buttons</h5>
+                        <p-button label="Primary" class="p-button-rounded p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-rounded p-button-danger p-mb-2"></p-button>
+
+                        <h5>Text Buttons</h5>
+                        <p-button label="Primary" class="p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Plain" class="p-button-text p-button-plain p-mb-2"></p-button>
+
+                        <h5>Raised Text Buttons</h5>
+                        <p-button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>"
+                        <p-button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2"></p-button>
+
+                        <h5>Outlined Buttons</h5>
+                        <p-button label="Primary" class="p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Plain" class="p-button-outlined p-button-plain p-mb-2"></p-button>
+
+                        <h5>Rounded Icon Buttons</h5>
+                        <p-button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2"></p-button>
+
+                        <h5>Rounded Text Icon Buttons</h5>
+                        <p-button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
+
+                        <h5>Rounded and Outlined Icon Buttons</h5>
+                        <p-button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2"></p-button>
+
+                        <h5>Badges</h5>
+                        <p-button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badge-class="p-badge-danger"></p-button>
+
+                        <h5>Button Set</h5>
+                        <span class="p-buttonset">
+                            <p-button label="Save" icon="pi pi-check"></p-button>
+                            <p-button label="Delete" icon="pi pi-trash"></p-button>
+                            <p-button label="Cancel" icon="pi pi-times"></p-button>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="p-col-12">
+                    <div class="card">
+                        <p-datatable :value="customers" :paginator="true" :rows="10"
+                            data-key="id" :row-hover="true" v-model:selection="selectedCustomers" :filters="filters"
+                            paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[10,25,50]"
+                            current-page-report-template="Showing {first} to {last} of {totalRecords} entries" responsive-layout="scroll">
+                            <template #header>
+                                <div class="p-d-flex p-ai-center p-jc-between">
+                                    DataTable
+                                    <span class="p-input-icon-left">
+                                        <i class="pi pi-search"></i>
+                                        <p-inputtext v-model="filters['global'].value" placeholder="Global Search"></p-inputtext>
+                                    </span>
+                                </div>
+                            </template>
+                            <template #empty>
+                                No customers found.
+                            </template>
+                            <p-column selection-mode="multiple" header-style="width: 3rem"></p-column>
+                            <p-column field="name" header="Name" :sortable="true" style="min-width:16rem">
+                                <template #body="slotProps">
+                                    {{slotProps.data.name}}
+                                </template>
+                            </p-column>
+                            <p-column header="Country" :sortable="true" sort-field="country.name" filter-field="country.name" filter-match-mode="contains" style="min-width:16rem">
+                                <template #body="slotProps">
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                    <span class="image-text">{{slotProps.data.country.name}}</span>
+                                </template>
+                            </p-column>
+                            <p-column field="status" header="Status" :sortable="true" filter-match-mode="equals" style="min-width:16rem">
+                                <template #body="slotProps">
+                                    <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                                </template>
+                            </p-column>
+                            <p-column field="activity" header="Activity" :sortable="true" filter-match-mode="gte" style="min-width:16rem">
+                                <template #body="slotProps">
+                                    <p-progressbar :value="slotProps.data.activity" :show-value="false" style="width: 100px"></p-progressbar>
+                                </template>
+                            </p-column>
+                        </p-datatable>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>AccordionPanel</h5>
+                        <p-accordion :multiple="true" :active-index="[0]">
+                            <p-accordiontab header="Header I">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                            </p-accordiontab>
+                            <p-accordiontab header="Header II">
+                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                                    ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                                    Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                            </p-accordiontab>
+                            <p-accordiontab header="Header III">
+                                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                                    et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                                    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                                    quo minus.</p>
+                            </p-accordiontab>
+                        </p-accordion>
+                    </div>
+
+                    <div class="card">
+                        <h5>TabView</h5>
+                        <p-tabview>
+                            <p-tabpanel header="Header I">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></p-tabpanel>
+                            <p-tabpanel header="Header II">
+                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                                    ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                                    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                                    Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                            </p-tabpanel>
+                            <p-tabpanel header="Header III">
+                                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                                    et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                                    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                                    quo minus.</p>
+                            </p-tabpanel>
+                        </p-tabview>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-6">
+                    <div class="card">
+                        <h5>Panel</h5>
+                        <p-panel header="Header" :toggleable="true">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </p-panel>
+                    </div>
+                    <div class="card">
+                        <h5>Fieldset</h5>
+                        <p-fieldset legend="Legend" :toggleable="true">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        </p-fieldset>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-3">
+                    <div class="card p-fluid">
+                        <h5>Overlay Panel</h5>
+                        <p-button type="button" label="Choose" @click="toggle" icon="pi pi-search"></p-button>
+                        <p-overlaypanel ref="op" append-to="body" :show-close-icon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
+                            <p-datatable :value="products" v-model:selection="selectedProduct" selection-mode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                                <p-column field="name" header="Name" sortable></p-column>
+                                <p-column header="Image">
+                                    <template #body="slotProps">
+                                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
+                                    </template>
+                                </p-column>
+                                <p-column field="price" header="Price" sortable>
+                                    <template #body="slotProps">
+                                        {{formatCurrency(slotProps.data.price)}}
+                                    </template>
+                                </p-column>
+                            </p-datatable>
+                        </p-overlaypanel>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-3">
+                    <div class="card p-fluid">
+                        <h5>Dialog</h5>
+                        <p-dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+                                in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                            <template #footer>
+                                <p-button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"></p-button>
+                            </template>
+                        </p-dialog>
+                        <p-button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"></p-button>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-3">
+                    <div class="card p-fluid">
+                        <h5>Confirm Popup</h5>
+                        <p-button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check"></p-button>
+                        <p-confirmpopup group="popup"></p-confirmpopup>
+                    </div>
+                </div>
+                <div class="p-col-12 p-md-3">
+                    <div class="card p-fluid">
+                        <h5>Confirm Dialog</h5>
+                        <p-button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check"></p-button>
+                        <p-confirmdialog group="dialog">></p-confirmdialog>
+                    </div>
+                </div>
+                <div class="p-col-12">
+                    <div class="card card-w-title">
+                        <h5>Menubar</h5>
+                        <p-menubar :model="tieredMenuItems">
+                            <template #end>
+                                <span class="p-input-icon-left">
+                                    <i class="pi pi-search"></i>
+                                    <p-inputtext type="text" placeholder="Search"></p-inputtext>
+                                </span>
+                            </template>
+                        </p-menubar>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Plain Menu</h5>
+                        <p-menu :model="menuitems"></p-menu>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Overlay Menu</h5>
+
+                        <p-menu ref="menu" :model="menuitems" :popup="true"></p-menu>
+                        <p-button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"></p-button>
+                    </div>
+
+                    <div class="card" @contextmenu="onContextRightClick">
+                        <h5>ContextMenu</h5>
+                        Right click to display.
+                        <p-contextmenu ref="contextMenu" :model="contextMenuItems"></p-contextmenu>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-lg-6">
+                    <div class="card">
+                        <h5>Messages</h5>
+                        <p-message severity="info">Info Message</p-message>
+                        <p-message severity="success">Success Message</p-message>
+                        <p-message severity="warn">Warning Message</p-message>
+                        <p-message severity="error">Error Message</p-message>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-lg-6">
+                    <div class="card">
+                        <h5>Toast</h5>
+
+                        <p-toast></p-toast>
+                        <p-button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2"></p-button>
+                        <p-button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2"></p-button>
+                        <p-button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2"></p-button>
+                        <p-button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2"></p-button>
+                    </div>
+
+                    <div class="card">
+                        <h5>Timeline</h5>
+                        <p-timeline :value="timelineEvents" align="alternate">
+                            <template #content="slotProps">
+                                {{slotProps.item.status}}
+                            </template>
+                        </p-timeline>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-lg-8">
+                    <div class="card">
+                        <h5>Inline Message</h5>
+                        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                            <label for="username1" class="p-sr-only">Username</label>
+                            <p-inputtext id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2"></p-inputtext>
+                            <p-inlinemessage>Username is required</p-inlinemessage>
+                        </div>
+                        <div class="p-formgroup-inline">
+                            <label for="email" class="p-sr-only">email</label>
+                            <p-inputtext id="email" placeholder="Email" class="p-invalid p-mr-2"></p-inputtext>
+                            <p-inlinemessage></p-inlinemessage>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-lg-4">
+                    <div class="card">
+                        <h5>Helper Text</h5>
+                        <div class="p-field p-fluid">
+                            <label for="username2">Username</label>
+                            <p-inputtext id="username2" type="text" class="p-invalid" aria-describedby="username-help"></p-inputtext>
+                            <small id="username-help" class="p-error">Enter your username to reset your password.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+        const { FilterMatchMode, FilterOperator } = primevue.api;
+        const { useToast } = primevue.usetoast;
+        const { useConfirm } = primevue.useconfirm;
+        const BadgeDirective = primevue.badgedirective
+            
+        const App = {
+            setup() {
+                onMounted(() => {
+                    countryService.value.getCountries().then(data => autoValue.value = data);
+                    customerService.value.getCustomersLarge().then(data => customers.value = data);
+                    productService.value.getProductsSmall().then(data => products.value = data);
+                })
+
+                const toast = useToast();
+                const confirm = useConfirm();
+                const customers = ref(null);
+                const selectedCustomers = ref(null);
+                const products = ref(null);
+                const selectedProduct = ref(null);
+                const filters = ref({
+                    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+                    'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
+                    'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
+                    'representative': {value: null, matchMode: FilterMatchMode.IN},
+                    'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]},
+                    'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
+                    'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
+                    'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},
+                    'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
+                });
+                const floatValue = ref(null);
+                const autoValue = ref(null);
+                const selectedAutoValue = ref(null);
+                const autoFilteredValue = ref([]);
+                const calendarValue = ref(null);
+                const inputNumberValue = ref(null);
+                const chipsValue = ref(null);
+                const sliderValue = ref(null);
+                const ratingValue = ref(null);
+                const colorValue = ref('1976D2');
+                const radioValue = ref(null);
+                const checkboxValue = ref([]);
+                const switchValue = ref(false);
+                const display = ref(false);
+                const listboxValues = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const listboxValue = ref(null);
+                const dropdownValues = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const dropdownValue = ref(null);
+                const multiselectValue = ref(null);
+                const multiselectValues = ref([
+                    {name: 'Australia', code: 'AU'},
+                    {name: 'Brazil', code: 'BR'},
+                    {name: 'China', code: 'CN'},
+                    {name: 'Egypt', code: 'EG'},
+                    {name: 'France', code: 'FR'},
+                    {name: 'Germany', code: 'DE'},
+                    {name: 'India', code: 'IN'},
+                    {name: 'Japan', code: 'JP'},
+                    {name: 'Spain', code: 'ES'},
+                    {name: 'United States', code: 'US'}
+                ]);
+                const toggleValue = ref(false);
+                const selectButtonValues1 = ref([
+                    {name: 'Option 1', code: 'O1'},
+                    {name: 'Option 2', code: 'O2'},
+                    {name: 'Option 3', code: 'O3'},
+                ]);
+                const selectButtonValue1 = ref(null);
+                const selectButtonValues2 = ref([
+                    {name: 'Option 1', code: 'O1'},
+                    {name: 'Option 2', code: 'O2'},
+                    {name: 'Option 3', code: 'O3'},
+                ]);
+                const selectButtonValue2= ref(null);
+                const tieredMenuItems = ref([
+                    {
+                        label:'Customers',
+                        icon:'pi pi-fw pi-table',
+                        items:[
+                            {
+                                label:'New',
+                                icon:'pi pi-fw pi-user-plus',
+                                items:[
+                                    {
+                                        label:'Customer',
+                                        icon:'pi pi-fw pi-plus'
+                                    },
+                                    {
+                                        label:'Duplicate',
+                                        icon:'pi pi-fw pi-copy'
+                                    },
+
+                                ]
+                            },
+                            {
+                                label:'Edit',
+                                icon:'pi pi-fw pi-user-edit'
+                            }
+                        ]
+                    },
+                    {
+                        label:'Orders',
+                        icon:'pi pi-fw pi-shopping-cart',
+                        items:[
+                            {
+                                label:'View',
+                                icon:'pi pi-fw pi-list'
+                            },
+                            {
+                                label:'Search',
+                                icon:'pi pi-fw pi-search'
+                            },
+
+                        ]
+                    },
+                    {
+                        label:'Shipments',
+                        icon:'pi pi-fw pi-envelope',
+                        items:[
+                            {
+                                label:'Tracker',
+                                icon:'pi pi-fw pi-compass'
+
+                            },
+                            {
+                                label:'Map',
+                                icon:'pi pi-fw pi-map-marker'
+
+                            },
+                            {
+                                label:'Manage',
+                                icon:'pi pi-fw pi-pencil'
+                            }
+                        ]
+                    },
+                    {
+                        label:'Profile',
+                        icon:'pi pi-fw pi-user',
+                        items:[
+                            {
+                                label:'Settings',
+                                icon:'pi pi-fw pi-cog'
+                            },
+                            {
+                                label:'Billing',
+                                icon:'pi pi-fw pi-file'
+                            }
+                        ]
+                    },
+                    {
+                        separator:true
+                    },
+                    {
+                        label:'Quit',
+                        icon:'pi pi-fw pi-sign-out'
+                    }
+                ]);
+                const menuitems = ref([
+                    {
+                        label:'Customers',
+                        items:[
+                            {
+                                label:'New',
+                                icon:'pi pi-fw pi-plus',
+                            },
+                            {
+                                label:'Edit',
+                                icon:'pi pi-fw pi-user-edit'
+                            }
+                        ]
+                    },
+                    {
+                        label:'Orders',
+                        items:[
+                            {
+                                label:'View',
+                                icon:'pi pi-fw pi-list'
+                            },
+                            {
+                                label:'Search',
+                                icon:'pi pi-fw pi-search'
+                            },
+                        ]
+                    }
+                ]);
+                const contextMenuItems = ref([
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-save'
+                    },
+                    {
+                        label: 'Update',
+                        icon: 'pi pi-refresh'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-trash'
+                    },
+                    {
+                        separator: true
+                    },
+                    {
+                        label: 'Options',
+                        icon: 'pi pi-cog'
+                    },
+                ]);
+                const message = ref([]);
+                const timelineEvents = ref([
+                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                ]);
+                const countryService = ref(new CountryService());
+                const customerService = ref(new CustomerService());
+                const productService = ref(new ProductService());
+
+                const menu = ref();
+                const contextMenu = ref();
+                const op = ref();
+
+                const toggleMenu = (event) => {
+                    menu.value.toggle(event);
+                };
+                const onContextRightClick = (event) => {
+                    contextMenu.value.show(event);
+                };
+                const searchCountry = (event) => {
+                    setTimeout(() => {
+                        if (!event.query.trim().length) {
+                            autoFilteredValue.value = [...autoValue.value];
+                        }
+                        else {
+                            autoFilteredValue.value = autoValue.value.filter((country) => {
+                                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                            });
+                        }
+                    }, 250);
+                };
+                const addMessage = (severity) => {
+                    message.value = [{severity: severity, content: 'Message Detail'}]
+                };
+                const showToast = (severity) => {
+                    toast.add({severity: severity, summary: 'Message Summary', detail:'Message Detail', life: 3000});
+                };
+                const open = () => {
+                    display.value = true;
+                };
+                const close = () => {
+                    display.value = false;
+                };
+                const toggle = (event) => {
+                    op.value.toggle(event);
+                };
+                const confirmWithPopup = (event) => {
+                    confirm.require({
+                        target: event.currentTarget,
+                        group: 'popup',
+                        message: 'Are you sure you want to proceed?',
+                        icon: 'pi pi-exclamation-triangle',
+                        accept: () => {
+                            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                        },
+                        reject: () => {
+                            toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                        }
+                    });
+                };
+                const confirmWithDialog = () => {
+                    confirm.require({
+                        group: 'dialog',
+                        header: 'Confirm',
+                        message: 'Are you sure you want to proceed?',
+                        icon: 'pi pi-exclamation-triangle',
+                        accept: () => {
+                            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                        },
+                        reject: () => {
+                            toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                        }
+                    });
+                };
+                const formatCurrency = (value) => {
+                    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+                };
+                const onProductSelect = (event) => {
+                    op.value.hide();
+                    toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
+                };
+
+                return { menu, contextMenu, op, customers, selectedCustomers, products, selectedProduct, filters, floatValue, autoValue, selectedAutoValue,
+                    autoFilteredValue, calendarValue, inputNumberValue, chipsValue, sliderValue, ratingValue, colorValue, radioValue, 
+                    checkboxValue, switchValue, display, listboxValues, listboxValue, dropdownValues, dropdownValue, multiselectValue, 
+                    multiselectValues, toggleValue, selectButtonValues1, selectButtonValue1, selectButtonValues2, selectButtonValue2,
+                    tieredMenuItems, menuitems, contextMenuItems, message, timelineEvents, toggleMenu, onContextRightClick, searchCountry,
+                    addMessage, showToast, open, close, toggle, confirmWithPopup, confirmWithDialog, formatCurrency, onProductSelect }
+
+            },
+            components: {
+                "p-inputtext": primevue.inputtext,
+                "p-textarea": primevue.textarea,
+                "p-autocomplete": primevue.autocomplete,
+                "p-calendar": primevue.calendar,
+                "p-inputnumber": primevue.inputnumber,
+                "p-chips": primevue.chips,
+                "p-slider": primevue.slider,
+                "p-rating": primevue.rating,
+                "p-inputswitch": primevue.inputswitch,
+                "p-radiobutton": primevue.radiobutton,
+                "p-checkbox": primevue.checkbox,
+                "p-listbox": primevue.listbox,
+                "p-dropdown": primevue.dropdown,
+                "p-multiselect": primevue.multiselect,
+                "p-togglebutton": primevue.togglebutton,
+                "p-selectbutton": primevue.selectbutton,
+                "p-button": primevue.button,
+                "p-datatable": primevue.datatable,
+                "p-column": primevue.column,
+                "p-progressbar": primevue.progressbar,
+                "p-accordion": primevue.accordion,
+                "p-accordiontab": primevue.accordiontab,
+                "p-tabview": primevue.tabview,
+                "p-tabpanel": primevue.tabpanel,
+                "p-panel": primevue.panel,
+                "p-fieldset": primevue.fieldset,
+                "p-overlaypanel": primevue.overlaypanel,
+                "p-dialog": primevue.dialog,
+                "p-confirmpopup": primevue.confirmpopup,
+                "p-confirmdialog": primevue.confirmdialog,
+                "p-menubar": primevue.menubar,
+                "p-menu": primevue.menu,
+                "p-contextmenu": primevue.contextmenu,
+                "p-message": primevue.message,
+                "p-toast": primevue.toast,
+                "p-timeline": primevue.timeline,
+                "p-inlinemessage": primevue.inlinemessage
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default, { ripple: true })
+            .use(primevue.toastservice)
+            .use(primevue.confirmationservice)
+            .directive('badge', BadgeDirective)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .image-text {
+            vertical-align: middle;
+        }
+
+        .p-progressbar {
+            height: 4px;
+        }
+
+        .customer-badge {
+            border-radius: 2px;
+            padding: .25em .5rem;
+            text-transform: uppercase;
+            font-weight: 700;
+            font-size: 12px;
+            letter-spacing: .3px;
+        }
+
+        .customer-badge .status-qualified {
+            background-color: #C8E6C9;
+            color: #256029;
+        }
+
+        .customer-badge .status-unqualified {
+            background-color: #FFCDD2;
+            color: #C63737;
+        }
+
+        .customer-badge .status-negotiation {
+            background-color: #FEEDAF;
+            color: #8A5340;
+        }
+
+        .customer-badge .status-new {
+            background-color: #B3E5FC;
+            color: #23547B;
+        }
+
+        .customer-badge .status-renewal {
+            background-color: #ECCFFF;
+            color: #694382;
+        }
+
+        .customer-badge .status-proposal {
+            background-color: #FFD8B2;
+            color: #805B36;
+        }
+
+        .product-image {
+            width: 50px;
+            box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
+        }    
+
+        .p-paginator .p-paginator-current {
+            margin-left: auto;
+        }
+        </style>                    
 `
                 }
             }
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 1c1c6b99b..e7ff43f2e 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -231,6 +231,94 @@ export default {
     border: 1px solid var(--surface-d);
 }
 </style>
+`
+				},
+                'browser-source': {
+					tabName: 'Browser Source',
+					content: `
+        <div id="app">
+            <div class="card">
+                <h5>Margin</h5>
+                <h6>Without Spacing</h6>
+                <p-button type="button" label="Button 1" style="width:20rem"></p-button>
+                <p-button type="button" label="Button 2" style="width:20rem"></p-button>
+
+                <h6>With Spacing</h6>
+                <p-button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2"></p-button>
+                <p-button type="button" label="Button 2" style="width:20rem" class="p-mb-2"></p-button>
+
+                <h5>Responsive Margin</h5>
+                <h6>Without Spacing</h6>
+                <div class="p-grid p-formgrid p-fluid">
+                    <div class="p-col-12 p-lg-4">
+                        <p-inputtext></p-inputtext>
+                    </div>
+                    <div class="p-col-12 p-lg-4">
+                        <p-inputtext></p-inputtext>
+                    </div>
+                    <div class="p-col-12 p-lg-4">
+                        <p-inputtext></p-inputtext>
+                    </div>
+                </div>
+
+                <h6>With Spacing</h6>
+                <div class="p-grid p-formgrid p-fluid">
+                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <p-inputtext></p-inputtext>
+                    </div>
+                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <p-inputtext></p-inputtext>
+                    </div>
+                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <p-inputtext></p-inputtext>
+                    </div>
+                </div>
+
+                <h6>Center</h6>
+                <div class="demo-container p-p-4">
+                    <p-button type="button" label="Button" class="p-d-block p-mx-auto"></p-button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Padding</h5>
+                <h6>Without Spacing</h6>
+                <div class="demo-container">
+                    <p-button type="button" label="Button"></p-button>
+                </div>
+
+                <h6>With Spacing</h6>
+                <div class="demo-container p-p-3">
+                    <p-button type="button" label="Button"></p-button>
+                </div>
+
+                <h6>Responsive Spacing</h6>
+                <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+                    <p-button type="button" label="Button"></p-button>
+                </div>
+            </div>
+        </div>    
+
+        <script type="module">
+        const { createApp } = Vue;
+
+        const App = {
+            components: {
+                "p-inputtext": primevue.inputtext,
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .demo-container {
+            border: 1px solid var(--surface-d);
+        }
+        </style>
 `
 				}
             }
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index c2dcb432b..78d04cc1a 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -154,6 +154,51 @@ export default {
     border: 2px solid var(--surface-d);
 }
 </style>                    
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    content: `
+        <div id="app">
+            <h5>Alignment</h5>
+            <div class="p-mb-3 p-text-left">Left</div>
+            <div class="p-mb-3 p-text-center">Center</div>
+            <div class="p-text-right">Right</div>
+
+            <h5>Wrap</h5>
+            <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+            <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+            <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+
+            <h5>Transform</h5>
+            <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
+            <div class="p-mb-3 p-text-uppercase">uppercase</div>
+            <div class="p-text-capitalize">capitalize</div>
+
+            <h5>Style</h5>
+            <div class="p-mb-3 p-text-bold">Bold</div>
+            <div class="p-mb-3 p-text-normal">Normal</div>
+            <div class="p-mb-3 p-text-light">Light</div>
+            <div class="p-mb-3 p-text-italic">Italic</div>
+        </div>
+
+        <script type="module">
+        const { createApp } = Vue;
+
+        const App = {
+
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .demo-container {
+            border: 2px solid var(--surface-d);
+        }
+        </style>                    
 `
                 }
             }