From 5f9b9327820cb5597fa1534b701ae5dbbcdbe68c Mon Sep 17 00:00:00 2001
From: dderbentsov <dderbentsov@gmail.com>
Date: Sun, 25 Dec 2022 03:03:11 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20BaseStep?=
 =?UTF-8?q?per?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseStepper.vue | 54 +++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/base/BaseStepper.vue

diff --git a/src/components/base/BaseStepper.vue b/src/components/base/BaseStepper.vue
new file mode 100644
index 0000000..248ba9a
--- /dev/null
+++ b/src/components/base/BaseStepper.vue
@@ -0,0 +1,54 @@
+<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>