You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.7 KiB
106 lines
3.7 KiB
4 years ago
|
<template>
|
||
|
|
<div class="order-status">
|
||
|
|
<div :class="`current-status theme-${steps[currentStep].color}`">
|
||
|
|
<div class="symbol"> <v-icon> WMi-{{ steps[currentStep].icon }} </v-icon> </div>
|
||
|
|
<div class="text">
|
||
|
|
<name-block :theme="`theme-${(steps[currentStep].color)}`" :name_fa="steps[currentStep].name_fa" :name_en="steps[currentStep].name_en" :number="parseInt(currentStep)+1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<v-stepper class="we-stepper">
|
||
|
|
<v-stepper-header>
|
||
|
|
<v-stepper-step v-for="(step, index) in steps" :key="index" :step="index+1" :class="`fade-in fast delay-0${index} theme-${step.color} ${getStepStatus(index,currentStep)}`">
|
||
|
|
<name-block :theme="`sm`" :name_en="step.name_en" :name_fa="step.name_fa" />
|
||
|
|
</v-stepper-step>
|
||
|
|
|
||
|
|
</v-stepper-header>
|
||
|
|
</v-stepper>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "steps-timeline",
|
||
|
|
props: {
|
||
|
|
currentStep: {default: 1},
|
||
|
|
steps: {default: ""},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getStepStatus: function(thisStep, currentStep) {
|
||
|
|
if(thisStep > currentStep) {
|
||
|
|
return 'waiting';
|
||
|
|
} else if(thisStep == currentStep) {
|
||
|
|
return 'active';
|
||
|
|
} else if(thisStep < currentStep) {
|
||
|
|
return 'passed';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.order-status {
|
||
|
|
border: 1px solid #eeeeee;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.current-status {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
.current-status .symbol .v-icon {
|
||
|
|
font-size: 90px;
|
||
|
|
}
|
||
|
|
.current-status .text {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
.we-stepper .v-stepper__step.passed {
|
||
|
|
filter: grayscale(100%);
|
||
|
|
opacity: 0.5 !important;
|
||
|
|
}
|
||
|
|
.theme--light.v-stepper .v-stepper__step--active .v-stepper__label {
|
||
|
|
text-shadow: none;
|
||
|
|
}
|
||
|
|
/* --------------------------------------------------------
|
||
|
|
Steps : Colors
|
||
|
|
-------------------------------------------------------- */
|
||
|
|
@import "resources/js/Global/scss/_vars.scss";
|
||
|
|
@each $color,
|
||
|
|
$value in $colors {
|
||
|
|
//-------------------Active State-----------------------------
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-fa,
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-en,
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__step__step {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active {
|
||
|
|
background-color: $value;
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------------Waiting State-----------------------------
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-fa,
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-en {
|
||
|
|
color: $value;
|
||
|
|
}
|
||
|
|
.v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__step__step {
|
||
|
|
color: $value
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------------Current Step-----------------------------
|
||
|
|
.order-status .current-status.theme-#{$color} {
|
||
|
|
border: 2px solid $value;
|
||
|
|
}
|
||
|
|
.order-status .current-status.theme-#{$color} .symbol .v-icon {
|
||
|
|
color: $value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|