Merge pull request #35 from alvarosaburido/feature/input_helper_text

Helper text support

Author: alvarosabu

dev/App.vue

@@ -115,6 +115,7 @@ const data = () => ({
         label: 'Website',
         name: 'website',
         customClass: 'col-12',
+        helper: 'Pstt... psst,  this is a hint',
         validations: [new FormValidation(url, `Format of Url is incorrect`)],
       }),
       new FormField({

docs/guide/models.md

@@ -17,6 +17,9 @@ export function FormField({
   options = [],
   placeholder = null,
   inline = false,
+  rows = null,
+  cols = null,
+  helper,
 }) {
   this.id = id;
   this.type = type;
@@ -29,6 +32,9 @@ export function FormField({
   this.options = options;
   this.placeholder = placeholder;
   this.inline = inline;
+  this.rows = rows;
+  this.cols = cols;
+  this.helper = helper;
 }
 ```
 
@@ -43,17 +49,22 @@ export function FormControl({
   value = null,
   validations = [],
   label = null,
+  form,
   name = null,
   customClass = null,
   options = [],
   placeholder = null,
+  rows = null,
+  cols = null,
   errors = {},
   valid = true,
   touched = false,
   dirty = false,
+  helper,
 }) {
   this.id = id || `${form}-${name}`;
   this.type = type;
+  this.form = form;
   this.value = value;
   this.validations = validations;
   this.label = label;
@@ -65,5 +76,8 @@ export function FormControl({
   this.valid = valid;
   this.touched = touched;
   this.dirty = dirty;
+  this.rows = rows;
+  this.cols = cols;
+  this.helper = helper;
 }
 ```

src/components/dynamic-input/DynamicInput.vue

@@ -45,6 +45,9 @@
       :onFocus="onFocus"
       :onBlur="onBlur"
     />
+    <p class="form-hint" v-if="formControl.helper">
+      {{ formControl.helper }}
+    </p>
     <div v-if="showErrors">
       <p
         v-for="(errorText, $index) in errorMessages"

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

@@ -15,6 +15,7 @@ export function FormControl({
   valid = true,
   touched = false,
   dirty = false,
+  helper,
 }) {
   this.id = id || `${form}-${name}`;
   this.type = type;
@@ -32,6 +33,7 @@ export function FormControl({
   this.dirty = dirty;
   this.rows = rows;
   this.cols = cols;
+  this.helper = helper;
 }
 
 export function FormField({
@@ -48,6 +50,7 @@ export function FormField({
   inline = false,
   rows = null,
   cols = null,
+  helper,
 }) {
   this.id = id;
   this.type = type;
@@ -62,6 +65,7 @@ export function FormField({
   this.inline = inline;
   this.rows = rows;
   this.cols = cols;
+  this.helper = helper;
 }
 
 export function FormValidation(

src/styles/themes/default.scss

@@ -27,6 +27,10 @@ $input-error-color: #dc3545;
   margin-bottom: 0.5rem;
 }
 
+.form-hint {
+  font-size: 12px;
+}
+
 .form-group {
   width: 100%;
   margin-bottom: 1rem;