Replace radio button with links

Author: bblanchon

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue"
+import { ref, onMounted, computed, watch } from "vue"
 
 import AssistanceModal from "./components/AssistanceModal.vue"
 import TroubleshooterStep from "./components/TroubleshooterStep.vue"
-import { getSteps, generateReport, type Option } from "./troubleshooter"
+import { getSteps, generateReport } from "./troubleshooter"
 
 const sleep = (m: number) => new Promise((r) => setTimeout(r, m))
 
@@ -24,14 +24,11 @@ const needsAssistance = computed(() => {
 
 const report = computed(() => generateReport(steps.value))
 
-function choose(option: Option) {
-  document.location.assign(option.hash)
+watch(hash, (hash) => {
   window.plausible("ArduinoJson Troubleshooter", {
-    props: {
-      hash: document.location.hash,
-    },
+    props: { hash },
   })
-}
+})
 
 async function copyReport() {
   await navigator.clipboard.writeText(report.value)
@@ -61,7 +58,6 @@ async function copyReport() {
       <TroubleshooterStep
         :key="step.hash"
         :step="step"
-        @choose="choose"
         :active="idx == steps.length - 1"
       />
     </Transition>

src/components/TroubleshooterStep.vue

@@ -2,14 +2,10 @@
 import { inject, onMounted, useTemplateRef } from "vue"
 
 import TroubleshooterStepOption from "./TroubleshooterStepOption.vue"
-import type { Option, Step } from "@/troubleshooter"
+import type { Step } from "@/troubleshooter"
 
 const debug = inject<boolean>("debug")
 
-const emit = defineEmits<{
-  choose: [Option]
-}>()
-
 defineProps<{
   step: Step
   active?: boolean
@@ -43,7 +39,6 @@ onMounted(() => {
         v-for="option in step.options"
         :key="option.hash"
         :option="option"
-        @click="emit('choose', option)"
       />
     </div>
     <p v-if="debug" class="small">

src/components/TroubleshooterStepOption.vue

@@ -7,27 +7,50 @@ defineProps<{
 }>()
 
 const debug = inject("debug")
-
-const emit = defineEmits(["check"])
 </script>
 
 <template>
-  <div class="form-check">
-    <input
-      type="radio"
-      :id="option.inputId"
-      class="form-check-input"
-      :checked="option.selected"
-      @click="$emit('check')"
-      :disabled="option.missing"
-    />
-    <label
-      class="form-check-label"
-      :for="option.inputId"
-      v-html="option.label"
-    ></label>
+  <div>
+    <a
+      :href="option.hash"
+      :class="{
+        active: option.selected,
+        disabled: option.missing,
+      }"
+    >
+      <span class="checkmark"></span>
+      <span v-html="option.label"></span>
+    </a>
     <div v-if="debug" class="d-block mb-2 small text-muted">
       {{ option.summary }}
     </div>
   </div>
 </template>
+
+<style scoped>
+a {
+  color: var(--bs-body-color);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.checkmark {
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.8ch;
+  content: "";
+}
+
+a.active .checkmark {
+  color: white;
+  border: 0.3em solid #00828a;
+}
+
+a.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>