chore: fix StepperForm and NumberFieldForm examples

update deps

apps/www/package.json

@@ -20,31 +20,31 @@
     "@internationalized/date": "^3.5.5",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@tanstack/vue-table": "^8.19.3",
+    "@tanstack/vue-table": "^8.20.4",
     "@unovis/ts": "^1.4.3",
     "@unovis/vue": "^1.4.3",
     "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "^8.1.7",
+    "embla-carousel-autoplay": "^8.1.8",
-    "embla-carousel-vue": "^8.1.7",
+    "embla-carousel-vue": "^8.1.8",
-    "lucide-vue-next": "^0.416.0",
+    "lucide-vue-next": "^0.427.0",
-    "magic-string": "^0.30.10",
+    "magic-string": "^0.30.11",
     "radix-vue": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
-    "vue": "^3.4.34",
+    "vue": "^3.4.37",
     "vue-sonner": "^1.1.4",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "catalog:"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.24.8",
+    "@babel/traverse": "^7.25.3",
     "@iconify-json/gravity-ui": "^1.1.3",
     "@iconify-json/lucide": "^1.1.198",
     "@iconify-json/ph": "^1.1.13",
@@ -54,27 +54,27 @@
     "@iconify-json/tabler": "^1.1.116",
     "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.11.1",
+    "@shikijs/transformers": "^1.12.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.15",
-    "@vitejs/plugin-vue": "^5.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vue/compiler-core": "^3.4.34",
+    "@vue/compiler-core": "^3.4.37",
-    "@vue/compiler-dom": "^3.4.34",
+    "@vue/compiler-dom": "^3.4.37",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "fast-glob": "^3.3.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^6.0.1",
-    "shiki": "^1.11.1",
+    "shiki": "^1.12.1",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.9",
-    "tsx": "^4.16.2",
+    "tsx": "^4.17.0",
     "typescript": "^5.5.3",
-    "unplugin-icons": "^0.19.0",
+    "unplugin-icons": "^0.19.2",
-    "vitepress": "^1.3.1",
+    "vitepress": "^1.3.2",
     "vue-component-meta": "^2.0.29",
     "vue-tsc": "^2.0.29"
   }

apps/www/src/lib/registry/default/example/NumberFieldForm.vue

@@ -43,7 +43,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField name="payment">
+    <FormField v-slot="{ value }" name="payment">
       <FormItem>
         <FormLabel>Payment</FormLabel>
         <NumberField
@@ -55,6 +55,7 @@ const onSubmit = handleSubmit((values) => {
             currencyDisplay: 'code',
             currencySign: 'accounting',
           }"
+          :model-value="value"
           @update:model-value="(v) => {
             if (v) {
               setFieldValue('payment', v)

apps/www/src/lib/registry/default/example/StepperForm.vue

@@ -2,8 +2,7 @@
 import { Check, Circle, Dot } from 'lucide-vue-next'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { computed, h, ref } from 'vue'
+import { h, ref } from 'vue'
-import { get, set } from '@vueuse/core'
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
 import {
@@ -59,19 +58,6 @@ const steps = [
   },
 ]
 
-const canGoNext = computed(() => stepIndex.value < steps.length)
-const canGoBack = computed(() => stepIndex.value > 1)
-function goNext() {
-  if (get(canGoNext)) {
-    set(stepIndex, stepIndex.value + 1)
-  }
-}
-function goBack() {
-  if (get(canGoBack)) {
-    set(stepIndex, stepIndex.value - 1)
-  }
-}
-
 function onSubmit(values: any) {
   toast({
     title: 'You submitted the following values:',
@@ -85,17 +71,18 @@ function onSubmit(values: any) {
     v-slot="{ meta, values, validate }"
     as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
   >
+    <Stepper v-slot="{ isNextDisabled, isPrevDisabled, nextStep, prevStep }" v-model="stepIndex" class="block w-full">
       <form
         @submit="(e) => {
           e.preventDefault()
           validate()
 
-        if (stepIndex === steps.length) {
+          if (stepIndex === steps.length && meta.valid) {
             onSubmit(values)
           }
         }"
       >
-      <Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
+        <div class="flex w-full flex-start gap-2">
           <StepperItem
             v-for="step in steps"
             :key="step.step"
@@ -137,7 +124,7 @@ function onSubmit(values: any) {
               </StepperDescription>
             </div>
           </StepperItem>
-      </Stepper>
+        </div>
 
         <div class="flex flex-col gap-4 mt-4">
           <template v-if="stepIndex === 1">
@@ -216,11 +203,11 @@ function onSubmit(values: any) {
         </div>
 
         <div class="flex items-center justify-between mt-4">
-        <Button :disabled="!canGoBack" variant="outline" size="sm" @click="goBack">
+          <Button :disabled="isPrevDisabled" variant="outline" size="sm" @click="prevStep()">
             Back
           </Button>
           <div class="flex items-center gap-3">
-          <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="!canGoNext" size="sm" @click="meta.valid && goNext()">
+            <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="isNextDisabled" size="sm" @click="meta.valid && nextStep()">
               Next
             </Button>
             <Button
@@ -231,5 +218,6 @@ function onSubmit(values: any) {
           </div>
         </div>
       </form>
+    </Stepper>
   </Form>
 </template>

apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue

@@ -43,7 +43,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField name="payment">
+    <FormField v-slot="{ value }" name="payment">
       <FormItem>
         <FormLabel>Payment</FormLabel>
         <NumberField
@@ -55,6 +55,7 @@ const onSubmit = handleSubmit((values) => {
             currencyDisplay: 'code',
             currencySign: 'accounting',
           }"
+          :model-value="value"
           @update:model-value="(v) => {
             if (v) {
               setFieldValue('payment', v)

apps/www/src/lib/registry/new-york/example/StepperForm.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { Check, Circle, Dot } from 'lucide-vue-next'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
-import { computed, h, ref } from 'vue'
+import { h, ref } from 'vue'
-import { get, set } from '@vueuse/core'
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
 import {
@@ -59,19 +58,6 @@ const steps = [
   },
 ]
 
-const canGoNext = computed(() => stepIndex.value < steps.length)
-const canGoBack = computed(() => stepIndex.value > 1)
-function goNext() {
-  if (get(canGoNext)) {
-    set(stepIndex, stepIndex.value + 1)
-  }
-}
-function goBack() {
-  if (get(canGoBack)) {
-    set(stepIndex, stepIndex.value - 1)
-  }
-}
-
 function onSubmit(values: any) {
   toast({
     title: 'You submitted the following values:',
@@ -85,17 +71,18 @@ function onSubmit(values: any) {
     v-slot="{ meta, values, validate }"
     as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
   >
+    <Stepper v-slot="{ isNextDisabled, isPrevDisabled, nextStep, prevStep }" v-model="stepIndex" class="block w-full">
       <form
         @submit="(e) => {
           e.preventDefault()
           validate()
 
-        if (stepIndex === steps.length) {
+          if (stepIndex === steps.length && meta.valid) {
             onSubmit(values)
           }
         }"
       >
-      <Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
+        <div class="flex w-full flex-start gap-2">
           <StepperItem
             v-for="step in steps"
             :key="step.step"
@@ -116,9 +103,9 @@ function onSubmit(values: any) {
                 :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
                 :disabled="state !== 'completed' && !meta.valid"
               >
-              <CheckIcon v-if="state === 'completed'" class="size-5" />
+                <Check v-if="state === 'completed'" class="size-5" />
-              <CircleIcon v-if="state === 'active'" />
+                <Circle v-if="state === 'active'" />
-              <DotIcon v-if="state === 'inactive'" />
+                <Dot v-if="state === 'inactive'" />
               </Button>
             </StepperTrigger>
 
@@ -137,7 +124,7 @@ function onSubmit(values: any) {
               </StepperDescription>
             </div>
           </StepperItem>
-      </Stepper>
+        </div>
 
         <div class="flex flex-col gap-4 mt-4">
           <template v-if="stepIndex === 1">
@@ -216,11 +203,11 @@ function onSubmit(values: any) {
         </div>
 
         <div class="flex items-center justify-between mt-4">
-        <Button :disabled="!canGoBack" variant="outline" size="sm" @click="goBack">
+          <Button :disabled="isPrevDisabled" variant="outline" size="sm" @click="prevStep()">
             Back
           </Button>
           <div class="flex items-center gap-3">
-          <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="!canGoNext" size="sm" @click="meta.valid && goNext()">
+            <Button v-if="stepIndex !== 3" :type="meta.valid ? 'button' : 'submit'" :disabled="isNextDisabled" size="sm" @click="meta.valid && nextStep()">
               Next
             </Button>
             <Button
@@ -231,5 +218,6 @@ function onSubmit(values: any) {
           </div>
         </div>
       </form>
+    </Stepper>
   </Form>
 </template>

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.10.5",
   "private": true,
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.7.0",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
@@ -31,17 +31,17 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.23.2",
+    "@antfu/eslint-config": "^2.25.1",
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@vitest/ui": "^2.0.4",
+    "@vitest/ui": "^2.0.5",
-    "bumpp": "^9.4.1",
+    "bumpp": "^9.5.1",
-    "eslint": "^9.7.0",
+    "eslint": "^9.9.0",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.16.1",
+    "taze": "^0.16.5",
     "typescript": "^5.5.3",
-    "vitest": "^2.0.4"
+    "vitest": "^2.0.5"
   },
   "commitlint": {
     "extends": [
@@ -50,10 +50,10 @@
   },
   "pnpm": {
     "overrides": {
-      "hasown": "npm:@nolyfill/hasown@^1",
+      "hasown": "npm:@nolyfill/hasown@^1.0.29",
-      "is-core-module": "npm:@nolyfill/is-core-module@^1",
+      "is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
-      "isarray": "npm:@nolyfill/isarray@^1",
+      "isarray": "npm:@nolyfill/isarray@^1.0.29",
-      "typedarray": "npm:@nolyfill/typedarray@^1"
+      "typedarray": "npm:@nolyfill/typedarray@^1.0.29"
     }
   },
   "simple-git-hooks": {

packages/cli/package.json

@@ -50,8 +50,8 @@
     "vitest": "*"
   },
   "dependencies": {
-    "@babel/core": "^7.24.9",
+    "@babel/core": "^7.25.2",
-    "@babel/parser": "^7.24.8",
+    "@babel/parser": "^7.25.3",
     "@vue/compiler-sfc": "^3.4",
     "c12": "^1.11.1",
     "commander": "^12.1.0",
@@ -61,7 +61,7 @@
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.5",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.30.10",
+    "magic-string": "^0.30.11",
     "nypm": "^0.3.9",
     "ofetch": "^1.3.4",
     "ora": "^8.0.1",
@@ -79,11 +79,11 @@
     "@types/diff": "^5.2.1",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.15",
     "@types/prompts": "^2.4.9",
-    "tsup": "^8.2.3",
+    "tsup": "^8.2.4",
-    "type-fest": "^4.23.0",
+    "type-fest": "^4.24.0",
     "typescript": "^5.5.3",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

packages/module/package.json

@@ -38,15 +38,15 @@
     "@nuxt/kit": "^3.12.4",
     "@oxc-parser/wasm": "catalog:",
     "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.8.1",
+    "@nuxt/module-builder": "^0.8.2",
     "@nuxt/schema": "^3.12.4",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/test-utils": "^3.14.0",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.15",
     "nuxt": "^3.12.4"
   }
 }

pnpm-workspace.yaml

@@ -2,6 +2,6 @@ packages:
   - apps/*
   - packages/*
 catalog:
-  '@oxc-parser/wasm': ^0.22.0
+  '@oxc-parser/wasm': ^0.24.2
-  radix-vue: ^1.9.2
+  radix-vue: ^1.9.4
   zod: ^3.23.8