feat: add additional Card components

- (CCard) Img, ImgOverlay, Title, Subtitle, Text, Link

Author: woothu

src/components/Card/CCardImg.vue

@@ -0,0 +1,31 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+import CImg from '../Image/CImg'
+const props = Object.assign(
+  { 
+    placement: {
+      type: String,
+      default: 'full',
+      validator: val => ['', 'top', 'bottom', 'full'].includes(val)
+    }
+  },
+  CImg.props
+)
+
+export default {
+  functional: true,
+  name: 'CCardImg',
+  props,
+  render (h, { props, data, children }) {
+    const haveClassSuffix = ['bottom', 'top'].includes(props.placement)
+    return h(
+      CImg,
+      mergeData(data, {
+        class: `card-img${haveClassSuffix ? `-${props.placement}` : ''}`,
+        props
+      }),
+      children
+    )
+  }
+}
+</script>

src/components/Card/CCardImgOverlay.vue

@@ -0,0 +1,20 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+
+export default {
+  functional: true,
+  name: 'CCardImgOverlay',
+  props: {
+    tag: String
+  },
+  render (h, { props, data, children }) {
+    return h(
+      props.tag || 'div',
+      mergeData(data, {
+        staticClass: 'card-img-overlay'
+      }),
+      children
+    )
+  }
+}
+</script>

src/components/Card/CCardLink.vue

@@ -0,0 +1,20 @@
+<script>
+import CLink, { props } from '../Link/CLink'
+import { mergeData } from 'vue-functional-data-merge'
+
+export default {
+  functional: true,
+  name: 'CCardLink',
+  props,
+  render (h, { props, data, children }) {
+    return h(
+      CLink,
+      mergeData(data, {
+        staticClass: 'card-link',
+        props
+      }),
+      children
+    )
+  }
+}
+</script>

src/components/Card/CCardSubtitle.vue

@@ -0,0 +1,20 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+
+export default {
+  functional: true,
+  name: 'CCardSubtitle',
+  props: {
+    tag: String
+  },
+  render (h, { props, data, children }) {
+    return h(
+      props.tag || 'h6',
+      mergeData(data, {
+        staticClass: 'card-subtitle'
+      }),
+      children
+    )
+  }
+}
+</script>

src/components/Card/CCardText.vue

@@ -0,0 +1,20 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+
+export default {
+  functional: true,
+  name: 'CCardText',
+  props: {
+    tag: String
+  },
+  render (h, { props, data, children }) {
+    return h(
+      props.tag || 'p',
+      mergeData(data, {
+        staticClass: 'card-text'
+      }),
+      children
+    )
+  }
+}
+</script>

src/components/Card/CCardTitle.vue

@@ -0,0 +1,20 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+
+export default {
+  functional: true,
+  name: 'CCardTitle',
+  props: {
+    tag: String
+  },
+  render (h, { props, data, children }) {
+    return h(
+      props.tag || 'h4',
+      mergeData(data, {
+        staticClass: 'card-title'
+      }),
+      children
+    )
+  }
+}
+</script>

src/components/Card/index.js

@@ -3,11 +3,23 @@ import CCard from './CCard'
 import CCardBody from './CCardBody'
 import CCardFooter from './CCardFooter'
 import CCardHeader from './CCardHeader'
+import CCardTitle from './CCardTitle'
+import CCardSubtitle from './CCardSubtitle'
+import CCardText from './CCardText'
+import CCardImg from './CCardImg'
+import CCardImgOverlay from './CCardImgOverlay'
+import CCardLink from './CCardLink'
 
 export {
   CCardGroup,
   CCard,
   CCardBody,
   CCardFooter,
-  CCardHeader
+  CCardHeader,
+  CCardTitle,
+  CCardSubtitle,
+  CCardText,
+  CCardImg,
+  CCardImgOverlay,
+  CCardLink
 }

src/components/index.d.ts

@@ -72,26 +72,37 @@ export declare class CCard extends CardSharedClasses {
   bodyWrapper: boolean
 }
 
-export declare class CCardBody extends CardSharedClasses {
-  titleHtml: string
-  titleTag: string
-  subtitleHtml: string
-  subtitleTag: string
-  bodyHtml: string
-  overlay: boolean
+export declare class CCardBody extends CardSharedClasses {}
+
+export declare class CCardFooter extends CardSharedClasses {}
+
+export declare class CCardHeader extends CardSharedClasses {}
+
+export declare class CCardImg extends CImg { 
+  placement: string
 }
 
-export declare class CCardFooter extends CardSharedClasses {
-  footerHtml:  string
+export declare class CCardImgOverlay extends Vue {
+  tag: string
 }
 
-export declare class CCardHeader extends CardSharedClasses {
-  headerHtml: string
+export declare class CCardLink extends CLink {}
+
+export declare class CCardSubtitle extends Vue {
+  tag: string
+}
+
+export declare class CCardTitle extends Vue {
+  tag: string
+}
+
+export declare class CCardtext extends Vue {
+  tag: string
 }
 
 export declare class CCardGroup extends Vue {
   tag: string
-  deck:  boolean
+  deck: boolean
   columns: boolean
 }