From 66bc6a69e918ced807ec9d300360cb5cc11b540e Mon Sep 17 00:00:00 2001 From: VIAUD Nathan <nathan.viaud@inria.fr> Date: Tue, 17 Oct 2023 09:33:46 +0200 Subject: [PATCH 1/4] feat(label): score input --- src/features/forms/components/inputs/ScoreInput.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/forms/components/inputs/ScoreInput.vue b/src/features/forms/components/inputs/ScoreInput.vue index 19a32449..4aa2f02b 100644 --- a/src/features/forms/components/inputs/ScoreInput.vue +++ b/src/features/forms/components/inputs/ScoreInput.vue @@ -47,10 +47,11 @@ function onBlur() { </script> <template> - <label for="input-score">{{ label }}</label> - <div id="input-score" class="input-score"> + <label :for="label">{{ label }}</label> + <div class="input-score"> <button @click="minus(inputValue)"><i class="icon-minus-circle"></i></button> <input + :id="label" type="number" :value="inputValue" @input="emit('input', ($event.target as HTMLInputElement).value)" -- GitLab From c986c73e28313a44e2c4328647c674b05c7ca9b3 Mon Sep 17 00:00:00 2001 From: VIAUD Nathan <nathan.viaud@inria.fr> Date: Tue, 17 Oct 2023 09:33:56 +0200 Subject: [PATCH 2/4] feat(label): HTML input --- src/features/forms/components/inputs/HtmlInput.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue index 938ae2e3..7cfd4340 100644 --- a/src/features/forms/components/inputs/HtmlInput.vue +++ b/src/features/forms/components/inputs/HtmlInput.vue @@ -90,11 +90,20 @@ 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 for="editor">{{ label }}</label>--> + <label @click="focusEditor">Mon label à moi</label> + <Editor + aria-labelledby="editor" + id="editor" ref="editor" v-model="content" api-key="no-api-key" -- GitLab From 9273705c44abc441ff68864caf92f4477c98a08b Mon Sep 17 00:00:00 2001 From: VIAUD Nathan <nathan.viaud@inria.fr> Date: Tue, 17 Oct 2023 09:34:33 +0200 Subject: [PATCH 3/4] feat(label): HTML input --- src/features/forms/components/inputs/HtmlInput.vue | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue index 7cfd4340..8edfacfd 100644 --- a/src/features/forms/components/inputs/HtmlInput.vue +++ b/src/features/forms/components/inputs/HtmlInput.vue @@ -99,11 +99,8 @@ function focusEditor() { </script> <template> -<!-- <label for="editor">{{ label }}</label>--> - <label @click="focusEditor">Mon label à moi</label> + <label @click="focusEditor">{{ label }}</label> <Editor - aria-labelledby="editor" - id="editor" ref="editor" v-model="content" api-key="no-api-key" -- GitLab From 5f321fe946b67ec2e809967d9e9e121dd351b7d8 Mon Sep 17 00:00:00 2001 From: VIAUD Nathan <nathan.viaud@inria.fr> Date: Tue, 17 Oct 2023 10:56:35 +0200 Subject: [PATCH 4/4] feat(label): changing labels attribute for --- .../forms/components/inputs/FileInput.vue | 5 +++-- .../forms/components/inputs/GenericInput.vue | 18 ++++++++++++++++-- .../forms/components/inputs/HtmlInput.vue | 1 + .../forms/components/inputs/RepeatInput.vue | 5 +++-- .../forms/components/inputs/ScoreInput.vue | 5 +++-- .../forms/components/inputs/TextAreaInput.vue | 5 +++-- .../forms/components/inputs/TextInput.vue | 5 +++-- .../inputs/card/components/CheckBoxInput.vue | 5 +++-- .../inputs/card/components/RadioInput.vue | 16 ++++++++-------- .../inputs/card/components/SelectInput.vue | 5 +++-- 10 files changed, 46 insertions(+), 24 deletions(-) diff --git a/src/features/forms/components/inputs/FileInput.vue b/src/features/forms/components/inputs/FileInput.vue index 8bf85a34..fc2b234e 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 2d7f0d26..eddc770e 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 8edfacfd..11e1aaea 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; diff --git a/src/features/forms/components/inputs/RepeatInput.vue b/src/features/forms/components/inputs/RepeatInput.vue index 06d8c82e..27d4a6d8 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 4aa2f02b..ad4bf233 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,11 +48,11 @@ function onBlur() { </script> <template> - <label :for="label">{{ label }}</label> + <label :for="id">{{ label }}</label> <div class="input-score"> <button @click="minus(inputValue)"><i class="icon-minus-circle"></i></button> <input - :id="label" + :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 9a8f536e..225ae1d0 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 c9b67541..5d650b0f 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 8be574ca..86200a67 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 289f2e67..06a9f2e7 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 6e8fbeab..ece4a05f 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" -- GitLab