refactor: delete html props in components

Author: woothu

src/components/badge/CBadge.vue

@@ -2,7 +2,7 @@
 import { mergeData } from 'vue-functional-data-merge'
 import CLink, { props as linkProps } from '../link/CLink'
 
-const props = Object.assign(linkProps, {
+const props = Object.assign({}, linkProps, {
   tag: {
     type: String,
     default: 'span'

src/components/card/CCard.vue

@@ -1,16 +1,11 @@
 <script>
 import { mergeData } from 'vue-functional-data-merge'
 import sharedCardProps from './shared-card-props'
-import CCardHeader from './CCardHeader'
 import CCardBody from './CCardBody'
-import CCardFooter from './CCardFooter'
 
 const props = Object.assign(
   sharedCardProps,
   {
-    headerHtml: String,
-    bodyHtml: String,
-    footerHtml: String,
     bodyWrapper: Boolean,
     accentColor: String
   }
@@ -20,23 +15,8 @@ export default {
   name: 'CCard',
   props,
   render (h, { props, data, slots }) {
-    let header = h(false)
-    let main = slots().default
-    let footer = h(false)
-
-    if (props.headerHtml) {
-      header = h(CCardHeader, { domProps: { innerHTML: props.headerHtml }})
-    }
-
-    if (main === undefined && props.bodyHtml) {
-      main = h(CCardBody, { domProps: { innerHTML: props.bodyHtml }})
-    } else if (props.bodyWrapper) {
-      main = h(CCardBody, main)
-    }
-
-    if (props.footerHtml) {
-      footer = h(CCardFooter, { domProps: { innerHTML: props.footerHtml }})
-    }
+    const slot = slots().default
+    const content = props.bodyWrapper ? h(CCardBody, slot) : slot
 
     return h(
       props.tag || 'div',
@@ -50,7 +30,7 @@ export default {
           [`text-${props.textColor}`]: props.textColor
         }
       }),
-      [ header, main, footer ]
+      [content]
     )
   }
 }

src/components/card/CCardFooter.vue

@@ -20,7 +20,7 @@ export default {
           }
         ]
       }),
-      children || [h('div', { domProps: { innerHTML: props.footerHtml } })]
+      children
     )
   }
 }

src/components/card/CCardHeader.vue

@@ -20,7 +20,7 @@ export default {
           }
         ]
       }),
-      children || [h('div', { domProps: { innerHTML: props.headerHtml } })]
+      children
     )
   }
 }

src/components/card/tests/CCard.spec.js

@@ -8,10 +8,7 @@ const wrapper = mount(Component, {
       align: 'left',
       color: 'success',
       textColor: 'white',
-      borderColor: 'solid',
-      headerHtml: 'header',
-      footerHtml: 'footer',
-      bodyHtml: 'body'
+      borderColor: 'solid'
     }
   }
 })
@@ -31,14 +28,7 @@ const slotWrapper = mount(Component, {
   }
 })
 
-const noBodyCard = mount(Component, {
-  context: {
-    props: {
-      headerHtml: 'header',
-      footerHtml: 'footer'
-    }
-  }
-})
+const noBodyCard = mount(Component, {})
 
 describe(ComponentName, () => {
   it('has a name', () => {

src/components/card/tests/CCardBody.spec.js

@@ -8,10 +8,7 @@ const wrapper = mount(Component, {
       align: 'left',
       color: 'primary',
       textColor: 'white',
-      borderColor: 'solid',
-      titleHtml: 'title',
-      subtitleHtml: 'subtitle',
-      bodyHtml: 'body content'
+      borderColor: 'solid'
     }
   }
 })

src/components/card/tests/__snapshots__/CCard.spec.js.snap

@@ -3,52 +3,23 @@
 exports[`CCard renders correctly 1`] = `
 <div
   class="card text-left bg-success border-solid text-white"
->
-  <header
-    class="card-header"
-  >
-    header
-  </header>
-  <div
-    class="card-body"
-  >
-    body
-  </div>
-  <footer
-    class="card-footer"
-  >
-    footer
-  </footer>
-</div>
+/>
 `;
 
 exports[`CCard renders correctly with slots 1`] = `
 <div
   class="card card-accent-primary text-left bg-success border-solid text-white"
 >
-  <!---->
   <div
     class="card-body"
   >
     this should be rendered in body wrapper
   </div>
-  <!---->
 </div>
 `;
 
 exports[`CCard renders correctly without body 1`] = `
 <div
   class="card"
->
-  <header
-    class="card-header"
-  >
-    header
-  </header>
-  <footer
-    class="card-footer"
-  >
-    footer
-  </footer>
-</div>
+/>
 `;

src/components/index.d.ts

@@ -61,9 +61,6 @@ declare class CardSharedClasses extends Vue {
 }
 
 export declare class CCard extends CardSharedClasses {
-  headerHtml: string
-  bodyHtml: string
-  footerHtml: string
   bodyWrapper: boolean
   accentColor: string
 }
@@ -427,10 +424,6 @@ export declare class CPagination extends Vue {
   dots: boolean
   arrows: boolean
   doubleArrows: boolean
-  firstButtonHtml: string
-  previousButtonHtml: string
-  nextButtonHtml: string
-  lastButtonHtml: string
   responsive: boolean
 }
 
@@ -575,7 +568,7 @@ export declare class CTabs extends Vue {
 }
 
 export declare class CTab extends Vue {
-  titleHtml: string 
+  title: string 
   active: boolean
   disabled: boolean
 }
@@ -589,8 +582,7 @@ declare class ToastProps extends Vue {
 
 export declare class CToast extends ToastProps {
   show: boolean
-  headerHtml: string
-  bodyHtml: string
+  header: string
 }
 
 export declare class CToaster extends ToastProps {

src/components/pagination/CPagination.vue

@@ -9,7 +9,7 @@
           aria-label="Go to first page"
           :aria-disabled="activePage === 1"
         >
-          <span v-html="firstButtonHtml"></span>
+          <slot name="first-button">&laquo;</slot>
         </CLink>
       </li>
       <li v-if="arrows" :class="backArrowsClasses">
@@ -20,7 +20,7 @@
           aria-label="Go to previous page"
           :aria-disabled="activePage === 1"
         >
-          <span v-html="previousButtonHtml"></span>
+          <slot name="previous-button">&lsaquo;</slot>
         </CLink>
       </li>
       <li
@@ -63,7 +63,7 @@
           aria-label="Go to next page"
           :aria-disabled="activePage === pages"
         >
-          <span v-html="nextButtonHtml"></span>
+          <slot name="next-button">&rsaquo;</slot>
         </CLink>
       </li>
       <li v-if="doubleArrows" :class="nextArrowsClasses">
@@ -74,7 +74,7 @@
           aria-label="Go to last page"
           :aria-disabled="activePage === pages"
         >
-          <span v-html="lastButtonHtml"></span>
+          <slot name="last-button">&raquo;</slot>
         </CLink>
       </li>
     </ul>
@@ -122,22 +122,6 @@
       doubleArrows: {
         type: Boolean,
         default: true
-      },
-      firstButtonHtml: {
-        type: String,
-        default: '&laquo;'
-      },
-      previousButtonHtml: {
-        type: String,
-        default: '&lsaquo;'
-      },
-      nextButtonHtml: {
-        type: String,
-        default: '&rsaquo;'
-      },
-      lastButtonHtml: {
-        type: String,
-        default: '&raquo;'
       }
     },
     watch: {

src/components/pagination/tests/CPagination.spec.js

@@ -2,7 +2,15 @@ import { mount } from '@vue/test-utils'
 import Component from '../CPagination'
 
 const ComponentName = 'CPagination'
-const defaultWrapper = mount(Component)
+const wrapper = mount(Component,{
+  slots: {
+    'first-button': 'Go to first',
+    'previous-button': 'Go to previous',
+    'next-button': 'Go to next',
+    'last-button': 'Go to last',
+  }
+})
+
 const customWrapper = mount(Component, {
   propsData: {
     activePage: 9,
@@ -13,15 +21,16 @@ const customWrapper = mount(Component, {
     dots: false,
     arrows: false,
     doubleArrows: false
-  }
+  },
+
 })
 
 describe(ComponentName, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
   })
   it('renders correctly', () => {
-    expect(defaultWrapper.element).toMatchSnapshot()
+    expect(wrapper.element).toMatchSnapshot()
   })
   it('renders correctly', () => {
     expect(customWrapper.element).toMatchSnapshot()
@@ -31,11 +40,11 @@ describe(ComponentName, () => {
     expect(customWrapper.emitted()['update:activePage']).toBeTruthy()
   })
   it('emits update:activePage event when inactive item is clicked', () => {
-    const links = defaultWrapper.findAll('.page-link')
+    const links = wrapper.findAll('.page-link')
     links.at(2).trigger('click')
-    expect(defaultWrapper.emitted()['update:activePage']).not.toBeTruthy()
+    expect(wrapper.emitted()['update:activePage']).not.toBeTruthy()
 
     links.at(4).trigger('click')
-    expect(defaultWrapper.emitted()['update:activePage']).toBeTruthy()
+    expect(wrapper.emitted()['update:activePage']).toBeTruthy()
   })
 })