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,11 +8,13 @@
 
 describe('Card', () => {
   const variants = Object.keys(theme.variants.variant) as any
+  const sizes = Object.keys(theme.variants.size) as any
 
   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 } }]),
     ['with class', { props: { class: 'rounded-xl' } }],
     ['with ui', { props: { ui: { body: 'font-bold' } } }],
     // Slots
@@ -21,7 +23,7 @@
     ['with footer slot', { slots: { footer: () => 'Footer slot' } }]
   ])('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 () => {

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

@@ -40,6 +40,46 @@ exports[`Card > renders with header slot correctly 1`] = `
 </div>"
 `;
 
+exports[`Card > renders with size lg correctly 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with size md correctly 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with size sm correctly 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with size xl correctly 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with size xs correctly 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Card > renders with ui correctly 1`] = `
 "<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default">
   <!--v-if-->