@nadilk/x-input-mask NPM

Designed for VUE3

Usage

Installation:

const app = createApp(App)

const config = {
  escapeCharacter: '^',
  placeholderCharacter: '_',
  enablePlaceholder: false,
  symbols: [
      {alias: '*', type: 'regex', value: /./},
      {alias: 'A', type: 'regex', value: /[a-zA-Z]/, error: 'Only latin letters'},
      {alias: 'U', type: 'function', value: ({symbol,index,xmask},mode) => {
          if(mode === 'write')
              xmask.setValueAt(symbol.toUpperCase(),index)
          return {accept:1}
      }}
  ],
}
app.use(XMaskPlugin,config)

Directive

Directive accepts 2 type value:

####String:

<wrapped-input v-xmask="'+7-###-###-##-##'" v-model="myVal"  @error="onError"></wrapped-input>

####Object

<wrapped-input v-xmask="maskData" v-model="myVal"  @error="onError"></wrapped-input>

data(){
    return{
        maskData:{
            mask:'+7-###-###-##-##',
            config:{
                symbols:[ 
                    {alias: '#', type: 'regex', value: /[0-9]/, error: 'Only numbers'},
                ]
            }
        }
    }
}

Fill arg

<input v-xmask:fill="'+7-###-###-##-##'" v-model="myVal"  @error="onError"></input>
Result: +7-___-___-__-__

Mask symbols

There are 3 types of mask symbols: 1)Static - always have 1 value, static symbol is one char long They are not declared in config If input char does not 2)Regex - testing char with regex string,