Fixed #1795 - Templating for SplitButton

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 = {

src/components/splitbutton/SplitButton.vue

@@ -1,6 +1,8 @@
 <template>
     <div :class="containerClass" :style="style">
+        <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"

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>
 

src/views/splitbutton/SplitButtonDoc.vue

@@ -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>
@@ -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>
 
@@ -280,8 +300,7 @@ export default {
                                 {
                                     label:'Video',
                                     icon:'pi pi-fw pi-video'
-                            },
+                                }
-
                             ]
                         },
                         {
@@ -371,8 +390,7 @@ export default {
                                 {
                                     label:'Delete',
                                     icon:'pi pi-fw pi-calendar-minus'
-                            },
+                                }
-
                             ]
                         },
                         {
@@ -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>
 
@@ -633,6 +659,14 @@ export default {
             <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>
+
+            <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>
 
         <script>