refactor: Card components modifications

Author: woothu

src/components/Card/CCard.js

@@ -1,17 +1,17 @@
 import { mergeData } from 'vue-functional-data-merge'
-// import pluckProps from '../../utils/pluck-props'
 import { assign } from '../../utils/object'
-import cardCommon from '../../mixins/cardMixin'
+import sharedCardProps from './sharedCardProps'
 import CCardHeader from './CCardHeader'
 import CCardBody from './CCardBody'
 import CCardFooter from './CCardFooter'
 
 const props = assign(
-  cardCommon.props,
+  sharedCardProps.props,
   {
     header: String,
     body: String,
-    footer: String
+    footer: String,
+    noWrapper: Boolean
   }
 )
 export default {
@@ -24,14 +24,16 @@ export default {
     if (!$slots.header && props.header)
       $slots.header = h(CCardHeader, { domProps: { innerHTML: props.header }})
 
-    if (!$slots.body &&  !$slots.default && props.body)
+    if (!$slots.body && $slots.default)
+      $slots.body = props.noWrapper ? $slots.default : h(CCardBody, $slots.default)
+    else if (!$slots.body &&  !$slots.default && props.body)
       $slots.body = h(CCardBody, { domProps: { innerHTML: props.body }})
 
     if (!$slots.footer && props.footer)
       $slots.footer = h(CCardFooter, { domProps: { innerHTML: props.footer }})
 
     return h(
-      props.tag,
+      props.tag || 'div',
       mergeData(data, {
         staticClass: 'card',
         class: {
@@ -41,7 +43,7 @@ export default {
           [`text-${props.textVariant}`]: Boolean(props.textVariant)
         }
       }),
-      [ $slots.header, $slots.body || $slots.default, $slots.footer ]
+      [ $slots.header, $slots.body, $slots.footer ]
     )
   }
 }

src/components/Card/CCardBody.js

@@ -1,9 +1,9 @@
 import { mergeData } from 'vue-functional-data-merge'
 import { assign } from '../../utils/object'
-import cardCommon from '../../mixins/cardMixin'
+import sharedCardProps from './sharedCardProps'
 
 export const props = assign(
-  cardCommon.props,
+  sharedCardProps.props,
   {
     title: String,
     titleTag: {
@@ -44,7 +44,7 @@ export default {
     }
 
     return h(
-      props.tag,
+      props.tag || 'div',
       mergeData(data, {
         staticClass: 'card-body',
         class: [

src/components/Card/CCardFooter.js

@@ -1,9 +1,9 @@
 import { mergeData } from 'vue-functional-data-merge'
 import { assign } from '../../utils/object'
-import cardCommon from '../../mixins/cardMixin'
+import sharedCardProps from './sharedCardProps'
 
 export const props = assign(
-  cardCommon.props,
+  sharedCardProps.props,
   {
     footer:  String,
   }
@@ -15,7 +15,7 @@ export default {
   props,
   render (h, { props, data, children }) {
     return h(
-      props.tag,
+      props.tag || 'footer',
       mergeData(data, {
         staticClass: 'card-footer',
         class: [

src/components/Card/CCardGroup.js

@@ -1,10 +1,7 @@
 import { mergeData } from 'vue-functional-data-merge'
 
 export const props = {
-  tag: {
-    type: String,
-    default: 'div'
-  },
+  tag: String,
   deck:  Boolean,
   columns: Boolean,
 }
@@ -18,6 +15,6 @@ export default {
       staticClass = 'card-columns'
     if (props.deck)
       staticClass = 'card-deck'
-    return h(props.tag, mergeData(data, { staticClass }), children)
+    return h(props.tag || 'div' , mergeData(data, { staticClass }), children)
   }
 }

src/components/Card/CCardHeader.js

@@ -1,9 +1,9 @@
 import { mergeData } from 'vue-functional-data-merge'
 import { assign } from '../../utils/object'
-import cardCommon from '../../mixins/cardMixin'
+import sharedCardProps from './sharedCardProps'
 
 export const props = assign(
-  cardCommon.props,
+  sharedCardProps.props,
   {
     header: String
   }
@@ -15,7 +15,7 @@ export default {
   props,
   render (h, { props, data, children }) {
     return h(
-      props.tag,
+      props.tag || 'header',
       mergeData(data, {
         staticClass: 'card-header',
         class: [

src/components/Card/CCardImg.js

@@ -1,6 +1,7 @@
-import {mergeData} from 'vue-functional-data-merge'
+import { mergeData } from 'vue-functional-data-merge'
 
 export const props = {
+  tag: String,
   imgSrc: String,
   imgAlt: String,
   imgTop: Boolean,
@@ -28,7 +29,7 @@ export default {
       staticClass += '-left'
 
     return h(
-      'img',
+      props.tag || 'img',
       mergeData(data, {
         staticClass,
         class: {'img-fluid': props.imgFluid},

src/mixins/cardMixin.js renamed to src/components/Card/sharedCardProps.js

@@ -1,12 +1,12 @@
 export default {
   props: {
-    tag: {
-      type: String,
-      default: 'div'
-    },
+    tag: String,
     variant: String,
     borderVariant: String,
     textVariant: String,
-    align: String
+    align: {
+      type: String,
+      validator: val => ['', 'left', 'center', 'right'].includes(val)
+    }
   }
 }