# v-mask-directive-filter

> A input mask directtive and filter compatible with vue 2.x|3.x and vuetify (~1.6kb)

Latest version **1.0.13** (published 2020-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-mask-directive-filter
pnpm add v-mask-directive-filter
yarn add v-mask-directive-filter
bun add v-mask-directive-filter
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2020-10-03 |
| First published | 2020-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Claudivan Filho |
| Maintainers | claudivanfilho |
| Keywords | vue, mask, vuetify, directive, filter |

## Links

- npm: https://www.npmjs.com/package/v-mask-directive-filter
- Repository: https://github.com/claudivanfilho/v-mask-directive-filter
- Homepage: https://github.com/claudivanfilho/v-mask-directive-filter#readme
- Issues: https://github.com/claudivanfilho/v-mask-directive-filter/issues
- npm.io page: https://npm.io/package/v-mask-directive-filter

## Recent versions

- 1.0.13 (latest) — 2020-10-03
- 1.0.12 — 2020-09-24
- 1.0.11 — 2020-09-22
- 1.0.10 — 2020-09-21
- 1.0.9 — 2020-09-21
- 1.0.8 — 2020-09-19
- 1.0.7 — 2020-09-19
- 1.0.6 — 2020-09-19
- 1.0.5 — 2020-09-19
- 1.0.4 — 2020-09-18
- 1.0.3 — 2020-09-18
- 1.0.2 — 2020-09-18
- 1.0.1 — 2020-09-18
- 1.0.0 — 2020-09-18

## README

# V-MASK-DIRECTIVE-FILTER

> ## Support to **Vue 3** available [here](https://github.com/claudivanfilho/v-slim-mask)

A incredibly **LIGHTER** input mask directive and filter compatible with **Vue 2** and **Vuetify 2**

<!-- ![github start](https://badgen.net/github/stars/claudivanfilho/v-mask-directive-filter) -->

![npm version](https://badgen.net/npm/v/v-mask-directive-filter)
![Min](https://badgen.net/bundlephobia/min/v-mask-directive-filter)
![Min Gziped](https://badgen.net/bundlephobia/minzip/v-mask-directive-filter)

![Travis Build](https://travis-ci.org/claudivanfilho/v-mask-directive-filter.svg?branch=master)
[![Known Vulnerabilities](https://snyk.io/test/github/claudivanfilho/v-mask-directive-filter/badge.svg?targetFile=package.json)](https://snyk.io/test/github/claudivanfilho/v-mask-directive-filter?targetFile=package.json)

## Browsers support

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome Android | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE9>, Edge                                                                                                                                                                                                      | 6>                                                                                                                                                                                                                | 1>                                                                                                                                                                                                            | 18>                                                                                                                                                                                                                   | 3.1>                                                                                                                                                                                                          | 2>                                                                                                                                                                                                                            | 12>                                                                                                                                                                                                       |

## Instalation

```shell
$ yarn add v-mask-directive-filter

or

$ npm install --save v-mask-directive-filter
```

### Directive

```javascript
// Import the directive inside your main.(js|ts)

import { VMaskDirective } from 'v-mask-directive-filter'

Vue.directive('mask', VMaskDirective)
```

or

```javascript
// using a custom directive

import { getCustomMaskDirective } from 'v-slim-mask'

const VMASKCustomDirective = getCustomMaskDirective({
  '#': /[0-9]/,
  Z: /[a-z]|[A-Z]/,
})
Vue.directive('mask', VMASKCustomDirective)
```

### Filter

```javascript
// Import the filter inside your main.(js|ts)

import { VFilterDirective } from 'v-mask-directive-filter'

Vue.filter('mask', VFilterDirective)
```

## Config

### Tokens

| Token | Pattern                 | Description       |
| ----- | ----------------------- | ----------------- |
| N     | [0-9]                   | numbers only      |
| S     | [a-z] \| [A-Z]          | string a-z only   |
| A     | [0-9] \| [a-z] \| [A-Z] | alphanumeric only |
| C     | [^ ]                    | required char     |
| X     | .\*                     | optional char     |

### Modifiers

| Modifier      | Default | Description                                |
| ------------- | ------- | ------------------------------------------ |
| unmask        | false   | unmask the return value to the model       |
| parseint      | false   | parse to int the return value to the model |
| init-change   | false   | set a initial value to the model on start  |
| hide-on-empty | false   | hide the mask if no value                  |

## Usage

### Using native input element

```html
// Inside your .vue component

<template>
  <input v-model="cpf" v-mask="'NNN.NNN.NNN-NN'" />
</template>

// Entry => 99999999999 | cpf => "999.999.999-99"
```

### Using v-text-field of Vuetify

```html
// Inside your .vue component

<template>
  <v-text-field v-mask.unmask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
</template>

// Entry => 83999998888 | phoneNumber => "83999998888"

<template>
  <v-text-field v-mask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
</template>

// Entry => 83999998888 | phoneNumber => "(83) 99999 - 8888"
```

### Using vue 2.x filter

```html
// Inside your .vue component
<span> {{ '83999998888' | mask('(NN) NNNNN - NNNN') }} </span>

// This will result => (83) 99999 - 8888
```

### Using helper functions

```javascript

<script>
  import { maskTransform, unmaskTransform } from 'v-mask-directive-filter'
  export default Vue.extends({
    computed: {
      phoneFormatted(val) {
        return maskTransform(val, '(NN) NNNNN - NNNN')
      }
    }
  })
</script>

```

## Demo

**vue 2.x + vuetify 2.x sample**
https://codesandbox.io/s/flamboyant-kilby-xv8hz

---
_Source: https://npm.io/package/v-mask-directive-filter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._