Туры. Они должны описывать:

- какие шаги есть;
- какой элемент подсвечивать;
- какие события ждать;
- какие действия выполнять до/после шага.

Например:
```
resources/js/Tours
├── index.js
├── welcomeDuty.js
└── report.js
```

```Tours/index.js```
```js
import welcomeDuty from "./welcomeDuty"
import report from "./report"


export default {
    welcomeDuty,
    report
}
```

Пример простого тура

```Tours/welcomeDuty.js```

```js
export default {
    id: "welcomeDuty",
    name: "Первое знакомство с дежурством",
    steps: [
        {
            id: "department",
            target: "#modal-select-user-department",
            title: "Выберите отделение",
            description: "Начните вводить название отделения и выберите его из списка.",
            placement: "right",
            highlight: true,
            scroll: true,
            allowInteraction: true,
            nextEvent: "department:selected"
        },
        {
            id: "doctor",
            target: "#modal-select-user-doctor",
            title: "Выберите врача",
            description: "Теперь выберите ответственного врача.",
            placement: "bottom",
            highlight: true,
            allowInteraction: true,
            nextEvent: "doctor:selected"
        },
        {
            id: "finish",
            target: "#duty-create-button",
            title: "Создание дежурства",
            description: "После заполнения всех полей нажмите кнопку создания.",
            placement: "top",
            highlight: true,
            allowInteraction: true
        }
    ]
}
```
Пример с переходом между страницами

Например, первый шаг в модалке, второй на странице отчёта:

```Tours/report.js```

```js
export default {
    id: "report",
    name: "Создание отчёта",
    steps: [
        {
            id: "open-report",
            route: "reports.create",
            target: "#report-date",
            title: "Дата отчёта",
            description: "Выберите период формирования отчёта.",
            placement: "bottom",
            scroll: true,
            highlight: true
        },
        {
            id: "department-filter",
            target: "#department-filter",
            title: "Фильтр отделения",
            description: "Можно ограничить отчёт конкретным отделением.",
            placement: "right",
            nextEvent: "filter:selected"
        },
        {
            id: "export",
            target: "#export-report",
            title: "Экспорт",
            description: "Нажмите кнопку для выгрузки отчёта.",
            placement: "left"
        }
    ]
}
```
```Шаг с логикой```

Например, перед открытием модалки:

```js
{
    id: "open-user-modal",
    title: "Добавление пользователя",
    description: "Сначала откройте форму.",
    beforeEnter() {
        userModal.value = true
    },
    target: "#user-modal"
}
```

```Шаг с проверкой перед переходом```

Например форма:

```js
{
    id: "save-user",
    target: "#save-user-button",
    title: "Сохранение",
    description: "Заполните обязательные поля.",
    beforeNext() {
        return form.validate()
    }
}
```

```Шаг с ручным управлением```

Например поле нельзя пропустить:

```js
{
    id: "confirm",
    target: "#confirm-checkbox",
    title: "Подтвердите",
    description: "Необходимо поставить галочку.",
    manual: true,
    nextEvent: "confirmed"
}
```

И компонент:

```js
onboarding.emit(
    "confirmed"
)
```
переведёт дальше.