Input Select and Textarea

Author: alvarosabu

.vuegenerator

@@ -0,0 +1,4 @@
+{
+  "componentDestination": "./src/components/",
+  "templatePath": "./templates/"
+}

README.md

@@ -8,9 +8,9 @@
 - `vue --version`:3.0.3
 - `webpack -v` : v4.1.1
 
-# vue-dynamic-forms
+# Vue Dynamic Forms
 
-[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)
+![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
 

dev/App.vue

@@ -4,17 +4,23 @@
       <h1 class="title text-center">Dynamic Forms Example</h1>
       <div class="row mt-5">
         <div class="col-6">
-          <dynamic-form :id="testForm.id" :fields="testForm.fields" />
+          <dynamic-form
+            :id="testForm.id"
+            :fields="testForm.fields"
+            @change="valuesChanged"
+          />
         </div>
         <div class="col-6">
-          <pre>{{ testForm.fields }}</pre>
+          <pre>{{ testForm }}</pre>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { email, required, pattern } from '../src/core/utils/validators';
+
 const DynamicForm = () => import('@/components/dynamic-form/DynamicForm.vue');
 
 const data = () => ({
@@ -25,7 +31,50 @@ const data = () => ({
         type: 'text',
         label: 'Name',
         name: 'name',
+      },
+      {
+        type: 'email',
+        label: 'Email',
+        name: 'email',
+        validations: [required, email],
+        errorTexts: ['This field is required', 'Format of email is incorrect'],
+      },
+      {
+        type: 'password',
+        label: 'Password',
+        name: 'password',
+        validations: [
+          required,
+          pattern(
+            '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,10}$',
+          ),
+        ],
+        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',
+        ],
+      },
+      {
+        type: 'textarea',
+        label: 'Bio',
+        name: 'bio',
+        cols: 30,
+        rows: 5,
+        validations: [required],
+        errorTexts: ['This field is required'],
+      },
+      {
+        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' },
+        ],
       },
     ],
   },
@@ -35,10 +84,18 @@ const components = {
   DynamicForm,
 };
 
+const methods = {
+  valuesChanged(values) {
+    this.$forceUpdate(); // this is only to refresh the fields on the <pre> tags, not necessary for other purpouses
+    console.log('Values', values);
+  },
+};
+
 export default {
   name: 'app',
   data,
   components,
+  methods,
 };
 </script>
 

package.json

@@ -8,7 +8,8 @@
     "serve": "vue-cli-service serve",
     "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"
+    "test": "vue-cli-service test:unit --verbose --no-cache --watchAll",
+    "publish": "npm publish --access public"
   },
   "main": "dist/@asigloo/core.common.js",
   "dependencies": {

src/components/dynamic-form/DynamicForm.js

@@ -122,7 +122,7 @@ const watch = {
   },
   values: {
     handler: debounce(function() {
-      this.$emit('changed', this.values);
+      this.$emit('change', this.values);
     }, 400),
     deep: true,
   },

src/components/dynamic-input/DynamicInput.js

@@ -1,6 +1,13 @@
-const data = () => ({});
+const InputText = () => import('@/components/input-text/InputText.vue');
+const InputTextarea = () =>
+  import('@/components/input-textarea/InputTextarea.vue');
+const InputSelect = () => import('@/components/input-select/InputSelect.vue');
 
-const components = {};
+const components = {
+  InputText,
+  InputTextarea,
+  InputSelect,
+};
 
 const props = {
   formControl: {
@@ -18,15 +25,8 @@ const props = {
 };
 
 const methods = {
-  valueChange() {
-    this.$emit('value changed', this.formControl.value);
-  },
-  onFocus() {
-    this.$emit('input focused');
-  },
-  onBlur() {
-    this.$emit('input blur');
-    this.formControl.touched = true;
+  valueChange(val) {
+    this.$emit('change', val);
   },
   validate() {
     const control = this.formControl;
@@ -40,9 +40,8 @@ const methods = {
           ...val,
         };
       }, {});
-      const validKeys = Object.keys(validation) || [];
       control.errors = validation;
-      control.valid = validKeys.length === 0;
+      control.valid = Object.keys(validation).length === 0;
     }
   },
 };
@@ -52,7 +51,7 @@ const watch = {
     handler() {
       this.formControl.dirty = true;
       this.validate();
-      this.$emit('value changed', this.formControl.value);
+      this.$emit('change', this.formControl.value);
     },
     deep: true,
   },
@@ -100,13 +99,11 @@ const computed = {
 
 const DynamicInput = {
   name: 'asDynamicInput',
-  data,
   components,
   watch,
   props,
   computed,
   methods,
-  mounted() {},
 };
 
 export default DynamicInput;

src/components/dynamic-input/DynamicInput.vue

@@ -6,22 +6,25 @@
     <label class="form-label" :for="formControl.name">
       {{ formControl.label }}
     </label>
-    <input
+    <input-text
       v-if="
         formControl.type === 'text' ||
           formControl.type === 'email' ||
           formControl.type === 'password' ||
           formControl.type === 'number'
       "
-      :id="formControl.name"
-      v-model="formControl.value"
-      :name="formControl.name"
-      class="form-control"
-      :type="formControl.type"
-      :placeholder="formControl.placeholder"
-      @change="valueChange()"
-      @focus="onFocus()"
-      @blur="onBlur()"
+      :formControl="formControl"
+      @change="valueChange"
+    />
+    <input-textarea
+      v-if="formControl.type === 'textarea'"
+      :formControl="formControl"
+      @change="valueChange"
+    />
+    <input-select
+      v-if="formControl.type === 'select'"
+      :formControl="formControl"
+      @change="valueChange"
     />
     <div v-if="hasErrors">
       <p

src/components/input-select/InputSelect.js

@@ -0,0 +1,22 @@
+const props = {
+  formControl: {
+    default: () => ({
+      type: null,
+      value: null,
+      validations: [],
+      label: null,
+      name: null,
+      options: [],
+      placeholder: null,
+      errors: {},
+    }),
+    type: Object,
+  },
+};
+
+const InputSelect = {
+  name: 'asInputSelect',
+  props,
+};
+
+export default InputSelect;

src/components/input-select/InputSelect.spec.js

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils';
+import InputSelect from './InputSelect.vue';
+
+describe('InputSelect', () => {
+  let cmp;
+
+  beforeEach(() => {
+    cmp = shallowMount(InputSelect);
+  });
+  it('is a Vue instance', () => {
+    expect(cmp.isVueInstance()).toBeTruthy();
+  });
+});

src/components/input-select/InputSelect.vue

@@ -0,0 +1,13 @@
+<template>
+  <select
+    :id="formControl.name"
+    v-model="formControl.value"
+    :name="formControl.name"
+    class="form-control"
+  >
+    <option v-for="opt in formControl.options" :key="opt.value">
+      {{ opt.text }}
+    </option>
+  </select>
+</template>
+<script src="./InputSelect.js"></script>