initial

apps/client/components/stepper.vue

@@ -0,0 +1,139 @@
+<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>