@progress/kendo-vue-dateinputs 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-dateinputs.js +1 -1
- package/dist/es/additionalTypes.ts +7 -1
- package/dist/es/calendar/components/Calendar.d.ts +2 -3
- package/dist/es/calendar/components/CalendarCell.d.ts +2 -3
- package/dist/es/calendar/components/CalendarCell.js +1 -1
- package/dist/es/calendar/components/CalendarHeaderTitle.d.ts +2 -3
- package/dist/es/calendar/components/CalendarHeaderTitle.js +19 -12
- package/dist/es/calendar/components/CalendarWeekCell.d.ts +2 -3
- package/dist/es/calendar/components/Header.d.ts +2 -3
- package/dist/es/calendar/components/Header.js +36 -37
- package/dist/es/calendar/components/View.d.ts +2 -3
- package/dist/es/calendar/components/ViewList.d.ts +2 -3
- package/dist/es/common/PickerWrap.d.ts +2 -3
- package/dist/es/dateinput/DateInput.d.ts +2 -3
- package/dist/es/dateinput/DateInput.js +62 -49
- package/dist/es/dateinput/models/DateInputSettings.d.ts +39 -0
- package/dist/es/dateinput/utils.js +2 -2
- package/dist/es/datepicker/DatePicker.d.ts +2 -3
- package/dist/es/datepicker/DatePicker.js +66 -80
- package/dist/es/datepicker/ToggleButton.d.ts +3 -24
- package/dist/es/datepicker/ToggleButton.js +2 -67
- package/dist/es/datepicker/interfaces/DatePickerComputed.d.ts +0 -1
- package/dist/es/datepicker/models/DatePickerSettings.d.ts +39 -0
- package/dist/es/daterangepicker/DateRangePicker.d.ts +2 -3
- package/dist/es/daterangepicker/DateRangePicker.js +49 -20
- package/dist/es/daterangepicker/models/DateRangePickerSettings.d.ts +39 -0
- package/dist/es/datetimepicker/DateTimePicker.d.ts +2 -3
- package/dist/es/datetimepicker/DateTimePicker.js +75 -51
- package/dist/es/datetimepicker/DateTimeSelector.d.ts +2 -3
- package/dist/es/datetimepicker/DateTimeSelector.js +21 -14
- package/dist/es/datetimepicker/models/DateTimePickerSettings.d.ts +39 -0
- package/dist/es/main.d.ts +2 -2
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/timepicker/TimeList.d.ts +2 -3
- package/dist/es/timepicker/TimePart.d.ts +2 -3
- package/dist/es/timepicker/TimePart.js +13 -6
- package/dist/es/timepicker/TimePicker.d.ts +2 -3
- package/dist/es/timepicker/TimePicker.js +73 -41
- package/dist/es/timepicker/TimeSelector.d.ts +2 -3
- package/dist/es/timepicker/TimeSelector.js +20 -11
- package/dist/es/timepicker/models/TimePickerSettings.d.ts +39 -0
- package/dist/es/virtualization/Virtualization.d.ts +2 -3
- package/dist/npm/additionalTypes.ts +7 -1
- package/dist/npm/calendar/components/Calendar.d.ts +2 -3
- package/dist/npm/calendar/components/CalendarCell.d.ts +2 -3
- package/dist/npm/calendar/components/CalendarCell.js +1 -1
- package/dist/npm/calendar/components/CalendarHeaderTitle.d.ts +2 -3
- package/dist/npm/calendar/components/CalendarHeaderTitle.js +20 -12
- package/dist/npm/calendar/components/CalendarWeekCell.d.ts +2 -3
- package/dist/npm/calendar/components/Header.d.ts +2 -3
- package/dist/npm/calendar/components/Header.js +37 -37
- package/dist/npm/calendar/components/View.d.ts +2 -3
- package/dist/npm/calendar/components/ViewList.d.ts +2 -3
- package/dist/npm/common/PickerWrap.d.ts +2 -3
- package/dist/npm/dateinput/DateInput.d.ts +2 -3
- package/dist/npm/dateinput/DateInput.js +60 -46
- package/dist/npm/dateinput/models/DateInputSettings.d.ts +39 -0
- package/dist/npm/dateinput/utils.js +2 -2
- package/dist/npm/datepicker/DatePicker.d.ts +2 -3
- package/dist/npm/datepicker/DatePicker.js +65 -80
- package/dist/npm/datepicker/ToggleButton.d.ts +3 -24
- package/dist/npm/datepicker/ToggleButton.js +3 -69
- package/dist/npm/datepicker/interfaces/DatePickerComputed.d.ts +0 -1
- package/dist/npm/datepicker/models/DatePickerSettings.d.ts +39 -0
- package/dist/npm/daterangepicker/DateRangePicker.d.ts +2 -3
- package/dist/npm/daterangepicker/DateRangePicker.js +49 -20
- package/dist/npm/daterangepicker/models/DateRangePickerSettings.d.ts +39 -0
- package/dist/npm/datetimepicker/DateTimePicker.d.ts +2 -3
- package/dist/npm/datetimepicker/DateTimePicker.js +75 -50
- package/dist/npm/datetimepicker/DateTimeSelector.d.ts +2 -3
- package/dist/npm/datetimepicker/DateTimeSelector.js +21 -14
- package/dist/npm/datetimepicker/models/DateTimePickerSettings.d.ts +39 -0
- package/dist/npm/main.d.ts +2 -2
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/timepicker/TimeList.d.ts +2 -3
- package/dist/npm/timepicker/TimePart.d.ts +2 -3
- package/dist/npm/timepicker/TimePart.js +14 -6
- package/dist/npm/timepicker/TimePicker.d.ts +2 -3
- package/dist/npm/timepicker/TimePicker.js +73 -40
- package/dist/npm/timepicker/TimeSelector.d.ts +2 -3
- package/dist/npm/timepicker/TimeSelector.js +21 -11
- package/dist/npm/timepicker/models/TimePickerSettings.d.ts +39 -0
- package/dist/npm/virtualization/Virtualization.d.ts +2 -3
- package/package.json +7 -7
|
@@ -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;
|
|
@@ -100,7 +99,7 @@ export interface DateRangePickerMethods {
|
|
|
100
99
|
/**
|
|
101
100
|
* @hidden
|
|
102
101
|
*/
|
|
103
|
-
export interface DateRangePickerAll extends
|
|
102
|
+
export interface DateRangePickerAll extends Vue2type, DateRangePickerMethods, DateRangePickerData, DateRangePickerComputed, DateRangePickerState {
|
|
104
103
|
}
|
|
105
104
|
declare let DateRangePicker: ComponentOptions<DateRangePickerAll, DefaultData<DateRangePickerData>, DefaultMethods<DateRangePickerAll>, DateRangePickerComputed, RecordPropsDefinition<DateRangePickerProps>>;
|
|
106
105
|
declare const DateRangePickerVue3: DefineComponent<DateRangePickerProps, any, DateRangePickerData, DateRangePickerComputed, DateRangePickerMethods, {}, {}, {}, string, DateRangePickerProps, DateRangePickerProps, {}>;
|
|
@@ -119,6 +119,27 @@ var DateRangePicker = {
|
|
|
119
119
|
return defaults_1.MIN_DATE;
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
|
+
rounded: {
|
|
123
|
+
type: String,
|
|
124
|
+
default: 'medium',
|
|
125
|
+
validator: function validator(value) {
|
|
126
|
+
return ['small', 'medium', 'large', 'full'].includes(value);
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
fillMode: {
|
|
130
|
+
type: String,
|
|
131
|
+
default: 'solid',
|
|
132
|
+
validator: function validator(value) {
|
|
133
|
+
return ['solid', 'flat', 'outline'].includes(value);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
size: {
|
|
137
|
+
type: String,
|
|
138
|
+
default: 'medium',
|
|
139
|
+
validator: function validator(value) {
|
|
140
|
+
return ['small', 'medium', 'large'].includes(value);
|
|
141
|
+
}
|
|
142
|
+
},
|
|
122
143
|
popupSettings: {
|
|
123
144
|
type: Object,
|
|
124
145
|
default: function _default() {
|
|
@@ -198,10 +219,11 @@ var DateRangePicker = {
|
|
|
198
219
|
},
|
|
199
220
|
computed: {
|
|
200
221
|
rootClassName: function rootClassName() {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
222
|
+
var _a;
|
|
223
|
+
|
|
224
|
+
return _a = {
|
|
225
|
+
'k-daterangepicker': true
|
|
226
|
+
}, _a['k-disabled'] = this.$props.disabled, _a;
|
|
205
227
|
},
|
|
206
228
|
computedValue: function computedValue() {
|
|
207
229
|
var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
|
|
@@ -228,6 +250,10 @@ var DateRangePicker = {
|
|
|
228
250
|
|
|
229
251
|
var h = gh || createElement;
|
|
230
252
|
var value = this.computedValue || models_1.EMPTY_SELECTIONRANGE;
|
|
253
|
+
var _a = this.$props,
|
|
254
|
+
size = _a.size,
|
|
255
|
+
fillMode = _a.fillMode,
|
|
256
|
+
rounded = _a.rounded;
|
|
231
257
|
var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
|
|
232
258
|
var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
|
|
233
259
|
var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
|
|
@@ -244,6 +270,9 @@ var DateRangePicker = {
|
|
|
244
270
|
id: this._startInputId,
|
|
245
271
|
disabled: this.$props.disabled,
|
|
246
272
|
valid: this.$props.valid,
|
|
273
|
+
size: size,
|
|
274
|
+
fillMode: fillMode,
|
|
275
|
+
rounded: rounded,
|
|
247
276
|
ariaHasPopup: true,
|
|
248
277
|
ariaExpanded: this.computedShow,
|
|
249
278
|
value: value.start
|
|
@@ -276,6 +305,9 @@ var DateRangePicker = {
|
|
|
276
305
|
min: this.min,
|
|
277
306
|
max: this.max,
|
|
278
307
|
id: this._endInputId,
|
|
308
|
+
size: size,
|
|
309
|
+
fillMode: fillMode,
|
|
310
|
+
rounded: rounded,
|
|
279
311
|
disabled: this.$props.disabled,
|
|
280
312
|
valid: this.$props.valid,
|
|
281
313
|
ariaHasPopup: true,
|
|
@@ -343,9 +375,9 @@ var DateRangePicker = {
|
|
|
343
375
|
blur: this.calendarBlur
|
|
344
376
|
}
|
|
345
377
|
});
|
|
346
|
-
var
|
|
347
|
-
popupClass =
|
|
348
|
-
animate =
|
|
378
|
+
var _b = this.$props.popupSettings,
|
|
379
|
+
popupClass = _b.popupClass,
|
|
380
|
+
animate = _b.animate;
|
|
349
381
|
var popupRender = this.$props.popup ? kendo_vue_common_2.templateRendering.call(this, this.$props.popup, kendo_vue_common_2.getListeners.call(this)) : undefined;
|
|
350
382
|
|
|
351
383
|
var popupSettings = __assign({
|
|
@@ -383,7 +415,7 @@ var DateRangePicker = {
|
|
|
383
415
|
"aria-controls": startDateInputId + ' ' + endDateInputId,
|
|
384
416
|
"aria-label": kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd])
|
|
385
417
|
},
|
|
386
|
-
"class": "k-
|
|
418
|
+
"class": "k-button k-button-md k-button-flat k-icon-button",
|
|
387
419
|
title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd]),
|
|
388
420
|
onMousedown: this.handleReverseMouseDown,
|
|
389
421
|
on: this.v3 ? undefined : {
|
|
@@ -397,11 +429,11 @@ var DateRangePicker = {
|
|
|
397
429
|
style: {
|
|
398
430
|
transform: 'rotate(90deg)'
|
|
399
431
|
},
|
|
400
|
-
"class": "k-icon k-i-arrows-swap"
|
|
432
|
+
"class": "k-icon k-button-icon k-i-arrows-swap"
|
|
401
433
|
})]);
|
|
402
434
|
return h("span", {
|
|
403
435
|
"class": this.rootClassName,
|
|
404
|
-
style: this.$
|
|
436
|
+
style: this.$attrs.style,
|
|
405
437
|
id: this.$props.id,
|
|
406
438
|
attrs: this.v3 ? undefined : {
|
|
407
439
|
id: this.$props.id,
|
|
@@ -419,14 +451,11 @@ var DateRangePicker = {
|
|
|
419
451
|
"keydown": this.handleKeyDown
|
|
420
452
|
},
|
|
421
453
|
onFocusout: this.handleBlur,
|
|
422
|
-
onKeydown: this.handleKeyDown
|
|
423
|
-
}, [h("span", {
|
|
454
|
+
onKeydown: this.handleKeyDown,
|
|
424
455
|
ref: this.v3 ? function (el) {
|
|
425
456
|
_this.kendoAnchorRef = el;
|
|
426
|
-
} : this._anchor
|
|
427
|
-
|
|
428
|
-
style: WRAPPER_STYLES
|
|
429
|
-
}, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering]), popupRendering]);
|
|
457
|
+
} : this._anchor
|
|
458
|
+
}, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering, popupRendering]);
|
|
430
459
|
},
|
|
431
460
|
methods: {
|
|
432
461
|
focus: function focus() {
|
|
@@ -499,11 +528,11 @@ var DateRangePicker = {
|
|
|
499
528
|
}
|
|
500
529
|
|
|
501
530
|
if (startInput) {
|
|
502
|
-
startInput.classList.add('k-
|
|
531
|
+
startInput.classList.add('k-focus');
|
|
503
532
|
}
|
|
504
533
|
|
|
505
534
|
if (endInput) {
|
|
506
|
-
endInput.classList.add('k-
|
|
535
|
+
endInput.classList.add('k-focus');
|
|
507
536
|
}
|
|
508
537
|
|
|
509
538
|
this.$emit('focus', event);
|
|
@@ -526,11 +555,11 @@ var DateRangePicker = {
|
|
|
526
555
|
var endInput = _this.getEndInput();
|
|
527
556
|
|
|
528
557
|
if (startInput) {
|
|
529
|
-
startInput.classList.remove('k-
|
|
558
|
+
startInput.classList.remove('k-focus');
|
|
530
559
|
}
|
|
531
560
|
|
|
532
561
|
if (endInput) {
|
|
533
|
-
endInput.classList.remove('k-
|
|
562
|
+
endInput.classList.remove('k-focus');
|
|
534
563
|
}
|
|
535
564
|
|
|
536
565
|
if (startInput && endInput && kendo_vue_common_1.canUseDOM && startInput && document.activeElement !== endInput) {
|
|
@@ -78,6 +78,45 @@ export interface DateRangePickerSettings {
|
|
|
78
78
|
* Specifies the smallest valid date ([see example]({% slug dateranges_daterangepicker %})).
|
|
79
79
|
*/
|
|
80
80
|
min?: Date;
|
|
81
|
+
/**
|
|
82
|
+
* Configures the `size` of the DateRangePicker.
|
|
83
|
+
*
|
|
84
|
+
* The available options are:
|
|
85
|
+
* - small
|
|
86
|
+
* - medium
|
|
87
|
+
* - large
|
|
88
|
+
* - null—Does not set a size `class`.
|
|
89
|
+
*
|
|
90
|
+
* @default `medium`
|
|
91
|
+
*/
|
|
92
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
93
|
+
/**
|
|
94
|
+
* Configures the `roundness` of the DateRangePicker.
|
|
95
|
+
*
|
|
96
|
+
* The available options are:
|
|
97
|
+
* - small
|
|
98
|
+
* - medium
|
|
99
|
+
* - large
|
|
100
|
+
* - circle
|
|
101
|
+
* - full
|
|
102
|
+
* - null—Does not set a rounded `class`.
|
|
103
|
+
*
|
|
104
|
+
* @default `medium`
|
|
105
|
+
*/
|
|
106
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
107
|
+
/**
|
|
108
|
+
* Configures the `fillMode` of the DateRangePicker.
|
|
109
|
+
*
|
|
110
|
+
* The available options are:
|
|
111
|
+
* - solid
|
|
112
|
+
* - outline
|
|
113
|
+
* - flat
|
|
114
|
+
* - link
|
|
115
|
+
* - null—Does not set a fillMode `class`.
|
|
116
|
+
*
|
|
117
|
+
* @default `solid`
|
|
118
|
+
*/
|
|
119
|
+
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
|
|
81
120
|
/**
|
|
82
121
|
* Fires each time any of the DateRangePicker elements gets blurred.
|
|
83
122
|
*/
|
|
@@ -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;
|
|
@@ -100,7 +99,7 @@ export interface DateTimePickerMethods {
|
|
|
100
99
|
/**
|
|
101
100
|
* @hidden
|
|
102
101
|
*/
|
|
103
|
-
export interface DateTimePickerAll extends
|
|
102
|
+
export interface DateTimePickerAll extends Vue2type, DateTimePickerMethods, DateTimePickerData, DateTimePickerComputed, DateTimePickerState {
|
|
104
103
|
}
|
|
105
104
|
declare let DateTimePicker: ComponentOptions<DateTimePickerAll, DefaultData<DateTimePickerData>, DefaultMethods<DateTimePickerAll>, DateTimePickerComputed, RecordPropsDefinition<DateTimePickerProps>>;
|
|
106
105
|
declare const DateTimePickerVue3: DefineComponent<DateTimePickerProps, any, DateTimePickerData, DateTimePickerComputed, DateTimePickerMethods, {}, {}, {}, string, DateTimePickerProps, DateTimePickerProps, {}>;
|
|
@@ -14,6 +14,8 @@ var inject = allVue.inject;
|
|
|
14
14
|
|
|
15
15
|
var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
|
|
16
16
|
|
|
17
|
+
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
18
|
+
|
|
17
19
|
var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
|
|
18
20
|
|
|
19
21
|
var kendo_date_math_1 = require("@progress/kendo-date-math");
|
|
@@ -98,6 +100,27 @@ var DateTimePicker = {
|
|
|
98
100
|
return utils_3.defaultFormatPlaceholder;
|
|
99
101
|
}
|
|
100
102
|
},
|
|
103
|
+
rounded: {
|
|
104
|
+
type: String,
|
|
105
|
+
default: 'medium',
|
|
106
|
+
validator: function validator(value) {
|
|
107
|
+
return ['small', 'medium', 'large', 'full'].includes(value);
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
fillMode: {
|
|
111
|
+
type: String,
|
|
112
|
+
default: 'solid',
|
|
113
|
+
validator: function validator(value) {
|
|
114
|
+
return ['solid', 'flat', 'outline'].includes(value);
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
size: {
|
|
118
|
+
type: String,
|
|
119
|
+
default: 'medium',
|
|
120
|
+
validator: function validator(value) {
|
|
121
|
+
return ['small', 'medium', 'large'].includes(value);
|
|
122
|
+
}
|
|
123
|
+
},
|
|
101
124
|
id: String,
|
|
102
125
|
ariaLabelledBy: String,
|
|
103
126
|
ariaDescribedBy: String,
|
|
@@ -276,44 +299,43 @@ var DateTimePicker = {
|
|
|
276
299
|
},
|
|
277
300
|
// @ts-ignore
|
|
278
301
|
render: function render(createElement) {
|
|
302
|
+
var _a;
|
|
303
|
+
|
|
279
304
|
var _this = this;
|
|
280
305
|
|
|
281
306
|
var h = gh || createElement;
|
|
282
|
-
var
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
307
|
+
var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
|
|
308
|
+
var _b = this.$props,
|
|
309
|
+
disabled = _b.disabled,
|
|
310
|
+
tabIndex = _b.tabIndex,
|
|
311
|
+
title = _b.title,
|
|
312
|
+
id = _b.id,
|
|
313
|
+
format = _b.format,
|
|
314
|
+
formatPlaceholder = _b.formatPlaceholder,
|
|
315
|
+
min = _b.min,
|
|
316
|
+
max = _b.max,
|
|
317
|
+
weekNumber = _b.weekNumber,
|
|
318
|
+
focusedDate = _b.focusedDate,
|
|
319
|
+
width = _b.width,
|
|
320
|
+
name = _b.name,
|
|
321
|
+
steps = _b.steps,
|
|
322
|
+
placeholder = _b.placeholder,
|
|
323
|
+
validationMessage = _b.validationMessage,
|
|
324
|
+
required = _b.required,
|
|
325
|
+
validityStyles = _b.validityStyles,
|
|
326
|
+
cancelButton = _b.cancelButton,
|
|
327
|
+
minTime = _b.minTime,
|
|
328
|
+
maxTime = _b.maxTime,
|
|
329
|
+
ariaLabelledBy = _b.ariaLabelledBy,
|
|
330
|
+
ariaDescribedBy = _b.ariaDescribedBy,
|
|
331
|
+
size = _b.size,
|
|
332
|
+
fillMode = _b.fillMode,
|
|
333
|
+
rounded = _b.rounded;
|
|
334
|
+
var _c = this.$props.popupSettings,
|
|
335
|
+
popupClass = _c.popupClass,
|
|
336
|
+
appendTo = _c.appendTo,
|
|
337
|
+
animate = _c.animate;
|
|
309
338
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
310
|
-
var rootClassName = kendo_vue_common_1.classNames('k-widget k-datetimepicker', {
|
|
311
|
-
'k-state-invalid': !isValid
|
|
312
|
-
});
|
|
313
|
-
var wrapperClassNames = kendo_vue_common_1.classNames('k-picker-wrap', {
|
|
314
|
-
'k-state-disabled': disabled,
|
|
315
|
-
'k-state-focused': this.isFocused
|
|
316
|
-
});
|
|
317
339
|
var dateInput = this.$props.dateInput ? kendo_vue_common_1.templateRendering.call(this, this.$props.dateInput, kendo_vue_common_1.getListeners.call(this)) : undefined;
|
|
318
340
|
var dateInputDefaultRendering = // @ts-ignore function children
|
|
319
341
|
h(DateInput_1.DateInput, {
|
|
@@ -334,6 +356,9 @@ var DateTimePicker = {
|
|
|
334
356
|
minTime: minTime,
|
|
335
357
|
maxTime: maxTime,
|
|
336
358
|
name: name,
|
|
359
|
+
size: null,
|
|
360
|
+
rounded: null,
|
|
361
|
+
fillMode: null,
|
|
337
362
|
required: required,
|
|
338
363
|
steps: steps,
|
|
339
364
|
tabIndex: !this.computedShow ? tabIndex : -1,
|
|
@@ -354,6 +379,9 @@ var DateTimePicker = {
|
|
|
354
379
|
minTime: minTime,
|
|
355
380
|
maxTime: maxTime,
|
|
356
381
|
name: name,
|
|
382
|
+
size: null,
|
|
383
|
+
rounded: null,
|
|
384
|
+
fillMode: null,
|
|
357
385
|
onChange: this.handleValueChange,
|
|
358
386
|
on: this.v3 ? undefined : {
|
|
359
387
|
"change": this.handleValueChange
|
|
@@ -366,7 +394,9 @@ var DateTimePicker = {
|
|
|
366
394
|
validationMessage: validationMessage,
|
|
367
395
|
validityStyles: validityStyles,
|
|
368
396
|
value: this.computedValue
|
|
369
|
-
})
|
|
397
|
+
}, this.v3 ? function () {
|
|
398
|
+
return [defaultSlot];
|
|
399
|
+
} : [defaultSlot]);
|
|
370
400
|
var dateInputRendering = kendo_vue_common_1.getTemplate.call(this, {
|
|
371
401
|
h: h,
|
|
372
402
|
template: dateInput,
|
|
@@ -458,7 +488,10 @@ var DateTimePicker = {
|
|
|
458
488
|
defaultSlots: dataTimeSelector
|
|
459
489
|
});
|
|
460
490
|
var dateTimePicker = h("div", {
|
|
461
|
-
"class":
|
|
491
|
+
"class": kendo_vue_common_1.classNames('k-input', 'k-datetimepicker', (_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['k-focus'] = this.isFocused, _a)),
|
|
492
|
+
ref: this.v3 ? function (el) {
|
|
493
|
+
_this.kendoAnchorRef = el;
|
|
494
|
+
} : this._anchor,
|
|
462
495
|
onKeydown: this.handleKeyDown,
|
|
463
496
|
on: this.v3 ? undefined : {
|
|
464
497
|
"keydown": this.handleKeyDown,
|
|
@@ -470,15 +503,11 @@ var DateTimePicker = {
|
|
|
470
503
|
},
|
|
471
504
|
onFocusin: this.handleFocus,
|
|
472
505
|
onFocusout: this.handleBlur
|
|
473
|
-
}, [
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
} : this._anchor,
|
|
477
|
-
"class": wrapperClassNames
|
|
478
|
-
}, [dateInputRendering, h("span", {
|
|
479
|
-
role: "button",
|
|
506
|
+
}, [dateInputRendering, // @ts-ignore
|
|
507
|
+
h(kendo_vue_buttons_1.Button, {
|
|
508
|
+
icon: 'calendar',
|
|
480
509
|
attrs: this.v3 ? undefined : {
|
|
481
|
-
|
|
510
|
+
icon: 'calendar',
|
|
482
511
|
title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]),
|
|
483
512
|
"aria-controls": this._popupId,
|
|
484
513
|
"aria-label": kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector])
|
|
@@ -490,14 +519,10 @@ var DateTimePicker = {
|
|
|
490
519
|
},
|
|
491
520
|
onClick: this.handleDateIconClick,
|
|
492
521
|
title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]),
|
|
493
|
-
"class": "k-
|
|
522
|
+
"class": "k-input-button",
|
|
494
523
|
"aria-controls": this._popupId,
|
|
495
524
|
"aria-label": kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector])
|
|
496
|
-
},
|
|
497
|
-
"class": "k-link k-link-date"
|
|
498
|
-
}, [h("span", {
|
|
499
|
-
"class": "k-icon k-i-calendar"
|
|
500
|
-
})])])]), popupRendering]);
|
|
525
|
+
}), popupRendering]);
|
|
501
526
|
return this.$props.label ? // @ts-ignore function children
|
|
502
527
|
h(kendo_vue_labels_1.FloatingLabel, {
|
|
503
528
|
label: this.$props.label,
|
|
@@ -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;
|
|
@@ -97,7 +96,7 @@ export interface DateTimeSelectorMethods {
|
|
|
97
96
|
/**
|
|
98
97
|
* @hidden
|
|
99
98
|
*/
|
|
100
|
-
export interface DateTimeSelectorAll extends
|
|
99
|
+
export interface DateTimeSelectorAll extends Vue2type, DateTimeSelectorMethods, DateTimeSelectorData, DateTimeSelectorComputed, DateTimeSelectorState {
|
|
101
100
|
}
|
|
102
101
|
declare let DateTimeSelector: ComponentOptions<DateTimeSelectorAll, DefaultData<DateTimeSelectorData>, DefaultMethods<DateTimeSelectorAll>, DateTimeSelectorComputed, RecordPropsDefinition<DateTimeSelectorProps>>;
|
|
103
102
|
declare const DateTimeSelectorVue3: DefineComponent<DateTimeSelectorProps, any, DateTimeSelectorData, DateTimeSelectorComputed, DateTimeSelectorMethods, {}, {}, {}, string, DateTimeSelectorProps, DateTimeSelectorProps, {}>;
|
|
@@ -157,9 +157,6 @@ var DateTimeSelector = {
|
|
|
157
157
|
'k-time-tab': this.currentTab === 'time',
|
|
158
158
|
'k-state-disabled': disabled
|
|
159
159
|
}, 'k-datetime-wrap');
|
|
160
|
-
var setButtonClassName = kendo_vue_common_1.classNames({
|
|
161
|
-
'k-state-disabled': !this.hasDateValue
|
|
162
|
-
}, 'k-time-accept k-button k-primary');
|
|
163
160
|
var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
|
|
164
161
|
var dateMessage = localizationService.toLanguageString(messages_1.date, messages_1.messages[messages_1.date]);
|
|
165
162
|
var timeMessage = localizationService.toLanguageString(messages_1.time, messages_1.messages[messages_1.time]);
|
|
@@ -308,10 +305,11 @@ var DateTimeSelector = {
|
|
|
308
305
|
onFocus: this.handleFocus,
|
|
309
306
|
onBlur: this.handleBlur
|
|
310
307
|
})])]), h("div", {
|
|
311
|
-
"class": "k-datetime-footer k-
|
|
312
|
-
}, [cancelButton &&
|
|
308
|
+
"class": "k-datetime-footer k-actions k-actions-stretched"
|
|
309
|
+
}, [cancelButton && // @ts-ignore function children
|
|
310
|
+
h(kendo_vue_buttons_1.Button, {
|
|
313
311
|
ref: 'cancelButton',
|
|
314
|
-
"class": "k-
|
|
312
|
+
"class": "k-time-cancel",
|
|
315
313
|
onClick: this.handleReject,
|
|
316
314
|
on: this.v3 ? undefined : {
|
|
317
315
|
"click": this.handleReject
|
|
@@ -322,20 +320,29 @@ var DateTimeSelector = {
|
|
|
322
320
|
"aria-label": cancelMessage
|
|
323
321
|
},
|
|
324
322
|
"aria-label": cancelMessage
|
|
325
|
-
},
|
|
323
|
+
}, this.v3 ? function () {
|
|
324
|
+
return [cancelMessage];
|
|
325
|
+
} : [cancelMessage]), // @ts-ignore function children
|
|
326
|
+
h(kendo_vue_buttons_1.Button, {
|
|
326
327
|
ref: 'acceptButton',
|
|
327
|
-
|
|
328
|
+
disabled: !this.hasDateValue,
|
|
329
|
+
attrs: this.v3 ? undefined : {
|
|
330
|
+
disabled: !this.hasDateValue,
|
|
331
|
+
themeColor: 'primary',
|
|
332
|
+
title: setMessage,
|
|
333
|
+
"aria-label": setMessage
|
|
334
|
+
},
|
|
335
|
+
themeColor: 'primary',
|
|
336
|
+
"class": 'k-time-accept',
|
|
328
337
|
onClick: this.handleAccept,
|
|
329
338
|
on: this.v3 ? undefined : {
|
|
330
339
|
"click": this.handleAccept
|
|
331
340
|
},
|
|
332
341
|
title: setMessage,
|
|
333
|
-
attrs: this.v3 ? undefined : {
|
|
334
|
-
title: setMessage,
|
|
335
|
-
"aria-label": setMessage
|
|
336
|
-
},
|
|
337
342
|
"aria-label": setMessage
|
|
338
|
-
},
|
|
343
|
+
}, this.v3 ? function () {
|
|
344
|
+
return [setMessage];
|
|
345
|
+
} : [setMessage])])]);
|
|
339
346
|
},
|
|
340
347
|
methods: {
|
|
341
348
|
handleBlur: function handleBlur(event) {
|
|
@@ -370,7 +377,7 @@ var DateTimeSelector = {
|
|
|
370
377
|
return false;
|
|
371
378
|
}
|
|
372
379
|
|
|
373
|
-
return kendo_vue_common_1.canUseDOM && (document.activeElement === this._acceptButton || document.activeElement === this._cancelButton);
|
|
380
|
+
return kendo_vue_common_1.canUseDOM && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el);
|
|
374
381
|
},
|
|
375
382
|
mergeTime: function mergeTime(current, candidate) {
|
|
376
383
|
return current && candidate ? utils_1.setTime(candidate, current) : candidate;
|
|
@@ -70,6 +70,45 @@ export interface DateTimePickerSettings {
|
|
|
70
70
|
min?: Date;
|
|
71
71
|
minTime?: Date;
|
|
72
72
|
maxTime?: Date;
|
|
73
|
+
/**
|
|
74
|
+
* Configures the `size` of the DateTimePicker.
|
|
75
|
+
*
|
|
76
|
+
* The available options are:
|
|
77
|
+
* - small
|
|
78
|
+
* - medium
|
|
79
|
+
* - large
|
|
80
|
+
* - null—Does not set a size `class`.
|
|
81
|
+
*
|
|
82
|
+
* @default `medium`
|
|
83
|
+
*/
|
|
84
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
85
|
+
/**
|
|
86
|
+
* Configures the `roundness` of the DateTimePicker.
|
|
87
|
+
*
|
|
88
|
+
* The available options are:
|
|
89
|
+
* - small
|
|
90
|
+
* - medium
|
|
91
|
+
* - large
|
|
92
|
+
* - circle
|
|
93
|
+
* - full
|
|
94
|
+
* - null—Does not set a rounded `class`.
|
|
95
|
+
*
|
|
96
|
+
* @default `medium`
|
|
97
|
+
*/
|
|
98
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
99
|
+
/**
|
|
100
|
+
* Configures the `fillMode` of the DateTimePicker.
|
|
101
|
+
*
|
|
102
|
+
* The available options are:
|
|
103
|
+
* - solid
|
|
104
|
+
* - outline
|
|
105
|
+
* - flat
|
|
106
|
+
* - link
|
|
107
|
+
* - null—Does not set a fillMode `class`.
|
|
108
|
+
*
|
|
109
|
+
* @default `solid`
|
|
110
|
+
*/
|
|
111
|
+
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
|
|
73
112
|
/**
|
|
74
113
|
* Specifies the `name` property of the `input` DOM element.
|
|
75
114
|
*/
|
package/dist/npm/main.d.ts
CHANGED
|
@@ -19,6 +19,6 @@ import { DatePickerSettings } from './datepicker/models';
|
|
|
19
19
|
import { DateTimePickerSettings } from './datetimepicker/models';
|
|
20
20
|
import { TimePickerSettings } from './timepicker/models';
|
|
21
21
|
import { DateRangePickerSettings, DateRangePickerPopupSettings, DateRangePickerCalendarSettings, DateRangePickerDateInputSettings } from './daterangepicker/models';
|
|
22
|
-
import { ToggleButton, ToggleButtonVue3
|
|
22
|
+
import { ToggleButton, ToggleButtonVue3 } from './datepicker/ToggleButton';
|
|
23
23
|
import { PickerWrap, PickerWrapVue3, PickerWrapProps } from './common/PickerWrap';
|
|
24
|
-
export { PickerWrap, PickerWrapVue3, PickerWrapProps, ToggleButton, ToggleButtonVue3,
|
|
24
|
+
export { PickerWrap, PickerWrapVue3, PickerWrapProps, ToggleButton, ToggleButtonVue3, ActiveView, Calendar, CalendarVue3, CalendarProps, CalendarSettings, CalendarViewEnum, CalendarChangeEvent, CalendarWeekCellClickEvent, CalendarCell, CalendarCellVue3, CalendarCellProps, CalendarWeekCell, CalendarWeekCellVue3, CalendarWeekCellProps, CalendarHeaderTitle, CalendarHeaderTitleVue3, CalendarHeaderTitleProps, DateInput, DateInputVue3, DateInputProps, DateInputSettings, DateInputChangeEvent, DateInputIncrementalSteps, DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder, DatePicker, DatePickerVue3, DatePickerProps, DatePickerSettings, DatePickerChangeEvent, TimePicker, TimePickerVue3, TimePickerProps, TimePickerSettings, TimePickerChangeEvent, DateRangePicker, DateRangePickerProps, DateRangePickerSettings, DateRangePickerCalendarSettings, DateRangePickerDateInputSettings, DateRangePickerPopupSettings, DateRangePickerChangeEvent, DateTimePicker, DateTimePickerVue3, DateTimePickerProps, DateTimePickerSettings, DateTimePickerChangeEvent, SelectionRange };
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-dateinputs',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1641982336,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
14
14
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { DefineComponent } from '../additionalTypes';
|
|
2
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
3
2
|
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
3
|
declare type DefaultMethods<V> = {
|
|
5
4
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
@@ -75,7 +74,7 @@ export interface TimeListMethods {
|
|
|
75
74
|
/**
|
|
76
75
|
* @hidden
|
|
77
76
|
*/
|
|
78
|
-
export interface TimeListAll extends
|
|
77
|
+
export interface TimeListAll extends Vue2type, TimeListMethods, TimeListData, TimeListComputed, TimeListState {
|
|
79
78
|
}
|
|
80
79
|
declare let TimeList: ComponentOptions<TimeListAll, DefaultData<TimeListData>, DefaultMethods<TimeListAll>, TimeListComputed, RecordPropsDefinition<TimeListProps>>;
|
|
81
80
|
declare const TimeListVue3: DefineComponent<TimeListProps, any, TimeListData, TimeListComputed, TimeListMethods, {}, {}, {}, string, TimeListProps, TimeListProps, {}>;
|
|
@@ -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;
|
|
@@ -87,7 +86,7 @@ export interface TimePartMethods {
|
|
|
87
86
|
/**
|
|
88
87
|
* @hidden
|
|
89
88
|
*/
|
|
90
|
-
export interface TimePartAll extends
|
|
89
|
+
export interface TimePartAll extends Vue2type, TimePartMethods, TimePartData, TimePartComputed, TimePartState {
|
|
91
90
|
}
|
|
92
91
|
declare let TimePart: ComponentOptions<TimePartAll, DefaultData<TimePartData>, DefaultMethods<TimePartAll>, TimePartComputed, RecordPropsDefinition<TimePartProps>>;
|
|
93
92
|
declare const TimePartVue3: DefineComponent<TimePartProps, any, TimePartData, TimePartComputed, TimePartMethods, {}, {}, {}, string, TimePartProps, TimePartProps, {}>;
|