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>

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>