vuetify-schema-form/README.md

A schema-based form generator component for Vue.js.

## Введение
vuetify-schema-form может использоваться двумя способами: 
1) просто как набор часто используемых компонентов. В этом случае нужные компоненты нужно подключать из папки /src/components
2) или же можно ее использовать, как более удобный (по крайней мере для меня) построитель сложных форм. В этом случае форма строится не по html-разметке, а по JS-объекту

Например, хотим построить форму с вкладками? Пишем вот такую структуру и передаем ее на вход либы:

    fields: {
		type:  'tabs',
		fields: [{
			label:  'Основная информация',
			type:  'row',
			fields: [{
				type:  'row',
				md:  8,
				fields: [
					{ label:  'Фамилия', value:  'secondName', md:  3, required:  true },
					{ label:  'Имя', value:  'firstName', md:  3, required:  true },
					{ label:  'Отчество', value:  'middleName', md:  3, required:  true }
				]
			}, {
				type:  'row',
				md:  4,
				fields: [{
					label:  'Телефоны',
					value:  'phones',
					type:  'array',
					containerProps: { noGutters:  true },
					inputType:  'phone',
					inputProps: { cols:  12 },
					required:  true,
					noGutters:  true
				}
				]
			}]
		}, {
			label:  'Файлы',
			type:  'row',
			fields: [{
				label:  'Файлы',
				value:  'files',
				type:  'files',
				foreignKey:  'driverId',
				foreignKeyValue: () =>  this.id
			}]
		}]
	}

## Особенности
- Уменьшает объем кода, который надо написать по следующим причинам: 
 1) разворачивает некоторые пропсы во  Vue-компоненты: к примеру, дети элемента 'row' оборачиваются элементом \<v-col>. 
 2) Проперти required: true у элементов превращается в правило с required-валидацией
 3) Нет необходимости каждый раз импортировать нужные элементы (это, конечно, и минус, скорее всего, так как увеличит размер бандла)
 
- Имеет множество частоиспользуемых компонентов. Напишу только про самые сложные, а остальные можно увидеть в исходнике:
1) 'remote' -- автокомплит по связанной сущности. Поддерживает поиск или выгрузку всех элементов при создании компонента
2) 'file' и 'files' -- сложные элементы и совсем без возможности кастомизации. Работали только в связке с koa-file-uploader-router на сервере. Могут принимать те же пропсы, что и другие компоненты. Особенные пропсы: 
`params` (у 'file') -- объект, позволяющий связать данный файл с сущностью в другой таблице. К примеру, нужно связать загружаемые файлы с водителем -- передаем сюда: params: {driverId: "some-uuid"}. Тогда файлы кокретного водителя отобразятся в форме. Необходимо, чтобы это поле (driverId) было объявлено в Хасуре в таблице File
`foreignKey`, `foreignKeyType` (по умолчанию uuid!), `foreignKeyValue` -- пропсы для 'files'. Позволяют связывать файлы к сущности. Являются обязательными полями. В таблице File обязательно должно быть столбец "sort" -- сортировка в списке
Я не спорю -- эти 3 компонента написаны не очень. Но мне они очень сильно упрощают жизнь
3) 'mask' -- инпут с поддержкой маски. Используется внутри элемента 'phone'. Я вынес его сюда, так как внутри 'mask' использует не v-mask какой-нибудь глючный, а Cleave.js который намного гибче, но при этом и интегрировать во Vue его сложней
4) 'array' -- тоже сложный элемент. Позволяет делать "массивы" компонентов (которые в Хасуре будут храниться в типе JSONB). Принимает проп inputType -- тип инпута из этой же либы (например, inputType: 'phone') покажет массив телефонов с возможностью добавлять новые элементы, проверять валидацию и т.д. Лучше посмотрите как на МТР реализован массив телефонов/емейлов у водилы

## Минусы
- Я не уверен, что такой подход построения форм намного лучше, чем классический с шаблонами. Но мне нравится и особых проблем я пока не вижу

Кастомизировать инпуты можно или добавив новый тип (см. файл useSchemaForm в МТР), или через scopedSlot: <template #item.phone="{item}"> -- где "phone" это поле _value_ из структуры, _item_ -- текущий объект формы