From f9ebbc46850fc764a47814784c4471708097a937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:53:15 +0300
Subject: [PATCH] browser source for buttons

---
 src/views/button/ButtonDoc.vue           | 201 +++++++++++++++++++-
 src/views/speeddial/SpeedDialDoc.vue     | 212 +++++++++++++++++++++-
 src/views/splitbutton/SplitButtonDoc.vue | 222 ++++++++++++++++++++++-
 3 files changed, 628 insertions(+), 7 deletions(-)

diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index 03e4c1eb3..1fa98b7c8 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -1,9 +1,15 @@
 <template>
 	<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
-                <h5>Import</h5>
+        <h5>Import via Module</h5>
 <pre v-code.script><code>
 import Button from 'primevue/button';
 
+</code></pre>
+
+        <h5>Import via CDN</h5>
+<pre v-code><code>
+&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
+
 </code></pre>
 
 		<h5>Getting Started</h5>
@@ -624,6 +630,199 @@ export default({
 }
 </style>`
                 },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    content: `
+    <div id="app">
+        <div class="card">
+            <h5>Basic</h5>
+            <p-button label="Submit"></p-button>
+            <p-button label="Disabled" disabled="disabled"></p-button>
+            <p-button label="Link" class="p-button-link"></p-button>
+
+            <h5>Icons</h5>
+            <p-button icon="pi pi-check"></p-button>
+            <p-button label="Submit" icon="pi pi-check"></p-button>
+            <p-button label="Submit" icon="pi pi-check" iconPos="right"></p-button>
+
+            <h5>Severities</h5>
+            <p-button label="Primary"></p-button>
+            <p-button label="Secondary" class="p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-success"></p-button>
+            <p-button label="Info" class="p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-danger"></p-button>
+
+            <h5>Raised Buttons</h5>
+            <p-button label="Primary" class="p-button-raised"></p-button>
+            <p-button label="Secondary" class="p-button-raised p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-raised p-button-success"></p-button>
+            <p-button label="Info" class="p-button-raised p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-raised p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-raised p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-raised p-button-danger"></p-button>
+
+            <h5>Rounded Buttons</h5>
+            <p-button label="Primary" class="p-button-rounded"></p-button>
+            <p-button label="Secondary" class="p-button-rounded p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-rounded p-button-success"></p-button>
+            <p-button label="Info" class="p-button-rounded p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-rounded p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-rounded p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-rounded p-button-danger"></p-button>
+
+            <h5>Text Buttons</h5>
+            <p-button label="Primary" class="p-button-text"></p-button>
+            <p-button label="Secondary" class="p-button-secondary p-button-text"></p-button>
+            <p-button label="Success" class="p-button-success p-button-text"></p-button>
+            <p-button label="Info" class="p-button-info p-button-text"></p-button>
+            <p-button label="Warning" class="p-button-warning p-button-text"></p-button>
+            <p-button label="Help" class="p-button-help p-button-text"></p-button>
+            <p-button label="Danger" class="p-button-danger p-button-text"></p-button>
+            <p-button label="Plain" class="p-button-text p-button-plain"></p-button>
+
+            <h5>Raised Text Buttons</h5>
+            <p-button label="Primary" class="p-button-raised p-button-text"></p-button>
+            <p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text"></p-button>
+            <p-button label="Success" class="p-button-raised p-button-success p-button-text"></p-button>
+            <p-button label="Info" class="p-button-raised p-button-info p-button-text"></p-button>
+            <p-button label="Warning" class="p-button-raised p-button-warning p-button-text"></p-button>
+            <p-button label="Help" class="p-button-raised p-button-help p-button-text"></p-button>
+            <p-button label="Danger" class="p-button-raised p-button-danger p-button-text"></p-button>
+            <p-button label="Plain" class="p-button-raised p-button-text p-button-plain"></p-button>
+
+            <h5>Outlined Buttons</h5>
+            <p-button label="Primary" class="p-button-outlined"></p-button>
+            <p-button label="Secondary" class="p-button-outlined p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-outlined p-button-success"></p-button>
+            <p-button label="Info" class="p-button-outlined p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-outlined p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-outlined p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-outlined p-button-danger"></p-button>
+
+            <h5>Rounded Icon Buttons</h5>
+            <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></p-button>
+            <p-button icon="pi pi-search" class="p-button-rounded p-button-success"></p-button>
+            <p-button icon="pi pi-user" class="p-button-rounded p-button-info"></p-button>
+            <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning"></p-button>
+            <p-button icon="pi pi-heart" class="p-button-rounded p-button-help"></p-button>
+            <p-button icon="pi pi-times" class="p-button-rounded p-button-danger"></p-button>
+            <p-button icon="pi pi-check" class="p-button-rounded"></p-button>
+
+            <h5>Rounded Text Icon Buttons</h5>
+            <p-button icon="pi pi-check" class="p-button-rounded p-button-text"></p-button>
+            <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></p-button>
+            <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></p-button>
+            <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></p-button>
+            <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></p-button>
+            <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></p-button>
+            <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></p-button>
+            <p-button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></p-button>
+
+            <h5>Rounded and Outlined Icon Buttons</h5>
+            <p-button icon="pi pi-check" class="p-button-rounded p-button-outlined"></p-button>
+            <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></p-button>
+            <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></p-button>
+            <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></p-button>
+            <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></p-button>
+            <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></p-button>
+            <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></p-button>
+
+            <h5>Badges</h5>
+            <p-button type="button" label="Emails" badge="8"></p-button>
+            <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+
+            <h5>Loading</h5>
+            <p-button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)"></p-button>
+            <p-button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"></p-button>
+            <p-button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)"></p-button>
+            <p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
+
+            <h5>Templating</h5>
+            <p-button type="button" class="p-px-3">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
+            </p-button>
+            <p-button type="button" class="p-button-outlined p-button-success">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
+                <span class="p-ml-2 p-text-bold">PrimeVue</span>
+            </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>
+
+            <h5>Sizes</h5>
+            <div class="sizes">
+                <p-button label="Small" icon="pi pi-check" class="p-button-sm"></p-button>
+                <p-button label="Normal" icon="pi pi-check" class="p-button"></p-button>
+                <p-button label="Large" icon="pi pi-check" class="p-button-lg"></p-button>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const loading = ref([false, false, false]);
+                const load = (index) => {
+                    loading.value[index] = true;
+                    setTimeout(() => loading.value[index] = false, 1000);
+                }
+        
+                return {loading, load};
+            },
+            components: {
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default, { ripple: true })
+            .mount("#app");
+    <\\/script>
+
+    <style>
+    .p-button {
+        margin-right: .5rem;
+    }
+
+    .p-buttonset .p-button {
+        margin-right: 0;
+    }
+
+    .sizes .button {
+        margin-bottom: .5rem;
+        display: block;
+    }
+
+    .sizes .button:last-child {
+        margin-bottom: 0;
+    }
+
+    @media screen and (max-width: 640px) {
+        .p-button {
+            margin-bottom: .5rem;
+        }
+
+        .p-button:not(.p-button-icon-only) {
+            display: flex;
+            width: 100%;
+        }
+
+        .p-buttonset .p-button {
+            margin-bottom: 0;
+        }
+    }
+    </style>
+    
+`
+                }
             }
         }
     }
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
index 2cf48d6c2..800d4ecae 100644
--- a/src/views/speeddial/SpeedDialDoc.vue
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -704,7 +704,217 @@ export default {
 </style>
 
 `
-                }
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/speeddial/speeddial.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/tooltip/tooltip.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-toast></p-toast>
+            <div class="card">
+                <h5>Linear</h5>
+                <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
+                    <p-speeddial :model="items" direction="up"></p-speeddial>
+                    <p-speeddial :model="items" direction="down"></p-speeddial>
+                    <p-speeddial :model="items" direction="left"></p-speeddial>
+                    <p-speeddial :model="items" direction="right"></p-speeddial>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Circle, Semi-Circle and Quarter-Circle</h5>
+                <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
+                    <p-speeddial :model="items" :radius="80" type="circle" button-class="p-button-warning"></p-speeddial>
+                    <p-speeddial :model="items" :radius="80" direction="up" type="semi-circle"></p-speeddial>
+                    <p-speeddial :model="items" :radius="80" direction="down" type="semi-circle"></p-speeddial>
+                    <p-speeddial :model="items" :radius="80" direction="left" type="semi-circle"></p-speeddial>
+                    <p-speeddial :model="items" :radius="80" direction="right" type="semi-circle"></p-speeddial>
+                    <p-speeddial :model="items" :radius="120" direction="up-left" type="quarter-circle" button-class="p-button-success"></p-speeddial>
+                    <p-speeddial :model="items" :radius="120" direction="up-right" type="quarter-circle" button-class="p-button-success"></p-speeddial>
+                    <p-speeddial :model="items" :radius="120" direction="down-left" type="quarter-circle" button-class="p-button-success"></p-speeddial>
+                    <p-speeddial :model="items" :radius="120" direction="down-right" type="quarter-circle" button-class="p-button-success"></p-speeddial>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Tooltip</h5>
+                <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
+                    <p-speeddial :model="items" direction="up" class="speeddial-right" button-class="p-button-danger" :tooltip-options="{position: 'left'}"></p-speeddial>
+
+                    <p-speeddial :model="items" direction="up" class="speeddial-left" button-class="p-button-help" :tooltip-options="{position: 'right'}"></p-speeddial>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Transition Duration, Icon and No Rotate Animation</h5>
+                <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
+                    <p-speeddial :model="items" direction="up" :transition-delay="80" show-icon="pi pi-bars" hide-icon="pi pi-times" button-class="p-button-outlined"></p-speeddial>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Mask</h5>
+                <div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
+                    <p-speeddial :model="items" direction="up" mask></p-speeddial>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+        const { useToast } = primevue.usetoast;
+        const Tooltip = primevue.tooltip;
+
+        const App = {
+            setup() {
+                const toast = useToast();
+
+                const items = ref([
+                    {
+                        label: 'Add',
+                        icon: 'pi pi-pencil',
+                        command: () => {
+                            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+                        }
+                    },
+                    {
+                        label: 'Update',
+                        icon: 'pi pi-refresh',
+                        command: () => {
+                            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+                        }
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-trash',
+                        command: () => {
+                            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+                        }
+                    },
+                    {
+                        label: 'Upload',
+                        icon: 'pi pi-upload',
+                        command: () => {
+                            window.location.hash = "/fileupload"
+                        }
+                    },
+                    {
+                        label: 'Vue Website',
+                        icon: 'pi pi-external-link',
+                        command: () => {
+                            window.location.href = 'https://vuejs.org/'
+                        }
+                    }
+                ]);
+
+                return { items }
+            },
+            components: {
+                "p-speeddial": primevue.speeddial,
+                "p-toast": primevue.toast
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .directive("tooltip", Tooltip)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+            .speeddial-linear-demo .p-speeddial-direction-up {
+                left: calc(50% - 2rem);
+                bottom: 0;
+            }
+
+            .speeddial-linear-demo .p-speeddial-direction-down {
+                left: calc(50% - 2rem);
+                top: 0;
+            }
+
+            .speeddial-linear-demo .p-speeddial-direction-left {
+                right: 0;
+                top: calc(50% - 2rem);
+            }
+
+            .speeddial-linear-demo .p-speeddial-direction-right {
+                left: 0;
+                top: calc(50% - 2rem);
+            }
+
+            .speeddial-circle-demo .p-speeddial-circle {
+                top: calc(50% - 2rem);
+                left: calc(50% - 2rem);
+            }
+
+            .speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-up {
+                left: calc(50% - 2rem);
+                bottom: 0;
+            }
+
+            .speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-down {
+                left: calc(50% - 2rem);
+                top: 0;
+            }
+
+            .speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-left {
+                right: 0;
+                top: calc(50% - 2rem);
+            }
+
+            .speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-right {
+                left: 0;
+                top: calc(50% - 2rem);
+            }
+
+            .speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-up-left {
+                right: 0;
+                bottom: 0;
+            }
+
+            .speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-up-right {
+                left: 0;
+                bottom: 0;
+            }
+
+            .speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-down-left {
+                right: 0;
+                top: 0;
+            }
+
+            .speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-down-right {
+                left: 0;
+                top: 0;
+            }
+
+            .speeddial-tooltip-demo .p-speeddial-direction-up.speeddial-left {
+                left: 0;
+                bottom: 0;
+            }
+
+            .speeddial-tooltip-demo .p-speeddial-direction-up.speeddial-right {
+                right: 0;
+                bottom: 0;
+            }
+
+        
+            .speeddial-delay-demo .p-speeddial-direction-up {
+                left: calc(50% - 2rem);
+                bottom: 0;
+            }
+
+            .speeddial-mask-demo .p-speeddial-direction-up {
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+
+`
+                },
             }
         }
     }
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index ee8c5a259..7ce544ee8 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -402,7 +402,8 @@ export default {
 .p-splitbutton {
     margin-right: .5rem;
 }
-</style>`		},
+</style>`		
+            },
 				'composition-api': {
 					tabName: 'Composition API Source',
 					content:`
@@ -463,7 +464,7 @@ export default {
 				}
             }
         ]);
-        const nestedItems: [
+        const nestedItems = ref([
             {
                label:'File',
                icon:'pi pi-fw pi-file',
@@ -588,7 +589,7 @@ export default {
                label:'Quit',
                icon:'pi pi-fw pi-power-off'
             }
-        ];
+        ]);
         const save = () => {
             toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
         };
@@ -601,8 +602,219 @@ export default {
 .p-splitbutton {
     margin-right: .5rem;
 }
-</style>`		},
-			}
+</style>`		
+            },
+            'browser-source': {
+					tabName: 'Browser Source',
+               imports: `<script src="https://unpkg.com/primevue@^3/splitbutton/splitbutton.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>Basic</h5>
+         <p-splitbutton label="Save" icon="pi pi-plus" @click="save" :model="items"></p-splitbutton>
+
+         <h5>Nested</h5>
+         <p-splitbutton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></p-splitbutton>
+
+         <h5>Severities</h5>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></p-splitbutton>
+      </div>
+
+      <script>
+      const { createApp, ref } = Vue;
+      const { useToast } = primevue.usetoast;
+
+      const App = {
+         setup() {
+            const toast = useToast();
+            const items = ref([
+                  {
+                     label: 'Update',
+                     icon: 'pi pi-refresh',
+                     command: () => {
+                        toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                     }
+                  },
+                  {
+                     label: 'Delete',
+                     icon: 'pi pi-times',
+                     command: () => {
+                        toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+                     }
+                  },
+                  {
+                     label: 'Vue Website',
+                     icon: 'pi pi-external-link',
+                     command: () => {
+                        window.location.href = 'https://vuejs.org/'
+                     }
+                  },
+                  {   label: 'Upload',
+                     icon: 'pi pi-upload',
+                     command: () => {
+                     window.location.hash = "/fileupload"
+                  }
+                  }
+            ]);
+            const nestedItems = ref([
+                  {
+                     label:'File',
+                     icon:'pi pi-fw pi-file',
+                     items:[
+                        {
+                           label:'New',
+                           icon:'pi pi-fw pi-plus',
+                           items:[
+                              {
+                                 label:'Bookmark',
+                                 icon:'pi pi-fw pi-bookmark'
+                              },
+                              {
+                                 label:'Video',
+                                 icon:'pi pi-fw pi-video'
+                              }
+                           ]
+                        },
+                        {
+                           label:'Delete',
+                           icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                           separator:true
+                        },
+                        {
+                           label:'Export',
+                           icon:'pi pi-fw pi-external-link'
+                        }
+                     ]
+                  },
+                  {
+                     label:'Edit',
+                     icon:'pi pi-fw pi-pencil',
+                     items:[
+                        {
+                           label:'Left',
+                           icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                           label:'Right',
+                           icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                           label:'Center',
+                           icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                           label:'Justify',
+                           icon:'pi pi-fw pi-align-justify'
+                        }
+                     ]
+                  },
+                  {
+                     label:'Users',
+                     icon:'pi pi-fw pi-user',
+                     items:[
+                        {
+                           label:'New',
+                           icon:'pi pi-fw pi-user-plus',
+                        },
+                        {
+                           label:'Delete',
+                           icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                           label:'Search',
+                           icon:'pi pi-fw pi-users',
+                           items:[
+                              {
+                                 label:'Filter',
+                                 icon:'pi pi-fw pi-filter',
+                                 items:[
+                                    {
+                                       label:'Print',
+                                       icon:'pi pi-fw pi-print'
+                                    }
+                                 ]
+                              },
+                              {
+                                 icon:'pi pi-fw pi-bars',
+                                 label:'List'
+                              }
+                           ]
+                        }
+                     ]
+                  },
+                  {
+                     label:'Events',
+                     icon:'pi pi-fw pi-calendar',
+                     items:[
+                        {
+                           label:'Edit',
+                           icon:'pi pi-fw pi-pencil',
+                           items:[
+                              {
+                                 label:'Save',
+                                 icon:'pi pi-fw pi-calendar-plus'
+                              },
+                              {
+                                 label:'Delete',
+                                 icon:'pi pi-fw pi-calendar-minus'
+                              }
+                           ]
+                        },
+                        {
+                           label:'Archieve',
+                           icon:'pi pi-fw pi-calendar-times',
+                           items:[
+                              {
+                                 label:'Remove',
+                                 icon:'pi pi-fw pi-calendar-minus'
+                              }
+                           ]
+                        }
+                     ]
+                  },
+                  {
+                     separator:true
+                  },
+                  {
+                     label:'Quit',
+                     icon:'pi pi-fw pi-power-off'
+                  }
+            ]);
+            const save = () => {
+                  toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+            };
+            return {items, nestedItems, save, toast}
+         },
+         components: {
+            "p-splitbutton": primevue.splitbutton,
+            "p-toast": primevue.toast
+         }
+      };
+
+      createApp(App)
+         .use(primevue.config.default)
+         .use(primevue.toastservice)
+         .mount("#app");
+      <\\/script>
+
+      <style>
+      .p-splitbutton {
+         margin-right: .5rem;
+      }
+      </style>`		
+            },
+         }
 		}
 	}
 }