Dash-forms NPM

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.