Dynamic Form

Генерируйте формы по JSON-схеме полей. Поддерживает вложенные модели, маски, ввод по регулярному выражению, валюту, выбор даты и все компоненты ввода VeloxUI — внутри всё работает на VxForm.

Nested Model

Пути с точечной нотацией, например user.username, автоматически создают вложенные реактивные объекты.

Username

Password

Description

Optional, max 200 characters

<script setup>
const formRef = ref()
const model = reactive({
  user: { username: '', password: '' },
  description: '',
})

const fields = [
  {
    field: 'user.username',
    label: 'Username',
    placeholder: 'Enter username',
    rules: [
      { required: true, message: 'Username is required' },
      { min: 3, max: 20, message: '3-20 characters' },
      { type: 'alphanumeric', message: 'Letters and numbers only' },
    ],
  },
  {
    field: 'user.password',
    label: 'Password',
    type: 'password',
    placeholder: 'Enter password',
    rules: [{ required: true }, { min: 8, message: 'At least 8 characters' }],
  },
  {
    field: 'description',
    label: 'Description',
    type: 'textarea',
    rows: 3,
    help: 'Optional, max 200 characters',
    rules: [{ max: 200, message: 'Max 200 characters' }],
  },
]
</script>

<template>
  <VxDynamicForm ref="formRef" :fields="fields" :model="model">
    <template #actions="{ validate, reset }">
      <VxButton @click="validate()">Submit</VxButton>
      <VxButton variant="outline" @click="reset()">Reset</VxButton>
    </template>
  </VxDynamicForm>
</template>

All Field Types

Все поддерживаемые типы ввода в одной форме: text, password, textarea, mask, regex, currency, autocomplete, select, segment, radio, checkbox, switch, slider, rating, date, date-range, date-time, time, color.

Full Name

Email

Password

Bio

0 / 300

Phone

Credit Card

Zip Code

SSN

Hex Color Code

Only hex characters allowed

Salary

Price (EUR)

City

Role

Select a role

Plan

Gender

MaleFemaleOther

Skills

JavaScriptTypeScriptPythonGo

Newsletter

Agreement

I accept the terms and conditions

Experience (years)

Satisfaction

4

Birthday

Vacation Range

–

Appointment

Wake Up Time

Theme Color

#6366f1

<script setup>
const fields = [
  // ── Text Inputs ──
  { field: 'name', label: 'Full Name', clearable: true, trim: true, rules: { required: true } },
  { field: 'email', label: 'Email', type: 'email', clearable: true, rules: [{ required: true }, { type: 'email' }] },
  { field: 'password', label: 'Password', type: 'password', rules: [{ required: true }, { min: 8 }] },
  { field: 'bio', label: 'Bio', type: 'textarea', rows: 3, maxlength: 300, showWordLimit: true },

  // ── Masked Inputs ──
  { field: 'phone', label: 'Phone', type: 'tel', mask: '+# (###) ###-####' },
  { field: 'creditCard', label: 'Credit Card', mask: '#### #### #### ####' },
  { field: 'zipCode', label: 'Zip Code', mask: '#####' },
  { field: 'ssn', label: 'SSN', mask: '###-##-####' },

  // ── Regex-Restricted Input ──
  { field: 'hexCode', label: 'Hex Code', regex: /^#?[0-9A-Fa-f]{0,6}$/ },

  // ── Currency ──
  { field: 'salary', label: 'Salary (USD)', type: 'currency', currencyOptions: { prefix: '$ ', thousands: ',' } },
  { field: 'price', label: 'Price (EUR)', type: 'currency', currencyOptions: { prefix: '€ ', decimal: ',' } },

  // ── Autocomplete ──
  { field: 'city', label: 'City', type: 'autocomplete', options: ['New York', 'LA', 'Chicago', ...] },

  // ── Select ──
  { field: 'role', label: 'Role', type: 'select', options: [...], rules: { required: true } },

  // ── Segment ──
  { field: 'plan', label: 'Plan', type: 'segment', options: [...], defaultValue: 'free' },

  // ── Radio Group ──
  { field: 'gender', label: 'Gender', type: 'radio-group', options: [...] },

  // ── Checkbox Group ──
  { field: 'skills', label: 'Skills', type: 'checkbox-group', options: [...], defaultValue: [] },

  // ── Switch ──
  { field: 'newsletter', label: 'Newsletter', type: 'switch', defaultValue: true },

  // ── Checkbox ──
  { field: 'terms', label: 'Agreement', type: 'checkbox', placeholder: 'I accept the terms' },

  // ── Slider ──
  { field: 'experience', label: 'Experience', type: 'slider', props: { min: 0, max: 20, showInput: true } },

  // ── Rating ──
  { field: 'satisfaction', label: 'Satisfaction', type: 'rating', props: { allowHalf: true, showValue: true } },

  // ── Date & Time ──
  { field: 'birthday', label: 'Birthday', type: 'date', clearable: true },
  { field: 'vacation', label: 'Vacation Range', type: 'date-range', defaultValue: [] },
  { field: 'appointment', label: 'Appointment', type: 'date-time', clearable: true },
  { field: 'wakeUp', label: 'Wake Up Time', type: 'time', clearable: true },

  // ── Color Picker ──
  { field: 'theme', label: 'Theme Color', type: 'color', defaultValue: '#6366f1', props: { showInput: true } },
]
</script>

Grid Layout

Используйте columns и span у конкретного поля для многоколоночных форм. Маски и поля валюты тоже работают в сетке.

First Name

Last Name

Email

Phone

Salary

Department

Select

Start Date

Level

Notes

Active

<script setup>
const fields = [
  { field: 'firstName', label: 'First Name', rules: { required: true } },
  { field: 'lastName', label: 'Last Name', rules: { required: true } },
  { field: 'email', label: 'Email', type: 'email' },
  { field: 'phone', label: 'Phone', type: 'tel', mask: '+# (###) ###-####' },
  { field: 'salary', label: 'Salary', type: 'currency', currencyOptions: { prefix: '$ ' } },
  { field: 'department', label: 'Department', type: 'select', options: [...] },
  { field: 'startDate', label: 'Start Date', type: 'date' },
  { field: 'level', label: 'Level', type: 'segment', options: [...] },
  { field: 'notes', label: 'Notes', type: 'textarea', rows: 3, span: 2 }, // spans 2 columns
  { field: 'active', label: 'Active', type: 'switch', defaultValue: true },
]
</script>

<template>
  <VxDynamicForm :fields="fields" :columns="2" :gutter="20">
    <template #actions><VxButton>Submit</VxButton></template>
  </VxDynamicForm>
</template>

Conditional Fields

Используйте hidden: (model) => boolean, чтобы реактивно показывать и скрывать поля.

Account Type

Full Name

Email

<script setup>
const fields = [
  {
    field: 'accountType', label: 'Account Type', type: 'segment',
    options: [{ label: 'Personal', value: 'personal' }, { label: 'Business', value: 'business' }],
    defaultValue: 'personal',
  },
  { field: 'fullName', label: 'Full Name', hidden: (m) => m.accountType === 'business' },
  { field: 'companyName', label: 'Company', hidden: (m) => m.accountType !== 'business' },
  { field: 'taxId', label: 'Tax ID', mask: '##-#######', hidden: (m) => m.accountType !== 'business' },
  { field: 'email', label: 'Email', type: 'email' },
]
</script>

JSON from API

Загружайте схему полей динамически и мгновенно отрисовывайте форму.

<script setup>
const schema = ref(null)

// Fetched from API — all fields are plain JSON-serializable objects
// {
//   field: 'ticket.title', label: 'Title',
//   rules: [{ required: true, message: 'Title is required' }]
// }

async function loadSchema() {
  schema.value = await fetch('/api/form-schema').then(r => r.json())
}
</script>

<template>
  <VxButton v-if="!schema" @click="loadSchema">Load Schema</VxButton>
  <VxDynamicForm v-if="schema" :fields="schema">
    <template #actions="{ validate }">
      <VxButton @click="validate()">Submit</VxButton>
    </template>
  </VxDynamicForm>
</template>

Custom Field Slot

Переопределите отрисовку любого поля через именованный слот, соответствующий ключу поля.

<template>
  <VxDynamicForm :fields="fields">
    <!-- Override 'avatar' field with custom component -->
    <template #avatar="{ value, set }">
      <MyAvatarUploader :value="value" @change="set" />
    </template>

    <template #actions="{ validate }">
      <VxButton @click="validate()">Submit</VxButton>
    </template>
  </VxDynamicForm>
</template>

Props

Prop	Type	Default	Description
fields	DynamicFormField[]	обязательный	Массив схемы полей
model	Record<string, any>	—	Реактивная модель (создаётся автоматически, если не указана)
rules	FormRules	—	Правила уровня формы (объединяются с правилами полей)
columns	number	0	Колонки сетки (0 — без сетки)
gutter	number	16	Промежуток сетки в пикселях
layout	'vertical' | 'horizontal' | 'inline'	'vertical'	Раскладка формы
labelWidth	string | number	—	Ширина метки для горизонтальной раскладки
labelAlign	'left' | 'right'	'right'	Выравнивание текста метки
labelSuffix	string	''	Суффикс после меток
size	'sm' | 'default' | 'lg'	'default'	Размер формы
disabled	boolean	false	Отключить всю форму
loading	boolean	false	Состояние загрузки
showRequiredMark	boolean	true	Показывать звёздочку обязательности
requiredMarkPosition	'left' | 'right'	'left'	Позиция звёздочки
validateOnChange	boolean	true	Автовалидация при изменении
validateOnBlur	boolean	true	Автовалидация при потере фокуса
hideErrorMessage	boolean	false	Скрыть сообщения об ошибках
scrollToError	boolean	false	Прокручивать к первой ошибке
statusIcon	boolean	false	Показывать иконки состояния
showAllErrors	boolean	false	Показывать все ошибки правил

DynamicFormField

Property	Type	Description
field	string	Ключ поля — поддерживает точечную нотацию (user.name)
label	string	Текст метки
type	DynamicFormFieldType	Тип ввода (см. таблицу ниже)
placeholder	string	Текст плейсхолдера
rules	FormRule | FormRule[]	Правила валидации
required	boolean	Принудительно показывать метку обязательности
help	string	Подсказка под полем
description	string	Подсказка на метке
dependencies	string[]	Повторная валидация при изменении этих полей
defaultValue	any	Значение по умолчанию
options	{ label, value }[]	Для select, radio, checkbox, segment, autocomplete, transfer
rows	number	Количество строк textarea
disabled	boolean	Отключить это поле
readonly	boolean	Сделать это поле только для чтения
hidden	boolean | (model) => boolean	Условное скрытие
span	number	Сколько колонок занимает поле в режиме сетки
mask	string	Шаблон маски ввода (###-####, +# (###))
regex	RegExp	Ограничить ввод соответствиями регулярному выражению
clearable	boolean	Показывать кнопку очистки
maxlength	number	Максимальная длина в символах
showWordLimit	boolean	Показывать счётчик символов
trim	boolean	Автоматически удалять пробелы по краям
lazy	boolean	Обновлять только при потере фокуса
debounce	number	Задержка ввода (мс)
currencyOptions	object	Формат валюты { prefix, suffix, decimal, thousands, precision }
props	Record<string, any>	Прокидывается в нижележащий компонент
component	Component	Пользовательский компонент (при type: 'custom')

Field Types

Type	Component	Notes
text (по умолчанию)	VxInput	Поддерживает mask, regex, trim, lazy, debounce
password	VxInput type="password"
textarea	VxInput type="textarea"	Поддерживает rows, maxlength, showWordLimit
number	VxInput
email	VxInput
search	VxInput type="search"
tel	VxInput	Лучше использовать с mask для телефонных масок
url	VxInput
select	VxSelect	Нужны options
checkbox	VxCheckbox	Одиночный булев; placeholder используется как метка
checkbox-group	VxCheckboxGroup	Нужны options
radio / radio-group	VxRadioGroup	Нужны options
switch	VxSwitch
slider	VxSlider	Передавайте min, max, showInput через props
rating	VxRating	Передавайте allowHalf, showValue через props
date	VxDatePicker
date-range	VxDateRangePicker
date-time	VxDateTimePicker
time	VxTimePicker
color	VxColorPicker	Передавайте showInput, presets через props
currency	VxCurrencyInput	Настраивается через currencyOptions
autocomplete	VxAutocomplete	Принимает string[] или объекты-опции
segment	VxSegment	Нужны options
transfer	VxTransfer	Нужны options (в качестве data)
upload	VxUpload	Настраивается через props
custom	Ваш компонент	Задайте проп component

Exposed Methods

Method	Signature	Description
validate	() => Promise<{ valid, errors }>	Валидировать все поля
validateFields	(fields: string[]) => Promise<{ valid, errors }>	Валидировать конкретные поля
resetFields	() => void	Сбросить состояние валидации
clearValidation	(fields?: string[]) => void	Очистить ошибки
getModel	() => Record<string, any>	Глубокая копия текущей модели

Slots

Slot	Props	Description
actions	{ validate, reset, model }	Действия формы (кнопки)
[field]	{ field, value, set }	Переопределить отрисовку любого поля