chore: update AppearanceForm.vue

update pnpm and some deps -_-

apps/www/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
-    "@tanstack/vue-table": "^8.10.1",
+    "@tanstack/vue-table": "^8.10.3",
     "@unovis/ts": "^1.2.1",
     "@unovis/vue": "1.3.0-alpha.3",
     "@vee-validate/zod": "^4.11.7",
@@ -51,7 +51,7 @@
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.17.0",
     "vite": "^4.4.9",
-    "vitepress": "^1.0.0-rc.13",
+    "vitepress": "^1.0.0-rc.20",
-    "vue-tsc": "^1.8.13"
+    "vue-tsc": "^1.8.15"
   }
 }

apps/www/src/examples/forms/components/AppearanceForm.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 import { cn } from '@/lib/utils'
 
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
 import {
@@ -16,12 +18,7 @@ import {
 } from '@/lib/registry/new-york/ui/select'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
-const appearenceForm = ref({
+const appearanceFormSchema = toTypedSchema(z.object({
-  theme: 'light',
-  font: '',
-})
-
-const appearanceFormSchema = z.object({
   theme: z.enum(['light', 'dark'], {
     required_error: 'Please select a theme.',
   }),
@@ -29,21 +26,19 @@ const appearanceFormSchema = z.object({
     invalid_type_error: 'Select a font',
     required_error: 'Please select a font.',
   }),
+}))
+
+const { handleSubmit, resetForm } = useForm({
+  validationSchema: appearanceFormSchema,
+  initialValues: {
+    theme: 'dark',
+    font: 'inter',
+  },
 })
 
-type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
+const onSubmit = handleSubmit((values, { resetForm }) => {
-const errors = ref<z.ZodFormattedError<AppearanceFormValues> | null>(null)
+  console.log(values)
-
+})
-async function handleSubmit() {
-  const result = appearanceFormSchema.safeParse(appearenceForm.value)
-  if (!result.success) {
-    errors.value = result.error.format()
-    console.log(errors.value)
-    return
-  }
-
-  console.log('Form submitted!', appearenceForm.value)
-}
 </script>
 
 <template>
@@ -56,13 +51,14 @@ async function handleSubmit() {
     </p>
   </div>
   <Separator />
-  <form class="space-y-8" @submit.prevent="handleSubmit">
+  <form class="space-y-8" @submit="onSubmit">
-    <div class="grid gap-2">
+    <FormField v-slot="{ componentField }" name="font">
-      <Label for="font" :class="cn('text-sm', errors?.font && 'text-destructive')">
+      <FormItem>
-        Font
+        <FormLabel>Email</FormLabel>
-      </Label>
+        <div class="relative w-[200px]">
-      <Select id="font" v-model="appearenceForm.font">
+          <FormControl>
-        <SelectTrigger class="w-[200px]">
+            <Select v-bind="componentField">
+              <SelectTrigger>
                 <SelectValue placeholder="Select a font" />
               </SelectTrigger>
               <SelectContent>
@@ -79,31 +75,33 @@ async function handleSubmit() {
                 </SelectGroup>
               </SelectContent>
             </Select>
-      <span class="text-muted-foreground text-xs">
+          </FormControl>
+        </div>
+        <FormDescription>
           Set the font you want to use in the dashboard.
-      </span>
+        </FormDescription>
-      <div v-if="errors?.font" class="text-sm text-destructive">
+        <FormMessage />
-        <span v-for="error in errors.font._errors" :key="error">{{ error }}</span>
+      </FormItem>
-      </div>
+    </FormField>
-    </div>
 
-    <div class="grid gap-2">
+    <FormField v-slot="{ componentField, value }" type="radio" name="theme">
-      <Label for="theme" :class="cn('text-sm', errors?.theme && 'text-destructive')">
+      <FormItem class-name="space-y-1">
-        Theme
+        <FormLabel>Theme</FormLabel>
-      </Label>
+        <FormDescription>
-      <span class="text-muted-foreground text-xs">
           Select the theme for the dashboard.
-      </span>
+        </FormDescription>
+        <FormMessage />
+
         <RadioGroup
-        v-model="appearenceForm.theme"
-        default-value="light"
           class="grid max-w-md grid-cols-2 gap-8 pt-2"
+          v-bind="componentField"
+          :default-value="value"
         >
-        <div class="grid gap-2">
+          <FormItem>
-          <Label class="[&:has([data-state=checked])>div]:border-primary">
+            <FormLabel class="[&:has([data-state=checked])>div]:border-primary">
-            <div>
+              <FormControl>
                 <RadioGroupItem value="light" class="sr-only" />
-            </div>
+              </FormControl>
               <div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
                 <div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
                   <div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
@@ -123,13 +121,13 @@ async function handleSubmit() {
               <span class="block w-full p-2 text-center font-normal">
                 Light
               </span>
-          </Label>
+            </FormLabel>
-        </div>
+          </FormItem>
-        <div>
+          <FormItem>
-          <Label class="[&:has([data-state=checked])>div]:border-primary">
+            <FormLabel class="[&:has([data-state=checked])>div]:border-primary">
-            <div>
+              <FormControl>
                 <RadioGroupItem value="dark" class="sr-only" />
-            </div>
+              </FormControl>
               <div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                 <div class="space-y-2 rounded-sm bg-slate-950 p-2">
                   <div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
@@ -149,16 +147,11 @@ async function handleSubmit() {
               <span class="block w-full p-2 text-center font-normal">
                 Dark
               </span>
-          </Label>
+            </FormLabel>
-        </div>
+          </FormItem>
-
-        <div class="col-span-2">
-          <span v-if="errors?.theme" class="text-sm text-destructive">
-            <span v-for="error in errors.theme._errors" :key="error">{{ error }}</span>
-          </span>
-        </div>
         </RadioGroup>
-    </div>
+      </FormItem>
+    </FormField>
 
     <div class="flex justify-start">
       <Button type="submit">

apps/www/src/examples/forms/components/ProfileForm.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { FieldArray, useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
+import { Cross1Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 import { Input } from '@/lib/registry/new-york/ui/input'
@@ -123,12 +124,8 @@ const onSubmit = handleSubmit((values, { resetForm }) => {
     </FormField>
 
     <div>
-      <FieldArray v-slot="{ fields, push }" name="urls">
+      <FieldArray v-slot="{ fields, push, remove }" name="urls">
-        <div v-for="(fieldq, index) in fields" :key="`urls-${fieldq.key}`">
+        <div v-for="(field, index) in fields" :key="`urls-${field.key}`">
-          <!-- <button type="button" @click="remove(index)">
-            Remove
-          </button> -->
-
           <FormField v-slot="{ componentField }" :name="`urls[${index}].value`">
             <FormItem>
               <FormLabel :class="cn(index !== 0 && 'sr-only')">
@@ -137,9 +134,14 @@ const onSubmit = handleSubmit((values, { resetForm }) => {
               <FormDescription :class="cn(index !== 0 && 'sr-only')">
                 Add links to your website, blog, or social media profiles.
               </FormDescription>
+              <div class="relative flex items-center">
                 <FormControl>
                   <Input type="url" v-bind="componentField" />
                 </FormControl>
+                <button class="absolute py-2 pe-3 end-0 text-muted-foreground" @click="remove(index)">
+                  <Cross1Icon class="w-3" />
+                </button>
+              </div>
               <FormMessage />
             </FormItem>
           </FormField>

package.json

@@ -2,7 +2,7 @@
   "name": "shadcn-vue",
   "version": "0.2.0",
   "private": true,
-  "packageManager": "pnpm@8.7.6",
+  "packageManager": "pnpm@8.8.0",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
@@ -34,9 +34,9 @@
     "@commitlint/config-conventional": "^17.7.0",
     "eslint": "^8.50.0",
     "lint-staged": "^14.0.1",
-    "pnpm": "^8.7.6",
+    "pnpm": "^8.8.0",
     "simple-git-hooks": "^2.9.0",
-    "taze": "^0.11.2",
+    "taze": "^0.11.3",
     "typescript": "^5.2.2",
     "vitest": "^0.34.4"
   },