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

docs: fix vee-validate checkbox and radio-group examples (#213)

Browse Source 
* docs: fix checkbox and radio form examples

add type="checkbox|radio" and name in FormField

* docs: add `vee-validate` documentation link for checkbox and radio inputs

* chore: update `vee-validate` deps
This commit is contained in:
Sadegh Barati 2023-12-19 18:23:05 +03:30 committed by GitHub
parent 96da2d8ffe
commit b40321e3d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/package.json
View File

@ -21,7 +21,7 @@
"@tanstack/vue-table": "^8.10.7", "@tanstack/vue-table": "^8.10.7",
"@unovis/ts": "^1.2.3", "@unovis/ts": "^1.2.3",
"@unovis/vue": "1.3.0-beta.3", "@unovis/vue": "1.3.0-beta.3",
"@vee-validate/zod": "^4.11.8", "@vee-validate/zod": "^4.12.3",
"@vueuse/core": "^10.5.0", "@vueuse/core": "^10.5.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.0.0", "clsx": "^2.0.0",
@ -31,7 +31,7 @@
"radix-vue": "^1.2.3", "radix-vue": "^1.2.3",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2", "v-calendar": "^3.1.2",
"vee-validate": "4.11.8", "vee-validate": "4.12.3",
"vue": "^3.3.7", "vue": "^3.3.7",
"vue-wrap-balancer": "^1.1.3", "vue-wrap-balancer": "^1.1.3",
"zod": "^3.22.4" "zod": "^3.22.4"

2
apps/www/src/content/docs/components/checkbox.md
View File

@ -40,6 +40,8 @@ import { Checkbox } from '@/components/ui/checkbox'
### Form ### Form
Please first read `vee-validate` section for [Checkbox and Radio Inputs](https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio/)
<ComponentPreview name="CheckboxFormSingle" /> <ComponentPreview name="CheckboxFormSingle" />
<ComponentPreview name="CheckboxFormMultiple" /> <ComponentPreview name="CheckboxFormMultiple" />

2
apps/www/src/content/docs/components/radio-group.md
View File

@ -40,4 +40,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
### Form ### Form
Please first read `vee-validate` section for [Checkbox and Radio Inputs](https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio/)
<ComponentPreview name="RadioGroupForm" /> <ComponentPreview name="RadioGroupForm" />

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>

36
pnpm-lock.yaml
View File

@ -66,8 +66,8 @@ importers:
specifier: 1.3.0-beta.3 specifier: 1.3.0-beta.3
version: 1.3.0-beta.3(@unovis/ts@1.2.3)(vue@3.3.7) version: 1.3.0-beta.3(@unovis/ts@1.2.3)(vue@3.3.7)
'@vee-validate/zod': '@vee-validate/zod':
specifier: ^4.11.8 specifier: ^4.12.3
version: 4.11.8(vue@3.3.7) version: 4.12.3(vue@3.3.7)
'@vueuse/core': '@vueuse/core':
specifier: ^10.5.0 specifier: ^10.5.0
version: 10.5.0(vue@3.3.7) version: 10.5.0(vue@3.3.7)
@ -96,8 +96,8 @@ importers:
specifier: ^3.1.2 specifier: ^3.1.2
version: 3.1.2(@popperjs/core@2.11.8)(vue@3.3.7) version: 3.1.2(@popperjs/core@2.11.8)(vue@3.3.7)
vee-validate: vee-validate:
specifier: 4.11.8 specifier: 4.12.3
version: 4.11.8(vue@3.3.7) version: 4.12.3(vue@3.3.7)
vue: vue:
specifier: ^3.3.7 specifier: ^3.3.7
version: 3.3.7(typescript@5.2.2) version: 3.3.7(typescript@5.2.2)
@ -4143,11 +4143,11 @@ packages:
vue: 3.3.7(typescript@5.2.2) vue: 3.3.7(typescript@5.2.2)
dev: false dev: false
/@vee-validate/zod@4.11.8(vue@3.3.7): /@vee-validate/zod@4.12.3(vue@3.3.7):
resolution: {integrity: sha512-qAyqDEigklMf669ZqIw9t95g0Ipzu9rMYUqcZpANlCvyaIAeBlJGcsv+2CewlqgwuC6BL9EAURLJ8Ux5WlBgXg==} resolution: {integrity: sha512-9qXi433ISGgneBL5D/YpVvcVRqY3EvDnoTnTD6Y16QeBulcS4u3zHrPlJ0K0iKtAUKnfsTzUppud10GWwkm1QQ==}
dependencies: dependencies:
type-fest: 4.3.2 type-fest: 4.8.3
vee-validate: 4.11.8(vue@3.3.7) vee-validate: 4.12.3(vue@3.3.7)
zod: 3.22.4 zod: 3.22.4
transitivePeerDependencies: transitivePeerDependencies:
- vue - vue
@ -4487,13 +4487,8 @@ packages:
'@vue/compiler-dom': 3.3.9 '@vue/compiler-dom': 3.3.9
'@vue/shared': 3.3.9 '@vue/shared': 3.3.9
/@vue/devtools-api@6.5.0:
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
dev: false
/@vue/devtools-api@6.5.1: /@vue/devtools-api@6.5.1:
resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==} resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
dev: true
/@vue/language-core@1.8.22(typescript@5.2.2): /@vue/language-core@1.8.22(typescript@5.2.2):
resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==} resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==}
@ -12635,6 +12630,11 @@ packages:
resolution: {integrity: sha512-VpwuOgnTsQUUWi0id8Hl4/xiQ+OoaeJGe8dnFjzubJYe/lOc2/d1Qx/d3FqWR0FlpOG/cvukAXfB12A49Y4iiA==} resolution: {integrity: sha512-VpwuOgnTsQUUWi0id8Hl4/xiQ+OoaeJGe8dnFjzubJYe/lOc2/d1Qx/d3FqWR0FlpOG/cvukAXfB12A49Y4iiA==}
engines: {node: '>=16'} engines: {node: '>=16'}
/type-fest@4.8.3:
resolution: {integrity: sha512-//BaTm14Q/gHBn09xlnKNqfI8t6bmdzx2DXYfPBNofN0WUybCEUDcbCWcTa0oF09lzLjZgPphXAsvRiMK0V6Bw==}
engines: {node: '>=16'}
dev: false
/typedarray@0.0.6: /typedarray@0.0.6:
resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
dev: false dev: false
@ -13113,13 +13113,13 @@ packages:
builtins: 5.0.1 builtins: 5.0.1
dev: true dev: true
/vee-validate@4.11.8(vue@3.3.7): /vee-validate@4.12.3(vue@3.3.7):
resolution: {integrity: sha512-ZuVpw0axWYBM3aVTD/bm94hcWHumqeUgNjptOqfBT0gyqyHaGYCrm0tSD/0bygEbWUDwEPJOQaEKaUGM82j8TQ==} resolution: {integrity: sha512-+ux21pFm2beGK21Q8LFDJdYqCu/7yd0HDIGolNvr7GjjlBTrK0JXm2y+h01jssyIlT1/+sSTNwAEqlSs0Nz0QA==}
peerDependencies: peerDependencies:
vue: ^3.3.4 vue: ^3.3.11
dependencies: dependencies:
'@vue/devtools-api': 6.5.0 '@vue/devtools-api': 6.5.1
type-fest: 4.3.2 type-fest: 4.8.3
vue: 3.3.7(typescript@5.2.2) vue: 3.3.7(typescript@5.2.2)
dev: false dev: false