Svelte Auto Form

A fast and fun form library focused on ease of use, rather than flexibility.

Demo

https://svelte.dev/repl/a868a8e86b6f4891a6305d6d0e024b36?version=3.44.2

npm install @leveluptuts/auto-form

<script>
	import AutoForm from '@leveluptuts/auto-form';
	import type { FormInput } from '@leveluptuts/auto-form';

	let seriesInput: FormInput[] = [
		{
			name: '_id',
			// Readonly for non edit fields, display only
			readonly: true
		},
		// Single string is a type text
		'title',
		{
			type: 'number',
			name: 'level'
		},
		'sku',
		{ name: 'order', type: 'number' },
		{ name: 'tags', type: 'tag' },
		'releaseDate',
		{
			type: 'group',
			fields: [
				{
					name: 'status',
					type: 'select',
					options: Object.values(Status)
				},
				{
					name: 'color',
					type: 'select',
					options: ['#333', '#fff']
				},
				{
					name: 'isPremium',
					type: 'checkbox'
				},
				{
					name: 'authorId',
					type: 'select',
					valueProperty: '_id',
					displayProperty: 'profile.lastName',
					options: $authorsReference.users //options can be data from an api
				},
				{
					name: 'logo',
					type: 'select',
					options: logos,
					valueProperty: 'slug',
					displayProperty: 'slug'
				}
			]
		},

		// Dash to insert an hr row
		'-',

		// Object with group, will put inside a 2x? grid
		// Custom class property also available as an object property
		// type: 'group', fields: [], class: ''
		{ type: 'group', fields: ['price', 'salePrice', 'files', 'filesSize', 'codeLink'] }
	];

	function action() {
		// on form submit
	}
</script>

<AutoForm {action} input="{seriesInput}" />

Action

function that's run on submit of the form. form data is passed into this function.

Input

Form Types

export type FormTypes =
	| 'number'
	| 'text'
	| 'checkbox'
	| 'select'
	| 'tag'
	| 'textarea'
	| 'password'
	| 'email'
	| 'select'
	| 'search-select'
	| 'markdown';

Sponsors

Level Up Tutorials

https://www.leveluptutorials.com

Cutting-edge, focused & high quality video tutorials for web developers and designers Syntax

Learn Svelte!

https://syntax.fm/

A Tasty Treats Podcast for Web Developers. Ft Wes Bos & Scott Tolinski

Thank you!