1. Setup

1.1 Installation

yarn add vest-ui
npm install vest-ui

1.2 Usage

Import all components.

import Vue from 'vue';
import Vest from 'vest-ui';

Vue.use(Vest);

Or import specific components as needed.

import { ctaBtn, stdInput } from 'vest-ui';

// global
Vue.component('ctaBtn', ctaBtn);
Vue.component('stdInput', stdInput);

// scoped
export default {
	name: 'anyVueComponent',
	components: {
		ctaBtn,
		stdInput,
	}
}

2. Components

2.1 buttons

2.1.1 ctaBtn

)

setup

No additional setup is reuqired to use this component.

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :------- | disabled | if true, button is disabled | bool | -- | -- | yes | btnStyle | integer that renders button color scheme | number | 1,2,3 | default: 1 | yes | alt (deprecated) | if true, renders alternate color scheme | bool | -- | -- | yes

events

| Name | Trigger | Notes | | :------------ | :------------------------------- | :-------- | | @click | button has been clicked | --

2.1.2 stdBtn

setup

No additional setup is reuqired to use this component.

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :---------- | disabled | if true, button is disabled | bool | -- | -- | yes | alt | if true, renders alternate color scheme | bool | -- | -- | yes

events

| Name | Trigger | Notes | | :------------ | :------------------------------- | :-------- | | @click | button has been clicked | --

2.1.3 linkBtn

setup

No additional setup is reuqired to use this component.

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :---------- | disabled | if true, button is disabled | bool | -- | -- | yes

events

| Name | Trigger | Notes | | :------------ | :------------------------------- | :-------- | | @click | button has been clicked | --

2.1.4 hexArrowBtn

setup

No additional setup is reuqired to use this component.

props

| Name | Description | Type | Values | Notes | Optional | | :------------ | :------------------------ | :------------ | :------- | :-------- | :------- | | direction | the direction of the button's arrow | string | 'right', 'left', 'down' | default: 'right' | yes | strokeColor | button's outline/arrow color | string | css hex color | default: '#fff' | yes | fillColor | button's color on hover/click | string | css hex color | default: '#fff' | yes

events

| Name | Trigger | Notes | | :------------ | :------------------------------- | :-------- | | @click | button has been clicked | --

2.2 accents

2.2.1 plusText

setup

This component is absolutely positioned. Be sure to have a positioned element as the desired parent.

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | strokeColor | accents's color | string | css hex color | default: '#fff' | yes

events

There are no events for this component.

2.2.2 hrPlus

setup

No additional setup is reuqired to use this component.

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | strokeColor | accents's color | string | css hex color | default: '#fff' | yes

events

There are no events for this component.

2.2.3 hrCapped

setup

No additional setup is reuqired to use this component.

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | strokeColor | accents's color | string | css hex color | default: '#fff' | yes

events

There are no events for this component.

2.3 form components

2.3.1 stdInput

setup

Must have vee-validate plugin installed and imported in main.js For currency masking, must have v-money plugin installed and imported in main.js

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

// only need this if you are using the iMoney prop for currency masking
import Money from 'v-money'
Vue.use(Money, {precision: 2})

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | iName | input's name | string | -- | -- | no | v-model | input's modeled value | string | -- | -- | no | iValue | input's initial value | string | -- | this must be the same property that is assigned to v-model | no | iType | input's type | string | html input type | default: 'text' | yes | iValidate | validation rules | string | valid validation rule syntax | -- | yes | iPlaceholder | input's placeholder text | string | -- | -- | yes | iClass | class(es) to be applied directly to the input element | string | css class string | -- | yes | iMask | input mask | string | valid vue-the-mask string | -- | yes | iMoney | input mask for currency | object | valid v-money object | -- | yes | iMin | number input's min value | number | -- | only used when iType="number" | yes | iMax | number input's max value | number | -- | only used when iType="number" | yes | iStep | number input's legal intervals | number | -- | only used when iType="number" default: 1 | yes | labelClass | class(es) to be applied directly to the input's label/placeholder | string | css class string | -- | yes | iOptional | indicate whether input should display 'optional' | bool | -- | default: false | yes

events

There are no events for this component.

2.3.2 stdSelect

setup

This element uses a single <slot></slot> tag to render <option> tags inside of it. See the docs for more info on Slots.

<std-select>
	<option value="foo">foo</option>
	<option value="bar">bar</option>
	<option value="too">too</option>
</std-select>

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | v-model | field's modeled value | string | -- | -- | yes | alt | if true, render's alternate size/font | bool | -- | default: false | yes

events

There are no events for this component.

2.4 nav components

2.4.1 navBar

setup

the @linkClick event must be listened for and it's corresponding function must update the active prop to match the new active Index.

<!-- vue template -->
<nav-bar @linkClick="handleLinkClick" active="active"></nav-bar>

// vue script

methods: {
	handleLinkClick(newActiveIndex, direction) {
		this.active = newActiveIndex;
		// do anything else
	}
}

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | items | array of labels for nav items | [string] | -- | -- | no | active | which nav Item is currently active | number | 0 <= active < items.length | -- | no | navKey | unique string for the navBar | string | -- | -- | no | activeBarColor | color of the active bar | string | css hex color | deafult: $vest-sky-blue | yes | dur | duration of navBar animation (ms) | Number | -- | deafult: 400 | yes

events

| Name | Trigger | Notes | | :------------ | :------------------------------- | :-------- | | @linkClick | navItem has been clicked | passes two props: linkClick(newActiveIndex, direction) where direction is only used to animate other elements in conjunction with the navBar animation.

2.5 containers

2.5.1 stdModal

setup

This element uses a single <slot></slot> tag to render content inside of the modal. See the docs for more info

props

| Name | Description | Type | Values | Notes | Optional | :------------ | :------------------------ | :------------ | :------- | :-------- | :----- | mkey | unique string for the modal's ID | string | -- | -- | no | active | whether or not the modal is visible | bool | -- | -- | no

events

| Name | Trigger | Notes | | :------------ | :------------------------------- | :-------- | | @close | user is trying to close the modal | should set whatever value is bound to :active prop to false.

3. Styles

3.1 Import

To access the lastest Vest-ui styles, simply import main.scss and _variables.scss into App.vue.

<!-- App.vue -->
<style lang='scss'>
	@import 'node_modules/vest-ui/styles/main.scss';
	@import 'node_modules/vest-ui/styles/_variables.scss';
</style>

In addition, you will have to include the _variables.scss import in any component styles. I know this sucks, searching for a better way but I don't think Vue offers one currently.

<!-- someComponent.vue -->
<style lang='scss'>
	@import 'node_modules/vest-ui/styles/_variables.scss';
	/*your components scss*/
</style>

3.2 Colors + Fonts

All colors and fonts found in the zeplin styleguide are available in _variables.scss.

• colors are referenced as scss variables: (ex. $vest-teal)
• fonts are referenced as scss mixins: (ex. @include text-body) see zeplin comments for exact mixin names.

3.3 Extras

Other helpful extras

Responsive Mixin:

// lg: under 1440px
// md: under 1024px
// sm: under 768px
// 2x: 2x displays (retina)
// 3x: 3x displays (super-retina?)

@include respond-to($media) {
	// conditional styles here
}

Background + Text Opacity Mixin:

@include background-opacity($color, $opacity)
@include text-opacity($color, $opacity)