DashForms

DashForms is a simple form builder for Vue.js. We are currently using it internally at Digital360.

Installation

• Run npm install dash-forms
• Import it in your main file
• Make Vue aware of its existence Vue.use(DashForms)

Elements

DashForms have different independent components that you can use to build your forms. We are using slots to nest elements, so there is not direct relation of parenthood.

df-wrapper

This should be the root element of your form. It generates the form tag.

Props

• name: A string identifying this specific form.

Events

• df.submit: It dispatches the form data and its own name (formName, formData)
• df.reset: It sends an alert when the form is reset.
• df.cancel: It sends an alert when the form is cancelled.

Notes:

• df-wrapper does not actively search for its children when they are created. It has a fields data property, but it's the children responsibility to attach themselves to it when created.

df-section

Creates a section that allows us to separate forms into distinct sections.

Props

• title: The title of the section.

df-field

A container for a specific field. It adds decorators around the field. Some field types don't need them, like checkboxes or radio inputs.

Props

• beforeLabel: The label's content.
• helpBlock: A little text appended after the input to give some tips or information regarding it.
• for: The for attribute for the label

df-submit

A set of buttons to be able to submit, cancel or reset the form.

Props

• hasSubmit: Boolean to display the submit button or not.
• hasCancel: Boolean to display the cancel button or not.
• hasReset: Boolean to display the reset button or not.

Notes

• df-submit dispatches internal events to be consumed by df-wrapper, like df._reset and df._cancel. It's not recommended to use this events in other components.

Inputs

Most of the inputs available are pretty simple, and they all follow the same structure. The only slightly complicated ones are df-checkbox, df-radio, df-range-input and df-select.

General Props

• name: Name of the input
• value: Current value
• isDisabled (Boolean): Is this field disabled?
• exclude (Boolean): If set to true, the field won't append itself automatically to its df-wrapper ancestor. This means that when the form is submitted, the value of this element won't be displayed. Useful for hidden elements, or elements to be consumed internally.