feat(card): add card-body functional component & card-img fixes

lib/components/card-img.js

@@ -8,6 +8,10 @@ export const props = {
     bottom: {
         type: Boolean,
         default: false
+    },
+    imgFluid: {
+        type: Boolean,
+        default: false
     }
 };
 
@@ -17,11 +21,11 @@ export default {
     render(h, { props, data, slots }) {
         let staticClass = "card-img";
         if (props.top) {
-            staticClass = "card-img-top";
+            staticClass += "-top";
         } else if (props.bottom) {
-            staticClass = "card-img-bottom";
+            staticClass += "-bottom";
         }
 
-        return h("img", mergeData(data, { staticClass }));
+        return h("img", mergeData(data, { staticClass, class: { "img-fluid": props.imgFluid } }));
     }
 };

lib/components/card.js

@@ -63,6 +63,10 @@ export const props = assign({}, headerProps, footerProps, {
         type: Boolean,
         default: false
     },
+    imgFluid: {
+        type: Boolean,
+        default: false
+    },
     overlay: {
         type: Boolean,
         default: false
@@ -73,20 +77,21 @@ export default {
     functional: true,
     props,
     render(h, { props, data, slots }) {
+        // The order of the conditionals matter.
+        // We are building the component markup in order.
         let childNodes = [],
-            variantPrefix = props.bordered ? "border-" : "bg-";
+            variantPrefix = props.bordered ? "border-" : "bg-",
+            img = slots().img;
 
-        // The order of these conditionals matter.
-        // We are building up the markup.
-        if (slots().img) {
-            childNodes.push(slots().img);
-        } else if (props.img) {
-            childNodes.push(
-                h(CardImg, {
-                    props: { top: props.imgTop, bottom: props.imgBottom },
-                    attrs: { src: props.img, alt: props.imgAlt }
-                })
-            );
+        if (!img && props.img) {
+            img = h(CardImg, {
+                props: { top: props.imgTop, bottom: props.imgBottom, imgFluid: props.imgFluid },
+                attrs: { src: props.img, alt: props.imgAlt }
+            });
+        }
+
+        if (img && (props.imgTop || !props.imgBottom)) {
+            childNodes.push(img);
         }
 
         if (props.header || slots().header) {
@@ -126,6 +131,10 @@ export default {
             childNodes.push(h(CardFooter, { props: pluckProps(footerProps, props) }, slots().footer));
         }
 
+        if (img && props.imgBottom) {
+            childNodes.push(img);
+        }
+
         return h(
             props.tag,
             mergeData(data, {