Mask as object feature added

Prevent useless initMask calls
niksmr · May 22, 2017 · 20e7034 · 20e7034
1 parent af38d15
commit 20e7034
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -23,23 +23,45 @@ The following format characters define editable parts of the mask (see [inputmas
 * `#` - alphanumeric, forced to upper case when entered
 * `+` - any character
 
+### Static characters
 If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:
 ```vue
 <masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder="Phone number" type="tel" />
 ```
 
+### Raw input
 You can also get a raw user input text if you want. Instead of using v-model you might need second argument of the input event:
 ```vue
 <masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
 ```
 
+### Placeholder character
 Placeholder character is customizable by `placeholder-char` attribute:
 ```vue
 <masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder-char="-" placeholder="Phone number" type="tel" />
 ```
 
+### Custom mask object
+You can use your own mask options object, it will be passed to the [inputmask-core](https://github.com/insin/inputmask-core#inputmask-options) constructor:
+```vue
+<masked-input
+  v-model="custom"
+  placeholder="Custom"
+  :mask="{
+    pattern: 'VVVV',
+    formatCharacters: {
+      'V': {
+        validate: char => /[a-jA-J]/.test(char),
+        transform: char => char.toUpperCase(),
+      },
+    },
+  }"
+/>
+```
+
 ## Known issues/TODO
 * Cut in mobile Chrome
 * Cyrillic chars are not supported in mobile Chrome
+* Backspace problems in mobile Chrome
 
 Found more? It's open for feedback and pull requests
diff --git a/dist/demo.js b/dist/demo.js
diff --git a/dist/demo.js.map b/dist/demo.js.map
diff --git a/dist/maskedInput.js b/dist/maskedInput.js
@@ -44,10 +44,9 @@ export default {
       type: String
     },
     mask: {
-      type: String,
       required: true,
       validator: function validator(value) {
-        return !!(value && value.length >= 1);
+        return !!(value && value.length >= 1 || value instanceof Object);
       }
     },
     placeholderChar: {
@@ -64,8 +63,10 @@ export default {
   },
 
   watch: {
-    mask: function mask() {
-      this.initMask();
+    mask: function mask(newValue, oldValue) {
+      if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+        this.initMask();
+      }
     },
     value: function value(newValue) {
       if (this.maskCore) this.maskCore.setValue(newValue); // For multiple inputs support
@@ -82,49 +83,53 @@ export default {
       var _this = this;
 
       try {
-        this.maskCore = new InputMask({
-          pattern: this.mask,
-          value: '',
-          placeholderChar: this.placeholderChar,
-          /* eslint-disable quote-props */
-          formatCharacters: {
-            'a': {
-              validate: function validate(char) {
-                return (/^[A-Za-zА-Яа-я]$/.test(char)
-                );
-              }
-            },
-            'A': {
-              validate: function validate(char) {
-                return (/^[A-Za-zА-Яа-я]$/.test(char)
-                );
+        if (this.mask instanceof Object) {
+          this.maskCore = new InputMask(this.mask);
+        } else {
+          this.maskCore = new InputMask({
+            pattern: this.mask,
+            value: '',
+            placeholderChar: this.placeholderChar,
+            /* eslint-disable quote-props */
+            formatCharacters: {
+              'a': {
+                validate: function validate(char) {
+                  return (/^[A-Za-zА-Яа-я]$/.test(char)
+                  );
+                }
               },
-              transform: function transform(char) {
-                return char.toUpperCase();
-              }
-            },
-            '*': {
-              validate: function validate(char) {
-                return (/^[\dA-Za-zА-Яа-я]$/.test(char)
-                );
-              }
-            },
-            '#': {
-              validate: function validate(char) {
-                return (/^[\dA-Za-zА-Яа-я]$/.test(char)
-                );
+              'A': {
+                validate: function validate(char) {
+                  return (/^[A-Za-zА-Яа-я]$/.test(char)
+                  );
+                },
+                transform: function transform(char) {
+                  return char.toUpperCase();
+                }
               },
-              transform: function transform(char) {
-                return char.toUpperCase();
-              }
-            },
-            '+': {
-              validate: function validate() {
-                return true;
+              '*': {
+                validate: function validate(char) {
+                  return (/^[\dA-Za-zА-Яа-я]$/.test(char)
+                  );
+                }
+              },
+              '#': {
+                validate: function validate(char) {
+                  return (/^[\dA-Za-zА-Яа-я]$/.test(char)
+                  );
+                },
+                transform: function transform(char) {
+                  return char.toUpperCase();
+                }
+              },
+              '+': {
+                validate: function validate() {
+                  return true;
+                }
               }
             }
-          }
-        });
+          });
+        }
         [].concat(_toConsumableArray(this.$refs.input.value)).reduce(function (memo, item) {
           return _this.maskCore.input(item);
         }, null);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-masked-input",
   "description": "Masked input component for Vue.js 2.X",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "author": "niksmr",
   "license": "MIT",
   "homepage": "https://github.com/niksmr/vue-masked-input",

diff --git a/src/App.vue b/src/App.vue
@@ -17,7 +17,7 @@
   </ul>
 
   <h4>Date: </h4>
-  <masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"/><span>{{ date }}</span>
+  <masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /><span>{{ date }}</span>
   <p class="code">
     &lt;masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /&gt;
   </p>

diff --git a/src/MaskedInput.js b/src/MaskedInput.js
@@ -40,7 +40,7 @@ export default {
     },
     mask: {
       required: true,
-      validator:  value => !! ((value && value.length >= 1) || value instanceof Object)
+      validator: value => !!((value && value.length >= 1) || value instanceof Object),
     },
     placeholderChar: {
       type: String,
@@ -54,8 +54,10 @@ export default {
   },
 
   watch: {
-    mask() {
-      this.initMask();
+    mask(newValue, oldValue) {
+      if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+        this.initMask();
+      }
     },
     value(newValue) {
       if (this.maskCore) this.maskCore.setValue(newValue); // For multiple inputs support
@@ -70,7 +72,7 @@ export default {
     initMask() {
       try {
         if (this.mask instanceof Object) {
-          this.maskСore = new InputMask(this.mask)
+          this.maskCore = new InputMask(this.mask);
         } else {
           this.maskCore = new InputMask({
             pattern: this.mask,