1 | 'use strict';
|
2 |
|
3 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
4 |
|
5 | var InputMask = _interopDefault(require('inputmask-core'));
|
6 |
|
7 | var KEYCODE_Z = 90;
|
8 | var KEYCODE_Y = 89;
|
9 |
|
10 | function getSelection (el) {
|
11 | var start, end, rangeEl, clone;
|
12 | if (el.selectionStart !== undefined) {
|
13 | start = el.selectionStart;
|
14 | end = el.selectionEnd;
|
15 | }
|
16 | else {
|
17 | try {
|
18 | el.focus();
|
19 | rangeEl = el.createTextRange();
|
20 | clone = rangeEl.duplicate();
|
21 |
|
22 | rangeEl.moveToBookmark(document.selection.createRange().getBookmark());
|
23 | clone.setEndPoint('EndToStart', rangeEl);
|
24 |
|
25 | start = clone.text.length;
|
26 | end = start + rangeEl.text.length;
|
27 | }
|
28 | catch (e) {}
|
29 | }
|
30 |
|
31 | return { start: start, end: end }
|
32 | }
|
33 |
|
34 | function isUndo(e) {
|
35 | return (e.ctrlKey || e.metaKey) && e.keyCode === (e.shiftKey ? KEYCODE_Y : KEYCODE_Z)
|
36 | }
|
37 |
|
38 | function isRedo(e) {
|
39 | return (e.ctrlKey || e.metaKey) && e.keyCode === (e.shiftKey ? KEYCODE_Z : KEYCODE_Y)
|
40 | }
|
41 |
|
42 | function setSelection(el, selection) {
|
43 | var rangeEl;
|
44 |
|
45 | try {
|
46 | if (el.selectionStart !== undefined) {
|
47 | el.focus();
|
48 | el.setSelectionRange(selection.start, selection.end);
|
49 | }
|
50 | else {
|
51 | el.focus();
|
52 | rangeEl = el.createTextRange();
|
53 | rangeEl.collapse(true);
|
54 | rangeEl.moveStart('character', selection.start);
|
55 | rangeEl.moveEnd('character', selection.end - selection.start);
|
56 | rangeEl.select();
|
57 | }
|
58 | }
|
59 | catch (e) {}
|
60 | }
|
61 |
|
62 | var index = {
|
63 | name: 'masked-input',
|
64 |
|
65 | render: function render(h) {
|
66 | return h('input', {
|
67 | ref: 'input',
|
68 | domProps: {
|
69 | value: this.value
|
70 | },
|
71 | on: {
|
72 | change: this._change,
|
73 | keydown: this._keydown,
|
74 | keypress: this._keypress,
|
75 | paste: this._paste
|
76 | }
|
77 | })
|
78 | },
|
79 |
|
80 | props: {
|
81 | pattern: {
|
82 | type: String,
|
83 | required: true
|
84 | },
|
85 | value: {
|
86 | type: String
|
87 | },
|
88 | formatCharacters: {
|
89 | type: Object,
|
90 | default: function () {
|
91 | return {
|
92 | 'w': {
|
93 | validate: function validate(char) { return /\w/.test(char) },
|
94 | },
|
95 | 'W': {
|
96 | validate: function validate(char) { return /\w/.test(char) },
|
97 | transform: function transform(char) { return char.toUpperCase() }
|
98 | }
|
99 | }
|
100 | }
|
101 | },
|
102 | placeholder: {
|
103 | type: String
|
104 | },
|
105 | placeholderChar: {
|
106 | type: String
|
107 | },
|
108 | hideUnderline: {
|
109 | type: Boolean
|
110 | }
|
111 | },
|
112 |
|
113 | watch: {
|
114 | pattern: function pattern() {
|
115 | this.init();
|
116 | },
|
117 | value: function value(newValue) {
|
118 | if (this.mask) { this.mask.setValue(newValue); }
|
119 | },
|
120 | },
|
121 |
|
122 | mounted: function mounted() {
|
123 | this.init();
|
124 | },
|
125 |
|
126 | methods: {
|
127 | init: function init() {
|
128 | var this$1 = this;
|
129 |
|
130 | var options = {
|
131 | pattern: this.pattern,
|
132 | value: this.value,
|
133 | formatCharacters: this.formatCharacters
|
134 | };
|
135 | if (this.placeholderChar) {
|
136 | options.placeholderChar = this.props.placeholderChar;
|
137 | }
|
138 | this.mask = new InputMask(options);
|
139 | this.$refs.input.placeholder = this.placeholder ? this.placeholder : this.hideUnderline ? '' : this.mask.emptyValue;
|
140 |
|
141 | if (this.$refs.input.value === '') {
|
142 | this.$emit('input', '', '');
|
143 | } else {
|
144 | [].concat( this.$refs.input.value ).map(function (i) {
|
145 | if(this$1.mask.input(i)) {
|
146 | this$1.$refs.input.value = this$1.mask.getValue();
|
147 | setTimeout(this$1._updateInputSelection, 0);
|
148 | }
|
149 | });
|
150 | }
|
151 | },
|
152 |
|
153 | _change: function _change(e) {
|
154 | var maskValue = this.mask.getValue();
|
155 | if (this.$refs.input.value !== maskValue) {
|
156 |
|
157 | if (this.$refs.input.value.length < maskValue.length) {
|
158 | var sizeDiff = maskValue.length - this.$refs.input.value.length;
|
159 | this._updateMaskSelection();
|
160 | this.mask.selection.end = this.mask.selection.start + sizeDiff;
|
161 | this.mask.backspace();
|
162 | }
|
163 | this._updateValue(e);
|
164 | }
|
165 | },
|
166 |
|
167 | _keydown: function _keydown(e) {
|
168 | if (isUndo(e)) {
|
169 | e.preventDefault();
|
170 | if (this.mask.undo()) {
|
171 | this._updateValue(e);
|
172 | }
|
173 | return
|
174 | }
|
175 | else if (isRedo(e)) {
|
176 | e.preventDefault();
|
177 | if (this.mask.redo()) {
|
178 | this._updateValue(e);
|
179 | }
|
180 | return
|
181 | }
|
182 |
|
183 | if (e.key === 'Backspace') {
|
184 | e.preventDefault();
|
185 | this._updateMaskSelection();
|
186 | if (this.mask.backspace()) {
|
187 | this._updateValue(e);
|
188 | }
|
189 | if (this.$refs.input.value === '') {
|
190 | this.$emit('input', '', '');
|
191 | }
|
192 | }
|
193 | },
|
194 |
|
195 | _keypress: function _keypress(e) {
|
196 | if (e.metaKey || e.altKey || e.ctrlKey || e.key === 'Enter') { return }
|
197 | e.preventDefault();
|
198 | this._updateMaskSelection();
|
199 | if (this.mask.input((e.key || e.data))) {
|
200 | this._updateValue(e);
|
201 | }
|
202 | },
|
203 |
|
204 | _paste: function _paste(e) {
|
205 | e.preventDefault();
|
206 | this._updateMaskSelection();
|
207 | if (this.mask.paste(e.clipboardData.getData('Text'))) {
|
208 | this._updateValue(e);
|
209 | }
|
210 | },
|
211 |
|
212 | _updateMaskSelection: function _updateMaskSelection() {
|
213 | this.mask.selection = getSelection(this.$refs.input);
|
214 | },
|
215 |
|
216 | _updateInputSelection: function _updateInputSelection() {
|
217 | setSelection(this.$refs.input, this.mask.selection);
|
218 | },
|
219 |
|
220 | _getDisplayValue: function _getDisplayValue() {
|
221 | var value = this.mask.getValue();
|
222 | return value === this.mask.emptyValue ? '' : value
|
223 | },
|
224 |
|
225 | _updateValue: function _updateValue(e) {
|
226 | this.$refs.input.value = this._getDisplayValue();
|
227 | this.$emit('input', this.$refs.input.value, this.mask.getRawValue());
|
228 | this._updateInputSelection();
|
229 | if (this.change) {
|
230 | this.change(e);
|
231 | }
|
232 | }
|
233 | }
|
234 | };
|
235 |
|
236 | module.exports = index;
|