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. | |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.|

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