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: 'pro',
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!