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

feat(Stepper): implement stepper (#669)

Browse Source
This commit is contained in:
Eduard Predescu 2024-07-22 08:13:10 +03:00 committed by GitHub
parent 6550f34842
commit 6757908fe1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 695 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@ -0,0 +1,12 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

5
apps/www/.vitepress/theme/config/docs.ts
View File

@ -321,6 +321,11 @@ export const docsConfig: DocsConfig = {
href: '/docs/components/sonner',
items: [],
},
{
title: 'Stepper',
href: '/docs/components/stepper',
label: 'New',
},
{
title: 'Switch',
href: '/docs/components/switch',

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

@ -990,6 +990,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
},
"StepperDemo": {
name: "StepperDemo",
type: "components:example",
registryDependencies: ["stepper"],
component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/StepperDemo.vue"],
},
"SwitchDemo": {
name: "SwitchDemo",
type: "components:example",
@ -2433,6 +2440,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
},
"StepperDemo": {
name: "StepperDemo",
type: "components:example",
registryDependencies: ["stepper"],
component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/StepperDemo.vue"],
},
"SwitchDemo": {
name: "SwitchDemo",
type: "components:example",

50
apps/www/src/content/docs/components/stepper.md Normal file
View File

@ -0,0 +1,50 @@
---
title: Stepper
description: A set of steps that are used to indicate progress through a multi-step process.
source: apps/www/src/lib/registry/default/ui/stepper
primitive: https://www.radix-vue.com/components/stepper.html
---
<ComponentPreview name="StepperDemo" />
## Installation
```bash
npx shadcn-vue@latest add stepper
```
## Usage
```vue
<script setup lang="ts">
import {
Stepper,
StepperDescription,
StepperIndicator,
StepperItem,
StepperSeparator,
StepperTitle,
StepperTrigger,
} from '@/components/ui/stepper'
</script>
<template>
<Stepper>
<StepperItem :step="1" linear>
<StepperTrigger>
<StepperIndicator>1</StepperIndicator>
<StepperTitle>Step 1</StepperTitle>
<StepperDescription>This is the first step</StepperDescription>
</StepperTrigger>
<StepperSeparator />
</StepperItem>
<StepperItem :step="2">
<StepperTrigger>
<StepperIndicator>2</StepperIndicator>
<StepperTitle>Step 2</StepperTitle>
<StepperDescription>This is the second step</StepperDescription>
</StepperTrigger>
</StepperItem>
</Stepper>
</template>
```

55
apps/www/src/lib/registry/default/example/StepperDemo.vue Normal file
View File

@ -0,0 +1,55 @@
<script setup lang="ts">
import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
const steps = [{
step: 1,
title: 'Address',
description: 'Add your address here',
icon: BookUser,
}, {
step: 2,
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: Truck,
}, {
step: 3,
title: 'Payment',
description: 'Add any payment information you have',
icon: CreditCard,
}, {
step: 4,
title: 'Checkout',
description: 'Confirm your order',
icon: Check,
}]
</script>
<template>
<Stepper>
<StepperItem
v-for="item in steps"
:key="item.step"
class="basis-1/4"
:step="item.step"
>
<StepperTrigger>
<StepperIndicator>
<component :is="item.icon" class="w-4 h-4" />
</StepperIndicator>
<div class="flex flex-col">
<StepperTitle>
{{ item.title }}
</StepperTitle>
<StepperDescription>
{{ item.description }}
</StepperDescription>
</div>
</StepperTrigger>
<StepperSeparator
v-if="item.step !== steps[steps.length - 1].step"
/>
</StepperItem>
</Stepper>
</template>

30
apps/www/src/lib/registry/default/ui/stepper/Stepper.vue Normal file
View File

@ -0,0 +1,30 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<StepperRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<StepperRoot
:class="cn(
'flex gap-2 p-1',
props.class,
)"
v-bind="forwarded"
>
<slot />
</StepperRoot>
</template>

23
apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperDescriptionProps } from 'radix-vue'
import { StepperDescription, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
<slot />
</StepperDescription>
</template>

35
apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue Normal file
View File

@ -0,0 +1,35 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperIndicatorProps } from 'radix-vue'
import { StepperIndicator, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperIndicator
v-bind="forwarded"
:class="cn(
'inline-flex items-center justify-center rounded-full text-white w-10 h-10',
// Disabled
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
// Active
'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
// Completed
'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
props.class,
)"
>
<slot />
</StepperIndicator>
</template>

26
apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue Normal file
View File

@ -0,0 +1,26 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperItemProps } from 'radix-vue'
import { StepperItem, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperItem
v-bind="forwarded"
:class="cn('flex items-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
>
<slot />
</StepperItem>
</template>

31
apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperSeparatorProps } from 'radix-vue'
import { StepperSeparator, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperSeparator
v-bind="forwarded"
:class="cn(
'w-full h-[1px] bg-border',
// Disabled
'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
// Completed
'group-data-[state=completed]:bg-accent-foreground',
props.class,
)"
/>
</template>

23
apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperTitleProps } from 'radix-vue'
import { StepperTitle, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
<slot />
</StepperTitle>
</template>

26
apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue Normal file
View File

@ -0,0 +1,26 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperTriggerProps } from 'radix-vue'
import { StepperTrigger, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperTrigger
v-bind="forwarded"
:class="cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)"
>
<slot />
</StepperTrigger>
</template>

7
apps/www/src/lib/registry/default/ui/stepper/index.ts Normal file
View File

@ -0,0 +1,7 @@
export { default as Stepper } from './Stepper.vue'
export { default as StepperItem } from './StepperItem.vue'
export { default as StepperIndicator } from './StepperIndicator.vue'
export { default as StepperTrigger } from './StepperTrigger.vue'
export { default as StepperTitle } from './StepperTitle.vue'
export { default as StepperDescription } from './StepperDescription.vue'
export { default as StepperSeparator } from './StepperSeparator.vue'

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

@ -0,0 +1,55 @@
<script setup lang="ts">
import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
const steps = [{
step: 1,
title: 'Address',
description: 'Add your address here',
icon: BookUser,
}, {
step: 2,
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: Truck,
}, {
step: 3,
title: 'Payment',
description: 'Add any payment information you have',
icon: CreditCard,
}, {
step: 4,
title: 'Checkout',
description: 'Confirm your order',
icon: Check,
}]
</script>
<template>
<Stepper>
<StepperItem
v-for="item in steps"
:key="item.step"
class="basis-1/4"
:step="item.step"
>
<StepperTrigger>
<StepperIndicator>
<component :is="item.icon" class="w-4 h-4" />
</StepperIndicator>
<div class="flex flex-col">
<StepperTitle>
{{ item.title }}
</StepperTitle>
<StepperDescription>
{{ item.description }}
</StepperDescription>
</div>
</StepperTrigger>
<StepperSeparator
v-if="item.step !== steps[steps.length - 1].step"
/>
</StepperItem>
</Stepper>
</template>

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

@ -0,0 +1,30 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<StepperRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<StepperRoot
:class="cn(
'flex gap-1 p-0.5',
props.class,
)"
v-bind="forwarded"
>
<slot />
</StepperRoot>
</template>

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

@ -0,0 +1,23 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperDescriptionProps } from 'radix-vue'
import { StepperDescription, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperDescription v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
<slot />
</StepperDescription>
</template>

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

@ -0,0 +1,35 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperIndicatorProps } from 'radix-vue'
import { StepperIndicator, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperIndicator
v-bind="forwarded"
:class="cn(
'inline-flex items-center justify-center rounded-full text-white w-8 h-8',
// Disabled
'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
// Active
'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
// Completed
'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
props.class,
)"
>
<slot />
</StepperIndicator>
</template>

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

@ -0,0 +1,26 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperItemProps } from 'radix-vue'
import { StepperItem, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperItem
v-bind="forwarded"
:class="cn('flex items-center gap-1 cursor-pointer group data-[disabled]:pointer-events-none', props.class)"
>
<slot />
</StepperItem>
</template>

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

@ -0,0 +1,31 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperSeparatorProps } from 'radix-vue'
import { StepperSeparator, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperSeparator
v-bind="forwarded"
:class="cn(
'w-full h-[1px] bg-border',
// Disabled
'group-data-[disabled]:bg-muted-foreground group-data-[disabled]:opacity-50',
// Completed
'group-data-[state=completed]:bg-accent',
props.class,
)"
/>
</template>

23
apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperTitleProps } from 'radix-vue'
import { StepperTitle, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
<slot />
</StepperTitle>
</template>

26
apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue Normal file
View File

@ -0,0 +1,26 @@
<script lang="ts" setup>
import { type HTMLAttributes, computed } from 'vue'
import type { StepperTriggerProps } from 'radix-vue'
import { StepperTrigger, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<StepperTrigger
v-bind="forwarded"
:class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
>
<slot />
</StepperTrigger>
</template>

7
apps/www/src/lib/registry/new-york/ui/stepper/index.ts Normal file
View File

@ -0,0 +1,7 @@
export { default as Stepper } from './Stepper.vue'
export { default as StepperItem } from './StepperItem.vue'
export { default as StepperIndicator } from './StepperIndicator.vue'
export { default as StepperTrigger } from './StepperTrigger.vue'
export { default as StepperTitle } from './StepperTitle.vue'
export { default as StepperDescription } from './StepperDescription.vue'
export { default as StepperSeparator } from './StepperSeparator.vue'

18
apps/www/src/public/registry/index.json
View File

@ -779,6 +779,24 @@
],
"type": "components:ui"
},
{
"name": "stepper",
"dependencies": [],
"registryDependencies": [
"utils"
],
"files": [
"ui/stepper/Stepper.vue",
"ui/stepper/StepperDescription.vue",
"ui/stepper/StepperIndicator.vue",
"ui/stepper/StepperItem.vue",
"ui/stepper/StepperSeparator.vue",
"ui/stepper/StepperTitle.vue",
"ui/stepper/StepperTrigger.vue",
"ui/stepper/index.ts"
],
"type": "components:ui"
},
{
"name": "switch",
"dependencies": [],

42
apps/www/src/public/registry/styles/default/stepper.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "stepper",
"dependencies": [],
"registryDependencies": [
"utils"
],
"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"
},
{
"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"
},
{
"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"
},
{
"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"
},
{
"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"
},
{
"name": "StepperTitle.vue",
"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"
},
{
"name": "StepperTrigger.vue",
"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"
},
{
"name": "index.ts",
"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"
}
],
"type": "components:ui"
}

42
apps/www/src/public/registry/styles/new-york/stepper.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "stepper",
"dependencies": [],
"registryDependencies": [
"utils"
],
"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"
},
{
"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"
},
{
"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"
},
{
"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"
},
{
"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"
},
{
"name": "StepperTitle.vue",
"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"
},
{
"name": "StepperTrigger.vue",
"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"
},
{
"name": "index.ts",
"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"
}
],
"type": "components:ui"
}