vipetrul/vue-mfk

Vue components for MFK Input, Favorite MFK selection and MFK Validation

VueMfk

A Vue.js Plugin for MFK Input and Favorites. Implemented using VuetifJS.com (Material Design)

Demo

https://codepen.io/vipetrul/pen/mXRjQL

Installation

npm install --save vue-mfk

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueMfk from 'vue-mfk'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mfk/dist/vue-mfk.css'

Vue.use(VueMfk)

Browser

<!-- Include after Vue -->
<!-- VuetifyJS files -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<!-- Lodash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<!-- Local files -->
<link rel="stylesheet" href="https://unpkg.com/vue-mfk/dist/vue-mfk.min.css"></link>
<script src="https://unpkg.com/vue-mfk/dist/vue-mfk.min.js"></script>

<!-- From CDN (TBD) -->

API

Services

Service	Type	Descirption
ValidateMfk	function	impornt {ValidateMfk} from 'vue-mfk' Call to function returns a promise. Promise gets resolved when MFK is valid, and gets rejected with error message when MFK is invalid.

Components

mfk-input

Option	Type(s)	Default	Description
value	String	Required	'-' separated MFK value
validate	Boolean	true	Specifies either MFK should be automatically validated on input
disabled	Boolean	false	Specified either entire MFK input should be disabled
disabledFields	Array	false	Zero based array of int to specify which MFK input elements should be disabled. Example, to disable IAcct :disabled-fields="[5]"
errorMessage	String	NULL	Display custom error message. Supports two-way binding with .sync modifier ( :error-message.sync="myErrorField" ) Default NULL value will be ignored, and regular MFK validation errors will be shown if applicable.

mfk-favorite

Option	Type(s)	Default	Description
value	String	Required	'-' separated MFK value
favorites	Array	Required	Array of favorite MFKs. Example: [{ alias: "My Fave MFK", mfk: "260-43-5064-40100-00000000-6026-520-20100-00-0000" }]
disabled	Boolean	false	Specifies either field is disabled

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

License

MIT