55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template lang="pug">
|
|
.wrap.flex
|
|
.step.flex(v-for="step in steps", :key="step.id" )
|
|
.line.flex.mx-2(v-if="step.id > 0", :class="{'filled': filled(step.id)}")
|
|
.step-num.flex.mx-2(:class="{'filled': filled(step.id)}")
|
|
.step-icon {{step.label}}
|
|
span.mx-2 {{step.value}}
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BaseStepper",
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
steps: Array,
|
|
currentStep: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
methods: {
|
|
filled(id) {
|
|
return id <= this.currentStep;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.step
|
|
align-items: center
|
|
.step-num
|
|
background-color: var(--btn-grey-color)
|
|
gap: 8px
|
|
padding: 0
|
|
border-radius: 50%
|
|
height: 32px
|
|
width: 32px
|
|
justify-content: center
|
|
align-items: center
|
|
&.filled
|
|
background-color: var(--btn-blue-color)
|
|
.step-icon
|
|
color: var(--default-white)
|
|
|
|
.line
|
|
width: 78px
|
|
border: 1.5px solid var(--btn-grey-color)
|
|
&.filled
|
|
background-color: var(--btn-blue-color)
|
|
border-color: var(--btn-blue-color)
|
|
</style>
|