vue-the-mask

WebJar for vue-the-mask

License	MIT
Categories	JavaScript Languages Github Development Tools Version Controls
GroupId	org.webjars.npm
ArtifactId	github-com-vuejs-tips-vue-the-mask
Last Version	0.11.1
Release Date	Sep 17, 2019
Type	jar
Description	vue-the-mask WebJar for vue-the-mask
Project URL	http://webjars.org
Source Code Management	https://github.com/vuejs-tips/vue-the-mask

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

Filename	Size
github-com-vuejs-tips-vue-the-mask-0.11.1.pom
github-com-vuejs-tips-vue-the-mask-0.11.1.jar	3 MB
github-com-vuejs-tips-vue-the-mask-0.11.1-sources.jar	22 bytes
github-com-vuejs-tips-vue-the-mask-0.11.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

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

Gradle Groovy

// 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'

Gradle Kotlin

// 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")

Apache Buildr

'org.webjars.npm:github-com-vuejs-tips-vue-the-mask:jar:0.11.1'

Apache Ivy

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

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-vuejs-tips-vue-the-mask', version='0.11.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-vuejs-tips-vue-the-mask" % "0.11.1"

Leiningen

[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

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}

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

Other Solutions

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

Currency

1. https://github.com/vuejs-tips/v-money
2. https://github.com/plentz/jquery-maskmoney
3. https://github.com/flaviosilveira/Jquery-Price-Format
4. 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 ;)

License

This project is licensed under MIT License

Vue.js Tips

Learn Vue.js by building real world components

Versions

Version
0.11.1 Sep 17, 2019