feat(QForm): new component -- still WIP

Author: rstoenescu

quasar/dev/components/form/form.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="q-pa-md" style="max-width: 300px">
+    <div>{{ native }}</div>
+    <div>{{ name }}</div>
+    <div>{{ age }}</div>
+    <div>{{ modelAsync }}</div>
+
+    <q-form
+      ref="form"
+      @submit="onSubmit"
+      @reset="onReset"
+      @validation-error="onValidationError"
+      class="q-gutter-md"
+    >
+      <input v-model="native">
+
+      <q-input
+        ref="name"
+        filled
+        v-model="name"
+        label="Your name *"
+        hint="Name and surname"
+        lazy-rules
+        :rules="[ val => val && val.length > 0 || 'Please type something']"
+      />
+
+      <q-input
+        ref="age"
+        filled
+        type="number"
+        v-model="age"
+        label="Your age *"
+        lazy-rules
+        :rules="[
+          val => val !== null && val !== '' || 'Please type your age',
+          val => val > 0 && val < 100 || 'Please type a real age'
+        ]"
+      />
+
+      <q-input
+        v-model="modelAsync"
+        filled
+        label="Only async *"
+        :rules="[
+          asyncRule
+        ]"
+      />
+
+      <q-toggle v-model="accept" label="I accept the license and terms" />
+
+      <div>
+        <q-btn label="Submit" type="submit" color="primary" />
+        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+      </div>
+    </q-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      native: null,
+      name: null,
+      age: null,
+      modelAsync: null,
+
+      accept: false
+    }
+  },
+
+  methods: {
+    async asyncRule (val) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve(!!val || '* Required')
+        }, 1000)
+      })
+    },
+
+    onSubmit () {
+      console.log('@submit')
+    },
+
+    onReset () {
+      this.native = null
+      console.log('@reset')
+    },
+
+    onValidationError () {
+      console.log('@validation-error')
+    }
+  }
+}
+</script>

quasar/src/components/form/QForm.js

@@ -1,66 +1,108 @@
 import Vue from 'vue'
-import slot from 'quasar/src/utils/slot.js'
+
+import { stopAndPrevent } from '../../utils/event.js'
+import slot from '../../utils/slot.js'
 
 export default Vue.extend({
   name: 'QForm',
 
+  mounted () {
+    this.validateIndex = 0
+  },
+
   methods: {
     validate () {
-      let value = true
+      const promises = []
+
+      this.validateIndex++
+
       for (let i = 0; i < this.$children.length; ++i) {
-        const component = this.$children[i]
-        if ('validate' in component && typeof component.validate === 'function') {
-          if (!component.validate()) {
-            value = false
+        const comp = this.$children[i]
+
+        if (typeof comp.validate === 'function') {
+          const valid = comp.validate()
+
+          if (typeof valid.then === 'function') {
+            promises.push(valid)
+          }
+          else if (valid !== true) {
+            return false
           }
         }
       }
-      return value
+
+      if (promises.length === 0) {
+        return true
+      }
+
+      const index = this.validateIndex
+
+      return Promise.all(promises).then(
+        res => {
+          if (index === this.validateIndex) {
+            return res
+          }
+        },
+        () => {
+          if (index === this.validateIndex) {
+            return false
+          }
+        }
+      )
     },
+
     resetValidation () {
+      this.validateIndex++
+
       for (let i = 0; i < this.$children.length; ++i) {
-        const component = this.$children[i]
-        if ('resetValidation' in component && typeof component.resetValidation === 'function') {
-          component.resetValidation()
+        const comp = this.$children[i]
+        if (typeof comp.resetValidation === 'function') {
+          comp.$emit('input', null)
+          this.$nextTick(() => {
+            comp.resetValidation()
+          })
         }
       }
     },
-    __onSubmit (event) {
-      // Abort if the element emitting the event is not
-      // the element the event is bound to
-      if (event.target !== event.currentTarget) return
-      // Stop event propagation
-      event.stopPropagation()
-      // Prevent the default handler for this element
-      event.preventDefault()
-      if (this.validate()) {
-        this.$emit('submit')
-      } else {
-        this.$emit('error')
+
+    submit (evt) {
+      evt !== void 0 && stopAndPrevent(evt)
+
+      const validate = this.validate()
+
+      const update = val => {
+        if (val === true) {
+          this.$emit('submit')
+        }
+        else if (val === false) {
+          this.$emit('validation-error')
+        }
       }
-    },
-    __onReset (event) {
-      // Abort if the element emitting the event is not
-      // the element the event is bound to
-      if (event.target !== event.currentTarget) return
-      // Stop event propagation
-      event.stopPropagation()
-      // Prevent the default handler for this element
-      event.preventDefault()
-      if (this.resetValidation()) {
-        this.$emit('reset')
+
+      if (typeof validate.then !== 'function') {
+        update(validate)
+      }
+      else {
+        validate.then(val => {
+          update(val[0])
+        })
       }
+    },
+
+    reset () {
+      this.resetValidation()
+      this.$emit('reset')
     }
   },
 
   render (h) {
     return h('form', {
       staticClass: 'q-form',
       on: {
-        submit: this.__onSubmit,
-        reset: this.__onReset
+        ...this.$listeners,
+        submit: this.submit,
+        reset: this.reset
       }
-    }, slot(this, "default"))
+    }, slot(this, 'default'))
   }
 })
-

quasar/src/components/form/QForm.json

@@ -4,21 +4,26 @@
       "desc": "Anything can go into this slot"
     }
   },
+
   "events": {
     "submit": {
       "desc": "Emitted when all validations have passed when tethered to a submit button"
     },
-    "error": {
+
+    "validation-error": {
       "desc": "Emitted when one or more validations have failed"
     },
+
     "reset": {
-      "desc": "Emitted when all calidations have been reset when tethered to a reset button"
+      "desc": "Emitted when all validations have been reset when tethered to a reset button"
     }
   },
+
   "methods": {
     "validate": {
       "desc": "Validates all applicable child components"
     },
+
     "resetValidation": {
       "desc": "Resets the validation status for all applicable child components"
     }

quasar/src/mixins/validate.js

@@ -66,9 +66,15 @@ export default {
       this.innerErrorMessage = void 0
     },
 
+    /*
+     * Return value
+     *   - true (validation succeeded)
+     *   - false (validation failed)
+     *   - Promise (pending async validation)
+     */
     validate (val = this.value) {
       if (!this.rules || this.rules.length === 0) {
-        return
+        return true
       }
 
       this.validateIndex++
@@ -107,7 +113,7 @@ export default {
 
         if (res === false || typeof res === 'string') {
           update(true, res)
-          return
+          return false
         }
         else if (res !== true && res !== void 0) {
           promises.push(res)
@@ -116,7 +122,7 @@ export default {
 
       if (promises.length === 0) {
         update(false)
-        return
+        return true
       }
 
       if (this.innerLoading !== true) {
@@ -125,22 +131,26 @@ export default {
 
       const index = this.validateIndex
 
-      Promise.all(promises).then(
+      return Promise.all(promises).then(
         res => {
           if (index === this.validateIndex) {
             if (res === void 0 || Array.isArray(res) === false || res.length === 0) {
               update(false)
+              return true
             }
             else {
               const msg = res.find(r => r === false || typeof r === 'string')
               update(msg !== void 0, msg)
+              return msg === void 0
             }
           }
+          return true
         },
         (e) => {
           if (index === this.validateIndex) {
             console.error(e)
             update(true)
+            return false
           }
         }
       )