From 06124bd86e33bfef458fb8a485caee402bd269b0 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: Tue, 4 Apr 2023 15:40:30 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For InputNumber

---
 api-generator/components/inputnumber.js     | 14 ++++++++-
 components/lib/inputnumber/InputNumber.d.ts | 15 ++++++---
 components/lib/inputnumber/InputNumber.vue  | 34 ++++++++++++++++-----
 3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/api-generator/components/inputnumber.js b/api-generator/components/inputnumber.js
index 5796efe41..9204a3c80 100644
--- a/api-generator/components/inputnumber.js
+++ b/api-generator/components/inputnumber.js
@@ -231,11 +231,23 @@ const InputNumberEvents = [
     }
 ];
 
+const InputNumberSlots = [
+    {
+        name: 'incrementbuttonicon',
+        description: 'Custom increment button icon template.'
+    },
+    {
+        name: 'decrementbuttonicon',
+        description: 'Custom decrement button icon template.'
+    }
+];
+
 module.exports = {
     inputnumber: {
         name: 'InputNumber',
         description: 'InputNumber is an input component to provide numerical input.',
         props: InputNumberProps,
-        events: InputNumberEvents
+        events: InputNumberEvents,
+        slots: InputNumberSlots
     }
 };
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index 1d6596245..193f838fb 100755
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -7,7 +7,7 @@
  * @module inputnumber
  *
  */
-import { ButtonHTMLAttributes, InputHTMLAttributes } from 'vue';
+import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
 /**
@@ -73,12 +73,10 @@ export interface InputNumberProps {
     decrementButtonClass?: string | undefined;
     /**
      * Style class of the increment button.
-     * @defaultValue pi pi-angle-up
      */
     incrementButtonIcon?: string | undefined;
     /**
      * Style class of the decrement button.
-     * @defaultValue pi pi-angle-down
      */
     decrementButtonIcon?: string | undefined;
     /**
@@ -203,7 +201,16 @@ export interface InputNumberProps {
 /**
  * Defines valid slots in InputNumber component.
  */
-export interface InputNumberSlots {}
+export interface InputNumberSlots {
+    /**
+     * Custom increment button icon template.
+     */
+    incrementbuttonicon(): VNode[];
+    /**
+     * Custom decrement button icon template.
+     */
+    decrementbuttonicon(): VNode[];
+}
 
 /**
  * Defines valid emits in InputNumber component.
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index 2750dd3d3..2eb64a37d 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -26,16 +26,34 @@
             v-bind="inputProps"
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
-            <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
-            <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
+            <INButton :class="upButtonClass" 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 :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>
+            </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" />
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
+        <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>
+        </INButton>
     </span>
 </template>
 
 <script>
 import Button from 'primevue/button';
+import AngleDownIcon from 'primevue/icon/angledown';
+import AngleUpIcon from 'primevue/icon/angleup';
 import InputText from 'primevue/inputtext';
 import { DomHandler } from 'primevue/utils';
 
@@ -69,11 +87,11 @@ export default {
         },
         incrementButtonIcon: {
             type: String,
-            default: 'pi pi-angle-up'
+            default: undefined
         },
         decrementButtonIcon: {
             type: String,
-            default: 'pi pi-angle-down'
+            default: undefined
         },
         locale: {
             type: String,
@@ -1097,7 +1115,9 @@ export default {
     },
     components: {
         INInputText: InputText,
-        INButton: Button
+        INButton: Button,
+        AngleUpIcon: AngleUpIcon,
+        AngleDownIcon: AngleDownIcon
     }
 };
 </script>