vue-the-mask

WebJar for vue-the-mask

License

License

MIT
Categories

Categories

JavaScript Languages Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-vuejs-tips-vue-the-mask
Last Version

Last Version

0.11.1
Release Date

Release Date

Type

Type

jar
Description

Description

vue-the-mask
WebJar for vue-the-mask
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/vuejs-tips/vue-the-mask

Download github-com-vuejs-tips-vue-the-mask

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-vuejs-tips-vue-the-mask/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-vuejs-tips-vue-the-mask</artifactId>
    <version>0.11.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-vuejs-tips-vue-the-mask/
implementation 'org.webjars.npm:github-com-vuejs-tips-vue-the-mask:0.11.1'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-vuejs-tips-vue-the-mask/
implementation ("org.webjars.npm:github-com-vuejs-tips-vue-the-mask:0.11.1")
'org.webjars.npm:github-com-vuejs-tips-vue-the-mask:jar:0.11.1'
<dependency org="org.webjars.npm" name="github-com-vuejs-tips-vue-the-mask" rev="0.11.1">
  <artifact name="github-com-vuejs-tips-vue-the-mask" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-vuejs-tips-vue-the-mask', version='0.11.1')
)
libraryDependencies += "org.webjars.npm" % "github-com-vuejs-tips-vue-the-mask" % "0.11.1"
[org.webjars.npm/github-com-vuejs-tips-vue-the-mask "0.11.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

The Mask

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

Docs and Demo

JsFiddle

The Mask Heart

Install

yarn add vue-the-mask
or
npm i -S vue-the-mask

Usage (two flavors)

Global

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Local (inside the component)

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

Local (as directive)

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}

Tokens

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

The Mask Money

Properties

Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String 'text' Input type (email, tel, number, ...)
tokens false Object tokens Custom tokens for mask

What about money?

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

The Mask Money

Other Solutions

  1. https://github.com/nosir/cleave.js https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask https://github.com/devindex/vue-mask

Currency

  1. https://github.com/vuejs-tips/v-money https://github.com/vuejs-tips/v-money
  2. https://github.com/plentz/jquery-maskmoney https://github.com/plentz/jquery-maskmoney
  3. https://github.com/flaviosilveira/Jquery-Price-Format https://github.com/flaviosilveira/Jquery-Price-Format
  4. https://github.com/kevinongko/vue-numeric https://github.com/kevinongko/vue-numeric

Suggest another one here

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. Your name will be added to the hall of fame ;)

The Mask Wolf

License

This project is licensed under MIT License

org.webjars.npm

Vue.js Tips

Learn Vue.js by building real world components

Versions

Version
0.11.1