onboard/resources/js/Tours

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

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

Например:

resources/js/Tours
├── index.js
├── welcomeDuty.js
└── report.js

Tours/index.js

import welcomeDuty from "./welcomeDuty"
import report from "./report"


export default {
    welcomeDuty,
    report
}

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

Tours/welcomeDuty.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

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"
        }
    ]
}

Шаг с логикой

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

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

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

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

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

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

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

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

И компонент:

onboarding.emit(
    "confirmed"
)

переведёт дальше.