chore: code style

src/components/button/Button.vue

@@ -1,15 +1,16 @@
 <template>
   <button
-    class="vue-button"
     :class="{
       'vue-button--primary': type === 'primary',
       'vue-button--success': type === 'success',
       'vue-button--warning': type === 'warning',
       'vue-button--danger': type === 'danger',
     }"
     :disabled="disabled"
-    @click="$emit('click')">
-    <slot></slot>
+    class="vue-button"
+    @click="$emit('click')"
+  >
+    <slot />
   </button>
 </template>
 

src/components/checkbox/Checkbox.vue

@@ -1,26 +1,31 @@
 <template>
   <div class="vue-checkbox">
     <label
-      class="vue-checkbox"
       :class="{
         'vue-checkbox--checked': isChecked,
         'vue-checkbox--bordered': type === 'border',
         'vue-checkbox--disabled': disabled
-        }">
+      }"
+      class="vue-checkbox"
+    >
       <input
-        type="checkbox"
         :id="`vue-checkbox-${_uid}`"
         :checked="isChecked"
         :name="name"
         :disabled="disabled"
         :value="value"
-        @change="onChange">
+        type="checkbox"
+        @change="onChange"
+      >
       <div class="vue-checkbox__inner">
-        <i class="icon-check" v-if="isChecked"></i>
+        <i
+          v-if="isChecked"
+          class="icon-check"
+        />
       </div>
       <span class="vue-checkbox__label">
         <span v-if="label">{{ label }}</span>
-        <slot v-else></slot>
+        <slot v-else />
       </span>
     </label>
   </div>
@@ -30,26 +35,38 @@
 export default {
   name: 'VueCheckbox',
 
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+
   props: {
     checked: Boolean,
-    value: [String, Number, Object, Boolean],
-    name: String,
-    label: String,
-    type: String,
+    value: {
+      type: [String, Number, Object, Boolean],
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
     disabled: {
       type: Boolean,
       default: false
     }
   },
 
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-
   computed: {
     isGroup () {
-      if (this.$parent.$options.name === 'VueCheckboxGroup') return true
+      return this.$parent.$options.name === 'VueCheckboxGroup'
     },
     isChecked () {
       if (!this.isGroup) return this.checked
@@ -61,6 +78,7 @@ export default {
           return !!this.$parent.modelValue.find(item => item === this.value)
         }
       }
+      return false
     }
   },
 

src/components/checkbox/CheckboxGroup.vue

@@ -1,39 +1,42 @@
 <template>
   <div class="vue-checkbox-group">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script>
 export default {
   name: 'VueCheckboxGroup',
 
-  props: {
-    modelValue: Array
-  },
-
   model: {
     prop: 'modelValue',
     event: 'change'
   },
 
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    }
+  },
+
   data () {
     return {
       value: []
     }
   },
 
-  created () {
-    this.value = this.modelValue
-  },
-
   watch: {
     modelValue () {
       this.value = this.modelValue
     },
     value () {
       this.$emit('change', this.value)
     }
+  },
+
+  created () {
+    this.value = this.modelValue
   }
 }
 </script>

src/components/form/Form.vue

@@ -1,12 +1,13 @@
 <template>
   <div
-    class="vue-form"
     :class="{
       'vue-form--label-left': labelPosition === 'left',
       'vue-form--label-right': labelPosition === 'right',
       'vue-form--label-top': labelPosition === 'top',
-      }">
-    <slot></slot>
+    }"
+    class="vue-form"
+  >
+    <slot />
   </div>
 </template>
 
@@ -23,8 +24,14 @@ export default {
   },
 
   props: {
-    model: Object,
-    rules: Object,
+    model: {
+      type: Object,
+      default: () => {}
+    },
+    rules: {
+      type: Object,
+      default: () => {}
+    },
     labelPosition: {
       type: String,
       default: 'right'

src/components/form/FormItem.vue

@@ -1,14 +1,21 @@
 <template>
   <div
-    class="vue-form__item">
+    class="vue-form__item"
+  >
     <div
       v-if="label || form.labelPosition !== 'top'"
+      :style="{'flex-basis': form.labelWidth }"
       class="vue-form__item-label"
-      :style="{'flex-basis': form.labelWidth }">{{ label }}</div>
+    >
+      {{ label }}
+    </div>
     <div class="vue-form__item-content">
-      <slot></slot>
+      <slot />
       <transition name="form-slide-fade">
-        <div class="vue-form__item-error" v-if="!isValid">
+        <div
+          v-if="!isValid"
+          class="vue-form__item-error"
+        >
           {{ validateMessage }}
         </div>
       </transition>
@@ -23,9 +30,18 @@ export default {
   inject: ['form'],
 
   props: {
-    label: String,
-    rules: [Object, Array],
-    field: String
+    label: {
+      type: String,
+      default: ''
+    },
+    rules: {
+      type: [Object, Array],
+      default: () => {}
+    },
+    field: {
+      type: String,
+      default: ''
+    }
   },
 
   data () {

src/components/input/Input.vue

@@ -1,31 +1,34 @@
 <template>
   <div
     :class="{
-      'vue-input': this.type !== 'textarea',
-      'vue-textarea': this.type === 'textarea',
-      'vue-input--prefix': this.$slots.prefix,
-      'vue-input--suffix': this.$slots.suffix,
-      'vue-input--prepend': this.$slots.prepend,
-      'vue-input--append': this.$slots.append,
-    }">
+      'vue-input': type !== 'textarea',
+      'vue-textarea': type === 'textarea',
+      'vue-input--prefix': $slots.prefix,
+      'vue-input--suffix': $slots.suffix,
+      'vue-input--prepend': $slots.prepend,
+      'vue-input--append': $slots.append,
+    }"
+  >
     <div
-      v-if="this.$slots.prefix && type !== 'textarea'"
-      class="vue-input__prefix">
-      <slot name="prefix"></slot>
+      v-if="$slots.prefix && type !== 'textarea'"
+      class="vue-input__prefix"
+    >
+      <slot name="prefix" />
     </div>
     <div
-      v-if="this.$slots.suffix && type !== 'textarea'"
-      class="vue-input__suffix">
-      <slot name="suffix"></slot>
+      v-if="$slots.suffix && type !== 'textarea'"
+      class="vue-input__suffix"
+    >
+      <slot name="suffix" />
     </div>
     <div
-      v-if="this.$slots.prepend && type !== 'textarea'"
-      class="vue-input__prepend">
-      <slot name="prepend"></slot>
+      v-if="$slots.prepend && type !== 'textarea'"
+      class="vue-input__prepend"
+    >
+      <slot name="prepend" />
     </div>
     <input
       v-if="type !== 'textarea'"
-      class="vue-input__inner"
       :name="name"
       :type="type"
       :value="value"
@@ -35,23 +38,25 @@
       :max="max"
       :min="min"
       :autocomplete="[ autocomplete ? 'off' : 'on' ]"
+      class="vue-input__inner"
       @input="onInput"
     >
     <textarea
       v-else
-      class="vue-textarea__inner"
       :name="name"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       :value="value"
-      :rows="rows">
-    </textarea>
+      :rows="rows"
+      class="vue-textarea__inner"
+    />
     <div
       v-if="this.$slots.append && type !== 'textarea'"
-      class="vue-input__append">
-      <slot name="append"></slot>
+      class="vue-input__append"
+    >
+      <slot name="append" />
     </div>
   </div>
 </template>
@@ -60,13 +65,24 @@
 export default {
   name: 'VueInput',
 
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+
   props: {
     type: {
       type: String,
       default: 'text'
     },
-    value: [String, Number],
-    name: String,
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
     readonly: {
       type: Boolean,
       default: false
@@ -75,9 +91,18 @@ export default {
       type: Boolean,
       default: false
     },
-    min: Number,
-    max: Number,
-    placeholder: String,
+    min: {
+      type: Number,
+      default: null
+    },
+    max: {
+      type: Number,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -88,11 +113,6 @@ export default {
     }
   },
 
-  model: {
-    prop: 'value',
-    event: 'input'
-  },
-
   methods: {
     onInput (e) {
       this.$emit('input', e.target.value)