@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
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.RadioButtonVue2 = exports.RadioButton = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
@@ -18,7 +18,7 @@ var kendo_vue_common_2 = require("@progress/kendo-vue-common");
|
|
|
18
18
|
|
|
19
19
|
var package_metadata_1 = require("../package-metadata");
|
|
20
20
|
|
|
21
|
-
var
|
|
21
|
+
var RadioButtonVue2 = {
|
|
22
22
|
name: 'KendoRadioButton',
|
|
23
23
|
props: {
|
|
24
24
|
ariaDescribedBy: String,
|
|
@@ -30,6 +30,13 @@ var RadioButton = {
|
|
|
30
30
|
labelRender: [String, Number, Boolean, Object],
|
|
31
31
|
labelPlacement: String,
|
|
32
32
|
name: String,
|
|
33
|
+
size: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: 'medium',
|
|
36
|
+
validator: function validator(value) {
|
|
37
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
38
|
+
}
|
|
39
|
+
},
|
|
33
40
|
tabIndex: Number,
|
|
34
41
|
value: [String, Number, Object],
|
|
35
42
|
valid: {
|
|
@@ -55,10 +62,8 @@ var RadioButton = {
|
|
|
55
62
|
var _a;
|
|
56
63
|
|
|
57
64
|
return _a = {
|
|
58
|
-
'k-radio': true
|
|
59
|
-
|
|
60
|
-
'k-invalid': this.$props.valid === false
|
|
61
|
-
}, _a[this.$props.className] = this.$props.className, _a;
|
|
65
|
+
'k-radio': true
|
|
66
|
+
}, _a["k-radio-" + kendo_vue_common_1.kendoThemeMaps.sizeMap[this.$props.size]] = this.$props.size, _a['k-state-invalid'] = this.$props.valid === false, _a['k-invalid'] = this.$props.valid === false, _a[this.$props.className] = this.$props.className, _a;
|
|
62
67
|
}
|
|
63
68
|
},
|
|
64
69
|
methods: {
|
|
@@ -169,6 +174,6 @@ var RadioButton = {
|
|
|
169
174
|
return labelPlacement === 'before' ? h("div", [radioButtonLabel, radio, defaultSlot]) : h("div", [radio, radioButtonLabel, defaultSlot]);
|
|
170
175
|
}
|
|
171
176
|
};
|
|
172
|
-
exports.
|
|
173
|
-
var
|
|
174
|
-
exports.
|
|
177
|
+
exports.RadioButtonVue2 = RadioButtonVue2;
|
|
178
|
+
var RadioButton = RadioButtonVue2;
|
|
179
|
+
exports.RadioButton = RadioButton;
|
|
@@ -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;
|
|
@@ -45,8 +44,8 @@ export interface RadioGroupComputed {
|
|
|
45
44
|
/**
|
|
46
45
|
* @hidden
|
|
47
46
|
*/
|
|
48
|
-
export interface RadioGroupAll extends
|
|
47
|
+
export interface RadioGroupAll extends Vue2type, RadioGroupMethods, RadioGroupComputed, RadioGroupState, RadioGroupData {
|
|
49
48
|
}
|
|
50
|
-
declare let
|
|
51
|
-
declare let
|
|
52
|
-
export { RadioGroup,
|
|
49
|
+
declare let RadioGroupVue2: ComponentOptions<RadioGroupAll, DefaultData<RadioGroupData>, DefaultMethods<RadioGroupAll>, RadioGroupComputed, RecordPropsDefinition<RadioGroupProps>>;
|
|
50
|
+
declare let RadioGroup: DefineComponent<RadioGroupProps, any, RadioGroupData, RadioGroupComputed, RadioGroupMethods, {}, {}, {}, string, RadioGroupProps, RadioGroupProps, {}>;
|
|
51
|
+
export { RadioGroup, RadioGroupVue2 };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.RadioGroupVue2 = exports.RadioGroup = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
@@ -18,7 +18,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
|
18
18
|
|
|
19
19
|
var package_metadata_1 = require("../package-metadata");
|
|
20
20
|
|
|
21
|
-
var
|
|
21
|
+
var RadioGroupVue2 = {
|
|
22
22
|
name: 'KendoRadioGroup',
|
|
23
23
|
props: {
|
|
24
24
|
ariaLabelledBy: String,
|
|
@@ -209,6 +209,6 @@ var RadioGroup = {
|
|
|
209
209
|
}, [radioOptions]);
|
|
210
210
|
}
|
|
211
211
|
};
|
|
212
|
-
exports.
|
|
213
|
-
var
|
|
214
|
-
exports.
|
|
212
|
+
exports.RadioGroupVue2 = RadioGroupVue2;
|
|
213
|
+
var RadioGroup = RadioGroupVue2;
|
|
214
|
+
exports.RadioGroup = RadioGroup;
|
|
@@ -50,6 +50,18 @@ export interface RadioButtonProps {
|
|
|
50
50
|
* Sets the `name` property of the Radio button.
|
|
51
51
|
*/
|
|
52
52
|
name?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Configures the `size` of the RadioButton.
|
|
55
|
+
*
|
|
56
|
+
* The available options are:
|
|
57
|
+
* - small
|
|
58
|
+
* - medium
|
|
59
|
+
* - large
|
|
60
|
+
* - null—Does not set a size `class`.
|
|
61
|
+
*
|
|
62
|
+
* @default `medium`
|
|
63
|
+
*/
|
|
64
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
53
65
|
/**
|
|
54
66
|
* Sets the `tabIndex` property of the Radio button.
|
|
55
67
|
* Defaults to `0`.
|
|
@@ -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;
|
|
@@ -124,8 +123,8 @@ export interface SliderComputed {
|
|
|
124
123
|
/**
|
|
125
124
|
* @hidden
|
|
126
125
|
*/
|
|
127
|
-
export interface SliderAll extends
|
|
126
|
+
export interface SliderAll extends Vue2type, SliderMethods, SliderComputed, SliderState, SliderData {
|
|
128
127
|
}
|
|
129
|
-
declare let
|
|
130
|
-
declare const
|
|
131
|
-
export { Slider,
|
|
128
|
+
declare let SliderVue2: ComponentOptions<SliderAll, DefaultData<SliderData>, DefaultMethods<SliderAll>, SliderComputed, RecordPropsDefinition<SliderProps>>;
|
|
129
|
+
declare const Slider: DefineComponent<SliderProps, any, SliderData, SliderComputed, SliderMethods, {}, {}, {}, string, SliderProps, SliderProps, {}>;
|
|
130
|
+
export { Slider, SliderVue2 };
|
|
@@ -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.SliderVue2 = exports.Slider = void 0; // @ts-ignore
|
|
23
23
|
|
|
24
24
|
var Vue = require("vue");
|
|
25
25
|
|
|
@@ -28,6 +28,8 @@ var gh = allVue.h;
|
|
|
28
28
|
var ref = allVue.ref;
|
|
29
29
|
var inject = allVue.inject;
|
|
30
30
|
|
|
31
|
+
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
32
|
+
|
|
31
33
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
32
34
|
|
|
33
35
|
var kendo_vue_common_2 = require("@progress/kendo-vue-common");
|
|
@@ -40,7 +42,7 @@ var SliderLabel_1 = require("./SliderLabel");
|
|
|
40
42
|
|
|
41
43
|
var package_metadata_1 = require("../package-metadata");
|
|
42
44
|
|
|
43
|
-
var
|
|
45
|
+
var SliderVue2 = {
|
|
44
46
|
name: 'KendoSlider',
|
|
45
47
|
model: {
|
|
46
48
|
event: 'changemodel'
|
|
@@ -220,25 +222,27 @@ var Slider = {
|
|
|
220
222
|
position: 'relative',
|
|
221
223
|
flexDirection: this.$props.vertical ? 'column-reverse' : 'row'
|
|
222
224
|
}
|
|
223
|
-
}, [this.$props.buttons &&
|
|
224
|
-
|
|
225
|
+
}, [this.$props.buttons && // @ts-ignore
|
|
226
|
+
h(kendo_vue_buttons_1.Button, {
|
|
227
|
+
tabIndex: -1,
|
|
228
|
+
attrs: this.v3 ? undefined : {
|
|
229
|
+
tabIndex: -1,
|
|
230
|
+
icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
|
|
231
|
+
rounded: 'full',
|
|
232
|
+
title: lS.toLanguageString(messages_1.sliderDecreaseValue, messages_1.messages[messages_1.sliderDecreaseValue])
|
|
233
|
+
},
|
|
234
|
+
icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
|
|
225
235
|
style: {
|
|
226
236
|
position: 'relative'
|
|
227
237
|
},
|
|
238
|
+
rounded: 'full',
|
|
239
|
+
"class": "k-button-decrease",
|
|
228
240
|
title: lS.toLanguageString(messages_1.sliderDecreaseValue, messages_1.messages[messages_1.sliderDecreaseValue]),
|
|
229
|
-
attrs: this.v3 ? undefined : {
|
|
230
|
-
title: lS.toLanguageString(messages_1.sliderDecreaseValue, messages_1.messages[messages_1.sliderDecreaseValue])
|
|
231
|
-
},
|
|
232
241
|
onClick: this.decrement,
|
|
233
242
|
on: this.v3 ? undefined : {
|
|
234
243
|
"click": this.decrement
|
|
235
244
|
}
|
|
236
|
-
},
|
|
237
|
-
"class": kendo_vue_common_2.classNames('k-icon', {
|
|
238
|
-
'k-i-arrow-s': this.$props.vertical,
|
|
239
|
-
'k-i-arrow-w': !this.$props.vertical
|
|
240
|
-
})
|
|
241
|
-
})]), // @ts-ignore function children
|
|
245
|
+
}), // @ts-ignore function children
|
|
242
246
|
h(kendo_vue_common_2.Draggable, {
|
|
243
247
|
onDrag: this.dragOver,
|
|
244
248
|
on: this.v3 ? undefined : {
|
|
@@ -321,25 +325,27 @@ var Slider = {
|
|
|
321
325
|
bottom: 'calc(' + percentValue + '% - 8px)',
|
|
322
326
|
zIndex: 1
|
|
323
327
|
} : (_b = {}, _b[_this.currentDir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentValue + '% - 8px)', _b.zIndex = 1, _b)
|
|
324
|
-
})])])]), this.$props.buttons &&
|
|
325
|
-
|
|
328
|
+
})])])]), this.$props.buttons && // @ts-ignore
|
|
329
|
+
h(kendo_vue_buttons_1.Button, {
|
|
330
|
+
tabIndex: -1,
|
|
331
|
+
attrs: this.v3 ? undefined : {
|
|
332
|
+
tabIndex: -1,
|
|
333
|
+
icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
|
|
334
|
+
rounded: 'full',
|
|
335
|
+
title: lS.toLanguageString(messages_1.sliderIncreaseValue, messages_1.messages[messages_1.sliderIncreaseValue])
|
|
336
|
+
},
|
|
337
|
+
icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
|
|
338
|
+
rounded: 'full',
|
|
326
339
|
style: {
|
|
327
340
|
position: 'relative'
|
|
328
341
|
},
|
|
342
|
+
"class": "k-button-increase",
|
|
329
343
|
title: lS.toLanguageString(messages_1.sliderIncreaseValue, messages_1.messages[messages_1.sliderIncreaseValue]),
|
|
330
|
-
attrs: this.v3 ? undefined : {
|
|
331
|
-
title: lS.toLanguageString(messages_1.sliderIncreaseValue, messages_1.messages[messages_1.sliderIncreaseValue])
|
|
332
|
-
},
|
|
333
344
|
onClick: this.increment,
|
|
334
345
|
on: this.v3 ? undefined : {
|
|
335
346
|
"click": this.increment
|
|
336
347
|
}
|
|
337
|
-
}
|
|
338
|
-
"class": kendo_vue_common_2.classNames('k-icon', {
|
|
339
|
-
'k-i-arrow-n': this.$props.vertical,
|
|
340
|
-
'k-i-arrow-e': !this.$props.vertical
|
|
341
|
-
})
|
|
342
|
-
})])])]);
|
|
348
|
+
})])]);
|
|
343
349
|
},
|
|
344
350
|
methods: {
|
|
345
351
|
focus: function focus() {
|
|
@@ -430,6 +436,6 @@ var Slider = {
|
|
|
430
436
|
}
|
|
431
437
|
}
|
|
432
438
|
};
|
|
433
|
-
exports.
|
|
434
|
-
var
|
|
435
|
-
exports.
|
|
439
|
+
exports.SliderVue2 = SliderVue2;
|
|
440
|
+
var Slider = SliderVue2;
|
|
441
|
+
exports.Slider = Slider;
|
|
@@ -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;
|
|
@@ -51,8 +50,8 @@ export interface SliderLabelData {
|
|
|
51
50
|
/**
|
|
52
51
|
* @hidden
|
|
53
52
|
*/
|
|
54
|
-
export interface SliderLabelAll extends
|
|
53
|
+
export interface SliderLabelAll extends Vue2type, SliderLabelMethods, SliderLabelData, SliderLabelState {
|
|
55
54
|
}
|
|
56
|
-
declare let
|
|
57
|
-
declare const
|
|
58
|
-
export { SliderLabel,
|
|
55
|
+
declare let SliderLabelVue2: ComponentOptions<SliderLabelAll, DefaultData<SliderLabelData>, DefaultMethods<SliderLabelAll>, {}, RecordPropsDefinition<SliderLabelProps>>;
|
|
56
|
+
declare const SliderLabel: DefineComponent<SliderLabelProps, any, SliderLabelData, {}, SliderLabelMethods, {}, {}, {}, string, SliderLabelProps, SliderLabelProps, {}>;
|
|
57
|
+
export { SliderLabel, SliderLabelVue2 };
|
|
@@ -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.SliderLabelVue2 = exports.SliderLabel = exports.SLIDER_LABEL_ATTRIBUTE = void 0; // @ts-ignore
|
|
23
23
|
|
|
24
24
|
var Vue = require("vue");
|
|
25
25
|
|
|
@@ -35,7 +35,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
|
35
35
|
|
|
36
36
|
exports.SLIDER_LABEL_ATTRIBUTE = 'data-slider-label'; // tslint:enable:max-line-length
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var SliderLabelVue2 = {
|
|
39
39
|
name: 'KendoSliderLabel',
|
|
40
40
|
// @ts-ignore
|
|
41
41
|
emits: {
|
|
@@ -116,6 +116,6 @@ var SliderLabel = {
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
|
-
exports.
|
|
120
|
-
var
|
|
121
|
-
exports.
|
|
119
|
+
exports.SliderLabelVue2 = SliderLabelVue2;
|
|
120
|
+
var SliderLabel = SliderLabelVue2;
|
|
121
|
+
exports.SliderLabel = SliderLabel;
|
|
@@ -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;
|
|
@@ -20,6 +19,10 @@ export interface SwitchChangeEvent {
|
|
|
20
19
|
* Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}).
|
|
21
20
|
*/
|
|
22
21
|
export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
|
|
22
|
+
/**
|
|
23
|
+
* Specifies the `name` of the Switch.
|
|
24
|
+
*/
|
|
25
|
+
name?: string;
|
|
23
26
|
/**
|
|
24
27
|
* Specifies the `accessKey` of the Switch.
|
|
25
28
|
*/
|
|
@@ -52,6 +55,46 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
|
|
|
52
55
|
* Sets the `id` of the Switch.
|
|
53
56
|
*/
|
|
54
57
|
id?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Configures the `size` of the Switch.
|
|
60
|
+
*
|
|
61
|
+
* The available options are:
|
|
62
|
+
* - small
|
|
63
|
+
* - medium
|
|
64
|
+
* - large
|
|
65
|
+
* - null—Does not set a size `className`.
|
|
66
|
+
*
|
|
67
|
+
* @default `medium`
|
|
68
|
+
*/
|
|
69
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
70
|
+
/**
|
|
71
|
+
* Configures the `trackRounded` of the Switch.
|
|
72
|
+
*
|
|
73
|
+
* The available options are:
|
|
74
|
+
* - small
|
|
75
|
+
* - medium
|
|
76
|
+
* - large
|
|
77
|
+
* - full
|
|
78
|
+
* - circle
|
|
79
|
+
* - null—Does not set a trackRounded `className`.
|
|
80
|
+
*
|
|
81
|
+
* @default `full`
|
|
82
|
+
*/
|
|
83
|
+
trackRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
84
|
+
/**
|
|
85
|
+
* Configures the `thumbRounded` of the Switch.
|
|
86
|
+
*
|
|
87
|
+
* The available options are:
|
|
88
|
+
* - small
|
|
89
|
+
* - medium
|
|
90
|
+
* - large
|
|
91
|
+
* - full
|
|
92
|
+
* - circle
|
|
93
|
+
* - null—Does not set a thumbRounded `className`.
|
|
94
|
+
*
|
|
95
|
+
* @default `circle`
|
|
96
|
+
*/
|
|
97
|
+
thumbRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
55
98
|
/**
|
|
56
99
|
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
|
|
57
100
|
* For example these elements could contain error or hint message.
|
|
@@ -124,8 +167,8 @@ export interface SwitchData {
|
|
|
124
167
|
/**
|
|
125
168
|
* @hidden
|
|
126
169
|
*/
|
|
127
|
-
export interface SwitchAll extends
|
|
170
|
+
export interface SwitchAll extends Vue2type, SwitchMethods, SwitchData, SwitchComputed, SwitchState {
|
|
128
171
|
}
|
|
129
|
-
declare let
|
|
130
|
-
declare const
|
|
131
|
-
export { Switch,
|
|
172
|
+
declare let SwitchVue2: ComponentOptions<SwitchAll, DefaultData<SwitchData>, DefaultMethods<SwitchAll>, SwitchComputed, RecordPropsDefinition<SwitchProps>>;
|
|
173
|
+
declare const Switch: DefineComponent<SwitchProps, any, SwitchData, SwitchComputed, SwitchMethods, {}, {}, {}, string, SwitchProps, SwitchProps, {}>;
|
|
174
|
+
export { Switch, SwitchVue2 };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.SwitchVue2 = exports.Switch = void 0; // @ts-ignore
|
|
7
7
|
|
|
8
8
|
var Vue = require("vue");
|
|
9
9
|
|
|
@@ -16,14 +16,10 @@ var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
|
16
16
|
|
|
17
17
|
var messages_1 = require("./../messages");
|
|
18
18
|
|
|
19
|
-
var package_metadata_1 = require("../package-metadata");
|
|
19
|
+
var package_metadata_1 = require("../package-metadata"); // tslint:enable:max-line-length
|
|
20
20
|
|
|
21
|
-
var SWITCH_CONTAINER = 'k-switch-container';
|
|
22
|
-
var SWITCH_HANDLE = 'k-switch-handle';
|
|
23
|
-
var SWITCH_LABEL_ON = 'k-switch-label-on';
|
|
24
|
-
var SWITCH_LABEL_OFF = 'k-switch-label-off'; // tslint:enable:max-line-length
|
|
25
21
|
|
|
26
|
-
var
|
|
22
|
+
var SwitchVue2 = {
|
|
27
23
|
name: 'KendoSwitch',
|
|
28
24
|
model: {
|
|
29
25
|
event: 'changemodel'
|
|
@@ -37,6 +33,7 @@ var Switch = {
|
|
|
37
33
|
'blur': null
|
|
38
34
|
},
|
|
39
35
|
props: {
|
|
36
|
+
name: String,
|
|
40
37
|
accessKey: String,
|
|
41
38
|
checked: {
|
|
42
39
|
type: Boolean,
|
|
@@ -51,6 +48,27 @@ var Switch = {
|
|
|
51
48
|
type: Boolean,
|
|
52
49
|
default: false
|
|
53
50
|
},
|
|
51
|
+
size: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: 'medium',
|
|
54
|
+
validator: function validator(value) {
|
|
55
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
trackRounded: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: 'full',
|
|
61
|
+
validator: function validator(value) {
|
|
62
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
thumbRounded: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: 'full',
|
|
68
|
+
validator: function validator(value) {
|
|
69
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
70
|
+
}
|
|
71
|
+
},
|
|
54
72
|
dir: String,
|
|
55
73
|
id: String,
|
|
56
74
|
ariaLabelledBy: String,
|
|
@@ -105,16 +123,26 @@ var Switch = {
|
|
|
105
123
|
return this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.checked !== undefined ? this.$props.checked : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentChecked;
|
|
106
124
|
},
|
|
107
125
|
switchClassName: function switchClassName() {
|
|
126
|
+
var _a;
|
|
127
|
+
|
|
108
128
|
var isValid = !this.validityStyles || this.validity().valid;
|
|
109
|
-
return {
|
|
110
|
-
'k-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
129
|
+
return _a = {
|
|
130
|
+
'k-switch': true
|
|
131
|
+
}, _a["k-switch-" + kendo_vue_common_1.kendoThemeMaps.sizeMap[this.$props.size]] = true, _a["k-rounded-" + this.$props.trackRounded] = this.$props.trackRounded, _a['k-switch-on'] = this.computedValue, _a['k-switch-off'] = !this.computedValue, _a['k-focus'] = this.focused, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = !isValid, _a;
|
|
132
|
+
},
|
|
133
|
+
switchTrackClass: function switchTrackClass() {
|
|
134
|
+
var _a;
|
|
135
|
+
|
|
136
|
+
return _a = {
|
|
137
|
+
'k-switch-track': true
|
|
138
|
+
}, _a["k-rounded-" + this.$props.trackRounded] = this.$props.trackRounded, _a;
|
|
139
|
+
},
|
|
140
|
+
switchThumbClass: function switchThumbClass() {
|
|
141
|
+
var _a;
|
|
142
|
+
|
|
143
|
+
return _a = {
|
|
144
|
+
'k-switch-thumb': true
|
|
145
|
+
}, _a["k-rounded-" + this.$props.thumbRounded] = this.$props.thumbRounded, _a;
|
|
118
146
|
}
|
|
119
147
|
},
|
|
120
148
|
mounted: function mounted() {
|
|
@@ -143,7 +171,8 @@ var Switch = {
|
|
|
143
171
|
id = _a.id,
|
|
144
172
|
offLabel = _a.offLabel,
|
|
145
173
|
onLabel = _a.onLabel,
|
|
146
|
-
tabIndex = _a.tabIndex
|
|
174
|
+
tabIndex = _a.tabIndex,
|
|
175
|
+
required = _a.required;
|
|
147
176
|
return h("span", {
|
|
148
177
|
"class": this.switchClassName,
|
|
149
178
|
dir: this.currentDir,
|
|
@@ -161,7 +190,7 @@ var Switch = {
|
|
|
161
190
|
onFocusout: this.handleWrapperBlur,
|
|
162
191
|
onFocusin: this.handleWrapperFocus
|
|
163
192
|
}, [h("span", {
|
|
164
|
-
"class":
|
|
193
|
+
"class": this.switchTrackClass,
|
|
165
194
|
id: id || this._id,
|
|
166
195
|
attrs: this.v3 ? undefined : {
|
|
167
196
|
id: id || this._id,
|
|
@@ -188,6 +217,8 @@ var Switch = {
|
|
|
188
217
|
attrs: this.v3 ? undefined : {
|
|
189
218
|
type: "checkbox",
|
|
190
219
|
tabIndex: -1,
|
|
220
|
+
name: this.$props.name,
|
|
221
|
+
required: required !== undefined ? required : false,
|
|
191
222
|
"aria-hidden": true
|
|
192
223
|
},
|
|
193
224
|
checked: this.v3 ? this.$props.checked : null,
|
|
@@ -199,6 +230,8 @@ var Switch = {
|
|
|
199
230
|
_this.inputRef = el;
|
|
200
231
|
} : 'input',
|
|
201
232
|
tabIndex: -1,
|
|
233
|
+
name: this.$props.name,
|
|
234
|
+
required: required !== undefined ? required : false,
|
|
202
235
|
"aria-hidden": true,
|
|
203
236
|
value: this.v3 ? this.computedValue : null,
|
|
204
237
|
style: {
|
|
@@ -214,12 +247,14 @@ var Switch = {
|
|
|
214
247
|
"change": kendo_vue_common_1.noop
|
|
215
248
|
}
|
|
216
249
|
}), h("span", {
|
|
217
|
-
"class":
|
|
250
|
+
"class": 'k-switch-label-on'
|
|
218
251
|
}, [onLabel]), h("span", {
|
|
219
|
-
"class":
|
|
252
|
+
"class": 'k-switch-label-off'
|
|
220
253
|
}, [offLabel]), h("span", {
|
|
221
|
-
"class":
|
|
222
|
-
}
|
|
254
|
+
"class": 'k-switch-thumb-wrap'
|
|
255
|
+
}, [h("span", {
|
|
256
|
+
"class": this.switchThumbClass
|
|
257
|
+
})])])]);
|
|
223
258
|
},
|
|
224
259
|
methods: {
|
|
225
260
|
focus: function focus() {
|
|
@@ -230,9 +265,6 @@ var Switch = {
|
|
|
230
265
|
element: function element() {
|
|
231
266
|
return this._element;
|
|
232
267
|
},
|
|
233
|
-
name: function name() {
|
|
234
|
-
return this.$props.name;
|
|
235
|
-
},
|
|
236
268
|
validity: function validity() {
|
|
237
269
|
var customError = this.$props.validationMessage !== undefined;
|
|
238
270
|
var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedValue ? true : false;
|
|
@@ -315,6 +347,6 @@ var Switch = {
|
|
|
315
347
|
}
|
|
316
348
|
}
|
|
317
349
|
};
|
|
318
|
-
exports.
|
|
319
|
-
var
|
|
320
|
-
exports.
|
|
350
|
+
exports.SwitchVue2 = SwitchVue2;
|
|
351
|
+
var Switch = SwitchVue2;
|
|
352
|
+
exports.Switch = Switch;
|
|
@@ -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;
|
|
@@ -39,8 +38,8 @@ export interface TextAreaData {
|
|
|
39
38
|
/**
|
|
40
39
|
* @hidden
|
|
41
40
|
*/
|
|
42
|
-
export interface TextAreaAll extends
|
|
41
|
+
export interface TextAreaAll extends Vue2type, TextAreaMethods, TextAreaData, TextAreaComputed, TextAreaState {
|
|
43
42
|
}
|
|
44
|
-
declare let
|
|
45
|
-
declare const
|
|
46
|
-
export { TextArea,
|
|
43
|
+
declare let TextAreaVue2: ComponentOptions<TextAreaAll, DefaultData<TextAreaData>, DefaultMethods<TextAreaAll>, TextAreaComputed, RecordPropsDefinition<TextAreaProps>>;
|
|
44
|
+
declare const TextArea: DefineComponent<TextAreaProps, any, TextAreaData, TextAreaComputed, TextAreaMethods, {}, {}, {}, string, TextAreaProps, TextAreaProps, {}>;
|
|
45
|
+
export { TextArea, TextAreaVue2 };
|
|
@@ -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.TextAreaVue2 = exports.TextArea = void 0; // @ts-ignore
|
|
23
23
|
|
|
24
24
|
var Vue = require("vue");
|
|
25
25
|
|
|
@@ -31,7 +31,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
|
31
31
|
var package_metadata_1 = require("../package-metadata"); // tslint:enable:max-line-length
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var TextAreaVue2 = {
|
|
35
35
|
name: 'KendoTextArea',
|
|
36
36
|
inheritAttrs: false,
|
|
37
37
|
model: {
|
|
@@ -61,6 +61,27 @@ var TextArea = {
|
|
|
61
61
|
rows: Number,
|
|
62
62
|
id: String,
|
|
63
63
|
name: String,
|
|
64
|
+
size: {
|
|
65
|
+
type: String,
|
|
66
|
+
default: 'medium',
|
|
67
|
+
validator: function validator(value) {
|
|
68
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
rounded: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: 'medium',
|
|
74
|
+
validator: function validator(value) {
|
|
75
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
fillMode: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: 'solid',
|
|
81
|
+
validator: function validator(value) {
|
|
82
|
+
return [null, 'solid', 'flat', 'outline'].includes(value);
|
|
83
|
+
}
|
|
84
|
+
},
|
|
64
85
|
required: Boolean,
|
|
65
86
|
placeholder: String,
|
|
66
87
|
tabIndex: Number,
|
|
@@ -80,11 +101,18 @@ var TextArea = {
|
|
|
80
101
|
},
|
|
81
102
|
computed: {
|
|
82
103
|
rootClassName: function rootClassName() {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
104
|
+
var _a;
|
|
105
|
+
|
|
106
|
+
var _b = this.$props,
|
|
107
|
+
size = _b.size,
|
|
108
|
+
fillMode = _b.fillMode,
|
|
109
|
+
rounded = _b.rounded,
|
|
110
|
+
required = _b.required;
|
|
111
|
+
var invalid = this.validityStyles === true ? !this.isValid : false;
|
|
112
|
+
return _a = {
|
|
113
|
+
'k-input': true,
|
|
114
|
+
'k-textarea': true
|
|
115
|
+
}, _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-disabled'] = this.$props.disabled, _a['k-valid'] = !invalid, _a['k-invalid'] = invalid, _a['k-required'] = required, _a;
|
|
88
116
|
},
|
|
89
117
|
computedValue: function computedValue() {
|
|
90
118
|
return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
|
|
@@ -151,7 +179,7 @@ var TextArea = {
|
|
|
151
179
|
|
|
152
180
|
var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
|
|
153
181
|
attrs: this.v3 ? undefined : textAreaAttrs,
|
|
154
|
-
'class': 'k-input',
|
|
182
|
+
'class': 'k-input-inner',
|
|
155
183
|
ref: this.v3 ? function (el) {
|
|
156
184
|
_this.elementRef = el;
|
|
157
185
|
} : 'element',
|
|
@@ -180,7 +208,8 @@ var TextArea = {
|
|
|
180
208
|
dir: this.currentDir,
|
|
181
209
|
attrs: this.v3 ? undefined : {
|
|
182
210
|
dir: this.currentDir
|
|
183
|
-
}
|
|
211
|
+
},
|
|
212
|
+
style: this.$attrs.style
|
|
184
213
|
}, [textarea]);
|
|
185
214
|
},
|
|
186
215
|
methods: {
|
|
@@ -256,6 +285,6 @@ var TextArea = {
|
|
|
256
285
|
}
|
|
257
286
|
}
|
|
258
287
|
};
|
|
259
|
-
exports.
|
|
260
|
-
var
|
|
261
|
-
exports.
|
|
288
|
+
exports.TextAreaVue2 = TextAreaVue2;
|
|
289
|
+
var TextArea = TextAreaVue2;
|
|
290
|
+
exports.TextArea = TextArea;
|