@webitel/ui-sdk 3.2.83 → 3.2.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.83",
+  "version": "3.2.85",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/index.js

@@ -55,6 +55,7 @@ import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
 import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
 import WtIconAction from './organisms/wt-icon-action/wt-icon-action.vue';
 import WtPageHeader from './organisms/wt-page-header/wt-page-header.vue';
+import WtStepper from './organisms/wt-stepper/wt-stepper.vue';
 
 const Components = {
   WtAvatar,
@@ -111,6 +112,7 @@ const Components = {
   WtPageHeader,
   WtItemLink,
   WtDummy,
+  WtStepper,
 };
 
 export default Components;

package/src/components/organisms/wt-stepper/__tests__/WtStepper.spec.vue.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import WtStepper from '../wt-stepper.vue';
+
+describe('WtStepper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtStepper, {
+      props: {
+        steps: [
+          {
+            name: 'step 1',
+            description: 'description',
+          },
+        ],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/organisms/wt-stepper/wt-stepper.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="wt-stepper">
+    <div class="wt-stepper-header">
+      <div
+        class="wt-stepper-steps"
+      >
+        <div
+          class="wt-stepper-steps__wrapper"
+          v-for="({name, completed}, idx) in stepWithCompleted"
+        >
+          <div
+            v-if="idx !== 0"
+            class="wt-stepper-steps__divider"
+            :class="{ 'wt-stepper-steps__divider--completed': completed }"
+          ></div>
+          <wt-chip
+            class="wt-stepper-steps__item"
+            :color="!completed && 'secondary'"
+          >{{ name }}
+          </wt-chip>
+        </div>
+      </div>
+    </div>
+
+    <slot name="description">
+      <p class="wt-stepper-description">{{ description }}</p>
+    </slot>
+
+    <slot name="main"></slot>
+
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  steps: {
+    type: Object,
+  },
+  activeStep: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const description = computed(() => props.steps[props.activeStep - 1].description);
+
+const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
+    ...item,
+    completed: props.activeStep > idx,
+  })));
+</script>
+
+<style lang="scss" scoped>
+.wt-stepper-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.wt-stepper-steps {
+  display: flex;
+  align-items: center;
+
+  &__wrapper {
+    display: contents;
+  }
+
+  &__divider {
+    flex: 1 1 auto;
+    height: 1px;
+    background: var(--secondary-color);
+
+    &--completed {
+      background-color: var(--chip-bg-color);
+    }
+  }
+}
+
+.wt-stepper-description {
+  margin-bottom: var(--spacing-lg);
+  text-align: center;
+}
+</style>

package/src/locale/en/en.js

@@ -66,6 +66,8 @@ export default {
     all: 'All {entity}',
     upload: 'Upload',
     edit: 'Edit',
+    back: 'Back',
+    step: 'Step { count }',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {

package/src/locale/ru/ru.js

@@ -66,6 +66,8 @@ export default {
     all: 'Все {entity}',
     upload: 'Загрузить',
     edit: 'Редактировать',
+    back: 'Назад',
+    step: 'Шаг { count }',
   },
   vocabulary: {
     language: 'Язык',

package/src/locale/ua/ua.js

@@ -67,6 +67,8 @@ export default {
     all: 'Всі {entity}',
     upload: 'Завантажити',
     edit: 'Редагувати',
+    back: 'Назад',
+    step: 'Крок { count }',
   },
   vocabulary: {
     language: 'Мова',

package/src/mixins/validationMixin/validationMixin.js

@@ -31,6 +31,7 @@ export default {
         else if (this.v.minLength?.$invalid) validationText = `${this.$t('validation.minLength')} ${this.v.minLength.$params.min}`;
         else if (this.v.url?.$invalid) validationText = `${this.$t('validation.url')}`;
         else if (this.v.regExpValidator?.$invalid) validationText = `${this.$t('validation.regExpValidator')}`;
+        else if (this.v.sameAs?.$invalid) validationText = `${this.$t('validation.sameAs')}`;
       }
       // eslint-disable-next-line no-restricted-syntax
       for (const { name, text } of this.customValidators) {