Fix: Smaller changes in components

Author: woothu

package.json

@@ -62,7 +62,7 @@
     "element-resize-detector": "^1.2.0",
     "popper.js": "^1.14.6",
     "tooltip.js": "^1.3.1",
-    "vue": "^2.5.17",
+    "vue": "^2.6.6",
     "vue-clickaway": "^2.2.2",
     "vue-functional-data-merge": "^2.0.7",
     "vue-perfect-scrollbar": "^0.1.0"
@@ -90,7 +90,7 @@
     "sass-loader": "^7.1.0",
     "vue-jest": "^3.0.1",
     "vue-router": "^3.0.2",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.6"
   },
   "eslintConfig": {
     "root": true,

src/components/Card/CCardGroup.js

@@ -1,20 +1,19 @@
 import { mergeData } from 'vue-functional-data-merge'
-
-export const props = {
-  tag: String,
-  deck:  Boolean,
-  columns: Boolean,
-}
 export default {
   functional: true,
   name: 'CCardGroup',
-  props,
+  props: {
+    tag: String,
+    deck:  Boolean,
+    columns: Boolean,
+  },
   render (h, { props, data, children }) {
-    let staticClass = 'card-group'
-    if (props.columns)
-      staticClass = 'card-columns'
-    if (props.deck)
-      staticClass = 'card-deck'
-    return h(props.tag || 'div' , mergeData(data, { staticClass }), children)
+    return h(
+      props.tag || 'div',
+      mergeData(data, {
+        staticClass: `card-${props.columns ? 'columns' : props.deck ? 'deck' : 'group'}`
+      }),
+      children
+    )
   }
 }

src/components/Collapse/CCollapse.js

@@ -1,4 +1,4 @@
-export const props = {
+const props = {
   tag: {
     type: String,
     default: 'div'
@@ -21,27 +21,30 @@ export default {
   data () {
     return {
       collapsing: false,
-      heightWatcher: null
+      heightWatcher: null,
     }
   },
   watch: {
     show (val) {
-      if(this.collapsing){
+      this.collapse(val)
+    },
+  },
+  mounted () {
+    this.$el.style.display = this.show ?  '' : 'none'
+  },
+  methods: {
+    collapse (val) {
+      if (this.collapsing) {
         this.turn()
         const height = Number(this.collapsing.slice(0,-2))
         const current = this.$el.offsetHeight
         const time =  val ?  (height - current) / height :  current / height
         this.setFinishTimer(this.duration * time)
-      }else{
+      } else {
         val ? this.toggle(true) : this.toggle(false)
         this.setFinishTimer(this.duration)
       }
     },
-  },
-  mounted () {
-    this.$el.style.display = this.show ?  '' : 'none'
-  },
-  methods: {
     turn () {
       if(this.show)
         this.$el.style.height = this.collapsing

src/components/Form/CFormFile.vue

@@ -14,6 +14,7 @@
       <input v-bind="$attrs"
              :id="safeId"
              :class="inputClasses"
+             :multiple="multiple"
              type="file"
              @change="onChange($event)"
       />

src/components/Form/CFormGroup.vue

@@ -1,5 +1,8 @@
 <template functional>
-  <div :class="[data.class, data.staticClass]" :style="[data.style, data.staticStyle]">
+  <div :class="[data.class, data.staticClass]"
+       :style="[data.style, data.staticStyle]"
+       role="group"
+  >
     <template v-if="props.wrapperClasses">
       <slot name="label"></slot>
       <div :class="props.wrapperClasses">
@@ -58,7 +61,7 @@ import { formGroupProps as props } from './formProps'
 export default {
   name: 'CFormGroup',
   inheritAttrs: false,
-  props, 
+  props,
   // {
   //   wrapperClasses: [String, Array, Object],
   //   append: String,

src/components/Form/CFormInput.vue

@@ -1,11 +1,11 @@
-<template >
+<template>
   <CFormGroup v-bind="{append, prepend, validFeedback,
                        invalidFeedback, tooltipFeedback, description,
                        wrapperClasses, class: computedClasses}"
   >
     <template slot="label">
       <slot name="label">
-        <label v-if="label" :for="safeId" :class="labelClasses">{{label}}</label>
+        <label v-if="label" :for="safeId" :class="labelClasses" v-html="label"></label>
       </slot>
     </template>
     <input slot="input"
@@ -30,10 +30,12 @@
 </template>
 
 <script>
+import CFormGroup from './CFormGroup'
 import { formInputProps as props } from './formProps'
+
 import * as allFormMixins from './formMixins'
 const mixins = Object.values(allFormMixins)
-import CFormGroup from './CFormGroup'
+
 export default {
   name: 'CFormInput',
   inheritAttrs: false,

src/components/Form/CFormSelect.vue

@@ -89,7 +89,7 @@ export default {
   // },
   data () {
     return {
-      state: this.value
+      state: typeof this.$options.propsData.value !== 'undefined' ? this.value : ''
     }
   },
   computed: {
@@ -113,7 +113,7 @@ export default {
     //          }]
     // },
     customSizeClass () {
-      return this.haveCustomSize ?
+      return this.haveCustomSize && !this.haveWrapper ?
              `${this.custom ? 'custom-select' : 'form-control'}-${this.size}` :
              null
     },

src/components/Form/CFormTextarea.vue

@@ -28,10 +28,12 @@
 </template>
 
 <script>
+import CFormGroup from './CFormGroup'
+import { formTextareaProps as props} from './formProps'
+
 import * as allFormMixins from './formMixins'
 const mixins = Object.values(allFormMixins)
-import { formTextareaProps as props} from './formProps'
-import CFormGroup from './CFormGroup'
+
 export default {
   name: 'CFormTextarea',
   inheritAttrs: false,

src/components/Form/formMixins.js

@@ -16,8 +16,9 @@ export const wrapperComputedProps = {
     wrapperClasses () {
       if(this.haveWrapper)
         return [ this.addWrapperClasses, {
-                 [this.horizontal.input || 'col-10'] : this.isHorizontal,
-                 'input-group' : this.haveInputGroup
+                 [this.horizontal.input || 'col-sm-9'] : this.isHorizontal,
+                 'input-group' : this.haveInputGroup,
+                 [`input-group-${this.size}`]: this.haveCustomSize
                }]
     }
   }
@@ -50,25 +51,27 @@ export const watchValue = {
 export const classesComputedProps = {
   computed: {
     haveCustomSize () {
-      return ['','sm','lg'].includes(this.size) && Boolean(this.size)
+      return ['sm','lg'].includes(this.size)
     },
     computedClasses () {
       return [
-               this.isHorizontal ? 'form-row': 'form-group',
+               'form-group',
                {
-               'was-validated': this.wasValidated
+                 'was-validated': this.wasValidated,
+                 'form-row': this.isHorizontal
                }
              ]
     },
     labelClasses () {
       return [ this.addLabelClasses, {
                'col-form-label': this.isHorizontal,
-               [this.horizontal.label || 'col-2']: this.isHorizontal,
+               [this.horizontal.label || 'col-sm-3']: this.isHorizontal,
                [`col-form-label-${this.size}`]: this.haveCustomSize,
              }]
     },
     customSizeClass () {
-      return this.haveCustomSize ? `form-control-${this.size}` : null
+      return this.haveCustomSize && !this.haveWrapper ?
+               `form-control-${this.size}` : null
     },
     inputClasses () {
       return [

src/components/Form/formProps.js

@@ -37,7 +37,7 @@ const props = Object.assign({}, universalProps, {
 const textInputsProps = {
   readonly: Boolean,
   plaintext: Boolean,
-  value: [String, Number, Boolean],
+  value: String,
   lazy: {
     type: [Boolean, Number],
     default: 400