@feugene/granularity-forms-schema

@feugene/granularity-forms-schema

Форма из схемы бэкенда для дизайн-системы @feugene/granularity: zod или JSON Schema на входе — настоящие поля дизайн-системы на выходе. Ни одной зависимости.

yarn add @feugene/granularity-forms-schema

<script setup lang="ts">
import { GrSchemaForm } from '@feugene/granularity-forms-schema/components/GrSchemaForm'
import { zodAdapter } from '@feugene/granularity-forms-schema/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  age: z.number().int().min(18),
})

const model = ref({})
</script>

<template>
  <GrSchemaForm v-model="model" :schema="schema" :adapters="[zodAdapter]" @submit="save" />
</template>

Что внутри

Пакет ничего не рисует сам

Кроме сетки колонок. Оркестрацию даёт GrForm, обвязку и доступность — GrFormField, разделы — GrFormSection, ввод — контролы ядра. Поэтому сгенерированная форма выглядит и ведёт себя ровно как написанная руками.

Вес гранулярного импорта

Числа не складываются: общий код посчитан в каждой строке заново, а платится один раз — поэтому набор компонентов и показан объединением, а не суммой. Это верхняя граница: gzip всего, что подпуть тянет из dist, а бандлер приложения трясёт дальше и минифицирует повторно.

Вес каждого компонента — docs/entry-sizes.md.

Документация

• Компоненты
• Нейтральная модель
• Реестр рендереров
• uiSchema
• Валидация
• Доступность
• Серверный рендер

Лицензия

См. LICENSE.