v0.11.0-alpha

Author: neves

dist/vue-the-mask.js

@@ -128,6 +128,10 @@ <h1>Currency</h1>
           <img src="https://img.shields.io/github/stars/plentz/jquery-maskmoney.svg?style=social&label=Star">
           <a href="https://github.com/plentz/jquery-maskmoney">https://github.com/plentz/jquery-maskmoney</a>
         </li>
+        <li>
+          <img src="https://img.shields.io/github/stars/autoNumeric/autoNumeric.svg?style=social&label=Star">
+          <a href="https://github.com/autoNumeric/autoNumeric">https://github.com/autoNumeric/autoNumeric</a>
+        </li>
         <li>
           <img src="https://img.shields.io/github/stars/flaviosilveira/Jquery-Price-Format.svg?style=social&label=Star">
           <a href="https://github.com/flaviosilveira/Jquery-Price-Format">https://github.com/flaviosilveira/Jquery-Price-Format</a>
@@ -143,5 +147,5 @@ <h1>Currency</h1>
       </p>
     </section>
 
-  <script type="text/javascript" src="client.b9b51cb7.js"></script></body>
+  <script type="text/javascript" src="client.30a1c666.js"></script></body>
 </html>

docs/client.30a1c666.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-the-mask",
-  "version": "0.10.1",
+  "version": "0.11.0-alpha",
   "description": "Tiny (2KB) and dependency free mask input for Vue.js",
   "main": "dist/vue-the-mask.js",
   "scripts": {

docs/client.b9b51cb7.js

@@ -1,4 +1,5 @@
 import masker from './masker'
+import tokens from './tokens'
 
 // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way
 function event (name) {
@@ -9,10 +10,25 @@ function event (name) {
 
 export default function (el, binding) {
   var config = binding.value
+  if (typeof config === 'string') {
+    config = {
+      mask: config,
+      tokens: tokens
+    }
+  }
+
+  if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
+    var els = el.getElementsByTagName('input')
+    if (els.length !== 1) {
+      throw new Error("v-mask directive requires 1 input, found " + els.length)
+    } else {
+      el = els[0]
+    }
+  }
 
   el.oninput = function (evt) {
     if (!evt.isTrusted) return // avoid infinite loop
-    /*
+    /* other properties to try to diferentiate InputEvent of Event (custom)
     InputEvent (native)
       cancelable: false
       isTrusted: true
@@ -30,7 +46,7 @@ export default function (el, binding) {
     // save the character just inserted
     var digit = el.value[position-1]
     el.value = masker(el.value, config.mask, true, config.tokens)
-    // if the digit changed, increment position until find the digit again
+    // if the digit was changed, increment position until find the digit again
     while (position < el.value.length && el.value.charAt(position-1) !== digit) {
       position++
     }

docs/index.html

@@ -160,13 +160,22 @@
       <the-mask :mask="mask" :value="value" :type="type" :masked="masked" :placeholder="placeholder"></the-mask>
     </div>
     <pre>{{code}}</pre>
+
+    <h2>Directive Usage</h2>
+
+    <div class="field" v-mask="'##/##/####'">
+      <input type="tel" placeholder="dd/mm/yyyy" />
+    </div>
+    <pre>{{directive}}</pre>
+
   </div>
 </div>
 </template>
 
 <script>
 import Field from './field'
 import TheMask from '../component'
+import mask from '../directive'
 
 export default {
   components: {Field, TheMask},
@@ -185,13 +194,15 @@ export default {
       placeholder: 'test your mask here',
       mask: '#XSAa',
       value: '12TgB',
+      directive: `<input type="tel" v-mask="'##/##/####'" />`
     }
   },
   computed: {
     code () {
       return `<the-mask mask="${this.mask}" value="${this.value}" type="${this.type}" masked="${this.masked}" placeholder="${this.placeholder}"></the-mask>`
     }
-  }
+  },
+  directives: {mask}
 }
 </script>
 

package.json

@@ -128,6 +128,10 @@ <h1>Currency</h1>
           <img src="https://img.shields.io/github/stars/plentz/jquery-maskmoney.svg?style=social&label=Star">
           <a href="https://github.com/plentz/jquery-maskmoney">https://github.com/plentz/jquery-maskmoney</a>
         </li>
+        <li>
+          <img src="https://img.shields.io/github/stars/autoNumeric/autoNumeric.svg?style=social&label=Star">
+          <a href="https://github.com/autoNumeric/autoNumeric">https://github.com/autoNumeric/autoNumeric</a>
+        </li>
         <li>
           <img src="https://img.shields.io/github/stars/flaviosilveira/Jquery-Price-Format.svg?style=social&label=Star">
           <a href="https://github.com/flaviosilveira/Jquery-Price-Format">https://github.com/flaviosilveira/Jquery-Price-Format</a>

src/directive.js

@@ -1,6 +1,6 @@
 const tokens = require('./tokens')
+const Mask = require('./directive')
 const TheMask = require('./component.vue')
-const Mask = require('./directive.vue')
 
 TheMask.tokens = tokens
 TheMask.mask = mask