refactor: minor code refactors, update snapshots

Author: woothu

dist/coreui-vue.common.js

@@ -86,12 +86,11 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
   .fade-enter-active, .fade-leave-active {
     transition: opacity .3s;
   }
   .fade-enter, .fade-leave-to {
     opacity: 0;
   }
-
 </style>

dist/coreui-vue.common.js.map

@@ -2,17 +2,21 @@
 import { mergeData } from 'vue-functional-data-merge'
 import CLink, { props as linkProps } from '../link/CLink'
 
-const props = Object.assign({}, linkProps, {
-  tag: {
-    type: String,
-    default: 'span'
-  },
-  color: String,
-  shape: {
-    type: String,
-    validator: shape => ['', 'pill'].includes(shape)
+const props = Object.assign(
+  {}, 
+  linkProps, 
+  {
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    color: String,
+    shape: {
+      type: String,
+      validator: shape => ['', 'pill'].includes(shape)
+    }
   }
-})
+)
 
 export default {
   functional: true,

dist/coreui-vue.esm.js

@@ -12,11 +12,11 @@
     </li>
     <li
       v-if="lastItem"
-      :class="['active', lastItem.addClasses, sharedClasses, addLastItemClasses]"
+      :class="lastItemClasses"
       role="presentation"
     >
-     <!-- span added to enable text styling through classes -->
-     <span v-text="lastItem.text"></span>
+      <!-- span added to enable text styling through classes -->
+      <span v-text="lastItem.text"></span>
     </li>
     <slot></slot>
   </ol>
@@ -45,6 +45,14 @@ export default {
     },
     sharedClasses () {
       return [this.addClasses, 'breadcrumb-item']
+    },
+    lastItemClasses () {
+      return [
+        'active', 
+        this.lastItem.addClasses, 
+        this.sharedClasses, 
+        this.addLastItemClasses
+      ]
     }
   }
 }

dist/coreui-vue.umd.js

@@ -41,7 +41,7 @@ function computeClasses (props) {
   const outlineSuffix = props.variant === 'outline' ? 'outline-' : ''
   return {
     [`btn-${outlineSuffix}${props.color}`]: props.color,
-    [`btn-${props.size}`]: Boolean(props.size),
+    [`btn-${props.size}`]: props.size,
     [`btn-ghost-${props.color}`]: props.variant === 'ghost',
     'btn-block': props.block,
     'btn-pill': props.shape === 'pill',
@@ -80,7 +80,7 @@ export default {
     const on = {
       click () {
         if (toggle && listeners && listeners['update:pressed']) {
-          // Send .sync updates to any "pressed" prop (if .sync listeners)
+          // Send .sync updates to "pressed" prop (if .sync listener is set)
           listeners['update:pressed'](!props.pressed)
         }
       }

dist/coreui-vue.umd.js.map

@@ -16,7 +16,7 @@ export default {
       mergeData(data, {
         class: [
           !props.vertical ? 'btn-group' : 'btn-group-vertical',
-          { [`btn-group-${props.size}`] : Boolean(props.size) }
+          { [`btn-group-${props.size}`] : props.size }
         ],
         attrs: {
           role: 'group'

dist/coreui-vue.umd.min.js

@@ -13,10 +13,10 @@ export default {
         staticClass: 'card-body',
         class: [
           {
-            [`bg-${props.color}`]: Boolean(props.color),
-            [`border-${props.borderColor}`]: Boolean(props.borderColor),
-            [`text-${props.textColor}`]: Boolean(props.textColor),
-            [`text-${props.align}`]: Boolean(props.align)
+            [`bg-${props.color}`]: props.color,
+            [`border-${props.borderColor}`]: props.borderColor,
+            [`text-${props.textColor}`]: props.textColor,
+            [`text-${props.align}`]: props.align
           }
         ]
       }),

dist/coreui-vue.umd.min.js.map

@@ -13,10 +13,10 @@ export default {
         staticClass: 'card-footer',
         class: [
           {
-            [`text-${props.align}`]: Boolean(props.align),
-            [`bg-${props.color}`]: Boolean(props.color),
-            [`border-${props.borderColor}`]: Boolean(props.borderColor),
-            [`text-${props.textColor}`]: Boolean(props.textColor)
+            [`text-${props.align}`]: props.align,
+            [`bg-${props.color}`]: props.color,
+            [`border-${props.borderColor}`]: props.borderColor,
+            [`text-${props.textColor}`]: props.textColor
           }
         ]
       }),

src/components/alert/CAlert.vue

@@ -4,15 +4,19 @@ export default {
   functional: true,
   name: 'CCardGroup',
   props: {
-    tag: String,
+    tag: {
+      type: String,
+      default: 'div'
+    },
     deck:  Boolean,
     columns: Boolean
   },
   render (h, { props, data, children }) {
+    const type = props.columns ? 'columns' : props.deck ? 'deck' : 'group'
     return h(
-      props.tag || 'div',
+      props.tag,
       mergeData(data, {
-        staticClass: `card-${props.columns ? 'columns' : props.deck ? 'deck' : 'group'}`
+        staticClass: `card-${type}`
       }),
       children
     )

src/components/badge/CBadge.vue

@@ -13,10 +13,10 @@ export default {
         staticClass: 'card-header',
         class: [
           {
-            [`text-${props.align}`]: Boolean(props.align),
-            [`bg-${props.color}`]: Boolean(props.color),
-            [`border-${props.borderColor}`]: Boolean(props.borderColor),
-            [`text-${props.textColor}`]: Boolean(props.textColor)
+            [`text-${props.align}`]: props.align,
+            [`bg-${props.color}`]: props.color,
+            [`border-${props.borderColor}`]: props.borderColor,
+            [`text-${props.textColor}`]: props.textColor
           }
         ]
       }),

src/components/breadcrumb/CBreadcrumb.vue

@@ -5,11 +5,14 @@ export default {
   functional: true,
   name: 'CCardImgOverlay',
   props: {
-    tag: String
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
   render (h, { props, data, children }) {
     return h(
-      props.tag || 'div',
+      props.tag,
       mergeData(data, {
         staticClass: 'card-img-overlay'
       }),

src/components/button/CButton.vue

@@ -5,11 +5,14 @@ export default {
   functional: true,
   name: 'CCardSubtitle',
   props: {
-    tag: String
+    tag: {
+      type: String,
+      default: 'h6'
+    }
   },
   render (h, { props, data, children }) {
     return h(
-      props.tag || 'h6',
+      props.tag,
       mergeData(data, {
         staticClass: 'card-subtitle'
       }),

src/components/button/CButtonGroup.vue

@@ -5,11 +5,14 @@ export default {
   functional: true,
   name: 'CCardText',
   props: {
-    tag: String
+    tag: {
+      type: String,
+      default: 'p'
+    }
   },
   render (h, { props, data, children }) {
     return h(
-      props.tag || 'p',
+      props.tag,
       mergeData(data, {
         staticClass: 'card-text'
       }),

src/components/card/CCardBody.vue

@@ -5,11 +5,14 @@ export default {
   functional: true,
   name: 'CCardTitle',
   props: {
-    tag: String
+    tag: {
+      type: String,
+      default: 'h4'
+    }
   },
   render (h, { props, data, children }) {
     return h(
-      props.tag || 'h4',
+      props.tag,
       mergeData(data, {
         staticClass: 'card-title'
       }),

src/components/card/CCardFooter.vue

@@ -110,7 +110,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
   .carousel-inner, .carousel-item {
     height: inherit;
   }

src/components/card/CCardGroup.vue

@@ -52,7 +52,7 @@ export default {
         this.turn()
         const height = Number(this.collapsing.slice(0,-2))
         const current = this.$el.offsetHeight
-        const time =  val ?  (height - current) / height :  current / height
+        const time = (val ? height - current : current) / height
         this.setFinishTimer(this.duration * time)
       }
     },

src/components/card/CCardHeader.vue

@@ -198,7 +198,7 @@ export default {
       return {
         'type': this.inNav ? null : 'button',
         'aria-expanded': this.visible ? 'true' : 'false',
-        'aria-haspopup': 'true',
+        'aria-haspopup': 'true'
       }
     },
 

src/components/card/CCardImgOverlay.vue

@@ -8,7 +8,9 @@
           class="input-group-prepend"
         >
           <slot name="prepend">
-            <span class="input-group-text"><slot name="prepend-content">{{prepend}}</slot></span>
+            <span class="input-group-text">
+              <slot name="prepend-content">{{prepend}}</slot>
+            </span>
           </slot>
         </div>
         <slot name="input"></slot>
@@ -53,7 +55,9 @@
         class="input-group-prepend"
       >
         <slot name="prepend">
-          <span class="input-group-text"><slot name="prepend-content">{{prepend}}</slot></span>
+          <span class="input-group-text">
+            <slot name="prepend-content">{{prepend}}</slot>
+          </span>
         </slot>
       </div>
       <slot name="input"></slot>

src/components/card/CCardSubtitle.vue

@@ -23,7 +23,10 @@
       />
     </template>
 
-    <template v-for="slot in $options.slots" #[slot]>
+    <template 
+      v-for="slot in $options.slots" 
+      #[slot]
+    >
       <slot :name="slot"></slot>
     </template>
   </CFormGroup>
@@ -79,7 +82,7 @@ export default {
 
   //   readonly: Boolean,
   //   plaintext: Boolean,
-  //   value: String,
+  //   value: [String, Number],
   //   lazy: {
   //     type: [Boolean, Number],
   //     default: 400

src/components/card/CCardText.vue

@@ -58,7 +58,7 @@ export default {
     // addInputClasses: [String, Array, Object],
     // addLabelClasses: [String, Array, Object],
     
-    // checked: [Boolean, String, Number],
+    // checked: Boolean,
     // custom: Boolean,
     // inline: Boolean
   // },

src/components/card/CCardTitle.vue

@@ -32,8 +32,7 @@
 
 
     <template
-      v-for="slot in ['label-after-input','valid-feedback',
-                              'invalid-feedback','description']"
+      v-for="slot in $options.slots"
       #[slot]
     >
       <slot :name="slot"></slot>
@@ -43,15 +42,20 @@
 
 <script>
 import * as allFormMixins from './form-mixins'
-const mixins = Object.values(allFormMixins).filter((i, key) => key !== 'watchValue')
 import { inputFileProps as props } from './form-props'
 import CFormGroup from './CFormGroup'
+const mixins = Object.values(allFormMixins).filter((i, key) => {
+  return key !== 'watchValue'
+})
 
 export default {
   name: 'CInputFile',
   inheritAttrs: false,
   components: { CFormGroup },
   mixins,
+  slots: [
+    'label-after-input','valid-feedback','invalid-feedback','description'
+  ],
   props,
   // {
     // validFeedback: String,

src/components/carousel/CCarousel.vue

@@ -54,7 +54,10 @@
       </select>
     </template>
 
-    <template v-for="slot in $options.slots" #[slot]>
+    <template 
+      v-for="slot in $options.slots" 
+      #[slot]
+    >
       <slot :name="slot"></slot>
     </template>
   </CFormGroup>

src/components/collapse/CCollapse.vue

@@ -22,7 +22,10 @@
       />
     </template>
 
-    <template v-for="slot in $options.slots" #[slot]>
+    <template 
+      v-for="slot in $options.slots" 
+      #[slot]
+    >
       <slot :name="slot"></slot>
     </template>
   </CFormGroup>
@@ -78,7 +81,7 @@ export default {
 
   //   readonly: Boolean,
   //   plaintext: Boolean,
-  //   value: String,
+  //   value: [String, Number],
   //   lazy: {
   //     type: [Boolean, Number],
   //     default: 400