From 338d21792608d7407d1ead7c3896b061fc76e8ea Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Wed, 3 Oct 2018 14:20:23 -0700 Subject: [PATCH] Add ability to pass through options to vanilla-masker --- event-listener.js | 20 ++++++++------------ index.js | 28 +++++++++++++++++++--------- src/index.js | 26 +++++++++++++++++--------- test/unit/index.js | 4 ++++ test/unit/specs/index.spec.js | 7 +++++++ 5 files changed, 55 insertions(+), 30 deletions(-) diff --git a/event-listener.js b/event-listener.js index dfce983..fe6d9d7 100644 --- a/event-listener.js +++ b/event-listener.js @@ -45,22 +45,16 @@ 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'); @@ -68,5 +62,7 @@ var initEvents = function initEvents(inputEvent, changeEvent) { inputEvent = getEventForOldBrowser('input'); changeEvent = getEventForOldBrowser('change'); } - return { inputEvent: inputEvent, changeEvent: changeEvent }; + + ev.target.dispatchEvent(inputEvent); + ev.target.dispatchEvent(changeEvent); }; \ No newline at end of file diff --git a/index.js b/index.js index 3d635af..f318e1c 100644 --- a/index.js +++ b/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; diff --git a/src/index.js b/src/index.js index 3f0ef4c..419e91c 100644 --- a/src/index.js +++ b/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 diff --git a/test/unit/index.js b/test/unit/index.js index 32f57b6..3ea3b38 100644 --- a/test/unit/index.js +++ b/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) diff --git a/test/unit/specs/index.spec.js b/test/unit/specs/index.spec.js index 5110e3d..042c046 100644 --- a/test/unit/specs/index.spec.js +++ b/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') + }); })