@application-kit/ui

@application-kit/ui

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

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: { overrides: { ru: { accept: 'Да' } }, reference: (vue) => localeRef },
  messages: () => ({ table: { empty: i18n.global.t('table.empty'), /* … */ } /* … */ }),
}))

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

Имена иконок

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

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

Входы

• . — компоненты, composables, 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.