@application-kit/ui

Vue-обёртки над UI-вендором, мост токенов оформления (--p-* → --ui-*) и помощники спеков. Пакет не знает ни одного имени иконки и feature-flag'а продукта: их приложение передаёт при установке плагина. Тексты обёрток и локаль вендора для ru и en — в пакете, приложение может их переопределить.

import { UiVendorPlugin } from '@application-kit/ui'
import '@application-kit/ui/style.css'

app.use(new UiVendorPlugin({
  darkModeSelector: 'dark-theme',
  describeRequestError: (error, fallbackMessage) => describe(error, fallbackMessage, i18n.global.t),
  iconClass: (name) => `app-icon app-icon--${name}`,
  locale: { reference: (vue) => localeRef },
}))

Все три обязательные опции (darkModeSelector, describeRequestError, iconClass) проверяются типом и при создании плагина: без них конструктор бросает ошибку на старте приложения.

Тексты и локаль

Без опции messages обёртки берут DEFAULT_UI_MESSAGES по локали из locale.reference; неизвестная локаль и приложение без locale получают английские. Переданная messages заменяет их целиком, для другого языка или одной фразы её удобно собрать из пакетных:

messages: () => ({ ...defaultUiMessages(localeRef.value), table: { ...defaultUiMessages(localeRef.value).table, empty: '—' } })

Подписи самого вендора (календарь, кнопки подтверждения) для ru тоже в пакете; locale.overrides перекрывает их поштучно: { reference, overrides: { ru: { accept: 'Ок' } } }.

Тёмная тема

useDarkMode() отдаёт { isDark, toggle }. Источник правды — класс darkModeSelector на <html>, состояние одно на приложение. Класс читается при монтировании, поэтому первый рендер (сервер и гидрация) идёт со светлой темой.

Имена иконок

Реестр пустой — приложение расширяет его своими именами, и без этого ни одна иконка не компилируется:

declare module '@application-kit/ui' {
  interface UiIconRegistryInterface { refresh: true }
}

Входы

• . — компоненты, composables (действия с флагом ожидания — useAsyncAction, useOptimisticRowActions: текст отказа собирает describeRequestError приложения, ключи сообщений — параметром), UiVendorPlugin, листинговые сторы, типы;
• /testing — installVendorPlugins, submitForm, заглушки браузерных API для jsdom;
• /lint — данные вендора для ESLint потребителя без Vue и стилей: шаблоны импорта и CSS-класса, подпути вендора, имена обёрток полей для label-has-for (их собирает @application-kit/lint-config);
• /style.css — стили компонентов (подключить один раз);
• /styles/tokens.scss — мост токенов: приложение сверяет по нему свои var(--ui-*).

Peer-зависимости

vue, pinia, vue-router, openvue — по одному экземпляру на приложение; vitest нужен только для /testing.