Feature async validate (Validator and Form) (didi#155)

* async validator init

* form async validate

* update(demo): validator example

* fix form show error msg when layout is standard

* validator async validate

* update(demo): validator async validate

* update(demo): set global Promise

* util add cb2PromiseWithResolve

* ad util debounce

* form pending state

* validator validating & validated

* validator only async validate trigger validating event

* fix upload should watch value change

* debounce support initValue as result

* form async validate

* update(test): form async validate tests

* update(demo): form add async cases

* update(doc): validator async

* validator: validate cb with valid argument

* validate debounce time check

* update(doc): form async validate

* form event name

* update(doc): form sync example

* fix form submit & reset event

* update(test): form submit

* validator: support function rule & validated event

* update(doc): validator

* update(test): validator async

* form adapt validator

* update(test): validator content test

* validator: clean code

* validator-rules len

* update(doc): validator async

* update(test): validator

* update(test): validator

* add classic and fresh style

* clean code

document/common/stylus/md.styl

@@ -127,7 +127,7 @@ a
     color: #137DC6
 sup
   position: absolute
-  margin: -12px 0 0 -4px
+  margin: -10px 0 0 -4px
   padding: 2px
   transform: scale(0.6) translateZ(0)
   border: 1px solid #ccc

document/components/docs/en-US/form.md

@@ -1,6 +1,8 @@
 ## Form
 
 > New in 1.7.0+
+>
+> 1.8.0+ supported trigger validating when blur and debounce. Supported async validate too because of Validator supported it.
 
 CubeForm is a schema-based form generator component.
 
@@ -14,7 +16,7 @@ CubeForm is a schema-based form generator component.
   <cube-form
     :model="model"
     :schema="schema"
-    :immediate-validate="true"
+    :immediate-validate="false"
     :options="options"
     @validate="validateHandler"
     @submit="submitHandler"
@@ -78,7 +80,9 @@ CubeForm is a schema-based form generator component.
                   },
                   rules: {
                     required: true
-                  }
+                  },
+                  // validating when blur
+                  trigger: 'blur'
                 },
                 {
                   type: 'radio-group',
@@ -116,7 +120,10 @@ CubeForm is a schema-based form generator component.
                   label: 'Textarea',
                   rules: {
                     required: true
-                  }
+                  },
+                  // debounce validate
+                  // if set to true, the default debounce time will be 200(ms)
+                  debounce: 100
                 }
               ]
             },
@@ -136,7 +143,30 @@ CubeForm is a schema-based form generator component.
                   modelKey: 'uploadValue',
                   label: 'Upload',
                   rules: {
-                    required: true
+                    required: true,
+                    uploaded: (val, config) => {
+                      return Promise.all(val.map((file, i) => {
+                        return new Promise((resolve, reject) => {
+                          if (file.uploadedUrl) {
+                            return resolve()
+                          }
+                          // fake request
+                          setTimeout(() => {
+                            if (i % 2) {
+                              reject(new Error())
+                            } else {
+                              file.uploadedUrl = 'uploaded/url'
+                              resolve()
+                            }
+                          }, 1000)
+                        })
+                      })).then(() => {
+                        return true
+                      })
+                    }
+                  },
+                  messages: {
+                    uploaded: '上传失败'
                   }
                 }
               ]
@@ -156,7 +186,8 @@ CubeForm is a schema-based form generator component.
           ]
         },
         options: {
-          scrollToInvalidField: true
+          scrollToInvalidField: true,
+          layout: 'standard' // classic fresh
         }
       }
     },
@@ -385,6 +416,8 @@ CubeForm is a schema-based form generator component.
   | label | Label of field | String | - | - |
   | props | This value will be the `type` or `component` props | Object | - | - |
   | rules | Validator rules, see <a href="#/en-US/docs/validator#cube-Props-anchor">Validator</a> | Object | - | - |
+  | trigger<sup>1.8.0+</sup> | If set to 'blur' then will be validate this filed when blur | String | blur/change | - |
+  | debounce<sup>1.8.0+</sup> | Debounce validating time(ms). If `trigger` is 'blur' then the debounce will be ignored | Number/Boolean | >= 0, if set to true the time will be 200(ms) | - |
   | messages | Validator messages, see <a href="#/en-US/docs/validator#cube-Props-anchor">Validator</a> | String | - | - |
 
 #### FormGroup
@@ -430,8 +463,8 @@ CubeForm is a schema-based form generator component.
 
 ### Instance methods
 
-| Method name | Description |
-| - | - |
-| submit | submit form |
-| reset | reset form |
-| validate | validate form |
+| Method name | Description | Parameters | Returned value |
+| - | - | - | - |
+| submit | submit form | - | - |
+| reset | reset form | - | - |
+| validate(cb) | validate form | cb: validated callback function, used to async validating cases normally. The arguments is the `valid` value | If supported Promise then the returned value will be Promise instance(Only have resolved state, the resolved value is `valid`), otherwise the returned value is `undefined` |

document/components/docs/en-US/validator.md

@@ -39,7 +39,7 @@ Validator is used to validate form data and corresponding warning message.
 
 - Add warning style to form component
 
-  If you want to add warning style to form component, you could put the form component into the Validator component. Because when the validation failed, the Validator component will get a CSS class `cube-validator_warn` so that you could select the descendant form element of class `cube-validator_warn` ro add warning style. And we have added the red border for input and textarea by default.
+  If you want to add warning style to form component, you could put the form component into the Validator component. Because when the validation failed, the Validator component will get a CSS class `cube-validator_warn` so that you could select the descendant form element of class `cube-validator_warn` ro add warning style.
 
   ```html
   <cube-validator :model="text" :rules="rules" v-model="valid">
@@ -112,6 +112,68 @@ Validator is used to validate form data and corresponding warning message.
     color: orange
   ```
 
+- Async validate <sup>1.8.0+</sup>
+
+  If the rule function returned a function(**this function receives a `resolve` callback, if this function called with `true` then it will be treated as success, otherwise it will be treated as failure**) or a `Promise` object(**if `resolve` value is `true` then it will be treated as success, otherwise it will be treated as failure**), then it will be validate asynchronously. And when validating the `validating` event will be emited.
+
+  ```html
+  <div class="validator-item">
+    <p>Async validate: </p>
+    <cube-validator
+      v-model="valid"
+      :model="captcha"
+      :rules="rules"
+      :messages="messages"
+      :immediate="immediate"
+      @validating="validatingHandler"
+      @validated="validatedHandler">
+      <cube-input v-model="captcha" placeholder="Please input captcha"></cube-input>
+    </cube-validator>
+  </div>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        valid: undefined,
+        captcha: '',
+        rules: {
+          type: 'number',
+          required: true,
+          len: 6,
+          captchaCheck: (val) => {
+            return (resolve) => {
+              setTimeout(() => {
+                resolve(val === '123456')
+              }, 1000)
+            }
+            /** or return promise:
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(val === '123456')
+              }, 1000)
+            })
+            **/
+          }
+        },
+        messages: {
+          captchaCheck: 'Please input "123456"'
+        }
+      }
+    },
+    methods: {
+      validatingHandler() {
+        console.log('validating')
+      },
+      validatedHandler() {
+        console.log('validated')
+      }
+    }
+  }
+  ```
+
+  The `captchaCheck` is an async rule.
+
 - Submit
 
   Although submit is not inside of Validator, it usually be relative with Validator. Therefore, we want to introduce our best practice about submit here. It focus on the handles of multi-validator and warn message no matter whether the form data has ever changed.
@@ -171,19 +233,28 @@ Validator is used to validate form data and corresponding warning message.
 | rules | the rules for validation, you can find the details of rules below | Object | - | {} |
 | messages | custom messages for the corresponding rule | Object | - | {} |
 | immediate | Immediate validate after loaded | Boolean | true/false | false |
+| disabled<sup>1.7.0+</sup> | disabled validate or not | Boolean | true/false | false |
 
 ### Slot
 
 | Name | Description | Scope Parameters |
 | - | - | - |
 | default | the relative form component or element | - |
-| message | warning message | dirty: if the data have ever changed <br> validated: if the validator have ever validated <br> message: the message of the first failed rule <br> result: an object, which contains the resule and message of each rule, such as, { required: { valid: false, invalid: true, message: '必填' } } |
+| message | warning message | dirty: if the data have ever changed <br> validating: whether is validating <br> validated: if the validator have ever validated <br> message: the message of the first failed rule <br> result: an object, which contains the resule and message of each rule, such as, { required: { valid: false, invalid: true, message: '必填' } } |
+
+### Events
+
+| Event Name | Description | Parameters |
+| - | - | - |
+| validating | validating (only triggered when async validateing) | - |
+| validated | validated (only triggered when async validateing) | valid: 校验是否成功 |
+| msg-click | click error message ele | - |
 
 ### Instance methods
 
-| Method name | Description |
-| - | - |
-| validate | Validate |
+| Method name | Description | Parameters | Returned value |
+| - | - | - | - |
+| validate(cb) | Validate | cb: validated callback function, used to async validating cases normally. The arguments is the `valid` value | If supported Promise then the returned value will be Promise instance(Only have resolved state, the resolved value is `valid`), otherwise the returned value is `undefined` |
 
 ### Rule
 

document/components/docs/zh-CN/form.md

@@ -1,6 +1,8 @@
 ## Form
 
 > 1.7.0 新增
+>
+> 从 1.8.0 开始支持blur 时才触发校验以及 debounce，同 Validator 一样也开始支持异步校验。
 
 表单，包含各种输入组件以及对应的校验；我们可以通过数据驱动的方式来生成完成表单。
 
@@ -14,7 +16,7 @@
   <cube-form
     :model="model"
     :schema="schema"
-    :immediate-validate="true"
+    :immediate-validate="false"
     :options="options"
     @validate="validateHandler"
     @submit="submitHandler"
@@ -78,7 +80,9 @@
                   },
                   rules: {
                     required: true
-                  }
+                  },
+                  // validating when blur
+                  trigger: 'blur'
                 },
                 {
                   type: 'radio-group',
@@ -116,7 +120,10 @@
                   label: 'Textarea',
                   rules: {
                     required: true
-                  }
+                  },
+                  // debounce validate
+                  // if set to true, the default debounce time will be 200(ms)
+                  debounce: 100
                 }
               ]
             },
@@ -136,7 +143,30 @@
                   modelKey: 'uploadValue',
                   label: 'Upload',
                   rules: {
-                    required: true
+                    required: true,
+                    uploaded: (val, config) => {
+                      return Promise.all(val.map((file, i) => {
+                        return new Promise((resolve, reject) => {
+                          if (file.uploadedUrl) {
+                            return resolve()
+                          }
+                          // fake request
+                          setTimeout(() => {
+                            if (i % 2) {
+                              reject(new Error())
+                            } else {
+                              file.uploadedUrl = 'uploaded/url'
+                              resolve()
+                            }
+                          }, 1000)
+                        })
+                      })).then(() => {
+                        return true
+                      })
+                    }
+                  },
+                  messages: {
+                    uploaded: '上传失败'
                   }
                 }
               ]
@@ -386,6 +416,8 @@
   | label | 字段的标签值 | String | - | - |
   | props | type 对应的组件或者自定义组件 component 所需要的 props | Object | - | - |
   | rules | 字段的校验规则，参见 <a href="#/zh-CN/docs/validator#cube-Props-anchor">Validator</a> | Object | - | - |
+  | trigger<sup>1.8.0+</sup> | 如果设置为 'blur' 那么则会在离焦后校验 | String | blur/change | - |
+  | debounce<sup>1.8.0+</sup> | 控制校验节奏，值为时间，单位 ms。如果 trigger 设置为 blur 则此项配置不生效 | Number/Boolean | >= 0，如果设置为 true，那么时间就是 200(ms) | - |
   | messages | 字段的校验消息，参见 <a href="#/zh-CN/docs/validator#cube-Props-anchor">Validator</a> | String | - | - |
 
 #### CubeFormGroup
@@ -431,8 +463,8 @@
 
 ### 实例方法
 
-| 方法名 | 说明 |
-| - | - |
-| submit | 提交表单 |
-| reset | 重置表单 |
-| validate | 校验表单 |
+| 方法名 | 说明 | 参数 | 返回值 |
+| - | - | - | - |
+| submit | 提交表单 | - | - |
+| reset | 重置表单 | - | - |
+| validate(cb) | 校验表单 | cb: 校验完成后回调函数，主要用于异步校验场景，调用参数为 valid 的值 | 如果支持 Promise 的话返回值是 Promise 对象（只有 resolved 状态，值为 valid），否则 undefined |