From 3b8e014449e5a26fb075d92821f8718378c66ddf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Fri, 6 Oct 2023 09:25:22 -0700
Subject: [PATCH] docs: improve form docs (#761)

Co-authored-by: Haytham A. Salama <haythamasalama@gmail.com>
---
 .../content/examples/FormExampleBasic.vue     |  3 +-
 .../content/examples/FormExampleElements.vue  |  3 +-
 .../content/examples/FormExampleJoi.vue       |  3 +-
 .../content/examples/FormExampleValibot.vue   |  3 +-
 .../content/examples/FormExampleYup.vue       |  3 +-
 .../content/examples/FormExampleZod.vue       |  3 +-
 docs/content/3.forms/10.form.md               | 33 ++++++++-----------
 7 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/docs/components/content/examples/FormExampleBasic.vue b/docs/components/content/examples/FormExampleBasic.vue
index 8dc74789..b711cc6f 100644
--- a/docs/components/content/examples/FormExampleBasic.vue
+++ b/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
 })
diff --git a/docs/components/content/examples/FormExampleElements.vue b/docs/components/content/examples/FormExampleElements.vue
index ea095f56..7aacc1bd 100644
--- a/docs/components/content/examples/FormExampleElements.vue
+++ b/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,
diff --git a/docs/components/content/examples/FormExampleJoi.vue b/docs/components/content/examples/FormExampleJoi.vue
index d35f5704..049ddb4b 100644
--- a/docs/components/content/examples/FormExampleJoi.vue
+++ b/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
 })
diff --git a/docs/components/content/examples/FormExampleValibot.vue b/docs/components/content/examples/FormExampleValibot.vue
index 4f9d716c..c1cefe3a 100644
--- a/docs/components/content/examples/FormExampleValibot.vue
+++ b/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
 })
diff --git a/docs/components/content/examples/FormExampleYup.vue b/docs/components/content/examples/FormExampleYup.vue
index 389ac6ed..05288888 100644
--- a/docs/components/content/examples/FormExampleYup.vue
+++ b/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
 })
diff --git a/docs/components/content/examples/FormExampleZod.vue b/docs/components/content/examples/FormExampleZod.vue
index cf99af21..23420043 100644
--- a/docs/components/content/examples/FormExampleZod.vue
+++ b/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
 })
diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md
index 25c3b047..d204b957 100644
--- a/docs/content/3.forms/10.form.md
+++ b/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>