@7span/vue-form v1.1.0

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

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.

interfaces

List of possible interfaces to add into field configuration.

choices

Choices is an array of objects with below keys.

messages

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

design

repeater

🏁 Events

1. change

The change event exposes following values as an object.

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.
});