primevue 4.1.0 → 4.2.0

package/inputnumber/InputNumber.vue

@@ -9,13 +9,14 @@
             :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"
             :placeholder="placeholder"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             @input="onUserInput"
@@ -73,7 +74,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 +84,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 +104,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 +781,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 +915,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 +933,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 +949,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 +975,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: {

package/inputnumber/index.d.ts

@@ -7,7 +7,7 @@
  * @module inputnumber
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, Nullable, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, Nullable, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { InputTextPassThroughOptions } from 'primevue/inputtext';
 import type { PassThroughOptions } from 'primevue/passthrough';
@@ -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
@@ -193,6 +198,14 @@ export interface InputNumberProps {
      * Value of the component.
      */
     modelValue?: Nullable<number>;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: Nullable<number>;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Whether to format the value.
      * @defaultValue true
@@ -310,6 +323,10 @@ export interface InputNumberProps {
      * @defaultValue false
      */
     highlightOnFocus?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -359,6 +376,10 @@ export interface InputNumberProps {
      * Establishes a string value that labels the component.
      */
     ariaLabel?: string | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -431,6 +452,11 @@ export interface InputNumberEmitsOptions {
      * @param {number} value - New value.
      */
     'update:modelValue'(value: number): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {number} value - New value.
+     */
+    'value-change'(value: number): void;
     /**
      * Callback to invoke when the value is entered.
      * @param {InputNumberInputEvent} event - Custom input event.
@@ -475,7 +501,7 @@ declare const InputNumber: DefineComponent<InputNumberProps, InputNumberSlots, I
 
 declare module 'vue' {
     export interface GlobalComponents {
-        InputNumber: GlobalComponentConstructor<InputNumberProps, InputNumberSlots, InputNumberEmits>;
+        InputNumber: DefineComponent<InputNumberProps, InputNumberSlots, InputNumberEmits>;
     }
 }
 

package/inputnumber/index.mjs

@@ -1,20 +1,16 @@
 import { getSelection, clearSelection } from '@primeuix/utils/dom';
-import { isNotEmpty, isEmpty } 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';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import InputNumberStyle from 'primevue/inputnumber/style';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toHandlers, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseInputNumber',
-  "extends": BaseComponent,
+  "extends": BaseInput,
   props: {
-    modelValue: {
-      type: Number,
-      "default": null
-    },
     format: {
       type: Boolean,
       "default": true
@@ -122,26 +118,10 @@ var script$1 = {
       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
@@ -188,7 +168,7 @@ var script = {
   name: 'InputNumber',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'input', 'focus', 'blur'],
+  emits: ['input', 'focus', 'blur'],
   inject: {
     $pcFluid: {
       "default": null
@@ -210,12 +190,14 @@ var script = {
   timer: null,
   data: function data() {
     return {
-      d_modelValue: this.modelValue,
+      // @deprecated
+      d_modelValue: this.d_value,
       focused: false
     };
   },
   watch: {
-    modelValue: function modelValue(newValue) {
+    d_value: function d_value(newValue) {
+      // @deprecated since v4.2.0
       this.d_modelValue = newValue;
     },
     locale: function locale(newValue, oldValue) {
@@ -818,11 +800,16 @@ var script = {
     },
     handleOnInput: function handleOnInput(event, currentValue, newValue) {
       if (this.isValueChanged(currentValue, newValue)) {
+        var _this$formField$onInp, _this$formField;
         this.$emit('input', {
           originalEvent: event,
           value: newValue,
           formattedValue: currentValue
         });
+        (_this$formField$onInp = (_this$formField = this.formField).onInput) === null || _this$formField$onInp === void 0 || _this$formField$onInp.call(_this$formField, {
+          originalEvent: event,
+          value: newValue
+        });
       }
     },
     isValueChanged: function isValueChanged(currentValue, newValue) {
@@ -931,8 +918,7 @@ var script = {
       return 0;
     },
     updateModel: function updateModel(event, value) {
-      this.d_modelValue = value;
-      this.$emit('update:modelValue', value);
+      this.writeValue(value, event);
     },
     onInputFocus: function onInputFocus(event) {
       this.focused = true;
@@ -942,6 +928,7 @@ var script = {
       this.$emit('focus', event);
     },
     onInputBlur: function onInputBlur(event) {
+      var _this$formField$onBlu, _this$formField2;
       this.focused = false;
       var input = event.target;
       var newValue = this.validateValue(this.parseValue(input.value));
@@ -949,6 +936,7 @@ var script = {
         originalEvent: event,
         value: input.value
       });
+      (_this$formField$onBlu = (_this$formField2 = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField2, event);
       input.value = this.formatValue(newValue);
       input.setAttribute('aria-valuenow', newValue);
       this.updateModel(event, newValue);
@@ -962,16 +950,13 @@ var script = {
       }
     },
     maxBoundry: function maxBoundry() {
-      return this.d_modelValue >= this.max;
+      return this.d_value >= this.max;
     },
     minBoundry: function minBoundry() {
-      return this.d_modelValue <= this.min;
+      return this.d_value <= this.min;
     }
   },
   computed: {
-    filled: function filled() {
-      return this.modelValue != null && this.modelValue.toString().length > 0;
-    },
     upButtonListeners: function upButtonListeners() {
       var _this2 = this;
       return {
@@ -1013,14 +998,11 @@ var script = {
       };
     },
     formattedValue: function formattedValue() {
-      var val = !this.modelValue && !this.allowEmpty ? 0 : this.modelValue;
+      var val = !this.d_value && !this.allowEmpty ? 0 : this.d_value;
       return this.formatValue(val);
     },
     getFormatter: function getFormatter() {
       return this.numberFormat;
-    },
-    hasFluid: function hasFluid() {
-      return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
     }
   },
   components: {
@@ -1047,13 +1029,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     value: $options.formattedValue,
     "aria-valuemin": _ctx.min,
     "aria-valuemax": _ctx.max,
-    "aria-valuenow": _ctx.modelValue,
+    "aria-valuenow": _ctx.d_value,
     inputmode: _ctx.mode === 'decimal' && !_ctx.minFractionDigits ? 'numeric' : 'decimal',
     disabled: _ctx.disabled,
     readonly: _ctx.readonly,
     placeholder: _ctx.placeholder,
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
+    size: _ctx.size,
     invalid: _ctx.invalid,
     variant: _ctx.variant,
     onInput: $options.onUserInput,
@@ -1065,7 +1048,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onBlur: $options.onInputBlur,
     pt: _ctx.ptm('pcInputText'),
     unstyled: _ctx.unstyled
-  }, null, 8, ["id", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "inputmode", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "invalid", "variant", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur", "pt", "unstyled"]), _ctx.showButtons && _ctx.buttonLayout === 'stacked' ? (openBlock(), createElementBlock("span", mergeProps({
+  }, null, 8, ["id", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "inputmode", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "size", "invalid", "variant", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur", "pt", "unstyled"]), _ctx.showButtons && _ctx.buttonLayout === 'stacked' ? (openBlock(), createElementBlock("span", mergeProps({
     key: 0,
     "class": _ctx.cx('buttonGroup')
   }, _ctx.ptm('buttonGroup')), [renderSlot(_ctx.$slots, "incrementbutton", {