diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 9caef3c0..db30a80c 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -12,5 +12,6 @@ module.exports = { 'no-console': 'warn', 'no-tabs': 'off', 'no-invalid-character': 'off', + 'import/first': 'off', }, } diff --git a/apps/www/.vitepress/theme/components/TabPreview.vue b/apps/www/.vitepress/theme/components/TabPreview.vue index 025e1c34..46bb64ee 100644 --- a/apps/www/.vitepress/theme/components/TabPreview.vue +++ b/apps/www/.vitepress/theme/components/TabPreview.vue @@ -3,10 +3,14 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default const props = withDefaults(defineProps<{ name: string + names?: string[] align?: 'center' | 'start' | 'end' sfcTsCode?: string sfcTsHtml?: string -}>(), { align: 'center' }) +}>(), { + align: 'center', + names: () => ['CLI', 'Manual'], +}) ``` - \ No newline at end of file +## Examples + +### Combobox + + + +### Popover + + + +### Dropdown menu + + + +### Form + + diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md index 4acfd90b..43aef149 100644 --- a/apps/www/src/content/docs/components/date-picker.md +++ b/apps/www/src/content/docs/components/date-picker.md @@ -56,12 +56,18 @@ const date = ref() ## Examples -### Date Range Picker - - - - ### Date Picker + - \ No newline at end of file +### Date Range Picker + + + +### With Presets + + + +### Form + + diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md new file mode 100644 index 00000000..4721788b --- /dev/null +++ b/apps/www/src/content/docs/components/form.md @@ -0,0 +1,331 @@ +--- +title: VeeValidate +description: Building forms with VeeValidate and Zod. +--- + +Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex. + +Well-designed HTML forms are: + +- Well-structured and semantically correct. +- Easy to use and navigate (keyboard). +- Accessible with ARIA attributes and proper labels. +- Has support for client and server side validation. +- Well-styled and consistent with the rest of the application. + +In this guide, we will take a look at building forms with [`vee-validate`](https://vee-validate.logaretm.com/v4/) and [`zod`](https://zod.dev). We're going to use a `` component to compose accessible forms using Radix Vue components. + + +## Features + +The `
` component is a wrapper around the `vee-validate` library. It provides a few things: + + +- Composable components for building forms. +- A `` component for building controlled form fields. +- Form validation using `zod`. +- Applies the correct `aria` attributes to form fields based on states, handle unqiue IDs +- Built to work with all Radix Vue components. +- Bring your own schema library. We use `zod` but you can use any other supported schema validation you want, like [`yup`](https://github.com/jquense/yup) or [`valibot`](https://valibot.dev/). +- **You have full control over the markup and styling.** + +[`vee-validate`](https://vee-validate.logaretm.com/v4/) makes use of two flavors to add validation to your forms. +- Composition API +- Higher-order components (HOC) + +## Anatomy + +```vue + + + + + + + + + + + + +``` + +## Example + + + + + + + + +## Installation + + + + + + + +## Usage + + + +### Create a form schema + +Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev). + +Use `@vee-validate/zod` to integrate Zod schema validation with `vee-validate` + +`toTypedSchema` also makes the form values and submitted values typed automatically and caters for both input and output types of that schema. + +```vue showLineNumbers {2-3,5-7} + +``` + + +### Define a form + +Use the `useForm` composable from `vee-validate` or use `
` component to create a from. + + + + + + + + +### Build your form + +Based on last step we can either use `` component or `useForm` composable +`useForm` is recommended cause values are typed automatically + +```vue showLineNumbers {2} + + + +``` + +### Done + +That's it. You now have a fully accessible form that is type-safe with client-side validation. + + + + + +## Examples + +See the following links for more examples on how to use the `vee-validate` features with other components: + +- [Checkbox](/docs/components/checkbox#form) +- [Date Picker](/docs/components/date-picker#form) +- [Input](/docs/components/input#form) +- [Radio Group](/docs/components/radio-group#form) +- [Select](/docs/components/select#form) +- [Switch](/docs/components/switch#form) +- [Textarea](/docs/components/textarea#form) +- [Combobox](/docs/components/combobox#form) diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md index bfa96c75..6c120676 100644 --- a/apps/www/src/content/docs/components/input.md +++ b/apps/www/src/content/docs/components/input.md @@ -41,4 +41,28 @@ import { Input } from '@/components/ui/input' -``` \ No newline at end of file +``` + +### Default + + + +### File + + + +### Disabled + + + +### With Label + + + +### With Button + + + +### Form + + diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md index a2b9a762..d7db0bc9 100644 --- a/apps/www/src/content/docs/components/radio-group.md +++ b/apps/www/src/content/docs/components/radio-group.md @@ -34,4 +34,10 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' -``` \ No newline at end of file +``` + +## Examples + +### Form + + diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md index d653bf0a..caae327d 100644 --- a/apps/www/src/content/docs/components/select.md +++ b/apps/www/src/content/docs/components/select.md @@ -46,3 +46,9 @@ import { ``` + +## Examples + +### Form + + diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md index ccb8c1ad..a359a4df 100644 --- a/apps/www/src/content/docs/components/switch.md +++ b/apps/www/src/content/docs/components/switch.md @@ -47,4 +47,10 @@ import { Switch } from '@/components/ui/switch' -``` \ No newline at end of file +``` + +## Examples + +### Form + + diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md index 39229b03..24b31da8 100644 --- a/apps/www/src/content/docs/components/textarea.md +++ b/apps/www/src/content/docs/components/textarea.md @@ -45,4 +45,30 @@ import { Textarea } from '@/components/ui/textarea'