From cbe43376ba7a75ee6db91d43cd6ef36a15e13e68 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, 10 Apr 2023 14:57:23 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For SplitButton

---
 api-generator/components/splitbutton.js     | 10 +++++++++-
 components/lib/speeddial/SpeedDial.vue      | 20 ++++++++++++--------
 components/lib/splitbutton/SplitButton.d.ts |  4 ++++
 components/lib/splitbutton/SplitButton.vue  | 13 +++++++++----
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/api-generator/components/splitbutton.js b/api-generator/components/splitbutton.js
index 669b43666..f60cf12d3 100644
--- a/api-generator/components/splitbutton.js
+++ b/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
     }
 };
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index bf6671d40..eb4fc0f8d 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/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,
diff --git a/components/lib/splitbutton/SplitButton.d.ts b/components/lib/splitbutton/SplitButton.d.ts
index d78ed3a86..06c8e409f 100755
--- a/components/lib/splitbutton/SplitButton.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 2d5d152c9..bbaa3c00f 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/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>