refactor: minor refactors in components

woothu · woothu · commit c055ffa6dceb · 2019-07-02T10:03:44.000+02:00
diff --git a/src/components/Breadcrumb/CBreadcrumb.vue b/src/components/Breadcrumb/CBreadcrumb.vue
@@ -12,9 +12,9 @@ export default {
     addLastItemClasses: [String, Array]
   },
   render (h, { props, data }) {
-    if(!Array.isArray(props.items)){ return }
-    let childNodes = props.items.map((item, index, items) => {
-      if(typeof item !== 'object'){ return }
+    if (!Array.isArray(props.items)) { return }
+    const childNodes = props.items.map((item, index, items) => {
+      if (typeof item !== 'object') { return }
 
       const isLast = items.length === index + 1
       const tag = isLast ? 'span' : CLink
@@ -28,13 +28,15 @@ export default {
         props: item
       }
       const itemProps = isLast ? lastItemProps : linkItemProps
-      return h('li',
-             {
-               staticClass: 'c-breadcrumb-item',
-               class: { 'c-active': isLast },
-               attrs: { role: 'presentation' }
-             },
-             [h(tag, itemProps)])
+      return h(
+        'li',
+         {
+           staticClass: 'c-breadcrumb-item',
+           class: { 'c-active': isLast },
+           attrs: { role: 'presentation' }
+         },
+         [h(tag, itemProps)]
+       )
     })
     return h('ol', mergeData(data, { staticClass: 'c-breadcrumb' }), childNodes)
   }
diff --git a/src/components/Button/CButtonGroup.vue b/src/components/Button/CButtonGroup.vue
@@ -5,7 +5,10 @@ export default {
   name: 'CButtonGroup',
   props: {
     vertical: Boolean,
-    size: String,
+    size: {
+      type: String,
+      validator: size => ['', 'sm', 'lg'].includes(size)
+    }
   },
   render (h, { props, data, children }) {
     return h(
diff --git a/src/components/Button/CButtonToolbar.vue b/src/components/Button/CButtonToolbar.vue
@@ -12,7 +12,7 @@ export default {
       mergeData(data, {
         class: [
           'c-btn-toolbar',
-          props.justify ? 'c-justify-content-between' : ''
+          { 'c-justify-content-between': props.justify }
         ],
         attrs: {
           role: 'toolbar'
diff --git a/src/components/Callout/CCallout.vue b/src/components/Callout/CCallout.vue
@@ -8,7 +8,7 @@
 export default {
   name: 'CCallout',
   props: {
-    variant: String,
+    variant: String
   }
 }
 </script>
diff --git a/src/components/Card/CCard.vue b/src/components/Card/CCard.vue
@@ -6,7 +6,7 @@ import CCardBody from './CCardBody'
 import CCardFooter from './CCardFooter'
 
 const props = Object.assign(
-  sharedCardProps.props,
+  sharedCardProps,
   {
     headerHtml: String,
     bodyHtml: String,
@@ -23,17 +23,19 @@ export default {
     let body = slots().default
     let footer = h(false)
 
-    if (props.headerHtml)
+    if (props.headerHtml) {
       header = h(CCardHeader, { domProps: { innerHTML: props.headerHtml }})
+    }
 
-    if (body === undefined && props.bodyHtml)
+    if (body === undefined && props.bodyHtml) {
       body = h(CCardBody, { domProps: { innerHTML: props.bodyHtml }})
-    else if (props.bodyWrapper)
+    } else if (props.bodyWrapper) {
       body = h(CCardBody, body)
+    }
 
-
-    if (props.footerHtml)
+    if (props.footerHtml) {
       footer = h(CCardFooter, { domProps: { innerHTML: props.footerHtml }})
+    }
 
     return h(
       props.tag || 'div',
diff --git a/src/components/Card/CCardBody.vue b/src/components/Card/CCardBody.vue
@@ -3,7 +3,7 @@ import { mergeData } from 'vue-functional-data-merge'
 import sharedCardProps from './sharedCardProps'
 
 export const props = Object.assign(
-  sharedCardProps.props,
+  sharedCardProps,
   {
     titleHtml: String,
     titleTag: {
@@ -45,7 +45,7 @@ export default {
 
     if (props.bodyHtml && cardContent === undefined) {
       cardContent = h(
-        'div',
+        props.tag || 'div',
         { domProps: { innerHTML: props.bodyHtml}}
       )
     }
diff --git a/src/components/Card/CCardFooter.vue b/src/components/Card/CCardFooter.vue
@@ -3,7 +3,7 @@ import { mergeData } from 'vue-functional-data-merge'
 import sharedCardProps from './sharedCardProps'
 
 export const props = Object.assign(
-  sharedCardProps.props,
+  sharedCardProps,
   {
     footerHtml:  String,
   }
diff --git a/src/components/Card/CCardHeader.vue b/src/components/Card/CCardHeader.vue
@@ -3,7 +3,7 @@ import { mergeData } from 'vue-functional-data-merge'
 import sharedCardProps from './sharedCardProps'
 
 export const props = Object.assign(
-  sharedCardProps.props,
+  sharedCardProps,
   {
     headerHtml: String
   }
diff --git a/src/components/Card/sharedCardProps.js b/src/components/Card/sharedCardProps.js
@@ -1,12 +1,10 @@
 export default {
-  props: {
-    tag: String,
-    variant: String,
-    borderVariant: String,
-    textVariant: String,
-    align: {
-      type: String,
-      validator: val => ['left', 'center', 'right'].includes(val)
-    }
+  tag: String,
+  variant: String,
+  borderVariant: String,
+  textVariant: String,
+  align: {
+    type: String,
+    validator: val => ['left', 'center', 'right'].includes(val)
   }
 }
diff --git a/src/components/Carousel/CCarousel.vue b/src/components/Carousel/CCarousel.vue
@@ -12,17 +12,16 @@
       <slot></slot>
     </div>
     <template v-if="arrows">
-      <slot name="arrows">
-        <a class="c-carousel-control-prev" @click="previousItem">
-          <span class="c-carousel-control-prev-icon"></span>
-          <span class="sr-only">Previous</span>
-        </a>
-        <a class="c-carousel-control-next" @click="nextItem">
-          <span class="c-carousel-control-next-icon"></span>
-          <span class="sr-only">Next</span>
-        </a>
-      </slot>
+      <a class="c-carousel-control-prev" @click="previousItem">
+        <span class="c-carousel-control-prev-icon"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="c-carousel-control-next" @click="nextItem">
+        <span class="c-carousel-control-next-icon"></span>
+        <span class="sr-only">Next</span>
+      </a>
     </template>
+    <slot name="navigation"></slot>
   </div>
 </template>
 
diff --git a/src/components/Carousel/CCarouselItem.vue b/src/components/Carousel/CCarouselItem.vue
@@ -1,6 +1,7 @@
 <template>
   <div :class="itemClasses">
     <CImage
+      v-if="image" 
       v-bind="computedImage"
       class="c-d-block c-w-100 c-h-100 c-img-fluid"
     />
diff --git a/src/components/Collapse/CCollapse.vue b/src/components/Collapse/CCollapse.vue
@@ -32,25 +32,29 @@ export default {
   },
   watch: {
     show (val, oldVal) {
-      if(val === oldVal) return
-      this.visible = val
+      if (val !== oldVal) {
+        this.visible = val
+      }
     },
     visible (val, oldVal) {
-      if (val !== oldVal)
+      if (val !== oldVal) {
         this.collapseController(val)
+      }
     }
   },
   mounted () {
     this.$el.style.display = this.visible ?  '' : 'none'
     this.$nextTick(() => {
       this.el = document.getElementById(this.toggler)
-      if(this.el)
+      if (this.el) {
         this.el.addEventListener('click', this.collapse)
+      }
     })
   },
   beforeDestroy () {
-    if(this.el)
+    if (this.el) {
       this.el.removeEventListener('click', this.collapse)
+    }
   },
   methods: {
     collapse () {
@@ -70,10 +74,11 @@ export default {
       }
     },
     turn () {
-      if(this.visible)
+      if (this.visible) {
         this.$el.style.height = this.collapsing
-      else
+      } else {
         this.$el.style.height = 0
+      }
     },
     toggle (val) {
       this.$el.style.display = ''
@@ -99,3 +104,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+* {
+  will-change: height;
+}
+</style>
diff --git a/src/components/Dropdown/CDropdownDivider.vue b/src/components/Dropdown/CDropdownDivider.vue
@@ -1,17 +1,15 @@
 <script>
 import { mergeData } from 'vue-functional-data-merge'
 
-export const props = {
-  tag: {
-    type: String,
-    default: 'div'
-  }
-}
-
 export default {
   functional: true,
   name: 'CDropdownDivider',
-  props,
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
   render (h, { props, data }) {
     return h(
       props.tag,
diff --git a/src/components/Dropdown/CDropdownHeader.vue b/src/components/Dropdown/CDropdownHeader.vue
@@ -1,17 +1,14 @@
 <script>
 import { mergeData } from 'vue-functional-data-merge'
-
-export const props = {
-  tag: {
-    type: String,
-    default: 'h6'
-  }
-}
-
 export default {
   functional: true,
   name: 'CDropdownHeader',
-  props,
+  props: {
+    tag: {
+      type: String,
+      default: 'h6'
+    }
+  },
   render (h, { props, data, children }) {
     return h(
       props.tag,
diff --git a/src/components/Form/CForm.vue b/src/components/Form/CForm.vue
@@ -8,15 +8,15 @@ export default {
     // id: String,
     inline: Boolean,
     // novalidate:  Boolean,
-    validated: Boolean,
+    wasValidated: Boolean,
   },
   render(h, { props, data, children }) {
     return h(
       'form',
       mergeData(data, {
         class: {
           'c-form-inline': props.inline,
-          'c-was-validated': props.validated
+          'c-was-validated': props.wasValidated
         },
         // attrs: {
         //   id: props.id,
diff --git a/src/components/Form/CFormCheckbox.vue b/src/components/Form/CFormCheckbox.vue
@@ -71,7 +71,7 @@ export default {
   //   },
   //   addInputClasses: String,
   //   addLabelClasses: String,
-  //   custom: [Boolean, String],
+  //   custom: Boolean,
   //   inline: Boolean
   // },
   type: 'checkbox',
@@ -94,6 +94,7 @@ export default {
     customType () {
       return this.$options.type === 'checkbox' ? 'checkbox' : 'radio'
     },
+    
     computedClasses () {
       const controlClass = this.custom ? 'c-custom-control' : 'c-form-check'
       return {
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
@@ -1,5 +1,4 @@
 import CForm from './CForm'
-import CFormGroup from './CFormGroup'
 import CFormInput from './CFormInput'
 import CFormCheckbox from './CFormCheckbox'
 import CFormFile from './CFormFile'
@@ -9,7 +8,6 @@ import CFormRadio from './CFormRadio'
 
 export {
   CForm,
-  CFormGroup,
   CFormInput,
   CFormCheckbox,
   CFormFile,
diff --git a/src/components/Image/CImage.vue b/src/components/Image/CImage.vue
@@ -36,7 +36,6 @@ export default {
     //   'bottom': bottom corners rounded
     //   'left': left corners rounded
     //   'circle': circle/oval
-    //   '0': force rounding off
     rounded: {
       type: [Boolean, String],
       validator: val => {
@@ -46,6 +45,7 @@ export default {
     thumbnail: Boolean,
     align: {
       type: String,
+      default: 'center',
       validator: align => ['left', 'right', 'center'].includes(align)
     },
     blankColor: {
@@ -59,24 +59,24 @@ export default {
       return this.active !== false
     },
     alignClass () {
-      if (this.align === 'left') {
-        return 'c-float-left'
+      if (this.align === 'center') {
+        return 'c-mx-auto'
       } else if (this.align === 'right') {
         return 'c-float-right'
-      } else if (this.align === 'center') {
-        return 'c-mx-auto'
+      } else if (this.align === 'left') {
+        return 'c-float-left'
       }
     },
     imageClasses () {
       return [
         //animationClass is rendered in CImageLazy
         this.animationClasses,
+        this.alignClass,
         {
           'c-img-thumbnail': this.thumbnail,
           'c-img-fluid': this.fluid || this.fluidGrow,
           'c-w-100': this.fluidGrow,
           [`c-rounded${this.rounded===true?'':'-'+this.rounded}`]: this.rounded,
-          [this.alignClass]: Boolean(this.align),
           'c-d-block': this.block
         }
       ]
diff --git a/src/components/Jumbotron/CJumbotron.vue b/src/components/Jumbotron/CJumbotron.vue
diff --git a/src/components/Modal/CModal.vue b/src/components/Modal/CModal.vue
diff --git a/src/components/Pagination/CPagination.vue b/src/components/Pagination/CPagination.vue
diff --git a/src/components/Switch/CSwitch.vue b/src/components/Switch/CSwitch.vue
diff --git a/src/components/Table/CTable.vue b/src/components/Table/CTable.vue
diff --git a/src/directives/CPopover.js b/src/directives/CPopover.js

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`export default {`
`9`	`9`	`name: 'CCallout',`
`10`	`10`	`props: {`
`11`		`- variant: String,`
	`11`	`+ variant: String`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`	`</script>`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { mergeData } from 'vue-functional-data-merge'`
`3`	`3`	`import sharedCardProps from './sharedCardProps'`
`4`	`4`
`5`	`5`	`export const props = Object.assign(`
`6`		`- sharedCardProps.props,`
	`6`	`+ sharedCardProps,`
`7`	`7`	`{`
`8`	`8`	`titleHtml: String,`
`9`	`9`	`titleTag: {`
`@@ -45,7 +45,7 @@ export default {`
`45`	`45`
`46`	`46`	`if (props.bodyHtml && cardContent === undefined) {`
`47`	`47`	`cardContent = h(`
`48`		`- 'div',`
	`48`	`+ props.tag \|\| 'div',`
`49`	`49`	`{ domProps: { innerHTML: props.bodyHtml}}`
`50`	`50`	`)`
`51`	`51`	`}`