From feb3dd1327303318803af56fdcd8db0bebc0ff4e Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 1 Jun 2025 12:58:17 +0200
Subject: [PATCH] add radioButton component

---
 components/QuestionChoice.vue | 16 ++-----------
 components/RadioButton.vue    | 43 +++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 components/RadioButton.vue

diff --git a/components/QuestionChoice.vue b/components/QuestionChoice.vue
index b95705b..0c33ec3 100644
--- a/components/QuestionChoice.vue
+++ b/components/QuestionChoice.vue
@@ -1,10 +1,7 @@
 <template>
     <div class="emphased">
-        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index"
-            :style="{ background: colors[index] }">
-            <input type="radio" :value="val" :name="String(questionId)">
-            <label :for="`${questionId}-${val}`">{{ val }}</label>
-        </div>
+        <RadioButton v-for="(val, index) in values" :key="index" :index="index" :question-id="questionId" :val="val"
+            :color="colors[index] ?? 'unset'" />
     </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;
 }
diff --git a/components/RadioButton.vue b/components/RadioButton.vue
new file mode 100644
index 0000000..747bc39
--- /dev/null
+++ b/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>
\ No newline at end of file