VueCraft NPM

UI-темы ​

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

Тема Tailwind UI ​

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

ts
import { TailwindFormRenderer } from '@macrulez/vue-form-schema/ui/tailwind'
vue
<!-- Та же форма, та же схема — просто замените рендерер -->
<TailwindFormRenderer :form="form" submit-label="Save" />

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

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

Темы shadcn / PrimeVue / Naive UI ​

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

ts
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'
vue
<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 } }) или свой пресет). Стили самой dropzone для загрузки файлов поставляются как vue-form-schema/style.css — импортируйте их один раз наряду с собственной темой PrimeVue.
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).