@progress/kendo-vue-inputs 2.7.3 → 3.0.0-dev.202201141128
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/additionalTypes.ts +7 -1
- package/dist/es/checkbox/Checkbox.d.ts +5 -6
- package/dist/es/checkbox/Checkbox.js +38 -22
- package/dist/es/checkbox/interfaces/CheckboxProps.d.ts +24 -0
- package/dist/es/colors/ColorPalette.d.ts +6 -6
- package/dist/es/colors/ColorPalette.js +12 -4
- package/dist/es/colors/ColorPicker.d.ts +5 -6
- package/dist/es/colors/ColorPicker.js +66 -58
- package/dist/es/colors/Picker.d.ts +5 -6
- package/dist/es/colors/Picker.js +3 -3
- package/dist/es/colors/interfaces/ColorPickerProps.d.ts +2 -2
- package/dist/es/input/Input.d.ts +43 -7
- package/dist/es/input/Input.js +46 -23
- package/dist/es/main.d.ts +1 -1
- package/dist/es/main.js +1 -1
- package/dist/es/maskedtextbox/MaskedTextBox.d.ts +5 -6
- package/dist/es/maskedtextbox/MaskedTextBox.js +37 -13
- package/dist/es/maskedtextbox/MaskedTextBoxProps.d.ts +37 -0
- package/dist/es/numerictextbox/NumericTextBox.d.ts +5 -6
- package/dist/es/numerictextbox/NumericTextBox.js +60 -36
- package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts +37 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/radiobutton/RadioButton.d.ts +5 -6
- package/dist/es/radiobutton/RadioButton.js +13 -8
- package/dist/es/radiobutton/RadioGroup.d.ts +5 -6
- package/dist/es/radiobutton/RadioGroup.js +3 -3
- package/dist/es/radiobutton/interfaces/RadioButtonProps.d.ts +12 -0
- package/dist/es/slider/Slider.d.ts +5 -6
- package/dist/es/slider/Slider.js +30 -25
- package/dist/es/slider/SliderLabel.d.ts +5 -6
- package/dist/es/slider/SliderLabel.js +3 -3
- package/dist/es/switch/Switch.d.ts +49 -6
- package/dist/es/switch/Switch.js +59 -27
- package/dist/es/textarea/TextArea.d.ts +5 -6
- package/dist/es/textarea/TextArea.js +40 -11
- package/dist/es/textarea/interfaces/TextAreaProps.d.ts +37 -0
- package/dist/npm/additionalTypes.ts +7 -1
- package/dist/npm/checkbox/Checkbox.d.ts +5 -6
- package/dist/npm/checkbox/Checkbox.js +39 -23
- package/dist/npm/checkbox/interfaces/CheckboxProps.d.ts +24 -0
- package/dist/npm/colors/ColorPalette.d.ts +6 -6
- package/dist/npm/colors/ColorPalette.js +13 -5
- package/dist/npm/colors/ColorPicker.d.ts +5 -6
- package/dist/npm/colors/ColorPicker.js +68 -60
- package/dist/npm/colors/Picker.d.ts +5 -6
- package/dist/npm/colors/Picker.js +5 -5
- package/dist/npm/colors/interfaces/ColorPickerProps.d.ts +2 -2
- package/dist/npm/input/Input.d.ts +43 -7
- package/dist/npm/input/Input.js +47 -24
- package/dist/npm/main.d.ts +1 -1
- package/dist/npm/main.js +1 -0
- package/dist/npm/maskedtextbox/MaskedTextBox.d.ts +5 -6
- package/dist/npm/maskedtextbox/MaskedTextBox.js +38 -14
- package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts +37 -0
- package/dist/npm/numerictextbox/NumericTextBox.d.ts +5 -6
- package/dist/npm/numerictextbox/NumericTextBox.js +62 -37
- package/dist/npm/numerictextbox/interfaces/NumericTextBoxProps.d.ts +37 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/radiobutton/RadioButton.d.ts +5 -6
- package/dist/npm/radiobutton/RadioButton.js +14 -9
- package/dist/npm/radiobutton/RadioGroup.d.ts +5 -6
- package/dist/npm/radiobutton/RadioGroup.js +5 -5
- package/dist/npm/radiobutton/interfaces/RadioButtonProps.d.ts +12 -0
- package/dist/npm/slider/Slider.d.ts +5 -6
- package/dist/npm/slider/Slider.js +33 -27
- package/dist/npm/slider/SliderLabel.d.ts +5 -6
- package/dist/npm/slider/SliderLabel.js +5 -5
- package/dist/npm/switch/Switch.d.ts +49 -6
- package/dist/npm/switch/Switch.js +60 -28
- package/dist/npm/textarea/TextArea.d.ts +5 -6
- package/dist/npm/textarea/TextArea.js +41 -12
- package/dist/npm/textarea/interfaces/TextAreaProps.d.ts +37 -0
- package/package.json +10 -9
package/dist/npm/input/Input.js
CHANGED
|
@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
|
|
|
19
19
|
Object.defineProperty(exports, "__esModule", {
|
|
20
20
|
value: true
|
|
21
21
|
});
|
|
22
|
-
exports.
|
|
22
|
+
exports.InputVue2 = exports.Input = void 0; // @ts-ignore
|
|
23
23
|
|
|
24
24
|
var Vue = require("vue");
|
|
25
25
|
|
|
@@ -33,11 +33,10 @@ var package_metadata_1 = require("../package-metadata");
|
|
|
33
33
|
|
|
34
34
|
var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var InputVue2 = {
|
|
37
37
|
model: {
|
|
38
38
|
event: 'changemodel'
|
|
39
39
|
},
|
|
40
|
-
inheritAttrs: false,
|
|
41
40
|
// @ts-ignore
|
|
42
41
|
emits: {
|
|
43
42
|
'input': null,
|
|
@@ -69,6 +68,27 @@ var Input = {
|
|
|
69
68
|
type: Boolean,
|
|
70
69
|
default: false
|
|
71
70
|
},
|
|
71
|
+
size: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: 'medium',
|
|
74
|
+
validator: function validator(value) {
|
|
75
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
rounded: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: 'medium',
|
|
81
|
+
validator: function validator(value) {
|
|
82
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
fillMode: {
|
|
86
|
+
type: String,
|
|
87
|
+
default: 'solid',
|
|
88
|
+
validator: function validator(value) {
|
|
89
|
+
return [null, 'solid', 'flat', 'outline'].includes(value);
|
|
90
|
+
}
|
|
91
|
+
},
|
|
72
92
|
dir: {
|
|
73
93
|
type: String
|
|
74
94
|
},
|
|
@@ -127,12 +147,6 @@ var Input = {
|
|
|
127
147
|
var h = gh || createElement;
|
|
128
148
|
var listeners = this.v3 ? this.$attrs : this.$listeners;
|
|
129
149
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
130
|
-
var hasInput = Object.keys(this.$attrs).some(function (attr) {
|
|
131
|
-
return attr === 'onInput';
|
|
132
|
-
});
|
|
133
|
-
var hasModel = Object.keys(this.$attrs).some(function (attr) {
|
|
134
|
-
return attr === 'onUpdate:modelValue';
|
|
135
|
-
});
|
|
136
150
|
var _a = this.$props,
|
|
137
151
|
label = _a.label,
|
|
138
152
|
id = _a.id,
|
|
@@ -150,7 +164,7 @@ var Input = {
|
|
|
150
164
|
id: inputId,
|
|
151
165
|
required: required,
|
|
152
166
|
value: this.computedValue,
|
|
153
|
-
class:
|
|
167
|
+
class: 'k-input-inner',
|
|
154
168
|
ref: this.v3 ? function (el) {
|
|
155
169
|
_this.inputRef = el;
|
|
156
170
|
} : 'input',
|
|
@@ -169,6 +183,9 @@ var Input = {
|
|
|
169
183
|
onAnimationstart: this.handleAutoFill,
|
|
170
184
|
onAnimationend: this.handleAutoFillEnd
|
|
171
185
|
}));
|
|
186
|
+
var inputWrapper = h("span", {
|
|
187
|
+
"class": this.inputWrapperClass
|
|
188
|
+
}, [textbox]);
|
|
172
189
|
return label ? // @ts-ignore function children
|
|
173
190
|
h(kendo_vue_labels_1.FloatingLabel, {
|
|
174
191
|
label: label,
|
|
@@ -188,8 +205,8 @@ var Input = {
|
|
|
188
205
|
editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
|
|
189
206
|
dir: this.$props.dir
|
|
190
207
|
}, this.v3 ? function () {
|
|
191
|
-
return [
|
|
192
|
-
} : [
|
|
208
|
+
return [inputWrapper];
|
|
209
|
+
} : [inputWrapper]) : inputWrapper;
|
|
193
210
|
},
|
|
194
211
|
methods: {
|
|
195
212
|
emitFocus: function emitFocus(e) {
|
|
@@ -205,13 +222,6 @@ var Input = {
|
|
|
205
222
|
this.$data.input.focus();
|
|
206
223
|
}
|
|
207
224
|
},
|
|
208
|
-
inputClassNames: function inputClassNames() {
|
|
209
|
-
var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
210
|
-
return {
|
|
211
|
-
'k-textbox': true,
|
|
212
|
-
'k-state-invalid': !isValid && isValid !== undefined
|
|
213
|
-
};
|
|
214
|
-
},
|
|
215
225
|
validity: function validity() {
|
|
216
226
|
var result = {
|
|
217
227
|
badInput: this.$data.input ? this.$data.input.validity.badInput : false,
|
|
@@ -307,14 +317,27 @@ var Input = {
|
|
|
307
317
|
var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
308
318
|
return {
|
|
309
319
|
'k-floating-label-container': true,
|
|
310
|
-
'k-
|
|
320
|
+
'k-focus': this.$data.focused,
|
|
311
321
|
'k-state-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
|
|
312
322
|
'k-autofill': this.$data.autofill,
|
|
313
|
-
'k-
|
|
323
|
+
'k-invalid': !isValid && isValid !== undefined,
|
|
314
324
|
'k-rtl': this.$props.dir === 'rtl'
|
|
315
325
|
};
|
|
316
326
|
}
|
|
317
327
|
},
|
|
328
|
+
inputWrapperClass: function inputWrapperClass() {
|
|
329
|
+
var _a;
|
|
330
|
+
|
|
331
|
+
var _b = this.$props,
|
|
332
|
+
size = _b.size,
|
|
333
|
+
fillMode = _b.fillMode,
|
|
334
|
+
rounded = _b.rounded;
|
|
335
|
+
var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
336
|
+
return _a = {
|
|
337
|
+
'k-textbox': true,
|
|
338
|
+
'k-input': true
|
|
339
|
+
}, _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-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a;
|
|
340
|
+
},
|
|
318
341
|
computedValue: {
|
|
319
342
|
get: function get() {
|
|
320
343
|
return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
|
|
@@ -322,6 +345,6 @@ var Input = {
|
|
|
322
345
|
}
|
|
323
346
|
}
|
|
324
347
|
};
|
|
325
|
-
exports.
|
|
326
|
-
var
|
|
327
|
-
exports.
|
|
348
|
+
exports.InputVue2 = InputVue2;
|
|
349
|
+
var Input = InputVue2;
|
|
350
|
+
exports.Input = Input;
|
package/dist/npm/main.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export * from './colors/interfaces/ColorPickerFocusEvent';
|
|
|
10
10
|
export * from './colors/interfaces/ColorPickerPaletteSettings';
|
|
11
11
|
export * from './colors/interfaces/ColorPickerPopupSettings';
|
|
12
12
|
export * from './colors/interfaces/ColorPickerProps';
|
|
13
|
-
export { Switch, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
|
|
13
|
+
export { Switch, SwitchVue2, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
|
|
14
14
|
export * from './input/Input';
|
|
15
15
|
export * from './numerictextbox/NumericTextBox';
|
|
16
16
|
export * from './maskedtextbox/MaskedTextBox';
|
package/dist/npm/main.js
CHANGED
|
@@ -23,6 +23,7 @@ __exportStar(require("./colors/interfaces/ColorPickerPopupSettings"), exports);
|
|
|
23
23
|
__exportStar(require("./colors/interfaces/ColorPickerProps"), exports);
|
|
24
24
|
var Switch_1 = require("./switch/Switch");
|
|
25
25
|
Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
|
|
26
|
+
Object.defineProperty(exports, "SwitchVue2", { enumerable: true, get: function () { return Switch_1.SwitchVue2; } });
|
|
26
27
|
__exportStar(require("./input/Input"), exports);
|
|
27
28
|
__exportStar(require("./numerictextbox/NumericTextBox"), exports);
|
|
28
29
|
__exportStar(require("./maskedtextbox/MaskedTextBox"), exports);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { DefineComponent } from '../additionalTypes';
|
|
2
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
3
2
|
declare type DefaultData<V> = object | ((this: V) => MaskedTextBoxData);
|
|
4
3
|
declare type DefaultMethods<V> = {
|
|
5
4
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
@@ -40,7 +39,7 @@ interface MaskedTextBoxState {
|
|
|
40
39
|
/**
|
|
41
40
|
* @hidden
|
|
42
41
|
*/
|
|
43
|
-
export interface MaskedTextBoxMethods extends
|
|
42
|
+
export interface MaskedTextBoxMethods extends Vue2type {
|
|
44
43
|
focus: (e: any) => void;
|
|
45
44
|
computedValue: () => any;
|
|
46
45
|
rawValue: () => string;
|
|
@@ -69,6 +68,6 @@ export interface MaskedTextBoxAll extends MaskedTextBoxMethods, MaskedTextBoxSta
|
|
|
69
68
|
/**
|
|
70
69
|
* Represents the default `MaskedTextBox` component.
|
|
71
70
|
*/
|
|
72
|
-
declare let
|
|
73
|
-
declare const
|
|
74
|
-
export { MaskedTextBox,
|
|
71
|
+
declare let MaskedTextBoxVue2: ComponentOptions<Vue2type, DefaultData<MaskedTextBoxData>, DefaultMethods<MaskedTextBoxAll>, MaskedTextBoxComputed, RecordPropsDefinition<MaskedTextBoxProps>>;
|
|
72
|
+
declare const MaskedTextBox: DefineComponent<MaskedTextBoxProps, any, MaskedTextBoxData, MaskedTextBoxComputed, MaskedTextBoxMethods, {}, {}, {}, string, MaskedTextBoxProps, MaskedTextBoxProps, {}>;
|
|
73
|
+
export { MaskedTextBox, MaskedTextBoxVue2 };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.MaskedTextBoxVue2 = exports.MaskedTextBox = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
@@ -23,7 +23,7 @@ var package_metadata_1 = require("../package-metadata");
|
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var MaskedTextBoxVue2 = {
|
|
27
27
|
model: {
|
|
28
28
|
event: 'changemodel'
|
|
29
29
|
},
|
|
@@ -42,6 +42,27 @@ var MaskedTextBox = {
|
|
|
42
42
|
accessKey: String,
|
|
43
43
|
disabled: Boolean,
|
|
44
44
|
readonly: Boolean,
|
|
45
|
+
size: {
|
|
46
|
+
type: String,
|
|
47
|
+
default: 'medium',
|
|
48
|
+
validator: function validator(value) {
|
|
49
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
rounded: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: 'medium',
|
|
55
|
+
validator: function validator(value) {
|
|
56
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
fillMode: {
|
|
60
|
+
type: String,
|
|
61
|
+
default: 'solid',
|
|
62
|
+
validator: function validator(value) {
|
|
63
|
+
return [null, 'solid', 'flat', 'outline'].includes(value);
|
|
64
|
+
}
|
|
65
|
+
},
|
|
45
66
|
prompt: {
|
|
46
67
|
type: String,
|
|
47
68
|
default: '_'
|
|
@@ -180,10 +201,10 @@ var MaskedTextBox = {
|
|
|
180
201
|
get: function get() {
|
|
181
202
|
var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
182
203
|
return {
|
|
183
|
-
'k-
|
|
184
|
-
'k-
|
|
204
|
+
'k-floating-label-container': true,
|
|
205
|
+
'k-focus': this.currentFocused,
|
|
185
206
|
'k-state-empty': !this.computedValue(),
|
|
186
|
-
'k-
|
|
207
|
+
'k-invalid': !isValid && isValid !== undefined,
|
|
187
208
|
'k-rtl': this.$props.dir === 'rtl'
|
|
188
209
|
};
|
|
189
210
|
}
|
|
@@ -323,11 +344,18 @@ var MaskedTextBox = {
|
|
|
323
344
|
}
|
|
324
345
|
}
|
|
325
346
|
},
|
|
347
|
+
// @ts-ignore
|
|
326
348
|
render: function render(createElement) {
|
|
349
|
+
var _a;
|
|
350
|
+
|
|
327
351
|
var _this = this;
|
|
328
352
|
|
|
329
353
|
var h = gh || createElement;
|
|
330
354
|
var inputId = this.$props.id || this.inputId;
|
|
355
|
+
var _b = this.$props,
|
|
356
|
+
size = _b.size,
|
|
357
|
+
fillMode = _b.fillMode,
|
|
358
|
+
rounded = _b.rounded;
|
|
331
359
|
var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
332
360
|
var newValue = this.computedValue();
|
|
333
361
|
var inputValue = this.inputValue;
|
|
@@ -336,11 +364,7 @@ var MaskedTextBox = {
|
|
|
336
364
|
attrs: this.v3 ? undefined : {
|
|
337
365
|
dir: this.$props.dir
|
|
338
366
|
},
|
|
339
|
-
"class": kendo_vue_common_1.classNames('k-
|
|
340
|
-
'k-state-focused': this.currentFocused,
|
|
341
|
-
'k-state-disabled': this.$props.disabled,
|
|
342
|
-
'k-state-invalid': !isValid
|
|
343
|
-
}),
|
|
367
|
+
"class": kendo_vue_common_1.classNames('k-maskedtextbox k-input', (_a = {}, _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-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a)),
|
|
344
368
|
style: !this.$props.label ? {
|
|
345
369
|
width: this.$props.width
|
|
346
370
|
} : undefined
|
|
@@ -367,7 +391,7 @@ var MaskedTextBox = {
|
|
|
367
391
|
autoCorrect: "off",
|
|
368
392
|
autoCapitalize: "off",
|
|
369
393
|
spellCheck: false,
|
|
370
|
-
"class": "k-
|
|
394
|
+
"class": "k-input k-input-inner",
|
|
371
395
|
value: this.v3 ? newValue : null,
|
|
372
396
|
domProps: this.v3 ? undefined : {
|
|
373
397
|
"value": newValue
|
|
@@ -417,6 +441,6 @@ var MaskedTextBox = {
|
|
|
417
441
|
}, [this.$props.label]) : null]) : component;
|
|
418
442
|
}
|
|
419
443
|
};
|
|
420
|
-
exports.
|
|
421
|
-
var
|
|
422
|
-
exports.
|
|
444
|
+
exports.MaskedTextBoxVue2 = MaskedTextBoxVue2;
|
|
445
|
+
var MaskedTextBox = MaskedTextBoxVue2;
|
|
446
|
+
exports.MaskedTextBox = MaskedTextBox;
|
|
@@ -53,6 +53,43 @@ export interface MaskedTextBoxProps extends FormComponentProps {
|
|
|
53
53
|
* Represents the `dir` HTML attribute.
|
|
54
54
|
*/
|
|
55
55
|
dir?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Configures the `size` of the MaskedTextBox.
|
|
58
|
+
*
|
|
59
|
+
* The available options are:
|
|
60
|
+
* - small
|
|
61
|
+
* - medium
|
|
62
|
+
* - large
|
|
63
|
+
* - null—Does not set a size `class`.
|
|
64
|
+
*
|
|
65
|
+
* @default `medium`
|
|
66
|
+
*/
|
|
67
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
68
|
+
/**
|
|
69
|
+
* Configures the `roundness` of the MaskedTextBox.
|
|
70
|
+
*
|
|
71
|
+
* The available options are:
|
|
72
|
+
* - small
|
|
73
|
+
* - medium
|
|
74
|
+
* - large
|
|
75
|
+
* - full
|
|
76
|
+
* - null—Does not set a rounded `class`.
|
|
77
|
+
*
|
|
78
|
+
* @default `medium`
|
|
79
|
+
*/
|
|
80
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
81
|
+
/**
|
|
82
|
+
* Configures the `fillMode` of the MaskedTextBox.
|
|
83
|
+
*
|
|
84
|
+
* The available options are:
|
|
85
|
+
* - solid
|
|
86
|
+
* - outline
|
|
87
|
+
* - flat
|
|
88
|
+
* - null—Does not set a fillMode `class`.
|
|
89
|
+
*
|
|
90
|
+
* @default `solid`
|
|
91
|
+
*/
|
|
92
|
+
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
|
|
56
93
|
/**
|
|
57
94
|
* Sets the `tabIndex` property of the MaskedTextBox.
|
|
58
95
|
*/
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { DefineComponent } from '../additionalTypes';
|
|
2
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
3
2
|
import { NumericTextBoxData } from './interfaces/NumericTextBoxData';
|
|
4
3
|
import { NumericTextBoxProps } from './interfaces/NumericTextBoxProps';
|
|
5
4
|
declare type DefaultData<V> = object | ((this: V) => NumericTextBoxData);
|
|
@@ -71,8 +70,8 @@ export interface NumericTextBoxComputed {
|
|
|
71
70
|
/**
|
|
72
71
|
* @hidden
|
|
73
72
|
*/
|
|
74
|
-
export interface NumericTextBoxAll extends
|
|
73
|
+
export interface NumericTextBoxAll extends Vue2type, NumericTextBoxMethods, NumericTextBoxComputed, NumericTextBoxState {
|
|
75
74
|
}
|
|
76
|
-
declare let
|
|
77
|
-
declare const
|
|
78
|
-
export { NumericTextBox,
|
|
75
|
+
declare let NumericTextBoxVue2: ComponentOptions<NumericTextBoxAll, DefaultData<NumericTextBoxData>, DefaultMethods<NumericTextBoxAll>, NumericTextBoxComputed, RecordPropsDefinition<NumericTextBoxProps>>;
|
|
76
|
+
declare const NumericTextBox: DefineComponent<NumericTextBoxProps, any, NumericTextBoxData, NumericTextBoxComputed, NumericTextBoxMethods, {}, {}, {}, string, NumericTextBoxProps, NumericTextBoxProps, {}>;
|
|
77
|
+
export { NumericTextBox, NumericTextBoxVue2 };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.NumericTextBoxVue2 = exports.NumericTextBox = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
@@ -18,6 +18,8 @@ var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
|
18
18
|
|
|
19
19
|
var kendo_vue_common_2 = require("@progress/kendo-vue-common");
|
|
20
20
|
|
|
21
|
+
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
22
|
+
|
|
21
23
|
var messages_1 = require("./../messages");
|
|
22
24
|
|
|
23
25
|
var utils_1 = require("./utils");
|
|
@@ -25,7 +27,7 @@ var utils_1 = require("./utils");
|
|
|
25
27
|
var package_metadata_1 = require("../package-metadata");
|
|
26
28
|
|
|
27
29
|
var VALIDATION_MESSAGE = 'Please enter a valid value!';
|
|
28
|
-
var
|
|
30
|
+
var NumericTextBoxVue2 = {
|
|
29
31
|
model: {
|
|
30
32
|
event: 'changemodel'
|
|
31
33
|
},
|
|
@@ -73,6 +75,27 @@ var NumericTextBox = {
|
|
|
73
75
|
type: Boolean,
|
|
74
76
|
default: undefined
|
|
75
77
|
},
|
|
78
|
+
size: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: 'medium',
|
|
81
|
+
validator: function validator(value) {
|
|
82
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
rounded: {
|
|
86
|
+
type: String,
|
|
87
|
+
default: 'medium',
|
|
88
|
+
validator: function validator(value) {
|
|
89
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
fillMode: {
|
|
93
|
+
type: String,
|
|
94
|
+
default: 'solid',
|
|
95
|
+
validator: function validator(value) {
|
|
96
|
+
return [null, 'solid', 'flat', 'outline'].includes(value);
|
|
97
|
+
}
|
|
98
|
+
},
|
|
76
99
|
required: {
|
|
77
100
|
type: Boolean,
|
|
78
101
|
default: false
|
|
@@ -168,23 +191,27 @@ var NumericTextBox = {
|
|
|
168
191
|
var compValue = this.computedValue;
|
|
169
192
|
return {
|
|
170
193
|
'k-floating-label-container': true,
|
|
171
|
-
'k-
|
|
194
|
+
'k-focus': this.$data.focused,
|
|
172
195
|
'k-state-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
|
|
173
|
-
'k-
|
|
196
|
+
'k-invalid': !isValid && isValid !== undefined,
|
|
174
197
|
'k-rtl': this.$props.dir === 'rtl'
|
|
175
198
|
};
|
|
176
199
|
}
|
|
177
200
|
},
|
|
178
|
-
wrapperClassNames: {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
201
|
+
wrapperClassNames: function wrapperClassNames() {
|
|
202
|
+
var _a;
|
|
203
|
+
|
|
204
|
+
var _b = this.$props,
|
|
205
|
+
size = _b.size,
|
|
206
|
+
fillMode = _b.fillMode,
|
|
207
|
+
rounded = _b.rounded,
|
|
208
|
+
required = _b.required,
|
|
209
|
+
disabled = _b.disabled;
|
|
210
|
+
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
211
|
+
return _a = {
|
|
212
|
+
'k-input': true,
|
|
213
|
+
'k-numerictextbox': true
|
|
214
|
+
}, _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-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = required, _a['k-disabled'] = disabled, _a;
|
|
188
215
|
}
|
|
189
216
|
},
|
|
190
217
|
methods: {
|
|
@@ -280,7 +307,7 @@ var NumericTextBox = {
|
|
|
280
307
|
if (newState.valueIsCorrected) {
|
|
281
308
|
var wrapper = this._elementWrapper;
|
|
282
309
|
|
|
283
|
-
if (wrapper && wrapper.className.indexOf("k-
|
|
310
|
+
if (wrapper && wrapper.className.indexOf("k-invalid") === -1) {
|
|
284
311
|
this.$data.isInvalid = true;
|
|
285
312
|
setTimeout(function () {
|
|
286
313
|
_this.$data.isInvalid = false;
|
|
@@ -452,13 +479,9 @@ var NumericTextBox = {
|
|
|
452
479
|
dir: this.$props.dir,
|
|
453
480
|
"aria-disabled": this.$props.disabled ? 'true' : undefined
|
|
454
481
|
},
|
|
455
|
-
"class": 'k-widget k-numerictextbox',
|
|
456
|
-
"aria-disabled": this.$props.disabled ? 'true' : undefined
|
|
457
|
-
}, [h("span", {
|
|
458
482
|
"class": this.wrapperClassNames,
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
} : 'elementWrapper'
|
|
483
|
+
"aria-disabled": this.$props.disabled ? 'true' : undefined,
|
|
484
|
+
style: this.$attrs.style
|
|
462
485
|
}, [h("input", {
|
|
463
486
|
tabIndex: this.$props.tabIndex,
|
|
464
487
|
attrs: this.v3 ? undefined : {
|
|
@@ -487,7 +510,7 @@ var NumericTextBox = {
|
|
|
487
510
|
spellCheck: false,
|
|
488
511
|
autoComplete: "off",
|
|
489
512
|
autoCorrect: "off",
|
|
490
|
-
"class": "k-input k-
|
|
513
|
+
"class": "k-input k-input-inner",
|
|
491
514
|
id: inputId,
|
|
492
515
|
value: this.v3 ? this.looseValue : null,
|
|
493
516
|
domProps: this.v3 ? undefined : {
|
|
@@ -513,40 +536,42 @@ var NumericTextBox = {
|
|
|
513
536
|
_this.inputRef = el;
|
|
514
537
|
} : 'input'
|
|
515
538
|
}), defaultSlot, this.$props.spinners && h("span", {
|
|
516
|
-
"class": "k-
|
|
539
|
+
"class": "k-input-spinner k-spin-button",
|
|
517
540
|
onMousedown: this.spinnersWrapperMouseDown,
|
|
518
541
|
on: this.v3 ? undefined : {
|
|
519
542
|
"mousedown": this.spinnersWrapperMouseDown
|
|
520
543
|
}
|
|
521
|
-
}, [
|
|
522
|
-
|
|
523
|
-
|
|
544
|
+
}, [// @ts-ignore
|
|
545
|
+
h(kendo_vue_buttons_1.Button, {
|
|
546
|
+
icon: 'arrow-n',
|
|
524
547
|
attrs: this.v3 ? undefined : {
|
|
548
|
+
icon: 'arrow-n',
|
|
525
549
|
"aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
|
|
526
550
|
title: localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue])
|
|
527
551
|
},
|
|
552
|
+
"class": "k-spinner-increase",
|
|
553
|
+
"aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
|
|
528
554
|
title: localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
|
|
529
555
|
onClick: this.increase,
|
|
530
556
|
on: this.v3 ? undefined : {
|
|
531
557
|
"click": this.increase
|
|
532
558
|
}
|
|
533
|
-
},
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
"aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
|
|
559
|
+
}), // @ts-ignore
|
|
560
|
+
h(kendo_vue_buttons_1.Button, {
|
|
561
|
+
"class": "k-spinner-decrease",
|
|
562
|
+
icon: 'arrow-s',
|
|
538
563
|
attrs: this.v3 ? undefined : {
|
|
564
|
+
icon: 'arrow-s',
|
|
539
565
|
"aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
|
|
540
566
|
title: localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue])
|
|
541
567
|
},
|
|
568
|
+
"aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
|
|
542
569
|
title: localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
|
|
543
570
|
onClick: this.decrease,
|
|
544
571
|
on: this.v3 ? undefined : {
|
|
545
572
|
"click": this.decrease
|
|
546
573
|
}
|
|
547
|
-
}
|
|
548
|
-
"class": "k-icon k-i-arrow-s"
|
|
549
|
-
})])])])]);
|
|
574
|
+
})])]);
|
|
550
575
|
return this.$props.label ? h("span", {
|
|
551
576
|
"class": this.spanClassNames,
|
|
552
577
|
onFocusin: this.handleFocus,
|
|
@@ -570,6 +595,6 @@ var NumericTextBox = {
|
|
|
570
595
|
}, [this.$props.label]) : null]) : numerictextbox;
|
|
571
596
|
}
|
|
572
597
|
};
|
|
573
|
-
exports.
|
|
574
|
-
var
|
|
575
|
-
exports.
|
|
598
|
+
exports.NumericTextBoxVue2 = NumericTextBoxVue2;
|
|
599
|
+
var NumericTextBox = NumericTextBoxVue2;
|
|
600
|
+
exports.NumericTextBox = NumericTextBox;
|
|
@@ -29,6 +29,43 @@ export interface NumericTextBoxProps extends FormComponentProps {
|
|
|
29
29
|
* Sets the `tabIndex` property of the NumericTextBox.
|
|
30
30
|
*/
|
|
31
31
|
tabIndex?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Configures the `size` of the NumericTextBox.
|
|
34
|
+
*
|
|
35
|
+
* The available options are:
|
|
36
|
+
* - small
|
|
37
|
+
* - medium
|
|
38
|
+
* - large
|
|
39
|
+
* - null—Does not set a size `class`.
|
|
40
|
+
*
|
|
41
|
+
* @default `medium`
|
|
42
|
+
*/
|
|
43
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
44
|
+
/**
|
|
45
|
+
* Configures the `roundness` of the NumericTextBox.
|
|
46
|
+
*
|
|
47
|
+
* The available options are:
|
|
48
|
+
* - small
|
|
49
|
+
* - medium
|
|
50
|
+
* - large
|
|
51
|
+
* - full
|
|
52
|
+
* - null—Does not set a rounded `class`.
|
|
53
|
+
*
|
|
54
|
+
* @default `medium`
|
|
55
|
+
*/
|
|
56
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
57
|
+
/**
|
|
58
|
+
* Configures the `fillMode` of the NumericTextBox.
|
|
59
|
+
*
|
|
60
|
+
* The available options are:
|
|
61
|
+
* - solid
|
|
62
|
+
* - outline
|
|
63
|
+
* - flat
|
|
64
|
+
* - null—Does not set a fillMode `class`.
|
|
65
|
+
*
|
|
66
|
+
* @default `solid`
|
|
67
|
+
*/
|
|
68
|
+
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
|
|
32
69
|
/**
|
|
33
70
|
* Specifies the `accessKey` of the NumericTextBox.
|
|
34
71
|
*/
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-inputs',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1642158965,
|
|
12
12
|
version: '',
|
|
13
13
|
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'
|
|
14
14
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { DefineComponent } from '../additionalTypes';
|
|
2
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
3
2
|
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
3
|
declare type DefaultMethods<V> = {
|
|
5
4
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
@@ -43,8 +42,8 @@ export interface RadioButtonComputed {
|
|
|
43
42
|
/**
|
|
44
43
|
* @hidden
|
|
45
44
|
*/
|
|
46
|
-
export interface RadioButtonAll extends
|
|
45
|
+
export interface RadioButtonAll extends Vue2type, RadioButtonMethods, RadioButtonComputed, RadioButtonState, RadioButtonData {
|
|
47
46
|
}
|
|
48
|
-
declare let
|
|
49
|
-
declare let
|
|
50
|
-
export { RadioButton,
|
|
47
|
+
declare let RadioButtonVue2: ComponentOptions<RadioButtonAll, DefaultData<RadioButtonData>, DefaultMethods<RadioButtonAll>, RadioButtonComputed, RecordPropsDefinition<RadioButtonProps>>;
|
|
48
|
+
declare let RadioButton: DefineComponent<RadioButtonProps, any, RadioButtonData, RadioButtonComputed, RadioButtonMethods, {}, {}, {}, string, RadioButtonProps, RadioButtonProps, {}>;
|
|
49
|
+
export { RadioButton, RadioButtonVue2 };
|