feat: add support optional characters

Implements optional character in the mask by use of '?' similar to how it is done in regex.

Implements #23 

BREAKING CHANGE: The "?" is now a special character, if you are using this character as part of your mask you must now escape it, or change the token used for optional characters in your token definition.

Author: dima-bzz

README.md

@@ -63,6 +63,7 @@ export default {
 + `A` = alpha characters, transformed to uppercase
 + `a` = alpha characters, transformed to lowercase
 + `\` = escape any of the above characters
++ `?` = mark the preceding character as optional
 
 See the [token source file](https://github.com/RonaldJerez/vue-input-facade/blob/master/src/tokens.js) for definition signature
 

docs/component.md

@@ -24,6 +24,20 @@ let masked = true
 <display :value="franceIBAN" />
 ```
 
+### Optional next mask
+
+```js
+let value = '192.168.10.1'
+let masked = false
+
+<example label="IP address">
+  <input-facade mask="##?#?.##?#?.##?#?.##?#?" v-model="value" :masked="masked" />
+</example>
+
+<checkbox v-model="masked" />
+<display :value="value" />
+```
+
 ### Dynamic Masks
 
 Accepts an array of masking pattern and dynamically chooses the appropriate one based on the number of characters in the field.

src/masker.js

@@ -67,6 +67,7 @@ export function formatter(value, config) {
 
   let output = new FacadeValue()
   let escaped = false
+  let optional = false
 
   let valueIndex = 0
   let maskIndex = 0
@@ -75,6 +76,8 @@ export function formatter(value, config) {
   while (maskIndex < mask.length) {
     const maskChar = mask[maskIndex]
     const masker = tokens[maskChar]
+    const nextMaskChar = mask[maskIndex + 1]
+    const nextMasker = tokens[nextMaskChar]
     let char = value[valueIndex]
 
     // no more input characters and next character is a masked one
@@ -88,14 +91,26 @@ export function formatter(value, config) {
         continue
       }
 
-      if (masker.pattern.test(char)) {
+      if (masker.optional || (nextMasker && nextMasker.optional)) {
+        optional = true
+      }
+
+      if (masker.pattern && masker.pattern.test(char)) {
         char = masker.transform ? masker.transform(char) : char
         output.unmasked += char
         output.masked += accumulator + char
 
         accumulator = ''
         maskIndex++
+        optional = false
       }
+
+      if (optional) {
+        optional = false
+        maskIndex++
+        continue
+      }
+
       valueIndex++
     } else {
       accumulator += maskChar
@@ -109,6 +124,7 @@ export function formatter(value, config) {
         }
       }
 
+      optional = false
       escaped = false
       maskIndex++
     }

src/tokens.js

@@ -4,5 +4,6 @@ export default {
   S: { pattern: /[a-z]/i },
   A: { pattern: /[a-z]/i, transform: (v) => v.toLocaleUpperCase() },
   a: { pattern: /[a-z]/i, transform: (v) => v.toLocaleLowerCase() },
-  '\\': { escape: true }
+  '\\': { escape: true },
+  '?': { optional: true }
 }

tests/formatter.test.js

@@ -66,6 +66,34 @@ test('empty -> +1 # 5', () => {
   expect(formatter('', { mask: '+1 # 5', prefill: true })).toMatchObject({ masked: '+1 ', unmasked: '' })
 })
 
+test('12.345 -> ##?#?.###', () => {
+  expect(formatter('12.345', { mask: '##?#?.###' })).toMatchObject({ masked: '12.345', unmasked: '12345' })
+})
+
+test('12.3 -> ##?#?.##?#?', () => {
+  expect(formatter('12.3', { mask: '##?#?.##?#?' })).toMatchObject({ masked: '12.3', unmasked: '123' })
+})
+
+test('123.456 -> ##?#?.##?#?', () => {
+  expect(formatter('123.456', { mask: '##?#?.##?#?' })).toMatchObject({ masked: '123.456', unmasked: '123456' })
+})
+
+test('21986892332 -> (0##?) #####-####', () => {
+  expect(formatter('21986892332', { mask: '(0##?) #####-####' })).toMatchObject({ masked: '(021) 98689-2332', unmasked: '21986892332' })
+})
+
+test('2)986892332 -> (0##?) #####-####', () => {
+  expect(formatter('2)986892332', { mask: '(0##?) #####-####' })).toMatchObject({ masked: '(02) 98689-2332', unmasked: '2986892332' })
+})
+
+test('12.3456abc -> ##?#?.###.#A?a?S', () => {
+  expect(formatter('12.3456abc', { mask: '##?#?.###.#A?a?S' })).toMatchObject({ masked: '12.345.6Abc', unmasked: '123456Abc' })
+})
+
+test('12.3456ac -> ##?#?.###.##?a?S', () => {
+  expect(formatter('12.3456ac', { mask: '##?#?.###.##?a?S' })).toMatchObject({ masked: '12.345.6ac', unmasked: '123456ac' })
+})
+
 test('France IBAN', () => {
   expect(
     formatter('FR7630006000011234567890189', {