Enhancement: Numeral Mask + External Lib Formatter For v-text-field

src/components/VTextField/VTextField.js

@@ -4,7 +4,6 @@ require('../../stylus/components/_text-fields.styl')
 import Colorable from '../../mixins/colorable'
 import Input from '../../mixins/input'
 import Maskable from '../../mixins/maskable'
-import { isMaskDelimiter } from '../../util/mask'
 
 export default {
   name: 'v-text-field',
@@ -19,6 +18,8 @@ export default {
       inputHeight: null,
       internalChange: false,
       badInput: false,
+      backspace: false,
+      delete: false,
       lazySelection: 0
     }
   },
@@ -34,6 +35,7 @@ export default {
     },
     counter: [Boolean, Number, String],
     fullWidth: Boolean,
+    maxlength: [Number, String],
     multiLine: Boolean,
     placeholder: String,
     prefix: String,
@@ -188,6 +190,10 @@ export default {
       this.$emit('focus', e)
     },
     keyDown (e) {
+      const key = e.code || e.key
+
+      this.backspace = key === 'Backspace'
+      this.delete = key === 'Delete'
       this.internalChange = true
     },
     genCounter () {
@@ -238,8 +244,14 @@ export default {
         data.domProps.rows = this.rows
       }
 
-      if (this.mask) {
-        data.attrs.maxlength = this.masked.length
+      if (this.masked) {
+        if (typeof this.masked === 'string') {
+          data.attrs.maxlength = this.masked.length
+        } else if (this.maxlength) {
+          data.attrs.maxlength = this.maxlength
+        }
+      } else if (this.maxlength) {
+        data.attrs.maxlength = this.maxlength
       }
 
       const children = [this.$createElement(tag, data)]
@@ -264,7 +276,7 @@ export default {
       this.lazySelection = 0
 
       for (const char of input.value.substr(0, this.selection)) {
-        isMaskDelimiter(char) || this.lazySelection++
+        this.isMaskDelimiter(char) || this.lazySelection++
       }
     }
   },

src/mixins/maskable.js

@@ -3,12 +3,27 @@
  *
  * @mixin
  *
- * Creates an input mask that is
- * generated from a masked str
+ * Creates an input mask
  *
- * Example: mask="#### #### #### ####"
+ * Handled cases:
+ *
+ * 1. Predefined : String (existing)
+ *      Ex: mask="credit-card"
+ *
+ * 2. Predefined with default options : String mapped to Object
+ *      Ex: mask="numeral"
+ *
+ * 3. Predefined with overidden options : Object
+ *      Ex: mask="{ formatter: 'numeral', prefix: '$', precision: 4 }"
+ *
+ * 4. Custom mask : String (existing)
+ *      Ex: mask="(##) - (AA)"
+ *
+ * 5. Custom mask with formatter : Object
+ *      Ex: mask="{ formatter: function () {}, myOption1: '23', myOption2: '?' }"
  */
 
+import numeralFormatable from './numeral-formatable'
 import {
   isMaskDelimiter,
   maskText,
@@ -29,6 +44,8 @@ export default {
     }
   }),
 
+  mixins: [numeralFormatable],
+
   props: {
     dontFillMaskBlanks: Boolean,
     mask: {
@@ -40,10 +57,40 @@ export default {
 
   computed: {
     masked () {
-      const preDefined = this.preDefined[this.mask]
-      const mask = preDefined || this.mask || ''
+      return this.mask ? this.preDefined[this.mask] || this.mask : false
+    },
+    isStringFormatter () {
+      return typeof this.masked === 'string'
+    },
+    isNumeralFormatter () {
+      return this.masked && typeof this.masked !== 'string' && this.masked.formatter === 'numeral'
+    },
+    isCustomFormatter () {
+      return this.masked && typeof this.masked !== 'string' &&
+        typeof this.masked.formatter === 'function'
+    },
+    // Compute which callback to use
+    maskText () {
+      if (this.isStringFormatter) { // Case 1 and 4
+        return text => maskText(text, this.masked, this.fillMaskBlanks)
+      } else if (this.isNumeralFormatter) { // Case 2 & 3
+        this.options = Object.assign({}, this.preDefined['numeral'])
+        Object.assign(this.options, this.mask)
+
+        return text => this.maskNumeralText(text)
+      } else if (this.isCustomFormatter) { // Case 5
+        const customOptions = Object.assign({}, this.mask)
+        const formatter = this.masked.formatter
+        delete customOptions.formatter
 
-      return mask.split('')
+        return text => formatter(text, customOptions)
+      } else { // No mask
+        return text => text
+      }
+    },
+    unmaskText () {
+      if (!this.mask) return text => text
+      return this.isNumeralFormatter ? text => this.unmaskNumeralText(text) : text => unmaskText(text)
     }
   },
 
@@ -61,13 +108,13 @@ export default {
       let selection = this.selection
 
       for (const char of oldValue.substr(0, selection)) {
-        isMaskDelimiter(char) || position++
+        this.isMaskDelimiter(char) || position++
       }
 
       selection = 0
-      if (newValue) {
+      if (position && newValue) {
         for (const char of newValue) {
-          isMaskDelimiter(char) || position--
+          this.isMaskDelimiter(char) || position--
           selection++
           if (position <= 0) break
         }
@@ -97,26 +144,26 @@ export default {
       if (newValue) {
         for (const char of newValue) {
           if (this.lazySelection <= 0) break
-          isMaskDelimiter(char) || this.lazySelection--
+          this.isMaskDelimiter(char) || this.lazySelection--
           selection++
         }
+
+        selection = this.isNumeralFormatter
+          ? this.adjustNumeralCaret(selection, newValue) : selection
       }
 
       this.setCaretPosition(selection)
       // this.$emit() must occur only when all internal values are correct
       this.$emit('input', this.returnMaskedValue ? this.$refs.input.value : this.lazyValue)
     },
-    maskText (text) {
-      return this.mask ? maskText(text, this.masked, this.dontFillMaskBlanks) : text
-    },
-    unmaskText (text) {
-      return this.mask ? unmaskText(text) : text
-    },
     // When the input changes and is
     // re-created, ensure that the
     // caret location is correct
     setSelectionRange () {
       this.$nextTick(this.updateRange)
+    },
+    isMaskDelimiter (char) {
+      return this.isNumeralFormatter ? this.isNumeralDelimiter(char) : isMaskDelimiter(char)
     }
   }
 }