vue-input-facade

Vue Input Facade

A lightweight and dependency free input masking library created specific for Vue

Docs and Demo

---

Installing

npm i vue-input-facade

yarn add vue-input-facade

Importing

Globally

Installs the component, directive and filter for your entire application.

import InputFacade from 'vue-input-facade'
Vue.use(InputFacade)

Locally

Install per component as needed

import { InputFacade, facade, filter } from 'vue-input-facade'

export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },
  // ... rest of component config
}

Default Mask Tokens

• S = alpha characters
• # = numerical characters
• X = alpha numerical characters
• A = alpha characters, transformed to uppercase
• a = alpha characters, transformed to lowercase
• \ = escape any of the above characters

See the token source file for definition signature

Usage

As Component

<label>Phone Number</label>
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

As Directive

<label>Date</label>
<input type="text" v-facade="'##/##/##'" />

See demo page for more usage examples

Thanks

Thanks to Marcos Neves for the vue-the-mask component of which this vue-input-facade was originally forked from.

Contribution

You're free to contribute to this project by submitting Issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests.

License

This project is licensed under MIT License