Add form support to Textarea

packages/primevue/src/textarea/BaseTextarea.vue

@@ -1,25 +1,12 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import TextareaStyle from 'primevue/textarea/style';
 
 export default {
     name: 'BaseTextarea',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
+        autoResize: Boolean
-        autoResize: Boolean,
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        variant: {
-            type: String,
-            default: null
-        },
-        fluid: {
-            type: Boolean,
-            default: null
-        }
     },
     style: TextareaStyle,
     provide() {

packages/primevue/src/textarea/Textarea.vue

@@ -1,19 +1,15 @@
 <template>
-    <textarea :class="cx('root')" :value="modelValue" :aria-invalid="invalid || undefined" @input="onInput" v-bind="ptmi('root', ptmParams)"></textarea>
+    <textarea :class="cx('root')" :value="d_value" :disabled="disabled" :aria-invalid="invalid || undefined" @input="onInput" v-bind="attrs"></textarea>
 </template>
 
 <script>
-import { isEmpty } from '@primeuix/utils/object';
+import { mergeProps } from 'vue';
 import BaseTextarea from './BaseTextarea.vue';
 
 export default {
     name: 'Textarea',
     extends: BaseTextarea,
     inheritAttrs: false,
-    emits: ['update:modelValue'],
-    inject: {
-        $pcFluid: { default: null }
-    },
     mounted() {
         if (this.$el.offsetParent && this.autoResize) {
             this.resize();
@@ -41,22 +37,20 @@ export default {
                 this.resize();
             }
 
-            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', {
-        ptmParams() {
-            return {
                     context: {
-                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                        filled: this.$filled,
+                        disabled: this.disabled
                     }
-            };
+                }),
-        },
+                this.formField
-        hasFluid() {
+            );
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     }
 };

packages/primevue/src/textarea/style/TextareaStyle.js

@@ -65,11 +65,11 @@ const classes = {
     root: ({ instance, props }) => [
         'p-textarea p-component',
         {
-            'p-filled': instance.filled,
+            'p-filled': instance.$filled,
             'p-textarea-resizable ': props.autoResize,
-            '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-textarea-fluid': instance.hasFluid
+            'p-textarea-fluid': instance.$fluid
         }
     ]
 };