SStepper

Индикатор шагов многошагового сценария (мастер, воронка): пройденные шаги отмечаются галочкой и позволяют вернуться назад кликом, будущие шаги открываются самим сценарием.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Формат шагов взаимозаменяем с опциями SSelect и SRadioGroup — те же map/массивы, ничего не нужно переформатировать.
2. Навигация ограничена пройденными шагами из коробки: движение вперёд контролирует сценарий, а не пользователь.

Базовый пример

✓Понимание тематики

✓Тематические сайты

3Предпросмотр

<SStepper v-model="step" :options="steps" />

<template>
    <SStepper v-model="step" :options="steps" />
</template>

<script setup>
import { ref } from 'vue'
import { SStepper } from 'startup-ui'

const steps = { understand: 'Понимание тематики', sites: 'Тематические сайты', preview: 'Предпросмотр' }
const step = ref('preview')
</script>

Шаги до текущего считаются пройденными: получают галочку и становятся кликабельными — клик возвращает модель на выбранный шаг. Шаги после текущего неактивны.

Массив строк

Если значения шагов не нужны, достаточно массива строк — значением модели будет сама строка:

✓Загрузка

2Предпросмотр

3Готово

<SStepper v-model="step" :options="['Загрузка', 'Предпросмотр', 'Готово']" />

<template>
    <SStepper v-model="step" :options="['Загрузка', 'Предпросмотр', 'Готово']" />
</template>

<script setup>
import { ref } from 'vue'
import { SStepper } from 'startup-ui'

const step = ref('Предпросмотр')
</script>

Интерфейс компонента

Свойства (Props)

Название	Тип	По умолчанию	Описание
v-model	any	undefined	Значение текущего шага. Если значение не найдено среди шагов, активным считается первый шаг.
options	Record | Array	{}	Шаги (объект {value: title}, массив [[value, title]], массив объектов {value, label} или массив строк).

События (Emits)

Название	Payload	Описание
update:modelValue	any	Клик по пройденному шагу — возврат на него.