Refactor #3832 Refactor #3833 - For SplitButton

api-generator/components/splitbutton.js

@@ -117,11 +117,19 @@ const SplitButtonEvents = [
     }
 ];
 
+const SplitButtonSlots = [
+    {
+        name: 'menubuttonicon',
+        description: 'Custom menu button icon template.'
+    }
+];
+
 module.exports = {
     splitbutton: {
         name: 'SplitButton',
         description: 'SplitButton groups a set of commands in an overlay with a default command.',
         props: SplitButtonProps,
-        events: SplitButtonEvents
+        events: SplitButtonEvents,
+        slots: SplitButtonSlots
     }
 };

components/lib/speeddial/SpeedDial.vue

@@ -4,7 +4,6 @@
             <SDButton
                 type="button"
                 :class="buttonClassName"
-                :icon="iconClassName"
                 @click="onClick($event)"
                 :disabled="disabled"
                 @keydown="onTogglerKeydown"
@@ -13,7 +12,10 @@
                 :aria-controls="id + '_list'"
                 :aria-label="ariaLabel"
                 :aria-labelledby="ariaLabelledby"
-            />
+            >
+                <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
+                <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
+            </SDButton>
         </slot>
         <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1">
             <template v-for="(item, index) of model" :key="index">
@@ -45,6 +47,7 @@
 
 <script>
 import Button from 'primevue/button';
+import PlusIcon from 'primevue/icon/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
@@ -91,9 +94,12 @@ export default {
         maskClass: null,
         showIcon: {
             type: String,
-            default: 'pi pi-plus'
+            default: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
         },
-        hideIcon: null,
         rotateAnimation: {
             type: Boolean,
             default: true
@@ -509,9 +515,6 @@ export default {
                 this.buttonClass
             ];
         },
-        iconClassName() {
-            return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
-        },
         maskClassName() {
             return [
                 'p-speeddial-mask',
@@ -526,7 +529,8 @@ export default {
         }
     },
     components: {
-        SDButton: Button
+        SDButton: Button,
+        PlusIcon: PlusIcon
     },
     directives: {
         ripple: Ripple,

components/lib/splitbutton/SplitButton.d.ts

@@ -111,6 +111,10 @@ 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[];
+    /**
+     * Custom menu button icon template.
+     */
+    menubuttonicon(): VNode[];
 }
 
 /**

components/lib/splitbutton/SplitButton.vue

@@ -7,7 +7,6 @@
             ref="button"
             type="button"
             class="p-splitbutton-menubutton"
-            :icon="menuButtonIcon"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -15,13 +14,18 @@
             @click="onDropdownButtonClick"
             @keydown="onDropdownKeydown"
             v-bind="menuButtonProps"
-        />
+        >
+            <slot name="menubuttonicon">
+                <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="menuButtonIcon" />
+            </slot>
+        </PVSButton>
         <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
     </div>
 </template>
 
 <script>
 import Button from 'primevue/button';
+import ChevronDownIcon from 'primevue/icon/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
 import { UniqueComponentId } from 'primevue/utils';
 
@@ -75,7 +79,7 @@ export default {
         },
         menuButtonIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         severity: {
             type: String,
@@ -152,7 +156,8 @@ export default {
     },
     components: {
         PVSButton: Button,
-        PVSMenu: TieredMenu
+        PVSMenu: TieredMenu,
+        ChevronDownIcon: ChevronDownIcon
     }
 };
 </script>