add radioButton component

components/QuestionChoice.vue

@@ -1,10 +1,7 @@
 <template>
     <div class="emphased">
-        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index"
+        <RadioButton v-for="(val, index) in values" :key="index" :index="index" :question-id="questionId" :val="val"
-            :style="{ background: colors[index] }">
+            :color="colors[index] ?? 'unset'" />
-            <input type="radio" :value="val" :name="String(questionId)">
-            <label :for="`${questionId}-${val}`">{{ val }}</label>
-        </div>
     </div>
 </template>
 
@@ -32,15 +29,6 @@ const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"]
     flex-wrap: nowrap;
 }
 
-.emphased div {
-    padding: 3px;
-    border: 1px solid #444;
-    border-right: none;
-    text-overflow: ellipsis;
-    flex: 1 1 0;
-    width: 0;
-}
-
 .emphased div:last-child {
     border-right: 1px solid #444;
 }

components/RadioButton.vue

@@ -0,0 +1,43 @@
+<template>
+    <div :id="`${questionId}-${val}`" :key="index" :style="{ background: color }" @click="use">
+        <input ref="input" type="radio" :value="val" :name="questionId">
+        <label :for="`${questionId}-${val}`">{{ val }}</label>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    color: string;
+    questionId: string;
+    val: string;
+    index: number;
+}
+
+const input = useTemplateRef('input')
+
+const { color, questionId, val, index } = defineProps<Props>()
+
+function use() {
+    if (input.value) {
+        input.value?.click()
+    }
+}
+
+</script>
+
+<style scoped="true">
+div {
+    padding: 3px;
+    border: 1px solid #444;
+    border-right: none;
+    text-overflow: ellipsis;
+    flex: 1 1 0;
+    width: 0;
+    cursor: pointer;
+}
+
+label,
+input {
+    pointer-events: none;
+}
+</style>