Stepper

services/frontend/src/components/ui/ds-stepper/
- DsStepper.vue    # Main stepper component
- index.ts         # Exports

interface WizardStep {
  id: string
  label: string
  status: 'completed' | 'current' | 'pending'
}

<script setup lang="ts">
import { ref, computed } from 'vue'
import { DsStepper, type WizardStep } from '@/components/ui/ds-stepper'

const currentStep = ref(0)

const steps = [
  { key: 'repository', label: 'Repository' },
  { key: 'config', label: 'Configuration' },
  { key: 'review', label: 'Review' }
]

const wizardSteps = computed((): WizardStep[] => {
  return steps.map((step, index) => ({
    id: step.key,
    label: step.label,
    status: index < currentStep.value
      ? 'completed'
      : index === currentStep.value
        ? 'current'
        : 'pending'
  }))
})

function handleStepClick(step: WizardStep, index: number) {
  if (step.status === 'completed') {
    currentStep.value = index
  }
}
</script>

<template>
  <div class="flex gap-8">
    <DsStepper
      :steps="wizardSteps"
      interactive
      @step-click="handleStepClick"
    />

    <div class="flex-1">
      <!-- Step content -->
    </div>
  </div>
</template>

<DsStepper
  :steps="wizardSteps"
  interactive
  @step-click="goToStep"
/>

<template>
  <div class="flex gap-8">
    <!-- Stepper on left (fixed width) -->
    <DsStepper :steps="steps" />

    <!-- Content on right (flexible width) -->
    <div class="flex-1">
      <DsCard v-if="currentStep === 0" title="Step 1">
        <!-- Step 1 content -->
      </DsCard>
    </div>
  </div>
</template>