Add ability to pass through options to vanilla-masker

event-listener.js

@@ -45,28 +45,24 @@ var maskInput = function maskInput(mask, input) {
   }
 };
 
-var broadcast = function broadcast(ev) {
-  var _initEvents;
-
-  var inputEvent = null;
-  var changeEvent = null((_initEvents = initEvents(inputEvent, changeEvent), inputEvent = _initEvents.inputEvent, changeEvent = _initEvents.changeEvent, _initEvents));
-
-  ev.target.dispatchEvent(inputEvent);
-  ev.target.dispatchEvent(changeEvent);
-};
-
 var getEventForOldBrowser = function getEventForOldBrowser(eventType) {
   var ev = document.createEvent('Event');
   ev.initEvent(eventType, false, false);
+  return ev;
 };
 
-var initEvents = function initEvents(inputEvent, changeEvent) {
+var broadcast = function broadcast(ev) {
+  var inputEvent = null;
+  var changeEvent = null;
+
   try {
     inputEvent = new Event('input');
     changeEvent = new Event('change');
   } catch (err) {
     inputEvent = getEventForOldBrowser('input');
     changeEvent = getEventForOldBrowser('change');
   }
-  return { inputEvent: inputEvent, changeEvent: changeEvent };
+
+  ev.target.dispatchEvent(inputEvent);
+  ev.target.dispatchEvent(changeEvent);
 };

index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _vanillaMasker = require('vanilla-masker');
 
 var _vanillaMasker2 = _interopRequireDefault(_vanillaMasker);
@@ -16,14 +18,14 @@ var _eventListener = require('./event-listener');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var applyMaskToDefault = function applyMaskToDefault(el, mask, isMoney) {
+var applyMaskToDefault = function applyMaskToDefault(el, mask, isMoney, opts) {
   var inputText = getInputText(el);
   var isMoneyType = isMoney && inputText.value.length > 0;
 
   if (isMoneyType) {
-    inputText.value = _vanillaMasker2.default.toMoney(inputText.value, { showSignal: true });
+    inputText.value = _vanillaMasker2.default.toMoney(inputText.value, Object.assign({ showSignal: true }, opts));
   } else {
-    inputText.value = mask && mask.length > 0 ? _vanillaMasker2.default.toPattern(inputText.value, mask) : inputText.value;
+    inputText.value = mask && mask.length > 0 ? _vanillaMasker2.default.toPattern(inputText.value, Object.assign({ pattern: mask }, opts)) : inputText.value;
   }
 };
 
@@ -35,31 +37,39 @@ var setMaxLength = function setMaxLength(inputText) {
 var getInputText = function getInputText(el) {
   return !el instanceof HTMLInputElement ? el.querySelector('input') : el;
 };
+var getOpts = function getOpts(value) {
+  if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
+    return value;
+  }
+  return { value: value };
+};
 
 exports.default = {
   bind: function bind(el, binding) {
     if (binding.value.length < 1) return;
 
     var inputText = getInputText(el);
-    var isMoney = binding.value === 'money';
-    inputText.setAttribute('data-mask', binding.value);
+    var opts = getOpts(binding.value);
+    var isMoney = opts.value === 'money';
+    inputText.setAttribute('data-mask', opts.value);
     inputText.addEventListener('keyup', _eventListener.inputHandler);
 
     !isMoney && setMaxLength(inputText);
-    applyMaskToDefault(inputText, binding.value, isMoney);
+    applyMaskToDefault(inputText, opts.value, isMoney, opts);
   },
   update: function update(el, binding) {
     // this is only for v-model
     if (binding.value.length < 1) return;
     var inputText = getInputText(el);
-    var isMoney = binding.value === 'money';
+    var opts = getOpts(binding.value);
+    var isMoney = opts.value === 'money';
 
     if (!isMoney) {
-      inputText.setAttribute('data-mask', binding.value);
+      inputText.setAttribute('data-mask', opts.value);
       inputText.setAttribute('maxlength', inputText.getAttribute('data-mask').length);
     }
 
-    applyMaskToDefault(inputText, binding.value, isMoney);
+    applyMaskToDefault(inputText, opts.value, isMoney, opts);
   },
   unbind: function unbind(el, binding) {
     if (binding.value.length < 1) return;

src/index.js

@@ -4,15 +4,15 @@ import VMasker from 'vanilla-masker'
 import Vue from 'vue'
 import { inputHandler } from './event-listener'
 
-const applyMaskToDefault = (el, mask, isMoney) => {
+const applyMaskToDefault = (el, mask, isMoney, opts) => {
   const inputText = getInputText(el)
   const isMoneyType = isMoney && inputText.value.length > 0
 
   if (isMoneyType) {
-    inputText.value = VMasker.toMoney(inputText.value, {showSignal: true})
+    inputText.value = VMasker.toMoney(inputText.value, Object.assign({showSignal: true}, opts))
   } else {
     inputText.value = mask && mask.length > 0
-      ? VMasker.toPattern(inputText.value, mask)
+      ? VMasker.toPattern(inputText.value, Object.assign({pattern: mask}, opts))
       : inputText.value
   }
 }
@@ -25,31 +25,39 @@ const setMaxLength = (inputText) => {
 const getInputText = (el) => {
   return !el instanceof HTMLInputElement ? el.querySelector('input') : el
 }
+const getOpts = (value) => {
+  if (typeof value === 'object') {
+    return value;
+  }
+  return { value }
+};
 
 export default {
   bind (el, binding) {
     if(binding.value.length < 1) return
 
     const inputText = getInputText(el)
-    const isMoney = binding.value === 'money'
-    inputText.setAttribute('data-mask', binding.value)
+    const opts = getOpts(binding.value);
+    const isMoney = opts.value === 'money'
+    inputText.setAttribute('data-mask', opts.value)
     inputText.addEventListener('keyup', inputHandler)
 
     !isMoney && setMaxLength(inputText)
-    applyMaskToDefault(inputText, binding.value, isMoney)
+    applyMaskToDefault(inputText, opts.value, isMoney, opts)
   },
   update(el, binding) {
     // this is only for v-model
     if(binding.value.length < 1) return
     const inputText = getInputText(el)
-    const isMoney = binding.value === 'money'
+    const opts = getOpts(binding.value);
+    const isMoney = opts.value === 'money'
 
     if(!isMoney) {
-      inputText.setAttribute('data-mask', binding.value)
+      inputText.setAttribute('data-mask', opts.value)
       inputText.setAttribute('maxlength', inputText.getAttribute('data-mask').length)
     }
 
-    applyMaskToDefault(inputText ,binding.value, isMoney)
+    applyMaskToDefault(inputText, opts.value, isMoney, opts)
   },
   unbind(el, binding) {
     if(binding.value.length < 1) return

test/unit/index.js

@@ -1,10 +1,14 @@
 import Vue from 'vue'
+// Polyfill Object.assign for PhantomJS
+require('babel-polyfill');
+
 Vue.config.productionTip = false
 
 // Polyfill fn.bind() for PhantomJS
 /* eslint-disable no-extend-native */
 Function.prototype.bind = require('function-bind')
 
+
 // require all test files (files that ends with .spec.js)
 const testsContext = require.context('./specs', true, /\.spec$/)
 testsContext.keys().forEach(testsContext)

test/unit/specs/index.spec.js

@@ -44,4 +44,11 @@ describe('Directive', () => {
     index.bind(el ,binding)
     expect(el.value).to.be.equal('ABC-9424')
   })
+
+  it('should allow passing options', () => {
+    el.value = '123999'
+    binding.value = {value: 'money', separator: '.', delimiter: ','};
+    index.bind(el ,binding)
+    expect(el.value).to.be.equal('1,239.99')
+  });
 })