From f9bca655e577bb9f319a4ba49732c186e80ab66f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 14 Jan 2022 16:38:15 +0300
Subject: [PATCH] Fixed #1795 - Templating for SplitButton

---
 src/components/splitbutton/SplitButton.d.ts |   5 +
 src/components/splitbutton/SplitButton.vue  |   4 +-
 src/views/splitbutton/SplitButtonDemo.vue   |   8 +
 src/views/splitbutton/SplitButtonDoc.vue    | 974 ++++++++++----------
 4 files changed, 520 insertions(+), 471 deletions(-)

diff --git a/src/components/splitbutton/SplitButton.d.ts b/src/components/splitbutton/SplitButton.d.ts
index a35fde0a3..a522dbf6f 100755
--- a/src/components/splitbutton/SplitButton.d.ts
+++ b/src/components/splitbutton/SplitButton.d.ts
@@ -1,3 +1,4 @@
+import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { MenuItem } from '../menuitem';
 
@@ -43,6 +44,10 @@ export interface SplitButtonProps {
 }
 
 export interface SplitButtonSlots {
+    /**
+     * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
+     */
+    default: () => VNode[];
 }
 
 export declare type SplitButtonEmits = {
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index a47a10f41..4ba444e3e 100755
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -1,6 +1,8 @@
 <template>
     <div :class="containerClass" :style="style">
-        <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
+        <slot>
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
+        </slot>
         <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled"
             aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
         <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue
index 3e0eafb24..289206620 100755
--- a/src/views/splitbutton/SplitButtonDemo.vue
+++ b/src/views/splitbutton/SplitButtonDemo.vue
@@ -24,6 +24,14 @@
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
+
+                <h5>Templating</h5>
+                <SplitButton :model="items" class="bg-primary border-round">
+                    <Button @click="save">
+                        <img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" />
+                        <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
+                    </Button>
+                </SplitButton>
             </div>
         </div>
 
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 70544cbb7..b8c057fbc 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -6,7 +6,7 @@ import SplitButton from 'primevue/splitbutton';
 
 </code></pre>
 
-      <h5>Import via CDN</h5>
+        <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;
 &lt;script src="https://unpkg.com/primevue@^3/splitbutton/splitbutton.min.js"&gt;&lt;/script&gt;
@@ -15,6 +15,11 @@ import SplitButton from 'primevue/splitbutton';
 
 		<h5>Getting Started</h5>
 		<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
+<pre v-code><code>
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
+
+</code></pre>
+
 <pre v-code.script><code>
 export default {
 	data() {
@@ -51,11 +56,6 @@ export default {
 	}
 }
 
-</code></pre>
-
-<pre v-code><code>
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
-
 </code></pre>
 
         <h5>MenuModel</h5>
@@ -82,6 +82,18 @@ export default {
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"&gt;&lt;/SplitButton&gt;
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"&gt;&lt;/SplitButton&gt;
 
+</code></pre>
+
+        <h5>Templating</h5>
+        <p>Button part of the content can easily be customized with the default slot instead of using the built-in modes.</p>
+<pre v-code><code>
+&lt;SplitButton :model="items" class="bg-primary border-round"&gt;
+    &lt;Button @click="save"&gt;
+        &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /&gt;
+        &lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
+    &lt;/Button&gt;
+&lt;/SplitButton&gt;
+
 </code></pre>
 
 		<h5>Properties</h5>
@@ -89,62 +101,62 @@ export default {
 		<div class="doc-tablewrapper">
 			<table class="doc-table">
 				<thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
+                  <tr>
+                     <th>Name</th>
+                     <th>Type</th>
+                     <th>Default</th>
+                     <th>Description</th>
+                  </tr>
 				</thead>
 				<tbody>
-                    <tr>
-                        <td>label</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Text of the button.</td>
-                    </tr>
-                    <tr>
-                        <td>icon</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Name of the icon.</td>
-                    </tr>
-                    <tr>
-                        <td>model</td>
-                        <td>object</td>
-                        <td>null</td>
-                        <td>MenuModel instance to define the overlay items.</td>
-                    </tr>
-                    <tr>
-                        <td>autoZIndex</td>
-                        <td>boolean</td>
-                        <td>true</td>
-                        <td>Whether to automatically manage layering.</td>
-                    </tr>
-                    <tr>
-                        <td>baseZIndex</td>
-                        <td>number</td>
-                        <td>0</td>
-                        <td>Base zIndex value to use in layering.</td>
-                    </tr>
-                    <tr>
-                        <td>appendTo</td>
-                        <td>string</td>
-                        <td>body</td>
-                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                    </tr>
-                    <tr>
-                        <td>style</td>
-                        <td>any</td>
-                        <td>null</td>
-                        <td>Style class of the component.</td>
-                    </tr>
-                    <tr>
-                        <td>class</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Inline style of the component.</td>
-                    </tr>
+                  <tr>
+                     <td>label</td>
+                     <td>string</td>
+                     <td>null</td>
+                     <td>Text of the button.</td>
+                  </tr>
+                  <tr>
+                     <td>icon</td>
+                     <td>string</td>
+                     <td>null</td>
+                     <td>Name of the icon.</td>
+                  </tr>
+                  <tr>
+                     <td>model</td>
+                     <td>object</td>
+                     <td>null</td>
+                     <td>MenuModel instance to define the overlay items.</td>
+                  </tr>
+                  <tr>
+                     <td>autoZIndex</td>
+                     <td>boolean</td>
+                     <td>true</td>
+                     <td>Whether to automatically manage layering.</td>
+                  </tr>
+                  <tr>
+                     <td>baseZIndex</td>
+                     <td>number</td>
+                     <td>0</td>
+                     <td>Base zIndex value to use in layering.</td>
+                  </tr>
+                  <tr>
+                     <td>appendTo</td>
+                     <td>string</td>
+                     <td>body</td>
+                     <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                  </tr>
+                  <tr>
+                     <td>style</td>
+                     <td>any</td>
+                     <td>null</td>
+                     <td>Style class of the component.</td>
+                  </tr>
+                  <tr>
+                     <td>class</td>
+                     <td>string</td>
+                     <td>null</td>
+                     <td>Inline style of the component.</td>
+                  </tr>
 				</tbody>
 			</table>
 		</div>
@@ -212,7 +224,7 @@ export default {
 					content:`
 <template>
     <div>
-		<Toast />
+        <Toast />
 
         <h5>Basic</h5>
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
@@ -228,6 +240,14 @@ export default {
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
+
+        <h5>Templating</h5>
+        <SplitButton :model="items" class="bg-primary border-round">
+            <Button @click="save">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1rem" />
+                <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
+            </Button>
+        </SplitButton>
     </div>
 </template>
 
@@ -266,133 +286,131 @@ export default {
             ],
             nestedItems: [
                 {
-                   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:'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:'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:'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:'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:'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'
-                            }
-                         ]
-                      }
-                   ]
+                    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
+                    separator:true
                 },
                 {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
             ]
         }
@@ -432,6 +450,14 @@ export default {
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
+
+        <h5>Templating</h5>
+        <SplitButton :model="items" class="bg-primary border-round">
+            <Button @click="save">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1rem" />
+                <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
+            </Button>
+        </SplitButton>
     </div>
 </template>
 
@@ -473,128 +499,128 @@ export default {
         ]);
         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:'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:'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:'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'
-                        }
-                     ]
-                  }
-               ]
+                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
+                separator:true
             },
             {
-               label:'Quit',
-               icon:'pi pi-fw pi-power-off'
+                label:'Quit',
+                icon:'pi pi-fw pi-power-off'
             }
         ]);
         const save = () => {
@@ -613,214 +639,222 @@ export default {
             },
             '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>
+                    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>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>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="mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-success mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-info mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></p-splitbutton>
-      </div>
+            <h5>Severities</h5>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="mb-2"></p-splitbutton>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary mb-2"></p-splitbutton>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-success mb-2"></p-splitbutton>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-info mb-2"></p-splitbutton>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></p-splitbutton>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></p-splitbutton>
+            <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></p-splitbutton>
 
-      <script>
-      const { createApp, ref } = Vue;
-      const { useToast } = primevue.usetoast;
+            <h5>Templating</h5>
+            <p-splitbutton :model="items" class="bg-primary border-round">
+                <p-button @click="save">
+                    <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1rem" />
+                    <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
+                </p-button>
+            </p-splitbutton>
+        </div>
 
-      const App = {
-         setup() {
+        <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: () => {
+                    {
+                        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: () => {
+                        }
+                    },
+                    {
+                        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: () => {
+                        }
+                    },
+                    {
+                        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"
-                  }
-                  }
+                        }
+                    },
+                    {   label: 'Upload',
+                        icon: 'pi pi-upload',
+                        command: () => {
+                        window.location.hash = "/fileupload"
+                    }
+                }
             ]);
             const nestedItems = ref([
-                  {
-                     label:'File',
-                     icon:'pi pi-fw pi-file',
-                     items:[
+                {
+                    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-plus',
-                           items:[
-                              {
-                                 label:'Bookmark',
-                                 icon:'pi pi-fw pi-bookmark'
-                              },
-                              {
-                                 label:'Video',
-                                 icon:'pi pi-fw pi-video'
-                              }
-                           ]
+                            label:'New',
+                            icon:'pi pi-fw pi-user-plus',
                         },
                         {
-                           label:'Delete',
-                           icon:'pi pi-fw pi-trash'
+                            label:'Delete',
+                            icon:'pi pi-fw pi-user-minus',
                         },
                         {
-                           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:'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'
+                                        label:'Print',
+                                        icon:'pi pi-fw pi-print'
                                     }
-                                 ]
-                              },
-                              {
-                                 icon:'pi pi-fw pi-bars',
-                                 label:'List'
-                              }
-                           ]
+                                    ]
+                                },
+                                {
+                                    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'
-                  }
+                    ]
+                },
+                {
+                    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});
+                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>`		
             },
-         }
+            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>`		
+                },
+            }
 		}
 	}
 }