@progress/kendo-vue-inputs 2.7.2 → 2.8.0-dev.202201121019
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 +43 -7
- package/dist/es/input/Input.js +47 -24
- 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 +43 -7
- package/dist/npm/input/Input.js +48 -25
- 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
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
// @ts-ignore
|
|
2
2
|
import { DefineComponent } from 'vue';
|
|
3
|
-
|
|
3
|
+
// @ts-ignore
|
|
4
|
+
import * as Vue from 'vue';
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
type Vue2type = Vue.default;
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
9
|
+
export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
|
|
@@ -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;
|
|
@@ -67,8 +66,8 @@ export interface CheckboxComputed {
|
|
|
67
66
|
/**
|
|
68
67
|
* @hidden
|
|
69
68
|
*/
|
|
70
|
-
export interface CheckboxAll extends
|
|
69
|
+
export interface CheckboxAll extends Vue2type, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
|
|
71
70
|
}
|
|
72
|
-
declare let
|
|
73
|
-
declare const
|
|
74
|
-
export { Checkbox,
|
|
71
|
+
declare let CheckboxVue2: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
|
|
72
|
+
declare const Checkbox: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
|
|
73
|
+
export { Checkbox, CheckboxVue2 };
|
|
@@ -4,11 +4,11 @@ var allVue = Vue;
|
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
var ref = allVue.ref;
|
|
6
6
|
var inject = allVue.inject;
|
|
7
|
-
import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners } from '@progress/kendo-vue-common';
|
|
7
|
+
import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
|
|
8
8
|
import { packageMetadata } from '../package-metadata';
|
|
9
9
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
10
10
|
import { messages, checkboxValidation, checkboxOptionalText } from './../messages';
|
|
11
|
-
var
|
|
11
|
+
var CheckboxVue2 = {
|
|
12
12
|
name: 'KendoCheckbox',
|
|
13
13
|
// @ts-ignore
|
|
14
14
|
emits: {
|
|
@@ -53,6 +53,20 @@ var Checkbox = {
|
|
|
53
53
|
labelPlacement: String,
|
|
54
54
|
labelOptional: Boolean,
|
|
55
55
|
name: String,
|
|
56
|
+
size: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: 'medium',
|
|
59
|
+
validator: function validator(value) {
|
|
60
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
rounded: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: 'medium',
|
|
66
|
+
validator: function validator(value) {
|
|
67
|
+
return [null, 'small', 'medium', 'large'].includes(value);
|
|
68
|
+
}
|
|
69
|
+
},
|
|
56
70
|
tabIndex: Number,
|
|
57
71
|
value: {
|
|
58
72
|
type: [String, Boolean],
|
|
@@ -159,20 +173,24 @@ var Checkbox = {
|
|
|
159
173
|
};
|
|
160
174
|
},
|
|
161
175
|
render: function render(createElement) {
|
|
176
|
+
var _a;
|
|
177
|
+
|
|
162
178
|
var h = gh || createElement;
|
|
163
|
-
var
|
|
164
|
-
ariaDescribedBy =
|
|
165
|
-
ariaLabelledBy =
|
|
166
|
-
disabled =
|
|
167
|
-
id =
|
|
168
|
-
label =
|
|
169
|
-
labelRender =
|
|
170
|
-
labelPlacement =
|
|
171
|
-
name =
|
|
172
|
-
labelOptional =
|
|
173
|
-
tabIndex =
|
|
174
|
-
required =
|
|
175
|
-
validityStyles =
|
|
179
|
+
var _b = this.$props,
|
|
180
|
+
ariaDescribedBy = _b.ariaDescribedBy,
|
|
181
|
+
ariaLabelledBy = _b.ariaLabelledBy,
|
|
182
|
+
disabled = _b.disabled,
|
|
183
|
+
id = _b.id,
|
|
184
|
+
label = _b.label,
|
|
185
|
+
labelRender = _b.labelRender,
|
|
186
|
+
labelPlacement = _b.labelPlacement,
|
|
187
|
+
name = _b.name,
|
|
188
|
+
labelOptional = _b.labelOptional,
|
|
189
|
+
tabIndex = _b.tabIndex,
|
|
190
|
+
required = _b.required,
|
|
191
|
+
validityStyles = _b.validityStyles,
|
|
192
|
+
size = _b.size,
|
|
193
|
+
rounded = _b.rounded;
|
|
176
194
|
var defaultSlot = getDefaultSlots(this);
|
|
177
195
|
var renderedLabel = label;
|
|
178
196
|
this.localizationService = provideLocalizationService(this);
|
|
@@ -181,11 +199,9 @@ var Checkbox = {
|
|
|
181
199
|
var checkboxClasses = classNames({
|
|
182
200
|
'k-state-disabled': disabled
|
|
183
201
|
});
|
|
184
|
-
var inputClasses = classNames({
|
|
185
|
-
'k-checkbox': true
|
|
186
|
-
|
|
187
|
-
'k-state-invalid k-invalid': !(this.isValid || validityStyles !== undefined || validityStyles === true)
|
|
188
|
-
});
|
|
202
|
+
var inputClasses = classNames((_a = {
|
|
203
|
+
'k-checkbox': true
|
|
204
|
+
}, _a["k-checkbox-" + kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-state-indeterminate'] = this.indeterminateProp, _a['k-state-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
|
|
189
205
|
|
|
190
206
|
var checkboxInput = function checkboxInput() {
|
|
191
207
|
var _this = this;
|
|
@@ -348,5 +364,5 @@ var Checkbox = {
|
|
|
348
364
|
}
|
|
349
365
|
}
|
|
350
366
|
};
|
|
351
|
-
var
|
|
352
|
-
export { Checkbox,
|
|
367
|
+
var Checkbox = CheckboxVue2;
|
|
368
|
+
export { Checkbox, CheckboxVue2 };
|
|
@@ -44,6 +44,30 @@ export interface CheckboxProps extends ToggleBaseProps, FormComponentProps {
|
|
|
44
44
|
* Sets the `id` of the Checkbox.
|
|
45
45
|
*/
|
|
46
46
|
id?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Configures the `size` of the Checkbox.
|
|
49
|
+
*
|
|
50
|
+
* The available options are:
|
|
51
|
+
* - small
|
|
52
|
+
* - medium
|
|
53
|
+
* - large
|
|
54
|
+
* - null—Does not set a size `className`.
|
|
55
|
+
*
|
|
56
|
+
* @default `medium`
|
|
57
|
+
*/
|
|
58
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
59
|
+
/**
|
|
60
|
+
* Configures the `rounded` style of the Checkbox.
|
|
61
|
+
*
|
|
62
|
+
* The available options are:
|
|
63
|
+
* - small
|
|
64
|
+
* - medium
|
|
65
|
+
* - large
|
|
66
|
+
* - null—Does not set a rounded `className`.
|
|
67
|
+
*
|
|
68
|
+
* @default `medium`
|
|
69
|
+
*/
|
|
70
|
+
rounded?: null | 'small' | 'medium' | 'large' | string;
|
|
47
71
|
/**
|
|
48
72
|
* 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).
|
|
49
73
|
* For example these elements could contain error or hint message.
|
|
@@ -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;
|
|
@@ -24,6 +23,7 @@ export declare const DEFAULT_PRESET = "office";
|
|
|
24
23
|
export interface ColorPaletteState {
|
|
25
24
|
wrapper: HTMLDivElement | null;
|
|
26
25
|
paletteService: ColorPaletteService;
|
|
26
|
+
guid: string;
|
|
27
27
|
}
|
|
28
28
|
/**
|
|
29
29
|
* @hidden
|
|
@@ -48,8 +48,8 @@ export interface ColorPaletteData {
|
|
|
48
48
|
/**
|
|
49
49
|
* @hidden
|
|
50
50
|
*/
|
|
51
|
-
export interface ColorPaletteAll extends
|
|
51
|
+
export interface ColorPaletteAll extends Vue2type, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
|
|
52
52
|
}
|
|
53
|
-
declare let
|
|
54
|
-
declare const
|
|
55
|
-
export { ColorPalette,
|
|
53
|
+
declare let ColorPaletteVue2: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
|
|
54
|
+
declare const ColorPalette: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
|
|
55
|
+
export { ColorPalette, ColorPaletteVue2 };
|
|
@@ -3,7 +3,7 @@ import * as Vue from 'vue';
|
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
import { ColorPaletteService } from './utils/color-palette.service';
|
|
6
|
-
import { classNames, Keys, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
|
|
6
|
+
import { classNames, Keys, guid, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
|
|
7
7
|
import { packageMetadata } from '../package-metadata';
|
|
8
8
|
import { PALETTEPRESETS } from './models/palette-presets';
|
|
9
9
|
import { isPresent } from './utils/misc';
|
|
@@ -24,7 +24,7 @@ export var DEFAULT_COLUMNS_COUNT = 10;
|
|
|
24
24
|
|
|
25
25
|
export var DEFAULT_PRESET = 'office'; // tslint:enable:max-line-length
|
|
26
26
|
|
|
27
|
-
var
|
|
27
|
+
var ColorPaletteVue2 = {
|
|
28
28
|
name: 'KendoColorPalette',
|
|
29
29
|
props: {
|
|
30
30
|
palette: {
|
|
@@ -46,6 +46,7 @@ var ColorPalette = {
|
|
|
46
46
|
},
|
|
47
47
|
created: function created() {
|
|
48
48
|
validatePackage(packageMetadata);
|
|
49
|
+
this.guid = guid();
|
|
49
50
|
},
|
|
50
51
|
mounted: function mounted() {
|
|
51
52
|
this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
|
|
@@ -336,5 +337,5 @@ var ColorPalette = {
|
|
|
336
337
|
}
|
|
337
338
|
}
|
|
338
339
|
};
|
|
339
|
-
var
|
|
340
|
-
export { ColorPalette,
|
|
340
|
+
var ColorPalette = ColorPaletteVue2;
|
|
341
|
+
export { ColorPalette, ColorPaletteVue2 };
|
|
@@ -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 ColorPickerData {
|
|
|
45
44
|
/**
|
|
46
45
|
* @hidden
|
|
47
46
|
*/
|
|
48
|
-
export interface ColorPickerAll extends
|
|
47
|
+
export interface ColorPickerAll extends Vue2type, ColorPickerMethods, ColorPickerData, ColorPickerComputed, ColorPickerState {
|
|
49
48
|
}
|
|
50
|
-
declare let
|
|
51
|
-
declare const
|
|
52
|
-
export { ColorPicker,
|
|
49
|
+
declare let ColorPickerVue2: ComponentOptions<ColorPickerAll, DefaultData<ColorPickerData>, DefaultMethods<ColorPickerAll>, ColorPickerComputed, RecordPropsDefinition<ColorPickerProps>>;
|
|
50
|
+
declare const ColorPicker: DefineComponent<ColorPickerProps, any, ColorPickerData, ColorPickerComputed, ColorPickerMethods, {}, {}, {}, string, ColorPickerProps, ColorPickerProps, {}>;
|
|
51
|
+
export { ColorPicker, ColorPickerVue2 };
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
+
import { Button } from '@progress/kendo-vue-buttons';
|
|
5
6
|
import { classNames, Keys, // useDir,
|
|
6
|
-
getTabIndex, guid } from '@progress/kendo-vue-common';
|
|
7
|
-
import { validatePackage } from '@progress/kendo-vue-common';
|
|
7
|
+
getTabIndex, guid, kendoThemeMaps, validatePackage } from '@progress/kendo-vue-common';
|
|
8
8
|
import { packageMetadata } from '../package-metadata';
|
|
9
9
|
import { Picker } from './Picker';
|
|
10
10
|
import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
|
|
@@ -32,7 +32,7 @@ var isControlled = function isControlled(prop) {
|
|
|
32
32
|
}; // tslint:enable:max-line-length
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
var
|
|
35
|
+
var ColorPickerVue2 = {
|
|
36
36
|
name: 'KendoColorPicker',
|
|
37
37
|
props: {
|
|
38
38
|
value: {
|
|
@@ -78,7 +78,7 @@ var ColorPicker = {
|
|
|
78
78
|
type: String,
|
|
79
79
|
default: 'medium',
|
|
80
80
|
validator: function validator(value) {
|
|
81
|
-
return [null, 'small', 'medium', 'large', '
|
|
81
|
+
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
82
82
|
}
|
|
83
83
|
},
|
|
84
84
|
fillMode: {
|
|
@@ -114,19 +114,16 @@ var ColorPicker = {
|
|
|
114
114
|
return this.$props.iconClassName || icon && "k-icon k-i-" + icon;
|
|
115
115
|
},
|
|
116
116
|
wrapperClassName: function wrapperClassName() {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
'k-state-disabled': disabled,
|
|
128
|
-
'k-state-focused': this.focused
|
|
129
|
-
};
|
|
117
|
+
var _a;
|
|
118
|
+
|
|
119
|
+
var _b = this.$props,
|
|
120
|
+
size = _b.size,
|
|
121
|
+
fillMode = _b.fillMode,
|
|
122
|
+
rounded = _b.rounded;
|
|
123
|
+
return _a = {
|
|
124
|
+
'k-picker': true,
|
|
125
|
+
'k-colorpicker': true
|
|
126
|
+
}, _a["k-picker-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-picker-" + fillMode] = fillMode, _a["k-rounded-" + (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;
|
|
130
127
|
}
|
|
131
128
|
},
|
|
132
129
|
created: function created() {
|
|
@@ -153,16 +150,18 @@ var ColorPicker = {
|
|
|
153
150
|
render: function render(createElement) {
|
|
154
151
|
var _this2 = this;
|
|
155
152
|
|
|
153
|
+
var _a;
|
|
154
|
+
|
|
156
155
|
var _this = this;
|
|
157
156
|
|
|
158
157
|
var h = gh || createElement;
|
|
159
|
-
var
|
|
160
|
-
disabled =
|
|
161
|
-
tabIndex =
|
|
158
|
+
var _b = this.$props,
|
|
159
|
+
disabled = _b.disabled,
|
|
160
|
+
tabIndex = _b.tabIndex; // const dir = useDir(focusableElementGuid, props.dir);
|
|
162
161
|
|
|
163
162
|
return h("span", {
|
|
164
|
-
"class": this.wrapperClassName
|
|
165
|
-
|
|
163
|
+
"class": this.wrapperClassName // dir={dir}
|
|
164
|
+
,
|
|
166
165
|
id: this.$props.id,
|
|
167
166
|
attrs: this.v3 ? undefined : {
|
|
168
167
|
id: this.$props.id,
|
|
@@ -173,7 +172,6 @@ var ColorPicker = {
|
|
|
173
172
|
},
|
|
174
173
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
175
174
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
176
|
-
"class": this.spanClassName,
|
|
177
175
|
ref: this.focusableElementGuid,
|
|
178
176
|
tabIndex: getTabIndex(tabIndex, disabled),
|
|
179
177
|
title: this.$props.title,
|
|
@@ -185,40 +183,41 @@ var ColorPicker = {
|
|
|
185
183
|
},
|
|
186
184
|
onFocusin: this.onFocusHandler,
|
|
187
185
|
onFocusout: this.onBlurHandler
|
|
188
|
-
}, [
|
|
189
|
-
onClick: this.onActiveColorClickHandler,
|
|
190
|
-
on: this.v3 ? undefined : {
|
|
191
|
-
"click": this.onActiveColorClickHandler
|
|
192
|
-
},
|
|
193
|
-
"class": 'k-selected-color',
|
|
194
|
-
style: {
|
|
195
|
-
backgroundColor: this.computedValue
|
|
196
|
-
}
|
|
197
|
-
}, [!this.computedValue && h("span", {
|
|
198
|
-
"class": 'k-icon k-i-line'
|
|
199
|
-
})]) : h("span", {
|
|
186
|
+
}, [h("span", {
|
|
200
187
|
onClick: this.onActiveColorClickHandler,
|
|
201
188
|
on: this.v3 ? undefined : {
|
|
202
189
|
"click": this.onActiveColorClickHandler
|
|
203
190
|
},
|
|
204
|
-
"class":
|
|
191
|
+
"class": 'k-input-inner'
|
|
205
192
|
}, [h("span", {
|
|
206
|
-
"class": 'k-
|
|
193
|
+
"class": classNames('k-value-icon', 'k-color-preview', {
|
|
194
|
+
'k-no-color': !this.computedValue,
|
|
195
|
+
'k-icon-color-preview': this.icon || this.iconClassName
|
|
196
|
+
})
|
|
197
|
+
}, [(this.iconClassName || this.icon) && h("span", {
|
|
198
|
+
"class": classNames('k-color-preview-icon', this.iconClassName, (_a = {}, _a["k-icon k-i-" + this.icon] = this.icon && !this.iconClassName, _a))
|
|
199
|
+
}), h("span", {
|
|
200
|
+
"class": "k-color-preview-mask",
|
|
207
201
|
style: {
|
|
208
202
|
backgroundColor: this.computedValue
|
|
209
203
|
}
|
|
210
|
-
})]),
|
|
204
|
+
})])]), // @ts-ignore
|
|
205
|
+
h(Button, {
|
|
206
|
+
type: "button",
|
|
207
|
+
attrs: this.v3 ? undefined : {
|
|
208
|
+
type: "button",
|
|
209
|
+
icon: 'arrow-s'
|
|
210
|
+
},
|
|
211
|
+
ref: this.v3 ? function (el) {
|
|
212
|
+
_this.buttonRef = el;
|
|
213
|
+
} : 'button',
|
|
211
214
|
onClick: this.onClickHandler,
|
|
212
215
|
on: this.v3 ? undefined : {
|
|
213
216
|
"click": this.onClickHandler
|
|
214
217
|
},
|
|
215
|
-
"class":
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
} : 'button'
|
|
219
|
-
}, [h("span", {
|
|
220
|
-
"class": 'k-icon k-i-arrow-s'
|
|
221
|
-
})]), // @ts-ignore function children
|
|
218
|
+
"class": "k-input-button",
|
|
219
|
+
icon: 'arrow-s'
|
|
220
|
+
}), // @ts-ignore function children
|
|
222
221
|
h(Picker // dir={dir}
|
|
223
222
|
, {
|
|
224
223
|
open: this.computedOpen,
|
|
@@ -263,7 +262,7 @@ var ColorPicker = {
|
|
|
263
262
|
value: _this2.computedValue || undefined
|
|
264
263
|
},
|
|
265
264
|
onChange: _this2.onPaletteChangeHandler
|
|
266
|
-
})])])
|
|
265
|
+
})])]);
|
|
267
266
|
},
|
|
268
267
|
methods: {
|
|
269
268
|
focusElement: function focusElement() {
|
|
@@ -378,5 +377,5 @@ var ColorPicker = {
|
|
|
378
377
|
}
|
|
379
378
|
}
|
|
380
379
|
};
|
|
381
|
-
var
|
|
382
|
-
export { ColorPicker,
|
|
380
|
+
var ColorPicker = ColorPickerVue2;
|
|
381
|
+
export { ColorPicker, ColorPickerVue2 };
|
|
@@ -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 };
|
package/dist/es/colors/Picker.js
CHANGED
|
@@ -15,7 +15,7 @@ var ANCHOR_VERTICAL_ALIGN = 'bottom';
|
|
|
15
15
|
|
|
16
16
|
var POPUP_VERTICAL_ALIGN = 'top'; // tslint:enable:max-line-length
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var PickerVue2 = {
|
|
19
19
|
name: 'KendoPicker',
|
|
20
20
|
props: {
|
|
21
21
|
popupSettings: Object,
|
|
@@ -90,5 +90,5 @@ var Picker = {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
|
-
var
|
|
94
|
-
export { Picker,
|
|
93
|
+
var Picker = PickerVue2;
|
|
94
|
+
export { Picker, PickerVue2 };
|
|
@@ -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
|
*
|
package/dist/es/input/Input.d.ts
CHANGED
|
@@ -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;
|
|
@@ -55,7 +91,6 @@ export interface InputMethods {
|
|
|
55
91
|
emitBlur?: (_: any) => void;
|
|
56
92
|
emitFocus?: (_: any) => void;
|
|
57
93
|
focus?: () => void;
|
|
58
|
-
inputClassNames: () => any;
|
|
59
94
|
validity: () => any;
|
|
60
95
|
isInvalid: (state: any) => any;
|
|
61
96
|
setValidity: () => void;
|
|
@@ -71,12 +106,13 @@ export interface InputComputed {
|
|
|
71
106
|
[key: string]: any;
|
|
72
107
|
computedValue?: any;
|
|
73
108
|
spanClassNames?: any;
|
|
109
|
+
inputWrapperClass?: any;
|
|
74
110
|
}
|
|
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 };
|