[2.4.1] Fixed passing touched state from vue-form to control

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.4.1
+
+### Fixed
+
+- Internal `manageTouchedFieldsState` method
+- Passing touched state from vue-form to control
+
 ## 2.4.0
 
 ### Updated

README.md

@@ -78,6 +78,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.4.1](/CHANGELOG.md#241)
 - [2.4.0](/CHANGELOG.md#240)
 - [2.3.1](/CHANGELOG.md#231)
 - [2.3.0](/CHANGELOG.md#230)

VueForm/ConnectedFormItem.js

@@ -15,20 +15,3 @@ export default {
     )
   },
 }
-
-/*
-<style lang="less">
-  .is-vue-form-warn .el-form-item__error {
-    color: #FF9800;
-  }
-
-  .is-vue-form-warn .el-form-item.is-error .el-input__inner,
-  .is-vue-form-warn .el-form-item.is-error .el-input__inner:focus,
-  .is-vue-form-warn .el-form-item.is-error .el-textarea__inner,
-  .is-vue-form-warn .el-form-item.is-error .el-textarea__inner:focus,
-  .is-vue-form-warn .el-message-box__input input.invalid,
-  .is-vue-form-warn .el-message-box__input input.invalid:focus {
-    border-color: #FF9800;
-  }
-</style>
-*/

VueForm/Form.js

@@ -210,19 +210,21 @@ export default {
         vm.$set(this.touchedFields, name, true)
       }
 
-      const isFieldTouched = this.touchedFields[name]
-
       return {
         cleanFormValue,
         setError,
         setAsyncError,
         setTouched,
-        useState: () => [
-          this.state[name],
-          setValue,
-          isFieldTouched && (this.syncErrors[name] || this.asyncErrors[name]),
-          isFieldTouched,
-        ],
+        useState: () => {
+          const isFieldTouched = this.touchedFields[name]
+
+          return [
+            this.state[name],
+            setValue,
+            isFieldTouched && (this.syncErrors[name] || this.asyncErrors[name]),
+            isFieldTouched,
+          ]
+        },
       }
     },
 
@@ -245,7 +247,7 @@ export default {
     },
 
     manageTouchedFieldsState() {
-      this.formFields.forEach(name => this.$set(this.touchedFields, name, true))
+      this.touchedFields = this.formFields.reduce((memo, name) => ({ ...memo, [name]: true }), {})
     },
 
     handleFormDisabled(errors) {
@@ -277,9 +279,6 @@ export default {
         this.syncErrors = {}
       }
 
-      // If Invalid
-      // There is no SAVE BUTTON
-      // There is a handleDisabled handler
       if (!this.isValid && isSubmitButtonClick) {
         return this.handleFormDisabled()
       }
@@ -375,18 +374,9 @@ export default {
   },
 
   render() {
-    const className = [
-      this.class,
-      {
-        'is-vue-form-error': !this.isValid && !this.save,
-        'is-vue-form-warn': !this.isValid && this.save,
-      },
-    ]
-
     return (
       <Form
         novalidate
-        class={className}
         label-width={this.labelWidth}
         label-suffix={this.labelSuffix}
         label-position={this.labelPosition}

docs/bundle.js

@@ -1,34 +1,34 @@
 
-.root-container[data-v-6dc3c25e] {
+.root-container[data-v-a969b32e] {
   min-height: 100%;
 }
-.title[data-v-6dc3c25e] {
+.title[data-v-a969b32e] {
   font-size: 40px;
   margin: 10px 0 0;
   font-weight: bold;
 }
-.main-container[data-v-6dc3c25e] {
+.main-container[data-v-a969b32e] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
 }
-.aside[data-v-6dc3c25e] {
+.aside[data-v-a969b32e] {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-.main[data-v-6dc3c25e] {
+.main[data-v-a969b32e] {
   padding: 10px 40px 40px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
-.link[data-v-6dc3c25e] {
+.link[data-v-a969b32e] {
   display: block;
   line-height: 40px;
   padding-left: 30px;
   position: relative;
   color: #0a0a0a;
 }
-.link_active[data-v-6dc3c25e]:before {
+.link_active[data-v-a969b32e]:before {
   content: '\261B';
   position: absolute;
   display: block;
@@ -40,31 +40,3 @@
   font-size: 20px;
 }
 
-
-.is-vue-form-warn .el-form-item__error {
-  color: #FF9800;
-}
-.is-vue-form-warn .el-form-item.is-error .el-input__inner,
-.is-vue-form-warn .el-form-item.is-error .el-input__inner:focus,
-.is-vue-form-warn .el-form-item.is-error .el-textarea__inner,
-.is-vue-form-warn .el-form-item.is-error .el-textarea__inner:focus,
-.is-vue-form-warn .el-message-box__input input.invalid,
-.is-vue-form-warn .el-message-box__input input.invalid:focus {
-  border-color: #FF9800;
-}
-
-
-.buttons[data-v-01bb0c7a] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: no-wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.buttons_center[data-v-01bb0c7a] {
-  justify-content: center;
-}
-.buttons_end[data-v-01bb0c7a] {
-  justify-content: flex-end;
-}
-

docs/main.css

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Form State Management for VueJS",
   "main": "VueForm/index.js",
   "scripts": {