Skip to content

claudivanfilho/v-slim-mask

Repository files navigation

V-SLIM-MASK

A incredibly LIGHTER input mask directive and filter compatible with Vue 3

npm version Min Min Gziped

Travis Build Known Vulnerabilities

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Chrome
Chrome Android
Safari
Safari
iOS Safari
iOS Safari
Opera
Opera
IE9>, Edge 6> 1> 18> 3.1> 2> 12>

Instalation

$ yarn add v-slim-mask

or

$ npm install --save v-slim-mask
// Import the directive inside your main.(js|ts)

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

createApp(App).directive('mask', VMaskDirective).mount('#app')

or

// using a custom directive

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

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

Config

Tokens

Token Pattern Description
N [0-9] numbers only
S [a-z] | [A-Z] string a-z or 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 apply the mask to the model on start
hide-on-empty false hide the mask if no value

Usage

Using native input element

// Inside your .vue component

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

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        cpf: '',
      }
    },
  })
</script>

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

Using in a parent input element

<template>
  <BaseInputComponent v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        cpf: '',
      }
    },
  })
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"
// BaseInputComponent.vue
<template>
  <div>
    <label>Base label</label>
    <input />
  </div>
</template>

Using Composition API

// using reactive
<template>
  <input v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const state = reactive({
        cpf: '', // cannot be undefined
      })

      return state
    },
  }
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"
// using ref
<template>
  <input v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      return { cpf: ref('') } // cannot be undefined
    },
  }
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"
// BaseInputComponent.vue
<template>
  <div>
    <label>Base label</label>
    <input />
  </div>
</template>

Using helper functions

<script>
  import { defineComponent } from "vue";
  import { maskTransform, unmaskTransform } from 'v-slim-mask'

  export default defineComponent({
    computed: {
      phoneFormatted(val) {
        return maskTransform(val, '(NN) NNNNN - NNNN')
      }
    }
  })
</script>

Demo

Vue 3.0.0 Sample

https://codesandbox.io/s/vue-3-v-slim-mask-wy3po?file=/src/App.vue