feat: CRow, CContainer: add tag prop, change prop names in CRow

Author: woothu

src/components/Grid/CContainer.vue

@@ -6,10 +6,11 @@ export default {
   name: 'CContainer',
   props: {
     fluid: Boolean,
+    tag: String
   },
   render (h, { props, data, children }) {
     return h(
-      'div',
+      props.tag || 'div',
       mergeData(data, {
         class: {
           'container': !props.fluid,

src/components/Grid/CRow.vue

@@ -2,12 +2,13 @@
 import { mergeData } from 'vue-functional-data-merge'
 
 const props = {
+  tag: String,
   noGutters: Boolean,
-  alignV: {
+  alignVertical: {
     type: String,
     validator: str => ['', 'start', 'end', 'center','baseline', 'stretch'].includes(str)
   },
-  alignH: {
+  alignHorizontal: {
     type: String,
     validator: str => ['', 'start', 'end', 'center','between', 'around'].includes(str)
   }
@@ -19,13 +20,13 @@ export default {
   props,
   render (h, { props, data, children }) {
     return h(
-      'div',
+      props.tag || 'div',
       mergeData(data, {
         staticClass: 'row',
         class: {
           'no-gutters': props.noGutters,
-          [`align-items-${props.alignV}`]: props.alignV,
-          [`justify-content-${props.alignH}`]: props.alignH,
+          [`align-items-${props.alignVertical}`]: props.alignVertical,
+          [`justify-content-${props.alignHorizontal}`]: props.alignHorizontal,
         }
       }),
       children

src/components/Grid/tests/CContainer.spec.js

@@ -6,6 +6,7 @@ const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
     fluid: true,
+    tag: 'header'
   },
   slots: {
     default: 'CContainer content'

src/components/Grid/tests/CRow.spec.js

@@ -5,9 +5,10 @@ const ComponentName = 'CRow'
 const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
+    tag: 'header',
     noGutters: true,
-    alignV: 'center',
-    alignH: 'start'
+    alignVertical: 'center',
+    alignHorizontal: 'start'
   },
   slots: {
     default: 'CRow content'

src/components/Grid/tests/__snapshots__/CContainer.spec.js.snap

@@ -7,11 +7,11 @@ exports[`CContainer renders correctly 1`] = `
 `;
 
 exports[`CContainer renders correctly 2`] = `
-<div
+<header
   class="container-fluid"
 >
   <template>
     CContainer content
   </template>
-</div>
+</header>
 `;

src/components/Grid/tests/__snapshots__/CRow.spec.js.snap

@@ -7,11 +7,11 @@ exports[`CRow renders correctly 1`] = `
 `;
 
 exports[`CRow renders correctly 2`] = `
-<div
+<header
   class="row no-gutters align-items-center justify-content-start"
 >
   <template>
     CRow content
   </template>
-</div>
+</header>
 `;

src/components/index.d.ts

@@ -284,12 +284,14 @@ export declare class CCol extends Vue {
 
 export declare class CContainer extends Vue {
   fluid: boolean
+  tag: string
 }
 
 export declare class CRow extends Vue {
+  tag: string
   noGutters: boolean
-  alignV: string
-  alignH: string
+  alignVertical: string
+  alignHorizontal: string
 }
 
 export declare class CHeader extends Vue {