Feature/form change event

src/FormulateForm.vue

@@ -1,6 +1,7 @@
 <template>
   <form
     :class="classes"
+    @change="formChanged"
     @submit.prevent="formSubmitted"
   >
     <FormulateSchema
@@ -165,6 +166,10 @@ export default {
         this.errorComponents.push(component)
       }
     },
+    formChanged () {
+      const submission = new FormSubmission(this)
+      this.$emit('change', submission)
+    },
     formSubmitted () {
       if (this.submissionPromise) {
         return this.submissionPromise

test/unit/FormulateForm.test.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount, shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import Formulate from '../../src/Formulate.js'
 import FormSubmission from '../../src/FormSubmission.js'
@@ -253,6 +253,28 @@ describe('FormulateForm', () => {
     expect(wrapper.emitted('submit-raw')[0][0]).toBeInstanceOf(FormSubmission)
   })
 
+  it('emits an instance of FormSubmission on change', async () => {
+    const wrapper = mount(FormulateForm, {
+      slots: { default: `<FormulateInput type="text" validation="required|in:bar" name="testinput" />` }
+    })
+    const input = wrapper.find('input[type="text"]')
+    input.setValue('foo')
+    input.trigger('change')
+    await flushPromises()
+    expect(wrapper.emitted('change')[0][0]).toBeInstanceOf(FormSubmission)
+  })
+
+  it('emits a single event on Form input', async () => {
+    const wrapper = mount(FormulateForm, {
+      slots: { default: `<FormulateInput type="text" validation="required|in:bar" name="testinput" />` }
+    })
+    const input = wrapper.find('input[type="text"]')
+    input.setValue('foo')
+    input.trigger('input')
+    await flushPromises()
+    expect(wrapper.emitted('input').length).toBe(1)
+  })
+
   it('resolves hasValidationErrors to true', async () => {
     const wrapper = mount(FormulateForm, {
       slots: { default: '<FormulateInput type="text" validation="required" name="testinput" />' }