chore: add stepper example
This commit is contained in:
sadeghbarati
parent
183da0890d
commit
1ddf87f656
|
|
@ -997,6 +997,27 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/StepperDemo.vue"],
|
||||
},
|
||||
"StepperForm": {
|
||||
name: "StepperForm",
|
||||
type: "components:example",
|
||||
registryDependencies: ["stepper"],
|
||||
component: () => import("../src/lib/registry/default/example/StepperForm.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/StepperForm.vue"],
|
||||
},
|
||||
"StepperHorizental": {
|
||||
name: "StepperHorizental",
|
||||
type: "components:example",
|
||||
registryDependencies: ["stepper","button"],
|
||||
component: () => import("../src/lib/registry/default/example/StepperHorizental.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/StepperHorizental.vue"],
|
||||
},
|
||||
"StepperVertical": {
|
||||
name: "StepperVertical",
|
||||
type: "components:example",
|
||||
registryDependencies: ["stepper","button"],
|
||||
component: () => import("../src/lib/registry/default/example/StepperVertical.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/StepperVertical.vue"],
|
||||
},
|
||||
"SwitchDemo": {
|
||||
name: "SwitchDemo",
|
||||
type: "components:example",
|
||||
|
|
@ -2447,6 +2468,27 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/StepperDemo.vue"],
|
||||
},
|
||||
"StepperForm": {
|
||||
name: "StepperForm",
|
||||
type: "components:example",
|
||||
registryDependencies: ["stepper"],
|
||||
component: () => import("../src/lib/registry/new-york/example/StepperForm.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/StepperForm.vue"],
|
||||
},
|
||||
"StepperHorizental": {
|
||||
name: "StepperHorizental",
|
||||
type: "components:example",
|
||||
registryDependencies: ["stepper","button"],
|
||||
component: () => import("../src/lib/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/StepperHorizental.vue"],
|
||||
},
|
||||
"StepperVertical": {
|
||||
name: "StepperVertical",
|
||||
type: "components:example",
|
||||
registryDependencies: ["stepper","button"],
|
||||
component: () => import("../src/lib/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/StepperVertical.vue"],
|
||||
},
|
||||
"SwitchDemo": {
|
||||
name: "SwitchDemo",
|
||||
type: "components:example",
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ import {
|
|||
|
||||
<template>
|
||||
<Stepper>
|
||||
<StepperItem :step="1" linear>
|
||||
<StepperItem :step="1">
|
||||
<StepperTrigger>
|
||||
<StepperIndicator>1</StepperIndicator>
|
||||
<StepperTitle>Step 1</StepperTitle>
|
||||
|
|
@ -48,3 +48,17 @@ import {
|
|||
</Stepper>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Horizental
|
||||
|
||||
<ComponentPreview name="StepperHorizental" />
|
||||
|
||||
### Vertical
|
||||
|
||||
<ComponentPreview name="StepperVertical" />
|
||||
|
||||
### Form
|
||||
|
||||
<ComponentPreview name="StepperForm" />
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const steps = [{
|
|||
</StepperTrigger>
|
||||
<StepperSeparator
|
||||
v-if="item.step !== steps[steps.length - 1].step"
|
||||
class="w-full h-px"
|
||||
/>
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
|
|
|||
126
apps/www/src/lib/registry/default/example/StepperForm.vue
Normal file
126
apps/www/src/lib/registry/default/example/StepperForm.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<script setup lang="ts">
|
||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
||||
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
import { ref } from 'vue'
|
||||
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 { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
|
||||
const formSchema = [
|
||||
z.object({
|
||||
username: z.string().min(2).max(50),
|
||||
}),
|
||||
z.object({
|
||||
password: z.string().min(2).max(50),
|
||||
}),
|
||||
]
|
||||
|
||||
const stepIndex = ref(1)
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Your details',
|
||||
description: 'Provide your name and email',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Company details',
|
||||
description: 'A few details about your company',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Invite your team',
|
||||
description: 'Start collaborating with your team',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form v-slot="{ meta }" :validation-schema="toTypedSchema(formSchema[stepIndex - 1]) || undefined">
|
||||
<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']"
|
||||
>
|
||||
<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>
|
||||
|
||||
{{ 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>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<script setup lang="ts">
|
||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
||||
|
||||
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Your details',
|
||||
description: 'Provide your name and email',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Company details',
|
||||
description: 'A few details about your company',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Invite your team',
|
||||
description: 'Start collaborating with your team',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Stepper 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']"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<script setup lang="ts">
|
||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
||||
|
||||
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Your details',
|
||||
description:
|
||||
'Provide your name and email address. We will use this information to create your account',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Company details',
|
||||
description: 'A few details about your company will help us personalize your experience',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Invite your team',
|
||||
description:
|
||||
'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Stepper orientation="vertical" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
|
||||
<StepperItem
|
||||
v-for="step in steps"
|
||||
:key="step.step"
|
||||
v-slot="{ state }"
|
||||
class="relative flex w-full items-start gap-6"
|
||||
:step="step.step"
|
||||
>
|
||||
<StepperSeparator
|
||||
v-if="step.step !== steps[steps.length - 1].step"
|
||||
class="absolute left-[18px] top-[38px] block h-[105%] w-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']"
|
||||
>
|
||||
<Check v-if="state === 'completed'" class="size-5" />
|
||||
<Circle v-if="state === 'active'" />
|
||||
<Dot v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -19,12 +19,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
|||
|
||||
<template>
|
||||
<StepperRoot
|
||||
v-slot="slotProps"
|
||||
:class="cn(
|
||||
'flex gap-2 p-1',
|
||||
'flex gap-2',
|
||||
props.class,
|
||||
)"
|
||||
v-bind="forwarded"
|
||||
>
|
||||
<slot />
|
||||
<slot v-bind="slotProps" />
|
||||
</StepperRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
|
||||
<slot />
|
||||
<StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
|
||||
<slot v-bind="slotProps" />
|
||||
</StepperDescription>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -18,9 +18,10 @@ const forwarded = useForwardProps(delegatedProps)
|
|||
|
||||
<template>
|
||||
<StepperItem
|
||||
v-slot="slotProps"
|
||||
v-bind="forwarded"
|
||||
:class="cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
|
||||
:class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
|
||||
>
|
||||
<slot />
|
||||
<slot v-bind="slotProps" />
|
||||
</StepperItem>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
|
|||
<StepperSeparator
|
||||
v-bind="forwarded"
|
||||
:class="cn(
|
||||
'w-full h-[1px] bg-border',
|
||||
'bg-muted',
|
||||
// Disabled
|
||||
'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
|
||||
// Completed
|
||||
|
|
|
|||
126
apps/www/src/lib/registry/new-york/example/StepperForm.vue
Normal file
126
apps/www/src/lib/registry/new-york/example/StepperForm.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<script setup lang="ts">
|
||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
||||
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
import { ref } from 'vue'
|
||||
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 { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
|
||||
const formSchema = [
|
||||
z.object({
|
||||
username: z.string().min(2).max(50),
|
||||
}),
|
||||
z.object({
|
||||
password: z.string().min(2).max(50),
|
||||
}),
|
||||
]
|
||||
|
||||
const stepIndex = ref(1)
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Your details',
|
||||
description: 'Provide your name and email',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Company details',
|
||||
description: 'A few details about your company',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Invite your team',
|
||||
description: 'Start collaborating with your team',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form v-slot="{ meta }" :validation-schema="toTypedSchema(formSchema[stepIndex]) || undefined">
|
||||
<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']"
|
||||
>
|
||||
<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>
|
||||
|
||||
{{ 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>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<script setup lang="ts">
|
||||
import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Your details',
|
||||
description: 'Provide your name and email',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Company details',
|
||||
description: 'A few details about your company',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Invite your team',
|
||||
description: 'Start collaborating with your team',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Stepper 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']"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<script setup lang="ts">
|
||||
import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Your details',
|
||||
description:
|
||||
'Provide your name and email address. We will use this information to create your account',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Company details',
|
||||
description: 'A few details about your company will help us personalize your experience',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Invite your team',
|
||||
description:
|
||||
'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Stepper orientation="vertical" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
|
||||
<StepperItem
|
||||
v-for="step in steps"
|
||||
:key="step.step"
|
||||
v-slot="{ state }"
|
||||
class="relative flex w-full items-start gap-6"
|
||||
:step="step.step"
|
||||
>
|
||||
<StepperSeparator
|
||||
v-if="step.step !== steps[steps.length - 1].step"
|
||||
class="absolute left-[18px] top-[38px] block h-[105%] w-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']"
|
||||
>
|
||||
<CheckIcon v-if="state === 'completed'" class="size-5" />
|
||||
<CircleIcon v-if="state === 'active'" />
|
||||
<DotIcon v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -19,12 +19,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
|||
|
||||
<template>
|
||||
<StepperRoot
|
||||
v-slot="slotProps"
|
||||
:class="cn(
|
||||
'flex gap-1 p-0.5',
|
||||
'flex gap-2',
|
||||
props.class,
|
||||
)"
|
||||
v-bind="forwarded"
|
||||
>
|
||||
<slot />
|
||||
<slot v-bind="slotProps" />
|
||||
</StepperRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
|
||||
<slot />
|
||||
<StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
|
||||
<slot v-bind="slotProps" />
|
||||
</StepperDescription>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -18,9 +18,10 @@ const forwarded = useForwardProps(delegatedProps)
|
|||
|
||||
<template>
|
||||
<StepperItem
|
||||
v-slot="slotProps"
|
||||
v-bind="forwarded"
|
||||
:class="cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
|
||||
:class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
|
||||
>
|
||||
<slot />
|
||||
<slot v-bind="slotProps" />
|
||||
</StepperItem>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ const forwarded = useForwardProps(delegatedProps)
|
|||
<StepperSeparator
|
||||
v-bind="forwarded"
|
||||
:class="cn(
|
||||
'w-full h-[1px] bg-border',
|
||||
'bg-muted',
|
||||
// Disabled
|
||||
'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',
|
||||
'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
|
||||
// Completed
|
||||
'group-data-[state=completed]:bg-accent',
|
||||
'group-data-[state=completed]:bg-accent-foreground',
|
||||
props.class,
|
||||
)"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,23 +7,23 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Stepper.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <StepperRoot\n :class=\"cn(\n 'flex gap-2 p-1',\n props.class,\n )\"\n v-bind=\"forwarded\"\n >\n <slot />\n </StepperRoot>\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <StepperRoot\n v-slot=\"slotProps\"\n :class=\"cn(\n 'flex gap-2',\n props.class,\n )\"\n v-bind=\"forwarded\"\n >\n <slot v-bind=\"slotProps\" />\n </StepperRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperDescription.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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 <StepperDescription v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n <slot />\n </StepperDescription>\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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 <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n <slot v-bind=\"slotProps\" />\n </StepperDescription>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"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-10 h-10',\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-10 h-10',\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",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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 <StepperItem\n v-bind=\"forwarded\"\n :class=\"cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)\"\n >\n <slot />\n </StepperItem>\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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 <StepperItem\n v-slot=\"slotProps\"\n v-bind=\"forwarded\"\n :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n >\n <slot v-bind=\"slotProps\" />\n </StepperItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperSeparator.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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 <StepperSeparator\n v-bind=\"forwarded\"\n :class=\"cn(\n 'w-full h-[1px] bg-border',\n // Disabled\n 'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n // Completed\n 'group-data-[state=completed]:bg-accent-foreground',\n props.class,\n )\"\n />\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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 <StepperSeparator\n v-bind=\"forwarded\"\n :class=\"cn(\n 'bg-muted',\n // Disabled\n 'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n // Completed\n 'group-data-[state=completed]:bg-accent-foreground',\n props.class,\n )\"\n />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperTitle.vue",
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Stepper.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <StepperRoot\n :class=\"cn(\n 'flex gap-1 p-0.5',\n props.class,\n )\"\n v-bind=\"forwarded\"\n >\n <slot />\n </StepperRoot>\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <StepperRoot\n v-slot=\"slotProps\"\n :class=\"cn(\n 'flex gap-2',\n props.class,\n )\"\n v-bind=\"forwarded\"\n >\n <slot v-bind=\"slotProps\" />\n </StepperRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperDescription.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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 <StepperDescription v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n <slot />\n </StepperDescription>\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { 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 <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n <slot v-bind=\"slotProps\" />\n </StepperDescription>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperIndicator.vue",
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
},
|
||||
{
|
||||
"name": "StepperItem.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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 <StepperItem\n v-bind=\"forwarded\"\n :class=\"cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)\"\n >\n <slot />\n </StepperItem>\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { 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 <StepperItem\n v-slot=\"slotProps\"\n v-bind=\"forwarded\"\n :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n >\n <slot v-bind=\"slotProps\" />\n </StepperItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperSeparator.vue",
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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 <StepperSeparator\n v-bind=\"forwarded\"\n :class=\"cn(\n 'w-full h-[1px] bg-border',\n // Disabled\n 'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',\n // Completed\n 'group-data-[state=completed]:bg-accent',\n props.class,\n )\"\n />\n</template>\n"
|
||||
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { 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 <StepperSeparator\n v-bind=\"forwarded\"\n :class=\"cn(\n 'bg-muted',\n // Disabled\n 'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n // Completed\n 'group-data-[state=completed]:bg-accent-foreground',\n props.class,\n )\"\n />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "StepperTitle.vue",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user