fix: makes Card components susceptible to external attributes (e.g. s…

…tyle/class)

src/components/Card/Card.tsx

@@ -1,10 +1,17 @@
 import * as tsx from 'vue-tsx-support';
 import { CreateElement, VNode } from 'vue';
+import { mergeCss } from '../../utils/css';
 
 export const Card = tsx.component({
   name: 'Card',
   functional: true,
-  render(h: CreateElement, { children }): VNode {
-    return <div staticClass="card">{children}</div>;
+  render(h: CreateElement, { children, data }): VNode {
+    const cssClass = mergeCss(data, 'card');
+
+    return (
+      <div {...data} class={cssClass}>
+        {children}
+      </div>
+    );
   },
 });

src/components/Card/CardBody.tsx

@@ -1,10 +1,17 @@
 import * as tsx from 'vue-tsx-support';
 import { CreateElement, VNode } from 'vue';
+import { mergeCss } from '../../utils/css';
 
 export const CardBody = tsx.component({
   name: 'CardBody',
   functional: true,
-  render(h: CreateElement, { children }): VNode {
-    return <div staticClass="card-body">{children}</div>;
+  render(h: CreateElement, { children, data }): VNode {
+    const cssClass = mergeCss(data, 'card-body');
+
+    return (
+      <div {...data} class={cssClass}>
+        {children}
+      </div>
+    );
   },
 });

src/components/Card/CardFooter.tsx

@@ -1,10 +1,17 @@
 import * as tsx from 'vue-tsx-support';
 import { CreateElement, VNode } from 'vue';
+import { mergeCss } from '../../utils/css';
 
 export const CardFooter = tsx.component({
   name: 'CardFooter',
   functional: true,
-  render(h: CreateElement, { children }): VNode {
-    return <div staticClass="card-footer">{children}</div>;
+  render(h: CreateElement, { children, data }): VNode {
+    const cssClass = mergeCss(data, 'card-footer');
+
+    return (
+      <div {...data} class={cssClass}>
+        {children}
+      </div>
+    );
   },
 });

src/components/Card/CardHeader.tsx

@@ -1,10 +1,17 @@
 import * as tsx from 'vue-tsx-support';
 import { CreateElement, VNode } from 'vue';
+import { mergeCss } from '../../utils/css';
 
 export const CardHeader = tsx.component({
   name: 'CardHeader',
   functional: true,
-  render(h: CreateElement, { children }): VNode {
-    return <div staticClass="card-header">{children}</div>;
+  render(h: CreateElement, { children, data }): VNode {
+    const cssClass = mergeCss(data, 'card-header');
+
+    return (
+      <div {...data} class={cssClass}>
+        {children}
+      </div>
+    );
   },
 });

src/components/Card/CardImage.tsx

@@ -1,15 +1,18 @@
 import * as tsx from 'vue-tsx-support';
 import { CreateElement, VNode } from 'vue';
+import { mergeCss } from '../../utils/css';
 
 export const CardImage = tsx.component({
   name: 'CardImage',
   functional: true,
   props: {
     img: { type: String, required: true },
   },
-  render(h: CreateElement, { props }): VNode {
+  render(h: CreateElement, { props, data }): VNode {
+    const cssClass = mergeCss(data, 'card-image');
+
     return (
-      <div staticClass="card-image">
+      <div {...data} class={cssClass}>
         <img src={props.img} staticClass="img-responsive" />
       </div>
     );