vuetify-schema-form

Введение

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') покажет массив телефонов с возможностью добавлять новые элементы, проверять валидацию и т.д