From 813fa97075742407f03780ee454afac704b3f7ef 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 Apr 2023 10:44:20 +0300
Subject: [PATCH] Refactor #3832 - Button icon template updates

---
 components/lib/calendar/Calendar.vue       |  8 +-
 components/lib/inputnumber/InputNumber.vue | 34 +++++---
 components/lib/orderlist/OrderList.vue     | 32 +++++---
 components/lib/picklist/PickList.vue       | 96 ++++++++++++++--------
 components/lib/speeddial/SpeedDial.vue     |  6 +-
 components/lib/splitbutton/SplitButton.vue |  8 +-
 6 files changed, 115 insertions(+), 69 deletions(-)

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index dfe20b459..91d74fc6c 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -38,9 +38,11 @@
             :aria-expanded="overlayVisible"
             :aria-controls="panelId"
         >
-            <slot name="triggericon">
-                <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
-            </slot>
+            <template #icon>
+                <slot name="triggericon">
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
+                </slot>
+            </template>
         </CalendarButton>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index 2eb64a37d..0e72c7924 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -27,25 +27,33 @@
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
             <INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
+                <template #icon>
+                    <slot name="incrementbuttonicon">
+                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
+                    </slot>
+                </template>
+            </INButton>
+            <INButton :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
+                <template #icon>
+                    <slot name="decrementbuttonicon">
+                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
+                    </slot>
+                </template>
+            </INButton>
+        </span>
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
+            <template #icon>
                 <slot name="incrementbuttonicon">
                     <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
                 </slot>
-            </INButton>
-            <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
+            </template>
+        </INButton>
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
+            <template #icon>
                 <slot name="decrementbuttonicon">
                     <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
                 </slot>
-            </INButton>
-        </span>
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
-            <slot name="incrementbuttonicon">
-                <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
-            </slot>
-        </INButton>
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
-            <slot name="decrementbuttonicon">
-                <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
-            </slot>
+            </template>
         </INButton>
     </span>
 </template>
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index b4eb1d9bc..55cdd92db 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -3,24 +3,32 @@
         <div class="p-orderlist-controls">
             <slot name="controlsstart"></slot>
             <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
-                <slot>
-                    <component :is="$slots.moveupicon || 'AngleUpIcon'" />
-                </slot>
+                <template #icon>
+                    <slot name="moveupicon">
+                        <AngleUpIcon />
+                    </slot>
+                </template>
             </OLButton>
             <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
-                <slot name="movetopicon">
-                    <AngleDoubleUpIcon />
-                </slot>
+                <template #icon
+                    ><slot name="movetopicon">
+                        <AngleDoubleUpIcon />
+                    </slot>
+                </template>
             </OLButton>
             <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps">
-                <slot name="movedownicon">
-                    <AngleDownIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movedownicon">
+                        <AngleDownIcon />
+                    </slot>
+                </template>
             </OLButton>
             <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
-                <slot name="movebottomicon">
-                    <AngleDoubleDownIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movebottomicon">
+                        <AngleDoubleDownIcon />
+                    </slot>
+                </template>
             </OLButton>
             <slot name="controlsend"></slot>
         </div>
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 0b6d6b8b6..b9670f86f 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -3,24 +3,32 @@
         <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
             <slot name="sourcecontrolsstart"></slot>
             <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps">
-                <slot name="moveupicon">
-                    <AngleUpIcon />
-                </slot>
+                <template #icon>
+                    <slot name="moveupicon">
+                        <AngleUpIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps">
-                <slot name="movetopicon">
-                    <AngleDoubleUpIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movetopicon">
+                        <AngleDoubleUpIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps">
-                <slot name="movedownicon">
-                    <AngleDownIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movedownicon">
+                        <AngleDownIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps">
-                <slot name="movebottomicon">
-                    <AngleDoubleDownIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movebottomicon">
+                        <AngleDoubleDownIcon />
+                    </slot>
+                </template>
             </PLButton>
             <slot name="sourcecontrolsend"></slot>
         </div>
@@ -64,24 +72,32 @@
         <div class="p-picklist-buttons p-picklist-transfer-buttons">
             <slot name="movecontrolsstart"></slot>
             <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps">
-                <slot name="movetotargeticon">
-                    <AngleRightIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movetotargeticon">
+                        <AngleRightIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps">
-                <slot name="movealltotargeticon">
-                    <AngleDoubleRightIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movealltotargeticon">
+                        <AngleDoubleRightIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps">
-                <slot name="movetosourceicon">
-                    <AngleLeftIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movetosourceicon">
+                        <AngleLeftIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps">
-                <slot name="movealltosourceicon">
-                    <AngleDoubleLeftIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movealltosourceicon">
+                        <AngleDoubleLeftIcon />
+                    </slot>
+                </template>
             </PLButton>
             <slot name="movecontrolsend"></slot>
         </div>
@@ -126,24 +142,32 @@
         <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
             <slot name="targetcontrolsstart"></slot>
             <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps">
-                <slot name="moveupicon">
-                    <AngleUpIcon />
-                </slot>
+                <template #icon>
+                    <slot name="moveupicon">
+                        <AngleUpIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps">
-                <slot name="movetopicon">
-                    <AngleDoubleUpIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movetopicon">
+                        <AngleDoubleUpIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps">
-                <slot name="movedownicon">
-                    <AngleDownIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movedownicon">
+                        <AngleDownIcon />
+                    </slot>
+                </template>
             </PLButton>
             <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps">
-                <slot name="movebottomicon">
-                    <AngleDoubleDownIcon />
-                </slot>
+                <template #icon>
+                    <slot name="movebottomicon">
+                        <AngleDoubleDownIcon />
+                    </slot>
+                </template>
             </PLButton>
             <slot name="targetcontrolsend"></slot>
         </div>
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index eb4fc0f8d..a2920299c 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -13,8 +13,10 @@
                 :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" />
+                <template #icon>
+                    <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
+                    <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
+                </template>
             </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">
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index bbaa3c00f..0e0a8eae3 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -15,9 +15,11 @@
             @keydown="onDropdownKeydown"
             v-bind="menuButtonProps"
         >
-            <slot name="menubuttonicon">
-                <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="menuButtonIcon" />
-            </slot>
+            <template #icon>
+                <slot name="menubuttonicon">
+                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="menuButtonIcon" />
+                </slot>
+            </template>
         </PVSButton>
         <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
     </div>