42 Vue Library

A component library for Vue.js applications built according to Company42's design specifications. The aim of this package is to provide out-of-the-box components for a Vue.js web application.

Installation

Using npm:

$ npm install forty-two-vue --save

Include the following code in your main.js file or entry file to your Vue application:

// Import the entire library
import FortyTwo from 'forty-two-vue';

// Import the stylesheet
import 'forty-two-vue/dist/lib/forty-two-vue.min.css';

// Vue.use will automatically register
// the components globally, so that they
// can be used anywhere in your templates
Vue.use(FortyTwo);

Basic Example

All components are prefixed with 'ft-'. For example <ft-input></ft-input> will render a custom input component in your .vue file.

Many of the components come with dynamic properties allowing you to create flexible application flows. Below is an example of how you could use the custom input and button components in a subscription form.

// SomeForm.vue
<template>
  <form>
    <ft-input
      :type="'email'"
      :label="'Email'"
      :placeholder="'Your email address'"
      :success-message="'Valid email'"
      :warning-message="'The email is already registered in our system...'"
      :error-message="'Invalid email, please try again'"
      :state="inputState"
      v-model="email" >
    </ft-input>
    
    <ft-button :on-click="subscribe">
      Subscribe
    </ft-button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      inputState: '',
    };
  },
  watch: {
    email: (val) => {
      // Watch for email changes and change 'inputState'
      // to toggle between the different input messages,
      // e.g. warning-message is visible when :state="'warning"
    },
  }
  methods: {
    subscribe() {
      // Handle email subscription...
    },
  },
};
</script>

Components

Button

<ft-button>

Comes with the following the custom properties:

Props | Default | Options | Description | --- | --- | --- | --- :disabled | false | true false | If true it prevents the 'on-click' function from executing and adds the 'disabled' class to the button. :on-click | none | n/a | A function to be executed when clicking on the button.

Optional classes that you can add to the <ft-button> tag:

Classes | Description --- | --- .large | For a large button. .xlarge | For an extra large button. .xxlarge | For an extra extra large button. .grey | For a grey button. .green | For a green button. .orange | For an orange button. .red | For a red button. .purple | For a purple button. .disabled | For a disabled button. This style can be added, but it is recommended to use the :disabled prop instead to also prevent the :on-click function from executing.

Card

<ft-card>

A card component for content. Use together with the <ft-card-section> tag to group content within a single card.

<ft-card>
  <ft-card-section>
    // Some content goes here.
  </ft-card-section>
  
  <ft-card-section>
    // Some more content goes here.
  </ft-card-section>
</ft-card>

Container

<ft-container>

Used for grouping content and aligning content horizontally or vertically. Also comes with gutter classes for easy flex gutters as well as standardised padding classes.

Classes | Description --- | --- .padding-xsmall | Sets extra small padding inside the container. .padding-small | Sets small padding inside the container. .padding | Sets standard padding inside the container. .padding-large | Sets large padding inside the container. .padding-xlarge | Sets extra large padding inside the container. .padding-xxlarge | Sets extra extra large padding inside the container. .row | Sets display to flex and flex-direction to row. .column | Sets display to flex and flex-direction to column. .gutter-xsmall | Adds an extra small gutter between each item. .gutter-small | Adds a small gutter between each item. .gutter | Adds a standard gutter between each item. .gutter-large | Adds a large gutter between each item.

Input

<ft-input>

Comes with the following the custom properties:

Props | Default | Options | Description --- | --- | --- | --- :label | none | n/a | Adds a label to the input. :state | none | 'success' 'warning' 'error' | Adds certain styling and shows corresponding message depending on the given state. :value | none | n/a | Set the value of the input. Works with v-model. :placeholder | none | n/a | Sets the input placeholder. :type | none | 'text' 'email' 'password' | Sets the type of input. :success-message | none | n/a | Sets the success message to be shown when the state equals 'success'. :warning-message | none | n/a | Sets the warning message to be shown when the state equals 'warning'. :error-message | none | n/a | Sets the error message to be shown when the state equals 'error'. :full-width | false | true false | Set the width of the input to fill its container.

Link

<ft-link>

An alternative to an <a> tag that comes with easy to use props and styling.

Props | Default | Options | Description --- | --- | --- | --- :link-to | none | n/a | The link that you wish to send the user to. :new-tab | true | true false | Opens the link in the current window if set to false.

Message

<ft-message>

Wraps content in a blue box with styling options to create success, warning and error messages.

Optional classes that you can add to the <ft-message> tag:

Classes | Description --- | --- .success | For a green success message. .warning | For an orange warning message. .error | For a red error message. .muted | For a muted grey message.

Spacer

<ft-spacer>

A utility component used to create space between other components. Must have either .row or .column class. .row is used to create vertical space between items and .column is used to create horizontal space between items.

If no size class is given, the spacer will take up the standard space. However, you can modify the spacer with one of the following size classes:

Classes | Description --- | --- .xxsmall | For an extra extra small spacer. .xsmall | For an extra small spacer. .small | For a small spacer. .large | For a large spacer. .xlarge | For an extra large spacer. .xxlarge | For an extra extra large spacer. .xxxlarge | For an extra extra extra large spacer.

Spinner

<ft-spinner>

A spinning loader that comes in standard and large sizes. For a large spinner, simply add the class .large to the <ft-spinner> tag.