Vue-mfk NPM | npm.io

VueMfk

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

Demo

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.
favorites	Array	NULL	Array of favorite MFKs.Example: `[{ alias: "My Fave MFK", mfk: "260-43-5064-40100-00000000-6026-520-20100-00-0000" }]` If value is not provided, then Favorite MFK selection will not be displayed.
@favorite-mfk-added	Event		Event that raised when new favorite MFK is added.
@favorite-mfk-removed	Event		Event that raised when favorite MFK is removed.