Merge pull request #16 from antonreshetov/13-form-builder

Form builder component

Author: antonreshetov

jest.config.js

@@ -10,6 +10,9 @@ module.exports = {
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
     '^.+\\.jsx?$': 'babel-jest'
   },
+  transformIgnorePatterns: [
+    '/node_modules/'
+  ],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'
   },

package.json

@@ -32,8 +32,8 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "async-validator": "^1.10.0",
     "popper.js": "^1.14.4",
+    "vee-validate": "^2.2.0",
     "vue": "^2.6.0",
     "vue-router": "^3.0.1"
   },
@@ -45,10 +45,12 @@
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.20",
     "axios": "^0.18.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.2.2",
+    "flush-promises": "^1.0.2",
     "highlight.js": "^9.12.0",
     "lint-staged": "^8.1.5",
     "marked": "^0.5.1",

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'
@@ -43,7 +52,7 @@ export default {
   props: {
     checked: Boolean,
     value: {
-      type: [String, Number, Object, Boolean],
+      type: [String, Number, Boolean],
       default: ''
     },
     name: {

src/components/checkbox/CheckboxGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="vue-checkbox-group">
+  <div
+    class="vue-checkbox-group"
+    :name="name"
+  >
     <slot />
   </div>
 </template>
@@ -8,6 +11,15 @@
 export default {
   name: 'VueCheckboxGroup',
 
+  $_veeValidate: {
+    name () {
+      return this.name
+    },
+    value () {
+      return this.modelValue
+    }
+  },
+
   model: {
     prop: 'modelValue',
     event: 'change'
@@ -17,6 +29,10 @@ export default {
     modelValue: {
       type: Array,
       default: () => []
+    },
+    name: {
+      type: String,
+      default: ''
     }
   },
 

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">