Add form support to `InputText`

packages/primevue/src/inputtext/BaseInputText.vue

@@ -1,29 +1,10 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import InputTextStyle from 'primevue/inputtext/style';
 
 export default {
     name: 'BaseInputText',
-    extends: BaseComponent,
+    extends: BaseInput,
-    props: {
-        modelValue: null,
-        size: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        variant: {
-            type: String,
-            default: null
-        },
-        fluid: {
-            type: Boolean,
-            default: null
-        }
-    },
     style: InputTextStyle,
     provide() {
         return {

packages/primevue/src/inputtext/InputText.vue

@@ -1,40 +1,31 @@
 <template>
-    <input type="text" :class="cx('root')" :value="modelValue" :aria-invalid="invalid || undefined" @input="onInput" v-bind="getPTOptions('root')" />
+    <input type="text" :class="cx('root')" :value="d_value" :disabled="disabled" :aria-invalid="$invalid || undefined" @input="onInput" v-bind="attrs" />
 </template>
 
 <script>
-import { isEmpty } from '@primeuix/utils/object';
+import { mergeProps } from 'vue';
 import BaseInputText from './BaseInputText.vue';
 
 export default {
     name: 'InputText',
     extends: BaseInputText,
     inheritAttrs: false,
-    emits: ['update:modelValue'],
-    inject: {
-        $pcFluid: { default: null }
-    },
     methods: {
-        getPTOptions(key) {
-            const _ptm = key === 'root' ? this.ptmi : this.ptm;
-
-            return _ptm(key, {
-                context: {
-                    filled: this.filled,
-                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
-                }
-            });
-        },
         onInput(event) {
-            this.$emit('update:modelValue', event.target.value);
+            this.updateValue(event.target.value, event);
         }
     },
     computed: {
-        filled() {
+        attrs() {
-            return this.modelValue != null && this.modelValue.toString().length > 0;
+            return mergeProps(
-        },
+                this.ptmi('root', {
-        hasFluid() {
+                    context: {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+                        filled: this.$filled,
+                        disabled: this.disabled
+                    }
+                }),
+                this.formField
+            );
         }
     }
 };

packages/primevue/src/inputtext/style/InputTextStyle.js

@@ -74,12 +74,12 @@ const classes = {
     root: ({ instance, props }) => [
         'p-inputtext p-component',
         {
-            'p-filled': instance.filled,
+            'p-filled': instance.$filled,
             'p-inputtext-sm': props.size === 'small',
             'p-inputtext-lg': props.size === 'large',
-            'p-invalid': props.invalid,
+            'p-invalid': instance.$invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+            'p-variant-filled': instance.$variant === 'filled',
-            'p-inputtext-fluid': instance.hasFluid
+            'p-inputtext-fluid': instance.$fluid
         }
     ]
 };