arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-05-10 12:53:52 +02:00
committed by GitHub
parent 810d278ea7
commit 52cf471099
14 changed files with 82 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
playground/components/FormElementsExample.vue
View File

@@ -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">