feature: implement stepper component

packages/docs/locales/en.json

@@ -96,12 +96,7 @@
       "contactUs": "Contact us",
       "newsBannerText": " \uD83D\uDD25\uD83D\uDD25\uD83D\uDD25 Hi there, we're celebrating our launch on Product Hunt this week! \uD83D\uDE80 We'd love to get your feedback and support! \uD83D\uDE4F",
       "newsBannerLink": "Visit the launch page",
-      "bannerText": [
-        "expert",
-        "s",
-        "available in",
-        "to build and launch your product"
-      ]
+      "bannerText": ["expert", "s", "available in", "to build and launch your product"]
     }
   },
   "api": {
@@ -212,9 +207,9 @@
       },
       "slots": {
         "default": "Default slot for button's content.",
-        "append": "Slot to input before button's content. Slot scope properties available: `{'{ icon, iconAttributes }'}`.",
-        "prepend": "Slot to input after button's content. Slot scope properties available: `{'{ icon, iconAttributes }'}`.",
-        "loading": "Slot for loading state. Slot scope properties available: `{'{ icon, iconAttributes }'}`."
+        "append": "Slot to input before button's content. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.",
+        "prepend": "Slot to input after button's content. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.",
+        "loading": "Slot for loading state. Slot scope properties available: `{ '{ icon, iconAttributes }' }`."
       },
       "events": {
         "click": "Emitted when user clicks on button"
@@ -1502,6 +1497,31 @@
         "updateExpanded": "The array of expanded tree nodes."
       }
     },
+    "VaStepper": {
+      "props": {
+        "modelValue": "Value of current step starting from `0`.",
+        "steps": "Array of step configs. `Label` is text displayed under each step in timeline, `Icon` if set, replaces step icon with specified icon, `disabled` makes step inaccessible without removing it from the timeline.",
+        "navigationDisabled": "Disables navigation via pressing on steps.",
+        "nextDisabled": "Disables navigation to steps further than `model-value`.",
+        "controlsHidden": "Removes 'Back' and 'Next' buttons.",
+        "vertical": "Changes stepper orientation to vertical.",
+        "finishButtonHidden": "Hides 'Finish' button"
+      },
+      "events": {
+        "finish": "Emits when 'Finish' button is getting pressed"
+      },
+      "slots": {
+        "stepButton": "Replaces the step in timeline with provided template. Step slots are enumerable and should be used with step number postfix (i.e. step-button-0, step-button-1, etc). Slot scope properties and methods available: `{'{ setStep, nextStep, prevStep, step, isActive, isCompleted }'}`.",
+        "stepContent": "Replaces step content with provided template. Content slots are enumerable and should be used with step number postfix (i.e. step-content-0, step-content-1, etc). Slot scope properties and methods available: `{'{ setStep, nextStep, prevStep }'}`.",
+        "controls": "Inserts provided template after default controls. If you want to replace default controls set `controls-hidden` prop to `true`. Slot scope properties and methods available: `{'{ setStep, nextStep, prevStep }'}`.",
+        "divider": "Replaces step divider in the timeline with provided template."
+      },
+      "methods": {
+        "setStep": "Activates step at specified index.",
+        "nextStep": "By default activates next step. If target step is disabled activates the step after it.",
+        "prevStep": "By default activates previous step. If target step is disabled activates the step before it."
+      }
+    },
     "VaSkeleton": {
       "props": {
         "width": "Skeleton width.",
@@ -1630,6 +1650,7 @@
     "colors": "Colors",
     "timePicker": "Time Picker",
     "timeInput": "Time Input",
+    "stepper": "Stepper",
     "carousel": "Carousel",
     "treeShaking": "Tree Shaking",
     "counter": "Counter",
@@ -4671,6 +4692,35 @@
       }
     }
   },
+  "stepper": {
+    "title": "Stepper",
+    "description": "Stepper allows users to separate content into several steps and navigate through it using buttons or timeline.",
+    "examples": {
+      "default": {
+        "title": "Basic usage",
+        "text": ""
+      },
+      "vertical": {
+        "title": "Vertical",
+        "text": ""
+      },
+      "icons": {
+        "title": "Custom icons",
+        "text": "Each step config could have icon name specified, check `va-icon` for more details."
+      },
+      "custom": {
+        "title": "Customized with slots",
+        "text": ""
+      },
+      "minimal": {
+        "title": "Navigation only",
+        "text": "You can hide controls and use stepper navigation independently"
+      }
+    },
+    "alerts": {
+      "slots": "You can iterate through slots using template literals in slot name. \n Example: ``{'#[`step-button-${i}`]=\"{ setStep, isActive, isCompleted }\"'}``"
+    }
+  },
   "colors": {
     "title": "Colors",
     "description": "Vuestic UI defines `CSS variables` of the colors that are used in your application. This allows you to easily build your selectors using the colors you specified in the [Colors Config](https://vuestic.dev/en/services/colors-config).",

packages/docs/locales/ru.json

@@ -53,11 +53,7 @@
     "customize": {
       "title": "Полная настройка",
       "text": "Обеспечьте соответствие компонентов Vuestic UI вашему дизайну с помощью мощных динамических конфигураций.",
-      "tabs": [
-        "Элементы формы",
-        "Таблицы",
-        "Разное"
-      ],
+      "tabs": ["Элементы формы", "Таблицы", "Разное"],
       "copy": "Скопировано",
       "configuration": "Посмотрите наше руководство по конфигурации"
     },
@@ -94,12 +90,7 @@
         "spinners": "Epic Spinners"
       },
       "contactUs": "Contact us",
-      "bannerText": [
-        "expert",
-        "s",
-        "available in",
-        "to build and launch your product"
-      ]
+      "bannerText": ["expert", "s", "available in", "to build and launch your product"]
     }
   },
   "api": {
@@ -1370,6 +1361,27 @@
         "updateExpanded": "Массив раскрытых элементов дерева"
       }
     },
+    "VaStepper": {
+      "props": {
+        "modelValue": "Значение текущего шага, начиная с `0`",
+        "steps": "Массив конфигураций шагов. `Label` - текст, отображаемый под каждым шагом на временной шкале, `Icon`, если установлен, заменяет иконку шага на указанную иконку, `disabled` делает шаг недоступным, не удаляя его с временной шкалы",
+        "navigationDisabled": "Отключает навигацию по нажатию на шаги",
+        "nextDisabled": "Отключает навигацию для шагов больших чем `model-value`",
+        "controlsHidden": "Удаляет кнопки 'Назад' и 'Далее'",
+        "vertical": "Изменяет ориентацию на вертикальную"
+      },
+      "slots": {
+        "stepButton": "Заменяет шаг на временной шкале на предоставленный шаблон. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. step-button-0, step-button-1 и т.д.). Доступные свойства и методы диапазона слотов: `{'{ setStep, nextStep, prevStep, step, isActive, isCompleted }'}`",
+        "stepContent": "Заменяет содержимое шага предоставленным шаблоном. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. step-content-0, step-content-1 и т.д.). Доступные свойства и методы области действия слота: `{'{ setStep, nextStep, prevStep }'}`",
+        "controls": "Вставляет предоставленный шаблон после встроенных элементов управления. Если вы хотите заменить элементы управления по умолчанию, установите параметр `no-controls` в значение `true`. Доступны свойства и методы области действия слота: `{'{ setStep, nextStep, prevStep }'}`",
+        "divider": "Заменяет разделитель шагов на временной шкале на предоставленный шаблон."
+      },
+      "methods": {
+        "setStep": "Активирует шаг по указанному индексу",
+        "nextStep": "По умолчанию активирует следующий шаг. Если целевой шаг отключен, активируется следующий за ним шаг",
+        "prevStep": "По умолчанию активирует предыдущий шаг. Если целевой шаг отключен, активируется шаг перед ним"
+      }
+    },
     "VaScrollContainer": {
       "props": {
         "horizontal": "Разрешает горизонтальную прокрутку у блока.",
@@ -4586,6 +4598,35 @@
       }
     }
   },
+  "stepper": {
+    "title": "Stepper",
+    "description": "Stepper позволяет пользователям разделять контент на несколько шагов и перемещаться по нему с помощью кнопок или навигации.",
+    "examples": {
+      "default": {
+        "title": "Основное использование",
+        "text": ""
+      },
+      "vertical": {
+        "title": "Вертикальный",
+        "text": ""
+      },
+      "icons": {
+        "title": "Пользовательские значки",
+        "text": "В конфигурации каждого шага может быть указано имя значка, см. va-icon для получения дополнительной информации."
+      },
+      "custom": {
+        "title": "Кастомизация с помощью слотов",
+        "text": ""
+      },
+      "minimal": {
+        "title": "Только навигация",
+        "text": "Вы можете скрыть элементы управления и использовать навигацию степпера независимо"
+      }
+    },
+    "alerts": {
+      "slots": "Вы можете итерироваться через слоты, используя шаблонные строки в имени слота. \n Пример: {'#[`step-button-${i}`]=\"{ setStep, isActive, isCompleted }\"'}"
+    }
+  },
   "colors": {
     "title": "Цвета",
     "description": "Vuestic UI определяет `Переменные CSS` цветов, которые используются в вашем приложении. Это позволит вам легко определять свои селекторы с использованием цветов определенных в [Colors Config](https://vuestic.dev/en/services/colors-config).",

packages/docs/page-config/navigationRoutes.ts

@@ -335,6 +335,13 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "sidebar-item",
         displayName: "menu.sidebarItem",
       },
+      {
+        name: 'stepper',
+        displayName: 'menu.stepper',
+        meta: {
+          badge: 'new',
+        }
+      },
       {
         category: "menu.categories.other",
         name: "affix",

packages/docs/page-config/ui-elements/skeleton/index.ts

@@ -21,8 +21,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaSkeleton", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-skeleton/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/stepper/api-options.ts

@@ -0,0 +1,19 @@
+export default defineManualApi({
+  props: {
+    steps: { types: '{ label: string, icon?: string, disabled?: boolean }' },
+  },
+  slots: {
+    stepButton: { },
+    stepContent: { },
+    controls: { },
+    divider: { },
+  },
+  events: {
+    finish: { types: '' }
+  },
+  methods: {
+    setStep: { types: '`(stepNumber: number) => void`' },
+    nextStep: { types: '`(stepsToSkip: number) => void`' },
+    prevStep: { types: '`(stepsToSkip: number) => void`' },
+  },
+})

packages/docs/page-config/ui-elements/stepper/examples/Custom.vue

@@ -0,0 +1,118 @@
+<template>
+  <va-stepper
+    v-model="step"
+    :steps="steps"
+    color="danger"
+    controlsHidden
+  >
+    <template #divider>
+      <div class="divider gradient" />
+    </template>
+
+    <template
+      v-for="step, i in steps"
+      :key="step.label"
+      #[`step-button-${i}`]="{ setStep, isActive, isCompleted }"
+    >
+      <div
+        class="step-button"
+        :class="{
+          'step-button--active': isActive,
+          'step-button--completed': isCompleted,
+        }"
+        @click="setStep(i)"
+      >
+        <va-icon :name="step.icon" />
+        {{ step.label }}
+      </div>
+    </template>
+
+    <template #step-content-0>
+      <ul>
+        <li>Select a category</li>
+        <li>Browse products</li>
+        <li>Add to cart</li>
+      </ul>
+    </template>
+    <template #step-content-1>
+      <ul>
+        <li>Fill out shipping information</li>
+        <li>Choose payment method</li>
+      </ul>
+    </template>
+    <template #step-content-2>
+      <ul>
+        <li>View order summary</li>
+        <li>Edit shipping information</li>
+      </ul>
+    </template>
+    <template #step-content-3>
+      <ul>
+        <li>Review order details</li>
+        <li>Complete payment</li>
+      </ul>
+    </template>
+
+    <template #controls="{ nextStep, prevStep, setStep }">
+      <va-button @click="prevStep()">Previous</va-button>
+      <va-button @click="nextStep()">Next</va-button>
+      <va-button @click="setStep(steps.length - 1)">Go to last step</va-button>
+    </template>
+  </va-stepper>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import VaIcon from 'vuestic-ui/src/components/va-icon/VaIcon.vue'
+
+const step = ref(0)
+
+const steps = [
+  { label: 'Choose your product', icon: 'store' },
+  { label: 'Checkout', icon: 'local_shipping' },
+  { label: 'Review order', icon: 'done_all' },
+  { label: 'Confirm and pay', icon: 'payments' },
+]
+</script>
+
+<style scoped>
+
+.gradient {
+  background:
+    linear-gradient(
+      90deg,
+      rgb(131, 58, 180) 0%,
+      rgb(253, 29, 29) 50%,
+      rgb(241, 170, 48) 100%
+    );
+}
+
+.divider {
+  flex-grow: 1;
+  margin: 0 1rem;
+  height: 2px;
+  width: 2rem;
+  border-radius: 1rem;
+}
+
+.step-button {
+  display: flex;
+  gap: 1rem;
+  color: rgb(241, 170, 48);
+  cursor: pointer;
+  padding: 1rem;
+  transition: all 0.2s;
+}
+
+.step-button:hover {
+  color: rgb(253, 29, 29);
+}
+
+.step-button--active {
+  color: rgba(253, 29, 29);
+}
+
+.step-button--completed {
+  color: rgb(131, 58, 180);
+}
+</style>