diff --git a/src/features/forms/components/inputs/FileInput.vue b/src/features/forms/components/inputs/FileInput.vue index 8bf85a346e18dd22fed6accb4150bdee879b86a4..fc2b234e363cf75d710999fb47551deee5d1be93 100644 --- a/src/features/forms/components/inputs/FileInput.vue +++ b/src/features/forms/components/inputs/FileInput.vue @@ -4,6 +4,7 @@ import { graphService } from '@/src/shared/services'; import { getCurrentState } from '@/src/shared/services/undoRedo.service'; const props = defineProps<{ + id: string; inputValue: string; label: string; accept: string; @@ -68,7 +69,7 @@ let savedState = ''; </script> <template> - <label class="input-label" :for="label">{{ label }}</label> + <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"> @@ -82,7 +83,7 @@ let savedState = ''; </div> </div> <div v-if="!url"> - <button :id="label" class="btn btn-form" @click="openFile"> + <button :id="id" class="btn btn-form" @click="openFile"> <i class="icon-plus"></i> {{ placeholder }} </button> diff --git a/src/features/forms/components/inputs/GenericInput.vue b/src/features/forms/components/inputs/GenericInput.vue index 2d7f0d26bcb5ca4b88334ead93790c372f302aa2..eddc770e655937c29eccd0a688392ce14f8267ff 100644 --- a/src/features/forms/components/inputs/GenericInput.vue +++ b/src/features/forms/components/inputs/GenericInput.vue @@ -14,8 +14,9 @@ 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'; -defineProps<{ +const props = defineProps<{ input: Input; inputValue: string | boolean | string[]; icon?: string; @@ -31,11 +32,16 @@ const emit = defineEmits<{ (e: 'saveGivenState', state: string): void; }>(); +const inputId = computed(() => { + return props.pos !== null && props.pos !== undefined ? `${props.input.id}-${props.pos}` : props.input.id; +}); + </script> <template> <TextInput v-if="input.type === 'text'" + :id="inputId" :label="input.label" :placeholder="input.placeholder" :input-value="inputValue as string" @@ -45,6 +51,7 @@ const emit = defineEmits<{ /> <HtmlInput v-if="input.type === 'html'" + :id="inputId" :label="input.label" :placeholder="input.placeholder" :input-value="inputValue as string" @@ -54,6 +61,7 @@ const emit = defineEmits<{ /> <TextAreaInput v-if="input.type === 'textarea'" + :id="inputId" :label="input.label" :placeholder="input.placeholder" :input-value="inputValue as string" @@ -61,8 +69,9 @@ const emit = defineEmits<{ @input="emit('input', $event)" @save-given-state="emit('saveGivenState', $event)" /> - <FileInput + <FileInput v-if="input.type === 'file'" + :id="inputId" :label="input.label" :accept="input.accept" :input-value="inputValue as string" @@ -72,6 +81,7 @@ const emit = defineEmits<{ /> <ScoreInput v-if="input.type === 'score'" + :id="inputId" :label="input.label" :input-value="inputValue as string" @input="emit('input', $event)" @@ -79,6 +89,7 @@ const emit = defineEmits<{ /> <CheckBoxInput v-if="input.type === 'checkbox'" + :id="inputId" :label="input.label" :input-value="inputValue as boolean" :pos="pos" @@ -87,6 +98,7 @@ const emit = defineEmits<{ /> <RadioInput v-if="input.type === 'radio-group'" + :id="inputId" :label="input.label" :input-value="inputValue as string" :pos="pos" @@ -95,6 +107,7 @@ const emit = defineEmits<{ /> <SelectInput v-if="input.type === 'select'" + :id="inputId" :label="input.label" :placeholder="input.placeholder" :input-value="inputValue as string" @@ -105,6 +118,7 @@ const emit = defineEmits<{ /> <RepeatInput v-if="input.type === 'repeat'" + :id="inputId" :label="input.label" :placeholder="input.placeholder" :input-values="inputValue as string[]" diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue index 938ae2e32665d84931296ff26334d3c452801571..11e1aaea61d8b484336ee5f5f43c1c703c641975 100644 --- a/src/features/forms/components/inputs/HtmlInput.vue +++ b/src/features/forms/components/inputs/HtmlInput.vue @@ -6,6 +6,7 @@ import {graphService} from '@/src/shared/services'; import { getCurrentState } from '@/src/shared/services/undoRedo.service'; const props = defineProps<{ + id: string; label: string; inputValue: string; placeholder?: string; @@ -90,11 +91,17 @@ function onBlur() { if(startValue !== content.value) emit('saveGivenState', savedState); } +//? Didn't find a way to link the label to the editor because it uses a contenteditable p +function focusEditor() { + const editor = getTinymce().activeEditor; + editor.focus(); +} + </script> <template> - <label for="editor">{{ label }}</label> - <Editor + <label @click="focusEditor">{{ label }}</label> + <Editor ref="editor" v-model="content" api-key="no-api-key" diff --git a/src/features/forms/components/inputs/RepeatInput.vue b/src/features/forms/components/inputs/RepeatInput.vue index 06d8c82e95dc29010e36b5c68ff33edb5b548497..27d4a6d8cd0e9a135d5b7fa66b9c91d1d3af061b 100644 --- a/src/features/forms/components/inputs/RepeatInput.vue +++ b/src/features/forms/components/inputs/RepeatInput.vue @@ -15,6 +15,7 @@ import { ref } from 'vue'; import { generateContentId } from '@/src/shared/services/graph.service'; const props = defineProps<{ + id: string; inputs: Input[]; label: string; inputValues: string[]; @@ -152,7 +153,7 @@ function dragOver(event: DragEvent) { <!--suppress VueUnrecognizedSlot --> <template #item="{ element, index }"> <div :key="index" class="card draggable-card"> - <div + <div class="card-header" :class="{ 'border-bottom': inputs.length >= 1, 'clickable': element.action }" @click="onClick(index, element.action)" @@ -172,7 +173,7 @@ function dragOver(event: DragEvent) { </div> </div> <div v-if="!element.action" class="card-content"> - <GenericInput + <GenericInput v-for="(input, indexKey) in inputs" :key="indexKey" :input="input" diff --git a/src/features/forms/components/inputs/ScoreInput.vue b/src/features/forms/components/inputs/ScoreInput.vue index 19a3244982fecb6152d078bf67f12cb1b68075b6..ad4bf2337bf62bf6aaa5102a6354aebe5bc88c27 100644 --- a/src/features/forms/components/inputs/ScoreInput.vue +++ b/src/features/forms/components/inputs/ScoreInput.vue @@ -3,6 +3,7 @@ import { getCurrentState } from '@/src/shared/services/undoRedo.service'; const props = defineProps<{ + id: string; inputValue: string; label: string; }>(); @@ -47,10 +48,11 @@ function onBlur() { </script> <template> - <label for="input-score">{{ label }}</label> - <div id="input-score" class="input-score"> + <label :for="id">{{ label }}</label> + <div class="input-score"> <button @click="minus(inputValue)"><i class="icon-minus-circle"></i></button> <input + :id="id" type="number" :value="inputValue" @input="emit('input', ($event.target as HTMLInputElement).value)" diff --git a/src/features/forms/components/inputs/TextAreaInput.vue b/src/features/forms/components/inputs/TextAreaInput.vue index 9a8f536e83b535d48d69715599ea75ca48ea3968..225ae1d0930bb89834c23ab4c85b763e44b560ba 100644 --- a/src/features/forms/components/inputs/TextAreaInput.vue +++ b/src/features/forms/components/inputs/TextAreaInput.vue @@ -3,6 +3,7 @@ import { getCurrentState } from '@/src/shared/services/undoRedo.service'; const props = defineProps<{ + id: string label: string; placeholder: string; inputValue: string; @@ -34,9 +35,9 @@ function onBlur() { </script> <template> - <label class="input-label" :for="label">{{ label }}</label> + <label class="input-label" :for="id">{{ label }}</label> <textarea - :id="label" + :id="id" class="input input-textarea" :class="{ 'input-card' : insideCard }" :placeholder="placeholder" diff --git a/src/features/forms/components/inputs/TextInput.vue b/src/features/forms/components/inputs/TextInput.vue index c9b67541ae3fabf938ff49b6992ceae8ec363ccf..5d650b0fdc6ceece402751451e5ae268d4f9f23d 100644 --- a/src/features/forms/components/inputs/TextInput.vue +++ b/src/features/forms/components/inputs/TextInput.vue @@ -2,6 +2,7 @@ import { getCurrentState } from '@/src/shared/services/undoRedo.service'; const props = defineProps<{ + id: string; label: string; placeholder?: string; inputValue: string; @@ -34,9 +35,9 @@ function onBlur() { </script> <template> - <label v-if="label !== ''" class="input-label" :for="label">{{ label }}</label> + <label v-if="label !== ''" class="input-label" :for="id">{{ label }}</label> <input - :id="label" + :id="id" class="input" :class="{ 'input-card' : insideCard }" type="text" diff --git a/src/features/forms/components/inputs/card/components/CheckBoxInput.vue b/src/features/forms/components/inputs/card/components/CheckBoxInput.vue index 8be574cab5f3f0784d436a58ba8b8fbb146aa53d..86200a670ba5dec5ae21a061fc531dcf87ad9f52 100644 --- a/src/features/forms/components/inputs/card/components/CheckBoxInput.vue +++ b/src/features/forms/components/inputs/card/components/CheckBoxInput.vue @@ -2,6 +2,7 @@ import { getCurrentState } from '@/src/shared/services/undoRedo.service'; defineProps<{ + id: string; inputValue: boolean; label: string; pos: number; @@ -27,13 +28,13 @@ function onChange(event: Event) { <template> <div class="checkbox"> <input - :id="'Checkbox' + String(pos)" + :id="id" class="checkbox-input" type="checkbox" :checked="inputValue" @change="onChange" > - <label :for="'Checkbox' + String(pos)">{{ label }}</label> + <label :for="id">{{ label }}</label> </div> </template> diff --git a/src/features/forms/components/inputs/card/components/RadioInput.vue b/src/features/forms/components/inputs/card/components/RadioInput.vue index 289f2e67f8bcb377b973da49a6011987408f23ee..06a9f2e79454a51898ff91af6d61a3eea9bfcfee 100644 --- a/src/features/forms/components/inputs/card/components/RadioInput.vue +++ b/src/features/forms/components/inputs/card/components/RadioInput.vue @@ -1,11 +1,11 @@ <script setup lang="ts"> import { getCurrentState } from '@/src/shared/services/undoRedo.service'; - defineProps<{ - inputValue: string; - label: string; - pos: number + id: string; + inputValue: string; + label: string; + pos: number }>(); const emit = defineEmits<{ @@ -28,25 +28,25 @@ function onChange(value: string) { <div :id="String(pos)" class="radio-group"> <div class="radio-btn"> <input - :id="'left-' + String(pos)" + :id="'left-' + id" :name="'pos' + pos" type="radio" class="radio-input" :checked="inputValue === '1'" @change="onChange('1')" > - <label :for="'left-' + String(pos)">Choix gauche</label> + <label :for="'left-' + id">Choix gauche</label> </div> <div class="radio-btn"> <input - :id="'right-' + String(pos)" + :id="'right-' + id" :checked="inputValue === '2'" :name="'pos' + pos" class="radio-input" type="radio" @change="onChange('2')" > - <label :for="'right-' + String(pos)">Choix droite</label> + <label :for="'right-' + id">Choix droite</label> </div> </div> </div> diff --git a/src/features/forms/components/inputs/card/components/SelectInput.vue b/src/features/forms/components/inputs/card/components/SelectInput.vue index 6e8fbeab91743c860d4fb9cd08559ebd5f2ac620..ece4a05fee7c05d954854afa174b708e5fd099f3 100644 --- a/src/features/forms/components/inputs/card/components/SelectInput.vue +++ b/src/features/forms/components/inputs/card/components/SelectInput.vue @@ -5,6 +5,7 @@ import { useEditorStore } from '@/src/shared/stores'; const editorStore = useEditorStore(); const props = defineProps<{ + id: string; label: string; inputValue: string; placeholder: string; @@ -36,9 +37,9 @@ function onChange(event: Event) { <template> <div class="select"> - <label for="select-box">{{ label }}</label> + <label :for="id">{{ label }}</label> <select - id="select-box" + :id="id" :value="inputValue" class="select-box" @change="onChange"