FormBuilder

Конструктор

Пункт палитры перетаскивается на холст или в группу, карточка поля — между группами. Перенос с чужими данными (текст, файл) холст не принимает.

Конструктор форм

Без изменений

Ввод

Текст
Текстовое поле
Число
Выбор цвета
Ползунок
Теги
PIN-код
Рейтинг

Выбор

Выпадающий список
Меню выбора
Чекбокс
Группа чекбоксов
Радиокнопки
Переключатель
Автокомплит
Каскадер
Список
Дерево

Дата и время

Календарь
Диапазон дат
Время
Дата и время

Загрузка

Загрузка файлов

Редактор

Текстовый редактор
Основная информация
Имя

Добавить подсказку

Email

Добавить подсказку

Контакты
Телефон

Добавить подсказку

Колонок в сетке формы: 2 из 6

Выберите поле на холсте, чтобы изменить его свойства

Сохранено: —

Сетка

Четыре колонки в корне: поле и группа по две колонки стоят в одной строке. Группа в три колонки не помещается в остаток строки и переносится целиком. Число колонок формы меняется ползунком в настройках справа, когда ничего не выбрано.

Сетка из четырёх колонок

Без изменений

Ввод

Текст
Текстовое поле
Число
Выбор цвета
Ползунок
Теги
PIN-код
Рейтинг

Выбор

Выпадающий список
Меню выбора
Чекбокс
Группа чекбоксов
Радиокнопки
Переключатель
Автокомплит
Каскадер
Список
Дерево

Дата и время

Календарь
Диапазон дат
Время
Дата и время

Загрузка

Загрузка файлов

Редактор

Текстовый редактор
Сетка
Левая половина

Добавить подсказку

Правая половина
Внутри A

Добавить подсказку

Внутри B

Добавить подсказку

Три колонки

Добавить подсказку

Переносится
Глубокое

Добавить подсказку

Колонок в сетке формы: 4 из 6

Выберите поле на холсте, чтобы изменить его свойства

Только чтение

Палитра, панель свойств и история скрыты, карточки не перетаскиваются, а холст не становится зоной приёма: даже перенос из соседнего конструктора в него не попадает. Сохранение и экспорт JSON остаются доступны.

Конструктор только для чтения

Без изменений
Утверждённая форма
Город

Добавить подсказку

Согласие

Добавить подсказку

Заметки
Группа пуста

Шаблоны и автосохранение

Пустой холст предлагает три способа старта: шаблон, пустое поле или JSON. С autosave схема уходит в save после паузы в правках, а индикатор в шапке показывает «Есть изменения» и «Сохранено в ЧЧ:ММ».

Конструктор форм

Без изменений

Ввод

Текст
Текстовое поле
Число
Выбор цвета
Ползунок
Теги
PIN-код
Рейтинг

Выбор

Выпадающий список
Меню выбора
Чекбокс
Группа чекбоксов
Радиокнопки
Переключатель
Автокомплит
Каскадер
Список
Дерево

Дата и время

Календарь
Диапазон дат
Время
Дата и время

Загрузка

Загрузка файлов

Редактор

Текстовый редактор

С чего начать

Возьмите готовый шаблон, добавьте поле или вставьте JSON-схему.

Основное
Перетащите поле сюда или нажмите «+» в заголовке группы

Колонок в сетке формы: 1 из 6

Выберите поле на холсте, чтобы изменить его свойства

Автосохранений: 0

Входные параметры

ИмяТипПо умолчаниюОписание
modelValueC3FormSchema—Схема формы (v-model). Конструктор работает со своей копией и публикует каждую правку наружу.
readOnlybooleanfalseРежим просмотра: палитра, панель свойств, история, действия карточек и приём переноса выключены; сохранение и экспорт JSON остаются.
availableComponentsC3ComponentDefinition[]() => []Состав палитры. Пусто — стандартный набор из 24 типов полей.
onSave(schema: C3FormSchema) => void() => {}Колбэк сохранения: вызывается вместе с событием save после проверки схемы.
autosavebooleanfalseАвтосохранение: после паузы в правках конструктор сам отдаёт save, без тоста.
autosaveDelaynumber800Пауза перед change и автосохранением, мс.

События: update:modelValue — каждая правка схемы и одно событие при монтировании; change — дебаунс после последней правки; save и saved — снимок после валидации (по кнопке, Ctrl+S или автосохранением).

Описание

C3FormBuilder — визуальный конструктор форм: палитра компонентов слева, холст с группами полей в центре, панель свойств справа. Три режима просмотра — Canvas, Предпросмотр (форма рендерится через C3DynamicForm) и JSON с валидацией схемы перед применением.

Холст — это сама форма: подпись и подсказка правятся на карточке через C3InlineEditable, по краям карточек есть полосы вставки, а ошибки схемы (validateFormSchema) видны сразу — в шапке счётчик и список с переходом к полю.

Схема собирается из групп и полей (C3FormGroup, C3FormFieldSchema), режим Мастер добавляет шаги, а история правок отменяется через Ctrl+Z и возвращается через Ctrl+Shift+Z или Ctrl+Y.

Дополнительная информация

  • Перенос: пункт палитры и карточка поля кладут JSON в dataTransfer под MIME application/x-c3-form-builder. Зона приёма отменяет dragover только для этого MIME, поэтому чужой текст или файл на холст не попадает.
  • Клик по пункту палитры добавляет поле в активную группу без переноса; кнопка «+» в группе добавляет текстовое поле, «Клонировать группу» и «Удалить» работают из её заголовка.
  • Полосы вставки по краям карточек и «+» в них ставят поле на нужную позицию; вложенные группы принимают элемент на свою позицию так же.
  • Клавиатура: Enter на карточке — правка подписи, Delete — удалить, Alt+↑/Alt+↓ — переместить, ↑/↓ — переход между полями, Ctrl/Cmd+K — командная палитра, Ctrl/Cmd+D — дублировать, Ctrl/Cmd+S — сохранить, Ctrl/Cmd+Z — отменить, Ctrl/Cmd+Shift+Z и Ctrl+Y — повторить, Escape — снять выделение.
  • Слот #actions — дополнительные кнопки в правой части верхней панели.
  • Панель свойств без выделения показывает настройки формы в одиночном режиме: заголовок, подписи кнопок и колонки сетки ползунком 1–6; в режиме «Мастер» здесь редактор шагов. Колонки вложенной группы — в её разделе «Сетка». Остальные настройки разложены на «Основное» и свёрнутое «Дополнительно»: сетка, поведение, логика, валидация и справочник помечаются точкой, когда в схеме уже есть соответствующая настройка. На узком экране панель стартует свёрнутой.
  • Экспорт/импорт схемы — файлом JSON; импорт проходит ту же валидацию, что и применение из текстового режима.
  • Стили — assets/styles/components/form-builder.scss, только переменные --c3-*.
×