feat: support escaped characters

Author: KaelWD

packages/vuetify/src/composables/__tests__/mask.spec.ts

@@ -2,7 +2,6 @@
 import { isMaskDelimiter, useMask } from '../mask'
 
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { ref } from 'vue'
 
 // Types
@@ -26,23 +25,29 @@ describe('mask', () => {
     [{ mask: '(###)!!', modelValue: '123' }, '(123)!!'],
     [{ mask: '##.##', modelValue: '1234' }, '12.34'],
     [{ mask: '#', modelValue: null }, ''],
-  ])('maskText', (props, expected) => {
+    [{ mask: '\\#(###)', modelValue: '123' }, '#(123)'],
+    [{ mask: '\\####', modelValue: '1' }, '#1'],
+  ])('maskText %#', (props, expected) => {
     const { maskText } = useMask(props as MaskProps, ref(undefined))
     expect(maskText(props.modelValue)).toEqual(expected)
   })
 
   it.each([
-    ['(5', '5'],
-    ['1111', '1111'],
-    ['(123)4', '1234'],
-    ['(456) 7)', '4567'],
-    ['4444 - 4444 - 4', '444444444'],
-    ['A31 - 4444', 'A314444'],
-    ['555', '555'],
-    [null, null],
-  ])('unmaskText', (input, expected) => {
-    const { unmaskText } = useMask({} as MaskProps, ref(undefined))
-    expect(unmaskText(input)).toEqual(expected)
+    [{ mask: '(#', modelValue: '(5' }, '5'],
+    [{ mask: '####', modelValue: '1111' }, '1111'],
+    [{ mask: '(###)#', modelValue: '(123)4' }, '1234'],
+    [{ mask: '(###) #)', modelValue: '(456) 7)' }, '4567'],
+    [{ mask: '#### - #### - #', modelValue: '4444 - 4444 - 4' }, '444444444'],
+    [{ mask: 'NNN - ####', modelValue: 'A31 - 4444' }, 'A314444'],
+    [{ mask: '\\#(###)', modelValue: '#(123)' }, '123'],
+    [{ mask: '\\#(###)', modelValue: '123' }, '123'],
+    [{ mask: '\\####', modelValue: '#(123)' }, '(123)'],
+    [{ mask: '\\####', modelValue: '#1' }, '1'],
+    [{ mask: '#-#', modelValue: '2-23' }, '223'],
+    [{ mask: '', modelValue: null }, null],
+  ])('unmaskText %#', (props, expected) => {
+    const { unmaskText } = useMask(props as MaskProps, ref(undefined))
+    expect(unmaskText(props.modelValue)).toEqual(expected)
   })
 
   it.each([

packages/vuetify/src/composables/mask.ts

@@ -95,32 +95,70 @@ export function useMask (props: MaskProps, inputRef: Ref<HTMLInputElement | unde
     let newText = ''
 
     while (maskIndex < masks.value.length) {
-      const mask = masks.value[maskIndex]
-
-      // Assign the next character
-      const char = text[textIndex]
+      const mchar = masks.value[maskIndex]
+      const tchar = text[textIndex]
+
+      // Escaped character in mask, the next mask character is inserted
+      if (mchar === '\\') {
+        newText += masks.value[maskIndex + 1]
+        maskIndex += 2
+        continue
+      }
 
-      // Check if mask is delimiter
-      // and current char matches
-      if (!isMask(mask)) {
-        newText += mask
-        if (char === mask) {
+      if (!isMask(mchar)) {
+        newText += mchar
+        if (tchar === mchar) {
           textIndex++
         }
-      // Check if is mask and validates
-      } else if (maskValidates(mask as MaskType, char)) {
-        newText += convert(mask as MaskType, char)
+      } else if (maskValidates(mchar as MaskType, tchar)) {
+        newText += convert(mchar as MaskType, tchar)
         textIndex++
       } else {
-        return newText
+        break
       }
 
       maskIndex++
     }
     return newText
   }
-  function unmaskText (text: string | null): string {
-    return text ? String(text).replace(new RegExp(defaultDelimiters.source, 'g'), '') : text!
+  function unmaskText (text: string | null): string | null {
+    if (text == null) return null
+
+    if (!masks.value.length || !text.length) return text
+
+    let textIndex = 0
+    let maskIndex = 0
+    let newText = ''
+
+    while (true) {
+      const mchar = masks.value[maskIndex]
+      const tchar = text[textIndex]
+
+      if (tchar == null) break
+
+      if (mchar == null) {
+        newText += tchar
+        textIndex++
+        continue
+      }
+
+      // Escaped character in mask, skip the next input character
+      if (mchar === '\\') {
+        if (tchar === masks.value[maskIndex + 1]) {
+          textIndex++
+        }
+        maskIndex += 2
+        continue
+      }
+
+      if (mchar !== tchar) {
+        newText += tchar
+      }
+
+      textIndex++
+      maskIndex++
+    }
+    return newText
   }
   function setCaretPosition (newSelection: number) {
     selection.value = newSelection