@progress/kendo-vue-inputs 3.3.2 → 3.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-vue-inputs.js +1 -1
- package/dist/es/input/Input.d.ts +29 -1
- package/dist/es/input/Input.js +72 -27
- package/dist/es/numerictextbox/utils/index.d.ts +17 -1
- package/dist/es/numerictextbox/utils/index.js +58 -6
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/input/Input.d.ts +29 -1
- package/dist/npm/input/Input.js +71 -26
- package/dist/npm/numerictextbox/utils/index.d.ts +17 -1
- package/dist/npm/numerictextbox/utils/index.js +63 -7
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +10 -10
package/dist/es/input/Input.d.ts
CHANGED
|
@@ -89,6 +89,34 @@ export interface InputProps extends FormComponentProps {
|
|
|
89
89
|
* Specifies the placeholder of an `input` element. Used to define if the input is empty.
|
|
90
90
|
*/
|
|
91
91
|
placeholder?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Defines a string prop that controls the input icon.
|
|
94
|
+
*/
|
|
95
|
+
iconName: String;
|
|
96
|
+
/**
|
|
97
|
+
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
98
|
+
*/
|
|
99
|
+
inputPrefix: Boolean | String | Object | Function;
|
|
100
|
+
/**
|
|
101
|
+
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
102
|
+
*/
|
|
103
|
+
inputSuffix: Boolean | String | Object | Function;
|
|
104
|
+
/**
|
|
105
|
+
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
|
|
106
|
+
*/
|
|
107
|
+
showValidationIcon: Boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
|
|
110
|
+
*/
|
|
111
|
+
showLoadingIcon: Boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
|
|
114
|
+
*/
|
|
115
|
+
showClearButton: Boolean;
|
|
116
|
+
/**
|
|
117
|
+
* Defines additional class to the inner input element.
|
|
118
|
+
*/
|
|
119
|
+
inputClass: String;
|
|
92
120
|
}
|
|
93
121
|
/**
|
|
94
122
|
* @hidden
|
|
@@ -121,7 +149,7 @@ export interface InputMethods {
|
|
|
121
149
|
isInvalid: (state: any) => any;
|
|
122
150
|
setValidity: () => void;
|
|
123
151
|
handleInput?: () => void;
|
|
124
|
-
handleChange
|
|
152
|
+
handleChange: (event: any) => void;
|
|
125
153
|
handleKeyup?: (event: any) => void;
|
|
126
154
|
handleKeydown?: (event: any) => void;
|
|
127
155
|
handleKeypress?: (event: any) => void;
|
package/dist/es/input/Input.js
CHANGED
|
@@ -19,7 +19,7 @@ import * as Vue from 'vue';
|
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
21
|
var ref = allVue.ref;
|
|
22
|
-
import { guid, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
|
|
22
|
+
import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
|
|
23
23
|
import { packageMetadata } from '../package-metadata';
|
|
24
24
|
import { FloatingLabel } from '@progress/kendo-vue-labels';
|
|
25
25
|
var InputVue2 = {
|
|
@@ -99,7 +99,14 @@ var InputVue2 = {
|
|
|
99
99
|
validityStyles: {
|
|
100
100
|
type: Boolean,
|
|
101
101
|
default: true
|
|
102
|
-
}
|
|
102
|
+
},
|
|
103
|
+
iconName: String,
|
|
104
|
+
inputPrefix: templateDefinition,
|
|
105
|
+
inputSuffix: templateDefinition,
|
|
106
|
+
showValidationIcon: Boolean,
|
|
107
|
+
showLoadingIcon: Boolean,
|
|
108
|
+
showClearButton: Boolean,
|
|
109
|
+
inputClass: String
|
|
103
110
|
},
|
|
104
111
|
data: function data() {
|
|
105
112
|
return {
|
|
@@ -138,12 +145,15 @@ var InputVue2 = {
|
|
|
138
145
|
var _this = this;
|
|
139
146
|
|
|
140
147
|
var h = gh || createElement;
|
|
141
|
-
var listeners = this.v3 ? this.$attrs : this.$listeners;
|
|
142
148
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
143
149
|
var _a = this.$props,
|
|
144
150
|
label = _a.label,
|
|
145
151
|
id = _a.id,
|
|
146
|
-
required = _a.required
|
|
152
|
+
required = _a.required,
|
|
153
|
+
iconName = _a.iconName,
|
|
154
|
+
showValidationIcon = _a.showValidationIcon,
|
|
155
|
+
showLoadingIcon = _a.showLoadingIcon,
|
|
156
|
+
showClearButton = _a.showClearButton;
|
|
147
157
|
var inputId = id || this._inputId;
|
|
148
158
|
var textbox = h('input', __assign(__assign({
|
|
149
159
|
domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
|
|
@@ -183,9 +193,47 @@ var InputVue2 = {
|
|
|
183
193
|
onAnimationstart: this.handleAutoFill,
|
|
184
194
|
onAnimationend: this.handleAutoFillEnd
|
|
185
195
|
}));
|
|
196
|
+
var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
|
|
197
|
+
var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
|
|
198
|
+
var inputPrefix = getTemplate.call(this, {
|
|
199
|
+
h: h,
|
|
200
|
+
template: inputPrefixTemplate,
|
|
201
|
+
additionalProps: {
|
|
202
|
+
value: this.computedValue,
|
|
203
|
+
valid: isValid
|
|
204
|
+
}
|
|
205
|
+
});
|
|
206
|
+
var inputSuffix = getTemplate.call(this, {
|
|
207
|
+
h: h,
|
|
208
|
+
template: inputSuffixTemplate,
|
|
209
|
+
additionalProps: {
|
|
210
|
+
value: this.computedValue,
|
|
211
|
+
valid: isValid
|
|
212
|
+
}
|
|
213
|
+
});
|
|
186
214
|
var inputWrapper = h("span", {
|
|
187
215
|
"class": this.inputWrapperClass()
|
|
188
|
-
}, [
|
|
216
|
+
}, [iconName && h("span", {
|
|
217
|
+
"class": "k-input-icon k-icon k-i-" + iconName
|
|
218
|
+
}), this.$props.inputPrefix && h("span", {
|
|
219
|
+
"class": "k-input-prefix"
|
|
220
|
+
}, [inputPrefix]), textbox, this.$props.inputSuffix && h("span", {
|
|
221
|
+
"class": "k-input-suffix"
|
|
222
|
+
}, [inputSuffix]), showValidationIcon && isValid && h("span", {
|
|
223
|
+
"class": "k-input-validation-icon k-icon k-i-check"
|
|
224
|
+
}), showValidationIcon && !isValid && h("span", {
|
|
225
|
+
"class": "k-input-validation-icon k-icon k-i-warning"
|
|
226
|
+
}), showLoadingIcon && h("span", {
|
|
227
|
+
"class": "k-input-loading-icon k-icon k-i-loading"
|
|
228
|
+
}), showClearButton && this.computedValue && h("span", {
|
|
229
|
+
onClick: this.clearClick,
|
|
230
|
+
on: this.v3 ? undefined : {
|
|
231
|
+
"click": this.clearClick
|
|
232
|
+
},
|
|
233
|
+
"class": "k-clear-value"
|
|
234
|
+
}, [h("span", {
|
|
235
|
+
"class": "k-icon k-i-x"
|
|
236
|
+
})])]);
|
|
189
237
|
return label ? // @ts-ignore function children
|
|
190
238
|
h(FloatingLabel, {
|
|
191
239
|
label: label,
|
|
@@ -226,6 +274,9 @@ var InputVue2 = {
|
|
|
226
274
|
handleKeypress: function handleKeypress(e) {
|
|
227
275
|
this.$emit('keypress', e);
|
|
228
276
|
},
|
|
277
|
+
clearClick: function clearClick(event) {
|
|
278
|
+
this.emitUpdate(event, 'change', '');
|
|
279
|
+
},
|
|
229
280
|
focus: function focus() {
|
|
230
281
|
if (this._input) {
|
|
231
282
|
this._input.focus();
|
|
@@ -265,32 +316,26 @@ var InputVue2 = {
|
|
|
265
316
|
}
|
|
266
317
|
},
|
|
267
318
|
handleInput: function handleInput(event) {
|
|
268
|
-
|
|
269
|
-
this.$data.currentValue = event.target.value;
|
|
270
|
-
this.$data.valueDuringOnChange = event.target.value;
|
|
271
|
-
this.$nextTick(function () {
|
|
272
|
-
that.$emit('changemodel', event.target.value);
|
|
273
|
-
that.$emit('update:modelValue', event.target.value);
|
|
274
|
-
that.$emit('input', {
|
|
275
|
-
event: event,
|
|
276
|
-
value: event.target.value,
|
|
277
|
-
component: that,
|
|
278
|
-
target: event.target,
|
|
279
|
-
validity: that.validity()
|
|
280
|
-
});
|
|
281
|
-
that.$data.valueDuringOnChange = undefined;
|
|
282
|
-
});
|
|
319
|
+
this.emitUpdate(event, 'input', event.target.value);
|
|
283
320
|
},
|
|
284
321
|
handleChange: function handleChange(event) {
|
|
322
|
+
this.emitUpdate(event, 'change', event.target.value);
|
|
323
|
+
},
|
|
324
|
+
emitUpdate: function emitUpdate(event, eventName, value) {
|
|
285
325
|
var that = this;
|
|
286
|
-
|
|
287
|
-
this
|
|
326
|
+
|
|
327
|
+
if (this.disabled) {
|
|
328
|
+
return;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
this.$data.currentValue = value;
|
|
332
|
+
this.$data.valueDuringOnChange = value;
|
|
288
333
|
this.$nextTick(function () {
|
|
289
|
-
that.$emit('changemodel',
|
|
290
|
-
that.$emit('update:modelValue',
|
|
291
|
-
that.$emit(
|
|
334
|
+
that.$emit('changemodel', value);
|
|
335
|
+
that.$emit('update:modelValue', value);
|
|
336
|
+
that.$emit(eventName, {
|
|
292
337
|
event: event,
|
|
293
|
-
value:
|
|
338
|
+
value: value,
|
|
294
339
|
component: that,
|
|
295
340
|
target: event.target,
|
|
296
341
|
validity: that.validity()
|
|
@@ -331,7 +376,7 @@ var InputVue2 = {
|
|
|
331
376
|
return _a = {
|
|
332
377
|
'k-textbox': true,
|
|
333
378
|
'k-input': true
|
|
334
|
-
}, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a;
|
|
379
|
+
}, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
|
|
335
380
|
}
|
|
336
381
|
},
|
|
337
382
|
computed: {
|
|
@@ -12,6 +12,18 @@ export declare const getStateOrPropsValue: (value: number | null | undefined, st
|
|
|
12
12
|
* @hidden
|
|
13
13
|
*/
|
|
14
14
|
export declare const formatValue: (value: string | number | null | undefined, format: string | NumberFormatOptions | undefined, intlService: any) => string;
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
18
|
+
export declare const fractionLength: (value: number) => number;
|
|
19
|
+
/**
|
|
20
|
+
* @hidden
|
|
21
|
+
*/
|
|
22
|
+
export declare const limitPrecision: (precision: number) => number;
|
|
23
|
+
/**
|
|
24
|
+
* @hidden
|
|
25
|
+
*/
|
|
26
|
+
export declare const toFixedPrecision: (value: number, precision: number) => number;
|
|
15
27
|
/**
|
|
16
28
|
* @hidden
|
|
17
29
|
*/
|
|
@@ -48,6 +60,10 @@ export declare const setInvalid: (newState: NumericTextBoxData, format: string |
|
|
|
48
60
|
* @hidden
|
|
49
61
|
*/
|
|
50
62
|
export declare const isMinusSymbolAdded: (newState: NumericTextBoxData, symbols: any) => boolean;
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
export declare const isMinusSymbolRemoved: (newState: NumericTextBoxData, symbols: any) => boolean;
|
|
51
67
|
/**
|
|
52
68
|
* @hidden
|
|
53
69
|
*/
|
|
@@ -100,4 +116,4 @@ export declare const changeBasedSelection: (currentValue: string, nextValue: str
|
|
|
100
116
|
/**
|
|
101
117
|
* @hidden
|
|
102
118
|
*/
|
|
103
|
-
export declare const sanitizeNumber: (state:
|
|
119
|
+
export declare const sanitizeNumber: (state: NumericTextBoxData, format: string | NumberFormatOptions | undefined, intlService: any) => NumericTextBoxData;
|
|
@@ -20,6 +20,7 @@ var MIN_DECIMAL = 1;
|
|
|
20
20
|
var ONE_NUMBER = 1;
|
|
21
21
|
var ZERO_NUMBER = 0;
|
|
22
22
|
var DIGITS_REGEX = /\d/;
|
|
23
|
+
var MAX_PRECISION = 15;
|
|
23
24
|
/**
|
|
24
25
|
* @hidden
|
|
25
26
|
*/
|
|
@@ -63,8 +64,39 @@ export var formatValue = function formatValue(value, format, intlService) {
|
|
|
63
64
|
* @hidden
|
|
64
65
|
*/
|
|
65
66
|
|
|
67
|
+
export var fractionLength = function fractionLength(value) {
|
|
68
|
+
return (String(value).split('.')[1] || '').length;
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* @hidden
|
|
72
|
+
*/
|
|
73
|
+
|
|
74
|
+
var maxFractionLength = function maxFractionLength(value1, value2) {
|
|
75
|
+
return Math.max(fractionLength(value1), fractionLength(value2));
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* @hidden
|
|
79
|
+
*/
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
export var limitPrecision = function limitPrecision(precision) {
|
|
83
|
+
return Math.min(precision, MAX_PRECISION);
|
|
84
|
+
};
|
|
85
|
+
/**
|
|
86
|
+
* @hidden
|
|
87
|
+
*/
|
|
88
|
+
|
|
89
|
+
export var toFixedPrecision = function toFixedPrecision(value, precision) {
|
|
90
|
+
var maxPrecision = limitPrecision(precision);
|
|
91
|
+
return parseFloat(value.toFixed(maxPrecision));
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* @hidden
|
|
95
|
+
*/
|
|
96
|
+
|
|
66
97
|
export var increaseValue = function increaseValue(value, newState, step, min, max, format, intlService) {
|
|
67
|
-
var
|
|
98
|
+
var maxPrecision = maxFractionLength(value || 0, step || 0);
|
|
99
|
+
var increasedValue = rangeValue(toFixedPrecision((value || 0) + (step || 0), maxPrecision), min, max);
|
|
68
100
|
newState.eventValue = increasedValue;
|
|
69
101
|
newState.currentLooseValue = formatValue(increasedValue, format, intlService);
|
|
70
102
|
newState.selectionStart = newState.selectionEnd = getLastNumberIndex(newState.currentLooseValue, DIGITS_REGEX);
|
|
@@ -74,7 +106,8 @@ export var increaseValue = function increaseValue(value, newState, step, min, ma
|
|
|
74
106
|
*/
|
|
75
107
|
|
|
76
108
|
export var decreaseValue = function decreaseValue(value, newState, step, min, max, format, intlService) {
|
|
77
|
-
var
|
|
109
|
+
var maxPrecision = maxFractionLength(value || 0, step || 0);
|
|
110
|
+
var decreasedValue = rangeValue(toFixedPrecision((value || 0) - (step || 0), maxPrecision), min, max);
|
|
78
111
|
newState.eventValue = decreasedValue;
|
|
79
112
|
newState.currentLooseValue = formatValue(decreasedValue, format, intlService);
|
|
80
113
|
newState.selectionStart = newState.selectionEnd = getLastNumberIndex(newState.currentLooseValue, DIGITS_REGEX);
|
|
@@ -200,6 +233,15 @@ export var isMinusSymbolAdded = function isMinusSymbolAdded(newState, symbols) {
|
|
|
200
233
|
* @hidden
|
|
201
234
|
*/
|
|
202
235
|
|
|
236
|
+
export var isMinusSymbolRemoved = function isMinusSymbolRemoved(newState, symbols) {
|
|
237
|
+
var newText = String(newState.currentLooseValue);
|
|
238
|
+
var oldText = String(newState.prevLooseValue);
|
|
239
|
+
return newText.indexOf(symbols.minusSign) === -1 && oldText.indexOf(symbols.minusSign) !== -1;
|
|
240
|
+
};
|
|
241
|
+
/**
|
|
242
|
+
* @hidden
|
|
243
|
+
*/
|
|
244
|
+
|
|
203
245
|
export var isDecimalDuplicated = function isDecimalDuplicated(newState, symbols) {
|
|
204
246
|
var newText = String(newState.currentLooseValue);
|
|
205
247
|
return newText.split(symbols.decimal).length > 2;
|
|
@@ -343,8 +385,7 @@ export var changeBasedSelection = function changeBasedSelection(currentValue, ne
|
|
|
343
385
|
* @hidden
|
|
344
386
|
*/
|
|
345
387
|
|
|
346
|
-
export var sanitizeNumber = function sanitizeNumber(state,
|
|
347
|
-
format, intlService) {
|
|
388
|
+
export var sanitizeNumber = function sanitizeNumber(state, format, intlService) {
|
|
348
389
|
var newState = __assign({}, state);
|
|
349
390
|
|
|
350
391
|
var prevLooseValue = newState.prevLooseValue;
|
|
@@ -382,6 +423,7 @@ format, intlService) {
|
|
|
382
423
|
}) !== -1;
|
|
383
424
|
}) !== 1;
|
|
384
425
|
var isDelete = currentLooseValueAsString.length > 0 && currentLooseValueAsString.length < prevLooseValueAsString.length;
|
|
426
|
+
var isPercentFormat = format && format[0] === 'p' && currentLooseValueAsString && currentLooseValueAsString.indexOf(symbols.percentSign) === -1;
|
|
385
427
|
|
|
386
428
|
if (!newState.isPaste) {
|
|
387
429
|
// 1. Empty input
|
|
@@ -408,6 +450,12 @@ format, intlService) {
|
|
|
408
450
|
var oldNumberStart = getFirstNumberIndex(prevLooseValueAsString, DIGITS_REGEX);
|
|
409
451
|
setSelection(newState, newState.selectionEnd - 1 + (currentNumberStart - oldNumberStart), newState.currentLooseValue, formatInfo);
|
|
410
452
|
return newState;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
if (isMinusSymbolRemoved(newState, symbols)) {
|
|
456
|
+
newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);
|
|
457
|
+
setSelection(newState, newState.selectionStart, newState.currentLooseValue, formatInfo);
|
|
458
|
+
return newState;
|
|
411
459
|
} // 4. Check is decimal symbol
|
|
412
460
|
|
|
413
461
|
|
|
@@ -433,7 +481,7 @@ format, intlService) {
|
|
|
433
481
|
} // 6. Percent format
|
|
434
482
|
|
|
435
483
|
|
|
436
|
-
if (
|
|
484
|
+
if (isPercentFormat) {
|
|
437
485
|
newState.eventValue = intlService.parseNumber(currentLooseValueAsString, format) / 100;
|
|
438
486
|
newState.currentLooseValue = formatValue(newState.eventValue, format, intlService);
|
|
439
487
|
return newState;
|
|
@@ -442,7 +490,7 @@ format, intlService) {
|
|
|
442
490
|
|
|
443
491
|
var numericSymbols = String(newState.currentLooseValue).replace(/[^\d]/g, '');
|
|
444
492
|
|
|
445
|
-
if (numericSymbols.length >
|
|
493
|
+
if (numericSymbols.length > MAX_PRECISION) {
|
|
446
494
|
setInvalid(newState, format, formatInfo, intlService);
|
|
447
495
|
return newState;
|
|
448
496
|
} // 8. Check prefix / suffix for modifications
|
|
@@ -575,6 +623,10 @@ format, intlService) {
|
|
|
575
623
|
|
|
576
624
|
newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);
|
|
577
625
|
|
|
626
|
+
if (isPercentFormat) {
|
|
627
|
+
newState.eventValue = newState.eventValue / 100;
|
|
628
|
+
}
|
|
629
|
+
|
|
578
630
|
if (typeof newState.eventValue === 'number') {
|
|
579
631
|
var nextLooseValue = formatValue(newState.eventValue, format, intlService); // First digit add
|
|
580
632
|
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-inputs',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1653913910,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -89,6 +89,34 @@ export interface InputProps extends FormComponentProps {
|
|
|
89
89
|
* Specifies the placeholder of an `input` element. Used to define if the input is empty.
|
|
90
90
|
*/
|
|
91
91
|
placeholder?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Defines a string prop that controls the input icon.
|
|
94
|
+
*/
|
|
95
|
+
iconName: String;
|
|
96
|
+
/**
|
|
97
|
+
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
98
|
+
*/
|
|
99
|
+
inputPrefix: Boolean | String | Object | Function;
|
|
100
|
+
/**
|
|
101
|
+
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
102
|
+
*/
|
|
103
|
+
inputSuffix: Boolean | String | Object | Function;
|
|
104
|
+
/**
|
|
105
|
+
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
|
|
106
|
+
*/
|
|
107
|
+
showValidationIcon: Boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
|
|
110
|
+
*/
|
|
111
|
+
showLoadingIcon: Boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
|
|
114
|
+
*/
|
|
115
|
+
showClearButton: Boolean;
|
|
116
|
+
/**
|
|
117
|
+
* Defines additional class to the inner input element.
|
|
118
|
+
*/
|
|
119
|
+
inputClass: String;
|
|
92
120
|
}
|
|
93
121
|
/**
|
|
94
122
|
* @hidden
|
|
@@ -121,7 +149,7 @@ export interface InputMethods {
|
|
|
121
149
|
isInvalid: (state: any) => any;
|
|
122
150
|
setValidity: () => void;
|
|
123
151
|
handleInput?: () => void;
|
|
124
|
-
handleChange
|
|
152
|
+
handleChange: (event: any) => void;
|
|
125
153
|
handleKeyup?: (event: any) => void;
|
|
126
154
|
handleKeydown?: (event: any) => void;
|
|
127
155
|
handleKeypress?: (event: any) => void;
|
package/dist/npm/input/Input.js
CHANGED
|
@@ -110,7 +110,14 @@ var InputVue2 = {
|
|
|
110
110
|
validityStyles: {
|
|
111
111
|
type: Boolean,
|
|
112
112
|
default: true
|
|
113
|
-
}
|
|
113
|
+
},
|
|
114
|
+
iconName: String,
|
|
115
|
+
inputPrefix: kendo_vue_common_1.templateDefinition,
|
|
116
|
+
inputSuffix: kendo_vue_common_1.templateDefinition,
|
|
117
|
+
showValidationIcon: Boolean,
|
|
118
|
+
showLoadingIcon: Boolean,
|
|
119
|
+
showClearButton: Boolean,
|
|
120
|
+
inputClass: String
|
|
114
121
|
},
|
|
115
122
|
data: function data() {
|
|
116
123
|
return {
|
|
@@ -149,12 +156,15 @@ var InputVue2 = {
|
|
|
149
156
|
var _this = this;
|
|
150
157
|
|
|
151
158
|
var h = gh || createElement;
|
|
152
|
-
var listeners = this.v3 ? this.$attrs : this.$listeners;
|
|
153
159
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
154
160
|
var _a = this.$props,
|
|
155
161
|
label = _a.label,
|
|
156
162
|
id = _a.id,
|
|
157
|
-
required = _a.required
|
|
163
|
+
required = _a.required,
|
|
164
|
+
iconName = _a.iconName,
|
|
165
|
+
showValidationIcon = _a.showValidationIcon,
|
|
166
|
+
showLoadingIcon = _a.showLoadingIcon,
|
|
167
|
+
showClearButton = _a.showClearButton;
|
|
158
168
|
var inputId = id || this._inputId;
|
|
159
169
|
var textbox = h('input', __assign(__assign({
|
|
160
170
|
domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
|
|
@@ -194,9 +204,47 @@ var InputVue2 = {
|
|
|
194
204
|
onAnimationstart: this.handleAutoFill,
|
|
195
205
|
onAnimationend: this.handleAutoFillEnd
|
|
196
206
|
}));
|
|
207
|
+
var inputPrefixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputPrefix, kendo_vue_common_1.getListeners.call(this));
|
|
208
|
+
var inputSuffixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputSuffix, kendo_vue_common_1.getListeners.call(this));
|
|
209
|
+
var inputPrefix = kendo_vue_common_1.getTemplate.call(this, {
|
|
210
|
+
h: h,
|
|
211
|
+
template: inputPrefixTemplate,
|
|
212
|
+
additionalProps: {
|
|
213
|
+
value: this.computedValue,
|
|
214
|
+
valid: isValid
|
|
215
|
+
}
|
|
216
|
+
});
|
|
217
|
+
var inputSuffix = kendo_vue_common_1.getTemplate.call(this, {
|
|
218
|
+
h: h,
|
|
219
|
+
template: inputSuffixTemplate,
|
|
220
|
+
additionalProps: {
|
|
221
|
+
value: this.computedValue,
|
|
222
|
+
valid: isValid
|
|
223
|
+
}
|
|
224
|
+
});
|
|
197
225
|
var inputWrapper = h("span", {
|
|
198
226
|
"class": this.inputWrapperClass()
|
|
199
|
-
}, [
|
|
227
|
+
}, [iconName && h("span", {
|
|
228
|
+
"class": "k-input-icon k-icon k-i-" + iconName
|
|
229
|
+
}), this.$props.inputPrefix && h("span", {
|
|
230
|
+
"class": "k-input-prefix"
|
|
231
|
+
}, [inputPrefix]), textbox, this.$props.inputSuffix && h("span", {
|
|
232
|
+
"class": "k-input-suffix"
|
|
233
|
+
}, [inputSuffix]), showValidationIcon && isValid && h("span", {
|
|
234
|
+
"class": "k-input-validation-icon k-icon k-i-check"
|
|
235
|
+
}), showValidationIcon && !isValid && h("span", {
|
|
236
|
+
"class": "k-input-validation-icon k-icon k-i-warning"
|
|
237
|
+
}), showLoadingIcon && h("span", {
|
|
238
|
+
"class": "k-input-loading-icon k-icon k-i-loading"
|
|
239
|
+
}), showClearButton && this.computedValue && h("span", {
|
|
240
|
+
onClick: this.clearClick,
|
|
241
|
+
on: this.v3 ? undefined : {
|
|
242
|
+
"click": this.clearClick
|
|
243
|
+
},
|
|
244
|
+
"class": "k-clear-value"
|
|
245
|
+
}, [h("span", {
|
|
246
|
+
"class": "k-icon k-i-x"
|
|
247
|
+
})])]);
|
|
200
248
|
return label ? // @ts-ignore function children
|
|
201
249
|
h(kendo_vue_labels_1.FloatingLabel, {
|
|
202
250
|
label: label,
|
|
@@ -237,6 +285,9 @@ var InputVue2 = {
|
|
|
237
285
|
handleKeypress: function handleKeypress(e) {
|
|
238
286
|
this.$emit('keypress', e);
|
|
239
287
|
},
|
|
288
|
+
clearClick: function clearClick(event) {
|
|
289
|
+
this.emitUpdate(event, 'change', '');
|
|
290
|
+
},
|
|
240
291
|
focus: function focus() {
|
|
241
292
|
if (this._input) {
|
|
242
293
|
this._input.focus();
|
|
@@ -276,32 +327,26 @@ var InputVue2 = {
|
|
|
276
327
|
}
|
|
277
328
|
},
|
|
278
329
|
handleInput: function handleInput(event) {
|
|
279
|
-
|
|
280
|
-
this.$data.currentValue = event.target.value;
|
|
281
|
-
this.$data.valueDuringOnChange = event.target.value;
|
|
282
|
-
this.$nextTick(function () {
|
|
283
|
-
that.$emit('changemodel', event.target.value);
|
|
284
|
-
that.$emit('update:modelValue', event.target.value);
|
|
285
|
-
that.$emit('input', {
|
|
286
|
-
event: event,
|
|
287
|
-
value: event.target.value,
|
|
288
|
-
component: that,
|
|
289
|
-
target: event.target,
|
|
290
|
-
validity: that.validity()
|
|
291
|
-
});
|
|
292
|
-
that.$data.valueDuringOnChange = undefined;
|
|
293
|
-
});
|
|
330
|
+
this.emitUpdate(event, 'input', event.target.value);
|
|
294
331
|
},
|
|
295
332
|
handleChange: function handleChange(event) {
|
|
333
|
+
this.emitUpdate(event, 'change', event.target.value);
|
|
334
|
+
},
|
|
335
|
+
emitUpdate: function emitUpdate(event, eventName, value) {
|
|
296
336
|
var that = this;
|
|
297
|
-
|
|
298
|
-
this
|
|
337
|
+
|
|
338
|
+
if (this.disabled) {
|
|
339
|
+
return;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
this.$data.currentValue = value;
|
|
343
|
+
this.$data.valueDuringOnChange = value;
|
|
299
344
|
this.$nextTick(function () {
|
|
300
|
-
that.$emit('changemodel',
|
|
301
|
-
that.$emit('update:modelValue',
|
|
302
|
-
that.$emit(
|
|
345
|
+
that.$emit('changemodel', value);
|
|
346
|
+
that.$emit('update:modelValue', value);
|
|
347
|
+
that.$emit(eventName, {
|
|
303
348
|
event: event,
|
|
304
|
-
value:
|
|
349
|
+
value: value,
|
|
305
350
|
component: that,
|
|
306
351
|
target: event.target,
|
|
307
352
|
validity: that.validity()
|
|
@@ -342,7 +387,7 @@ var InputVue2 = {
|
|
|
342
387
|
return _a = {
|
|
343
388
|
'k-textbox': true,
|
|
344
389
|
'k-input': true
|
|
345
|
-
}, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a;
|
|
390
|
+
}, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
|
|
346
391
|
}
|
|
347
392
|
},
|
|
348
393
|
computed: {
|
|
@@ -12,6 +12,18 @@ export declare const getStateOrPropsValue: (value: number | null | undefined, st
|
|
|
12
12
|
* @hidden
|
|
13
13
|
*/
|
|
14
14
|
export declare const formatValue: (value: string | number | null | undefined, format: string | NumberFormatOptions | undefined, intlService: any) => string;
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
18
|
+
export declare const fractionLength: (value: number) => number;
|
|
19
|
+
/**
|
|
20
|
+
* @hidden
|
|
21
|
+
*/
|
|
22
|
+
export declare const limitPrecision: (precision: number) => number;
|
|
23
|
+
/**
|
|
24
|
+
* @hidden
|
|
25
|
+
*/
|
|
26
|
+
export declare const toFixedPrecision: (value: number, precision: number) => number;
|
|
15
27
|
/**
|
|
16
28
|
* @hidden
|
|
17
29
|
*/
|
|
@@ -48,6 +60,10 @@ export declare const setInvalid: (newState: NumericTextBoxData, format: string |
|
|
|
48
60
|
* @hidden
|
|
49
61
|
*/
|
|
50
62
|
export declare const isMinusSymbolAdded: (newState: NumericTextBoxData, symbols: any) => boolean;
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
export declare const isMinusSymbolRemoved: (newState: NumericTextBoxData, symbols: any) => boolean;
|
|
51
67
|
/**
|
|
52
68
|
* @hidden
|
|
53
69
|
*/
|
|
@@ -100,4 +116,4 @@ export declare const changeBasedSelection: (currentValue: string, nextValue: str
|
|
|
100
116
|
/**
|
|
101
117
|
* @hidden
|
|
102
118
|
*/
|
|
103
|
-
export declare const sanitizeNumber: (state:
|
|
119
|
+
export declare const sanitizeNumber: (state: NumericTextBoxData, format: string | NumberFormatOptions | undefined, intlService: any) => NumericTextBoxData;
|