60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<template>
|
|
<div class="text-sm relative">
|
|
<div
|
|
class="flex items-center justify-center w-6 h-6 rounded-full border-solid border-2 absolute -top-2 -left-2 font-arvo font-bold"
|
|
:class="[colors[type].container, colors[type].lightText]"
|
|
v-text="step"
|
|
></div>
|
|
<div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
|
|
<div class="flex-grow text-sm" :class="colors[type].text">
|
|
<slot name="current" v-if="modelValue === step"></slot>
|
|
<slot name="finished" v-if="modelValue > step"></slot>
|
|
<slot name="due" v-if="modelValue < step"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, computed} from 'vue';
|
|
|
|
const colors = ref({
|
|
success: {
|
|
container: 'bg-green-200 border-green-600',
|
|
lightText: 'text-green-700',
|
|
text: 'text-green-900',
|
|
},
|
|
info: {
|
|
container: 'bg-blue-200 border-blue-600',
|
|
lightText: 'text-blue-700',
|
|
text: 'text-blue-900',
|
|
},
|
|
default: {
|
|
container: 'bg-neutral-200 border-neutral-600',
|
|
lightText: 'text-neutral-700',
|
|
text: 'text-neutral-900',
|
|
},
|
|
});
|
|
|
|
const type = computed(() => {
|
|
if (props.modelValue === props.step) {
|
|
return 'info';
|
|
}
|
|
if (props.modelValue > props.step) {
|
|
return 'success';
|
|
}
|
|
return 'default';
|
|
});
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
required: true,
|
|
type: Number,
|
|
},
|
|
step: {
|
|
required: true,
|
|
type: Number,
|
|
},
|
|
});
|
|
</script>
|