feat: add hints to form inputs

src/features/forms/components/inputs/FileInput.vue

@@ -73,7 +73,6 @@ let savedState = '';
 </script>
 
 <template>
-    <label class="input-label" :for="id">{{ label }}</label>
     <div v-show="url" class="show-input">
         <div class="input-file">
             <input ref="fileInput" class="file" type="file" :accept="accept" @change="changeImage" />

src/features/forms/components/inputs/GenericInput.vue

@@ -14,7 +14,7 @@ import BadgesInput from './badges/BadgesInput.vue';
 import IconPicker from './badges/components/IconPicker.vue';
 import ConditionInput from './badges/components/ConditionInput.vue';
 import { Input, RepeatInputEvent } from '@/src/shared/interfaces';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
     input: Input;
@@ -39,103 +39,149 @@ const inputId = computed(() => {
         return props.input.id;
     }
 });
+
+//? This is a workaround to focus the WYSIWYG editor when clicking on the label
+const htmlInput = ref(null);
+function onLabelClick(inputType: string) {
+    if(inputType !== 'html') return;
+
+    htmlInput.value.focusEditor();
+}
+
+function showLabel(inputType: string) {
+    return inputType !== 'checkbox' && inputType !== 'repeat'
+}
 </script>
 
 <template>
-    <TextInput
-        v-if="input.type === 'text'"
-        :id="inputId"
-        :label="input.label"
-        :placeholder="input.placeholder"
-        :input-value="inputValue as string"
-        :inside-card="insideCard"
-        @input="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <HtmlInput
-        v-if="input.type === 'html'"
-        :id="inputId"
-        :label="input.label"
-        :placeholder="input.placeholder"
-        :input-value="inputValue as string"
-        :inside-card="insideCard"
-        @input="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <TextAreaInput
-        v-if="input.type === 'textarea'"
-        :id="inputId"
-        :label="input.label"
-        :placeholder="input.placeholder"
-        :input-value="inputValue as string"
-        :inside-card="insideCard"
-        @input="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <FileInput
-        v-if="input.type === 'file'"
-        :id="inputId"
-        :label="input.label"
-        :accept="input.accept"
-        :input-value="inputValue as string"
-        :placeholder="input.placeholder"
-        :target-directory="input.targetDirectory"
-        @input="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <ScoreInput
-        v-if="input.type === 'score'"
-        :id="inputId"
-        :label="input.label"
-        :input-value="Number(inputValue)"
-        @input="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <CheckBoxInput
-        v-if="input.type === 'checkbox'"
-        :id="inputId"
-        :label="input.label"
-        :input-value="inputValue as boolean"
-        @change="emit('check', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <RadioInput
-        v-if="input.type === 'radio-group'"
-        :id="inputId"
-        :label="input.label"
-        :input-value="inputValue as string"
-        :pos="pos"
-        @change="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <SelectInput
-        v-if="input.type === 'select'"
-        :id="inputId"
-        :label="input.label"
-        :placeholder="input.placeholder"
-        :input-value="inputValue as string"
-        :options="input.options"
-        :linked-options="input.linkedOptions"
-        @change="emit('input', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <RepeatInput
-        v-if="input.type === 'repeat'"
-        :id="inputId"
-        :label="input.label"
-        :input-values="inputValue as string[]"
-        :inputs="input.inputs"
-        :field-index="fieldIndex"
-        :add-button="input.addButton"
-        @change="emit('repeatInput', $event)"
-        @save-given-state="emit('saveGivenState', $event)"
-    />
-    <BadgesInput v-if="input.type === 'badge'" :input-value="inputValue as string[]" />
-    <IconPicker
-        v-if="input.type === 'icon-picker'"
-        :label="input.label"
-        :input-value="inputValue as string"
-        @input="emit('input', $event)"
-    />
-    <ConditionInput v-if="input.type === 'badge-conditions'" />
+    <div class="input-group">
+        <div
+            v-if="input.label && showLabel(input.type)"
+            class="input-label"
+        >
+            <label
+                :for="inputId"
+                @click="onLabelClick(input.type)"
+            >
+                {{ input.label }}
+            </label>
+            <i
+                v-if="input.hint"
+                v-tippy="{
+                    content: input.hint,
+                    placement: 'right',
+                    arrow: true,
+                    arrowType: 'round',
+                    animation: 'fade',
+                }"
+                class="icon-help-circle"
+            />
+        </div>
+
+        <TextInput
+            v-if="input.type === 'text'"
+            :id="inputId"
+            :label="input.label"
+            :placeholder="input.placeholder"
+            :input-value="inputValue as string"
+            :inside-card="insideCard"
+            @input="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <HtmlInput
+            v-if="input.type === 'html'"
+            :id="inputId"
+            ref="htmlInput"
+            :label="input.label"
+            :placeholder="input.placeholder"
+            :input-value="inputValue as string"
+            :inside-card="insideCard"
+            @input="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <TextAreaInput
+            v-if="input.type === 'textarea'"
+            :id="inputId"
+            :label="input.label"
+            :placeholder="input.placeholder"
+            :input-value="inputValue as string"
+            :inside-card="insideCard"
+            @input="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <FileInput
+            v-if="input.type === 'file'"
+            :id="inputId"
+            :label="input.label"
+            :accept="input.accept"
+            :input-value="inputValue as string"
+            :placeholder="input.placeholder"
+            :target-directory="input.targetDirectory"
+            @input="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <ScoreInput
+            v-if="input.type === 'score'"
+            :id="inputId"
+            :label="input.label"
+            :input-value="Number(inputValue)"
+            @input="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <CheckBoxInput
+            v-if="input.type === 'checkbox'"
+            :id="inputId"
+            :label="input.label"
+            :input-value="inputValue as boolean"
+            @change="emit('check', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <RadioInput
+            v-if="input.type === 'radio-group'"
+            :id="inputId"
+            :label="input.label"
+            :input-value="inputValue as string"
+            :pos="pos"
+            @change="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <SelectInput
+            v-if="input.type === 'select'"
+            :id="inputId"
+            :label="input.label"
+            :placeholder="input.placeholder"
+            :input-value="inputValue as string"
+            :options="input.options"
+            :linked-options="input.linkedOptions"
+            @change="emit('input', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <RepeatInput
+            v-if="input.type === 'repeat'"
+            :id="inputId"
+            :label="input.label"
+            :input-values="inputValue as string[]"
+            :inputs="input.inputs"
+            :field-index="fieldIndex"
+            :add-button="input.addButton"
+            @change="emit('repeatInput', $event)"
+            @save-given-state="emit('saveGivenState', $event)"
+        />
+        <BadgesInput v-if="input.type === 'badge'" :input-value="inputValue as string[]" />
+        <IconPicker
+            v-if="input.type === 'icon-picker'"
+            :label="input.label"
+            :input-value="inputValue as string"
+            @input="emit('input', $event)"
+        />
+        <ConditionInput v-if="input.type === 'badge-conditions'" />
+    </div>
 </template>
+
+<style lang="scss" scoped >
+.input-group {
+    display: flex;
+    flex-direction: column;
+}
+
+</style>
\ No newline at end of file

src/features/forms/components/inputs/HtmlInput.vue

@@ -101,10 +101,13 @@ function focusEditor() {
     const editor = getTinymce().activeEditor;
     editor.focus();
 }
+
+defineExpose({
+    focusEditor
+});
 </script>
 
 <template>
-    <label @click="focusEditor">{{ label }}</label>
     <Editor
         ref="editor"
         v-model="content"

src/features/forms/components/inputs/ScoreInput.vue

@@ -45,7 +45,6 @@ function onBlur() {
 </script>
 
 <template>
-    <label :for="id">{{ label }}</label>
     <div class="input-score">
         <button @click="minus(inputValue)"><i class="icon-minus-circle"></i></button>
         <input

src/features/forms/components/inputs/TextAreaInput.vue

@@ -32,7 +32,6 @@ function onBlur() {
 </script>
 
 <template>
-    <label class="input-label" :for="id">{{ label }}</label>
     <textarea
         :id="id"
         class="input input-textarea"

src/features/forms/components/inputs/TextInput.vue

@@ -33,7 +33,6 @@ function onBlur() {
 </script>
 
 <template>
-    <label v-if="label !== ''" class="input-label" :for="id">{{ label }}</label>
     <input
         :id="id"
         class="input"

src/features/forms/components/inputs/badges/components/IconPicker.vue

 <script setup lang="ts">
 import BadgeItem from '@/src/features/badge/components/BadgeItem.vue';
-import { iconsPath } from '@/src/shared/data';
 import { useEditorStore } from '@/src/shared/stores';
-import { computed } from 'vue';
 
 const editorStore = useEditorStore();
 
-const props = defineProps<{
+defineProps<{
     inputValue: string;
     label: string;
 }>();
@@ -17,7 +15,6 @@ function openIconModal() {
 </script>
 
 <template>
-    <label v-if="label !== ''" class="input-label" :for="label">{{ label }}</label>
     <div :id="label" class="container">
         <BadgeItem :icon="inputValue" :view-mode="true" :inactive="!inputValue" />
         <button class="btn btn-form" @click="openIconModal">

src/features/forms/components/inputs/card/components/RadioInput.vue

@@ -24,7 +24,6 @@ function onChange(value: string) {
 
 <template>
     <div class="radio">
-        <label class="group-label" :for="String(pos)">Réponse</label>
         <div :id="String(pos)" class="radio-group">
             <div class="radio-btn">
                 <input

src/features/forms/components/inputs/card/components/SelectInput.vue

@@ -35,7 +35,6 @@ function onChange(event: Event) {
 
 <template>
     <div class="select">
-        <label :for="id">{{ label }}</label>
         <select :id="id" :value="inputValue" class="select-box" @change="onChange">
             <option value="">Sélectionnez</option>
             <option v-for="(option, index) in getOptions()" :key="index" :value="option">{{ option }}</option>

src/global.scss

@@ -297,9 +297,19 @@ hr {
 }
 
 .input-label {
-    margin-bottom: 0.5rem;
+    display: flex;
+    gap: .3rem;
+    margin-bottom: 0.7rem;
     font-size: 1rem;
     font-family: 'Open Sans', sans-serif;
+    line-height: 1;
+
+    i {
+        display: flex;
+        align-items: center;
+        margin: 0;
+        color: var(--text-secondary);
+    }
 }
 
 .form-icon {

src/shared/interfaces/form/input.interface.ts

@@ -11,4 +11,5 @@ export interface Input {
     options?: string[];
     linkedOptions?: string;
     targetDirectory?: string;
+    hint?: string;
 }