arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Card): add variant prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-02-14 19:23:07 +01:00
parent 7a56903f47
commit 847d4aa752
7 changed files with 151 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/content/3.components/card.md
View File

@@ -16,6 +16,42 @@ props:
---
::
### Variant
Use the `variant` prop to change the variant of the Card.
::component-code
---
prettier: true
hide:
- class
props:
variant: subtle
class: 'w-full'
slots:
header: |
<Placeholder class="h-8" />
default: |
<Placeholder class="h-32" />
footer: |
<Placeholder class="h-8" />
---
#header
:placeholder{class="h-8"}
#default
:placeholder{class="h-32"}
#footer
:placeholder{class="h-8"}
::
## API
### Props

12
playground/app/pages/components/card.vue
View File

@@ -1,6 +1,16 @@
<script setup lang="ts">
import theme from '#build/ui/card'
const variants = Object.keys(theme.variants.variant)
const variant = ref(theme.defaultVariants.variant)
</script>
<template>
<div class="flex flex-col gap-4">
<UCard class="w-96">
<USelect v-model="variant" :items="variants" />
<UCard :variant="variant" class="w-96">
<template #header>
<Placeholder class="h-8" />
</template>

8
src/runtime/components/Card.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/card'
@@ -9,12 +10,15 @@ const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof the
const card = tv({ extend: tv(theme), ...(appConfigCard.ui?.card || {}) })
type CardVariants = VariantProps<typeof card>
export interface CardProps {
/**
* The element or component this component should render as.
* @defaultValue 'div'
*/
as?: any
variant?: CardVariants['variant']
class?: any
ui?: Partial<typeof card.slots>
}
@@ -29,13 +33,13 @@ extendDevtoolsMeta({ example: 'CardExample' })
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { Primitive } from 'reka-ui'
const props = defineProps<CardProps>()
const slots = defineSlots<CardSlots>()
// eslint-disable-next-line vue/no-dupe-keys
const ui = card()
const ui = computed(() => card({ variant: props.variant }))
</script>
<template>

21
src/theme/card.ts
View File

@@ -1,8 +1,27 @@
export default {
slots: {
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]',
root: 'rounded-[calc(var(--ui-radius)*2)]',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-(--ui-bg-inverted) text-(--ui-bg)'
},
outline: {
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)'
},
soft: {
root: 'bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)'
},
subtle: {
root: 'bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)'
}
}
},
defaultVariants: {
variant: 'outline'
}
}

4
test/components/Card.spec.ts
View File

@@ -1,11 +1,15 @@
import { describe, it, expect } from 'vitest'
import Card, { type CardProps, type CardSlots } from '../../src/runtime/components/Card.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/card'
describe('Card', () => {
const variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with as', { props: { as: 'section' } }],
...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
['with class', { props: { class: 'rounded-xl' } }],
['with ui', { props: { ui: { body: 'font-bold' } } }],
// Slots

42
test/components/__snapshots__/Card-vue.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Card > renders with as correctly 1`] = `
"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with class correctly 1`] = `
`;
exports[`Card > renders with default slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<div class="p-4 sm:p-6">Default slot</div>
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with default slot correctly 1`] = `
`;
exports[`Card > renders with footer slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<div class="p-4 sm:px-6">Footer slot</div>
@@ -33,7 +33,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
`;
exports[`Card > renders with header slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<div class="p-4 sm:px-6">Header slot</div>
<!--v-if-->
<!--v-if-->
@@ -41,7 +41,39 @@ exports[`Card > renders with header slot correctly 1`] = `
`;
exports[`Card > renders with ui correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant outline correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant soft correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant solid correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant subtle correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->

42
test/components/__snapshots__/Card.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Card > renders with as correctly 1`] = `
"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with class correctly 1`] = `
`;
exports[`Card > renders with default slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<div class="p-4 sm:p-6">Default slot</div>
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with default slot correctly 1`] = `
`;
exports[`Card > renders with footer slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<div class="p-4 sm:px-6">Footer slot</div>
@@ -33,7 +33,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
`;
exports[`Card > renders with header slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<div class="p-4 sm:px-6">Header slot</div>
<!--v-if-->
<!--v-if-->
@@ -41,7 +41,39 @@ exports[`Card > renders with header slot correctly 1`] = `
`;
exports[`Card > renders with ui correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant outline correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant soft correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant solid correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant subtle correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->