Field Help as Html text & Help Position (#115)

* Field Help as Html text & Help Position

* Re-organize field options modal

* put margin for above help

resources/js/components/open/forms/OpenForm.vue

@@ -462,6 +462,7 @@ export default {
         color: this.form.color,
         placeholder: field.placeholder,
         help: field.help,
+        helpPosition: (field.help_position) ? field.help_position : 'below_input',
         uppercaseLabels: this.form.uppercase_labels,
         theme: this.theme,
         maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -268,6 +268,7 @@ export default {
           field.placeholder = field.placeholder || null
           field.prefill = field.prefill || null
           field.help = field.help || null
+          field.help_position = field.help_position || 'below_input'
 
           return field
         })

resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue

@@ -295,6 +295,7 @@ export default {
       if (['select', 'multi_select'].includes(this.blockForm.type)) {
         data[this.blockForm.type] = {'options': []}
       }
+      data.help_position = 'below_input'
       this.$emit('block-added', data)
       this.close()
     },

resources/js/components/open/forms/fields/FormBlockOptionsModal.vue

@@ -144,7 +144,11 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      editorToolbarCustom: [
+        ['bold', 'italic', 'underline', 'link'],
+      ]
+    }
   },
 
   computed: {},
@@ -172,6 +176,11 @@ export default {
       if (this.field.hidden) {
         this.$set(this.field, 'required', false)
       }
+    },
+    onFieldHelpPositionChange (val) {
+      if(!val){
+        this.$set(this.field, 'help_position', 'below_input')
+      }
     }
   }
 }

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -222,7 +222,7 @@
         </h3>
 
         <p class="text-gray-400 mb-5">
-          Change your form field name, pre-fill a value, add hints.
+          Change your form field name, pre-fill a value, add hints, etc.
         </p>
 
         <text-input name="name" class="mt-4"
@@ -275,14 +275,6 @@
                     label="Empty Input Text (Placeholder)"
         />
 
-        <!--   Help  -->
-        <text-input name="help" class="mt-4"
-                    :form="field"
-                    label="Field Help"
-
-                    help="Your field help will be shown below the field, just like this message."
-        />
-
         <select-input name="width" class="mt-4"
                       :options="[
                         {name:'Full',value:'full'},
@@ -295,6 +287,23 @@
                       :form="field" label="Field Width"
         />
 
+        <!--   Help  -->
+        <rich-text-area-input name="help" class="mt-4"
+                    :form="field"
+                    :editorToolbar="editorToolbarCustom"
+                    label="Field Help"
+                    help="Your field help will be shown below/above the field, just like this message."
+                    :help-position="field.help_position"
+        />
+        <select-input name="help_position" class="mt-4"
+                    :options="[
+                      {name:'Below input',value:'below_input'},
+                      {name:'Above input',value:'above_input'},
+                    ]"
+                    :form="field" label="Field Help Position"
+                    @input="onFieldHelpPositionChange"
+        />
+
         <template v-if="['text','number','url','email','phone_number'].includes(field.type)">
           <text-input v-model="field.max_char_limit" name="max_char_limit" native-type="number" :min="1" :max="2000"
                       :form="field"
@@ -379,7 +388,10 @@ export default {
   },
   data() {
     return {
-      typesWithoutPlaceholder: ['date', 'checkbox', 'files']
+      typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
+      editorToolbarCustom: [
+        ['bold', 'italic', 'underline', 'link'],
+      ]
     }
   },
 
@@ -546,6 +558,11 @@ export default {
         this.$set(this.field, 'disable_past_dates', false)
         this.$set(this.field, 'prefill_today', false)
       }
+    },
+    onFieldHelpPositionChange (val) {
+      if (!val) {
+        this.$set(this.field, 'help_position', 'below_input')
+      }
     }
   }
 }