feat(Switch): form integration (#48)

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

playground/components/FormElementsExample.vue

@@ -1,22 +1,7 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import type { FormSubmitEvent } from '#ui/types/form'
+import type { FormSubmitEvent, Form } from '#ui/types/form'
 
-const form = ref()
-
-const state = reactive({
-  input: undefined,
-  inputMenu: undefined,
-  textarea: undefined,
-  select: undefined,
-  selectMenu: undefined,
-  checkbox: undefined,
-  toggle: undefined,
-  radio: undefined,
-  radioGroup: undefined,
-  switch: undefined,
-  range: undefined
-})
 
 const schema = z.object({
   input: z.string().min(10),
@@ -30,9 +15,9 @@ const schema = z.object({
   // selectMenu: z.any().refine(option => option?.value === 'option-2', {
   //   message: 'Select Option 2'
   // }),
-  // toggle: z.boolean().refine(value => value === true, {
-  //   message: 'Toggle me'
-  // }),
+  switch: z.boolean().refine(value => value === true, {
+    message: 'Toggle me'
+  }),
   checkbox: z.boolean().refine(value => value === true, {
     message: 'Check me'
   }),
@@ -44,6 +29,9 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
+const state = reactive<Partial<Schema>>({})
+const form = ref<Form<Schema>>()
+
 const options = [
   { label: 'Option 1', value: 'option-1' },
   { label: 'Option 2', value: 'option-2' },
@@ -79,12 +67,16 @@ function onSubmit (event: FormSubmitEvent<Schema>) {
       <URadioGroup v-model="state.radioGroup" legend="Radio group" :options="options" />
     </UFormField>
 
+    <UFormField name="switch">
+      <USwitch v-model:checked="state.switch" />
+    </UFormField>
+
     <div class="flex gap-2">
-      <UButton color="gray" type="submit">
+      <UButton color="gray" type="submit" :disabled="form?.disabled">
         Submit
       </UButton>
 
-      <UButton variant="outline" @click="form.clear()">
+      <UButton variant="outline" :disabled="form?.disabled" @click="form.clear()">
         Clear
       </UButton>
     </div>