Official Input Mask plugin for Vueform

Plugin for Vueform to add input mask to text elements.

Prerequisites

- Vueform 1.9.0+

Installation

1. Install the plugin

``bash
npm install @vueform/plugin-mask
`

2. Add the plugin in vueform.config.js

`js
// vueform.config.js

import MaskPlugin from '@vueform/plugin-mask'

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

`

Usage

#### Pattern

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

#### Number

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

#### Range

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

#### Enum

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

#### Repeat

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

#### Regex

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

#### Date

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

#### Dynamic

`vue
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.

License

MIT