feat: add vee-validate

src/components/checkbox/Checkbox.vue

@@ -35,6 +35,15 @@
 export default {
   name: 'VueCheckbox',
 
+  $_veeValidate: {
+    name () {
+      return this.name
+    },
+    value () {
+      return this.checked
+    }
+  },
+
   model: {
     prop: 'checked',
     event: 'change'

src/components/checkbox/CheckboxGroup.vue

@@ -8,6 +8,15 @@
 export default {
   name: 'VueCheckboxGroup',
 
+  $_veeValidate: {
+    name () {
+      return this.name
+    },
+    value () {
+      return this.modelValue
+    }
+  },
+
   model: {
     prop: 'modelValue',
     event: 'change'

src/components/form/Form.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-import AsyncValidator from 'async-validator'
 
 export default {
   name: 'VueForm',
@@ -28,10 +27,6 @@ export default {
       type: Object,
       default: () => {}
     },
-    rules: {
-      type: Object,
-      default: () => {}
-    },
     labelPosition: {
       type: String,
       default: 'right'
@@ -40,68 +35,6 @@ export default {
       type: String,
       default: '100px'
     }
-  },
-
-  data () {
-    return {
-      validator: this.rules ? new AsyncValidator(this.rules) : undefined
-    }
-  },
-
-  methods: {
-    validate () {
-      return new Promise((resolve, reject) => {
-        console.warn(this.validator)
-        this.validator.validate(this.model, (err, f) => {
-          this.$children.forEach(child => {
-            if (!this.isChildFormItem(child)) return
-
-            this.setChildOptions(child, '', true, true)
-          })
-
-          if (!err) return resolve('Form is valid')
-
-          Object.keys(this.model).forEach(item => {
-            err.forEach(err => {
-              if (err.field === item) {
-                this.$children.forEach(child => {
-                  if (!this.isChildFormItem(child)) return
-
-                  if (child.field === item) {
-                    this.setChildOptions(child, err.message, false, true)
-                  }
-                })
-              }
-            })
-            return reject(new Error('Form is not valid'))
-          })
-        })
-      })
-    },
-    resetValidation () {
-      this.$children.forEach(child => {
-        if (!this.isChildFormItem(child)) return
-
-        this.setChildOptions(child, '', true, false)
-      })
-    },
-    resetFieldValidation (field) {
-      this.$children.forEach(child => {
-        if (!this.isChildFormItem(child)) return
-
-        if (child.field === field) {
-          this.setChildOptions(child, '', true, false)
-        }
-      })
-    },
-    isChildFormItem (child) {
-      return child.$options.name === 'VueFormItem'
-    },
-    setChildOptions (child, message, valid, state) {
-      child.validateMessage = message
-      child.isValid = valid
-      child.validateState = state
-    }
   }
 }
 </script>

src/components/form/FormItem.vue

@@ -13,10 +13,10 @@
       <slot />
       <transition name="form-slide-fade">
         <div
-          v-if="!isValid"
+          v-if="showErrorMsg"
           class="vue-form__item-error"
         >
-          {{ validateMessage }}
+          {{ showErrorMsg }}
         </div>
       </transition>
     </div>
@@ -34,24 +34,24 @@ export default {
       type: String,
       default: ''
     },
-    rules: {
-      type: [Object, Array],
-      default: () => {}
-    },
     field: {
       type: String,
       default: ''
     }
   },
 
-  data () {
-    return {
-      isValid: true,
-      validateMessage: '',
-      validateState: false
+  computed: {
+    showErrorMsg () {
+      let msg
+      if (this.errors.items.length) {
+        const item = this.errors.items.find(i => i.field === this.field)
+        if (item) msg = item.msg
+      }
+      return msg
     }
   }
 }
+
 </script>
 
 <style lang="scss">

src/components/index.js

@@ -7,6 +7,7 @@ import Select from './select/Select.vue'
 import Option from './select/Option.vue'
 import Form from './form/Form.vue'
 import FormItem from './form/FormItem.vue'
+import VeeValidate from 'vee-validate'
 
 const components = [
   Input,
@@ -21,7 +22,17 @@ const components = [
 ]
 
 export default {
-  install (Vue, options) {
+  install (Vue, options = {}) {
+    let veeValidateOptions = {
+      events: 'change|input|blur'
+    }
+
+    if (options.veeValidate) {
+      veeValidateOptions = Object.assign(veeValidateOptions, options.veeValidate)
+    }
+
+    Vue.use(VeeValidate, veeValidateOptions)
+
     components.forEach(component => {
       Vue.component(component.name, component)
     })

src/components/input/Input.vue

@@ -65,6 +65,15 @@
 export default {
   name: 'VueInput',
 
+  $_veeValidate: {
+    name () {
+      return this.name
+    },
+    value () {
+      return this.value
+    }
+  },
+
   model: {
     prop: 'value',
     event: 'input'

src/components/radio/Radio.vue

@@ -30,14 +30,23 @@
 export default {
   name: 'VueRadio',
 
+  $_veeValidate: {
+    name () {
+      return this.name
+    },
+    value () {
+      return this.modelValue
+    }
+  },
+
   model: {
     prop: 'modelValue',
     event: 'change'
   },
 
   props: {
     modelValue: {
-      type: Object,
+      type: [String, Object],
       default: () => {}
     },
     value: {

src/components/select/Select.vue

@@ -91,6 +91,15 @@ import { clickOutside } from '../../utils/directives'
 export default {
   name: 'VueSelect',
 
+  $_veeValidate: {
+    name () {
+      return this.name
+    },
+    value () {
+      return this.value
+    }
+  },
+
   components: {
     [Input.name]: Input,
     [Popper.name]: Popper