Paste chars filter back, default value override fix, '+' char added

README.md

@@ -21,20 +21,21 @@ The following format characters define editable parts of the mask (see [inputmas
 * `A` - letter, forced to upper case when entered
 * `*` - alphanumeric
 * `#` - alphanumeric, forced to upper case when entered
+* `+` - any character
 
 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" />
+<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder="Phone number" type="tel" />
 ```
 
 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]" />
+<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
 ```
 
-Placeholder character is customizable (`_` by default):
+Placeholder character is customizable by `placeholder-char` attribute:
 ```vue
-<masked-input v-model="phone" mask="+\\1 (111) 111-1111" placeholderChar="-" placeholder="Phone number" type="tel" />
+<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder-char="-" placeholder="Phone number" type="tel" />
 ```
 
 ## Known issues/TODO

package.json

 {
     "name": "vue-masked-input",
     "description": "Masked input component for Vue.js 2.X",
-    "version": "0.2.6",
+    "version": "0.3.1",
     "author": "niksmr",
     "license": "MIT",
     "homepage": "https://github.com/niksmr/vue-masked-input",

src/App.vue

@@ -13,44 +13,56 @@
     <li>A – letter, forced to upper case when entered</li>
     <li>* – alphanumeric</li>
     <li># – alphanumeric, forced to upper case when entered</li>
+    <li>+ – any character</li>
   </ul>
+
+
   <h4>Date: </h4>
   <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>
+
   <h4>Phone: </h4>
-  <masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /><span>{{ phone }}</span>
+  <masked-input v-model="phone" mask="\+\1 (111) 1111-11" placeholder="Phone" /><span>{{ phone }}</span>
   <p class="code">
-    &lt;masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /&gt;
+    &lt;masked-input v-model="phone" mask="\+\1 (111) 1111-11" placeholder="Phone" /&gt;
   </p>
+
   <h4>Get a raw value: </h4>
-  <masked-input mask="+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" /><span>{{ rawVal }}</span>
+  <masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" /><span>{{ rawVal }}</span>
   <p class="code">
-    &lt;masked-input mask=&quot;+\1 (111) 1111-11&quot; placeholder=&quot;Phone&quot; <br />&nbsp;&nbsp;@input=&quot;rawVal = arguments[1]&quot; /&gt;
+    &lt;masked-input mask=&quot;\+\1 (111) 1111-11&quot; placeholder=&quot;Phone&quot; <br />&nbsp;&nbsp;@input=&quot;rawVal = arguments[1]&quot; /&gt;
   </p>
+
   <h4>Your own mask (hot re-mask available): </h4>
   <input v-model="userMask" placeholder="Mask" />
   <masked-input v-model="userField" :mask="userMask" placeholder="Text" /><span>{{ userField }}</span>
   <br />
   <br />
+
   <h4>Install </h4>
   <p class="code">
     npm install vue-masked-input --save
   </p>
+
   <h4>Use</h4>
   <p class="code">
     import MaskedInput from 'vue-masked-input'
     <br /> ... <br />components: { <br />&nbsp;&nbsp;MaskedInput <br />}
   </p>
   <br />
+
   <h4>Check <a href="https://github.com/niksmr/vue-masked-input">GitHub</a> for more</h4>
   <br />
 </div>
 </template>
 
 <script>
-import MaskedInput from './MaskedInput.vue';
+import MaskedInput from './MaskedInput.vue'
+import VeeValidate from 'vee-validate'
+import Vue from 'vue'
+Vue.use(VeeValidate)
 
 export default {
   name: 'app',

src/MaskedInput.vue

@@ -11,7 +11,7 @@
     @cut="cut(arguments[0])"
     @copy="copy(arguments[0])"
     @paste="paste(arguments[0])"
-    :disabled="mask_core===null"
+    :disabled="mask_core===null || disabled"
   />
 </template>
 
@@ -34,10 +34,6 @@ export default {
     value: {
       type: String
     },
-    default: {
-      type: String,
-      default: ''
-    },
     mask: {
       type: String,
       required: true,
@@ -48,6 +44,10 @@ export default {
       default: '_',
       validator:  value => !! (value && value.length === 1)
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
   },
 
   watch: {
@@ -69,7 +69,7 @@ export default {
       try {
         this.mask_core = new InputMask({
           pattern: this.mask,
-          value: this.default,
+          value: '',
           placeholderChar: this.placeholderChar,
           formatCharacters: {
             'a': {
@@ -86,15 +86,26 @@ export default {
               validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char),
               transform: char => char.toUpperCase()
             },
+            '+': {
+              validate: char => true,
+            },
           }
         })
-        this.$refs.input.value = this.default
-        this.mask_core.setValue(this.default)
+        for (let i = 0; i < this.$refs.input.value.length; ++i) {
+          this.mask_core.input(this.$refs.input.value[i])
+        }
         this.mask_core.setSelection({
           start: 0,
           end: 0
         })
-        this.$emit('input', this.default, this.default)
+        if (this.$refs.input.value === '') {
+          this.$emit('input', '', '')
+        }
+        else {
+          this.updateToCoreState()
+        }
+
+
       }
       catch (e) {
         console.error(e.message);
@@ -256,7 +267,10 @@ export default {
 
     paste(e) {
       e.preventDefault()
-      this.mask_core.paste(e.clipboardData.getData('text'))
+      let text = e.clipboardData.getData('text')
+      for (let i = 0; i < text.length; ++i) {
+        this.mask_core.input(text[i])
+      }
       this.updateToCoreState()
     },
 
@@ -282,12 +296,12 @@ export default {
 
     focusout(e) {
       if (this.isEmpty()) {
-        this.$refs.input.value = this.default
+        this.$refs.input.value = ''
         this.mask_core.setSelection({
           start: 0,
           end: 0
         })
-        this.$emit('input', this.default, this.default)
+        this.$emit('input', '', '')
       }
     },