Контракт переносимого UI

Приведённые ниже идентификаторы — канонические владельцы своих правил.

Переносимость

FE-PORT-001: переносимость по умолчанию

Соответствующий модуль работает с другой соответствующей темой фасада без правок модуля и без приватных для проекта классов фасада.

FE-STYLE-001: никакой зависимости от приватного фасада

Переносимые модули не могут требовать произвольных классов или селекторов, определённых только одним фасадом. Общие правила темы PrimeVue .p-* не являются приватными классами. Оформление вне PrimeVue, нужное одному модулю, принадлежит этому модулю, но его следует минимизировать, придерживаясь общих компонентов и семантики.

Когда одно и то же не-PrimeVue-оформление нужно нескольким вашим модулям, оно не принадлежит ни фасаду, ни каждому модулю: см. Слой дизайна.

Компоненты и аффорданс

FE-UI-001: используйте PrimeVue, если он покрывает элемент управления

Если PrimeVue предоставляет нужную семантику, взаимодействие и задуманный аффорданс, модуль обязан его использовать.

FE-UI-002: форма данных — не аффорданс

Способность представлять одни и те же значения не делает два элемента управления эквивалентными. SelectButton автоматически не заменяет скользящий трёхпозиционный переключатель, когда задуманный аффорданс визуально и поведенчески является переключателем.

FE-UI-003: одинаковая семантика и аффорданс означают одинаковый внешний вид

Эквивалентные элементы управления должны разделять размеры, отступы, цвета, типографику, границы, тени, поведение фокуса, наведения, отключённого и недопустимого состояний и анимации. Собственная композиция называет своего визуального родственника в PrimeVue и наследует каждое применимое общее рантайм-свойство.

FE-UI-004: отказ от PrimeVue — узкое исключение

PrimeVue можно не использовать, только когда модуль не отрисовывает ничего физически или семантически похожего на PrimeVue. Компонент только с графиком подходит; график с кнопкой или полем формы — нет.

FE-UI-005: никогда не выдумывайте API компонентов

Недокументированное свойство или поведение — не короткий путь. ToggleSwitch из PrimeVue не становится трёхпозиционным элементом управления от того, что вы придумали новое свойство positions. Когда ни один компонент или композиция PrimeVue не даёт нужного аффорданса, применяйте проверяемый процесс создания собственного родственника.

Tailwind и токены

FE-TW-001: Wippy Tailwind поддерживается

Общий пресет Wippy — поддерживаемый контракт времени сборки. Модули могут использовать его документированные утилиты и расширять его для доменной вёрстки, специфичных для приложения контрольных точек, оформления и новых визуализаций.

FE-TW-002: скомпилированные значения — не рантайм-токены

Утилиты вроде px-3, rounded-md и duration-200 обычно компилируются в константы. Они дают единообразную основу, но не меняются, когда фасад подменяет рантайм-переменные темы.

FE-TW-003: внешний вид общего родственника следует рантайм-семантике

Когда свойство внешнего вида должно следовать за родственником PrimeVue во всех темах, используйте документированную семантическую утилиту с рантайм-поддержкой или прямой публичный токен. Фиксированная утилита допустима только тогда, когда свойство явно классифицировано как platform-invariant.

FE-TW-004: защищённые сопоставления сохраняют свой смысл

Модули могут расширять пресет, но не могут несовместимо переопределять защищённую семантику primary, surface, severity, text, content, highlight или переносимых элементов управления.

FE-TOKEN-001: каждый токен должен существовать

Каждая ссылка --p-* должна присутствовать в выбранном сгенерированном манифесте.

FE-TOKEN-002: имена токенов — не угадываемое API

Никогда не конструируйте токен по аналогии. Ищите в Каталоге токенов или в манифесте выбранного пакета.

Доступность

Исключение для собственного элемента управления должно сохранять валидный HTML, взаимодействие с клавиатурой, фокус, доступное имя, состояние и поведение в отключённом состоянии. Интерактивные элементы не должны быть вложенными.