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">
-        <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"

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>