Vue Form Components

This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework.

There are a variety of components that this package provides. These are:

• Standard Input Box
• Text Area
• Select List
• Toggle Switch
• File Browser

Installation

You can install this package by running the following command: npm install --save vue-form-components or yarn add vue-form-components

You can then import this package into your project.

Import VueFormComponents from 'vue-form-components'

Usage

I recommend when using this package to declare the components as global components. This can be done one of the following ways:

Import VueFormComponents from 'vue-form-components';
Vue.component('input-box', VueFormComponents.InputBox);

Standard Input Box

This component is designed to save time and repetition by not having to duplicate form groups. The name for this component is InputBox. This component can be used in conjunction with the v-model directive. Below is an example of how you might use the component:

<input-box name="email" type="email" label="Your Email" helper="Please enter your email address" v-model="email"></input-box>

Addons

With the Standard input box component, you can also use input group addons. This can be done by simply adding slots.

| Slot | Description | | ------------ | ----------- | | leftAddon | A standard input group addon on the left side of the input field | | rightAddon | A standard input group addon on the right side of the input field | | leftButton | An input group button on the left side of the input field | | rightButton | An input group button on the right side of the input |

For example, if I wanted to create an input box, with an addon on the right hand side, I could do the following:

<input-box v-model="model" name="email_address" label="Email Address">
    <div slot="rightAddon">@example.com</div>
</input-box>

Alternatively, for a button on the right hand side, I could do the following:

<input-box v-model="model" name="email_address" label="Email Address">
    <button slot="rightButton" class="btn btn-default">Search</button>
</input-box>

| Prop | Type | Default | Required | Description | | ------------ | ------- | ---------- | --------- | ----------- | | name | String | | Yes | The input name for the field | | label | String | | No | The label for the input | | helper | String | | No | Helper text | | invalid | Boolean | false | No | Whether or not to show a validation error | | errorMessage | String | | No | The error message to show | | placeholder | String | | No | A placeholder for the input | | inline | Boolean | false | No | Show the label next to the input | | type | String | text | No | The HTML input type | | required | Boolean | false | No | Mark the field as required | | readonly | Boolean | false | No | Mark the field as readonly | | small | Boolean | false | No | Show a small input | | large | Boolean | false | No | Show a large input | | plainText | Boolean | false | No | Show a plain text input | | metaUnderLabel | Boolean | false | No | Show the meta details under the label instead of the input |

Toggle Switch

This component displays a nice alternative to a standard checkbox. The name for this component is ToggleSwitch. This component can be used in conjunction with the v-model directive.

| Prop | Type | Default | Required | Description | | ------------ | ------- | ---------- | --------- | ----------- | | name | String | | Yes | The checkbox name | | label | String | | No | The label for the checkbox | | labels | Boolean | false | No | Show yes / no labels on the switch | | helper | String | | No | Helper text | | id | String | | No | The id for the checkbox | | stacked | Boolean | false | No | Show the label above the switch component | labelColumn | String | col-sm-2 | No | The bootstrap column for the label | | inputColumn | String | col-sm-10 | No | The bootstrap column for the input |

Text Area

This component generates a textarea within a bootstrap form group. The name for this component is TextArea. This component can be used in conjunction with the v-model directive.

| Prop | Type | Default | Required | Description | | ------------ | ------- | ---------- | --------- | ----------- | | name | String | | Yes | The textarea name | | label | String | | No | The label for the textarea | | helper | String | | No | Helper text | | showError | Boolean | false | No | Whether or not to show a validation error | | errorMessage | String | | No | The error message to show | | stacked | Boolean | false | No | Show the label above the textarea | | required | Boolean | false | No | Mark the field as required | | id | String | | No | The id for the html input |

Select List

This component generates a select input within a bootstrap form group. The name for this component is SelectList. This component can be used in conjunction with the v-model directive.

Addons

With the Select List component, you can also use input group addons. This can be done by simply adding slots.

| Slot | Description | | ------------ | ----------- | | leftAddon | An addon on the left side of the input field | | rightAddon | An addon on the right side of the input field | | leftBtn | An input group button on the left side of the input field | | rightBtn | An input group button on the right side of the input |

| Prop | Type | Default | Required | Description | | ------------ | ------- | ---------- | --------- | ----------- | | name | String | | Yes | The select list name | | label | String | | No | The label for the select list | | options | Array | | Yes | The options to choose from | | keyName | String | id | No | The name of the key for the value in the options | | labelName | String | label | No | The name of the key for the label in the options | | helper | String | | No | Helper text | | showError | Boolean | false | No | Whether or not to show a validation error | | errorMessage | String | | No | The error message to show | | stacked | Boolean | false | No | Show the label above the textarea | | required | Boolean | false | No | Mark the field as required |

More docs coming soon