Add form support to `InputNumber`

packages/primevue/src/inputnumber/BaseInputNumber.vue

@@ -1,15 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import InputNumberStyle from 'primevue/inputnumber/style';
 
 export default {
     name: 'BaseInputNumber',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: {
-            type: Number,
-            default: null
-        },
         format: {
             type: Boolean,
             default: true
@@ -117,26 +113,10 @@ export default {
             type: Boolean,
             default: false
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         placeholder: {
             type: String,
             default: null
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/inputnumber/InputNumber.d.ts

@@ -145,8 +145,13 @@ export interface InputNumberPassThroughAttributes {
 export interface InputNumberState {
     /**
      * Current value state as a number.
+     * @deprecated since 4.2.0. Use 'd_value' instead.
      */
     d_modelValue: number;
+    /**
+     * Current value state as a number.
+     */
+    d_value: number;
     /**
      * Current focused state as a boolean.
      * @defaultValue false

packages/primevue/src/inputnumber/InputNumber.vue

@@ -9,7 +9,7 @@
             :value="formattedValue"
             :aria-valuemin="min"
             :aria-valuemax="max"
-            :aria-valuenow="modelValue"
+            :aria-valuenow="d_value"
             :inputmode="mode === 'decimal' && !minFractionDigits ? 'numeric' : 'decimal'"
             :disabled="disabled"
             :readonly="readonly"
@@ -73,7 +73,7 @@
 
 <script>
 import { clearSelection, getSelection } from '@primeuix/utils/dom';
-import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
+import { isNotEmpty } from '@primeuix/utils/object';
 import AngleDownIcon from '@primevue/icons/angledown';
 import AngleUpIcon from '@primevue/icons/angleup';
 import InputText from 'primevue/inputtext';
@@ -83,7 +83,7 @@ export default {
     name: 'InputNumber',
     extends: BaseInputNumber,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'input', 'focus', 'blur'],
+    emits: ['input', 'focus', 'blur'],
     inject: {
         $pcFluid: { default: null }
     },
@@ -103,12 +103,14 @@ export default {
     timer: null,
     data() {
         return {
-            d_modelValue: this.modelValue,
+            // @deprecated
+            d_modelValue: this.d_value,
             focused: false
         };
     },
     watch: {
-        modelValue(newValue) {
+        d_value(newValue) {
+            // @deprecated since v4.2.0
             this.d_modelValue = newValue;
         },
         locale(newValue, oldValue) {
@@ -778,6 +780,7 @@ export default {
         handleOnInput(event, currentValue, newValue) {
             if (this.isValueChanged(currentValue, newValue)) {
                 this.$emit('input', { originalEvent: event, value: newValue, formattedValue: currentValue });
+                this.formField.onInput?.({ originalEvent: event, value: newValue });
             }
         },
         isValueChanged(currentValue, newValue) {
@@ -911,8 +914,7 @@ export default {
             return 0;
         },
         updateModel(event, value) {
-            this.d_modelValue = value;
-            this.$emit('update:modelValue', value);
+            this.writeValue(value, event);
         },
         onInputFocus(event) {
             this.focused = true;
@@ -930,6 +932,7 @@ export default {
             let newValue = this.validateValue(this.parseValue(input.value));
 
             this.$emit('blur', { originalEvent: event, value: input.value });
+            this.formField.onBlur?.(event);
 
             input.value = this.formatValue(newValue);
             input.setAttribute('aria-valuenow', newValue);
@@ -945,16 +948,13 @@ export default {
             }
         },
         maxBoundry() {
-            return this.d_modelValue >= this.max;
+            return this.d_value >= this.max;
         },
         minBoundry() {
-            return this.d_modelValue <= this.min;
+            return this.d_value <= this.min;
         }
     },
     computed: {
-        filled() {
-            return this.modelValue != null && this.modelValue.toString().length > 0;
-        },
         upButtonListeners() {
             return {
                 mousedown: (event) => this.onUpButtonMouseDown(event),
@@ -974,15 +974,12 @@ export default {
             };
         },
         formattedValue() {
-            const val = !this.modelValue && !this.allowEmpty ? 0 : this.modelValue;
+            const val = !this.d_value && !this.allowEmpty ? 0 : this.d_value;
 
             return this.formatValue(val);
         },
         getFormatter() {
             return this.numberFormat;
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/inputnumber/style/InputNumberStyle.js

@@ -153,12 +153,12 @@ const classes = {
     root: ({ instance, props }) => [
         'p-inputnumber p-component p-inputwrapper',
         {
-            'p-inputwrapper-filled': instance.filled || props.allowEmpty === false,
+            'p-inputwrapper-filled': instance.$filled || props.allowEmpty === false,
             'p-inputwrapper-focus': instance.focused,
             'p-inputnumber-stacked': props.showButtons && props.buttonLayout === 'stacked',
             'p-inputnumber-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
             'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical',
-            'p-inputnumber-fluid': instance.hasFluid
+            'p-inputnumber-fluid': instance.$fluid
         }
     ],
     pcInputText: 'p-inputnumber-input',