feat(directive): expose the unmasked value in the event so it could be used in the directive

The directive now adds `unmaskedValue` to event.target.  Now the unmasked value can be used even if
you cannot used the component.

Author: RonaldJerez

__tests__/dynamic.test.js

@@ -2,48 +2,48 @@ import {dynamic} from '../src/masker'
 
 test ('empty', () => {
   var masks = []
-  expect(dynamic('12345', { masks })).toBe('')
+  expect(dynamic('12345', { masks })).toMatchObject({ masked: '', raw: ''})
 })
 
 test ('single', () => {
   var masks = ['#.#']
-  expect(dynamic('12', { masks })).toBe('1.2')
-  expect(dynamic('321', { masks })).toBe('3.2')
+  expect(dynamic('12', { masks })).toMatchObject({ masked: '1.2', raw: '12'})
+  expect(dynamic('321', { masks })).toMatchObject({ masked: '3.2', raw: '32'})
 })
 
 test ('CEP USA/BR', () => {
   var masks = ['#####', '#####-###']
-  expect(dynamic('12345', { masks })).toBe('12345')
-  expect(dynamic('123456', { masks })).toBe('12345-6')
-  expect(dynamic('12345678', { masks })).toBe('12345-678')
+  expect(dynamic('12345', { masks })).toMatchObject({ masked: '12345', raw: '12345'})
+  expect(dynamic('123456', { masks })).toMatchObject({ masked: '12345-6', raw: '123456'})
+  expect(dynamic('12345678', { masks })).toMatchObject({ masked: '12345-678', raw: '12345678'})
 })
 
 test ('Reverse CEP USA/BR', () => {
   var masks = ['#####-###', '#####']
-  expect(dynamic('12345', { masks })).toBe('12345')
-  expect(dynamic('123456', { masks })).toBe('12345-6')
-  expect(dynamic('12345678', { masks })).toBe('12345-678')
+  expect(dynamic('12345', { masks })).toMatchObject({ masked: '12345', raw: '12345'})
+  expect(dynamic('123456', { masks })).toMatchObject({ masked: '12345-6', raw: '123456'})
+  expect(dynamic('12345678', { masks })).toMatchObject({ masked: '12345-678', raw: '12345678'})
 })
 
 test ('cpf/cnpj', () => {
   var masks = ['###.###.###-##', '##.###.###/####-##']
-  expect(dynamic('12345678901', { masks })).toBe('123.456.789-01')
-  expect(dynamic('123456789012', { masks })).toBe('12.345.678/9012-')
+  expect(dynamic('12345678901', { masks })).toMatchObject({ masked: '123.456.789-01', raw: '12345678901'})
+  expect(dynamic('123456789012', { masks })).toMatchObject({ masked: '12.345.678/9012-', raw: '123456789012'})
 })
 
 test ('bank agency', () => {
   var masks = ['####', '####-#', '####-##']
-  expect(dynamic('1234', { masks })).toBe('1234')
-  expect(dynamic('12345', { masks })).toBe('1234-5')
-  expect(dynamic('123456', { masks })).toBe('1234-56')
+  expect(dynamic('1234', { masks })).toMatchObject({ masked: '1234', raw: '1234'})
+  expect(dynamic('12345', { masks })).toMatchObject({ masked: '1234-5', raw: '12345'})
+  expect(dynamic('123456', { masks })).toMatchObject({ masked: '1234-56', raw: '123456'})
 })
 
 test ('bank account', () => {
   //            12345      123456      1234567      12345678      123456789
   var masks = ['#####-#', '######-#', '#######-#', '########-#', '#########-#']
-  expect(dynamic('123456', { masks })).toBe('12345-6')
-  expect(dynamic('1234567', { masks })).toBe('123456-7')
-  expect(dynamic('12345678', { masks })).toBe('1234567-8')
-  expect(dynamic('123456789', { masks })).toBe('12345678-9')
-  expect(dynamic('1234567890', { masks })).toBe('123456789-0')
+  expect(dynamic('123456', { masks })).toMatchObject({ masked: '12345-6', raw: '123456'})
+  expect(dynamic('1234567', { masks })).toMatchObject({ masked: '123456-7', raw: '1234567'})
+  expect(dynamic('12345678', { masks })).toMatchObject({ masked: '1234567-8', raw: '12345678'})
+  expect(dynamic('123456789', { masks })).toMatchObject({ masked: '12345678-9', raw: '123456789'})
+  expect(dynamic('1234567890', { masks })).toMatchObject({ masked: '123456789-0', raw: '1234567890'})
 })

__tests__/formatter.test.js

@@ -1,65 +1,61 @@
 import {formatter} from '../src/masker'
 
 test('default vals', () => {
-  expect(formatter('123')).toBe('')
+  expect(formatter('123')).toMatchObject({ masked: '', raw: '' })
 })
 
 test('12 -> #.#', () => {
-  expect(formatter('12', { mask: '#.#' })).toBe('1.2')
+  expect(formatter('12', { mask: '#.#' })).toMatchObject({ masked:'1.2', raw: '12' })
 })
 
 test('1 -> (#)', () => { // placeholder at the end
-  expect(formatter('1', { mask: '(#)' })).toBe('(1)')
+  expect(formatter('1', { mask: '(#)' })).toMatchObject({masked: '(1)', raw: '1'})
 })
 
 test('1 -> [(#)]', () => { // two placeholder at the end
-  expect(formatter('1', { mask: '[(#)]' })).toBe('[(1)]')
+  expect(formatter('1', { mask: '[(#)]' })).toMatchObject({masked: '[(1)]', raw: '1'})
 })
 
 test('1 -> #..#', () => {
-  expect(formatter('1', { mask: '#..#', short: true })).toBe('1')
+  expect(formatter('1', { mask: '#..#', short: true })).toMatchObject({ masked: '1', raw: '1' })
 })
 
 test('1 -> #.#', () => {
-  expect(formatter('1', { mask: '#.#' })).toBe('1.')
+  expect(formatter('1', { mask: '#.#' })).toMatchObject({ masked: '1.', raw: '1' })
 })
 
 test('1. -> #.#', () => {
-  expect(formatter('1.', { mask: '#.#' })).toBe('1.')
+  expect(formatter('1.', { mask: '#.#' })).toMatchObject({ masked: '1.', raw: '1' })
 })
 
 test('123 -> #.#', () => {
-  expect(formatter('123', { mask: '#.#' })).toBe('1.2')
-})
-
-test('raw phone number', () => {
-  expect(formatter('44998765432', { mask: '+55 (##) #####-####', masked: false })).toBe('44998765432')
+  expect(formatter('123', { mask: '#.#' })).toMatchObject({ masked: '1.2', raw: '12' })
 })
 
 test('abc1234567 -> AAa-####', () => {
-  expect(formatter('abc1234567', { mask: 'AAa-####' })).toBe('ABc-1234')
+  expect(formatter('abc1234567', { mask: 'AAa-####' })).toMatchObject({ masked: 'ABc-1234', raw: 'ABc1234' })
 })
 
 test('a5-12-34 -> (XX) - ## - ##', () => {
-  expect(formatter('a5-12-34', { mask: '(XX) - ## - ##' })).toBe('(a5) - 12 - 34')
+  expect(formatter('a5-12-34', { mask: '(XX) - ## - ##' })).toMatchObject({ masked: '(a5) - 12 - 34', raw: 'a51234' })
 })
 
 test('123 -> ##(#)', () => {
-  expect(formatter('123', { mask: '##(#)' })).toBe('12(3)')
+  expect(formatter('123', { mask: '##(#)' })).toMatchObject({ masked: '12(3)', raw: '123' })
 })
 
-test('123 -> #!#(#)', () => {
-  expect(formatter('12', { mask: '#!#(#)' })).toBe('1#(2)')
+test('123 -> #\#(#)', () => {
+  expect(formatter('12', { mask: '#\\#(#)' })).toMatchObject({ masked: '1#(2)', raw: '12' })
 })
 
 test('12 -> +1 #', () => {
-  expect(formatter('12', { mask: '+1 #' })).toBe('+1 2')
+  expect(formatter('12', { mask: '+1 #' })).toMatchObject({ masked: '+1 2', raw: '2' })
 })
 
 test('2 -> +1 #', () => {
-  expect(formatter('2', { mask: '+1 #' })).toBe('+1 2')
+  expect(formatter('2', { mask: '+1 #' })).toMatchObject({ masked: '+1 2', raw: '2' })
 })
 
 test('2 -> +1 # 5', () => {
-  expect(formatter('2', { mask: '+1 # 5' })).toBe('+1 2 5')
+  expect(formatter('2', { mask: '+1 # 5' })).toMatchObject({ masked: '+1 2 5', raw: '2' })
 })

__tests__/masker.test.js

@@ -1,15 +1,23 @@
-import masker from '../src/masker'
+import masker, { setTokens } from '../src/masker'
 
 test('no mask given', () => {
-  expect(masker('123')).toBe('123')
+  expect(masker('123')).toMatchObject({masked: '123', raw: '123'})
 })
 
 test('single mask given', () => {
-  expect(masker('12', { mask: '#.#' })).toBe('1.2')
+  expect(masker('12', { mask: '#.#' })).toMatchObject({masked: '1.2', raw: '12' })
 })
 
 test('multiple mask given', () => {
   const config = { mask: ['#.#', '##.#'] }
-  expect(masker('12', config)).toBe('1.2')
-  expect(masker('123', config)).toBe('12.3')
+  expect(masker('12', config)).toMatchObject({ masked: '1.2', raw: '12' })
+  expect(masker('123', config)).toMatchObject({ masked: '12.3', raw: '123' })
+})
+
+test('should override default tokens', () => {
+  const tokens = {
+    'F': { pattern: /[a-f0-9]/i },
+  }
+  setTokens(tokens)
+  expect(masker('1DFS', { mask: '#FFFF'})).toMatchObject({ masked: '#1DF', raw: '1DF' })
 })

src/component.vue

@@ -4,7 +4,6 @@
 
 <script>
 import directive from './directive'
-import masker from './masker'
 
 export default {
   name: 'InputFacade',
@@ -24,7 +23,8 @@ export default {
   data() {
     return {
       maskedValue: this.value,
-      lastValue: this.value
+      lastValue: this.value,
+      unmaskedValue: ''
     }
   },
   watch: {
@@ -56,14 +56,10 @@ export default {
     refresh(event) {
       this.maskedValue = event ? event.target.value : this.maskedValue
       let emittedValue = this.maskedValue
+      this.unmaskedValue = event ? event.target.unmaskedValue : this.unmaskedValue || emittedValue
 
       if (this.mask && !this.masked) {
-        const maskerConfig = {
-          mask: this.mask,
-          tokens: this.tokens,
-          masked: false
-        }
-        emittedValue = masker(this.maskedValue, maskerConfig)
+        emittedValue = this.unmaskedValue
       }
 
       // avoid unecessary emit when has no change

src/core.js

@@ -1,7 +1,10 @@
 import masker from './masker'
-
 export const CONFIG_KEY = '__input-facade__'
 
+export function FacadeValue(val = '') {
+  this.masked = this.raw = val
+}
+
 export function trigger(name) {
   return new Event(name, { bubbles: true, cancelable: true })
 }
@@ -96,7 +99,10 @@ export function updateValue(el, { emit = true, force = false } = {}) {
 
   if (force || oldValue !== el.value) {
     const newValue = masker(el.value, config)
-    el[CONFIG_KEY].oldValue = el.value = newValue
+
+    el[CONFIG_KEY].oldValue = newValue.masked
+    el.value = newValue.masked
+    el.unmaskedValue = newValue.raw
     emit && el.dispatchEvent(trigger('input'))
   }
 }

src/docs/App.vue

@@ -163,9 +163,10 @@ hexTokens: {
         <label>The Mask:</label>
         <input type="text" v-model="directiveMask" />
       </div>
-      <div class="field" v-facade="directiveMask">
+      <div class="field" v-facade="directiveMask" @input="getDirectiveRaw">
         <label>The Input:</label>
         <input type="tel" />
+        Unmasked Value from Directive: {{ directiveRaw }}
       </div>
       <pre>{{ directive }}</pre>
 
@@ -218,7 +219,8 @@ export default {
       value: '12TgB',
       directiveMask: '##/##/####',
       model1: '',
-      model2: ''
+      model2: '',
+      directiveRaw: ''
     }
   },
   computed: {
@@ -230,8 +232,11 @@ export default {
     }
   },
   methods: {
-    updateModel2({ target }) {
-      this.model2 = target.value
+    getDirectiveRaw({ target }) {
+      this.directiveRaw = target.unmaskedValue
+    },
+    updateModel2(event) {
+      this.model2 = event.target.value
     }
   }
 }

src/masker.js

@@ -1,4 +1,4 @@
-import { normalizeConfig } from './core'
+import { normalizeConfig, FacadeValue } from './core'
 import defaultTokens from './tokens'
 
 let tokenDefinitions = defaultTokens
@@ -11,39 +11,39 @@ export function dynamic(value, config = {}) {
   const masks = config.masks.slice().sort((a, b) => a.length - b.length)
   const withConfig = (overrides) => Object.assign({}, config, overrides)
 
-  const nextMaskIsLarger = (currentMask, nextMask) => {
-    return formatter(value, withConfig({ mask: nextMask, short: true })).length > currentMask.length
+  const nextFacadeIsLarger = (currentMask, nextMask) => {
+    const nextMaskedVal = formatter(value, withConfig({ mask: nextMask, short: true }))
+    return nextMaskedVal.masked.length > currentMask.length
   }
 
   for (let i = 0; i < masks.length; i++) {
     const currentMask = masks[i]
     const nextMask = masks[i + 1]
 
-    if (!nextMask || !nextMaskIsLarger(currentMask, nextMask)) {
+    if (!nextMask || !nextFacadeIsLarger(currentMask, nextMask)) {
       return formatter(value, withConfig({ mask: currentMask }))
     }
   }
 
-  return '' // empty masks
+  return new FacadeValue() // empty masks
 }
 
 export function formatter(value = '', config = {}) {
-  const { mask = '', masked = true, tokens = tokenDefinitions, short = false } = config
+  const { mask = '', tokens = tokenDefinitions, short = false } = config
 
   // ensure we have a string
   value = value.toString()
 
-  let output = ''
+  let output = new FacadeValue()
   let escaped = false
-  let userInput = false
 
   let valueIndex = 0
   let maskIndex = 0
 
   while (maskIndex < mask.length) {
     const maskChar = mask[maskIndex]
     const masker = tokens[maskChar]
-    const char = value[valueIndex]
+    let char = value[valueIndex]
 
     // no more input charactors and next charactor is a masked char
     if (!char && (short || masker)) break
@@ -57,21 +57,26 @@ export function formatter(value = '', config = {}) {
       }
 
       if (masker.pattern.test(char)) {
-        userInput = true
-        output += masker.transform ? masker.transform(char) : char
+        char = masker.transform ? masker.transform(char) : char
+        output.raw += char
+        output.masked += char
         maskIndex++
       }
       valueIndex++
     } else {
-      if (masked) output += maskChar
+      output.masked += maskChar
       if (char === maskChar) valueIndex++ // user typed the same char
 
       escaped = false
       maskIndex++
     }
   }
 
-  return userInput ? output : ''
+  // if there is no raw value, set masked to empty to avoid
+  // showing masking characters in an otherwise empty input
+  if (!output.raw) output.masked = ''
+
+  return output
 }
 
 // Facade to formatter/dynamic when mask is String or Array
@@ -80,7 +85,7 @@ export default function masker(value, config) {
 
   // disable on empty mask
   if (!config.mask) {
-    return value
+    return new FacadeValue(value)
   }
 
   return Array.isArray(config.mask)

src/plugin.js

@@ -18,11 +18,15 @@ function install(Vue, options = {}) {
 
   Vue.component(InputFacade.name, InputFacade)
   Vue.directive(options.name || 'facade', facade)
-  Vue.filter(options.name || 'facade', masker)
+  Vue.filter(options.name || 'facade', filter)
+}
+
+function filter(value, config) {
+  return masker(value, config).masked
 }
 
 export default install
-export { InputFacade, facade, tokens, masker }
+export { InputFacade, facade, tokens, masker, filter }
 
 // Install by default if included from script tag
 if (typeof window !== 'undefined' && window.Vue) {