Skip to content

Commit 6757908

Browse files
epr3epr3
authoredJul 22, 2024··
feat(Stepper): implement stepper (#669)
·
v1.0.3v0.11.0
1 parent 6550f34 commit 6757908

25 files changed

+695
-0
lines changed
 

‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# EditorConfig is awesome: https://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
[*]
7+
indent_style = space
8+
indent_size = 2
9+
end_of_line = lf
10+
charset = utf-8
11+
trim_trailing_whitespace = true
12+
insert_final_newline = true

‎apps/www/.vitepress/theme/config/docs.ts

+5
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,11 @@ export const docsConfig: DocsConfig = {
321321
href: '/docs/components/sonner',
322322
items: [],
323323
},
324+
{
325+
title: 'Stepper',
326+
href: '/docs/components/stepper',
327+
label: 'New',
328+
},
324329
{
325330
title: 'Switch',
326331
href: '/docs/components/switch',

‎apps/www/__registry__/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -990,6 +990,13 @@ export const Index = {
990990
component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
991991
files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
992992
},
993+
"StepperDemo": {
994+
name: "StepperDemo",
995+
type: "components:example",
996+
registryDependencies: ["stepper"],
997+
component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
998+
files: ["../src/lib/registry/default/example/StepperDemo.vue"],
999+
},
9931000
"SwitchDemo": {
9941001
name: "SwitchDemo",
9951002
type: "components:example",
@@ -2433,6 +2440,13 @@ export const Index = {
24332440
component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
24342441
files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
24352442
},
2443+
"StepperDemo": {
2444+
name: "StepperDemo",
2445+
type: "components:example",
2446+
registryDependencies: ["stepper"],
2447+
component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
2448+
files: ["../src/lib/registry/new-york/example/StepperDemo.vue"],
2449+
},
24362450
"SwitchDemo": {
24372451
name: "SwitchDemo",
24382452
type: "components:example",

‎apps/www/src/content/docs/components/stepper.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Stepper
3+
description: A set of steps that are used to indicate progress through a multi-step process.
4+
source: apps/www/src/lib/registry/default/ui/stepper
5+
primitive: https://www.radix-vue.com/components/stepper.html
6+
---
7+
8+
<ComponentPreview name="StepperDemo" />
9+
10+
## Installation
11+
12+
```bash
13+
npx shadcn-vue@latest add stepper
14+
```
15+
16+
## Usage
17+
18+
```vue
19+
<script setup lang="ts">
20+
import {
21+
Stepper,
22+
StepperDescription,
23+
StepperIndicator,
24+
StepperItem,
25+
StepperSeparator,
26+
StepperTitle,
27+
StepperTrigger,
28+
} from '@/components/ui/stepper'
29+
</script>
30+
31+
<template>
32+
<Stepper>
33+
<StepperItem :step="1" linear>
34+
<StepperTrigger>
35+
<StepperIndicator>1</StepperIndicator>
36+
<StepperTitle>Step 1</StepperTitle>
37+
<StepperDescription>This is the first step</StepperDescription>
38+
</StepperTrigger>
39+
<StepperSeparator />
40+
</StepperItem>
41+
<StepperItem :step="2">
42+
<StepperTrigger>
43+
<StepperIndicator>2</StepperIndicator>
44+
<StepperTitle>Step 2</StepperTitle>
45+
<StepperDescription>This is the second step</StepperDescription>
46+
</StepperTrigger>
47+
</StepperItem>
48+
</Stepper>
49+
</template>
50+
```

‎apps/www/src/lib/registry/default/example/StepperDemo.vue

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup lang="ts">
2+
import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
3+
4+
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
5+
6+
const steps = [{
7+
step: 1,
8+
title: 'Address',
9+
description: 'Add your address here',
10+
icon: BookUser,
11+
}, {
12+
step: 2,
13+
title: 'Shipping',
14+
description: 'Set your preferred shipping method',
15+
icon: Truck,
16+
}, {
17+
step: 3,
18+
title: 'Payment',
19+
description: 'Add any payment information you have',
20+
icon: CreditCard,
21+
}, {
22+
step: 4,
23+
title: 'Checkout',
24+
description: 'Confirm your order',
25+
icon: Check,
26+
}]
27+
</script>
28+
29+
<template>
30+
<Stepper>
31+
<StepperItem
32+
v-for="item in steps"
33+
:key="item.step"
34+
class="basis-1/4"
35+
:step="item.step"
36+
>
37+
<StepperTrigger>
38+
<StepperIndicator>
39+
<component :is="item.icon" class="w-4 h-4" />
40+
</StepperIndicator>
41+
<div class="flex flex-col">
42+
<StepperTitle>
43+
{{ item.title }}
44+
</StepperTitle>
45+
<StepperDescription>
46+
{{ item.description }}
47+
</StepperDescription>
48+
</div>
49+
</StepperTrigger>
50+
<StepperSeparator
51+
v-if="item.step !== steps[steps.length - 1].step"
52+
/>
53+
</StepperItem>
54+
</Stepper>
55+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/Stepper.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
4+
import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
9+
const emits = defineEmits<StepperRootEmits>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
17+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
18+
</script>
19+
20+
<template>
21+
<StepperRoot
22+
:class="cn(
23+
'flex gap-2 p-1',
24+
props.class,
25+
)"
26+
v-bind="forwarded"
27+
>
28+
<slot />
29+
</StepperRoot>
30+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperDescriptionProps } from 'radix-vue'
4+
import { StepperDescription, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
21+
<slot />
22+
</StepperDescription>
23+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperIndicatorProps } from 'radix-vue'
4+
import { StepperIndicator, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperIndicator
21+
v-bind="forwarded"
22+
:class="cn(
23+
'inline-flex items-center justify-center rounded-full text-white w-10 h-10',
24+
// Disabled
25+
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
26+
// Active
27+
'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
28+
// Completed
29+
'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
30+
props.class,
31+
)"
32+
>
33+
<slot />
34+
</StepperIndicator>
35+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperItemProps } from 'radix-vue'
4+
import { StepperItem, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperItem
21+
v-bind="forwarded"
22+
:class="cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
23+
>
24+
<slot />
25+
</StepperItem>
26+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperSeparatorProps } from 'radix-vue'
4+
import { StepperSeparator, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperSeparator
21+
v-bind="forwarded"
22+
:class="cn(
23+
'w-full h-[1px] bg-border',
24+
// Disabled
25+
'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
26+
// Completed
27+
'group-data-[state=completed]:bg-accent-foreground',
28+
props.class,
29+
)"
30+
/>
31+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperTitleProps } from 'radix-vue'
4+
import { StepperTitle, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
21+
<slot />
22+
</StepperTitle>
23+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperTriggerProps } from 'radix-vue'
4+
import { StepperTrigger, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperTrigger
21+
v-bind="forwarded"
22+
:class="cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)"
23+
>
24+
<slot />
25+
</StepperTrigger>
26+
</template>

‎apps/www/src/lib/registry/default/ui/stepper/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export { default as Stepper } from './Stepper.vue'
2+
export { default as StepperItem } from './StepperItem.vue'
3+
export { default as StepperIndicator } from './StepperIndicator.vue'
4+
export { default as StepperTrigger } from './StepperTrigger.vue'
5+
export { default as StepperTitle } from './StepperTitle.vue'
6+
export { default as StepperDescription } from './StepperDescription.vue'
7+
export { default as StepperSeparator } from './StepperSeparator.vue'

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup lang="ts">
2+
import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
3+
4+
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
5+
6+
const steps = [{
7+
step: 1,
8+
title: 'Address',
9+
description: 'Add your address here',
10+
icon: BookUser,
11+
}, {
12+
step: 2,
13+
title: 'Shipping',
14+
description: 'Set your preferred shipping method',
15+
icon: Truck,
16+
}, {
17+
step: 3,
18+
title: 'Payment',
19+
description: 'Add any payment information you have',
20+
icon: CreditCard,
21+
}, {
22+
step: 4,
23+
title: 'Checkout',
24+
description: 'Confirm your order',
25+
icon: Check,
26+
}]
27+
</script>
28+
29+
<template>
30+
<Stepper>
31+
<StepperItem
32+
v-for="item in steps"
33+
:key="item.step"
34+
class="basis-1/4"
35+
:step="item.step"
36+
>
37+
<StepperTrigger>
38+
<StepperIndicator>
39+
<component :is="item.icon" class="w-4 h-4" />
40+
</StepperIndicator>
41+
<div class="flex flex-col">
42+
<StepperTitle>
43+
{{ item.title }}
44+
</StepperTitle>
45+
<StepperDescription>
46+
{{ item.description }}
47+
</StepperDescription>
48+
</div>
49+
</StepperTrigger>
50+
<StepperSeparator
51+
v-if="item.step !== steps[steps.length - 1].step"
52+
/>
53+
</StepperItem>
54+
</Stepper>
55+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
4+
import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
9+
const emits = defineEmits<StepperRootEmits>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
17+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
18+
</script>
19+
20+
<template>
21+
<StepperRoot
22+
:class="cn(
23+
'flex gap-1 p-0.5',
24+
props.class,
25+
)"
26+
v-bind="forwarded"
27+
>
28+
<slot />
29+
</StepperRoot>
30+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperDescriptionProps } from 'radix-vue'
4+
import { StepperDescription, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
21+
<slot />
22+
</StepperDescription>
23+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperIndicatorProps } from 'radix-vue'
4+
import { StepperIndicator, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperIndicator
21+
v-bind="forwarded"
22+
:class="cn(
23+
'inline-flex items-center justify-center rounded-full text-white w-8 h-8',
24+
// Disabled
25+
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
26+
// Active
27+
'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
28+
// Completed
29+
'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
30+
props.class,
31+
)"
32+
>
33+
<slot />
34+
</StepperIndicator>
35+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperItemProps } from 'radix-vue'
4+
import { StepperItem, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperItem
21+
v-bind="forwarded"
22+
:class="cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
23+
>
24+
<slot />
25+
</StepperItem>
26+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperSeparatorProps } from 'radix-vue'
4+
import { StepperSeparator, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperSeparator
21+
v-bind="forwarded"
22+
:class="cn(
23+
'w-full h-[1px] bg-border',
24+
// Disabled
25+
'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',
26+
// Completed
27+
'group-data-[state=completed]:bg-accent',
28+
props.class,
29+
)"
30+
/>
31+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperTitleProps } from 'radix-vue'
4+
import { StepperTitle, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
21+
<slot />
22+
</StepperTitle>
23+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts" setup>
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { StepperTriggerProps } from 'radix-vue'
4+
import { StepperTrigger, useForwardProps } from 'radix-vue'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwarded = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<StepperTrigger
21+
v-bind="forwarded"
22+
:class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
23+
>
24+
<slot />
25+
</StepperTrigger>
26+
</template>

‎apps/www/src/lib/registry/new-york/ui/stepper/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export { default as Stepper } from './Stepper.vue'
2+
export { default as StepperItem } from './StepperItem.vue'
3+
export { default as StepperIndicator } from './StepperIndicator.vue'
4+
export { default as StepperTrigger } from './StepperTrigger.vue'
5+
export { default as StepperTitle } from './StepperTitle.vue'
6+
export { default as StepperDescription } from './StepperDescription.vue'
7+
export { default as StepperSeparator } from './StepperSeparator.vue'

‎apps/www/src/public/registry/index.json

+18
Original file line numberDiff line numberDiff line change
@@ -779,6 +779,24 @@
779779
],
780780
"type": "components:ui"
781781
},
782+
{
783+
"name": "stepper",
784+
"dependencies": [],
785+
"registryDependencies": [
786+
"utils"
787+
],
788+
"files": [
789+
"ui/stepper/Stepper.vue",
790+
"ui/stepper/StepperDescription.vue",
791+
"ui/stepper/StepperIndicator.vue",
792+
"ui/stepper/StepperItem.vue",
793+
"ui/stepper/StepperSeparator.vue",
794+
"ui/stepper/StepperTitle.vue",
795+
"ui/stepper/StepperTrigger.vue",
796+
"ui/stepper/index.ts"
797+
],
798+
"type": "components:ui"
799+
},
782800
{
783801
"name": "switch",
784802
"dependencies": [],

‎apps/www/src/public/registry/styles/default/stepper.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "stepper",
3+
"dependencies": [],
4+
"registryDependencies": [
5+
"utils"
6+
],
7+
"files": [
8+
{
9+
"name": "Stepper.vue",
10+
"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"
11+
},
12+
{
13+
"name": "StepperDescription.vue",
14+
"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"
15+
},
16+
{
17+
"name": "StepperIndicator.vue",
18+
"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"
19+
},
20+
{
21+
"name": "StepperItem.vue",
22+
"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"
23+
},
24+
{
25+
"name": "StepperSeparator.vue",
26+
"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"
27+
},
28+
{
29+
"name": "StepperTitle.vue",
30+
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTitleProps } from 'radix-vue'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTitleProps & { 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 <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n <slot />\n </StepperTitle>\n</template>\n"
31+
},
32+
{
33+
"name": "StepperTrigger.vue",
34+
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTriggerProps & { 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 <StepperTrigger\n v-bind=\"forwarded\"\n :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n >\n <slot />\n </StepperTrigger>\n</template>\n"
35+
},
36+
{
37+
"name": "index.ts",
38+
"content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\n"
39+
}
40+
],
41+
"type": "components:ui"
42+
}

‎apps/www/src/public/registry/styles/new-york/stepper.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "stepper",
3+
"dependencies": [],
4+
"registryDependencies": [
5+
"utils"
6+
],
7+
"files": [
8+
{
9+
"name": "Stepper.vue",
10+
"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"
11+
},
12+
{
13+
"name": "StepperDescription.vue",
14+
"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"
15+
},
16+
{
17+
"name": "StepperIndicator.vue",
18+
"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"
19+
},
20+
{
21+
"name": "StepperItem.vue",
22+
"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"
23+
},
24+
{
25+
"name": "StepperSeparator.vue",
26+
"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"
27+
},
28+
{
29+
"name": "StepperTitle.vue",
30+
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTitleProps } from 'radix-vue'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTitleProps & { 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 <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n <slot />\n </StepperTitle>\n</template>\n"
31+
},
32+
{
33+
"name": "StepperTrigger.vue",
34+
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTriggerProps & { 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 <StepperTrigger\n v-bind=\"forwarded\"\n :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n >\n <slot />\n </StepperTrigger>\n</template>\n"
35+
},
36+
{
37+
"name": "index.ts",
38+
"content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\n"
39+
}
40+
],
41+
"type": "components:ui"
42+
}

0 commit comments

Comments
 (0)
Please sign in to comment.