chore: fix StepperForm and NumberFieldForm examples
update deps
This commit is contained in:
sadeghbarati
parent
0d5d2d0d10
commit
02c4c14d69
|
|
@ -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-vue": "^8.1.7",
|
||||
"lucide-vue-next": "^0.416.0",
|
||||
"magic-string": "^0.30.10",
|
||||
"embla-carousel-autoplay": "^8.1.8",
|
||||
"embla-carousel-vue": "^8.1.8",
|
||||
"lucide-vue-next": "^0.427.0",
|
||||
"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",
|
||||
"@vitejs/plugin-vue": "^5.1.0",
|
||||
"@types/node": "^20.14.15",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
||||
"@vue/compiler-core": "^3.4.34",
|
||||
"@vue/compiler-dom": "^3.4.34",
|
||||
"@vue/compiler-core": "^3.4.37",
|
||||
"@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",
|
||||
"tailwind-merge": "^2.4.0",
|
||||
"tailwindcss": "^3.4.7",
|
||||
"tsx": "^4.16.2",
|
||||
"shiki": "^1.12.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"tsx": "^4.17.0",
|
||||
"typescript": "^5.5.3",
|
||||
"unplugin-icons": "^0.19.0",
|
||||
"vitepress": "^1.3.1",
|
||||
"unplugin-icons": "^0.19.2",
|
||||
"vitepress": "^1.3.2",
|
||||
"vue-component-meta": "^2.0.29",
|
||||
"vue-tsc": "^2.0.29"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 { get, set } from '@vueuse/core'
|
||||
import { h, ref } from 'vue'
|
||||
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,151 +71,153 @@ function onSubmit(values: any) {
|
|||
v-slot="{ meta, values, validate }"
|
||||
as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
|
||||
>
|
||||
<form
|
||||
@submit="(e) => {
|
||||
e.preventDefault()
|
||||
validate()
|
||||
<Stepper v-slot="{ isNextDisabled, isPrevDisabled, nextStep, prevStep }" v-model="stepIndex" class="block w-full">
|
||||
<form
|
||||
@submit="(e) => {
|
||||
e.preventDefault()
|
||||
validate()
|
||||
|
||||
if (stepIndex === steps.length) {
|
||||
onSubmit(values)
|
||||
}
|
||||
}"
|
||||
>
|
||||
<Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
|
||||
<StepperItem
|
||||
v-for="step in steps"
|
||||
:key="step.step"
|
||||
v-slot="{ state }"
|
||||
class="relative flex w-full flex-col items-center justify-center"
|
||||
:step="step.step"
|
||||
>
|
||||
<StepperSeparator
|
||||
v-if="step.step !== steps[steps.length - 1].step"
|
||||
class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
|
||||
/>
|
||||
|
||||
<StepperTrigger as-child>
|
||||
<Button
|
||||
:variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
|
||||
size="icon"
|
||||
class="z-10 rounded-full shrink-0"
|
||||
:class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
|
||||
:disabled="state !== 'completed' && !meta.valid"
|
||||
>
|
||||
<Check v-if="state === 'completed'" class="size-5" />
|
||||
<Circle v-if="state === 'active'" />
|
||||
<Dot v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="mt-5 flex flex-col items-center text-center">
|
||||
<StepperTitle
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="text-sm font-semibold transition lg:text-base"
|
||||
>
|
||||
{{ step.title }}
|
||||
</StepperTitle>
|
||||
<StepperDescription
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
|
||||
>
|
||||
{{ step.description }}
|
||||
</StepperDescription>
|
||||
</div>
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
<div class="flex flex-col gap-4 mt-4">
|
||||
<template v-if="stepIndex === 1">
|
||||
<FormField v-slot="{ componentField }" name="fullName">
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="email">
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email " v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 2">
|
||||
<FormField v-slot="{ componentField }" name="password">
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="confirmPassword">
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 3">
|
||||
<FormField v-slot="{ componentField }" name="favoriteDrink">
|
||||
<FormItem>
|
||||
<FormLabel>Drink</FormLabel>
|
||||
|
||||
<Select v-bind="componentField">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a drink" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="coffee">
|
||||
Coffe
|
||||
</SelectItem>
|
||||
<SelectItem value="tea">
|
||||
Tea
|
||||
</SelectItem>
|
||||
<SelectItem value="soda">
|
||||
Soda
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<Button :disabled="!canGoBack" variant="outline" size="sm" @click="goBack">
|
||||
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()">
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
v-if="stepIndex === 3" size="sm" type="submit"
|
||||
if (stepIndex === steps.length && meta.valid) {
|
||||
onSubmit(values)
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div class="flex w-full flex-start gap-2">
|
||||
<StepperItem
|
||||
v-for="step in steps"
|
||||
:key="step.step"
|
||||
v-slot="{ state }"
|
||||
class="relative flex w-full flex-col items-center justify-center"
|
||||
:step="step.step"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
<StepperSeparator
|
||||
v-if="step.step !== steps[steps.length - 1].step"
|
||||
class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
|
||||
/>
|
||||
|
||||
<StepperTrigger as-child>
|
||||
<Button
|
||||
:variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
|
||||
size="icon"
|
||||
class="z-10 rounded-full shrink-0"
|
||||
:class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
|
||||
:disabled="state !== 'completed' && !meta.valid"
|
||||
>
|
||||
<Check v-if="state === 'completed'" class="size-5" />
|
||||
<Circle v-if="state === 'active'" />
|
||||
<Dot v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="mt-5 flex flex-col items-center text-center">
|
||||
<StepperTitle
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="text-sm font-semibold transition lg:text-base"
|
||||
>
|
||||
{{ step.title }}
|
||||
</StepperTitle>
|
||||
<StepperDescription
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
|
||||
>
|
||||
{{ step.description }}
|
||||
</StepperDescription>
|
||||
</div>
|
||||
</StepperItem>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col gap-4 mt-4">
|
||||
<template v-if="stepIndex === 1">
|
||||
<FormField v-slot="{ componentField }" name="fullName">
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="email">
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email " v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 2">
|
||||
<FormField v-slot="{ componentField }" name="password">
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="confirmPassword">
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 3">
|
||||
<FormField v-slot="{ componentField }" name="favoriteDrink">
|
||||
<FormItem>
|
||||
<FormLabel>Drink</FormLabel>
|
||||
|
||||
<Select v-bind="componentField">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a drink" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="coffee">
|
||||
Coffe
|
||||
</SelectItem>
|
||||
<SelectItem value="tea">
|
||||
Tea
|
||||
</SelectItem>
|
||||
<SelectItem value="soda">
|
||||
Soda
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<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="isNextDisabled" size="sm" @click="meta.valid && nextStep()">
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
v-if="stepIndex === 3" size="sm" type="submit"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Stepper>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 { get, set } from '@vueuse/core'
|
||||
import { h, ref } from 'vue'
|
||||
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,151 +71,153 @@ function onSubmit(values: any) {
|
|||
v-slot="{ meta, values, validate }"
|
||||
as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
|
||||
>
|
||||
<form
|
||||
@submit="(e) => {
|
||||
e.preventDefault()
|
||||
validate()
|
||||
<Stepper v-slot="{ isNextDisabled, isPrevDisabled, nextStep, prevStep }" v-model="stepIndex" class="block w-full">
|
||||
<form
|
||||
@submit="(e) => {
|
||||
e.preventDefault()
|
||||
validate()
|
||||
|
||||
if (stepIndex === steps.length) {
|
||||
onSubmit(values)
|
||||
}
|
||||
}"
|
||||
>
|
||||
<Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
|
||||
<StepperItem
|
||||
v-for="step in steps"
|
||||
:key="step.step"
|
||||
v-slot="{ state }"
|
||||
class="relative flex w-full flex-col items-center justify-center"
|
||||
:step="step.step"
|
||||
>
|
||||
<StepperSeparator
|
||||
v-if="step.step !== steps[steps.length - 1].step"
|
||||
class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
|
||||
/>
|
||||
|
||||
<StepperTrigger as-child>
|
||||
<Button
|
||||
:variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
|
||||
size="icon"
|
||||
class="z-10 rounded-full shrink-0"
|
||||
: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" />
|
||||
<CircleIcon v-if="state === 'active'" />
|
||||
<DotIcon v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="mt-5 flex flex-col items-center text-center">
|
||||
<StepperTitle
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="text-sm font-semibold transition lg:text-base"
|
||||
>
|
||||
{{ step.title }}
|
||||
</StepperTitle>
|
||||
<StepperDescription
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
|
||||
>
|
||||
{{ step.description }}
|
||||
</StepperDescription>
|
||||
</div>
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
<div class="flex flex-col gap-4 mt-4">
|
||||
<template v-if="stepIndex === 1">
|
||||
<FormField v-slot="{ componentField }" name="fullName">
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="email">
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email " v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 2">
|
||||
<FormField v-slot="{ componentField }" name="password">
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="confirmPassword">
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 3">
|
||||
<FormField v-slot="{ componentField }" name="favoriteDrink">
|
||||
<FormItem>
|
||||
<FormLabel>Drink</FormLabel>
|
||||
|
||||
<Select v-bind="componentField">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a drink" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="coffee">
|
||||
Coffe
|
||||
</SelectItem>
|
||||
<SelectItem value="tea">
|
||||
Tea
|
||||
</SelectItem>
|
||||
<SelectItem value="soda">
|
||||
Soda
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<Button :disabled="!canGoBack" variant="outline" size="sm" @click="goBack">
|
||||
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()">
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
v-if="stepIndex === 3" size="sm" type="submit"
|
||||
if (stepIndex === steps.length && meta.valid) {
|
||||
onSubmit(values)
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div class="flex w-full flex-start gap-2">
|
||||
<StepperItem
|
||||
v-for="step in steps"
|
||||
:key="step.step"
|
||||
v-slot="{ state }"
|
||||
class="relative flex w-full flex-col items-center justify-center"
|
||||
:step="step.step"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
<StepperSeparator
|
||||
v-if="step.step !== steps[steps.length - 1].step"
|
||||
class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
|
||||
/>
|
||||
|
||||
<StepperTrigger as-child>
|
||||
<Button
|
||||
:variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
|
||||
size="icon"
|
||||
class="z-10 rounded-full shrink-0"
|
||||
:class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
|
||||
:disabled="state !== 'completed' && !meta.valid"
|
||||
>
|
||||
<Check v-if="state === 'completed'" class="size-5" />
|
||||
<Circle v-if="state === 'active'" />
|
||||
<Dot v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="mt-5 flex flex-col items-center text-center">
|
||||
<StepperTitle
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="text-sm font-semibold transition lg:text-base"
|
||||
>
|
||||
{{ step.title }}
|
||||
</StepperTitle>
|
||||
<StepperDescription
|
||||
:class="[state === 'active' && 'text-primary']"
|
||||
class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
|
||||
>
|
||||
{{ step.description }}
|
||||
</StepperDescription>
|
||||
</div>
|
||||
</StepperItem>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col gap-4 mt-4">
|
||||
<template v-if="stepIndex === 1">
|
||||
<FormField v-slot="{ componentField }" name="fullName">
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="email">
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email " v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 2">
|
||||
<FormField v-slot="{ componentField }" name="password">
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="confirmPassword">
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
|
||||
<template v-if="stepIndex === 3">
|
||||
<FormField v-slot="{ componentField }" name="favoriteDrink">
|
||||
<FormItem>
|
||||
<FormLabel>Drink</FormLabel>
|
||||
|
||||
<Select v-bind="componentField">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a drink" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="coffee">
|
||||
Coffe
|
||||
</SelectItem>
|
||||
<SelectItem value="tea">
|
||||
Tea
|
||||
</SelectItem>
|
||||
<SelectItem value="soda">
|
||||
Soda
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<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="isNextDisabled" size="sm" @click="meta.valid && nextStep()">
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
v-if="stepIndex === 3" size="sm" type="submit"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Stepper>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
|
|||
26
package.json
26
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",
|
||||
"@commitlint/cli": "^19.3.0",
|
||||
"@antfu/eslint-config": "^2.25.1",
|
||||
"@commitlint/cli": "^19.4.0",
|
||||
"@commitlint/config-conventional": "^19.2.2",
|
||||
"@vitest/ui": "^2.0.4",
|
||||
"bumpp": "^9.4.1",
|
||||
"eslint": "^9.7.0",
|
||||
"lint-staged": "^15.2.7",
|
||||
"@vitest/ui": "^2.0.5",
|
||||
"bumpp": "^9.5.1",
|
||||
"eslint": "^9.9.0",
|
||||
"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",
|
||||
"is-core-module": "npm:@nolyfill/is-core-module@^1",
|
||||
"isarray": "npm:@nolyfill/isarray@^1",
|
||||
"typedarray": "npm:@nolyfill/typedarray@^1"
|
||||
"hasown": "npm:@nolyfill/hasown@^1.0.29",
|
||||
"is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
|
||||
"isarray": "npm:@nolyfill/isarray@^1.0.29",
|
||||
"typedarray": "npm:@nolyfill/typedarray@^1.0.29"
|
||||
}
|
||||
},
|
||||
"simple-git-hooks": {
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
"vitest": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.24.9",
|
||||
"@babel/parser": "^7.24.8",
|
||||
"@babel/core": "^7.25.2",
|
||||
"@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",
|
||||
"type-fest": "^4.23.0",
|
||||
"tsup": "^8.2.4",
|
||||
"type-fest": "^4.24.0",
|
||||
"typescript": "^5.5.3",
|
||||
"vite-tsconfig-paths": "^4.3.2"
|
||||
"vite-tsconfig-paths": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/module-builder": "^0.8.1",
|
||||
"@nuxt/eslint-config": "^0.5.0",
|
||||
"@nuxt/module-builder": "^0.8.2",
|
||||
"@nuxt/schema": "^3.12.4",
|
||||
"@nuxt/test-utils": "^3.13.1",
|
||||
"@types/node": "^20.14.12",
|
||||
"@nuxt/test-utils": "^3.14.0",
|
||||
"@types/node": "^20.14.15",
|
||||
"nuxt": "^3.12.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3738
pnpm-lock.yaml
3738
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -2,6 +2,6 @@ packages:
|
|||
- apps/*
|
||||
- packages/*
|
||||
catalog:
|
||||
'@oxc-parser/wasm': ^0.22.0
|
||||
radix-vue: ^1.9.2
|
||||
'@oxc-parser/wasm': ^0.24.2
|
||||
radix-vue: ^1.9.4
|
||||
zod: ^3.23.8
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user