Skip to content

Commit 2fcff83

Browse files
author
Denis Forveille
committed
restructuring + fix format on component creation
1 parent a79331c commit 2fcff83

9 files changed

+195
-148
lines changed

‎dist/directive.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
declare function bind(el: any, binding: any, vnode: any): void;
2+
declare function componentUpdated(el: any, binding: any, vnode: any, oldVnode: any): void;
3+
declare const _default: {
4+
bind: typeof bind;
5+
componentUpdated: typeof componentUpdated;
6+
};
7+
export default _default;

‎dist/directive.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
"use strict";
2+
exports.__esModule = true;
3+
var lodash_1 = require("lodash");
4+
var masker_1 = require("./masker");
5+
var predefined_1 = require("./predefined");
6+
var utils_1 = require("./utils");
7+
var tokens_1 = require("./tokens");
8+
// Helpers
9+
function event(name) {
10+
var evt = document.createEvent('Event');
11+
evt.initEvent(name, true, true);
12+
return evt;
13+
}
14+
function getInput(el) {
15+
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
16+
var els = el.getElementsByTagName('input');
17+
if (els.length !== 1) {
18+
throw new Error("v-mask requires 1 input, found " + els.length);
19+
}
20+
else {
21+
el = els[0];
22+
}
23+
}
24+
return el;
25+
}
26+
function getConfig(binding) {
27+
var config = binding.value || {};
28+
if (Array.isArray(config) || typeof config === 'string') {
29+
config = {
30+
masked: true,
31+
mask: config,
32+
unmaskedVar: null,
33+
tokens: tokens_1["default"]
34+
};
35+
}
36+
config.mask = predefined_1["default"](config.mask) || config.mask || '';
37+
return config;
38+
}
39+
function run(el, eventName, config, vnode) {
40+
var position = el.selectionEnd;
41+
// save the character just inserted
42+
var digit = el.value[position - 1];
43+
el.value = masker_1["default"](el.value, config.mask, config.masked, config.tokens);
44+
// if the digit was changed, increment position until find the digit again
45+
while (position < el.value.length &&
46+
el.value.charAt(position - 1) !== digit) {
47+
position++;
48+
}
49+
if (el === document.activeElement) {
50+
el.setSelectionRange(position, position);
51+
setTimeout(function () {
52+
el.setSelectionRange(position, position);
53+
}, 0);
54+
}
55+
if (config.unmaskedVar) {
56+
lodash_1.set(vnode.context, config.unmaskedVar, utils_1.unmaskText(el.value));
57+
}
58+
el.dispatchEvent(event(eventName));
59+
}
60+
// Vue.js directive hooks
61+
function bind(el, binding, vnode) {
62+
if (binding.value === false) {
63+
return;
64+
}
65+
el = getInput(el);
66+
run(el, 'input', getConfig(binding), vnode);
67+
}
68+
function componentUpdated(el, binding, vnode, oldVnode) {
69+
if (binding.value === false) {
70+
return;
71+
}
72+
// Prevent firing endless events
73+
var data = vnode.data.props || vnode.data.model;
74+
var oldData = oldVnode.data.props || oldVnode.data.model;
75+
if (data && data.value === oldData.value) {
76+
return;
77+
}
78+
el = getInput(el);
79+
el.value = data ? data.value : el.value;
80+
run(el, 'input', getConfig(binding), vnode);
81+
}
82+
exports["default"] = { bind: bind, componentUpdated: componentUpdated };

‎dist/index.d.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
export declare const mask: {
2-
bind(el: any, binding: any, vnode: any): void;
3-
};
1+
import mask from './directive';
2+
declare function install(Vue: any): void;
3+
export { mask };
4+
export default install;

‎dist/index.js

+6-67
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,9 @@
11
"use strict";
22
exports.__esModule = true;
3-
var lodash_1 = require("lodash");
4-
var masker_1 = require("./masker");
5-
var predefined_1 = require("./predefined");
6-
var utils_1 = require("./utils");
7-
var tokens_1 = require("./tokens");
8-
function event(name) {
9-
var evt = document.createEvent('Event');
10-
evt.initEvent(name, true, true);
11-
return evt;
3+
var directive_1 = require("./directive");
4+
exports.mask = directive_1["default"];
5+
/* tslint:disable-next-line:variable-name */
6+
function install(Vue) {
7+
Vue.directive('mask', directive_1["default"]);
128
}
13-
exports.mask = {
14-
bind: function (el, binding, vnode) {
15-
// console.log ('bind');
16-
var config = binding.value || {};
17-
if (Array.isArray(config) || typeof config === 'string') {
18-
config = {
19-
masked: true,
20-
mask: config,
21-
unmaskedVar: null,
22-
tokens: tokens_1["default"]
23-
};
24-
}
25-
config.mask = predefined_1["default"](config.mask) || config.mask || '';
26-
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
27-
var els = el.getElementsByTagName('input');
28-
if (els.length !== 1) {
29-
throw new Error('v-mask directive requires 1 input, found '
30-
+ els.length);
31-
}
32-
else {
33-
el = els[0];
34-
}
35-
}
36-
el.oninput = function (evt) {
37-
if (!evt.isTrusted) {
38-
return;
39-
} // avoid infinite loop
40-
// by default, keep cursor at same position as before the mask
41-
var position = el.selectionEnd;
42-
// save the character just inserted
43-
var digit = el.value[position - 1];
44-
el.value = masker_1["default"](el.value, config.mask, config.masked, config.tokens);
45-
// if the digit was changed, increment position until find the digit again
46-
while (position < el.value.length &&
47-
el.value.charAt(position - 1) !== digit) {
48-
position++;
49-
}
50-
if (el === document.activeElement) {
51-
el.setSelectionRange(position, position);
52-
setTimeout(function () {
53-
el.setSelectionRange(position, position);
54-
}, 0);
55-
}
56-
if (config.unmaskedVar) {
57-
lodash_1.set(vnode.context, config.unmaskedVar, utils_1.unmaskText(el.value));
58-
}
59-
el.dispatchEvent(event('input'));
60-
};
61-
var newDisplay = masker_1["default"](el.value, config.mask, config.masked, config.tokens);
62-
if (newDisplay !== el.value) {
63-
el.value = newDisplay;
64-
if (config.unmaskedVar) {
65-
lodash_1.set(vnode.context, config.unmaskedVar, utils_1.unmaskText(el.value));
66-
}
67-
el.dispatchEvent(event('input'));
68-
}
69-
}
70-
};
9+
exports["default"] = install;

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@titou10/v-mask",
33
"description": "mask directive for vue.js that exposes the unmasked value",
4-
"version": "0.9.5",
4+
"version": "1.0.0",
55
"author": "Denis Forveille <[email protected]>",
66
"license": "MIT",
77
"keywords": [

‎src/directive.ts

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
import { set } from 'lodash';
3+
4+
import masker from './masker';
5+
import getPredefined from './predefined';
6+
import { unmaskText } from './utils';
7+
import tokens from './tokens';
8+
9+
// Helpers
10+
function event(name: string) {
11+
const evt = document.createEvent('Event');
12+
evt.initEvent(name, true, true);
13+
return evt;
14+
}
15+
16+
function getInput(el) {
17+
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
18+
const els = el.getElementsByTagName('input');
19+
if (els.length !== 1) {
20+
throw new Error(`v-mask requires 1 input, found ${els.length}`);
21+
} else { el = els[0]; }
22+
}
23+
return el;
24+
}
25+
26+
function getConfig(binding) {
27+
let config = binding.value || {};
28+
29+
if (Array.isArray(config) || typeof config === 'string') {
30+
config = {
31+
masked: true,
32+
mask: config,
33+
unmaskedVar: null,
34+
tokens
35+
};
36+
}
37+
config.mask = getPredefined(config.mask) || config.mask || '';
38+
return config;
39+
}
40+
41+
function run(el , eventName: string, config, vnode) {
42+
let position = el.selectionEnd;
43+
// save the character just inserted
44+
const digit = el.value[position - 1];
45+
el.value = masker(el.value, config.mask, config.masked, config.tokens);
46+
// if the digit was changed, increment position until find the digit again
47+
while (position < el.value.length &&
48+
el.value.charAt(position - 1) !== digit) {
49+
position++;
50+
}
51+
if (el === document.activeElement) {
52+
el.setSelectionRange(position, position);
53+
setTimeout(function() {
54+
el.setSelectionRange(position, position);
55+
}, 0);
56+
}
57+
if (config.unmaskedVar) {
58+
set(vnode.context, config.unmaskedVar, unmaskText(el.value));
59+
}
60+
el.dispatchEvent(event(eventName));
61+
}
62+
63+
// Vue.js directive hooks
64+
65+
function bind(el, binding, vnode) {
66+
if (binding.value === false) { return; }
67+
68+
el = getInput(el);
69+
run(el, 'input', getConfig(binding), vnode);
70+
}
71+
72+
function componentUpdated(el, binding, vnode, oldVnode) {
73+
if (binding.value === false) { return; }
74+
75+
// Prevent firing endless events
76+
const data = vnode.data.props || vnode.data.model;
77+
const oldData = oldVnode.data.props || oldVnode.data.model;
78+
if (data && data.value === oldData.value) { return; }
79+
80+
el = getInput(el);
81+
el.value = data ? data.value : el.value;
82+
run(el, 'input', getConfig(binding), vnode);
83+
}
84+
85+
export default { bind, componentUpdated };

‎src/dynamic-mask.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
export default function dynamicMask(maskit: any , masks: any , tokens: any) {
2-
masks = masks.slice().sort((a: any, b: any) => a.length - b.length);
3-
return function(value: any, mask: any, masked = true) {
1+
export default function dynamicMask(maskit , masks , tokens) {
2+
masks = masks.slice().sort((a, b) => a.length - b.length);
3+
return function(value, mask, masked = true) {
44
let i = 0;
55
while (i < masks.length) {
66
const currentMask = masks[i];

‎src/index.ts

+6-73
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,9 @@
1+
import mask from './directive';
12

2-
import { set } from 'lodash';
3-
4-
import masker from './masker';
5-
import getPredefined from './predefined';
6-
import { unmaskText } from './utils';
7-
import tokens from './tokens';
8-
9-
function event(name: string) {
10-
const evt = document.createEvent('Event');
11-
evt.initEvent(name, true, true);
12-
return evt;
3+
/* tslint:disable-next-line:variable-name */
4+
function install(Vue) {
5+
Vue.directive('mask', mask);
136
}
147

15-
export const mask = {
16-
bind(el: any, binding: any, vnode: any) {
17-
// console.log ('bind');
18-
let config = binding.value || {};
19-
20-
if (Array.isArray(config) || typeof config === 'string') {
21-
config = {
22-
masked: true,
23-
mask: config,
24-
unmaskedVar: null,
25-
tokens
26-
};
27-
}
28-
config.mask = getPredefined(config.mask) || config.mask || '';
29-
30-
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
31-
const els = el.getElementsByTagName('input');
32-
if (els.length !== 1) {
33-
throw new Error('v-mask directive requires 1 input, found '
34-
+ els.length);
35-
} else {
36-
el = els[0];
37-
}
38-
}
39-
40-
el.oninput = function(evt: any) {
41-
if (!evt.isTrusted) { return; } // avoid infinite loop
42-
// by default, keep cursor at same position as before the mask
43-
let position = el.selectionEnd;
44-
// save the character just inserted
45-
const digit = el.value[position - 1];
46-
el.value = masker(el.value, config.mask, config.masked, config.tokens);
47-
// if the digit was changed, increment position until find the digit again
48-
while (position < el.value.length &&
49-
el.value.charAt(position - 1) !== digit) {
50-
position++;
51-
}
52-
if (el === document.activeElement) {
53-
el.setSelectionRange(position, position);
54-
setTimeout(function() {
55-
el.setSelectionRange(position, position);
56-
}, 0);
57-
}
58-
if (config.unmaskedVar) {
59-
set(vnode.context, config.unmaskedVar, unmaskText(el.value));
60-
}
61-
el.dispatchEvent(event('input'));
62-
};
63-
64-
const newDisplay = masker(el.value,
65-
config.mask,
66-
config.masked,
67-
config.tokens);
68-
if (newDisplay !== el.value) {
69-
el.value = newDisplay;
70-
if (config.unmaskedVar) {
71-
set(vnode.context, config.unmaskedVar, unmaskText(el.value));
72-
}
73-
el.dispatchEvent(event('input'));
74-
}
75-
}
76-
};
8+
export { mask };
9+
export default install;

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"module": "CommonJS",
44
"outDir": "./dist/",
5-
"noImplicitAny": true,
5+
"noImplicitAny": false,
66
"declaration": true,
77
"strict": true
88
}

0 commit comments

Comments
 (0)