chore(Form): catch-up with v2 changes (#2165)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Form.vue

@@ -157,15 +157,12 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
 }
 
 async function onSubmit(payload: Event) {
-  const event = payload as SubmitEvent
+  const event = payload as FormSubmitEvent<any>
 
   try {
     await _validate({ nested: true })
-    const submitEvent: FormSubmitEvent<any> = {
-      ...event,
-      data: props.state
-    }
-    emits('submit', submitEvent)
+    event.data = props.state
+    emits('submit', event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error

src/runtime/components/FormField.vue

@@ -38,7 +38,7 @@ export interface FormFieldSlots {
 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Label } from 'radix-vue'
-import { formFieldInjectionKey } from '../composables/useFormField'
+import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
 import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
@@ -55,8 +55,9 @@ const error = computed(() => props.error || formErrors?.value?.find(error => err
 
 const id = ref(useId())
 
+provide(inputIdInjectionKey, id)
+
 provide(formFieldInjectionKey, computed(() => ({
-  id: id.value,
   error: error.value,
   name: props.name,
   size: props.size,

src/runtime/components/RadioGroup.vue

@@ -69,7 +69,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props, { bind: false })
 const id = _id.value ?? useId()
 
 const ui = computed(() => radioGroup({

src/runtime/components/Textarea.vue

@@ -132,6 +132,8 @@ function autoResize() {
     }
 
     textareaRef.value.rows = props.rows
+    const overflow = textareaRef.value.style.overflow
+    textareaRef.value.style.overflow = 'hidden'
 
     const styles = window.getComputedStyle(textareaRef.value)
     const paddingTop = Number.parseInt(styles.paddingTop)
@@ -144,6 +146,8 @@ function autoResize() {
     if (newRows > props.rows) {
       textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
     }
+
+    textareaRef.value.style.overflow = overflow
   }
 }