UI-темы

Компонент FormRenderer

import { FormRenderer } from '@macrulez/vue-form-schema/ui'

Пропсы

Проп	Тип	По умолчанию	Описание
form	UseFormReturn	—	Возвращаемое значение useForm
components	Partial<Record<FieldType, Component>>	встроенные	Переопределить рендереры по типу
submitLabel	string	'Submit'	Текст кнопки отправки

Слоты

Слот	Область видимости	Описание
#field-{name}	{ field, value, error, touched, setValue, touch }	Заменить поле целиком
#label-{name}	{ field }	Заменить метку
#error-{name}	{ field, error }	Заменить отображение ошибки
#submit	{ isSubmitting, isValid }	Заменить кнопку отправки

Встроенные компоненты полей

Все экспортированы по отдельности из vue-form-schema/ui:

Компонент	Типы полей
TextField	text, email
NumberField	number
TextareaField	textarea
SelectField	select
CheckboxField	checkbox
RadioField	radio
DateField	date
ArrayField	array
FileField	file

Тема Tailwind UI

Готовая замена FormRenderer на утилитарных классах Tailwind — никакого кастомного CSS в вашем приложении не нужно. Требует установленный и настроенный на сканирование исходников библиотеки Tailwind CSS.

import { TailwindFormRenderer } from '@macrulez/vue-form-schema/ui/tailwind'

<!-- Та же форма, та же схема — просто замените рендерер -->
<TailwindFormRenderer :form="form" submit-label="Save" />

Все компоненты полей также экспортированы по отдельности:

import {
  TwTextField,
  TwSelectField,
  TwCheckboxField,
  TwRadioField,
  TwFileField,
  TwArrayField,
  // …
} from '@macrulez/vue-form-schema/ui/tailwind'

Темы shadcn / PrimeVue / Naive UI

Ещё три готовые замены FormRenderer для популярных библиотек компонентов — та же схема, тот же useForm, просто смените рендерер.

import { ShadcnFormRenderer } from '@macrulez/vue-form-schema/ui/shadcn'
import { PrimeVueFormRenderer } from '@macrulez/vue-form-schema/ui/primevue'
import { NaiveFormRenderer } from '@macrulez/vue-form-schema/ui/naive'

<ShadcnFormRenderer :form="form" submit-label="Save" />
<PrimeVueFormRenderer :form="form" submit-label="Save" />
<NaiveFormRenderer :form="form" submit-label="Save" />

Тема	Что это на самом деле
ui/shadcn	Не обёртка вокруг импортируемых компонентов shadcn-vue — shadcn-vue поставляется как copy-paste исходники через свой CLI, а не как npm-библиотека компонентов, так что импортировать нечего. Эта тема — Tailwind-разметка, стилизованная собственным словарём utility-классов shadcn/ui (border-input, bg-primary, text-destructive, ring-ring, …). Подключите её в проект, где уже настроены токены темы Tailwind от shadcn-vue (npx shadcn-vue init), и она впишется нативно — то же требование, что и у ui/tailwind для самого Tailwind CSS.
ui/primevue	Настоящие компоненты-обёртки вокруг собственных компонентов PrimeVue (InputText, Select, RadioButton, Checkbox, DatePicker, Message, Button, …). Требует установленный primevue ^4 или ^5 и зарегистрированный его Vue-плагин (app.use(PrimeVue, { theme: { preset: Aura } }) или свой пресет).
ui/naive	Настоящие компоненты-обёртки вокруг собственных компонентов Naive UI (NInput, NSelect, NRadioGroup, NCheckbox, NDatePicker, NFormItem, NButton, …). Требует установленный naive-ui ^2.38; глобальный плагин не нужен.

Поля файлов в темах PrimeVue и Naive UI используют небольшую самодостаточную нативную dropzone вместо <FileUpload> / <NUpload> — эти компоненты построены вокруг активной загрузки на сервер, а не просто сбора объектов File для последующей отправки формы.

Все компоненты полей также экспортированы по отдельности для каждой темы, с префиксом Sh* / Pv* / Nu* соответственно (например, ShTextField, PvSelectField, NuCheckboxField).

Доступность

Все встроенные компоненты полей включают полный набор атрибутов a11y:

Возможность	Как
aria-required	Устанавливается в "true" на обязательных input, select, textarea, fieldset
aria-invalid	Устанавливается в "true", когда поле touched и есть ошибки
aria-describedby	Указывает на "{name}-error", когда есть ошибки
role="alert" + aria-live="polite"	Списки ошибок озвучиваются скринридерами при появлении
label[for] + input[id]	Все input имеют соответствующие label и id
fieldset + legend	Группы radio используют семантическую группировку
aria-checked	Чекбоксы явно отражают булево состояние

Совместимость с SSR

Ядро (useForm, валидаторы, парсеры, ConditionEvaluator) не использует browser API. bindMask и FormRenderer используют DOM API — оборачивайте их в onMounted или <ClientOnly>, когда нужно.