feat: add vee-validate (#85)

* feat: add `vee-validate`

* chore: update

* chore: update `AccountForm` example

- add `FormDescription` component
- include `src` in tsconfig

* refactor: use radix-vue `Slot` component

* chore: refresh lockfile

* chore: update `ProfileForm.vue` and `AccountForm`

fix vee-validate initialValues on components with `componentField` slotProp

* chore: update `AppearanceForm.vue`

update pnpm and some deps -_-

* refactor: update

- add new-york style
- off eslint import/first rule
- use `useId` from radix-vue

* fix: class-name -> class

* refactor: simplify validation for `Command` component

* fix: v-bind="field" -> v-bind="componentField"

* fix: useAttrs to prevent class duplication

* docs: add `form.md`

- change TabPreview.vue to showcase way of using vee-validate

* docs: add form example for `checkbox` `input` and `datepicker`

* docs: add `combobox`, `datepicker`, `radio-group`, `select`, `switch` and `textarea` form and some other exmaples

* chore: typo, update `zod`, `vite`, and `@vitejs/plugin-vue`

.eslintrc.cjs

@@ -12,5 +12,6 @@ module.exports = {
     'no-console': 'warn',
     'no-tabs': 'off',
     'no-invalid-character': 'off',
+    'import/first': 'off',
   },
 }

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'],
+})
 </script>
 
 <template>
@@ -15,24 +19,17 @@ const props = withDefaults(defineProps<{
       <div class="flex items-center justify-between pb-3">
         <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
           <TabsTrigger
-            value="CLI"
+            v-for="(tab, index) in props.names"
+            :key="index"
+            :value="tab"
             class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
           >
-            CLI
-          </TabsTrigger>
-          <TabsTrigger
-            value="Manual"
-            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-          >
-            Manual
+            {{ tab }}
           </TabsTrigger>
         </TabsList>
       </div>
-      <TabsContent value="CLI" class="relative space-y-10">
-        <slot name="CLI" />
-      </TabsContent>
-      <TabsContent value="Manual">
-        <slot name="Manual" />
+      <TabsContent v-for="(tab, index) in props.names" :key="index" :value="tab" class="relative space-y-10">
+        <slot :name="tab" />
       </TabsContent>
     </Tabs>
   </div>

apps/www/.vitepress/theme/config/docs.ts

@@ -217,9 +217,8 @@ export const docsConfig: DocsConfig = {
         },
         {
           title: 'Form',
-          href: '#',
-          label: 'Soon',
-          disabled: true,
+          href: '/docs/components/form',
+          label: 'New',
           items: [],
         },
         {
@@ -352,10 +351,10 @@ export const examples: Example[] = [
     code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
   },
   // {
-  // 	name: "Tasks",
-  // 	href: "/examples/tasks",
-  // 	label: "New",
-  // 	code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
+  // name: "Tasks",
+  // href: "/examples/tasks",
+  // label: "New",
+  // code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
   // },
   {
     name: 'Playground',

apps/www/package.json

@@ -14,19 +14,21 @@
   "dependencies": {
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
-    "@tanstack/vue-table": "^8.9.9",
+    "@tanstack/vue-table": "^8.10.3",
     "@unovis/ts": "^1.2.1",
     "@unovis/vue": "1.3.0-alpha.3",
+    "@vee-validate/zod": "^4.11.7",
     "@vueuse/core": "^10.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "lucide-vue-next": "^0.276.0",
     "tailwindcss-animate": "^1.0.7",
-    "v-calendar": "^3.0.3",
+    "v-calendar": "^3.1.0",
+    "vee-validate": "4.11.7",
     "vue": "^3.3.4",
     "vue-wrap-balancer": "^1.1.3",
-    "zod": "^3.22.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@iconify-json/radix-icons": "^1.1.11",
@@ -35,21 +37,21 @@
     "@iconify/vue": "^4.1.1",
     "@types/lodash.template": "^4.5.1",
     "@types/node": "^20.6.0",
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue": "^4.4.0",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-core": "^3.3.4",
     "@vue/compiler-dom": "^3.3.4",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "radix-vue": "^0.4.1",
     "rimraf": "^5.0.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
-    "tsx": "^3.12.10",
+    "tsx": "^3.13.0",
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.17.0",
-    "vite": "^4.4.9",
-    "vitepress": "^1.0.0-rc.13",
-    "vue-tsc": "^1.8.11"
+    "vite": "^4.4.11",
+    "vitepress": "^1.0.0-rc.20",
+    "vue-tsc": "^1.8.15"
   }
 }

apps/www/src/content/docs/components/checkbox.md

@@ -30,6 +30,16 @@ import { Checkbox } from '@/components/ui/checkbox'
 
 ## Examples
 
+### With text
+
+<ComponentPreview name="CheckboxWithText" />
+
 ### Disabled
 
-<ComponentPreview name="CheckboxDisabled"  /> 
+<ComponentPreview name="CheckboxDisabled"  />
+
+### Form
+
+<ComponentPreview name="CheckboxFormSingle" />
+
+<ComponentPreview name="CheckboxFormMultiple" />

apps/www/src/content/docs/components/combobox.md

@@ -86,4 +86,20 @@ const value = ref({})
 </template>
 ```
 
-
+## Examples
+
+### Combobox
+
+<ComponentPreview name="ComboboxDemo" />
+
+### Popover
+
+<ComponentPreview name="ComboboxPopover" />
+
+### Dropdown menu
+
+<ComponentPreview name="ComboboxDropdownMenu" />
+
+### Form
+
+<ComponentPreview name="ComboboxForm" />

apps/www/src/content/docs/components/date-picker.md

@@ -56,12 +56,18 @@ const date = ref<Date>()
 
 ## Examples
 
+### Date Picker
+
+<ComponentPreview name="DatePickerDemo"  />
+
 ### Date Range Picker
 
-<ComponentPreview name="DatePickerWithRange"  /> 
+<ComponentPreview name="DatePickerWithRange"  />
 
+### With Presets
 
-### Date Picker
+<ComponentPreview name="DatePickerWithPresets"  />
 
+### Form
 
-<ComponentPreview name="DatePickerDemo"  />
+<ComponentPreview name="DatePickerForm"  />