Giter Club home page Giter Club logo

vue-input-facade's Introduction

Vue Input Facade

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

Build Status Coverage Status License code style: prettier

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

vue-input-facade's People

Contributors

ronaldjerez avatar semantic-release-bot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.