Vue AutoForm

Vue AutoForm — компонент на Vue 3 (Composition API), который динамически строит форму на основе переданной JSON-схемы. Форма поддерживает основные типы полей и минимальную валидацию, а данные пользователя автоматически синхронизируются с реактивной моделью.

---

📋 Описание

Компонент FormGenerator генерирует форму динамически по переданному JSON-объекту. Все изменения в полях формы реактивно отражаются в объекте данных, переданном через v-model.

Поддерживаемые типы полей

• Текстовые поля: text, email, password
• Выпадающий список: select (с массивом опций)
• Чекбокс: checkbox

Валидация

Реализована минимальная валидация с поддержкой следующих правил:

• required — обязательное поле
• minLength — минимальная длина строки
• pattern — регулярное выражение для проверки формата

Валидация срабатывает при потере фокуса (blur) и отображает сообщения об ошибках под соответствующими полями.

---

🚀 Инструкция по запуску

Требования

• Node.js (версия 16 или выше)
• npm или yarn

Установка и запуск

1. Установите зависимости:

   npm install

2. Запустите dev-сервер:

   npm run dev

   Приложение будет доступно по адресу http://localhost:5173 (или другому порту, указанному Vite).

3. Сборка для production (опционально):

   npm run build

---

🌎 Демо

Посмотреть в режиме реального времени

---

Параметры поля

Параметр	Тип	Обязательный	Описание
type	string	✅	Тип поля: text, email, password, select, checkbox
label	string	✅	Подпись поля
model	string	✅	Уникальное имя поля в модели данных
required	boolean	❌	Обязательное поле (по умолчанию false)
minLength	number	❌	Минимальная длина (только для строковых полей)
pattern	string	❌	Регулярное выражение для валидации
options	array	✅ для select	Массив опций для выпадающего списка
placeholder	string	❌	Подсказка в поле ввода

---

📁 Структура проекта

vue-autoform/
├── src/
│   ├── components/
│   │   └── FormGenerator.vue    # Основной компонент формы
│   ├── composables/
│   │   └── useValidation.js     # Композабл для валидации
│   ├── App.vue                   # Демо-приложение
│   ├── main.js                   # Точка входа
│   └── style.css                 # Глобальные стили
├── package.json
├── vite.config.js
└── README.md

---

✨ Особенности реализации

• ✅ Реактивность: Данные формы автоматически синхронизируются с объектом через v-model
• ✅ Валидация: Проверка полей при потере фокуса с отображением ошибок
• ✅ Composition API: Использование современного подхода Vue 3
• ✅ Типизация: Поддержка различных типов полей с соответствующими HTML-элементами
• ✅ Адаптивность: Базовая адаптивная верстка для мобильных устройств
• ✅ UX: Плавные анимации появления ошибок и визуальная обратная связь

---

🎯 Пример из ТЗ

Демо-приложение (App.vue) содержит пример использования компонента с JSON-схемой из технического задания. Вы можете редактировать схему прямо в интерфейсе и видеть, как форма обновляется динамически.

---

📝 Технологии

• Vue 3 (Composition API)
• Vite (сборщик)
• Vanilla CSS (стилизация)

---

📄 Лицензия

Проект создан в рамках тестового задания.