140 lines
2.6 KiB
Vue
140 lines
2.6 KiB
Vue
<template>
|
|
<div class="form-stepper">
|
|
<template
|
|
v-for="(label, index) in items"
|
|
:key="index"
|
|
>
|
|
<div
|
|
class=" form-stepper__step"
|
|
|
|
:class="{
|
|
'form-stepper__step--current': index === step,
|
|
'form-stepper__step--passed': index < step,
|
|
}"
|
|
>
|
|
<div class="form-stepper__index">
|
|
<span v-if="index > step - 1 ">
|
|
{{ index + 1 }}
|
|
</span>
|
|
|
|
<UiIconCheck
|
|
v-else
|
|
class="form-stepper__icon"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="form-stepper__label"
|
|
v-html="label"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="index !== items.length - 1"
|
|
class="form-stepper__line"
|
|
:class="{
|
|
'form-stepper__line--passed': index > step - 1,
|
|
}"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
step: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['set'])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.form-stepper {
|
|
$self: &;
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__line {
|
|
$line: &;
|
|
|
|
height: 3px;
|
|
flex: 1;
|
|
background-image: linear-gradient(90deg, #a5e9bc 0%, #a7b9d5 100%);
|
|
margin-inline: 4px;
|
|
border-radius: 2px;
|
|
|
|
&--passed {
|
|
background-image: linear-gradient(90deg, #a7b9d5 0%, #dfe5ff 100%);
|
|
}
|
|
}
|
|
|
|
&__step {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
user-select: none;
|
|
|
|
&:first-child {
|
|
justify-self: flex-start;
|
|
}
|
|
|
|
&:last-child {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
&--passed {
|
|
--form-stepper-index-background: #{$clr-green-500};
|
|
--form-stepper-label-color: #{$clr-green-500};
|
|
|
|
//color: var(--form-stepper-index-color, #{$clr-white});
|
|
|
|
cursor: initial;
|
|
}
|
|
|
|
&--current {
|
|
--form-stepper-index-background: #{$clr-grey-300};
|
|
--form-stepper-label-color: #{$clr-grey-600};
|
|
--form-stepper-index-color: #{$clr-grey-600};
|
|
cursor: initial;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
--icon-size: 20px;
|
|
line-height: 18px;
|
|
color: $clr-white;
|
|
}
|
|
|
|
&__index {
|
|
@include txt-i-m;
|
|
|
|
width: 32px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
background: var(--form-stepper-index-background, #{$clr-grey-200});
|
|
color: var(--form-stepper-index-color, #{$clr-grey-400});
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__label {
|
|
@include txt-r;
|
|
|
|
color: var(--form-stepper-label-color, #{$clr-grey-600});
|
|
margin-top: 16px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|