vest-ui

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)