@verdeect/identity-nav-vue

@verdeect/identity-nav-vue

Компоненты кросс-сервисной навигации Verdeect Identity и вывод состояния рейла для продуктов установки и лендингов на Vue 3, а для продуктов не на Vue — готовым пользовательским элементом.

Эталон живёт здесь. Компоненты рейла и блока пользователя не пишутся заново и не копируются в продукты: копия породила бы вторую версию, расходящуюся с эталоном на первом изменении. Правка идёт в этот пакет, продукты получают её обновлением зависимости.

Два режима подключения

Пакет подключается одним из двух способов, и первым делом определите свой. Компоненты навигации в обоих одни и те же — различается то, откуда приходят данные и что из компонентов доступно.

Как понять, какой у вас режим. Есть серверная часть и пользователи входят через identity — режим продукта установки: данные рейла готовит бэкенд, и токены живут только там. Статическая страница без входа — лендинг, промо-сайт, — режим лендинга без бэкенда: состав рейла браузер берёт у identity сам, без токена, а блока пользователя нет.

Второго комплекта компонентов для лендингов нет и не будет: копия разошлась бы с эталоном на первой правке.

Продукт не на Vue (Svelte, React, страница без сборщика) берёт вход ./element, то есть собранный пользовательский элемент <verdeect-identity-nav> с теми же компонентами внутри. Данные ему готовит бэкенд продукта, как в режиме продукта установки. Подробно — Пользовательский элемент.

Входы

Одноранговые зависимости, кроме vue, объявлены необязательными. Продукт не на Inertia потребляет ./identity напрямую и @inertiajs/vue3 не ставит; лендинг берёт ./public и тоже его не ставит; ./playwright нужен только прогонам.

Быстрый старт

npm install @verdeect/identity-nav-vue

Продукт установки

Три шага, без которых рейл не заработает:

1. Импортировать стили: @import '@verdeect/identity-nav-vue/style.css' (Установка). Шрифта иконок пакет не требует: иконки пунктов приходят файлами, значки блока пользователя встроены.
2. Смонтировать два вида навигации — полосу и один мобильный — и передать в оба currentUrl (Встраивание).
3. Написать правила переключения видов со своим порогом и вне @layer (Оформление).

Тёмная тема

У навигации две палитры — светлая и тёмная, обе по макету и одинаковые во всех продуктах установки. Тёмная включается вместе с темой продукта:

• продукт на Vue и лендинг — класс .app-dark на <html>. Оболочка Sakai ставит его своим переключателем сама, и делать ничего не нужно;
• продукт не на Vue — свойство theme элемента: nav.theme = 'dark' либо theme="dark" в разметке. Класс на <html> в теневой корень не виден, поэтому тему передают явно.

Цвета под палитру продукта не подгоняются — выбирается вариант, а не цвета (Тёмная тема).

Какой компонент для чего

Мобильные виды взаимоисключающие — это два ответа на один вопрос, а не два блока рядом. Плашка внизу подходит не всякой оболочке: она постоянно отнимает у содержимого свою высоту и спорит с собственной нижней панелью продукта. Есть выдвижное меню — берите CrossServiceMenu; переходы между сервисами часты — плашку. Пакет за продукт не выбирает.

Данные берутся из useIdentity() (Inertia) либо useIdentityView() (любой другой стек) — Состояние рейла.

Лендинг без бэкенда

1. Попросить администратора установки включить публичную операцию (IDENTITY_NAVIGATION_PUBLIC_ENABLED) и отметить нужные пункты аудиторией «гость».
2. Импортировать стили — как у продукта.
3. Получить данные usePublicNavigation({ baseUrl, locale, path }) из входа ./public и смонтировать CrossServiceRail и один мобильный вид под v-if="hasRail", без profileUrl и без UserMenu.
4. Написать правила переключения видов и сдвиг вёрстки со своим порогом.

Подробно, с примером и таблицей отказов — Лендинг без бэкенда.

Пакет поставляется исходниками, без шага сборки: собирает их Vite потребителя. Единственное исключение — вход ./element: он собирается при упаковке пакета, потому что продукту не на Vue исходники .vue взять нечем.

Документация

Проверки

npm test

Пять шагов: полнота словаря подписей, изоляция каталога компонентов (включая условия «ядро разбирается без Inertia», «конструкций бандлера внутри нет», границы адаптера публичной навигации — единственного места с сетевым запросом — и границы входа элемента), типы исходников и наборов, сборка dist/element.js и наборы правил прямыми вызовами, включая проверку собранного файла.

Браузер не поднимается ни одним набором: @playwright/test служит прогонщиком Node. Отдельного прогонщика ради этого не заводится — Playwright уже нужен входу ./playwright.

Разметку наборы пакета не проверяют — прогонщик не разбирает .vue. Что компоненты рисуют, проверяют браузерные сценарии продуктов (Тестирование).

Происхождение эталона

Каталог компонентов и визуальный слой перенесены из репозитория verdeect-identity-service, коммит c3b7f14d6195e9abd9b88d0b5c249302aefee48c от 2026-09-08.

Разбор расхождений при переносе

К моменту переноса файлы существовали в трёх копиях — эталон установки, копия внутри composer-пакета и копия сервиса уборки. Расхождения разобраны по одному.

Компоненты (.vue, .ts). Эталон и копия сервиса совпадали знак в знак; копия composer-пакета отстала на два коммита эталона и отброшена целиком.

Визуальный слой (style.css). Код совпадал: правки размеров рейла в пикселях (кадры макета 2a и 2c) к моменту переноса были и в эталоне. Расходился один докблок — о том, почему плашка иконки закреплена классом предка. Взята формулировка эталона: она объясняет причину через порядок загрузки файлов у произвольного продукта, тогда как формулировка сервиса описывала расстановку файлов конкретной установки и в библиотеке была бы неверна.

Копий не осталось ни одной. После перевода обоих продуктов проверено поиском по трём рабочим деревьям: файлов компонентов, стилей рейла и класса cross-service-nav вне этого пакета нет.

Вместе с компонентами сюда переехали и их проверки: полнота словаря, изоляция каталога и правило подсветки текущего пункта. В продуктах остались только проверки встраивания.

Правки при переносе — только докблоки, ни одного правила стиля и ни одной строки кода. В cross-service/index.ts и в заголовке style.css переезд в пакет описан как состоявшийся, а ссылка на проверку изоляции указывает на scripts/check-component-isolation.mjs вместо PHP-набора, которого в этом репозитории нет.