Merge pull request #83 from Human-Connection/2019/kw19/fix_form_user_input_event

2019/kw19/fix_form_user_input_event

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-connection/styleguide",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "private": false,
   "scripts": {
     "serve": "http-server ./docs -o -s",
@@ -82,4 +82,4 @@
     "*.js"
   ],
   "license": "MIT"
-}
+}

src/system/components/data-input/Form/Form.vue

@@ -1,12 +1,12 @@
 <template>
-  <form
-    class="ds-form"
-    @submit.prevent="submit"
-    novalidate="true"
+  <form 
+    class="ds-form" 
+    @submit.prevent="submit" 
+    novalidate="true" 
     autocomplete="off">
     <slot 
       :errors="errors" 
-      :reset="reset" />
+      :reset="reset"/>
   </form>
 </template>
 
@@ -61,13 +61,6 @@ export default {
   methods: {
     submit() {
       this.validate(() => {
-        /**
-         * Fires after user input.
-         * Receives the current form data.
-         *
-         * @event input
-         */
-        this.$emit('input', this.newData)
         /**
          * Fires on form submit.
          * Receives the current form data.
@@ -81,9 +74,9 @@ export default {
       const validator = new Schema(this.schema)
       // Prevent validator from printing to console
       // eslint-disable-next-line
-      const warn = console.warn;
+      const warn = console.warn
       // eslint-disable-next-line
-      console.warn = () => {};
+      console.warn = () => {}
       validator.validate(this.newData, errors => {
         if (errors) {
           this.errors = errors.reduce((errorObj, error) => {
@@ -95,7 +88,7 @@ export default {
           this.errors = null
         }
         // eslint-disable-next-line
-        console.warn = warn;
+        console.warn = warn
         this.notify(this.newData, this.errors)
         if (!errors && cb && typeof cb === 'function') {
           cb()
@@ -121,10 +114,25 @@ export default {
     },
     async update(model, value) {
       dotProp.set(this.newData, model, value)
-      this.validate()
+      this.validate(() => {
+        /**
+         * Fires after user input.
+         * Receives the current form data.
+         *
+         * @event input
+         */
+        this.$emit('input', cloneDeep(this.newData))
+      })
     },
     reset() {
-      this.$emit('input', cloneDeep(this.value))
+      /**
+       * Fires after reset() was called.
+       * Receives the current form data.
+       * Reset has to be handled manually.
+       *
+       * @event reset
+       */
+      this.$emit('reset', cloneDeep(this.value))
     }
   },
   created() {

src/system/components/data-input/Form/demo.md

@@ -51,6 +51,8 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
   <ds-form
     v-model="formData"
     @submit="handleSubmit"
+    @input="handleInput"
+    @reset="handleReset"
     :schema="formSchema">
     <template slot-scope="{ errors, reset }">
       <ds-input
@@ -123,6 +125,12 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
     methods: {
       handleSubmit(data) {
         console.log('Submit form ...', data)
+      },
+      handleInput(data) {
+        console.log('Input form ...', data)
+      },
+      handleReset(data) {
+        console.log('Reset form ...', data)
       }
     }
   }