tp-head-step

<template>
<router-link tag="div" :to="link" class="tp-head-step">
    <ui-progress-bar :animate="{ progress: progress }" :size="size" :style="{margin: '0 auto 20px'}">
        <div class="tp-head-step__info">
            <span>{{ currentStep }}/{{ maxSteps }}</span>
        </div>
    </ui-progress-bar>
    <div :class="['tp-head-step__left-link', {'tp-head-step__left-link--active': isActive, 'tp-head-step__left-link--disabled': !isActive ? isDisabled : false }]">Продукт<br> и поставка</div>
</router-link>
</template>

<style>
.tp-head-step {
    display: inline-flex;
    flex-direction: row;
    margin-right: 70px;
}

.tp-head-step__info {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
    height: inherit;
    cursor: pointer;
    font-size: 12px;
}

.tp-head-step__left-link {
    margin-left: 20px;
    text-transform: uppercase;
    line-height: 18px;
    letter-spacing: 0.6px;
    font-size: 12px;
    color: #2d9e6e;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
}

.tp-head-step__left-link--active {
    color: #000;
}

.tp-head-step__left-link--disabled {
    cursor: default;
    color: #8d8d8d;
}
</style>

<script>
export default {
    props: {
        size: {
            type: String,
            default: '40px'
        },
        progress: {
          type: Number,
          default: 0
        },
        maxSteps: {
            type: Number,
            default: 0
        },
        currentStep: {
            type: Number,
            default: 0
        },
        isActive: Boolean,
        isDisabled: {
            type: Boolean,
            default: true
        },
        link: {
            type: String,
            default: ''
        }
    }
}
</script>