src/components/StepIndicator.vue

@@ -1,50 +1,41 @@
 <script setup lang="ts">
 import { useAppStore } from "@/stores/app"
-import type { AppStep } from "@/types"
 import { Badge } from "@/components/ui/badge"
 
 const store = useAppStore()
 
-const steps: { num: AppStep; label: string }[] = [
+const steps = [
-    { num: 1, label: "Upload" },
+    { num: 1 as const, label: "Upload" },
-    { num: 2, label: "EXIF" },
+    { num: 2 as const, label: "EXIF" },
-    { num: 3, label: "Datums" },
+    { num: 3 as const, label: "Datums" },
-    { num: 4, label: "Result" },
+    { num: 4 as const, label: "Result" },
 ]
-
-function isReachable(num: AppStep): boolean {
-    return num <= store.maxStepReached && num !== store.currentStep
-}
-
-function handleClick(num: AppStep) {
-    if (isReachable(num)) {
-        store.goToStep(num)
-    }
-}
 </script>
 
 <template>
     <nav class="flex items-center gap-1" aria-label="Steps">
         <template v-for="(step, i) in steps" :key="step.num">
-            <button
-                v-if="isReachable(step.num)"
-                class="inline-flex items-center rounded-md border border-border px-2 py-0.5 font-mono text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
-                @click="handleClick(step.num)"
-            >
-                {{ step.num }}.{{ step.label }}
-            </button>
             <Badge
-                v-else
                 :variant="
                     store.currentStep === step.num
                         ? 'default'
                         : 'outline'
                 "
-                class="cursor-default select-none font-mono text-xs"
+                class="select-none font-mono text-xs"
                 :class="{
-                    'opacity-40':
+                    'opacity-40': store.currentStep < step.num,
-                        step.num > store.maxStepReached,
+                    'cursor-pointer hover:bg-accent':
+                        step.num <= store.maxStepReached
+                        && step.num !== store.currentStep,
+                    'cursor-default':
+                        step.num > store.maxStepReached
+                        || step.num === store.currentStep,
                 }"
+                @click="
+                    step.num <= store.maxStepReached
+                        ? store.goToStep(step.num)
+                        : undefined
+                "
             >
                 {{ step.num }}.{{ step.label }}
             </Badge>