update api, fixed async

addon/index.js

@@ -20,10 +20,22 @@ class ValidatorClass {
   constructor(owner, validate) {
     this.instance = validate.get();
 
-    this.validate = (...args) => {
-      const instance = validate(owner, ...args);
-      instance.done && instance.done((i) => (this.instance = i));
-      this.instance = instance;
+    this.validate = async (...args) => {
+      return new Promise((resolve) => {
+        const instance = validate(owner, ...args);
+
+        if (instance.done) {
+          instance.done((i) => {
+            this.instance = i;
+            resolve(i);
+          });
+
+          return;
+        }
+
+        this.instance = instance;
+        resolve(instance);
+      });
     };
 
     this.reset = (...args) => {
@@ -36,6 +48,10 @@ class ValidatorClass {
     return !!this.instance.errorCount;
   }
 
+  get isValid() {
+    return !this.instance.errorCount;
+  }
+
   get errors() {
     return this.instance.getErrors();
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-vest",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon",
@@ -58,6 +58,7 @@
     "ember-cli-terser": "^4.0.2",
     "ember-code-snippet": "^3.0.0",
     "ember-composable-helpers": "^4.5.0",
+    "ember-concurrency": "^2.1.2",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",

tests/dummy/app/components/async-example.hbs

@@ -0,0 +1,43 @@
+<form class="flex flex-col mb-8" {{on "submit" this.submit}}>
+  <label for="" class="mb-4 flex flex-col">
+    <span class="text-sm font-bold mb-2">First Name</span>
+    <input
+      type="text"
+      name=""
+      value=""
+      class="text-sm p-2 border mb-2"
+      value={{this.firstName}}
+      {{on "input" (pick "target.value" (fn (mut this.firstName)))}}
+      {{on "input" (fn this.validator.validate "firstName")}}
+      {{on "blur" (fn this.validator.validate "firstName")}}
+    >
+    {{#each this.validator.errors.firstName as |error|}}
+      <span class="text-sm text-red-700 mb-1">
+        {{error}}
+      </span>
+    {{/each}}
+  </label>
+
+  <label for="" class="mb-4 flex flex-col">
+    <span class="text-sm font-bold mb-2">Last Name</span>
+    <input
+      type="text"
+      name=""
+      value=""
+      class="text-sm p-2 border mb-2"
+      value={{this.lastName}}
+      {{on "input" (pick "target.value" (fn (mut this.lastName)))}}
+      {{on "input" (fn this.validator.validate "lastName")}}
+      {{on "blur" (fn this.validator.validate "lastName")}}
+    >
+    {{#each this.validator.errors.lastName as |error|}}
+      <span class="text-sm text-red-700 mb-1">
+        {{error}}
+      </span>
+    {{/each}}
+  </label>
+
+  <div class="flex flex-row">
+    <button type="submit" class="bg-green-400 p-2 px-8 text-white" name="button">Validate</button>
+  </div>
+</form>

tests/dummy/app/components/async-example.js

@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { Validator, test, only } from 'ember-vest';
+import { task, timeout } from 'ember-concurrency';
+
+@Validator('AsyncExample', function (data, changedField) {
+  only(changedField);
+
+  test('firstName', () => {
+    return data.validateFirstName.perform(data.firstName);
+  });
+
+  test('lastName', () => {
+    return data.validateLastName.perform(data.lastName);
+  });
+})
+export default class AsyncExampleComponent extends Component {
+  @tracked firstName;
+  @tracked lastName;
+
+  @task({ restartable: true })
+  *validateFirstName(value = '') {
+    yield timeout(300);
+
+    if (value.length < 2) {
+      return Promise.reject('First Name should be longer or equals 2');
+    }
+    return Promise.resolve();
+  }
+
+  @task({ restartable: true })
+  *validateLastName(value = '') {
+    yield timeout(300);
+
+    if (value.length < 2) {
+      return Promise.reject('Last Name should be longer or equals 2');
+    }
+    return Promise.resolve();
+  }
+
+  @action async submit(e) {
+    e.preventDefault();
+    await this.validator.validate();
+
+    if (this.validator.isValid) {
+      alert('success');
+    }
+  }
+}

tests/dummy/app/components/groups-example.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { Validator, test, enforce, only, group } from 'ember-vest';
 
-@Validator('FormExample', function (data, changedField) {
+@Validator('GroupsExample', function (data, changedField) {
   only(changedField);
   only.group(data.type);
 
@@ -29,9 +29,13 @@ export default class GroupsExampleComponent extends Component {
   @tracked password;
   @tracked confirmPassword;
 
-  @action submit(e) {
+  @action async submit(e) {
     e.preventDefault();
-    this.validator.validate();
+    await this.validator.validate();
+
+    if (this.validator.isValid) {
+      alert('success');
+    }
   }
 
   @action isEqual(a, b) {

tests/dummy/app/components/simple-example.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { Validator, test, enforce, only } from 'ember-vest';
 
-@Validator('FormExample', function (data, changedField) {
+@Validator('SimpleExample', function (data, changedField) {
   only(changedField);
 
   test(
@@ -26,8 +26,12 @@ export default class SimpleExampleComponent extends Component {
   @tracked firstName;
   @tracked lastName;
 
-  @action submit(e) {
+  @action async submit(e) {
     e.preventDefault();
-    this.validator.validate();
+    await this.validator.validate();
+
+    if (this.validator.isValid) {
+      alert('success');
+    }
   }
 }

tests/dummy/app/templates/async.hbs

@@ -2,9 +2,11 @@
   <div class="flex flex-col mb-16">
     <h1 class="text-3xl font-bold mb-8">Async form example</h1>
 
-    <div class="">
-      TODO
-    </div>
+    <AsyncExample />
+
+    <CodeBlock
+      @tabs={{array "components/async-example.hbs" "components/async-example.js"}}
+    />
   </div>
 
   <div class="flex flex-row justify-between">