@ui-toolkit/directives/lib/mask/index.js

Directives for Vue.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = require("lodash");
var masker_1 = require("./masker");
var predefined_1 = require("./predefined");
var tokens_1 = require("./tokens");
var utils_1 = require("./utils");
function run(el, eventName, config, vnode) {
    // Handle when initial value is not set
    var beforeValue = el.value === 'undefined' ? '' : el.value;
    var position = el.selectionEnd;
    // save the character just inserted
    var digit = beforeValue[position - 1];
    el.value = masker_1.default(beforeValue, config.mask, config.masked, config.tokens);
    // if the digit was changed, increment position until find the digit again
    while (position < el.value.length && el.value.charAt(position - 1) !== digit) {
        position++;
    }
    if (el === document.activeElement) {
        el.setSelectionRange(position, position);
        setTimeout(function () {
            el.setSelectionRange(position, position);
        }, 0);
    }
    // Set unmasked value if required
    if (config.unmaskedVar) {
        var ut = utils_1.unmaskText(el.value);
        if (config.nullIfEmpty && ut.trim().length === 0) {
            // Set null instead of empty if required
            lodash_1.set(vnode.context, config.unmaskedVar, null);
        }
        else {
            if (config.number) {
                // Convert to number if required
                var vNumber = parseFloat(ut);
                lodash_1.set(vnode.context, config.unmaskedVar, isNaN(vNumber) ? ut : vNumber);
            }
            else {
                lodash_1.set(vnode.context, config.unmaskedVar, ut);
            }
        }
    }
    // Notify listeners only if value changed (ie send an extra 'input' event)
    if (beforeValue !== el.value) {
        el.dispatchEvent(event(eventName));
    }
}
// -------
// Helpers
// -------
function event(name) {
    var evt = document.createEvent('Event');
    evt.initEvent(name, true, true);
    return evt;
}
function getInput(el) {
    if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
        var els = el.getElementsByTagName('input');
        if (els.length !== 1) {
            throw new Error("v-mask requires 1 input, found " + els.length);
        }
        else {
            el = els[0];
        }
    }
    return el;
}
function getConfig(binding) {
    var config = {
        masked: true,
        mask: 'null',
        unmaskedVar: null,
        nullIfEmpty: false,
        number: false,
        tokens: tokens_1.default,
    };
    if (Array.isArray(binding.value) || typeof binding.value === 'string') {
        config.mask = binding.value;
    }
    else {
        Object.assign(config, binding.value);
    }
    // Capture ".number" modifier
    var modifiers = binding.modifiers;
    config.number = modifiers && modifiers.number;
    // Convert arg into binding variable
    if (binding.arg) {
        config.unmaskedVar = binding.arg;
    }
    // Set mask from a predefined one eventually
    config.mask = predefined_1.default(config.mask) || config.mask || '';
    return config;
}
// -------------------------------
// Vue.js directive hook functions
// -------------------------------
function bind(el, binding, vnode) {
    if (binding.value === false) {
        return;
    }
    var realEl = getInput(el);
    realEl.maskHandler = function () {
        run(realEl, 'input', getConfig(binding), vnode);
    };
    realEl.addEventListener('input', realEl.maskHandler);
    run(realEl, 'input', getConfig(binding), vnode);
}
function update(el, binding, vnode) {
    if (binding.value === false || binding.value === binding.oldValue) {
        return;
    }
    var realEl = getInput(el);
    realEl.removeEventListener('input', realEl.maskHandler);
    realEl.maskHandler = function () {
        run(realEl, 'input', getConfig(binding), vnode);
    };
    realEl.addEventListener('input', realEl.maskHandler);
    run(realEl, 'input', getConfig(binding), vnode);
}
function unbind(el, binding, vnode) {
    if (binding.value === false) {
        return;
    }
    var realEl = getInput(el);
    realEl.removeEventListener('input', realEl.maskHandler);
}
exports.default = { bind: bind, unbind: unbind, update: update };