From a8f3e2d5e35437a481d31b6f69283b043692eeb8 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 18 Apr 2023 10:35:20 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - Icon props deprecation

---
 components/lib/autocomplete/AutoComplete.vue   |  3 ++-
 components/lib/avatar/Avatar.vue               | 11 +++++------
 components/lib/breadcrumb/BreadcrumbItem.vue   | 11 ++++-------
 components/lib/button/Button.vue               | 11 +++++++----
 components/lib/calendar/Calendar.vue           |  2 +-
 components/lib/carousel/Carousel.vue           |  2 +-
 components/lib/cascadeselect/CascadeSelect.vue | 14 ++++++++++----
 components/lib/chip/Chip.vue                   | 15 +++++++--------
 components/lib/contextmenu/ContextMenuSub.vue  | 11 ++++++++---
 components/lib/datatable/ColumnFilter.vue      |  8 ++++----
 components/lib/datatable/DataTable.vue         |  6 +++++-
 components/lib/datatable/RowCheckbox.vue       |  3 ++-
 12 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index add1ec01e..137e77a60 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -86,7 +86,8 @@
             </li>
         </ul>
         <slot v-if="searching" name="loadingicon">
-            <component :is="loadingIcon ? 'i' : 'SpinnerIcon'" :class="['p-autocomplete-loader', loadingIcon]" spin aria-hidden="true" />
+            <i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" />
+            <SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" />
         </slot>
         <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick">
             <template #icon>
diff --git a/components/lib/avatar/Avatar.vue b/components/lib/avatar/Avatar.vue
index 8caad6900..282ebfcce 100644
--- a/components/lib/avatar/Avatar.vue
+++ b/components/lib/avatar/Avatar.vue
@@ -1,10 +1,12 @@
 <template>
     <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
-        <slot>
+        <slot></slot>
+        <template v-if="!$slots.default">
             <span v-if="label" class="p-avatar-text">{{ label }}</span>
-            <span v-else-if="icon" :class="iconClass"></span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" />
+            <span v-else-if="icon" :class="['p-avatar-icon', icon]" />
             <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
-        </slot>
+        </template>
     </div>
 </template>
 
@@ -58,9 +60,6 @@ export default {
                     'p-avatar-xl': this.size === 'xlarge'
                 }
             ];
-        },
-        iconClass() {
-            return ['p-avatar-icon', this.icon];
         }
     }
 };
diff --git a/components/lib/breadcrumb/BreadcrumbItem.vue b/components/lib/breadcrumb/BreadcrumbItem.vue
index 135d3d86d..41a9f85fb 100755
--- a/components/lib/breadcrumb/BreadcrumbItem.vue
+++ b/components/lib/breadcrumb/BreadcrumbItem.vue
@@ -3,12 +3,14 @@
         <template v-if="!templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                 <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)">
-                    <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
+                    <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" />
                     <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
             <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick">
-                <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
+                <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
+                <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" />
                 <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
@@ -64,11 +66,6 @@ export default {
 
             return to === lastPath || url === lastPath ? 'page' : undefined;
         }
-    },
-    computed: {
-        iconClass() {
-            return ['p-menuitem-icon', this.item.icon];
-        }
     }
 };
 </script>
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index ce787ef81..bb9f1a180 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -2,11 +2,12 @@
     <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
         <slot></slot>
         <template v-if="!$slots.default">
-            <slot v-if="loading" name="loadingicon" :class="iconStyleClass">
-                <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" :class="iconStyleClass" spin />
+            <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
+                <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" />
+                <SpinnerIcon v-else :class="loadingIconStyleClass" spin />
             </slot>
             <slot v-else name="icon" :class="iconStyleClass">
-                <span v-if="icon" :class="iconStyleClass"></span>
+                <span v-if="icon" :class="[iconStyleClass, icon]"></span>
             </slot>
             <span class="p-button-label">{{ label || '&nbsp;' }}</span>
             <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
@@ -110,7 +111,6 @@ export default {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + (this.loadingIcon || '') : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -121,6 +121,9 @@ export default {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 91d74fc6c..38edb6b54 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -75,7 +75,7 @@
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
                                     >
-                                        <slot name="previcon">
+                                        <slot name="previousicon">
                                             <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" />
                                         </slot>
                                     </button>
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 76bd9ccc1..8e8079b25 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -15,7 +15,7 @@
                     @click="navBackward"
                     v-bind="prevButtonProps"
                 >
-                    <slot name="previcon">
+                    <slot name="previousicon">
                         <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" class="p-carousel-next-icon" />
                     </slot>
                 </button>
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index fb22cd210..1fa49128c 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -30,10 +30,16 @@
             </slot>
         </span>
         <div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true">
-            <slot name="indicator">
-                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-cascadeselect-trigger-icon', loadingIcon]" aria-hidden="true" />
-                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
-            </slot>
+            <slot v-if="$slots.indicator" name="indicator"></slot>
+            <template v-else>
+                <slot v-if="loading" name="loadingicon" class="p-cascadeselect-trigger-icon">
+                    <span v-if="loadingIcon" :class="['p-cascadeselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
+                    <SpinnerIcon v-else class="p-cascadeselect-trigger-icon" spin aria-hidden="true" />
+                </slot>
+                <slot v-else name="dropdownicon" class="p-cascadeselect-trigger-icon">
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
+                </slot>
+            </template>
         </div>
         <span role="status" aria-live="polite" class="p-hidden-accessible">
             {{ searchResultMessageText }}
diff --git a/components/lib/chip/Chip.vue b/components/lib/chip/Chip.vue
index 2d44f042b..bd306ec58 100644
--- a/components/lib/chip/Chip.vue
+++ b/components/lib/chip/Chip.vue
@@ -1,12 +1,14 @@
 <template>
     <div v-if="visible" :class="containerClass" :aria-label="label">
-        <slot>
+        <slot></slot>
+        <template v-if="!$slots.default">
             <img v-if="image" :src="image" />
-            <span v-else-if="icon" :class="iconClass"></span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" />
+            <span v-else-if="icon" :class="['p-chip-icon', icon]" />
             <div v-if="label" class="p-chip-text">{{ label }}</div>
-        </slot>
-        <slot name="removeicon" :click="close" :keydown="onKeydown">
-            <component v-if="removable" :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component>
+        </template>
+        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component>
         </slot>
     </div>
 </template>
@@ -63,9 +65,6 @@ export default {
                     'p-chip-image': this.image != null
                 }
             ];
-        },
-        iconClass() {
-            return ['p-chip-icon', this.icon];
         }
     },
     components: {
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 0c1a8d217..06a08ccdc 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -20,14 +20,19 @@
                         <template v-if="!templates.item">
                             <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                                 <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                    <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                     <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                                 </a>
                             </router-link>
                             <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                                <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                                <component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || 'AngleRightIcon'" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                <template v-if="getItemProp(processedItem, 'items')">
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                    <AngleRightIcon v-else class="p-submenu-icon" />
+                                </template>
                             </a>
                         </template>
                         <component v-else :is="templates.item" :item="processedItem.item"></component>
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 546d91617..58cfbeb9d 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -81,8 +81,8 @@
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
                                 <div>
                                     <CFButton v-if="showRemoveIcon" type="button" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel">
-                                        <template #icon>
-                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" class="p-button-icon-left" />
+                                        <template #icon="iconProps">
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" />
                                         </template>
                                     </CFButton>
                                 </div>
@@ -90,8 +90,8 @@
                         </div>
                         <div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
                             <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()">
-                                <template #icon>
-                                    <component :is="filterAddIconTemplate || 'PlusIcon'" class="p-button-icon-left" />
+                                <template #icon="iconProps">
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" />
                                 </template>
                             </CFButton>
                         </div>
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index f04553548..64db4e77f 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -3,7 +3,11 @@
         <slot></slot>
         <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay">
             <slot v-if="$slots.loading" name="loading"></slot>
-            <component v-else :is="$slots.loadingicon ? $slots.loadingicon : loadingIcon ? 'i' : 'SpinnerIcon'" spin :class="['p-datatable-loading-icon', loadingIcon]" />
+            <template v-else>
+                <component v-if="$slots.loadingicon" :is="$slots.loadingicon" class="p-datatable-loading-icon" />
+                <i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" />
+                <SpinnerIcon v-else spin class="p-datatable-loading-icon" />
+            </template>
         </div>
         <div v-if="$slots.header" class="p-datatable-header">
             <slot name="header"></slot>
diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue
index 2fe176fed..67077b76b 100755
--- a/components/lib/datatable/RowCheckbox.vue
+++ b/components/lib/datatable/RowCheckbox.vue
@@ -4,7 +4,8 @@
             <input ref="input" type="checkbox" :checked="checked" :disabled="$attrs.disabled" :tabindex="$attrs.disabled ? null : '0'" :aria-label="checkboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeydown" />
         </div>
         <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]">
-            <component :is="rowCheckboxIconTemplate || 'CheckIcon'" :checked="checked" class="p-checkbox-icon" />
+            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <CheckIcon v-else class="p-checkbox-icon" />
         </div>
     </div>
 </template>