refactor(Form): remove state assignment and opt-in to nested forms

playground/app/pages/components/form-sandro.vue

@@ -0,0 +1,71 @@
+<template>
+  <UContainer>
+    <UForm :schema :state @submit="onSubmit">
+      <UFormField label="A" name="a">
+        <UInput v-model="state.a" />
+      </UFormField>
+      <UFormField label="B" name="b">
+        <UInput v-model="state.b" />
+      </UFormField>
+
+      <UButton type="submit">
+        Submit
+      </UButton>
+    </UForm>
+
+    {{ output }}
+  </UContainer>
+</template>
+
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '@nuxt/ui'
+import * as v from 'valibot'
+
+const _schemaStringFiltered = v.pipe(v.string(), v.trim())
+const schema = v.object({
+  a: v.string(),
+  b: v.union([
+    v.pipe(
+      v.array(_schemaStringFiltered),
+      v.filterItems((item, index, array) => (array.indexOf(item) === index || item !== ''))
+    ),
+    v.pipe(
+      v.string(),
+      v.trim(),
+      v.transform(
+        (item) => {
+          if (item === '') return undefined
+
+          return item
+            .split(',')
+            .map(val => val.trim())
+            .filter(val => val !== '')
+        }
+      )
+    )
+  ])
+})
+
+const state = reactive<{
+  a: string
+  b: string
+}>({
+  a: 'hello, world',
+  b: 'hello, world'
+})
+const output = reactive<{
+  a: string
+  b?: string[]
+}>({
+  a: '',
+  b: []
+})
+
+function onSubmit(event: FormSubmitEvent<v.InferOutput<typeof schema>>) {
+  console.log('typeof `a`:', typeof event.data.a) // should be string
+  console.log('typeof `b`:', typeof event.data.b) // should be object (array of strings)
+
+  output.a = event.data.a
+  output.b = event.data.b
+}
+</script>