Nanobots Protecting Microbots

    v-slim-mask
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.24 • Public • Published

    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

    Install

    npm i v-slim-mask

    DownloadsWeekly Downloads

    154

    Version

    1.0.24

    License

    MIT

    Unpacked Size

    20.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • claudivanfilho