Refactor #5681, #5682, #5683 - For DataTable, InputNumber

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')" />

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.
      */

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')" />

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,

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.
      */

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

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.
+     * Style class of the increment icon.
-     * @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
+     * @deprecated since v4.0. Use 'incrementIcon'.
      */
     incrementButtonIcon?: string | undefined;
     /**
-     * Style class of the decrement button.
+     * Style class of the increment icon.
-     * @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
+     */
+    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[];
 }
 
 /**

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">
+                    <slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
-                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="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">
+                    <slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
-                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="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">
+                <slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
-                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="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">
+                <slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
-                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="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>