diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index 20bbed8..f822269 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -82,6 +82,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
'properties.*.placeholder' => 'sometimes|nullable',
'properties.*.prefill' => 'sometimes|nullable',
'properties.*.help' => 'sometimes|nullable',
+ 'properties.*.help_position' => ['sometimes', Rule::in(['below_input', 'above_input'])],
'properties.*.hidden' => 'boolean|nullable',
'properties.*.required' => 'boolean|nullable',
'properties.*.multiple' => 'boolean|nullable',
diff --git a/resources/js/components/forms/CheckboxInput.vue b/resources/js/components/forms/CheckboxInput.vue
index 406fafa..b960b03 100644
--- a/resources/js/components/forms/CheckboxInput.vue
+++ b/resources/js/components/forms/CheckboxInput.vue
@@ -1,12 +1,15 @@
+
+
+
{{ label }} *
-
- {{ help }}
+
+
diff --git a/resources/js/components/forms/CodeInput.vue b/resources/js/components/forms/CodeInput.vue
index 07bdc06..8526df7 100644
--- a/resources/js/components/forms/CodeInput.vue
+++ b/resources/js/components/forms/CodeInput.vue
@@ -16,7 +16,7 @@
/>
- {{ help }}
+
diff --git a/resources/js/components/forms/ColorInput.vue b/resources/js/components/forms/ColorInput.vue
index 1b5f742..c263259 100644
--- a/resources/js/components/forms/ColorInput.vue
+++ b/resources/js/components/forms/ColorInput.vue
@@ -9,7 +9,7 @@
*
- {{ help }}
+
diff --git a/resources/js/components/forms/DateInput.vue b/resources/js/components/forms/DateInput.vue
index 67865fe..060fced 100644
--- a/resources/js/components/forms/DateInput.vue
+++ b/resources/js/components/forms/DateInput.vue
@@ -6,6 +6,9 @@
{{ label }}
*
+
+
+
-
- {{ help }}
+
+
diff --git a/resources/js/components/forms/FileInput.vue b/resources/js/components/forms/FileInput.vue
index b2f3ae5..7f7104f 100644
--- a/resources/js/components/forms/FileInput.vue
+++ b/resources/js/components/forms/FileInput.vue
@@ -6,6 +6,9 @@
{{ label }}
*
+
+
+
-
- {{ help }}
+
+
diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
index 74eaee9..1495422 100644
--- a/resources/js/components/forms/FlatSelectInput.vue
+++ b/resources/js/components/forms/FlatSelectInput.vue
@@ -6,8 +6,8 @@
{{ label }}
*
-
- {{ help }}
+
+
@@ -25,6 +25,9 @@
+
+
+
diff --git a/resources/js/components/forms/ImageInput.vue b/resources/js/components/forms/ImageInput.vue
index 617c7b2..5ecf20a 100644
--- a/resources/js/components/forms/ImageInput.vue
+++ b/resources/js/components/forms/ImageInput.vue
@@ -36,7 +36,7 @@
- {{ help }}
+
diff --git a/resources/js/components/forms/RatingInput.vue b/resources/js/components/forms/RatingInput.vue
index 0e10a8a..f5080f2 100644
--- a/resources/js/components/forms/RatingInput.vue
+++ b/resources/js/components/forms/RatingInput.vue
@@ -6,6 +6,9 @@
{{ label }}
*
+
+
+
diff --git a/resources/js/components/forms/RichTextAreaInput.vue b/resources/js/components/forms/RichTextAreaInput.vue
index c1a6458..00b12f9 100644
--- a/resources/js/components/forms/RichTextAreaInput.vue
+++ b/resources/js/components/forms/RichTextAreaInput.vue
@@ -6,14 +6,19 @@
{{ label }}
*
+
+
+
+
+
-
- {{ help }}
+
+
diff --git a/resources/js/components/forms/SelectInput.vue b/resources/js/components/forms/SelectInput.vue
index 5f14ac0..34beb0c 100644
--- a/resources/js/components/forms/SelectInput.vue
+++ b/resources/js/components/forms/SelectInput.vue
@@ -17,6 +17,8 @@
:has-error="hasValidation && form.errors.has(name)"
:allowCreation="allowCreation"
:disabled="disabled"
+ :help="help"
+ :help-position="helpPosition"
@update-options="updateOptions"
>
@@ -55,9 +57,7 @@
-
- {{ help }}
-
+
diff --git a/resources/js/components/forms/SignatureInput.vue b/resources/js/components/forms/SignatureInput.vue
index 5872812..a6e8699 100644
--- a/resources/js/components/forms/SignatureInput.vue
+++ b/resources/js/components/forms/SignatureInput.vue
@@ -6,6 +6,11 @@
{{ label }}
*
+
+
+
+
+
-
+
diff --git a/resources/js/components/forms/TextAreaInput.vue b/resources/js/components/forms/TextAreaInput.vue
index 45b4d7b..a25e83a 100644
--- a/resources/js/components/forms/TextAreaInput.vue
+++ b/resources/js/components/forms/TextAreaInput.vue
@@ -6,6 +6,11 @@
{{ label }}
*
+
+
+
+
+
-
-
- {{ help }}
+
+
+
diff --git a/resources/js/components/forms/TextInput.vue b/resources/js/components/forms/TextInput.vue
index b04e9e6..3c10ed8 100644
--- a/resources/js/components/forms/TextInput.vue
+++ b/resources/js/components/forms/TextInput.vue
@@ -8,6 +8,11 @@
*
+
+
+
+
+
-
-
- {{ help }}
+
+
+
diff --git a/resources/js/components/forms/ToggleSwitchInput.vue b/resources/js/components/forms/ToggleSwitchInput.vue
index 197a36f..f1d3144 100644
--- a/resources/js/components/forms/ToggleSwitchInput.vue
+++ b/resources/js/components/forms/ToggleSwitchInput.vue
@@ -1,11 +1,14 @@
+
+
+
{{ label }} *
-
- {{ help }}
+
+
diff --git a/resources/js/components/forms/components/VSelect.vue b/resources/js/components/forms/components/VSelect.vue
index e676871..406b467 100644
--- a/resources/js/components/forms/components/VSelect.vue
+++ b/resources/js/components/forms/components/VSelect.vue
@@ -6,6 +6,9 @@
{{ label }}
*
+
+
+
+
+
+
+
@@ -108,7 +115,9 @@ export default {
uppercaseLabels: { type: Boolean, default: true },
theme: { type: Object, default: () => themes.default },
allowCreation: { type: Boolean, default: false },
- disabled: { type: Boolean, default: false }
+ disabled: { type: Boolean, default: false },
+ help: { type: String, default: null },
+ helpPosition: { type: String, default: 'below_input' },
},
data () {
return {
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
index 1ec175a..73702d6 100644
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/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,
diff --git a/resources/js/components/open/forms/components/FormFieldsEditor.vue b/resources/js/components/open/forms/components/FormFieldsEditor.vue
index 08a6da3..eff4da2 100644
--- a/resources/js/components/open/forms/components/FormFieldsEditor.vue
+++ b/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
})
diff --git a/resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue b/resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue
index 7acb73d..68fcd93 100644
--- a/resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue
+++ b/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()
},
diff --git a/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue b/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
index ace98fb..fa9f019 100644
--- a/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
+++ b/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')
+ }
}
}
}
diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
index d788bc4..4d34944 100644
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -222,7 +222,7 @@
- Change your form field name, pre-fill a value, add hints.
+ Change your form field name, pre-fill a value, add hints, etc.
-
-
-
+
+
+
+
themes.default },
color: { type: String, default: '#3B82F6' },
wrapperClass: { type: String, default: 'relative mb-3' }
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 7d77dcb..2780669 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -46,3 +46,9 @@ body.dark * {
.bg-gray-50 {
@apply dark:bg-notion-dark-light;
}
+
+.field-help {
+ p {
+ @apply text-gray-400 dark:text-gray-500;
+ }
+}
\ No newline at end of file