feat(hint): implement field hints

Author: kevinkosterr

src/FormGroup.vue

@@ -58,6 +58,10 @@ const shouldHaveLabel = computed(() => {
       />
     </div>
 
+    <div v-if="fieldComponent && fieldComponent.hint" class="hints">
+      <span class="hint">{{ fieldComponent.hint }}</span>
+    </div>
+
     <div v-if="fieldComponent && fieldComponent.errors.length" class="errors help-block">
       <template v-for="error in fieldComponent.errors" :key="error">
         <span class="error">{{ error }}</span> <br>
@@ -74,6 +78,11 @@ const shouldHaveLabel = computed(() => {
   margin-left: .2rem;
 }
 
+.hint {
+  color: gray;
+  font-size: 90%;
+}
+
 .errors {
   color: red;
   font-size: .8rem;

src/mixins/abstractField.js

@@ -235,8 +235,17 @@ export default {
      */
     isReadOnly () {
       return this.determineDynamicAttribute('readonly')
-    }
+    },
 
+    /**
+     * Compute the hint to be displayed underneath the field input element.
+     * Should return a string value.
+     *
+     * @returns {String}
+     */
+    hint () {
+      return this.determineDynamicAttribute('hint')
+    }
 
   }