Skip to content

Commit 847d4aa

Browse files
benjamincanacbenjamincanac
committedFeb 14, 2025·
feat(Card): add variant prop
·
v3.0.2v3.0.0-alpha.13
1 parent 7a56903 commit 847d4aa

File tree

7 files changed

+151
-14
lines changed

7 files changed

+151
-14
lines changed
 

‎docs/content/3.components/card.md

+36
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,42 @@ props:
1616
---
1717
::
1818

19+
### Variant
20+
21+
Use the `variant` prop to change the variant of the Card.
22+
23+
::component-code
24+
---
25+
prettier: true
26+
hide:
27+
- class
28+
props:
29+
variant: subtle
30+
class: 'w-full'
31+
slots:
32+
header: |
33+
34+
<Placeholder class="h-8" />
35+
36+
default: |
37+
38+
<Placeholder class="h-32" />
39+
40+
footer: |
41+
42+
<Placeholder class="h-8" />
43+
---
44+
45+
#header
46+
:placeholder{class="h-8"}
47+
48+
#default
49+
:placeholder{class="h-32"}
50+
51+
#footer
52+
:placeholder{class="h-8"}
53+
::
54+
1955
## API
2056

2157
### Props

‎playground/app/pages/components/card.vue

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1+
<script setup lang="ts">
2+
import theme from '#build/ui/card'
3+
4+
const variants = Object.keys(theme.variants.variant)
5+
6+
const variant = ref(theme.defaultVariants.variant)
7+
</script>
8+
19
<template>
210
<div class="flex flex-col gap-4">
3-
<UCard class="w-96">
11+
<USelect v-model="variant" :items="variants" />
12+
13+
<UCard :variant="variant" class="w-96">
414
<template #header>
515
<Placeholder class="h-8" />
616
</template>

‎src/runtime/components/Card.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import type { VariantProps } from 'tailwind-variants'
23
import type { AppConfig } from '@nuxt/schema'
34
import _appConfig from '#build/app.config'
45
import theme from '#build/ui/card'
@@ -9,12 +10,15 @@ const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof the
910
1011
const card = tv({ extend: tv(theme), ...(appConfigCard.ui?.card || {}) })
1112
13+
type CardVariants = VariantProps<typeof card>
14+
1215
export interface CardProps {
1316
/**
1417
* The element or component this component should render as.
1518
* @defaultValue 'div'
1619
*/
1720
as?: any
21+
variant?: CardVariants['variant']
1822
class?: any
1923
ui?: Partial<typeof card.slots>
2024
}
@@ -29,13 +33,13 @@ extendDevtoolsMeta({ example: 'CardExample' })
2933
</script>
3034

3135
<script setup lang="ts">
36+
import { computed } from 'vue'
3237
import { Primitive } from 'reka-ui'
3338
3439
const props = defineProps<CardProps>()
3540
const slots = defineSlots<CardSlots>()
3641
37-
// eslint-disable-next-line vue/no-dupe-keys
38-
const ui = card()
42+
const ui = computed(() => card({ variant: props.variant }))
3943
</script>
4044

4145
<template>

‎src/theme/card.ts

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
export default {
22
slots: {
3-
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]',
3+
root: 'rounded-[calc(var(--ui-radius)*2)]',
44
header: 'p-4 sm:px-6',
55
body: 'p-4 sm:p-6',
66
footer: 'p-4 sm:px-6'
7+
},
8+
variants: {
9+
variant: {
10+
solid: {
11+
root: 'bg-(--ui-bg-inverted) text-(--ui-bg)'
12+
},
13+
outline: {
14+
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)'
15+
},
16+
soft: {
17+
root: 'bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)'
18+
},
19+
subtle: {
20+
root: 'bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)'
21+
}
22+
}
23+
},
24+
defaultVariants: {
25+
variant: 'outline'
726
}
827
}

‎test/components/Card.spec.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { describe, it, expect } from 'vitest'
22
import Card, { type CardProps, type CardSlots } from '../../src/runtime/components/Card.vue'
33
import ComponentRender from '../component-render'
4+
import theme from '#build/ui/card'
45

56
describe('Card', () => {
7+
const variants = Object.keys(theme.variants.variant) as any
8+
69
it.each([
710
// Props
811
['with as', { props: { as: 'section' } }],
12+
...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
913
['with class', { props: { class: 'rounded-xl' } }],
1014
['with ui', { props: { ui: { body: 'font-bold' } } }],
1115
// Slots

‎test/components/__snapshots__/Card-vue.spec.ts.snap

+37-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`Card > renders with as correctly 1`] = `
4-
"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
4+
"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
55
<!--v-if-->
66
<!--v-if-->
77
<!--v-if-->
@@ -17,31 +17,63 @@ exports[`Card > renders with class correctly 1`] = `
1717
`;
1818

1919
exports[`Card > renders with default slot correctly 1`] = `
20-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
20+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
2121
<!--v-if-->
2222
<div class="p-4 sm:p-6">Default slot</div>
2323
<!--v-if-->
2424
</div>"
2525
`;
2626

2727
exports[`Card > renders with footer slot correctly 1`] = `
28-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
28+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
2929
<!--v-if-->
3030
<!--v-if-->
3131
<div class="p-4 sm:px-6">Footer slot</div>
3232
</div>"
3333
`;
3434

3535
exports[`Card > renders with header slot correctly 1`] = `
36-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
36+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
3737
<div class="p-4 sm:px-6">Header slot</div>
3838
<!--v-if-->
3939
<!--v-if-->
4040
</div>"
4141
`;
4242

4343
exports[`Card > renders with ui correctly 1`] = `
44-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
44+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
45+
<!--v-if-->
46+
<!--v-if-->
47+
<!--v-if-->
48+
</div>"
49+
`;
50+
51+
exports[`Card > renders with variant outline correctly 1`] = `
52+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
53+
<!--v-if-->
54+
<!--v-if-->
55+
<!--v-if-->
56+
</div>"
57+
`;
58+
59+
exports[`Card > renders with variant soft correctly 1`] = `
60+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
61+
<!--v-if-->
62+
<!--v-if-->
63+
<!--v-if-->
64+
</div>"
65+
`;
66+
67+
exports[`Card > renders with variant solid correctly 1`] = `
68+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
69+
<!--v-if-->
70+
<!--v-if-->
71+
<!--v-if-->
72+
</div>"
73+
`;
74+
75+
exports[`Card > renders with variant subtle correctly 1`] = `
76+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
4577
<!--v-if-->
4678
<!--v-if-->
4779
<!--v-if-->

‎test/components/__snapshots__/Card.spec.ts.snap

+37-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`Card > renders with as correctly 1`] = `
4-
"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
4+
"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
55
<!--v-if-->
66
<!--v-if-->
77
<!--v-if-->
@@ -17,31 +17,63 @@ exports[`Card > renders with class correctly 1`] = `
1717
`;
1818

1919
exports[`Card > renders with default slot correctly 1`] = `
20-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
20+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
2121
<!--v-if-->
2222
<div class="p-4 sm:p-6">Default slot</div>
2323
<!--v-if-->
2424
</div>"
2525
`;
2626

2727
exports[`Card > renders with footer slot correctly 1`] = `
28-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
28+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
2929
<!--v-if-->
3030
<!--v-if-->
3131
<div class="p-4 sm:px-6">Footer slot</div>
3232
</div>"
3333
`;
3434

3535
exports[`Card > renders with header slot correctly 1`] = `
36-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
36+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
3737
<div class="p-4 sm:px-6">Header slot</div>
3838
<!--v-if-->
3939
<!--v-if-->
4040
</div>"
4141
`;
4242

4343
exports[`Card > renders with ui correctly 1`] = `
44-
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
44+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
45+
<!--v-if-->
46+
<!--v-if-->
47+
<!--v-if-->
48+
</div>"
49+
`;
50+
51+
exports[`Card > renders with variant outline correctly 1`] = `
52+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
53+
<!--v-if-->
54+
<!--v-if-->
55+
<!--v-if-->
56+
</div>"
57+
`;
58+
59+
exports[`Card > renders with variant soft correctly 1`] = `
60+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
61+
<!--v-if-->
62+
<!--v-if-->
63+
<!--v-if-->
64+
</div>"
65+
`;
66+
67+
exports[`Card > renders with variant solid correctly 1`] = `
68+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
69+
<!--v-if-->
70+
<!--v-if-->
71+
<!--v-if-->
72+
</div>"
73+
`;
74+
75+
exports[`Card > renders with variant subtle correctly 1`] = `
76+
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
4577
<!--v-if-->
4678
<!--v-if-->
4779
<!--v-if-->

0 commit comments

Comments
 (0)
Please sign in to comment.