[1.4.1] Support for immediate changes handler

isnifer · isnifer · commit 8d52a56e4d58 · 2018-11-18T15:20:55.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 1.4.1
+
+### Added:
+
+- Support for immediate changes handler `handleModelChange`
+- Example for immediate changes form [`<ImmediateForm />`](https://detools.github.io/vue-form#immediate-form)
+
+### Changed:
+
+- Example `<AsyncValidationForm />` renamed to `<AsyncSubmitForm />`
+
 ## 1.4.0
 
 ### Added:
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 ## Changelog
 
 - [1.4.0](/CHANGELOG.md#140)
+- [1.4.1](/CHANGELOG.md#141)
 
 ## Roadmap
 
diff --git a/VueForm/Form.vue b/VueForm/Form.vue
@@ -1,5 +1,5 @@
 <script>
-import { isNil, isBoolean, has, mapValues } from 'lodash'
+import { isNil, isBoolean, has, mapValues, noop } from 'lodash'
 import { Form, Button } from 'element-ui'
 import FormItem from './ConnectedFormItem'
 import CONSTANTS from './constants'
@@ -35,9 +35,8 @@ export default {
 
     handleSubmit: {
       type: Function,
-      required: true,
+      default: noop,
     },
-
     handleModelChange: Function,
     handleDisabled: Function,
     handleReset: Function,
@@ -88,6 +87,10 @@ export default {
       const setValue = nextValue => {
         vm.$set(this.state, name, nextValue)
 
+        if (this.handleModelChange) {
+          this.handleModelChange(this.state)
+        }
+
         setError(nextValue)
       }
 
@@ -100,10 +103,6 @@ export default {
         vm.$delete(this.errors, name)
       }
 
-      if (this.handleModelChange) {
-        this.handleModelChange({ ...this.state, [name]: value })
-      }
-
       return {
         cleanFormValue,
         setError,
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/main.css b/docs/main.css
@@ -12,56 +12,74 @@
 }
 
 
-.buttons[data-v-3e4a268c] {
+.buttons[data-v-6eb5ee8e] {
   display: flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   justify-content: flex-start;
   align-items: flex-start;
 }
-.buttons_center[data-v-3e4a268c] {
+.buttons_center[data-v-6eb5ee8e] {
   justify-content: center;
 }
-.buttons_end[data-v-3e4a268c] {
+.buttons_end[data-v-6eb5ee8e] {
   justify-content: flex-end;
 }
 
 
-.wrapper[data-v-3ad6904c] {
+.wrapper[data-v-5084746c] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-.form[data-v-3ad6904c],
-.values[data-v-3ad6904c] {
+.form[data-v-5084746c] {
+  width: 750px;
+}
+.values[data-v-5084746c] {
+  width: 200px;
+}
+
+
+.wrapper[data-v-2e5bf2cc] {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.form[data-v-2e5bf2cc],
+.values[data-v-2e5bf2cc] {
   width: 320px;
 }
 
 
-.wrapper[data-v-963a1766] {
+.wrapper[data-v-12049160] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-.form[data-v-963a1766],
-.values[data-v-963a1766] {
+.form[data-v-12049160],
+.values[data-v-12049160] {
   width: 320px;
 }
 
 
-.wrapper[data-v-5fb18062] {
+.wrapper[data-v-08c02437] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-.form[data-v-5fb18062],
-.values[data-v-5fb18062] {
+.form[data-v-08c02437],
+.values[data-v-08c02437] {
   width: 320px;
 }
 
 
-.forms[data-v-35c71fa7] {
-  max-width: 800px;
+.forms[data-v-75cca039] {
+  max-width: 1000px;
   padding: 0 20px;
 }
+.divider[data-v-75cca039] {
+  height: 2px;
+  background-color: #757575;
+  margin: 50px 0;
+}
 
diff --git a/docs/vendors~main.bundle.js b/docs/vendors~main.bundle.js
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,7 +1,8 @@
 <script>
 import BasicForm from './BasicForm'
 import InlineValidationsForm from './InlineValidationsForm'
-import AsyncValidationForm from './AsyncValidationForm'
+import AsyncSubmitForm from './AsyncSubmitForm'
+import ImmediateForm from './ImmediateForm'
 
 const Divider = {
   render() {
@@ -19,7 +20,9 @@ export default {
         <Divider />
         <InlineValidationsForm />
         <Divider />
-        <AsyncValidationForm />
+        <AsyncSubmitForm />
+        <Divider />
+        <ImmediateForm />
       </div>
     )
   },
diff --git a/example/src/AsyncSubmitForm/AsyncSubmitForm.vue b/example/src/AsyncSubmitForm/AsyncSubmitForm.vue
@@ -16,7 +16,7 @@ export default {
       }).then(() => {
         Notification.success({
           title: 'Yay!',
-          message: 'Async Validation is Working',
+          message: 'Async Submittion is working',
         })
       })
     },
@@ -25,7 +25,7 @@ export default {
   render() {
     return (
       <div>
-        <h1>Async Validation Form</h1>
+        <h1>Async Submit Form</h1>
         <div class="wrapper">
           <div class="form">
             <Form reset submit handleSubmit={this.handleSubmit}>
diff --git a/example/src/AsyncSubmitForm/index.js b/example/src/AsyncSubmitForm/index.js
@@ -0,0 +1 @@
+export default from './AsyncSubmitForm'
diff --git a/example/src/AsyncValidationForm/index.js b/example/src/AsyncValidationForm/index.js
diff --git a/example/src/ImmediateForm/ImmediateForm.vue b/example/src/ImmediateForm/ImmediateForm.vue
@@ -0,0 +1,57 @@
+<script>
+import Form, { Input } from '@detools/vue-form'
+
+export default {
+  data() {
+    return {
+      formValues: {},
+    }
+  },
+
+  methods: {
+    handleModelChange(values) {
+      this.formValues = values
+    },
+  },
+
+  render() {
+    return (
+      <div>
+        <h1 id="immediate-form">Immediate Form</h1>
+        <div class="wrapper">
+          <div class="form">
+            <Form handleModelChange={this.handleModelChange}>
+              <Input class="input" name="name" placeholder="Type and see to Form Values" />
+              <br/>
+              <br/>
+              <Input class="input" name="type" placeholder="Type and see to Form Values" />
+            </Form>
+            <br/>
+            <br/>
+          </div>
+          <div class="values">
+            <strong>Form Values</strong>
+            <br />
+            <br />
+            <div>
+              <pre>{JSON.stringify(this.formValues, null, 2)}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+</script>
+
+<style scoped lang="less">
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.form, .values {
+  width: 320px;
+}
+</style>
diff --git a/example/src/ImmediateForm/index.js b/example/src/ImmediateForm/index.js
@@ -0,0 +1 @@
+export default from './ImmediateForm'
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Vue Form component on hooks",
   "main": "VueForm/index.js",
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export default from './AsyncSubmitForm'`