@progress/kendo-vue-inputs 3.3.3 → 3.3.5-dev.202206141337
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 +11 -0
- package/dist/es/checkbox/Checkbox.d.ts +7 -1
- package/dist/es/checkbox/Checkbox.js +8 -0
- package/dist/es/colors/ColorPalette.d.ts +6 -0
- package/dist/es/colors/ColorPalette.js +8 -1
- package/dist/es/colors/ColorPicker.d.ts +6 -0
- package/dist/es/colors/ColorPicker.js +8 -1
- package/dist/es/colors/Picker.d.ts +6 -0
- package/dist/es/colors/Picker.js +8 -1
- package/dist/es/colors/interfaces/ColorPaletteChangeEvent.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPaletteProps.d.ts +4 -13
- package/dist/es/colors/interfaces/ColorPickerActiveColorClick.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPickerBlurEvent.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPickerChangeEvent.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPickerFocusEvent.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPickerPaletteSettings.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPickerPopupSettings.d.ts +3 -0
- package/dist/es/colors/interfaces/ColorPickerProps.d.ts +5 -2
- package/dist/es/colors/interfaces/ColorPickerView.d.ts +3 -0
- package/dist/es/input/Input.d.ts +19 -9
- package/dist/es/input/Input.js +19 -3
- package/dist/es/input-separator/InputSeparator.d.ts +19 -0
- package/dist/es/input-separator/InputSeparator.js +35 -0
- package/dist/es/main.d.ts +1 -0
- package/dist/es/main.js +1 -0
- package/dist/es/maskedtextbox/MaskedTextBox.d.ts +4 -1
- package/dist/es/maskedtextbox/MaskedTextBox.js +95 -20
- package/dist/es/maskedtextbox/MaskedTextBoxProps.d.ts +32 -0
- package/dist/es/numerictextbox/NumericTextBox.d.ts +6 -0
- package/dist/es/numerictextbox/NumericTextBox.js +101 -8
- package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts +43 -3
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/radiobutton/RadioButton.d.ts +7 -1
- package/dist/es/radiobutton/RadioButton.js +8 -0
- package/dist/es/radiobutton/RadioGroup.d.ts +7 -1
- package/dist/es/radiobutton/RadioGroup.js +8 -0
- package/dist/es/range-slider/RangeSlider.d.ts +8 -0
- package/dist/es/range-slider/RangeSlider.js +10 -0
- package/dist/es/slider/Slider.d.ts +8 -2
- package/dist/es/slider/Slider.js +8 -0
- package/dist/es/slider/SliderLabel.d.ts +8 -0
- package/dist/es/slider/SliderLabel.js +10 -1
- package/dist/es/switch/Switch.d.ts +8 -0
- package/dist/es/switch/Switch.js +10 -1
- package/dist/es/textarea/TextArea.d.ts +36 -0
- package/dist/es/textarea/TextArea.js +113 -28
- package/dist/es/textarea/interfaces/TextAreaProps.d.ts +39 -0
- package/dist/npm/additionalTypes.ts +11 -0
- package/dist/npm/checkbox/Checkbox.d.ts +7 -1
- package/dist/npm/checkbox/Checkbox.js +8 -0
- package/dist/npm/colors/ColorPalette.d.ts +6 -0
- package/dist/npm/colors/ColorPalette.js +8 -1
- package/dist/npm/colors/ColorPicker.d.ts +6 -0
- package/dist/npm/colors/ColorPicker.js +8 -1
- package/dist/npm/colors/Picker.d.ts +6 -0
- package/dist/npm/colors/Picker.js +8 -1
- package/dist/npm/colors/interfaces/ColorPaletteChangeEvent.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPaletteProps.d.ts +4 -13
- package/dist/npm/colors/interfaces/ColorPickerActiveColorClick.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPickerBlurEvent.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPickerChangeEvent.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPickerFocusEvent.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPickerPaletteSettings.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPickerPopupSettings.d.ts +3 -0
- package/dist/npm/colors/interfaces/ColorPickerProps.d.ts +5 -2
- package/dist/npm/colors/interfaces/ColorPickerView.d.ts +3 -0
- package/dist/npm/input/Input.d.ts +19 -9
- package/dist/npm/input/Input.js +19 -3
- package/dist/npm/input-separator/InputSeparator.d.ts +19 -0
- package/dist/npm/input-separator/InputSeparator.js +46 -0
- package/dist/npm/main.d.ts +1 -0
- package/dist/npm/main.js +1 -0
- package/dist/npm/maskedtextbox/MaskedTextBox.d.ts +4 -1
- package/dist/npm/maskedtextbox/MaskedTextBox.js +94 -19
- package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts +32 -0
- package/dist/npm/numerictextbox/NumericTextBox.d.ts +6 -0
- package/dist/npm/numerictextbox/NumericTextBox.js +100 -7
- package/dist/npm/numerictextbox/interfaces/NumericTextBoxProps.d.ts +43 -3
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/radiobutton/RadioButton.d.ts +7 -1
- package/dist/npm/radiobutton/RadioButton.js +8 -0
- package/dist/npm/radiobutton/RadioGroup.d.ts +7 -1
- package/dist/npm/radiobutton/RadioGroup.js +8 -0
- package/dist/npm/range-slider/RangeSlider.d.ts +8 -0
- package/dist/npm/range-slider/RangeSlider.js +10 -0
- package/dist/npm/slider/Slider.d.ts +8 -2
- package/dist/npm/slider/Slider.js +8 -0
- package/dist/npm/slider/SliderLabel.d.ts +8 -0
- package/dist/npm/slider/SliderLabel.js +10 -1
- package/dist/npm/switch/Switch.d.ts +8 -0
- package/dist/npm/switch/Switch.js +10 -1
- package/dist/npm/textarea/TextArea.d.ts +36 -0
- package/dist/npm/textarea/TextArea.js +112 -27
- package/dist/npm/textarea/interfaces/TextAreaProps.d.ts +39 -0
- package/package.json +10 -10
- package/dist/es/numerictextbox/interfaces/NumericTextBoxHandle.d.ts +0 -39
- package/dist/es/numerictextbox/interfaces/NumericTextBoxHandle.js +0 -0
- package/dist/npm/numerictextbox/interfaces/NumericTextBoxHandle.d.ts +0 -39
- package/dist/npm/numerictextbox/interfaces/NumericTextBoxHandle.js +0 -5
|
@@ -15,7 +15,7 @@ export interface SliderChangeEvent {
|
|
|
15
15
|
value: number;
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
|
-
* Represents the props of the [Kendo UI for Vue Slider component]({% slug
|
|
18
|
+
* Represents the props of the [Kendo UI for Vue Slider component]({% slug overview_slider %}).
|
|
19
19
|
*/
|
|
20
20
|
export interface SliderProps extends FormComponentProps {
|
|
21
21
|
/**
|
|
@@ -62,7 +62,7 @@ export interface SliderProps extends FormComponentProps {
|
|
|
62
62
|
disabled?: boolean;
|
|
63
63
|
/**
|
|
64
64
|
* If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
|
|
65
|
-
* ([see example]({% slug
|
|
65
|
+
* ([see example]({% slug orientation_slider %})).
|
|
66
66
|
*/
|
|
67
67
|
vertical?: boolean;
|
|
68
68
|
/**
|
|
@@ -125,6 +125,12 @@ export interface SliderComputed {
|
|
|
125
125
|
*/
|
|
126
126
|
export interface SliderAll extends Vue2type, SliderMethods, SliderComputed, SliderState, SliderData {
|
|
127
127
|
}
|
|
128
|
+
/**
|
|
129
|
+
* @hidden
|
|
130
|
+
*/
|
|
128
131
|
declare let SliderVue2: ComponentOptions<SliderAll, DefaultData<SliderData>, DefaultMethods<SliderAll>, SliderComputed, RecordPropsDefinition<SliderProps>>;
|
|
132
|
+
/**
|
|
133
|
+
* @hidden
|
|
134
|
+
*/
|
|
129
135
|
declare const Slider: DefineComponent<SliderProps, any, SliderData, SliderComputed, SliderMethods, {}, {}, {}, string, SliderProps, SliderProps, {}>;
|
|
130
136
|
export { Slider, SliderVue2 };
|
package/dist/es/slider/Slider.js
CHANGED
|
@@ -10,6 +10,10 @@ import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
|
10
10
|
import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from './../messages';
|
|
11
11
|
import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
|
|
12
12
|
import { packageMetadata } from '../package-metadata';
|
|
13
|
+
/**
|
|
14
|
+
* @hidden
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
var SliderVue2 = {
|
|
14
18
|
name: 'KendoSlider',
|
|
15
19
|
model: {
|
|
@@ -372,5 +376,9 @@ var SliderVue2 = {
|
|
|
372
376
|
}
|
|
373
377
|
}
|
|
374
378
|
};
|
|
379
|
+
/**
|
|
380
|
+
* @hidden
|
|
381
|
+
*/
|
|
382
|
+
|
|
375
383
|
var Slider = SliderVue2;
|
|
376
384
|
export { Slider, SliderVue2 };
|
|
@@ -52,6 +52,14 @@ export interface SliderLabelData {
|
|
|
52
52
|
*/
|
|
53
53
|
export interface SliderLabelAll extends Vue2type, SliderLabelMethods, SliderLabelData, SliderLabelState {
|
|
54
54
|
}
|
|
55
|
+
/**
|
|
56
|
+
* @hidden
|
|
57
|
+
*/
|
|
55
58
|
declare let SliderLabelVue2: ComponentOptions<SliderLabelAll, DefaultData<SliderLabelData>, DefaultMethods<SliderLabelAll>, {}, RecordPropsDefinition<SliderLabelProps>>;
|
|
59
|
+
/**
|
|
60
|
+
* Represents the Kendo UI for Vue Native SliderLabel component.
|
|
61
|
+
* ### props <span class='code'>[SliderLabelProps]({% slug api_inputs_sliderlabelprops %})</span>
|
|
62
|
+
* The props of the SliderLabel component.
|
|
63
|
+
*/
|
|
56
64
|
declare const SliderLabel: DefineComponent<SliderLabelProps, any, SliderLabelData, {}, SliderLabelMethods, {}, {}, {}, string, SliderLabelProps, SliderLabelProps, {}>;
|
|
57
65
|
export { SliderLabel, SliderLabelVue2 };
|
|
@@ -24,7 +24,10 @@ import { getDefaultSlots } from '@progress/kendo-vue-common';
|
|
|
24
24
|
* @hidden
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
|
-
export var SLIDER_LABEL_ATTRIBUTE = 'data-slider-label';
|
|
27
|
+
export var SLIDER_LABEL_ATTRIBUTE = 'data-slider-label';
|
|
28
|
+
/**
|
|
29
|
+
* @hidden
|
|
30
|
+
*/
|
|
28
31
|
|
|
29
32
|
var SliderLabelVue2 = {
|
|
30
33
|
name: 'KendoSliderLabel',
|
|
@@ -107,5 +110,11 @@ var SliderLabelVue2 = {
|
|
|
107
110
|
}
|
|
108
111
|
}
|
|
109
112
|
};
|
|
113
|
+
/**
|
|
114
|
+
* Represents the Kendo UI for Vue Native SliderLabel component.
|
|
115
|
+
* ### props <span class='code'>[SliderLabelProps]({% slug api_inputs_sliderlabelprops %})</span>
|
|
116
|
+
* The props of the SliderLabel component.
|
|
117
|
+
*/
|
|
118
|
+
|
|
110
119
|
var SliderLabel = SliderLabelVue2;
|
|
111
120
|
export { SliderLabel, SliderLabelVue2 };
|
|
@@ -169,6 +169,14 @@ export interface SwitchData {
|
|
|
169
169
|
*/
|
|
170
170
|
export interface SwitchAll extends Vue2type, SwitchMethods, SwitchData, SwitchComputed, SwitchState {
|
|
171
171
|
}
|
|
172
|
+
/**
|
|
173
|
+
* @hidden
|
|
174
|
+
*/
|
|
172
175
|
declare let SwitchVue2: ComponentOptions<SwitchAll, DefaultData<SwitchData>, DefaultMethods<SwitchAll>, SwitchComputed, RecordPropsDefinition<SwitchProps>>;
|
|
176
|
+
/**
|
|
177
|
+
* Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}).
|
|
178
|
+
* Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}).
|
|
179
|
+
* Obtaining the `ref` returns an object of type [SwitchHandle]({% slug api_inputs_switchhandle %}).
|
|
180
|
+
*/
|
|
173
181
|
declare const Switch: DefineComponent<SwitchProps, any, SwitchData, SwitchComputed, SwitchMethods, {}, {}, {}, string, SwitchProps, SwitchProps, {}>;
|
|
174
182
|
export { Switch, SwitchVue2 };
|
package/dist/es/switch/Switch.js
CHANGED
|
@@ -5,7 +5,10 @@ var gh = allVue.h;
|
|
|
5
5
|
import { guid, noop, Keys, getTabIndex, validatePackage, isRtl, kendoThemeMaps } from '@progress/kendo-vue-common';
|
|
6
6
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
7
7
|
import { messages, switchValidation } from './../messages';
|
|
8
|
-
import { packageMetadata } from '../package-metadata';
|
|
8
|
+
import { packageMetadata } from '../package-metadata';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
9
12
|
|
|
10
13
|
var SwitchVue2 = {
|
|
11
14
|
name: 'KendoSwitch',
|
|
@@ -334,5 +337,11 @@ var SwitchVue2 = {
|
|
|
334
337
|
}
|
|
335
338
|
}
|
|
336
339
|
};
|
|
340
|
+
/**
|
|
341
|
+
* Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}).
|
|
342
|
+
* Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}).
|
|
343
|
+
* Obtaining the `ref` returns an object of type [SwitchHandle]({% slug api_inputs_switchhandle %}).
|
|
344
|
+
*/
|
|
345
|
+
|
|
337
346
|
var Switch = SwitchVue2;
|
|
338
347
|
export { Switch, SwitchVue2 };
|
|
@@ -40,6 +40,42 @@ export interface TextAreaData {
|
|
|
40
40
|
*/
|
|
41
41
|
export interface TextAreaAll extends Vue2type, TextAreaMethods, TextAreaData, TextAreaComputed, TextAreaState {
|
|
42
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* @hidden
|
|
45
|
+
*/
|
|
43
46
|
declare let TextAreaVue2: ComponentOptions<TextAreaAll, DefaultData<TextAreaData>, DefaultMethods<TextAreaAll>, TextAreaComputed, RecordPropsDefinition<TextAreaProps>>;
|
|
47
|
+
/**
|
|
48
|
+
* Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
|
|
49
|
+
*
|
|
50
|
+
* Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
|
|
51
|
+
* Obtaining the `ref` returns an object of type [TextAreaHandle]({% slug api_inputs_textareahandle %}).
|
|
52
|
+
*
|
|
53
|
+
*
|
|
54
|
+
* ```jsx
|
|
55
|
+
* <template>
|
|
56
|
+
* <k-form
|
|
57
|
+
* @submit="handleSubmit">
|
|
58
|
+
* <formcontent />
|
|
59
|
+
* </k-form>
|
|
60
|
+
* </template>
|
|
61
|
+
* <script>
|
|
62
|
+
* import { Form } from "@progress/kendo-vue-form";
|
|
63
|
+
* import FormContent from './FormContent.vue';
|
|
64
|
+
*
|
|
65
|
+
* export default {
|
|
66
|
+
* components: {
|
|
67
|
+
* 'k-form': Form,
|
|
68
|
+
* 'formcontent': FormContent
|
|
69
|
+
* },
|
|
70
|
+
* methods: {
|
|
71
|
+
* handleSubmit (dataItem) {
|
|
72
|
+
* alert(JSON.stringify(dataItem, null, 2));
|
|
73
|
+
* }
|
|
74
|
+
* }
|
|
75
|
+
* };
|
|
76
|
+
*
|
|
77
|
+
* </script>
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
44
80
|
declare const TextArea: DefineComponent<TextAreaProps, any, TextAreaData, TextAreaComputed, TextAreaMethods, {}, {}, {}, string, TextAreaProps, TextAreaProps, {}>;
|
|
45
81
|
export { TextArea, TextAreaVue2 };
|
|
@@ -18,9 +18,12 @@ var __assign = this && this.__assign || function () {
|
|
|
18
18
|
import * as Vue from 'vue';
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
|
-
import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps // useDir,
|
|
21
|
+
import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate // useDir,
|
|
22
22
|
} from '@progress/kendo-vue-common';
|
|
23
|
-
import { packageMetadata } from '../package-metadata';
|
|
23
|
+
import { packageMetadata } from '../package-metadata';
|
|
24
|
+
/**
|
|
25
|
+
* @hidden
|
|
26
|
+
*/
|
|
24
27
|
|
|
25
28
|
var TextAreaVue2 = {
|
|
26
29
|
name: 'KendoTextArea',
|
|
@@ -84,7 +87,15 @@ var TextAreaVue2 = {
|
|
|
84
87
|
validityStyles: {
|
|
85
88
|
type: Boolean,
|
|
86
89
|
default: true
|
|
87
|
-
}
|
|
90
|
+
},
|
|
91
|
+
iconName: String,
|
|
92
|
+
inputPrefix: templateDefinition,
|
|
93
|
+
inputSuffix: templateDefinition,
|
|
94
|
+
showValidationIcon: Boolean,
|
|
95
|
+
showLoadingIcon: Boolean,
|
|
96
|
+
showClearButton: Boolean,
|
|
97
|
+
inputClass: String,
|
|
98
|
+
wrapperClass: String
|
|
88
99
|
},
|
|
89
100
|
created: function created() {
|
|
90
101
|
validatePackage(packageMetadata);
|
|
@@ -98,12 +109,20 @@ var TextAreaVue2 = {
|
|
|
98
109
|
size = _b.size,
|
|
99
110
|
fillMode = _b.fillMode,
|
|
100
111
|
rounded = _b.rounded,
|
|
101
|
-
required = _b.required
|
|
112
|
+
required = _b.required,
|
|
113
|
+
showLoadingIcon = _b.showLoadingIcon;
|
|
102
114
|
var invalid = this.validityStyles === true ? !this.isValid : false;
|
|
103
115
|
return _a = {
|
|
104
116
|
'k-input': true,
|
|
105
117
|
'k-textarea': true
|
|
106
|
-
}, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = invalid, _a['k-required'] = required, _a;
|
|
118
|
+
}, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = invalid, _a['k-required'] = required, _a['k-loading'] = showLoadingIcon, _a[this.wrapperClass] = this.wrapperClass, _a;
|
|
119
|
+
},
|
|
120
|
+
inputInnerClass: function inputInnerClass() {
|
|
121
|
+
var _a;
|
|
122
|
+
|
|
123
|
+
return _a = {
|
|
124
|
+
'k-input-inner': true
|
|
125
|
+
}, _a[this.inputClass] = this.inputClass, _a;
|
|
107
126
|
},
|
|
108
127
|
computedValue: function computedValue() {
|
|
109
128
|
return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
|
|
@@ -151,7 +170,11 @@ var TextAreaVue2 = {
|
|
|
151
170
|
id = _a.id,
|
|
152
171
|
name = _a.name,
|
|
153
172
|
placeholder = _a.placeholder,
|
|
154
|
-
tabIndex = _a.tabIndex
|
|
173
|
+
tabIndex = _a.tabIndex,
|
|
174
|
+
iconName = _a.iconName,
|
|
175
|
+
showValidationIcon = _a.showValidationIcon,
|
|
176
|
+
showLoadingIcon = _a.showLoadingIcon,
|
|
177
|
+
showClearButton = _a.showClearButton;
|
|
155
178
|
|
|
156
179
|
var textAreaAttrs = __assign({
|
|
157
180
|
id: id || this.calculatedId,
|
|
@@ -168,9 +191,27 @@ var TextAreaVue2 = {
|
|
|
168
191
|
'aria-disabled': disabled || undefined
|
|
169
192
|
}, this.$attrs);
|
|
170
193
|
|
|
194
|
+
var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
|
|
195
|
+
var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
|
|
196
|
+
var inputPrefix = getTemplate.call(this, {
|
|
197
|
+
h: h,
|
|
198
|
+
template: inputPrefixTemplate,
|
|
199
|
+
additionalProps: {
|
|
200
|
+
value: this.computedValue,
|
|
201
|
+
valid: this.isValid
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
var inputSuffix = getTemplate.call(this, {
|
|
205
|
+
h: h,
|
|
206
|
+
template: inputSuffixTemplate,
|
|
207
|
+
additionalProps: {
|
|
208
|
+
value: this.computedValue,
|
|
209
|
+
valid: this.isValid
|
|
210
|
+
}
|
|
211
|
+
});
|
|
171
212
|
var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
|
|
172
213
|
attrs: this.v3 ? undefined : textAreaAttrs,
|
|
173
|
-
|
|
214
|
+
class: this.inputInnerClass,
|
|
174
215
|
ref: this.v3 ? function (el) {
|
|
175
216
|
_this.elementRef = el;
|
|
176
217
|
} : 'element',
|
|
@@ -201,7 +242,27 @@ var TextAreaVue2 = {
|
|
|
201
242
|
dir: this.currentDir
|
|
202
243
|
},
|
|
203
244
|
style: this.$attrs.style
|
|
204
|
-
}, [
|
|
245
|
+
}, [iconName && h("span", {
|
|
246
|
+
"class": "k-input-icon k-icon k-i-" + iconName
|
|
247
|
+
}), this.$props.inputPrefix && h("span", {
|
|
248
|
+
"class": "k-input-prefix"
|
|
249
|
+
}, [inputPrefix]), textarea, this.$props.inputSuffix && h("span", {
|
|
250
|
+
"class": "k-input-suffix"
|
|
251
|
+
}, [inputSuffix]), showValidationIcon && this.isValid && h("span", {
|
|
252
|
+
"class": "k-input-validation-icon k-icon k-i-check"
|
|
253
|
+
}), showValidationIcon && !this.isValid && h("span", {
|
|
254
|
+
"class": "k-input-validation-icon k-icon k-i-warning"
|
|
255
|
+
}), showLoadingIcon && h("span", {
|
|
256
|
+
"class": "k-input-loading-icon k-icon k-i-loading"
|
|
257
|
+
}), showClearButton && this.computedValue && h("span", {
|
|
258
|
+
onClick: this.clearClick,
|
|
259
|
+
on: this.v3 ? undefined : {
|
|
260
|
+
"click": this.clearClick
|
|
261
|
+
},
|
|
262
|
+
"class": "k-clear-value"
|
|
263
|
+
}, [h("span", {
|
|
264
|
+
"class": "k-icon k-i-x"
|
|
265
|
+
})])]);
|
|
205
266
|
},
|
|
206
267
|
methods: {
|
|
207
268
|
setValidity: function setValidity() {
|
|
@@ -213,13 +274,16 @@ var TextAreaVue2 = {
|
|
|
213
274
|
this.textAreaHeight = this.element.scrollHeight + "px";
|
|
214
275
|
}
|
|
215
276
|
},
|
|
277
|
+
clearClick: function clearClick(event) {
|
|
278
|
+
this.emitUpdate(event, 'change', '');
|
|
279
|
+
},
|
|
216
280
|
focus: function focus() {
|
|
217
281
|
if (this.element) {
|
|
218
282
|
this.element.focus();
|
|
219
283
|
}
|
|
220
284
|
},
|
|
221
|
-
|
|
222
|
-
var newValue =
|
|
285
|
+
emitUpdate: function emitUpdate(event, eventName, value) {
|
|
286
|
+
var newValue = value;
|
|
223
287
|
|
|
224
288
|
if (!this.$props.disabled) {
|
|
225
289
|
this.textAreaHeight = 'auto';
|
|
@@ -229,7 +293,7 @@ var TextAreaVue2 = {
|
|
|
229
293
|
if (!this.$props.disabled) {
|
|
230
294
|
this.$emit('changemodel', newValue);
|
|
231
295
|
this.$emit('update:modelValue', newValue);
|
|
232
|
-
this.$emit(
|
|
296
|
+
this.$emit(eventName, {
|
|
233
297
|
event: event,
|
|
234
298
|
component: this,
|
|
235
299
|
name: this.element.name,
|
|
@@ -237,24 +301,11 @@ var TextAreaVue2 = {
|
|
|
237
301
|
});
|
|
238
302
|
}
|
|
239
303
|
},
|
|
304
|
+
handleChange: function handleChange(event) {
|
|
305
|
+
this.emitUpdate(event, 'change', event.target.value);
|
|
306
|
+
},
|
|
240
307
|
handleInput: function handleInput(event) {
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
if (!this.$props.disabled) {
|
|
244
|
-
this.textAreaHeight = 'auto';
|
|
245
|
-
this.currentValue = newValue;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
if (!this.$props.disabled) {
|
|
249
|
-
this.$emit('changemodel', newValue);
|
|
250
|
-
this.$emit('update:modelValue', newValue);
|
|
251
|
-
this.$emit('input', {
|
|
252
|
-
event: event,
|
|
253
|
-
component: this,
|
|
254
|
-
name: this.element.name,
|
|
255
|
-
value: newValue
|
|
256
|
-
});
|
|
257
|
-
}
|
|
308
|
+
this.emitUpdate(event, 'input', event.target.value);
|
|
258
309
|
},
|
|
259
310
|
handleFocus: function handleFocus(event) {
|
|
260
311
|
if (!this.$props.disabled) {
|
|
@@ -276,5 +327,39 @@ var TextAreaVue2 = {
|
|
|
276
327
|
}
|
|
277
328
|
}
|
|
278
329
|
};
|
|
330
|
+
/**
|
|
331
|
+
* Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
|
|
332
|
+
*
|
|
333
|
+
* Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
|
|
334
|
+
* Obtaining the `ref` returns an object of type [TextAreaHandle]({% slug api_inputs_textareahandle %}).
|
|
335
|
+
*
|
|
336
|
+
*
|
|
337
|
+
* ```jsx
|
|
338
|
+
* <template>
|
|
339
|
+
* <k-form
|
|
340
|
+
* @submit="handleSubmit">
|
|
341
|
+
* <formcontent />
|
|
342
|
+
* </k-form>
|
|
343
|
+
* </template>
|
|
344
|
+
* <script>
|
|
345
|
+
* import { Form } from "@progress/kendo-vue-form";
|
|
346
|
+
* import FormContent from './FormContent.vue';
|
|
347
|
+
*
|
|
348
|
+
* export default {
|
|
349
|
+
* components: {
|
|
350
|
+
* 'k-form': Form,
|
|
351
|
+
* 'formcontent': FormContent
|
|
352
|
+
* },
|
|
353
|
+
* methods: {
|
|
354
|
+
* handleSubmit (dataItem) {
|
|
355
|
+
* alert(JSON.stringify(dataItem, null, 2));
|
|
356
|
+
* }
|
|
357
|
+
* }
|
|
358
|
+
* };
|
|
359
|
+
*
|
|
360
|
+
* </script>
|
|
361
|
+
* ```
|
|
362
|
+
*/
|
|
363
|
+
|
|
279
364
|
var TextArea = TextAreaVue2;
|
|
280
365
|
export { TextArea, TextAreaVue2 };
|
|
@@ -105,7 +105,46 @@ export interface TextAreaProps extends FormComponentProps {
|
|
|
105
105
|
* Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
|
|
106
106
|
*/
|
|
107
107
|
value?: string | string[] | number;
|
|
108
|
+
/**
|
|
109
|
+
* If set to `false`, no visual representation of the invalid state of the component will be applied.
|
|
110
|
+
*
|
|
111
|
+
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
|
|
112
|
+
*
|
|
113
|
+
* @default true
|
|
114
|
+
*/
|
|
108
115
|
validityStyles?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* Defines a string prop that controls the input icon.
|
|
118
|
+
*/
|
|
119
|
+
iconName?: String;
|
|
120
|
+
/**
|
|
121
|
+
* Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
122
|
+
*/
|
|
123
|
+
inputPrefix?: Boolean | String | Object | Function;
|
|
124
|
+
/**
|
|
125
|
+
* Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
126
|
+
*/
|
|
127
|
+
inputSuffix?: Boolean | String | Object | Function;
|
|
128
|
+
/**
|
|
129
|
+
* Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
|
|
130
|
+
*/
|
|
131
|
+
showValidationIcon?: Boolean;
|
|
132
|
+
/**
|
|
133
|
+
* Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
|
|
134
|
+
*/
|
|
135
|
+
showLoadingIcon?: Boolean;
|
|
136
|
+
/**
|
|
137
|
+
* Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
|
|
138
|
+
*/
|
|
139
|
+
showClearButton?: Boolean;
|
|
140
|
+
/**
|
|
141
|
+
* Defines additional class to the wrapper element.
|
|
142
|
+
*/
|
|
143
|
+
wrapperClass?: String;
|
|
144
|
+
/**
|
|
145
|
+
* Defines additional class to the input element.
|
|
146
|
+
*/
|
|
147
|
+
inputClass?: String;
|
|
109
148
|
/**
|
|
110
149
|
* The event handler that will be fired when the changes the selected value.
|
|
111
150
|
*/
|
|
@@ -2,9 +2,20 @@
|
|
|
2
2
|
import { DefineComponent } from 'vue';
|
|
3
3
|
// @ts-ignore
|
|
4
4
|
import * as Vue from 'vue';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*/
|
|
5
9
|
// @ts-ignore
|
|
6
10
|
type Vue2type = Vue.default;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
7
15
|
// @ts-ignore
|
|
8
16
|
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
17
|
+
/**
|
|
18
|
+
* @hidden
|
|
19
|
+
*/
|
|
9
20
|
// @ts-ignore
|
|
10
21
|
export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
|
|
@@ -6,7 +6,7 @@ declare type DefaultMethods<V> = {
|
|
|
6
6
|
import { LocalizationService } from '@progress/kendo-vue-intl';
|
|
7
7
|
import { CheckboxProps } from './interfaces/CheckboxProps';
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* @hidden
|
|
10
10
|
*/
|
|
11
11
|
export interface CheckboxHandle {
|
|
12
12
|
element: any;
|
|
@@ -68,6 +68,12 @@ export interface CheckboxComputed {
|
|
|
68
68
|
*/
|
|
69
69
|
export interface CheckboxAll extends Vue2type, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
|
|
70
70
|
}
|
|
71
|
+
/**
|
|
72
|
+
* @hidden
|
|
73
|
+
*/
|
|
71
74
|
declare let CheckboxVue2: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
|
|
75
|
+
/**
|
|
76
|
+
* @hidden
|
|
77
|
+
*/
|
|
72
78
|
declare const Checkbox: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
|
|
73
79
|
export { Checkbox, CheckboxVue2 };
|
|
@@ -19,6 +19,10 @@ var package_metadata_1 = require("../package-metadata");
|
|
|
19
19
|
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
20
20
|
|
|
21
21
|
var messages_1 = require("./../messages");
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
25
|
+
|
|
22
26
|
|
|
23
27
|
var CheckboxVue2 = {
|
|
24
28
|
name: 'KendoCheckbox',
|
|
@@ -377,5 +381,9 @@ var CheckboxVue2 = {
|
|
|
377
381
|
}
|
|
378
382
|
};
|
|
379
383
|
exports.CheckboxVue2 = CheckboxVue2;
|
|
384
|
+
/**
|
|
385
|
+
* @hidden
|
|
386
|
+
*/
|
|
387
|
+
|
|
380
388
|
var Checkbox = CheckboxVue2;
|
|
381
389
|
exports.Checkbox = Checkbox;
|
|
@@ -50,6 +50,12 @@ export interface ColorPaletteData {
|
|
|
50
50
|
*/
|
|
51
51
|
export interface ColorPaletteAll extends Vue2type, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
|
|
52
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* @hidden
|
|
55
|
+
*/
|
|
53
56
|
declare let ColorPaletteVue2: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
|
|
57
|
+
/**
|
|
58
|
+
* @hidden
|
|
59
|
+
*/
|
|
54
60
|
declare const ColorPalette: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
|
|
55
61
|
export { ColorPalette, ColorPaletteVue2 };
|
|
@@ -36,7 +36,10 @@ exports.DEFAULT_COLUMNS_COUNT = 10;
|
|
|
36
36
|
* @hidden
|
|
37
37
|
*/
|
|
38
38
|
|
|
39
|
-
exports.DEFAULT_PRESET = 'office';
|
|
39
|
+
exports.DEFAULT_PRESET = 'office';
|
|
40
|
+
/**
|
|
41
|
+
* @hidden
|
|
42
|
+
*/
|
|
40
43
|
|
|
41
44
|
var ColorPaletteVue2 = {
|
|
42
45
|
name: 'KendoColorPalette',
|
|
@@ -359,5 +362,9 @@ var ColorPaletteVue2 = {
|
|
|
359
362
|
}
|
|
360
363
|
};
|
|
361
364
|
exports.ColorPaletteVue2 = ColorPaletteVue2;
|
|
365
|
+
/**
|
|
366
|
+
* @hidden
|
|
367
|
+
*/
|
|
368
|
+
|
|
362
369
|
var ColorPalette = ColorPaletteVue2;
|
|
363
370
|
exports.ColorPalette = ColorPalette;
|
|
@@ -46,6 +46,12 @@ export interface ColorPickerData {
|
|
|
46
46
|
*/
|
|
47
47
|
export interface ColorPickerAll extends Vue2type, ColorPickerMethods, ColorPickerData, ColorPickerComputed, ColorPickerState {
|
|
48
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* @hidden
|
|
51
|
+
*/
|
|
49
52
|
declare let ColorPickerVue2: ComponentOptions<ColorPickerAll, DefaultData<ColorPickerData>, DefaultMethods<ColorPickerAll>, ColorPickerComputed, RecordPropsDefinition<ColorPickerProps>>;
|
|
53
|
+
/**
|
|
54
|
+
* @hidden
|
|
55
|
+
*/
|
|
50
56
|
declare const ColorPicker: DefineComponent<ColorPickerProps, any, ColorPickerData, ColorPickerComputed, ColorPickerMethods, {}, {}, {}, string, ColorPickerProps, ColorPickerProps, {}>;
|
|
51
57
|
export { ColorPicker, ColorPickerVue2 };
|
|
@@ -41,7 +41,10 @@ var DEFAULT_PALETTE_SETTINGS = {
|
|
|
41
41
|
|
|
42
42
|
var isControlled = function isControlled(prop) {
|
|
43
43
|
return prop !== undefined;
|
|
44
|
-
};
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* @hidden
|
|
47
|
+
*/
|
|
45
48
|
|
|
46
49
|
|
|
47
50
|
var ColorPickerVue2 = {
|
|
@@ -401,5 +404,9 @@ var ColorPickerVue2 = {
|
|
|
401
404
|
}
|
|
402
405
|
};
|
|
403
406
|
exports.ColorPickerVue2 = ColorPickerVue2;
|
|
407
|
+
/**
|
|
408
|
+
* @hidden
|
|
409
|
+
*/
|
|
410
|
+
|
|
404
411
|
var ColorPicker = ColorPickerVue2;
|
|
405
412
|
exports.ColorPicker = ColorPicker;
|
|
@@ -35,6 +35,12 @@ export interface PickerData {
|
|
|
35
35
|
*/
|
|
36
36
|
export interface PickerAll extends Vue2type, PickerMethods, PickerData, PickerComputed, PickerState {
|
|
37
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* @hidden
|
|
40
|
+
*/
|
|
38
41
|
declare let PickerVue2: ComponentOptions<PickerAll, DefaultData<PickerData>, DefaultMethods<PickerAll>, PickerComputed, RecordPropsDefinition<PickerProps>>;
|
|
42
|
+
/**
|
|
43
|
+
* @hidden
|
|
44
|
+
*/
|
|
39
45
|
declare const Picker: DefineComponent<PickerProps, any, PickerData, PickerComputed, PickerMethods, {}, {}, {}, string, PickerProps, PickerProps, {}>;
|
|
40
46
|
export { Picker, PickerVue2 };
|
|
@@ -23,7 +23,10 @@ var ANCHOR_VERTICAL_ALIGN = 'bottom';
|
|
|
23
23
|
* @hidden
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
|
-
var POPUP_VERTICAL_ALIGN = 'top';
|
|
26
|
+
var POPUP_VERTICAL_ALIGN = 'top';
|
|
27
|
+
/**
|
|
28
|
+
* @hidden
|
|
29
|
+
*/
|
|
27
30
|
|
|
28
31
|
var PickerVue2 = {
|
|
29
32
|
name: 'KendoPicker',
|
|
@@ -101,5 +104,9 @@ var PickerVue2 = {
|
|
|
101
104
|
}
|
|
102
105
|
};
|
|
103
106
|
exports.PickerVue2 = PickerVue2;
|
|
107
|
+
/**
|
|
108
|
+
* @hidden
|
|
109
|
+
*/
|
|
110
|
+
|
|
104
111
|
var Picker = PickerVue2;
|
|
105
112
|
exports.Picker = Picker;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { TileSize } from '../models/tile-size';
|
|
2
2
|
import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent';
|
|
3
3
|
/**
|
|
4
|
-
* Represents the props of the [
|
|
4
|
+
* Represents the props of the [KendoVue ColorPalette component]({% slug overview_colorpalette %}).
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
5
8
|
*/
|
|
6
9
|
export interface ColorPaletteProps {
|
|
7
10
|
/**
|
|
@@ -33,18 +36,6 @@ export interface ColorPaletteProps {
|
|
|
33
36
|
/**
|
|
34
37
|
* Determines whether the ColorPalette is disabled
|
|
35
38
|
* ([more information and example]({% slug disabled_colorpalette %})).
|
|
36
|
-
*
|
|
37
|
-
* @example
|
|
38
|
-
* ```jsx
|
|
39
|
-
* class App extends React.Component {
|
|
40
|
-
* render() {
|
|
41
|
-
* return (
|
|
42
|
-
* <ColorPalette disabled={true} />
|
|
43
|
-
* );
|
|
44
|
-
* }
|
|
45
|
-
* }
|
|
46
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
47
|
-
* ```
|
|
48
39
|
*/
|
|
49
40
|
disabled?: boolean;
|
|
50
41
|
/**
|