Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix checkbox and radio form examples

Browse Source 
add type="checkbox|radio" and name in FormField
This commit is contained in:
Sadegh Barati 2023-12-19 18:03:46 +03:30
parent 96da2d8ffe
commit 8cae5b70b5
6 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
View File

@ -77,16 +77,12 @@ const onSubmit = handleSubmit((values) => {
</FormDescription> </FormDescription>
</div> </div>
<FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" name="items"> <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
<FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0"> <FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormControl> <FormControl>
<Checkbox <Checkbox
:checked="value.includes(item.id)" :checked="value.includes(item.id)"
@update:checked="(checked) => { @update:checked="handleChange"
if (Array.isArray(value)) {
handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
}
}"
/> />
</FormControl> </FormControl>
<FormLabel class="font-normal"> <FormLabel class="font-normal">

2
apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
View File

@ -37,7 +37,7 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="space-y-6" @submit="onSubmit"> <form class="space-y-6" @submit="onSubmit">
<FormField v-slot="{ value, handleChange }" name="mobile"> <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
<FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4"> <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4">
<FormControl> <FormControl>
<Checkbox :checked="value" @update:checked="handleChange" /> <Checkbox :checked="value" @update:checked="handleChange" />

2
apps/www/src/lib/registry/default/example/RadioGroupForm.vue
View File

@ -35,7 +35,7 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="w-2/3 space-y-6" @submit="onSubmit"> <form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="type"> <FormField v-slot="{ componentField }" type="radio" name="type">
<FormItem class="space-y-3"> <FormItem class="space-y-3">
<FormLabel>Notify me about...</FormLabel> <FormLabel>Notify me about...</FormLabel>

10
apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
View File

@ -77,16 +77,12 @@ const onSubmit = handleSubmit((values) => {
</FormDescription> </FormDescription>
</div> </div>
<FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" name="items"> <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
<FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0"> <FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormControl> <FormControl>
<Checkbox <Checkbox
:checked="value.includes(item.id)" :checked="value.includes(item.id)"
@update:checked="(checked) => { @update:checked="handleChange"
if (Array.isArray(value)) {
handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
}
}"
/> />
</FormControl> </FormControl>
<FormLabel class="font-normal"> <FormLabel class="font-normal">

2
apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
View File

@ -37,7 +37,7 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="space-y-6" @submit="onSubmit"> <form class="space-y-6" @submit="onSubmit">
<FormField v-slot="{ value, handleChange }" name="mobile"> <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
<FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow"> <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow">
<FormControl> <FormControl>
<Checkbox :checked="value" @update:checked="handleChange" /> <Checkbox :checked="value" @update:checked="handleChange" />

2
apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
View File

@ -35,7 +35,7 @@ const onSubmit = handleSubmit((values) => {
<template> <template>
<form class="w-2/3 space-y-6" @submit="onSubmit"> <form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="type"> <FormField v-slot="{ componentField }" type="radio" name="type">
<FormItem class="space-y-3"> <FormItem class="space-y-3">
<FormLabel>Notify me about...</FormLabel> <FormLabel>Notify me about...</FormLabel>