feat(Card): add size prop

docs/content/docs/2.components/card.md

@@ -56,6 +56,42 @@ slots:
 :placeholder{class="h-8"}
 ::
 
+### Size
+
+Use the `size` prop to change the size of the Card.
+
+::component-code
+---
+prettier: true
+hide:
+  - class
+props:
+  size: md
+  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

src/runtime/components/Card.vue

@@ -16,6 +16,10 @@ export interface CardProps {
    */
   variant?: Card['variants']['variant']
   class?: any
+  /**
+   * @defaultValue 'md'
+   */
+  size?: Card['variants']['size']
   ui?: Card['slots']
 }
 
@@ -38,7 +42,8 @@ const slots = defineSlots<CardSlots>()
 const appConfig = useAppConfig() as Card['AppConfig']
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })({
-  variant: props.variant
+  variant: props.variant,
+  size: props.size
 }))
 </script>
 

src/theme/card.ts

@@ -6,6 +6,33 @@ export default {
     footer: 'p-4 sm:px-6'
   },
   variants: {
+    size: {
+      xs: {
+        header: 'p-2 sm:px-4',
+        body: 'p-2 sm:p-4',
+        footer: 'p-2 sm:px-4'
+      },
+      sm: {
+        header: 'p-3 sm:px-5',
+        body: 'p-3 sm:p-5',
+        footer: 'p-3 sm:px-5'
+      },
+      md: {
+        header: 'p-4 sm:px-6',
+        body: 'p-4 sm:p-6',
+        footer: 'p-4 sm:px-6'
+      },
+      lg: {
+        header: 'p-5 sm:px-7',
+        body: 'p-5 sm:p-7',
+        footer: 'p-5 sm:px-7'
+      },
+      xl: {
+        header: 'p-6 sm:px-8',
+        body: 'p-6 sm:p-8',
+        footer: 'p-6 sm:px-8'
+      }
+    },
     variant: {
       solid: {
         root: 'bg-inverted text-inverted'
@@ -22,6 +49,7 @@ export default {
     }
   },
   defaultVariants: {
-    variant: 'outline'
+    variant: 'outline',
+    size: 'md'
   }
 }

test/components/Card.spec.ts

@@ -8,20 +8,28 @@
 
 describe('Card', () => {
   const variants = Object.keys(theme.variants.variant) as any
+  const sizes = Object.keys(theme.variants.size) as any
+
+  const slots = {
+    default: () => 'Default slot',
+    header: () => 'Header slot',
+    footer: () => 'Footer slot'
+  }
 
   it.each([
     // Props
     ['with as', { props: { as: 'section' } }],
     ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size }, slots }]),
     ['with class', { props: { class: 'rounded-xl' } }],
     ['with ui', { props: { ui: { body: 'font-bold' } } }],
     // Slots
-    ['with default slot', { slots: { default: () => 'Default slot' } }],
-    ['with header slot', { slots: { header: () => 'Header slot' } }],
-    ['with footer slot', { slots: { footer: () => 'Footer slot' } }]
+    ['with default slot', { slots: { default: slots.default }, props: { size: 'md' } }],
+    ['with header slot', { slots: { header: slots.header }, props: { size: 'md' } }],
+    ['with footer slot', { slots: { footer: slots.footer }, props: { size: 'md' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CardProps, slots?: Partial<CardSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Card)
     expect(html).toMatchSnapshot()
   })
 
   it('passes accessibility tests', async () => {