vue-form

Generates dynamic forms from JSON.

Vue 3

Use version 2.x.x

Vue 2

Use version 1.x.x

🚧 This is Work in progress. Not recommended to use in production.

📦 Installation

npm install @7span/vue-form

---

✨ Usage

<v-form ref="vForm" v-model="values" :config="form.config" :fields="form.fields"></v-form>

---

⚙️ Props

1. config

Config defines how to process the form. Configuration options are as below

Option	Default	Possible Values	What is does
defaults	{}		Default configuration for the fields.
endpoint	null	Valid URL	An endpoint to process data for CRUD

2. fields

An array containing configuration object of the fields of form. The key of the object will be added as name of field. Each object can have below options.

Option	Default	Possible Values	What is does
interface	input	input,choice,select,file,textarea	Renders input elements. choice will render either radio or checkbox. Know more.
type	text	text,email,radio,checkbox etc.	Based on input, the type can be diffrent. I.e. the input can have email,text,url etc.
label	Camel cased value of key	String	The label of the field
placeholder	null	String	The placeholder. Will be added where supported.
value	null	String, Array	The default value to set whilte rendering form. If repeater is set, provide an array of values.
hide	false	Boolean	If the field is hidden.
choices	[]	Array	Options for radio,checkbox & select. Know more.
messages	null	Object	Know more.
design	{}	Object	Know more.
repeater	null	Object	If allow to add multiple values to field. Know more.
before	null	String	Value to prepend in Field Group
after	null	String	Value to append in Field Group
fields	null	Object	If interface is set to group, you can provide fields under this which follows same structure as fields prop. This is recursive.

interfaces

List of possible interfaces to add into field configuration.

Name	Types	Desc
input	text,email,url,[any valid input type]
choice	radio, checkbox
select	NA
file	NA
textarea	NA
group	NA	You can group fields under one with this. This will recursively create form fields.

choices

Choices is an array of objects with below keys.

Option	Default	Possible Values	What it does
label	null	String	The display text.
value	null	String ,Number	The value.

messages

The object contains diffrent messages to show for validation and helper text.

Option	Default	Possible Values	What it does
desc	null	String	A helper message to show below field.
invalid	null	String	A warning message to show when field validation fails.
valid	null	String	A success message to show when field validation is truthy.

design

Option	Default	Possible Values	What it does
col	12	Number from 1-12	How many cols to occupy in grid.
grid		Number	When rendering field choices in radio/checkbox, how many items should be displayed in single row

repeater

Option	Default	Possible Values	What it does
max	null	Number	Maximum values to allowed to add.
min	null	Number	Minimum values required.

---

🏁 Events

1. change

The change event exposes following values as an object.

key	Type	What it contains
changed	Array	An array of changed values. It will only contain multiple values if the fields are grouped. Know more
values	Object	All the values in current state.
valuesObj	Object	All the values with metadata in current state.

changed

The changed object contains following keys.

• action : What action taken which triggered the change event. Possible values are:
  • input: When the field value is updated.
  • child-input: In a case of grouped fields, if the child value is updated, the parent action will be this.
  • repeater-add: When a new repeater field is added.
  • repeater-remove: When a new repeater field is removed.
• field: Name of the field.
• value: Value of the field.
• valueObj: Value of the field with metadata.
• index: If the field is repeater one, the index of affected repeater item.

---

🕳 Slots

• form--start
• form--end
• field--before--{field-name}
• field--before--{field-name}--{index}
• field--after--{field-name}
• field--after--{field-name}--{index}
• field--start--{field-name}
• field--start--{field-name}--${index}
• field--end--{field-name}
• field--end--{field-name}--${index}
• repeater--add
• repeater--remove

---

⚔️ Methods

1. setValue

You can set the value directly from your component by calling this function.

this.$refs.vForm.setValue({
  field: "e_company", 
  value: "7Span Tech",
  index: 1 // Required only if you want to set value at specific index in repeater fields.
});

2. setConfig

You can modify the config from your component by calling this function.

this.$refs.vForm.setConfig({
  field: "e_company", 
  key:"after", // The configuration key as provided in fields
  value: "#", // The value of the configuration.
  index: 1 // Required only if you want to set value at specific index in repeater fields.
});