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:

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

More are being added to the list.

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

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.

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