feat(Card): new component

src/runtime/components/Card.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/card'
+
+const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
+
+const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
+
+export interface CardProps {
+  as?: string
+  class?: any
+  ui?: Partial<typeof card.slots>
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<CardProps>(), { as: 'div' })
+
+const ui = computed(() => tv({ extend: card, slots: props.ui })())
+</script>
+
+<template>
+  <component :is="as" :class="ui.root({ class: props.class })">
+    <div v-if="$slots.header" :class="ui.header()">
+      <slot name="header" />
+    </div>
+
+    <div v-if="$slots.default" :class="ui.body()">
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" :class="ui.footer()">
+      <slot name="footer" />
+    </div>
+  </component>
+</template>

src/theme/card.ts

@@ -0,0 +1,8 @@
+export default {
+  slots: {
+    root: 'bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow',
+    header: 'p-4 sm:px-6',
+    body: 'px-4 py-5 sm:p-6',
+    footer: 'p-4 sm:px-6'
+  }
+}

src/theme/index.ts

@@ -1,6 +1,7 @@
 export { default as avatar } from './avatar'
 export { default as badge } from './badge'
 export { default as button } from './button'
+export { default as card } from './card'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
 export { default as icons } from './icons'

test/components/Card.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import Card, { type CardProps } from '../../src/runtime/components/Card.vue'
+import ComponentRender from '../component-render'
+
+describe('Card', () => {
+  it.each([
+    ['basic case', {}],
+    ['with default slot', { slots: { default: () => 'Default slot' } }],
+    ['with header slot', { slots: { header: () => 'Header slot' } }],
+    ['with footer slot', { slots: { footer: () => 'Footer slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CardProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Card)
+    expect(html).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Card > renders basic case correctly 1`] = `
+"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with default slot correctly 1`] = `
+"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
+  <!--v-if-->
+  <div class="px-4 py-5 sm:p-6">Default slot</div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with footer slot correctly 1`] = `
+"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
+  <!--v-if-->
+  <!--v-if-->
+  <div class="p-4 sm:px-6">Footer slot</div>
+</div>"
+`;
+
+exports[`Card > renders with header slot correctly 1`] = `
+"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
+  <div class="p-4 sm:px-6">Header slot</div>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;