Merge pull request #17 from alvarosaburido/bug/custom_classes_not_working

Added  customClasses and fix small stuff

Author: alvarosabu

dev/App.vue

@@ -7,6 +7,7 @@
           <dynamic-form
             :id="testForm.id"
             :fields="testForm.fields"
+            :customClass="'row'"
             @change="valuesChanged"
           >
             <template slot="custom-field-1" slot-scope="props">
@@ -59,11 +60,13 @@ const data = () => ({
         type: 'text',
         label: 'Name',
         name: 'name',
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'email',
         label: 'Email',
         name: 'email',
+        customClass: 'col-12',
         validations: [
           new FormValidation(required, 'This field is required'),
           new FormValidation(email, 'Format of email is incorrect'),
@@ -73,6 +76,7 @@ const data = () => ({
         type: 'password',
         label: 'Password',
         name: 'password',
+        customClass: 'col-12',
         validations: [
           new FormValidation(required, 'This field is required'),
           new FormValidation(
@@ -91,11 +95,13 @@ const data = () => ({
         name: 'bio',
         cols: 30,
         rows: 5,
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'select',
         label: 'Category',
         name: 'category',
+        customClass: 'col-12',
         options: [
           { value: null, text: 'Please select an option' },
           { value: 'arduino', text: 'Arduino' },
@@ -108,12 +114,14 @@ const data = () => ({
         label: 'Read the conditions',
         name: 'conditions',
         inline: false,
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'radio',
         label: 'Prefered Animal',
         name: 'animal',
         inline: true,
+        customClass: 'col-12',
         options: [
           { text: 'Dogs', value: 'dogs' },
           { text: 'Cats', value: 'cats' },
@@ -124,18 +132,21 @@ const data = () => ({
         type: 'custom-field',
         label: 'Custom Field 1',
         name: 'custom-field-1',
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'number',
         label: 'Number',
         name: 'number',
         value: 0,
+        customClass: 'col-12 col-md-6',
       }),
-
       new FormField({
-        type: 'custom-field',
-        label: 'File',
-        name: 'custom-field-2',
+        type: 'number',
+        label: 'Number 2',
+        name: 'number2',
+        value: 50,
+        customClass: 'col-12 col-md-6',
       }),
     ],
   },
@@ -163,7 +174,8 @@ export default {
 
   img {
     position: absolute;
-    right: 0;
+    top: 5px;
+    right: 5px;
   }
 }
 </style>

src/components/dynamic-form/DynamicForm.js

@@ -21,7 +21,7 @@ const props = {
     default: 'POST',
     type: String,
   },
-  classes: {
+  customClass: {
     default: null,
     type: String,
   },

src/components/dynamic-form/DynamicForm.vue

@@ -4,7 +4,7 @@
       v-if="fields.length > 0 && !showFeedback"
       :id="id"
       :name="id"
-      :class="classes"
+      :class="customClass"
       :method="method"
       novalidate
       @submit.prevent="handleSubmit()"

src/components/dynamic-input/DynamicInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="dynamic-input form-group"
-    :class="{ 'form-group--error': hasErrors }"
+    :class="({ 'form-group--error': hasErrors }, `${formControl.customClass || ''}`)"
   >
     <label
       class="form-label"

src/core/utils/form-control.model.js

@@ -4,6 +4,7 @@ export function FormControl({
   validations = [],
   label = null,
   name = null,
+  customClass = null,
   options = [],
   placeholder = null,
   errors = {},
@@ -16,6 +17,7 @@ export function FormControl({
   this.validations = validations;
   this.label = label;
   this.name = name;
+  this.customClass = customClass;
   this.options = options;
   this.placeholder = placeholder;
   this.errors = errors;