Add form support to `InputMask`

packages/primevue/src/inputmask/BaseInputMask.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import InputMaskStyle from 'primevue/inputmask/style';
 
 export default {
     name: 'BaseInputMask',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         slotChar: {
             type: String,
             default: '_'
@@ -38,26 +37,6 @@ export default {
         readonly: {
             type: Boolean,
             default: false
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        name: {
-            type: String,
-            default: null
-        },
-        variant: {
-            type: String,
-            default: null
-        },
-        fluid: {
-            type: Boolean,
-            default: null
         }
     },
     style: InputMaskStyle,

packages/primevue/src/inputmask/InputMask.vue

@@ -9,7 +9,7 @@
         :name="name"
         :variant="variant"
         :placeholder="placeholder"
-        :fluid="hasFluid"
+        :fluid="$fluid"
         :unstyled="unstyled"
         @input="onInput"
         @compositionend="onInput"
@@ -24,7 +24,6 @@
 
 <script>
 import { getUserAgent } from '@primeuix/utils/dom';
-import { isEmpty } from '@primeuix/utils/object';
 import InputText from 'primevue/inputtext';
 import { mergeProps } from 'vue';
 import BaseInputMask from './BaseInputMask.vue';
@@ -33,7 +32,7 @@ export default {
     name: 'InputMask',
     extends: BaseInputMask,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
+    emits: ['focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
     inject: {
         $pcFluid: { default: null }
     },
@@ -54,7 +53,7 @@ export default {
     },
     updated() {
         if (this.isValueUpdated()) {
-            this.updateValue();
+            this.updateValueByModel();
         }
     },
     methods: {
@@ -111,6 +110,7 @@ export default {
             }
 
             this.$emit('blur', event);
+            this.formField.onBlur?.(event);
         },
         onKeyDown(event) {
             if (this.readonly) {
@@ -450,15 +450,15 @@ export default {
 
             this.currentVal = value;
 
-            this.$emit('update:modelValue', this.defaultBuffer !== val ? val : '');
+            this.updateValue(this.defaultBuffer !== val ? val : '');
         },
-        updateValue(updateModel = true) {
+        updateValueByModel(updateModel = true) {
             if (this.$el) {
-                if (this.modelValue == null) {
+                if (this.d_value == null) {
                     this.$el.value = '';
                     updateModel && this.updateModelValue('');
                 } else {
-                    this.$el.value = this.modelValue;
+                    this.$el.value = this.d_value;
                     this.checkVal();
 
                     setTimeout(() => {
@@ -524,16 +524,13 @@ export default {
             }
 
             this.defaultBuffer = this.buffer.join('');
-            this.updateValue(false);
+            this.updateValueByModel(false);
         },
         isValueUpdated() {
-            return this.unmask ? this.modelValue != this.getUnmaskedValue() : this.defaultBuffer !== this.$el.value && this.$el.value !== this.modelValue;
+            return this.unmask ? this.d_value != this.getUnmaskedValue() : this.defaultBuffer !== this.$el.value && this.$el.value !== this.d_value;
         }
     },
     computed: {
-        filled() {
-            return this.modelValue != null && this.modelValue.toString().length > 0;
-        },
         inputClass() {
             return [this.cx('root'), this.class];
         },
@@ -545,12 +542,9 @@ export default {
         ptmParams() {
             return {
                 context: {
-                    filled: this.filled
+                    filled: this.$filled
                 }
             };
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

packages/primevue/src/inputmask/style/InputMaskStyle.js

@@ -4,7 +4,7 @@ const classes = {
     root: ({ instance }) => [
         'p-inputmask',
         {
-            'p-filled': instance.filled
+            'p-filled': instance.$filled
         }
     ]
 };