@progress/kendo-vue-inputs 2.7.2-dev.202201051440 → 2.8.0-dev.202201111325
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 +5 -4
- package/dist/es/colors/ColorPicker.d.ts +5 -6
- package/dist/es/colors/ColorPicker.js +47 -48
- 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 +42 -6
- package/dist/es/input/Input.js +29 -8
- 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 +38 -14
- package/dist/es/maskedtextbox/MaskedTextBoxProps.d.ts +37 -0
- package/dist/es/numerictextbox/NumericTextBox.d.ts +5 -6
- package/dist/es/numerictextbox/NumericTextBox.js +61 -37
- 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 +45 -6
- package/dist/es/switch/Switch.js +56 -24
- 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 +6 -5
- package/dist/npm/colors/ColorPicker.d.ts +5 -6
- package/dist/npm/colors/ColorPicker.js +50 -51
- 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 +42 -6
- package/dist/npm/input/Input.js +31 -10
- 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 +39 -15
- package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts +37 -0
- package/dist/npm/numerictextbox/NumericTextBox.d.ts +5 -6
- package/dist/npm/numerictextbox/NumericTextBox.js +63 -38
- 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 +45 -6
- package/dist/npm/switch/Switch.js +57 -25
- 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
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.ColorPickerVue2 = exports.ColorPicker = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
14
14
|
|
|
15
|
-
var
|
|
15
|
+
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
16
16
|
|
|
17
17
|
var package_metadata_1 = require("../package-metadata");
|
|
18
18
|
|
|
@@ -44,7 +44,7 @@ var isControlled = function isControlled(prop) {
|
|
|
44
44
|
}; // tslint:enable:max-line-length
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
var
|
|
47
|
+
var ColorPickerVue2 = {
|
|
48
48
|
name: 'KendoColorPicker',
|
|
49
49
|
props: {
|
|
50
50
|
value: {
|
|
@@ -90,7 +90,7 @@ var ColorPicker = {
|
|
|
90
90
|
type: String,
|
|
91
91
|
default: 'medium',
|
|
92
92
|
validator: function validator(value) {
|
|
93
|
-
return [null, 'small', 'medium', 'large', '
|
|
93
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
fillMode: {
|
|
@@ -126,23 +126,20 @@ var ColorPicker = {
|
|
|
126
126
|
return this.$props.iconClassName || icon && "k-icon k-i-" + icon;
|
|
127
127
|
},
|
|
128
128
|
wrapperClassName: function wrapperClassName() {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
'k-state-disabled': disabled,
|
|
140
|
-
'k-state-focused': this.focused
|
|
141
|
-
};
|
|
129
|
+
var _a;
|
|
130
|
+
|
|
131
|
+
var _b = this.$props,
|
|
132
|
+
size = _b.size,
|
|
133
|
+
fillMode = _b.fillMode,
|
|
134
|
+
rounded = _b.rounded;
|
|
135
|
+
return _a = {
|
|
136
|
+
'k-picker': true,
|
|
137
|
+
'k-colorpicker': true
|
|
138
|
+
}, _a["k-picker-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-picker-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = this.valid, _a['k-invalid'] = !this.valid, _a['k-disabled'] = this.disabled, _a['k-focus'] = this.focused, _a;
|
|
142
139
|
}
|
|
143
140
|
},
|
|
144
141
|
created: function created() {
|
|
145
|
-
|
|
142
|
+
kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
|
|
146
143
|
this.focusableElementGuid = kendo_vue_common_1.guid();
|
|
147
144
|
},
|
|
148
145
|
mounted: function mounted() {
|
|
@@ -165,16 +162,18 @@ var ColorPicker = {
|
|
|
165
162
|
render: function render(createElement) {
|
|
166
163
|
var _this2 = this;
|
|
167
164
|
|
|
165
|
+
var _a;
|
|
166
|
+
|
|
168
167
|
var _this = this;
|
|
169
168
|
|
|
170
169
|
var h = gh || createElement;
|
|
171
|
-
var
|
|
172
|
-
disabled =
|
|
173
|
-
tabIndex =
|
|
170
|
+
var _b = this.$props,
|
|
171
|
+
disabled = _b.disabled,
|
|
172
|
+
tabIndex = _b.tabIndex; // const dir = useDir(focusableElementGuid, props.dir);
|
|
174
173
|
|
|
175
174
|
return h("span", {
|
|
176
|
-
"class": this.wrapperClassName
|
|
177
|
-
|
|
175
|
+
"class": this.wrapperClassName // dir={dir}
|
|
176
|
+
,
|
|
178
177
|
id: this.$props.id,
|
|
179
178
|
attrs: this.v3 ? undefined : {
|
|
180
179
|
id: this.$props.id,
|
|
@@ -185,7 +184,6 @@ var ColorPicker = {
|
|
|
185
184
|
},
|
|
186
185
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
187
186
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
188
|
-
"class": this.spanClassName,
|
|
189
187
|
ref: this.focusableElementGuid,
|
|
190
188
|
tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
|
|
191
189
|
title: this.$props.title,
|
|
@@ -197,40 +195,41 @@ var ColorPicker = {
|
|
|
197
195
|
},
|
|
198
196
|
onFocusin: this.onFocusHandler,
|
|
199
197
|
onFocusout: this.onBlurHandler
|
|
200
|
-
}, [
|
|
201
|
-
onClick: this.onActiveColorClickHandler,
|
|
202
|
-
on: this.v3 ? undefined : {
|
|
203
|
-
"click": this.onActiveColorClickHandler
|
|
204
|
-
},
|
|
205
|
-
"class": 'k-selected-color',
|
|
206
|
-
style: {
|
|
207
|
-
backgroundColor: this.computedValue
|
|
208
|
-
}
|
|
209
|
-
}, [!this.computedValue && h("span", {
|
|
210
|
-
"class": 'k-icon k-i-line'
|
|
211
|
-
})]) : h("span", {
|
|
198
|
+
}, [h("span", {
|
|
212
199
|
onClick: this.onActiveColorClickHandler,
|
|
213
200
|
on: this.v3 ? undefined : {
|
|
214
201
|
"click": this.onActiveColorClickHandler
|
|
215
202
|
},
|
|
216
|
-
"class":
|
|
203
|
+
"class": 'k-input-inner'
|
|
217
204
|
}, [h("span", {
|
|
218
|
-
"class": 'k-
|
|
205
|
+
"class": kendo_vue_common_1.classNames('k-value-icon', 'k-color-preview', {
|
|
206
|
+
'k-no-color': !this.computedValue,
|
|
207
|
+
'k-icon-color-preview': this.icon || this.iconClassName
|
|
208
|
+
})
|
|
209
|
+
}, [(this.iconClassName || this.icon) && h("span", {
|
|
210
|
+
"class": kendo_vue_common_1.classNames('k-color-preview-icon', this.iconClassName, (_a = {}, _a["k-icon k-i-" + this.icon] = this.icon && !this.iconClassName, _a))
|
|
211
|
+
}), h("span", {
|
|
212
|
+
"class": "k-color-preview-mask",
|
|
219
213
|
style: {
|
|
220
214
|
backgroundColor: this.computedValue
|
|
221
215
|
}
|
|
222
|
-
})]),
|
|
216
|
+
})])]), // @ts-ignore
|
|
217
|
+
h(kendo_vue_buttons_1.Button, {
|
|
218
|
+
type: "button",
|
|
219
|
+
attrs: this.v3 ? undefined : {
|
|
220
|
+
type: "button",
|
|
221
|
+
icon: 'arrow-s'
|
|
222
|
+
},
|
|
223
|
+
ref: this.v3 ? function (el) {
|
|
224
|
+
_this.buttonRef = el;
|
|
225
|
+
} : 'button',
|
|
223
226
|
onClick: this.onClickHandler,
|
|
224
227
|
on: this.v3 ? undefined : {
|
|
225
228
|
"click": this.onClickHandler
|
|
226
229
|
},
|
|
227
|
-
"class":
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
} : 'button'
|
|
231
|
-
}, [h("span", {
|
|
232
|
-
"class": 'k-icon k-i-arrow-s'
|
|
233
|
-
})]), // @ts-ignore function children
|
|
230
|
+
"class": "k-input-button",
|
|
231
|
+
icon: 'arrow-s'
|
|
232
|
+
}), // @ts-ignore function children
|
|
234
233
|
h(Picker_1.Picker, {
|
|
235
234
|
// dir={dir}
|
|
236
235
|
open: this.computedOpen,
|
|
@@ -275,7 +274,7 @@ var ColorPicker = {
|
|
|
275
274
|
value: _this2.computedValue || undefined
|
|
276
275
|
},
|
|
277
276
|
onChange: _this2.onPaletteChangeHandler
|
|
278
|
-
})])])
|
|
277
|
+
})])]);
|
|
279
278
|
},
|
|
280
279
|
methods: {
|
|
281
280
|
focusElement: function focusElement() {
|
|
@@ -390,6 +389,6 @@ var ColorPicker = {
|
|
|
390
389
|
}
|
|
391
390
|
}
|
|
392
391
|
};
|
|
393
|
-
exports.
|
|
394
|
-
var
|
|
395
|
-
exports.
|
|
392
|
+
exports.ColorPickerVue2 = ColorPickerVue2;
|
|
393
|
+
var ColorPicker = ColorPickerVue2;
|
|
394
|
+
exports.ColorPicker = ColorPicker;
|
|
@@ -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;
|
|
@@ -34,8 +33,8 @@ export interface PickerData {
|
|
|
34
33
|
/**
|
|
35
34
|
* @hidden
|
|
36
35
|
*/
|
|
37
|
-
export interface PickerAll extends
|
|
36
|
+
export interface PickerAll extends Vue2type, PickerMethods, PickerData, PickerComputed, PickerState {
|
|
38
37
|
}
|
|
39
|
-
declare let
|
|
40
|
-
declare const
|
|
41
|
-
export { Picker,
|
|
38
|
+
declare let PickerVue2: ComponentOptions<PickerAll, DefaultData<PickerData>, DefaultMethods<PickerAll>, PickerComputed, RecordPropsDefinition<PickerProps>>;
|
|
39
|
+
declare const Picker: DefineComponent<PickerProps, any, PickerData, PickerComputed, PickerMethods, {}, {}, {}, string, PickerProps, PickerProps, {}>;
|
|
40
|
+
export { Picker, PickerVue2 };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.PickerVue2 = exports.Picker = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
@@ -25,7 +25,7 @@ var ANCHOR_VERTICAL_ALIGN = 'bottom';
|
|
|
25
25
|
|
|
26
26
|
var POPUP_VERTICAL_ALIGN = 'top'; // tslint:enable:max-line-length
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var PickerVue2 = {
|
|
29
29
|
name: 'KendoPicker',
|
|
30
30
|
props: {
|
|
31
31
|
popupSettings: Object,
|
|
@@ -100,6 +100,6 @@ var Picker = {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
|
-
exports.
|
|
104
|
-
var
|
|
105
|
-
exports.
|
|
103
|
+
exports.PickerVue2 = PickerVue2;
|
|
104
|
+
var Picker = PickerVue2;
|
|
105
|
+
exports.Picker = Picker;
|
|
@@ -121,12 +121,12 @@ export interface ColorPickerProps {
|
|
|
121
121
|
* - small
|
|
122
122
|
* - medium
|
|
123
123
|
* - large
|
|
124
|
-
* -
|
|
124
|
+
* - full
|
|
125
125
|
* - null—Does not set a rounded `className`.
|
|
126
126
|
*
|
|
127
127
|
* @default `medium`
|
|
128
128
|
*/
|
|
129
|
-
rounded?: null | 'small' | 'medium' | 'large' | '
|
|
129
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
130
130
|
/**
|
|
131
131
|
* Configures the `fillMode` of the ColorPicker.
|
|
132
132
|
*
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { DefineComponent } from '../additionalTypes';
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
2
2
|
import { FormComponentProps } from '@progress/kendo-vue-common';
|
|
3
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
4
3
|
declare type DefaultData<V> = object | ((this: V) => InputData);
|
|
5
4
|
declare type DefaultMethods<V> = {
|
|
6
5
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
@@ -19,6 +18,43 @@ export interface InputProps extends FormComponentProps {
|
|
|
19
18
|
modelValue?: string | number;
|
|
20
19
|
defaultValue?: string | string[] | number | undefined;
|
|
21
20
|
validate?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Configures the `size` of the MaskedTextBox.
|
|
23
|
+
*
|
|
24
|
+
* The available options are:
|
|
25
|
+
* - small
|
|
26
|
+
* - medium
|
|
27
|
+
* - large
|
|
28
|
+
* - null—Does not set a size `class`.
|
|
29
|
+
*
|
|
30
|
+
* @default `medium`
|
|
31
|
+
*/
|
|
32
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
33
|
+
/**
|
|
34
|
+
* Configures the `roundness` of the MaskedTextBox.
|
|
35
|
+
*
|
|
36
|
+
* The available options are:
|
|
37
|
+
* - small
|
|
38
|
+
* - medium
|
|
39
|
+
* - large
|
|
40
|
+
* - full
|
|
41
|
+
* - null—Does not set a rounded `class`.
|
|
42
|
+
*
|
|
43
|
+
* @default `medium`
|
|
44
|
+
*/
|
|
45
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
46
|
+
/**
|
|
47
|
+
* Configures the `fillMode` of the MaskedTextBox.
|
|
48
|
+
*
|
|
49
|
+
* The available options are:
|
|
50
|
+
* - solid
|
|
51
|
+
* - outline
|
|
52
|
+
* - flat
|
|
53
|
+
* - null—Does not set a fillMode `class`.
|
|
54
|
+
*
|
|
55
|
+
* @default `solid`
|
|
56
|
+
*/
|
|
57
|
+
fillMode?: null | 'solid' | 'flat' | 'outline' | string;
|
|
22
58
|
dir?: string;
|
|
23
59
|
onChange?: Element;
|
|
24
60
|
onFocus?: (event: any) => void;
|
|
@@ -75,8 +111,8 @@ export interface InputComputed {
|
|
|
75
111
|
/**
|
|
76
112
|
* @hidden
|
|
77
113
|
*/
|
|
78
|
-
export interface InputAllMethods extends
|
|
114
|
+
export interface InputAllMethods extends Vue2type, InputMethods, InputComputed, InputState {
|
|
79
115
|
}
|
|
80
|
-
declare let
|
|
81
|
-
declare const
|
|
82
|
-
export { Input,
|
|
116
|
+
declare let InputVue2: ComponentOptions<InputAllMethods, DefaultData<InputData>, DefaultMethods<InputAllMethods>, InputComputed, RecordPropsDefinition<InputProps>>;
|
|
117
|
+
declare const Input: DefineComponent<InputProps, any, InputData, InputComputed, InputMethods, {}, {}, {}, string, InputProps, InputProps, {}>;
|
|
118
|
+
export { Input, InputVue2 };
|
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,7 +33,7 @@ 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
|
},
|
|
@@ -69,6 +69,27 @@ var Input = {
|
|
|
69
69
|
type: Boolean,
|
|
70
70
|
default: false
|
|
71
71
|
},
|
|
72
|
+
size: {
|
|
73
|
+
type: String,
|
|
74
|
+
default: 'medium',
|
|
75
|
+
validator: function validator(value) {
|
|
76
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
rounded: {
|
|
80
|
+
type: String,
|
|
81
|
+
default: 'medium',
|
|
82
|
+
validator: function validator(value) {
|
|
83
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
fillMode: {
|
|
87
|
+
type: String,
|
|
88
|
+
default: 'solid',
|
|
89
|
+
validator: function validator(value) {
|
|
90
|
+
return [null, 'solid', 'flat', 'outline'].includes(value);
|
|
91
|
+
}
|
|
92
|
+
},
|
|
72
93
|
dir: {
|
|
73
94
|
type: String
|
|
74
95
|
},
|
|
@@ -208,8 +229,8 @@ var Input = {
|
|
|
208
229
|
inputClassNames: function inputClassNames() {
|
|
209
230
|
var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
210
231
|
return {
|
|
211
|
-
'k-
|
|
212
|
-
'k-
|
|
232
|
+
'k-input': true,
|
|
233
|
+
'k-invalid': !isValid && isValid !== undefined
|
|
213
234
|
};
|
|
214
235
|
},
|
|
215
236
|
validity: function validity() {
|
|
@@ -307,10 +328,10 @@ var Input = {
|
|
|
307
328
|
var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
308
329
|
return {
|
|
309
330
|
'k-floating-label-container': true,
|
|
310
|
-
'k-
|
|
311
|
-
'k-
|
|
331
|
+
'k-focus': this.$data.focused,
|
|
332
|
+
'k-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
|
|
312
333
|
'k-autofill': this.$data.autofill,
|
|
313
|
-
'k-
|
|
334
|
+
'k-invalid': !isValid && isValid !== undefined,
|
|
314
335
|
'k-rtl': this.$props.dir === 'rtl'
|
|
315
336
|
};
|
|
316
337
|
}
|
|
@@ -322,6 +343,6 @@ var Input = {
|
|
|
322
343
|
}
|
|
323
344
|
}
|
|
324
345
|
};
|
|
325
|
-
exports.
|
|
326
|
-
var
|
|
327
|
-
exports.
|
|
346
|
+
exports.InputVue2 = InputVue2;
|
|
347
|
+
var Input = InputVue2;
|
|
348
|
+
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-
|
|
185
|
-
'k-
|
|
186
|
-
'k-
|
|
204
|
+
'k-floating-label-container': true,
|
|
205
|
+
'k-focus': this.currentFocused,
|
|
206
|
+
'k-empty': !this.computedValue(),
|
|
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 };
|