Vue 3 Live Form

This component, written using TypeScript and the Vue 3 composition API, creates a schema-driven form that allows you to modify the state of an object. This component is currently a work in progress and is an early step in creating more flexible, open source versions of components I have developed in the past.

Features / Notes

Each key on the object/model being modified can be targeted with a number of different input types.
Input types that accept multiple options or values can be configured to use an array existing on the original object, or a custom array provided in the schema.
Multiple rows in the form can be set to modify the same key of the master model object, as seen in the example below where multiple form inputs are modifying the value of the “select” key.
A row type of “nested” allows you to selectively modify a nested array of objects, and selected keys within them. All of the form’s input types are compatible with this. Nesting multiple “nested” input types is possible allowing you to deeply modify a data structure, although the UI is not currently optimized for this. An example of a nested input within a nested input can bee seen below.
The visibility of rows can be determined conditionally

Future features / To-Do list:

Schema driven form validation
Improved styling
Expandable UI for deeply nested editors
Additional & Custom field options
Ability to re-order in the ‘nested’ input type
Ability to target a deeply nested field/key using dot notation.

Installation

npm install vue3-live-form

Usage

Import the component:

import { Vue3LiveForm } from  'vue3-live-form';

Register the component if using the Vue options API (Not required if using the Vue 3 composition API with the setup tag):

export  default {
	name:  'MyComponent',
	components: { Vue3LiveForm},
}

Pass a schema parameter into the component and attach an object/model to it using v-model:

<Vue3LiveForm :schema="schema" v-model="data" />

Schema Guide

Property	Type	Description
labelWidth	`string`	Width of the label column.
rows	`array`	An Array of Objects following the row schema below.

Row Schema

Property	Type	Description
type	`String`	The type of input to be rendered. Accepted values: `text` `password` `date` `number` `checkbox` `boolean` `textarea` `textbox` `select` `radio` `nested`. The ‘select’ and radio input types require the options property to be configured. The ‘nested’ input type requires field be configured to reference an array of objects on the data source object/model.
readonly	`Boolean`	optional Applies the “readonly” attribute to an input field.
field	`String`	optional The key of the data source object/model you wish to modify.
options	`String` or `Array`	Applies to `select` & `radio` input types. Enter an array of options for input types with multiple options. A `string` can also be entered representing an existing key with an array on the master object. The array values can be strings, numbers or objects with multiple keys.
optionLabel	`String`	optional Allows you to specify which key will act as the label for the options property when objects are being used. If this value is not provided, the entire object structure will be rendered in the select or radio options.
optionValue	`String`	optional Allows you to specify which key will act as the value for the options property when objects are being used. If this value is not provided, the entire object will be used in the source data object/model.
label	`String`	optional Label for the input row. If no label is provided, the field name will be used.
columns	`Array<RowSchema>`	optional Only used when the input type is ‘nested’. Allows you to define a schema for columns of the nested editor. The same schema used for rows can be applied to nested columns.
criteria	`Array['field','operator','value']`	optional Sets a condition for the row to be rendered. `field` represents the property/key of the model that will be compared against the `value` parameter of the array. Current valid operators are `==` and `!=`.

GitHub

View Github