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. The project uses semantic-release to release new versions, therefore all commit messages should follow conventional commits, we are using commitizen to facilitate writting the commit messages.

License

This project is licensed under MIT License