docs: improve form docs (#761)

Co-authored-by: Haytham A. Salama <haythamasalama@gmail.com>

docs/components/content/examples/FormExampleBasic.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleElements.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -9,7 +8,7 @@ const options = [
   { label: 'Option 3', value: 'option-3' }
 ]
 
-const state = ref({
+const state = reactive({
   input: undefined,
   textarea: undefined,
   select: undefined,

docs/components/content/examples/FormExampleJoi.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Joi from 'joi'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -10,7 +9,7 @@ const schema = Joi.object({
     .required()
 })
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleValibot.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { string, objectAsync, email, minLength, Input } from 'valibot'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -10,7 +9,7 @@ const schema = objectAsync({
 
 type Schema = Input<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleYup.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { object, string, InferType } from 'yup'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -12,7 +11,7 @@ const schema = object({
 
 type Schema = InferType<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleZod.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -10,7 +9,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/content/3.forms/10.form.md

@@ -24,10 +24,9 @@ The Form component requires the `validate` and `state` props for form validation
 #code
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -80,7 +79,6 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi), [Valibot]
 #code
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { object, string, InferType } from 'yup'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -93,7 +91,7 @@ const schema = object({
 
 type Schema = InferType<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -135,7 +133,6 @@ async function submit (event: FormSubmitEvent<Schema>) {
 #code
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -146,7 +143,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -188,7 +185,6 @@ async function submit (event: FormSubmitEvent<Schema>) {
 #code
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import Joi from 'joi'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -199,7 +195,7 @@ const schema = Joi.object({
     .required()
 })
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -241,7 +237,6 @@ async function submit (event: FormSubmitEvent<any>) {
 #code
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { string, object, email, minLength, Input } from 'valibot'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -252,7 +247,7 @@ const schema = object({
 
 type Schema = Input<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -334,7 +329,7 @@ You can manually set errors after form submission if required. To do this, simpl
 <script setup lang="ts">
 import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -343,15 +338,15 @@ const form = ref()
 
 async function submit (event: FormSubmitEvent<any>) {
   form.value.clear()
-  const response = await fetch('...')
-
-  if (!response.status === 422) {
-    const errors = await response.json()
-    form.value.setErrors(errors.map((err) => {
-      // Map validation errors to { path: string, message: string }
-    }))
-  } else {
+  try {
+    const response = await $fetch('...')
     // ...
+  } catch (err) {
+    if (err.statusCode === 422) {
+      form.value.setErrors(err.data.errors.map((err) => {
+        // Map validation errors to { path: string, message: string }
+      }))
+    }
   }
 }
 </script>