Vue3 Form Generator

Гибкий генератор форм для Vue 3 с поддержкой TypeScript, валидацией, состоянием и кастомизацией.

🎮 Demo

• Ознакомьтесь с демонстрацией: Vue3 Form Generator

The demo showcases real-time calendar interactions with locale switching, date selection, and event logging.

• Vue3 Form Generator
  • 🎮 Demo
  • 🎯 Особенности
  • 📦 Установка
  • 🚀 Быстрый старт
    • Базовое использование
  • 📚 Документация
    • FormConfig
    • FormField
    • Слоты (Slots)
    • Управление состоянием через Store
  • 🏗️ Архитектура
  • 🧪 Тестирование
  • 🎨 Кастомизация стилей
  • 📱 Responsive дизайн
  • ♿ Доступность
  • 🔒 Безопасность
  • 📈 Производительность
  • 📄 Лицензия

🎯 Особенности

✅ Множество типов полей - input, select, checkbox, textarea с полной поддержкой атрибутов
✅ Встроенная валидация - required, minLength, maxLength, pattern с кастомными сообщениями
✅ Управление состоянием - Pinia store для синхронизации нескольких форм
✅ Кастомизация через слоты - переопределяйте любую часть формы
✅ TypeScript - полная типизация для надежности
✅ Производительность - code splitting, lazy loading, оптимизированный рендеринг
✅ Доступность - правильная семантика HTML, ARIA атрибуты
✅ Тестирование - unit тесты с Vitest
✅ Мобильная оптимизация - responsive дизайн, touch-friendly интерфейс

📦 Установка

# Клонирование репозитория
git clone vue3-form-generator
cd vue3-form-generator

# Установка зависимостей
yarn install

# Запуск dev сервера
yarn run dev

# Сборка для продакшена
yarn run build

# Запуск тестов
yarn test

🚀 Быстрый старт

Базовое использование

<template>
  <FormGenerator
    :config="formConfig"
    :model-value="formValues"
    @update:model-value="formValues = $event"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FormGenerator from '@/components/FormGenerator.vue'
import type { FormConfig, FormValues } from '@/types'

const formConfig: FormConfig = {
  id: 'contact-form',
  title: 'Контактная форма',
  fields: [
    {
      id: 'name',
      type: 'input',
      label: 'Имя',
      required: true,
      minLength: 2
    },
    {
      id: 'email',
      type: 'input',
      label: 'Email',
      required: true,
      pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
      attributes: { type: 'email' }
    },
    {
      id: 'message',
      type: 'textarea',
      label: 'Сообщение',
      required: true
    }
  ]
}

const formValues = ref<FormValues>({})

const handleSubmit = (values: FormValues) => {
  console.log('Форма отправлена:', values)
}
</script>

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

FormConfig

Основная конфигурация формы:

interface FormConfig {
  id: string;                  // Уникальный ID формы
  title?: string;              // Заголовок формы
  description?: string;        // Описание формы
  fields: FormField[];         // Массив полей
  submitLabel?: string;        // Текст кнопки отправки
  cancelLabel?: string;        // Текст кнопки отмены
  containerClass?: string;     // CSS класс контейнера
}

FormField

Конфигурация отдельного поля:

interface FormField {
  id: string;                  // Уникальный ID поля
  type: 'input' | 'select' | 'checkbox' | 'textarea';
  label: string;               // Отображаемый label
  required?: boolean;          // Обязательность заполнения
  pattern?: string;            // Regex паттерн для валидации
  errorMessage?: string;       // Кастомное сообщение об ошибке
  options?: SelectOption[];    // Опции для select
  placeholder?: string;        // Плейсхолдер
  disabled?: boolean;          // Отключение поля
  hint?: string;               // Подсказка для пользователя
  minLength?: number;          // Минимальная длина
  maxLength?: number;          // Максимальная длина
  className?: string;          // CSS классы
  attributes?: Record<string, any>; // Дополнительные атрибуты
}

Слоты (Slots)

Компонент поддерживает именованные слоты для полной кастомизации:

<FormGenerator :config="config">
  <!-- Кастомный header -->
  <template #header="{ config }">
    <custom-header :title="config.title" />
  </template>

  <!-- Кастомное поле -->
  <template #field-email-label="{ label }">
    <span class="custom-label">{{ label }} 📧</span>
  </template>

  <!-- Кастомная ошибка -->
  <template #field-email-error="{ error }">
    <div class="custom-error">⚠️ {{ error }}</div>
  </template>

  <!-- Кастомные действия -->
  <template #actions="{ submit, cancel }">
    <button @click="submit">Отправить</button>
    <button @click="cancel">Отмена</button>
  </template>
</FormGenerator>

Управление состоянием через Store

import { useFormStore } from '@/stores/useFormStore'

const formStore = useFormStore()

// Инициализация формы
formStore.initializeForm(config, initialValues)

// Получение значений
const values = formStore.getFormValues(formId)

// Обновление значения
formStore.setFieldValue(formId, fieldId, newValue)

// Валидация
const isValid = formStore.validateFormByConfig(formId)

// Отправка
formStore.submitForm(formId)

// История отправок
console.log(formStore.submissionHistory)

🏗️ Архитектура

src/
├──  __tests__/                    # Unit тесты
├── components/
│   ├── FormGenerator.vue          # Основной компонент
│   └── FormField.vue              # Компонент поля
├── store/
│   └── useFormStore.ts            # Pinia store
├── types/
│   └── form.types.ts              # TypeScript типы
├── utils/
│   └── formValidation.ts          # Утилиты валидации
├── style/
│   ├── main.scss                  # Глобальные стили
│   ├── variables.scss             # CSS переменные
│   └── mixins.scss                # SCSS миксины
└── views/
    ├── HomeView.vue               # Главная страница
    ├── BasicFormDemo.vue          # Пример базовой формы
    ├── ComplexFormDemo.vue        # Пример сложной формы
    └── SlotCustomizationDemo.vue  # Пример с слотами

🧪 Тестирование

# Запуск всех тестов
yarn test

# Запуск с UI
yarn run test:ui

# Генерация отчета о покрытии
yarn run test:coverage

🎨 Кастомизация стилей

Все цвета и размеры определены в src/style/variables.scss:

$color-primary: #0052cc;
$color-error: #dc3545;
$font-size-base: 1rem;
$spacing-md: 1rem;

📱 Responsive дизайн

Компонент полностью оптимизирован для мобильных устройств:

• Адаптивные макеты
• Touch-friendly кнопки и элементы
• Оптимальные размеры шрифтов для мобильных
• Предотвращение zoom на iOS при фокусе на input

♿ Доступность

• Семантический HTML (labels, form, fieldset)
• ARIA атрибуты для скринридеров
• Правильный focus management
• Кастомные сообщения об ошибках
• Поддержка навигации по клавиатуре

🔒 Безопасность

• Полная типизация TypeScript
• Валидация на клиенте
• Правильное экранирование значений
• Защита от XSS атак

📈 Производительность

• Code splitting и lazy loading
• Оптимизированные компоненты
• Правильное управление памятью
• Минимизация перерендеров

📄 Лицензия

MIT License

Создано Vue 3 + TypeScript