v-data-form

A vue form whose UI and behaviour are only determined by the data input in it.

Demo

Checkout the demo

Dependencies

1. Vuejs +v2.6.10
2. Vuetify +v1.5.5

Usage

Don't use just yet. We are still building!

Installation

1. You can get this as an NPM package in your app

   npm install --save v-data-form

2. Go to your vuetify.js plugin file in your plugin folder (Vuetify is needed for this) and import and register v-data-form globally

    import VDataForm from "v-data-form";
   
    Vue.use(Vuetify, {
      iconfont: "md"
    });
   
    Vue.component("v-data-form", VDataForm);

3. In any of your component templates, just use the <v-data-form></v-data-form> tags e.g.

   <v-data-form v-model="yourData"></v-data-form>

Data Schema

The form receives props:

• value (or 'v-model' if you wish)
• styleObj
• submissionButtonLabel (submission-button-label in template syntax)
• cancellationButtonLabel (cancellation-button-label in template syntax)

props: {
  value: [ // Array of objects with properties; 'type', 'name', 'value', 'options'
    /* e.g.
    {
      type: "text-field", value: "hello world", name: 'greetingInput',
      options: {
        style: {color: "blue"},
        onclick: () => alert('clicked')
      }
    },
    {
      type: "autocomplete", value: "", name: 'district',
      options: {
        items: ['Hoima', 'Kampala', 'Wakiso'],
      },
    },
    {
      type: "radio-group",
      value: "Kampala",
      children: [
        { type: "radio", value: "Kampala", options: { label: "Kampala" } },
        { type: "radio", value: "Jinja", options: { label: "Jinja" } }
      ]
    }
    */
  ],
  styleObj: { // CSS style
    /*e.g.
    "background-color": "#fff"
    */
  },
  submissionButtonLabel: '', // Defaults to 'submit'
  cancellationButtonLabel: '', // Defaults to 'cancel'
}

Each item in the 'formData' property (shown above), must have at least two properties; the type and the name:

type

This is the name of the type of element to render. It can be any of the following:

• 'text-field'
• 'textarea'
• 'select'
• 'autocomplete'
• 'switch'
• 'radio'
• 'radio-group'
• 'combobox'
• 'checkbox'

More are being added to the list.

name

This is the unique name of that element. It is the key while the element's value is the value in the formOut property (see the output section) of the form.

It can also have three other properties; value, options and children

value

This is the initial value of the rendered element.

The data type depends on the element type e.g. for type: 'textarea', the value should be a string while type: 'text-field' could be a number if in the options, there is a property 'type': 'number'

options

This contains any extra props to add to the rendered element. It should be an object of signature {[prop: string]: any}

To get the possible props for any given element type, search for that type on the vuetify component explorer.

children

This is a list of child element that the current element will wrap around. An example is a radio-group has a number of child radio elements.

Each child element can also have a name, type, options and other children.

Output

The form has a property called formOutput which is an object holding the values of each element in the form, the keys being the names of those elements.

For example, basing on the example 'formData' property of the props in the code section under 'Data Schema', here is the formOutput

output: {
  greetingInput: 'hello world',
  district: 'Kampala', // In case the user selected Kampala
}

Events

The form emits two major events.

submit

This is emitted when the SUBMIT button is clicked.
It calls its handler with the form's output as the first parameter.

cancel

This is emitted when the CANCEL button is clicked.
It calls its handler with the form's output as the first parameter.

An example of what the handers would look like in say a 'methods' section of the parent component, is shown below:

methods: {
    submissionHandler: (formOutput) => {
      /* Do Something on submission
      (i.e. after SUBMIT button is clicked)*/
      /* formOutput is the data output of the form:
      It is kind like the form-data that is sent to the server
      by HTML forms using the signature {[nameOfInput: string]: value}
      */
    },
    cancellationHandler: (formOutput) => {
      /* Do something on cancellation
      (i.e. after CANCEL button is clicked)*/
      /* formOutput is the data output of the form:
      It is kind like the form-data that is sent to the server
      by HTML forms using the signature {[nameOfInput: string]: value}
      */
    }
}

The formOutput is accessible to the 'submit' and 'cancel' event handlers.

Acknowledgements

Vuetify is the component library this form is based on.

This post by Divyam Rastogi was very helpful when publishing to NPM.

License

Copyright (c) 2019 Martin Ahindura Licensed under the MIT License