vest-ui v1.2.7

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

events

2.1.2 stdBtn

setup

No additional setup is reuqired to use this component.

props

events

2.1.3 linkBtn

setup

No additional setup is reuqired to use this component.

props

events

2.1.4 hexArrowBtn

setup

No additional setup is reuqired to use this component.

props

events

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

events

There are no events for this component.

2.2.2 hrPlus

setup

No additional setup is reuqired to use this component.

props

events

There are no events for this component.

2.2.3 hrCapped

setup

No additional setup is reuqired to use this component.

props

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

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

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

events

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

events

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)