From 45bb31a7d3bdae4b87fdfd0e03142acfaea6f9e0 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 7 May 2024 11:20:05 +0300
Subject: [PATCH 1/2] Refactor #5681, #5682, #5683 - For DataTable, InputNumber

---
 components/lib/datatable/BodyRow.vue          |  2 +-
 components/lib/datatable/DataTable.d.ts       |  4 +-
 components/lib/datatable/DataTable.vue        |  2 +-
 .../lib/datatable/style/DataTableStyle.js     |  2 +-
 components/lib/datepicker/DatePicker.d.ts     |  4 ++
 .../lib/inputnumber/BaseInputNumber.vue       |  8 ++++
 components/lib/inputnumber/InputNumber.d.ts   | 38 ++++++++++++++++---
 components/lib/inputnumber/InputNumber.vue    | 17 +++++----
 8 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue
index 81271c482..22fbc5721 100644
--- a/components/lib/datatable/BodyRow.vue
+++ b/components/lib/datatable/BodyRow.vue
@@ -3,7 +3,7 @@
         <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
             <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
                 <button v-if="expandableRowGroups" :class="cx('rowToggleButton')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowToggleButton')">
-                    <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
+                    <component v-if="templates['rowtoggleicon'] || templates['rowgrouptogglericon']" :is="templates['rowtoggleicon'] || templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
                     <template v-else>
                         <span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowToggleIcon'), expandedRowIcon]" v-bind="ptm('rowToggleIcon')" />
                         <ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index e42a0a52e..a579a5650 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -658,9 +658,9 @@ export interface DataTablePassThroughOptions {
      */
     root?: DataTablePassThroughOptionType;
     /**
-     * Used to pass attributes to the overlay's DOM element.
+     * Used to pass attributes to the mask's DOM element.
      */
-    overlay?: DataTablePassThroughOptionType;
+    mask?: DataTablePassThroughOptionType;
     /**
      * Used to pass attributes to the loading icon's DOM element.
      */
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 688f6238d..efbe74cc4 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')">
         <slot></slot>
-        <div v-if="loading" :class="cx('overlay')" v-bind="ptm('overlay')">
+        <div v-if="loading" :class="cx('mask')" v-bind="ptm('mask')">
             <slot v-if="$slots.loading" name="loading"></slot>
             <template v-else>
                 <component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index b74dd32bb..cdd436649 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -595,7 +595,7 @@ const classes = {
             'p-datatable-lg': props.size === 'large'
         }
     ],
-    overlay: 'p-datatable-mask p-component-overlay',
+    mask: 'p-datatable-mask p-component-overlay',
     loadingIcon: 'p-datatable-loading-icon',
     header: 'p-datatable-header',
     pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,
diff --git a/components/lib/datepicker/DatePicker.d.ts b/components/lib/datepicker/DatePicker.d.ts
index ae2bd1799..4f55797c7 100755
--- a/components/lib/datepicker/DatePicker.d.ts
+++ b/components/lib/datepicker/DatePicker.d.ts
@@ -143,6 +143,10 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the dropdown's DOM element.
      */
     dropdown?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: DatePickerPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue
index 1d123e0b5..bdd5090c1 100644
--- a/components/lib/inputnumber/BaseInputNumber.vue
+++ b/components/lib/inputnumber/BaseInputNumber.vue
@@ -34,10 +34,18 @@ export default {
             type: String,
             default: undefined
         },
+        incrementIcon: {
+            type: String,
+            default: undefined
+        },
         decrementButtonIcon: {
             type: String,
             default: undefined
         },
+        decrementIcon: {
+            type: String,
+            default: undefined
+        },
         locale: {
             type: String,
             default: undefined
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index 9721d2e19..b7b2078dc 100755
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -113,10 +113,18 @@ export interface InputNumberPassThroughOptions<T = any> {
      * Used to pass attributes to the increment button's DOM element.
      */
     incrementButton?: InputNumberPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the increment icon's DOM element.
+     */
+    incrementIcon?: InputNumberPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the decrement button's DOM element.
      */
     decrementButton?: InputNumberPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the decrement icon's DOM element.
+     */
+    decrementIcon?: InputNumberPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -209,15 +217,23 @@ export interface InputNumberProps {
      */
     decrementButtonClass?: string | undefined;
     /**
-     * Style class of the increment button.
-     * @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
+     * Style class of the increment icon.
+     * @deprecated since v4.0. Use 'incrementIcon'.
      */
     incrementButtonIcon?: string | undefined;
     /**
-     * Style class of the decrement button.
-     * @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
+     * Style class of the increment icon.
+     */
+    incrementIcon?: string | undefined;
+    /**
+     * Style class of the decrement icon.
+     * @deprecated since v4.0. Use 'decrementIcon'.
      */
     decrementButtonIcon?: string | undefined;
+    /**
+     * Style class of the decrement icon.
+     */
+    decrementIcon?: string | undefined;
     /**
      * Locale to be used in formatting.
      */
@@ -382,13 +398,23 @@ export interface InputNumberSlots {
         listeners: InputNumberButtonListeners;
     }): VNode[];
     /**
-     * Custom increment button icon template.
+     * @deprecated since v4.0. Use 'incrementicon' slot.
+     * Custom increment icon template.
      */
     incrementbuttonicon(): VNode[];
     /**
-     * Custom decrement button icon template.
+     * Custom increment icon template.
+     */
+    incrementicon(): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'decrementicon' slot.
+     * Custom decrement icon template.
      */
     decrementbuttonicon(): VNode[];
+    /**
+     * Custom decrement icon template.
+     */
+    decrementicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index 2880c4a4c..02343e2b1 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -31,33 +31,34 @@
         <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
             <slot name="incrementbutton" :listeners="upButtonListeners">
                 <button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
-                    <slot name="incrementbuttonicon">
-                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
+                    <slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
+                        <component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
                     </slot>
                 </button>
             </slot>
             <slot name="decrementbutton" :listeners="downButtonListeners">
                 <button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
-                    <slot name="decrementbuttonicon">
-                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
+                    <slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
+                        <component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
                     </slot>
                 </button>
             </slot>
         </span>
         <slot name="incrementbutton" :listeners="upButtonListeners">
             <button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
-                <slot name="incrementbuttonicon">
-                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
+                <slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
+                    <component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
                 </slot>
             </button>
         </slot>
         <slot name="decrementbutton" :listeners="downButtonListeners">
             <button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
-                <slot name="decrementbuttonicon">
-                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
+                <slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
+                    <component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
                 </slot>
             </button>
         </slot>
+        <!-- TODO: decrementButton* and incrementButton* are deprecated since v4.0-->
     </span>
 </template>
 

From f046eccda996ce5aae1139c08acfd9435e54d31d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 7 May 2024 11:20:31 +0300
Subject: [PATCH 2/2] Refactor #5681 - For DatePicker

---
 components/lib/datepicker/DatePicker.vue           | 2 +-
 components/lib/datepicker/style/DatePickerStyle.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue
index 4ad458d46..8f2f429f8 100755
--- a/components/lib/datepicker/DatePicker.vue
+++ b/components/lib/datepicker/DatePicker.vue
@@ -43,7 +43,7 @@
                 v-bind="ptm('dropdown')"
             >
                 <slot name="dropdownicon" :class="icon">
-                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownIcon')" />
                 </slot>
             </button>
         </slot>
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index cb504f064..30bba194f 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -375,7 +375,7 @@ const classes = {
     dayView: 'p-datepicker-day-view',
     weekHeader: 'p-datepicker-weekheader p-disabled',
     weekNumber: 'p-datepicker-weeknumber',
-    weekLabelContainer: 'p-disabled', //TODO:
+    weekLabelContainer: 'p-disabled',
     weekDayCell: 'p-datepicker-weekday-cell',
     weekDay: 'p-date-picker-weekday',
     dayCell: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],