Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into docs-cleanup

Browse Source
This commit is contained in:
Sadegh Barati 2024-07-25 22:52:34 +03:30
commit 22c6f9ccfc
22 changed files with 847 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/www/__registry__/index.ts
View File

@ -1004,6 +1004,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","form","select","input","button","toast"],
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",
@ -2461,6 +2482,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","form","select","input","button","toast"],
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",

16
apps/www/src/content/docs/components/stepper.md
View File

@ -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" />

1
apps/www/src/lib/registry/default/example/StepperDemo.vue
View File

@ -49,6 +49,7 @@ const steps = [{
</StepperTrigger>
<StepperSeparator
v-if="item.step !== steps[steps.length - 1].step"
class="w-full h-px"
/>
</StepperItem>
</Stepper>

238
apps/www/src/lib/registry/default/example/StepperForm.vue Normal file
View File

@ -0,0 +1,238 @@
<script setup lang="ts">
import { Check, Circle, Dot } from 'lucide-vue-next'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
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 { 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 { Button } from '@/lib/registry/default/ui/button'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = [
z.object({
fullName: z.string(),
email: z.string().email(),
}),
z.object({
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 steps = [
{
step: 1,
title: 'Your details',
description: 'Provide your name and email',
},
{
step: 2,
title: 'Your password',
description: 'Choose a password',
},
{
step: 3,
title: 'Your Favorite Drink',
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>
<template>
<Form
v-slot="{ meta, values, validate }"
as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
>
<form
@submit="(e) => {
e.preventDefault()
nextTick(() => {
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',
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
v-if="stepIndex === 3" size="sm" type="submit"
>
Submit
</Button>
</div>
</div>
</form>
</Form>
</template>

69
apps/www/src/lib/registry/default/example/StepperHorizental.vue Normal file
View File

@ -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>

71
apps/www/src/lib/registry/default/example/StepperVertical.vue Normal file
View File

@ -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>

5
apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
View File

@ -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>

4
apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
View File

@ -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>

2
apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
View File

@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
<StepperIndicator
v-bind="forwarded"
:class="cn(
'inline-flex items-center justify-center rounded-full text-white w-10 h-10',
'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',
// Disabled
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
// Active

5
apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
View File

@ -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>

2
apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
View File

@ -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

1
apps/www/src/lib/registry/new-york/example/StepperDemo.vue
View File

@ -49,6 +49,7 @@ const steps = [{
</StepperTrigger>
<StepperSeparator
v-if="item.step !== steps[steps.length - 1].step"
class="w-full h-px"
/>
</StepperItem>
</Stepper>

238
apps/www/src/lib/registry/new-york/example/StepperForm.vue Normal file
View File

@ -0,0 +1,238 @@
<script setup lang="ts">
import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import { computed, h, nextTick, ref } from 'vue'
import { get, set } from '@vueuse/core'
import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
import {
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 = [
z.object({
fullName: z.string(),
email: z.string().email(),
}),
z.object({
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 steps = [
{
step: 1,
title: 'Your details',
description: 'Provide your name and email',
},
{
step: 2,
title: 'Your password',
description: 'Choose a password',
},
{
step: 3,
title: 'Your Favorite Drink',
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>
<template>
<Form
v-slot="{ meta, values, validate }"
as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1])"
>
<form
@submit="(e) => {
e.preventDefault()
nextTick(() => {
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',
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
v-if="stepIndex === 3" size="sm" type="submit"
>
Submit
</Button>
</div>
</div>
</form>
</Form>
</template>

69
apps/www/src/lib/registry/new-york/example/StepperHorizental.vue Normal file
View File

@ -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>

71
apps/www/src/lib/registry/new-york/example/StepperVertical.vue Normal file
View File

@ -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>

5
apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
View File

@ -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>

4
apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
View File

@ -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>

2
apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
View File

@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
<StepperIndicator
v-bind="forwarded"
: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
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
// Active

5
apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
View File

@ -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>

6
apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
View File

@ -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,
)"
/>

10
apps/www/src/public/registry/styles/default/stepper.json
View File

@ -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",

10
apps/www/src/public/registry/styles/new-york/stepper.json
View File

@ -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-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",
"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",
"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",