[2.1.0] Added asyncValidators to every Form Control

isnifer · isnifer · commit cd5293a3494e · 2018-11-23T16:34:24.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 2.1.0
+
+### Added
+
+- `asyncValidators` property to every Form Control
+- They will validate only if there is no sync errors or sync validators
+
 ## 2.0.0
 
 ### BREAKING CHANGES
diff --git a/README.md b/README.md
@@ -78,6 +78,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.1.0](/CHANGELOG.md#210)
 - [2.0.0](/CHANGELOG.md#200)
 - [1.5.0](/CHANGELOG.md#150)
 - [1.4.4](/CHANGELOG.md#144)
diff --git a/VueForm/ConnectedCheckbox.js b/VueForm/ConnectedCheckbox.js
@@ -25,6 +25,7 @@ export default {
     indeterminate: String,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -49,7 +50,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedCheckboxGroup.js b/VueForm/ConnectedCheckboxGroup.js
@@ -44,6 +44,7 @@ export default {
     border: Boolean,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -79,7 +80,7 @@ export default {
       initialValue = castArray(initialValue)
     }
 
-    return $registerFormComponent(this.name, initialValue, this.validators)
+    return $registerFormComponent(this.name, initialValue, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedDatePicker.js b/VueForm/ConnectedDatePicker.js
@@ -73,6 +73,7 @@ export default {
     clearIcon: String,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -98,7 +99,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedInput.js b/VueForm/ConnectedInput.js
@@ -38,6 +38,7 @@ export default {
     tabindex: Number,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -64,7 +65,7 @@ export default {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
     return {
-      ...$registerFormComponent(this.name, this.value, this.validators),
+      ...$registerFormComponent(this.name, this.value, this.validators, this.asyncValidators),
       touched: false,
     }
   },
diff --git a/VueForm/ConnectedInputNumber.js b/VueForm/ConnectedInputNumber.js
@@ -25,6 +25,7 @@ export default {
     controlsPosition: String,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -50,7 +51,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedRadio.js b/VueForm/ConnectedRadio.js
@@ -17,6 +17,7 @@ export default {
     size: String,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -41,7 +42,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedRadioGroup.js b/VueForm/ConnectedRadioGroup.js
@@ -38,6 +38,7 @@ export default {
     border: Boolean,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -63,7 +64,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedSelect.js b/VueForm/ConnectedSelect.js
@@ -62,6 +62,7 @@ export default {
     automaticDropdown: Boolean,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -98,7 +99,7 @@ export default {
       }
     }
 
-    return $registerFormComponent(this.name, initialValue, this.validators)
+    return $registerFormComponent(this.name, initialValue, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedSlider.js b/VueForm/ConnectedSlider.js
@@ -18,6 +18,7 @@ export default {
     showInput: Boolean,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -43,7 +44,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedSwitch.js b/VueForm/ConnectedSwitch.js
@@ -27,6 +27,7 @@ export default {
     inactiveColor: String,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -52,7 +53,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/ConnectedTimePicker.js b/VueForm/ConnectedTimePicker.js
@@ -32,6 +32,7 @@ export default {
     clearIcon: String,
 
     validators: Array,
+    asyncValidators: Array,
 
     handleFocus: {
       type: Function,
@@ -57,7 +58,7 @@ export default {
   data() {
     const $registerFormComponent = resolveRegisterFormComponent(this)
 
-    return $registerFormComponent(this.name, this.value, this.validators)
+    return $registerFormComponent(this.name, this.value, this.validators, this.asyncValidators)
   },
 
   destroyed() {
diff --git a/VueForm/Form.vue b/VueForm/Form.vue
@@ -74,18 +74,41 @@ export default {
 
   methods: {
     // Should be called once
-    [CONSTANTS.SECRET_VUE_FORM_METHOD](name, fieldLevelInitialValue, validators) {
+    [CONSTANTS.SECRET_VUE_FORM_METHOD](name, fieldLevelInitialValue, validators, asyncValidators) {
       const vm = this
 
       const formLevelInitialValue = vm.initialValues[name]
       const value = !isNil(formLevelInitialValue) ? formLevelInitialValue : fieldLevelInitialValue
 
       const setError = nextValue => {
+        let validatorsPromise = Promise.resolve()
+        let syncError = false
+
+        const on = {
+          success: () => vm.$delete(vm.errors, name),
+          error: error => {
+            if (error) {
+              vm.$set(vm.errors, name, error)
+            }
+          },
+        }
+
         if (validators) {
-          const error = validate(validators, nextValue, name)
-          const method = error ? vm.$set : vm.$delete
+          validatorsPromise = validate(validators, nextValue, name)
+            .then(on.success)
+            .catch(error => {
+              on.error(error)
+              syncError = true
+            })
+        }
 
-          method(this.errors, name, error)
+        if (asyncValidators) {
+          validatorsPromise
+            // Prevent async validation when we have sync errors
+            .then(() => syncError && Promise.reject())
+            .then(() => validate(asyncValidators, nextValue, name))
+            .then(on.success)
+            .catch(on.error)
         }
       }
 
diff --git a/VueForm/validators/isRequired.js b/VueForm/validators/isRequired.js
@@ -7,7 +7,7 @@ export default function isRequired(customMessage) {
   return (value, name) => {
     let isError
 
-    if (isNil(value)) {
+    if (isNil(value) || value === '') {
       isError = true
     } else if (Array.isArray(value)) {
       isError = value.length === 0
diff --git a/VueForm/validators/validate.js b/VueForm/validators/validate.js
@@ -1,8 +1,21 @@
 import noop from 'lodash/noop'
 import invariant from 'invariant'
+import isPromise from '../utils/is-promise'
 
 export default function validate(validators, value, name) {
   invariant(Array.isArray(validators), '"validate" accepts an array of validators')
 
-  return validators.reduce((error, validator = noop) => error || validator(value, name), undefined)
+  return validators.reduce(
+    (sequence, validator = noop) =>
+      sequence.then(() => {
+        const result = validator(value, name)
+
+        if (isPromise(result)) {
+          return result
+        }
+
+        return result ? Promise.reject(result) : Promise.resolve()
+      }),
+    Promise.resolve()
+  )
 }
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/main.css b/docs/main.css
@@ -12,17 +12,17 @@
 }
 
 
-.buttons[data-v-3ee3e653] {
+.buttons[data-v-98b83d4a] {
   display: flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   justify-content: flex-start;
   align-items: flex-start;
 }
-.buttons_center[data-v-3ee3e653] {
+.buttons_center[data-v-98b83d4a] {
   justify-content: center;
 }
-.buttons_end[data-v-3ee3e653] {
+.buttons_end[data-v-98b83d4a] {
   justify-content: flex-end;
 }
 
@@ -40,13 +40,13 @@
 }
 
 
-.wrapper[data-v-24ce05e5] {
+.wrapper[data-v-5e0e1c8c] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-.form[data-v-24ce05e5],
-.values[data-v-24ce05e5] {
+.form[data-v-5e0e1c8c],
+.values[data-v-5e0e1c8c] {
   width: 320px;
 }
 
diff --git a/docs/vendors~main.bundle.js b/docs/vendors~main.bundle.js
diff --git a/example/src/InlineValidatorsForm/InlineValidatorsForm.vue b/example/src/InlineValidatorsForm/InlineValidatorsForm.vue
@@ -12,6 +12,18 @@ export default {
     handleSubmit(values) {
       this.formValues = values
     },
+
+    asyncValidator(value, name) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (value === 'github') {
+            resolve()
+          } else {
+            reject(`${name} should be "github"`)
+          }
+        }, 2000)
+      })
+    },
   },
 
   render() {
@@ -23,12 +35,15 @@ export default {
             <Form reset save submit handleSubmit={this.handleSubmit}>
               <Input
                 formItem
-                name="usename"
+                name="asyncUsername"
                 label="Username"
                 validators={[
                   validators.isRequired(),
                   validators.length({ min: 6 }),
                 ]}
+                asyncValidators={[
+                  this.asyncValidator,
+                ]}
               />
             </Form>
           </div>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vue Form component on hooks",
   "main": "VueForm/index.js",
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@ export default {`
`62`	`62`	`automaticDropdown: Boolean,`
`63`	`63`
`64`	`64`	`validators: Array,`
	`65`	`+ asyncValidators: Array,`
`65`	`66`
`66`	`67`	`handleFocus: {`
`67`	`68`	`type: Function,`
`@@ -98,7 +99,7 @@ export default {`
`98`	`99`	`}`
`99`	`100`	`}`
`100`	`101`
`101`		`- return $registerFormComponent(this.name, initialValue, this.validators)`
	`102`	`+ return $registerFormComponent(this.name, initialValue, this.validators, this.asyncValidators)`
`102`	`103`	`},`
`103`	`104`
`104`	`105`	`destroyed() {`