chore: update
This commit is contained in:
Sadegh Barati
parent
1ddf87f656
commit
7c98109e58
|
|
@ -1000,7 +1000,7 @@ export const Index = {
|
||||||
"StepperForm": {
|
"StepperForm": {
|
||||||
name: "StepperForm",
|
name: "StepperForm",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
registryDependencies: ["stepper"],
|
registryDependencies: ["stepper","form","select","input","button","toast"],
|
||||||
component: () => import("../src/lib/registry/default/example/StepperForm.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/default/example/StepperForm.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/default/example/StepperForm.vue"],
|
files: ["../src/lib/registry/default/example/StepperForm.vue"],
|
||||||
},
|
},
|
||||||
|
|
@ -2471,7 +2471,7 @@ export const Index = {
|
||||||
"StepperForm": {
|
"StepperForm": {
|
||||||
name: "StepperForm",
|
name: "StepperForm",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
registryDependencies: ["stepper"],
|
registryDependencies: ["stepper","form","select","input","button","toast"],
|
||||||
component: () => import("../src/lib/registry/new-york/example/StepperForm.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/new-york/example/StepperForm.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/new-york/example/StepperForm.vue"],
|
files: ["../src/lib/registry/new-york/example/StepperForm.vue"],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,46 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
import { Check, Circle, Dot } from 'lucide-vue-next'
|
||||||
|
|
||||||
import { toTypedSchema } from '@vee-validate/zod'
|
import { toTypedSchema } from '@vee-validate/zod'
|
||||||
import * as z from 'zod'
|
import * as z from 'zod'
|
||||||
import { ref } from 'vue'
|
import { computed, h, nextTick, ref } from 'vue'
|
||||||
|
import { get, set } from '@vueuse/core'
|
||||||
import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
|
import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
|
||||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/lib/registry/default/ui/select'
|
||||||
import { Input } from '@/lib/registry/default/ui/input'
|
import { Input } from '@/lib/registry/default/ui/input'
|
||||||
import { Button } from '@/lib/registry/default/ui/button'
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import { toast } from '@/lib/registry/default/ui/toast'
|
||||||
|
|
||||||
const formSchema = [
|
const formSchema = [
|
||||||
z.object({
|
z.object({
|
||||||
username: z.string().min(2).max(50),
|
fullName: z.string(),
|
||||||
|
email: z.string().email(),
|
||||||
}),
|
}),
|
||||||
z.object({
|
z.object({
|
||||||
password: z.string().min(2).max(50),
|
password: z.string().min(2).max(50),
|
||||||
|
confirmPassword: z.string(),
|
||||||
|
}).refine(
|
||||||
|
(values) => {
|
||||||
|
return values.password === values.confirmPassword
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: 'Passwords must match!',
|
||||||
|
path: ['confirmPassword'],
|
||||||
|
},
|
||||||
|
),
|
||||||
|
z.object({
|
||||||
|
favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
|
|
||||||
const stepIndex = ref(1)
|
const stepIndex = ref(1)
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
{
|
{
|
||||||
step: 1,
|
step: 1,
|
||||||
|
|
@ -28,99 +49,190 @@ const steps = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 2,
|
step: 2,
|
||||||
title: 'Company details',
|
title: 'Your password',
|
||||||
description: 'A few details about your company',
|
description: 'Choose a password',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 3,
|
step: 3,
|
||||||
title: 'Invite your team',
|
title: 'Your Favorite Drink',
|
||||||
description: 'Start collaborating with your team',
|
description: 'Choose a drink',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
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:',
|
||||||
|
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Form v-slot="{ meta }" :validation-schema="toTypedSchema(formSchema[stepIndex - 1]) || undefined">
|
<Form
|
||||||
<Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
|
v-slot="{ meta, values, validate }"
|
||||||
<StepperItem
|
as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
|
||||||
v-for="step in steps"
|
>
|
||||||
:key="step.step"
|
<form
|
||||||
v-slot="{ state }"
|
@submit="(e) => {
|
||||||
class="relative flex w-full flex-col items-center justify-center"
|
e.preventDefault()
|
||||||
:step="step.step"
|
nextTick(() => {
|
||||||
>
|
validate()
|
||||||
<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>
|
if (stepIndex === steps.length) {
|
||||||
<Button
|
onSubmit(values)
|
||||||
: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']"
|
<Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
|
||||||
>
|
<StepperItem
|
||||||
<Check v-if="state === 'completed'" class="size-5" />
|
v-for="step in steps"
|
||||||
<Circle v-if="state === 'active'" />
|
:key="step.step"
|
||||||
<Dot v-if="state === 'inactive'" />
|
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',
|
||||||
|
state !== 'completed' && !meta.valid && 'pointer-events-none',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
</StepperTrigger>
|
<Button
|
||||||
|
v-if="stepIndex === 3" size="sm" type="submit"
|
||||||
<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 }}
|
Submit
|
||||||
</StepperTitle>
|
</Button>
|
||||||
<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>
|
</div>
|
||||||
</StepperItem>
|
</div>
|
||||||
</Stepper>
|
</form>
|
||||||
|
|
||||||
{{ meta.valid }}
|
|
||||||
|
|
||||||
{{ stepIndex.toString() || 'a' }}
|
|
||||||
|
|
||||||
<template v-if="stepIndex === 1">
|
|
||||||
<FormField v-slot="{ componentField }" name="username">
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Username</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input type="text" placeholder="shadcn" v-bind="componentField" />
|
|
||||||
</FormControl>
|
|
||||||
<FormDescription>
|
|
||||||
This is your public display name.
|
|
||||||
</FormDescription>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="stepIndex === 3">
|
|
||||||
<h1>BRUH</h1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<Button type="submit">
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,7 @@ const steps = [{
|
||||||
</StepperTrigger>
|
</StepperTrigger>
|
||||||
<StepperSeparator
|
<StepperSeparator
|
||||||
v-if="item.step !== steps[steps.length - 1].step"
|
v-if="item.step !== steps[steps.length - 1].step"
|
||||||
|
class="w-full h-px"
|
||||||
/>
|
/>
|
||||||
</StepperItem>
|
</StepperItem>
|
||||||
</Stepper>
|
</Stepper>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,46 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import { toTypedSchema } from '@vee-validate/zod'
|
import { toTypedSchema } from '@vee-validate/zod'
|
||||||
import * as z from 'zod'
|
import * as z from 'zod'
|
||||||
import { ref } from 'vue'
|
import { computed, h, nextTick, ref } from 'vue'
|
||||||
import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
|
import { get, set } from '@vueuse/core'
|
||||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
|
import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
|
||||||
import { Input } from '@/lib/registry/default/ui/input'
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
|
||||||
import { Button } from '@/lib/registry/default/ui/button'
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/lib/registry/new-york/ui/select'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import { toast } from '@/lib/registry/new-york/ui/toast'
|
||||||
|
|
||||||
const formSchema = [
|
const formSchema = [
|
||||||
z.object({
|
z.object({
|
||||||
username: z.string().min(2).max(50),
|
fullName: z.string(),
|
||||||
|
email: z.string().email(),
|
||||||
}),
|
}),
|
||||||
z.object({
|
z.object({
|
||||||
password: z.string().min(2).max(50),
|
password: z.string().min(2).max(50),
|
||||||
|
confirmPassword: z.string(),
|
||||||
|
}).refine(
|
||||||
|
(values) => {
|
||||||
|
return values.password === values.confirmPassword
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: 'Passwords must match!',
|
||||||
|
path: ['confirmPassword'],
|
||||||
|
},
|
||||||
|
),
|
||||||
|
z.object({
|
||||||
|
favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
|
|
||||||
const stepIndex = ref(1)
|
const stepIndex = ref(1)
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
{
|
{
|
||||||
step: 1,
|
step: 1,
|
||||||
|
|
@ -28,99 +49,190 @@ const steps = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 2,
|
step: 2,
|
||||||
title: 'Company details',
|
title: 'Your password',
|
||||||
description: 'A few details about your company',
|
description: 'Choose a password',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 3,
|
step: 3,
|
||||||
title: 'Invite your team',
|
title: 'Your Favorite Drink',
|
||||||
description: 'Start collaborating with your team',
|
description: 'Choose a drink',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
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:',
|
||||||
|
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Form v-slot="{ meta }" :validation-schema="toTypedSchema(formSchema[stepIndex]) || undefined">
|
<Form
|
||||||
<Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
|
v-slot="{ meta, values, validate }"
|
||||||
<StepperItem
|
as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
|
||||||
v-for="step in steps"
|
>
|
||||||
:key="step.step"
|
<form
|
||||||
v-slot="{ state }"
|
@submit="(e) => {
|
||||||
class="relative flex w-full flex-col items-center justify-center"
|
e.preventDefault()
|
||||||
:step="step.step"
|
nextTick(() => {
|
||||||
>
|
validate()
|
||||||
<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>
|
if (stepIndex === steps.length) {
|
||||||
<Button
|
onSubmit(values)
|
||||||
: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']"
|
<Stepper v-model="stepIndex" class="flex w-full items-start gap-2">
|
||||||
>
|
<StepperItem
|
||||||
<Check v-if="state === 'completed'" class="size-5" />
|
v-for="step in steps"
|
||||||
<Circle v-if="state === 'active'" />
|
:key="step.step"
|
||||||
<Dot v-if="state === 'inactive'" />
|
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',
|
||||||
|
state !== 'completed' && !meta.valid && 'pointer-events-none',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
</StepperTrigger>
|
<Button
|
||||||
|
v-if="stepIndex === 3" size="sm" type="submit"
|
||||||
<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 }}
|
Submit
|
||||||
</StepperTitle>
|
</Button>
|
||||||
<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>
|
</div>
|
||||||
</StepperItem>
|
</div>
|
||||||
</Stepper>
|
</form>
|
||||||
|
|
||||||
{{ meta.valid }}
|
|
||||||
|
|
||||||
{{ stepIndex.toString() || 'a' }}
|
|
||||||
|
|
||||||
<template v-if="stepIndex === 1">
|
|
||||||
<FormField v-slot="{ componentField }" name="username">
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Username</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input type="text" placeholder="shadcn" v-bind="componentField" />
|
|
||||||
</FormControl>
|
|
||||||
<FormDescription>
|
|
||||||
This is your public display name.
|
|
||||||
</FormDescription>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="stepIndex === 3">
|
|
||||||
<h1>BRUH</h1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<Button type="submit">
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
|
||||||
<StepperIndicator
|
<StepperIndicator
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'inline-flex items-center justify-center rounded-full text-white w-8 h-8',
|
'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',
|
||||||
// Disabled
|
// Disabled
|
||||||
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
|
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
|
||||||
// Active
|
// Active
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "StepperIndicator.vue",
|
"name": "StepperIndicator.vue",
|
||||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <StepperIndicator\n v-bind=\"forwarded\"\n :class=\"cn(\n 'inline-flex items-center justify-center rounded-full text-white w-8 h-8',\n // Disabled\n 'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n // Active\n 'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n // Completed\n 'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n props.class,\n )\"\n >\n <slot />\n </StepperIndicator>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <StepperIndicator\n v-bind=\"forwarded\"\n :class=\"cn(\n 'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n // Disabled\n 'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n // Active\n 'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n // Completed\n 'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n props.class,\n )\"\n >\n <slot />\n </StepperIndicator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "StepperItem.vue",
|
"name": "StepperItem.vue",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user