Трекер прогресса

vue
<script setup lang="ts">
  import { ref } from 'vue';
  import { ProgressTracker } from "luna";

  const progressSteps = [
    {
      id: "select",
      name: "Выбор бекапа",
      description: "Выбрать файл резервной копии, из которой будет восстанавливаться проект"
    },
    {
      id: "select_project",
      name: "Выбор проекта",
      description: "Выберите проект, что бы начать процедуру проверки"
    },
    {
      id: "import_project",
      name: "Импорт проекта",
      description: "Импортирование проекта в систему"
    },
    {
      id: "resume",
      name: "Результат",
      description: "Отчет о проделанной работе"
    }
  ]
  const currentStepIdx = ref(0);

  const nextStep = () => {
  currentStepIdx.value++;
    if (currentStepIdx.value > progressSteps.length) {
      currentStepIdx.value = 0;
    }
  }

</script>
<template>
  <div style="padding: 20px 0;">
    <ProgressTracker :steps="progressSteps" :current-step-idx="currentStepIdx"></ProgressTracker>
  </div>
  <button @click="nextStep">Далее</button>
</template>
Трекер прогресса ​

Трекер прогресса
