vuetify-schema-form
A schema-based form generator component for Vue.js.
Last updated 9 days ago by zaidulin_kirill .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vuetify-schema-form 
SYNC missed versions from official npm registry.

Введение

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 -- текущий объект формы

Current Tags

  • 0.1.110                                ...           latest (9 days ago)

120 Versions

  • 0.1.110                                ...           9 days ago
  • 0.1.109                                ...           24 days ago
  • 0.1.108                                ...           2 months ago
  • 0.1.107                                ...           2 months ago
  • 0.1.106                                ...           3 months ago
  • 0.1.105                                ...           3 months ago
  • 0.1.104                                ...           4 months ago
  • 0.1.103                                ...           4 months ago
  • 0.1.102                                ...           4 months ago
  • 0.1.101                                ...           4 months ago
  • 0.1.100                                ...           4 months ago
  • 0.1.99                                ...           4 months ago
  • 0.1.98                                ...           4 months ago
  • 0.1.97                                ...           4 months ago
  • 0.1.96                                ...           4 months ago
  • 0.1.95                                ...           4 months ago
  • 0.1.94                                ...           4 months ago
  • 0.1.93                                ...           5 months ago
  • 0.1.92                                ...           5 months ago
  • 0.1.91                                ...           5 months ago
  • 0.1.90                                ...           5 months ago
  • 0.1.89                                ...           5 months ago
  • 0.1.88                                ...           5 months ago
  • 0.1.87                                ...           5 months ago
  • 0.1.86                                ...           5 months ago
  • 0.1.84                                ...           5 months ago
  • 0.1.81                                ...           5 months ago
  • 0.1.79                                ...           5 months ago
  • 0.1.78                                ...           5 months ago
  • 0.1.77                                ...           5 months ago
  • 0.1.76                                ...           6 months ago
  • 0.1.75                                ...           6 months ago
  • 0.1.74                                ...           6 months ago
  • 0.1.73                                ...           6 months ago
  • 0.1.72                                ...           6 months ago
  • 0.1.71                                ...           6 months ago
  • 0.1.70                                ...           7 months ago
  • 0.1.69                                ...           7 months ago
  • 0.1.68                                ...           7 months ago
  • 0.1.67                                ...           7 months ago
  • 0.1.66                                ...           7 months ago
  • 0.1.65                                ...           7 months ago
  • 0.1.64                                ...           7 months ago
  • 0.1.63                                ...           7 months ago
  • 0.1.62                                ...           7 months ago
  • 0.1.61                                ...           7 months ago
  • 0.1.60                                ...           7 months ago
  • 0.1.59                                ...           7 months ago
  • 0.1.58                                ...           7 months ago
  • 0.1.57                                ...           7 months ago
  • 0.1.56                                ...           7 months ago
  • 0.1.55                                ...           7 months ago
  • 0.1.54                                ...           8 months ago
  • 0.1.53                                ...           8 months ago
  • 0.1.52                                ...           8 months ago
  • 0.1.51                                ...           8 months ago
  • 0.1.49                                ...           8 months ago
  • 0.1.48                                ...           8 months ago
  • 0.1.47                                ...           8 months ago
  • 0.1.46                                ...           8 months ago
  • 0.1.45                                ...           8 months ago
  • 0.1.44                                ...           8 months ago
  • 0.1.43                                ...           8 months ago
  • 0.1.42                                ...           8 months ago
  • 0.1.41                                ...           8 months ago
  • 0.1.40                                ...           8 months ago
  • 0.1.39                                ...           8 months ago
  • 0.1.38                                ...           8 months ago
  • 0.1.37                                ...           8 months ago
  • 0.1.36                                ...           8 months ago
  • 0.1.34                                ...           8 months ago
  • 0.1.33                                ...           8 months ago
  • 0.1.32                                ...           8 months ago
  • 0.1.31                                ...           8 months ago
  • 0.1.30                                ...           8 months ago
  • 0.1.29                                ...           8 months ago
  • 0.1.28                                ...           8 months ago
  • 0.1.27                                ...           8 months ago
  • 0.1.26                                ...           8 months ago
  • 0.1.25                                ...           8 months ago
  • 0.1.23                                ...           8 months ago
  • 0.1.22                                ...           8 months ago
  • 0.1.21                                ...           8 months ago
  • 0.1.20                                ...           8 months ago
  • 0.1.19                                ...           8 months ago
  • 0.1.18                                ...           8 months ago
  • 0.1.16                                ...           8 months ago
  • 0.1.15                                ...           8 months ago
  • 0.1.14                                ...           8 months ago
  • 0.1.13                                ...           8 months ago
  • 0.1.12                                ...           8 months ago
  • 0.1.11                                ...           8 months ago
  • 0.1.10                                ...           8 months ago
  • 0.1.9                                ...           8 months ago
  • 0.1.8                                ...           8 months ago
  • 0.1.7                                ...           8 months ago
  • 0.1.6                                ...           8 months ago
  • 0.1.5                                ...           8 months ago
  • 0.1.4                                ...           8 months ago
  • 0.1.3                                ...           8 months ago
  • 0.1.2                                ...           8 months ago
  • 0.1.0                                ...           8 months ago
  • 0.0.10                                ...           8 months ago
  • 0.0.9                                ...           8 months ago
  • 0.0.8                                ...           8 months ago
  • 0.0.7                                ...           8 months ago
  • 0.0.6                                ...           8 months ago
  • 0.0.5                                ...           8 months ago
  • 0.0.4                                ...           9 months ago
  • 0.0.1-beta.8                                ...           9 months ago
  • 0.0.1-beta.7                                ...           9 months ago
  • 0.0.1-beta.6                                ...           9 months ago
  • 0.0.1-beta.5                                ...           9 months ago
  • 0.0.1-beta.3                                ...           9 months ago
  • 0.0.1-beta.2                                ...           9 months ago
  • 0.0.1-beta.1                                ...           9 months ago
  • 0.0.0-beta.9                                ...           9 months ago
  • 0.0.0-beta.7                                ...           9 months ago
  • 0.0.0-beta.6                                ...           9 months ago
  • 0.0.0-beta.5                                ...           9 months ago
Maintainers (1)
Downloads
Today 116
This Week 116
This Month 138
Last Day 0
Last Week 13
Last Month 17
Dependencies (12)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |