Improvements and validations

Author: alvarosabu

README.md

@@ -14,13 +14,39 @@
 
 Easy way to dynamically create reactive forms in vue based on varying business object model
 
-## Project setup
+## Documentation
+
+Complete documentation and examples available at
+
+- **[API Documentation]()**
+- **[Sandbox Demo]()**
+- **[CodePen Template]()**
+- **[GitHub Projects]()**
+
+## Install
+
+```bash
+$ npm install @asigloo/vue-dynamic-forms
+```
+
+Register the component
+
+```js
+import Vue from 'vue';
+import VueDynamicForms from '@asigloo/vue-dynamic-forms';
+
+Vue.use(VueDynamicForms);
+```
+
+## Development
+
+### Project setup
 
 ```
 yarn install
 ```
 
-### Compiles and hot-reloads for development
+### Compiles and hot-reloads
 
 ```
 yarn run serve

dev/App.vue

@@ -9,8 +9,14 @@
             :fields="testForm.fields"
             @change="valuesChanged"
           />
+          <div class="row d-flex justify-content-end p-4">
+            <button submit="true" :form="testForm.id" class="btn btn-primary">
+              Submit
+            </button>
+          </div>
         </div>
         <div class="col-6">
+          <pre>{{ formData }}</pre>
           <pre>{{ testForm }}</pre>
         </div>
       </div>
@@ -20,62 +26,92 @@
 
 <script>
 import { email, required, pattern } from '../src/core/utils/validators';
+import { FormField } from '../src/core/utils/form-control.model';
 
 const DynamicForm = () => import('@/components/dynamic-form/DynamicForm.vue');
 
 const data = () => ({
+  formData: {},
   testForm: {
     id: 'test-form',
     fields: [
-      {
+      new FormField({
         type: 'text',
         label: 'Name',
         name: 'name',
-      },
-      {
+      }),
+      new FormField({
         type: 'email',
         label: 'Email',
         name: 'email',
-        validations: [required, email],
-        errorTexts: ['This field is required', 'Format of email is incorrect'],
-      },
-      {
+        validations: [
+          { validator: required, text: 'This field is required' },
+          { validator: email, text: 'Format of email is incorrect' },
+        ],
+      }),
+      new FormField({
         type: 'password',
         label: 'Password',
         name: 'password',
-        validations: [
+        /*         validations: [
           required,
           pattern(
             '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,10}$',
           ),
-        ],
-        errorTexts: [
+        ], */
+        value: 'sdsdsd',
+        /*         errorTexts: [
           'This field is required',
           'Password must contain at least 1 Upercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
-        ],
-      },
-      {
+        ], */
+      }),
+      new FormField({
         type: 'textarea',
         label: 'Bio',
         name: 'bio',
         cols: 30,
         rows: 5,
-        validations: [required],
-        errorTexts: ['This field is required'],
-      },
-      {
+        /*         validations: [required],
+        errorTexts: ['This field is required'], */
+      }),
+      new FormField({
         type: 'select',
         label: 'Category',
         name: 'category',
-        options: [],
-        validations: [],
-        value: null,
         options: [
           { value: null, text: 'Please select an option' },
           { value: 'arduino', text: 'Arduino' },
           { value: 'transistors', text: 'Transistors' },
         ],
-      },
+      }),
+      new FormField({
+        type: 'checkbox',
+        label: 'Read the conditions',
+        name: 'conditions',
+        inline: false,
+        /*         validations: [required],
+        errorTexts: ['This field is required'], */
+      }),
+      new FormField({
+        type: 'radio',
+        label: 'Prefered Animal',
+        name: 'animal',
+        /*         validations: [], */
+        inline: true,
+        options: [
+          { text: 'Dogs', value: 'dogs' },
+          { text: 'Cats', value: 'cats' },
+          { text: 'Others', value: 'others' },
+        ],
+      }),
+      new FormField({
+        type: 'number',
+        label: 'Number',
+        name: 'number',
+        value: 0,
+        /*         validations: [required],
+        errorTexts: ['This field is required'], */
+      }),
     ],
   },
 });
@@ -87,6 +123,10 @@ const components = {
 const methods = {
   valuesChanged(values) {
     this.$forceUpdate(); // this is only to refresh the fields on the <pre> tags, not necessary for other purpouses
+    this.formData = {
+      ...this.formData,
+      ...values,
+    };
     console.log('Values', values);
   },
 };
@@ -99,4 +139,26 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.form-group {
+  width: 100%;
+  margin-bottom: 0.5rem;
+
+  &--error {
+    .form-label {
+      color: #dc3545;
+    }
+
+    .form-control {
+      border-color: #dc3545;
+      background: #f7e1e3;
+    }
+  }
+
+  .error {
+    font-size: 11px;
+
+    color: #dc3545;
+  }
+}
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  title: 'Vue Dynamic Forms',
+  description:
+    'Easy way to dynamically create reactive forms in vue based on varying business object model',
+};

docs/README.md

@@ -0,0 +1,7 @@
+![repository-banner.png](https://res.cloudinary.com/alvarosaburido/image/upload/v1564929632/as-readme-banner_tqdgrx.png)
+
+# Vue Dynamic Forms
+
+![Current Relase](https://img.shields.io/github/package-json/v/alvarosaburido/vue-dynamic-forms) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)
+
+Easy way to dynamically create reactive forms in vue based on varying business object model

package.json

@@ -9,7 +9,9 @@
     "build": "vue-cli-service build --target lib --name as-dynamic-forms src/main.js",
     "lint": "vue-cli-service lint",
     "test": "vue-cli-service test:unit --verbose --no-cache --watchAll",
-    "publish": "npm publish --access public"
+    "publish": "npm publish --access public",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "main": "dist/@asigloo/core.common.js",
   "dependencies": {
@@ -34,6 +36,7 @@
     "node-sass": "^4.13.0",
     "prettier": "^1.19.1",
     "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "vuepress": "^1.2.0"
   }
 }

src/components/dynamic-form/DynamicForm.js

@@ -1,4 +1,4 @@
-import { debounce } from '@/core/utils/helpers';
+import { FormControl } from '../../core/utils/form-control.model';
 
 const DynamicInput = () =>
   import('@/components/dynamic-input/DynamicInput.vue');
@@ -29,39 +29,37 @@ const props = {
   fields: {
     type: Array,
   },
-  feedbackText: {
-    default: null,
-    type: String,
-  },
 };
 
 const methods = {
   mapControls() {
-    this.controls = this.fields.map(field => ({
-      ...field,
-      valid: true,
-      touched: false,
-      dirty: false,
-      errors: {},
-      submited: this.submited,
-    }));
+    this.controls = this.fields.map(
+      field =>
+        new FormControl({
+          ...field,
+          valid: true,
+          touched: false,
+          dirty: false,
+          errors: {},
+          submited: this.submited,
+        }),
+    );
   },
   updateControls() {
-    this.controls = this.controls.map(field => ({
-      ...field,
-      submited: this.submited,
-    }));
+    this.controls = this.controls.map(
+      field =>
+        new FormControl({
+          ...field,
+          submited: this.submited,
+        }),
+    );
   },
   handleSubmit() {
     this.submited = true;
     this.updateControls();
     this.$nextTick(() => {
       if (this.isValid) {
         this.$emit('submit', this.values);
-        this.showFeedback = true;
-        setTimeout(() => {
-          this.showFeedback = false;
-        }, 4000);
         this.resetForm();
       } else {
         this.$emit('form error', this.allErrors);
@@ -70,15 +68,18 @@ const methods = {
   },
   resetForm() {
     this.submited = false;
-    this.controls = this.fields.map(field => ({
-      ...field,
-      valid: true,
-      value: null,
-      touched: false,
-      dirty: false,
-      errors: {},
-      submited: this.submited,
-    }));
+    this.controls = this.fields.map(
+      field =>
+        new FormControl({
+          ...field,
+          valid: true,
+          value: null,
+          touched: false,
+          dirty: false,
+          errors: {},
+          submited: this.submited,
+        }),
+    );
   },
 };
 
@@ -121,9 +122,9 @@ const watch = {
     deep: true,
   },
   values: {
-    handler: debounce(function() {
+    handler: function() {
       this.$emit('change', this.values);
-    }, 400),
+    },
     deep: true,
   },
 };
@@ -136,6 +137,9 @@ const DynamicForm = {
   props,
   watch,
   computed,
+  mounted() {
+    this.mapControls();
+  },
 };
 
 export default DynamicForm;