feat: Added CCard coponents and export.

Author: woothu

src/components/Card/CCard.js

@@ -0,0 +1,47 @@
+import { mergeData } from 'vue-functional-data-merge'
+// import pluckProps from '../../utils/pluck-props'
+import { assign } from '../../utils/object'
+import cardCommon from '../../mixins/cardMixin'
+import CCardHeader from './CCardHeader'
+import CCardBody from './CCardBody'
+import CCardFooter from './CCardFooter'
+
+const props = assign(
+  cardCommon.props,
+  {
+    header: String,
+    body: String,
+    footer: String
+  }
+)
+export default {
+  functional: true,
+  name: 'CCard',
+  props,
+  render (h, { props, data, slots }) {
+    const $slots = slots()
+
+    if (!$slots.header && props.header)
+      $slots.header = h(CCardHeader, { domProps: { innerHTML: props.header }})
+
+    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,
+      mergeData(data, {
+        staticClass: 'card',
+        class: {
+          [`text-${props.align}`]: Boolean(props.align),
+          [`bg-${props.variant}`]: Boolean(props.variant),
+          [`border-${props.borderVariant}`]: Boolean(props.borderVariant),
+          [`text-${props.textVariant}`]: Boolean(props.textVariant)
+        }
+      }),
+      [ $slots.header, $slots.body || $slots.default, $slots.footer ]
+    )
+  }
+}

src/components/Card/CCardBody.js

@@ -0,0 +1,62 @@
+import { mergeData } from 'vue-functional-data-merge'
+import { assign } from '../../utils/object'
+import cardCommon from '../../mixins/cardMixin'
+
+export const props = assign(
+  cardCommon.props,
+  {
+    title: String,
+    titleTag: {
+      type: String,
+      default: 'h4'
+    },
+    subtitle: String,
+    subtitleTag: {
+      type: String,
+      default: 'h6'
+    },
+    body: String,
+    overlay: Boolean,
+  }
+)
+
+export default {
+  functional: true,
+  name: 'CCardBody',
+  props,
+  render (h, { props, data, children }) {
+    let cardTitle = h(false)
+    let cardSubtitle = h(false)
+    let cardContent = children || props.body || [ h(false) ]
+
+    if (props.title) {
+      cardTitle = h(props.titleTag, {
+        staticClass: 'card-title',
+        domProps: { innerHTML: props.title }
+      })
+    }
+
+    if (props.subtitle) {
+      cardSubtitle = h(props.subtitleTag, {
+        staticClass: 'card-subtitle mb-2 text-muted',
+        domProps: { innerHTML: props.subtitle }
+      })
+    }
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'card-body',
+        class: [
+          {
+            'card-img-overlay': props.overlay,
+            [`bg-${props.variant}`]: Boolean(props.variant),
+            [`border-${props.borderVariant}`]: Boolean(props.borderVariant),
+            [`text-${props.textVariant}`]: Boolean(props.textVariant)
+          }
+        ]
+      }),
+      [ cardTitle, cardSubtitle, ...cardContent ]
+    )
+  }
+}

src/components/Card/CCardFooter.js

@@ -0,0 +1,33 @@
+import { mergeData } from 'vue-functional-data-merge'
+import { assign } from '../../utils/object'
+import cardCommon from '../../mixins/cardMixin'
+
+export const props = assign(
+  cardCommon.props,
+  {
+    footer:  String,
+  }
+)
+
+export default {
+  functional: true,
+  name: 'CCardFooter',
+  props,
+  render (h, { props, data, children }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'card-footer',
+        class: [
+          {
+            [`text-${props.align}`]: Boolean(props.align),
+            [`bg-${props.variant}`]: Boolean(props.variant),
+            [`border-${props.borderVariant}`]: Boolean(props.borderVariant),
+            [`text-${props.textVariant}`]: Boolean(props.textVariant)
+          }
+        ]
+      }),
+      children || [h('div', { domProps: { innerHTML: props.footer } })]
+    )
+  }
+}

src/components/Card/CCardGroup.js

@@ -0,0 +1,23 @@
+import { mergeData } from 'vue-functional-data-merge'
+
+export const props = {
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  deck:  Boolean,
+  columns: Boolean,
+}
+export default {
+  functional: true,
+  name: 'CCardGroup',
+  props,
+  render (h, { props, data, children }) {
+    let staticClass = 'card-group'
+    if (props.columns)
+      staticClass = 'card-columns'
+    if (props.deck)
+      staticClass = 'card-deck'
+    return h(props.tag, mergeData(data, { staticClass }), children)
+  }
+}

src/components/Card/CCardHeader.js

@@ -0,0 +1,33 @@
+import { mergeData } from 'vue-functional-data-merge'
+import { assign } from '../../utils/object'
+import cardCommon from '../../mixins/cardMixin'
+
+export const props = assign(
+  cardCommon.props,
+  {
+    header: String
+  }
+)
+
+export default {
+  functional: true,
+  name: 'CCardHeader',
+  props,
+  render (h, { props, data, children }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'card-header',
+        class: [
+          {
+            [`text-${props.align}`]: Boolean(props.align),
+            [`bg-${props.variant}`]: Boolean(props.variant),
+            [`border-${props.borderVariant}`]: Boolean(props.borderVariant),
+            [`text-${props.textVariant}`]: Boolean(props.textVariant)
+          }
+        ]
+      }),
+      children || [h('div', { domProps: { innerHTML: props.header } })]
+    )
+  }
+}

src/components/Card/CCardImg.js

@@ -0,0 +1,39 @@
+import {mergeData} from 'vue-functional-data-merge'
+
+export const props = {
+  imgSrc: String,
+  imgAlt: String,
+  imgTop: Boolean,
+  imgBottom: Boolean,
+  imgLeft:  Boolean,
+  imgRight: Boolean,
+  imgHeight: String,
+  imgWidth: String,
+  imgFluid: Boolean
+}
+
+export default {
+  functional: true,
+  name: 'CCardImg',
+  props,
+  render (h, {props, data}) {
+    let staticClass = 'card-img'
+    if (props.imgTop)
+      staticClass += '-top'
+    else if (props.imgRight)
+      staticClass += '-right'
+    else if (props.imgBottom)
+      staticClass += '-bottom'
+    else if (props.imgLeft)
+      staticClass += '-left'
+
+    return h(
+      'img',
+      mergeData(data, {
+        staticClass,
+        class: {'img-fluid': props.imgFluid},
+        attrs: {src: props.imgSrc, alt: props.imgAlt, height: props.imgHeight, width: props.imgWidth}
+      })
+    )
+  }
+}

src/components/Card/index.js

@@ -0,0 +1,15 @@
+import CCardGroup from './CCardGroup'
+import CCard from './CCard'
+import CCardBody from './CCardBody'
+import CCardFooter from './CCardFooter'
+import CCardHeader from './CCardHeader'
+import CCardImg from './CCardImg'
+
+export {
+  CCardGroup,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCardImg
+}

src/components/index.js

@@ -13,3 +13,4 @@ export * from './Badge'
 export * from './Progress'
 export * from './Alert'
 export * from './Button'
+export * from './Card'

src/mixins/cardMixin.js

@@ -0,0 +1,12 @@
+export default {
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    variant: String,
+    borderVariant: String,
+    textVariant: String,
+    align: String
+  }
+}