49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full flex flex-row items-center">
|
||
|
|
<div class="contents" v-for="(i, index) in total" :key="index">
|
||
|
|
<SuccessCheckmark v-if="index <= successfull && index != step" class="h-8!" />
|
||
|
|
<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>
|