@vueform/plugin-mask NPM

Official Input Mask plugin for Vueform

Plugin for Vueform to add input mask to text elements.

Prerequisites

Vueform 1.9.0+

Installation

Install the plugin

npm install @vueform/plugin-mask

Add the plugin in vueform.config.js

// vueform.config.js

import MaskPlugin from '@vueform/plugin-mask'

export default {
  // ...
  plugins: [
    MaskPlugin,
  ]
}

Usage

Pattern

<TextElement
  name="text"
  mask="{+1} (000)-000-0000"
/>

Number

<TextElement
  name="text"
  :mask="{
    mask: 'number',
    min: -10000,
    max: 10000
  }"
/>

Range

<TextElement
  name="text"
  :mask="{
    mask: 'range',
    from: 1,
    to: 90
  }"
/>

Enum

<TextElement
  name="text"
  :mask="{
    mask: 'enum',
    enum: [              
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ],
  }"
/>

Repeat

<TextElement
  name="text"
  :mask="{
    mask: 'VFr',
    blocks: {
      r: {
        repeat: Infinity, // number of times to repeat: Infinity | number | [min, max]
        mask: '-000',
      }
    },
  }"
/>

Regex

<TextElement
  name="text"
  :mask="/^[a-fA-F0-9]{0,6}$/"
/>

Date

<TextElement
  name="text"
  :mask="{
    mask: 'date',
    pattern: 'd.`m.`Y',
  }"
/>

Dynamic

<TextElement
  name="text"
  :mask="[
    {
      mask: 'rgb(RGB,RGB,RGB)',
      eager: true,
      blocks: {
        RGB: {
          mask: 'range',
          from: 0,
          to: 255
        }
      }
    },
    {
      mask: /^#[0-9a-f]{0,6}$/i
    }
  ]"
/>

More info and examples can be found at the official documentation.