ff-admin/src/components/CheckProgressBar.vue

<template>
  <div class="w-full flex flex-row items-center">
    <div class="contents" v-for="(i, index) in total" :key="index">
      <div
        v-if="index <= successfull && index != step"
        class="relative flex items-center justify-center h-8 w-8 border-4 border-success rounded-full"
      >
        <SuccessCheckmark class="h-8! asolute top-0 m-0!" />
      </div>
      <div
        v-else-if="index <= step"
        class="flex items-center justify-center h-8 w-8 border-4 border-success rounded-full"
      >
        <div class="h-2 w-2 border-4 border-success bg-success rounded-full"></div>
      </div>
      <div v-else class="h-8 w-8 border-4 border-gray-400 rounded-full"></div>
      <div v-if="i != total" class="grow border-2" :class="index < step ? ' border-success' : 'border-gray-400'"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import SuccessCheckmark from "./SuccessCheckmark.vue";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    step: {
      type: Number,
      default: 0,
      validator(value: number) {
        return value >= 0;
      },
    },
    successfull: {
      type: Number,
      default: 0,
      validator(value: number) {
        return value >= 0;
      },
    },
    total: {
      type: Number,
      default: 1,
      validator(value: number) {
        return value >= 1;
      },
    },
  },
});
</script>