feat(Switch): form integration (#48)

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

playground/pages/form.vue

@@ -1,16 +1,6 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import type { Form, FormSubmitEvent } from '#ui/types/form'
-
-type User = {
-  email: string
-  password: string
-  tos: boolean
-}
-
-const state = reactive<Partial<User>>({})
-const state2 = reactive<Partial<User>>({})
-const state3 = reactive<Partial<User>>({})
+import type { FormSubmitEvent } from '#ui/types/form'
 
 const schema = z.object({
   email: z.string().email(),
@@ -18,9 +8,13 @@ const schema = z.object({
   tos: z.literal(true)
 })
 
-const disabledForm = ref<Form<User>>()
+type Schema = z.output<typeof schema>
 
-function onSubmit (event: FormSubmitEvent<User>) {
+const state = reactive<Partial<Schema>>({})
+const state2 = reactive<Partial<Schema>>({})
+
+
+function onSubmit (event: FormSubmitEvent<Schema>) {
   console.log(event.data)
 }
 </script>
@@ -79,44 +73,14 @@ function onSubmit (event: FormSubmitEvent<User>) {
           </UButton>
         </div>
       </UForm>
-
-      <UForm
-        ref="disabledForm"
-        :state="state3"
-        :schema="schema"
-        class="gap-4 flex flex-col w-60"
-        disabled
-        @submit="(event) => onSubmit(event)"
-      >
-        <UFormField label="Email" name="email">
-          <UInput v-model="state3.email" placeholder="john@lennon.com" />
-        </UFormField>
-
-        <UFormField
-          label="Password"
-          name="password"
-          :validate-on-input-delay="50"
-          eager-validation
-        >
-          <UInput v-model="state3.password" type="password" />
-        </UFormField>
-
-        <UFormField name="tos">
-          <UCheckbox v-model="state3.tos" label="I accept the terms and conditions" />
-        </UFormField>
-
-        <div>
-          <UButton color="gray" type="submit" :disabled="disabledForm?.disabled">
-            Submit
-          </UButton>
-        </div>
-      </UForm>
     </div>
 
     <div class="flex gap-4">
       <FormNestedExample />
       <FormNestedListExample />
       <FormElementsExample />
+      <FormElementsExample disabled />
     </div>
+    <div class="flex gap-4" />
   </div>
 </template>