feat(Form): Select and InputMenu integration (#97)

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

playground/components/FormElementsExample.vue

@@ -4,13 +4,13 @@ import type { FormSubmitEvent, Form } from '#ui/types/form'
 
 const schema = z.object({
   input: z.string().min(10),
-  // inputMenu: z.any().refine(option => option?.value === 'option-2', {
-  //   message: 'Select Option 2'
-  // }),
+  inputMenu: z.any().refine(option => option?.value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   textarea: z.string().min(10),
-  // select: z.string().refine(value => value === 'option-2', {
-  //   message: 'Select Option 2'
-  // }),
+  select: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   // selectMenu: z.any().refine(option => option?.value === 'option-2', {
   //   message: 'Select Option 2'
   // }),
@@ -31,7 +31,7 @@ type Schema = z.output<typeof schema>
 const state = reactive<Partial<Schema>>({})
 const form = ref<Form<Schema>>()
 
-const options = [
+const items = [
   { label: 'Option 1', value: 'option-1' },
   { label: 'Option 2', value: 'option-2' },
   { label: 'Option 3', value: 'option-3' }
@@ -58,12 +58,20 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
       <UTextarea v-model="state.textarea" />
     </UFormField>
 
+    <UFormField name="select">
+      <USelect v-model="state.select" :items="items" />
+    </UFormField>
+
+    <UFormField name="inputMenu">
+      <UInputMenu v-model="state.inputMenu" :items="items" />
+    </UFormField>
+
     <UFormField name="checkbox">
       <UCheckbox v-model="state.checkbox" label="I accept the terms and conditions" />
     </UFormField>
 
     <UFormField name="radioGroup">
-      <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="options" />
+      <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
     </UFormField>
 
     <UFormField name="switch">

playground/pages/input-menu.vue

@@ -34,14 +34,15 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
   params: { q: searchTermDebounced },
   transform: (data: User[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
-  }
+  },
+  lazy: true
 })
 </script>
 
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-60">
-      <UInputMenu :items="items" placeholder="Search..." autofocus />
+      <UInputMenu :items="items" autofocus />
       <UInputMenu :items="items" placeholder="Search..." color="gray" />
       <UInputMenu :items="items" placeholder="Search..." color="primary" />
       <UInputMenu :items="items" placeholder="Search..." variant="none" />

playground/pages/input.vue

@@ -7,7 +7,7 @@ const sizes = Object.keys(theme.variants.size)
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-60">
-      <UInput placeholder="Search..." autofocus />
+      <UInput autofocus />
       <UInput placeholder="Search..." color="gray" />
       <UInput placeholder="Search..." color="primary" />
       <UInput placeholder="Search..." variant="none" />

playground/pages/select.vue

@@ -35,14 +35,15 @@ const statuses = [{
 const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   transform: (data: User[]) => {
     return data?.map(user => ({ label: user.name, value: user.id, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
-  }
+  },
+  lazy: true
 })
 </script>
 
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-60">
-      <USelect :items="items" placeholder="Search..." autofocus />
+      <USelect :items="items" />
       <USelect :items="items" placeholder="Search..." color="gray" />
       <USelect :items="items" placeholder="Search..." color="primary" />
       <USelect :items="items" placeholder="Search..." variant="none" />

playground/pages/textarea.vue

@@ -7,7 +7,7 @@ const sizes = Object.keys(theme.variants.size)
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-60">
-      <UTextarea placeholder="Search..." autofocus />
+      <UTextarea autofocus />
       <UTextarea placeholder="Search..." color="gray" />
       <UTextarea placeholder="Search..." color="primary" />
       <UTextarea placeholder="Search..." variant="none" />