@progress/kendo-vue-dateinputs 2.7.3 → 2.8.0-dev.202201111325

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/cdn/js/kendo-vue-dateinputs.js +1 -1
  2. package/dist/es/additionalTypes.ts +7 -1
  3. package/dist/es/calendar/components/Calendar.d.ts +2 -3
  4. package/dist/es/calendar/components/CalendarCell.d.ts +2 -3
  5. package/dist/es/calendar/components/CalendarCell.js +1 -1
  6. package/dist/es/calendar/components/CalendarHeaderTitle.d.ts +2 -3
  7. package/dist/es/calendar/components/CalendarHeaderTitle.js +19 -12
  8. package/dist/es/calendar/components/CalendarWeekCell.d.ts +2 -3
  9. package/dist/es/calendar/components/Header.d.ts +2 -3
  10. package/dist/es/calendar/components/Header.js +36 -37
  11. package/dist/es/calendar/components/View.d.ts +2 -3
  12. package/dist/es/calendar/components/ViewList.d.ts +2 -3
  13. package/dist/es/common/PickerWrap.d.ts +2 -3
  14. package/dist/es/dateinput/DateInput.d.ts +2 -3
  15. package/dist/es/dateinput/DateInput.js +62 -49
  16. package/dist/es/dateinput/models/DateInputSettings.d.ts +39 -0
  17. package/dist/es/dateinput/utils.js +2 -2
  18. package/dist/es/datepicker/DatePicker.d.ts +2 -3
  19. package/dist/es/datepicker/DatePicker.js +66 -80
  20. package/dist/es/datepicker/ToggleButton.d.ts +3 -24
  21. package/dist/es/datepicker/ToggleButton.js +2 -67
  22. package/dist/es/datepicker/interfaces/DatePickerComputed.d.ts +0 -1
  23. package/dist/es/datepicker/models/DatePickerSettings.d.ts +39 -0
  24. package/dist/es/daterangepicker/DateRangePicker.d.ts +2 -3
  25. package/dist/es/daterangepicker/DateRangePicker.js +49 -20
  26. package/dist/es/daterangepicker/models/DateRangePickerSettings.d.ts +39 -0
  27. package/dist/es/datetimepicker/DateTimePicker.d.ts +2 -3
  28. package/dist/es/datetimepicker/DateTimePicker.js +75 -51
  29. package/dist/es/datetimepicker/DateTimeSelector.d.ts +2 -3
  30. package/dist/es/datetimepicker/DateTimeSelector.js +21 -14
  31. package/dist/es/datetimepicker/models/DateTimePickerSettings.d.ts +39 -0
  32. package/dist/es/main.d.ts +2 -2
  33. package/dist/es/package-metadata.js +1 -1
  34. package/dist/es/timepicker/TimeList.d.ts +2 -3
  35. package/dist/es/timepicker/TimePart.d.ts +2 -3
  36. package/dist/es/timepicker/TimePart.js +13 -6
  37. package/dist/es/timepicker/TimePicker.d.ts +2 -3
  38. package/dist/es/timepicker/TimePicker.js +73 -41
  39. package/dist/es/timepicker/TimeSelector.d.ts +2 -3
  40. package/dist/es/timepicker/TimeSelector.js +20 -11
  41. package/dist/es/timepicker/models/TimePickerSettings.d.ts +39 -0
  42. package/dist/es/virtualization/Virtualization.d.ts +2 -3
  43. package/dist/npm/additionalTypes.ts +7 -1
  44. package/dist/npm/calendar/components/Calendar.d.ts +2 -3
  45. package/dist/npm/calendar/components/CalendarCell.d.ts +2 -3
  46. package/dist/npm/calendar/components/CalendarCell.js +1 -1
  47. package/dist/npm/calendar/components/CalendarHeaderTitle.d.ts +2 -3
  48. package/dist/npm/calendar/components/CalendarHeaderTitle.js +20 -12
  49. package/dist/npm/calendar/components/CalendarWeekCell.d.ts +2 -3
  50. package/dist/npm/calendar/components/Header.d.ts +2 -3
  51. package/dist/npm/calendar/components/Header.js +37 -37
  52. package/dist/npm/calendar/components/View.d.ts +2 -3
  53. package/dist/npm/calendar/components/ViewList.d.ts +2 -3
  54. package/dist/npm/common/PickerWrap.d.ts +2 -3
  55. package/dist/npm/dateinput/DateInput.d.ts +2 -3
  56. package/dist/npm/dateinput/DateInput.js +60 -46
  57. package/dist/npm/dateinput/models/DateInputSettings.d.ts +39 -0
  58. package/dist/npm/dateinput/utils.js +2 -2
  59. package/dist/npm/datepicker/DatePicker.d.ts +2 -3
  60. package/dist/npm/datepicker/DatePicker.js +65 -80
  61. package/dist/npm/datepicker/ToggleButton.d.ts +3 -24
  62. package/dist/npm/datepicker/ToggleButton.js +3 -69
  63. package/dist/npm/datepicker/interfaces/DatePickerComputed.d.ts +0 -1
  64. package/dist/npm/datepicker/models/DatePickerSettings.d.ts +39 -0
  65. package/dist/npm/daterangepicker/DateRangePicker.d.ts +2 -3
  66. package/dist/npm/daterangepicker/DateRangePicker.js +49 -20
  67. package/dist/npm/daterangepicker/models/DateRangePickerSettings.d.ts +39 -0
  68. package/dist/npm/datetimepicker/DateTimePicker.d.ts +2 -3
  69. package/dist/npm/datetimepicker/DateTimePicker.js +75 -50
  70. package/dist/npm/datetimepicker/DateTimeSelector.d.ts +2 -3
  71. package/dist/npm/datetimepicker/DateTimeSelector.js +21 -14
  72. package/dist/npm/datetimepicker/models/DateTimePickerSettings.d.ts +39 -0
  73. package/dist/npm/main.d.ts +2 -2
  74. package/dist/npm/package-metadata.js +1 -1
  75. package/dist/npm/timepicker/TimeList.d.ts +2 -3
  76. package/dist/npm/timepicker/TimePart.d.ts +2 -3
  77. package/dist/npm/timepicker/TimePart.js +14 -6
  78. package/dist/npm/timepicker/TimePicker.d.ts +2 -3
  79. package/dist/npm/timepicker/TimePicker.js +73 -40
  80. package/dist/npm/timepicker/TimeSelector.d.ts +2 -3
  81. package/dist/npm/timepicker/TimeSelector.js +21 -11
  82. package/dist/npm/timepicker/models/TimePickerSettings.d.ts +39 -0
  83. package/dist/npm/virtualization/Virtualization.d.ts +2 -3
  84. package/package.json +7 -7
@@ -6,7 +6,7 @@ var ref = allVue.ref;
6
6
  var inject = allVue.inject;
7
7
  import { Popup } from '@progress/kendo-vue-popup';
8
8
  import { getDate, cloneDate } from '@progress/kendo-date-math';
9
- import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM } from '@progress/kendo-vue-common';
9
+ import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots } from '@progress/kendo-vue-common';
10
10
  import { packageMetadata } from '../package-metadata';
11
11
  import { DateInput } from '../dateinput/DateInput';
12
12
  import { Calendar } from '../calendar/components/Calendar';
@@ -15,7 +15,6 @@ import { isInDateRange } from '../utils';
15
15
  import { messages, toggleCalendar } from '../messages';
16
16
  import { provideLocalizationService } from '@progress/kendo-vue-intl';
17
17
  import { ToggleButton } from './ToggleButton';
18
- import { PickerWrap } from '../common/PickerWrap';
19
18
  import { FloatingLabel } from '@progress/kendo-vue-labels'; // tslint:enable:max-line-length
20
19
 
21
20
  var DatePicker = {
@@ -80,10 +79,25 @@ var DatePicker = {
80
79
  return undefined;
81
80
  }
82
81
  },
83
- pickerWrap: {
84
- type: [String, Object, Function],
85
- default: function _default() {
86
- return undefined;
82
+ rounded: {
83
+ type: String,
84
+ default: 'medium',
85
+ validator: function validator(value) {
86
+ return ['small', 'medium', 'large', 'full'].includes(value);
87
+ }
88
+ },
89
+ fillMode: {
90
+ type: String,
91
+ default: 'solid',
92
+ validator: function validator(value) {
93
+ return ['solid', 'flat', 'outline'].includes(value);
94
+ }
95
+ },
96
+ size: {
97
+ type: String,
98
+ default: 'medium',
99
+ validator: function validator(value) {
100
+ return ['small', 'medium', 'large'].includes(value);
87
101
  }
88
102
  },
89
103
  focusedDate: Date,
@@ -157,14 +171,12 @@ var DatePicker = {
157
171
  validatePackage(packageMetadata);
158
172
  this._popupId = guid();
159
173
  this._anchor = guid();
160
- this._wrapper = null;
161
174
  this._dateInput = null;
162
175
  this._calendar = null;
163
176
  this.$data.currentValue = this.$props.defaultValue;
164
177
  this.$data.currentShow = this.$props.defaultShow;
165
178
  },
166
179
  mounted: function mounted() {
167
- this._wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
168
180
  this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
169
181
 
170
182
  if (this.$refs.calendar || this.calendarRef) {
@@ -229,15 +241,6 @@ var DatePicker = {
229
241
  get: function get() {
230
242
  return this.$data.showDuringOnChange !== undefined ? this.$data.showDuringOnChange : this.$props.show !== undefined ? this.$props.show : this.$data.currentShow;
231
243
  }
232
- },
233
- wrapperClassNames: {
234
- get: function get() {
235
- var disabled = this.$props.disabled;
236
- return {
237
- 'k-state-disabled': disabled,
238
- 'k-state-focused': this.$data.isFocused
239
- };
240
- }
241
244
  }
242
245
  },
243
246
  methods: {
@@ -248,18 +251,11 @@ var DatePicker = {
248
251
  },
249
252
  handleFocus: function handleFocus(event) {
250
253
  this._oldShow = this.computedShow;
251
-
252
- if (this._wrapper) {
253
- this.$data.isFocused = true;
254
- }
255
-
254
+ this.$data.isFocused = true;
256
255
  this.$emit('focus', event);
257
256
  },
258
257
  handleBlur: function handleBlur(event) {
259
- if (this._wrapper) {
260
- this.$data.isFocused = false;
261
- }
262
-
258
+ this.$data.isFocused = false;
263
259
  this.createBlurTimeout();
264
260
  this.$emit('blur', event);
265
261
  },
@@ -400,41 +396,49 @@ var DatePicker = {
400
396
  },
401
397
  // @ts-ignore
402
398
  render: function render(createElement) {
399
+ var _a;
400
+
403
401
  var _this = this;
404
402
 
405
403
  var h = gh || createElement;
406
- var _a = this.$props,
407
- disabled = _a.disabled,
408
- tabIndex = _a.tabIndex,
409
- title = _a.title,
410
- id = _a.id,
411
- format = _a.format,
412
- formatPlaceholder = _a.formatPlaceholder,
413
- min = _a.min,
414
- max = _a.max,
415
- weekNumber = _a.weekNumber,
416
- focusedDate = _a.focusedDate,
417
- className = _a.className,
418
- width = _a.width,
419
- name = _a.name,
420
- validationMessage = _a.validationMessage,
421
- required = _a.required,
422
- validityStyles = _a.validityStyles;
423
- var _b = this.$props.popupSettings,
424
- popupClass = _b.popupClass,
425
- animate = _b.animate,
426
- appendTo = _b.appendTo;
404
+ var defaultSlot = getDefaultSlots(this);
405
+ var _b = this.$props,
406
+ disabled = _b.disabled,
407
+ tabIndex = _b.tabIndex,
408
+ title = _b.title,
409
+ id = _b.id,
410
+ format = _b.format,
411
+ formatPlaceholder = _b.formatPlaceholder,
412
+ min = _b.min,
413
+ max = _b.max,
414
+ weekNumber = _b.weekNumber,
415
+ focusedDate = _b.focusedDate,
416
+ width = _b.width,
417
+ name = _b.name,
418
+ validationMessage = _b.validationMessage,
419
+ required = _b.required,
420
+ validityStyles = _b.validityStyles,
421
+ size = _b.size,
422
+ fillMode = _b.fillMode,
423
+ rounded = _b.rounded;
424
+ var _c = this.$props.popupSettings,
425
+ popupClass = _c.popupClass,
426
+ animate = _c.animate,
427
+ appendTo = _c.appendTo;
427
428
  var show = this.computedShow;
428
429
  var value = this.computedValue;
429
430
  var sanitizedValue = value && getDate(value);
430
431
  var isValid = !this.$props.validityStyles || this.validity().valid;
431
- var rootClassName = classNames('k-widget k-datepicker', {
432
- 'k-state-invalid': !isValid
433
- }, className);
434
432
  var popupClassNames = classNames('k-calendar-container k-group k-reset', popupClass);
435
433
  var toggleButton = this.$props.toggleButton ? templateRendering.call(this, this.$props.toggleButton, getListeners.call(this)) : undefined;
436
- var toggleButtonDefaultRendering = // @ts-ignore function children
434
+ var toggleButtonDefaultRendering = // @ts-ignore
437
435
  h(ToggleButton, {
436
+ icon: "calendar",
437
+ attrs: this.v3 ? undefined : {
438
+ icon: "calendar",
439
+ title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
440
+ "aria-label": provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar])
441
+ },
438
442
  onMousedown: this.handleIconMouseDown,
439
443
  on: this.v3 ? undefined : {
440
444
  "mousedown": this.handleIconMouseDown,
@@ -442,17 +446,9 @@ var DatePicker = {
442
446
  },
443
447
  onClick: this.handleIconClick,
444
448
  title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
445
- attrs: this.v3 ? undefined : {
446
- title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar])
447
- },
448
- "class": "k-select"
449
- }, this.v3 ? function () {
450
- return [h("span", {
451
- "class": "k-icon k-i-calendar"
452
- })];
453
- } : [h("span", {
454
- "class": "k-icon k-i-calendar"
455
- })]);
449
+ "aria-label": provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
450
+ "class": "k-input-button"
451
+ });
456
452
  var toggleButtonRendering = getTemplate.call(this, {
457
453
  h: h,
458
454
  template: toggleButton,
@@ -480,6 +476,9 @@ var DatePicker = {
480
476
  max: max,
481
477
  min: min,
482
478
  name: name,
479
+ size: null,
480
+ rounded: null,
481
+ fillMode: null,
483
482
  required: required,
484
483
  tabIndex: !show ? tabIndex : -1,
485
484
  title: title,
@@ -495,6 +494,9 @@ var DatePicker = {
495
494
  max: max,
496
495
  min: min,
497
496
  name: name,
497
+ size: null,
498
+ rounded: null,
499
+ fillMode: null,
498
500
  onChange: this.handleInputValueChange,
499
501
  on: this.v3 ? undefined : {
500
502
  "change": this.handleInputValueChange
@@ -512,22 +514,6 @@ var DatePicker = {
512
514
  template: dateInput,
513
515
  defaultRendering: dateInputDefaultRendering
514
516
  });
515
- var pickerWrap = this.$props.pickerWrap ? templateRendering.call(this, this.$props.pickerWrap, getListeners.call(this)) : undefined;
516
- var pickerWrapDefaultRendering = // @ts-ignore function children
517
- h(PickerWrap, {
518
- ref: this.v3 ? function (el) {
519
- _this.wrapperRef = el;
520
- } : 'wrapper',
521
- "class": this.wrapperClassNames
522
- }, this.v3 ? function () {
523
- return [dateInputRendering, toggleButtonRendering];
524
- } : [dateInputRendering, toggleButtonRendering]);
525
- var pickerWrapRendering = getTemplate.call(this, {
526
- h: h,
527
- template: pickerWrap,
528
- defaultRendering: pickerWrapDefaultRendering,
529
- defaultSlots: [dateInputRendering, toggleButtonRendering]
530
- });
531
517
  var calendar = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
532
518
  var calendarDefaultRendering = // @ts-ignore
533
519
  h(Calendar, {
@@ -615,7 +601,7 @@ var DatePicker = {
615
601
  "aria-expanded": this.computedShow
616
602
  },
617
603
  "aria-expanded": this.computedShow,
618
- "class": rootClassName,
604
+ "class": classNames('k-input', 'k-datepicker', (_a = {}, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (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.$data.isFocused, _a)),
619
605
  onKeydown: this.handleKeyDown,
620
606
  on: this.v3 ? undefined : {
621
607
  "keydown": this.handleKeyDown,
@@ -624,7 +610,7 @@ var DatePicker = {
624
610
  },
625
611
  onFocusin: this.handleFocus,
626
612
  onFocusout: this.handleBlur
627
- }, [pickerWrapRendering, popupRendering]);
613
+ }, [dateInputRendering, toggleButtonRendering, popupRendering]);
628
614
  return this.$props.label ? // @ts-ignore function children
629
615
  h(FloatingLabel, {
630
616
  label: this.$props.label,
@@ -1,29 +1,8 @@
1
+ import { ButtonProps } from '@progress/kendo-vue-buttons';
1
2
  import { DefineComponent } from '../additionalTypes';
2
- import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
3
- declare type DefaultData<V> = object | ((this: V) => {});
4
- declare type DefaultMethods<V> = {
5
- [key: string]: (this: V, ...args: any[]) => any;
6
- };
7
- /**
8
- * Represents the this.$props of the Kendo UI for Vue
9
- * [Toggle Button]({% slug api_dateinputs_native_togglebuttonprops %}) component.
10
- */
11
- export interface ToggleButtonProps {
12
- id?: string;
13
- tabIndex?: number;
14
- title?: string;
15
- }
16
- /**
17
- * @hidden
18
- */
19
- export interface ToggleButtonMethods extends Vue {
20
- handleMouseDown: (e: any) => void;
21
- handleMouseUp: (e: any) => void;
22
- handleClick: (e: any) => void;
23
- }
24
3
  /**
25
4
  * Represents the default `toggleButton` component.
26
5
  */
27
- declare let ToggleButton: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ToggleButtonMethods>, {}, RecordPropsDefinition<ToggleButtonProps>>;
28
- declare const ToggleButtonVue3: DefineComponent<ToggleButtonProps, any, {}, {}, ToggleButtonMethods, {}, {}, {}, string, ToggleButtonProps, ToggleButtonProps, {}>;
6
+ declare let ToggleButton: any;
7
+ declare const ToggleButtonVue3: DefineComponent<ButtonProps, any, {}, {}, {}, {}, {}, {}, string, ButtonProps, ButtonProps, {}>;
29
8
  export { ToggleButton, ToggleButtonVue3 };
@@ -1,73 +1,8 @@
1
- // @ts-ignore
2
- import * as Vue from 'vue';
3
- var allVue = Vue;
4
- var gh = allVue.h;
5
- import { getDefaultSlots } from '@progress/kendo-vue-common';
1
+ import { Button } from '@progress/kendo-vue-buttons';
6
2
  /**
7
3
  * Represents the default `toggleButton` component.
8
4
  */
9
5
 
10
- var ToggleButton = {
11
- // @ts-ignore
12
- emits: {
13
- 'click': null,
14
- 'mousedown': null,
15
- 'mouseup': null
16
- },
17
- props: {
18
- id: String,
19
- tabIndex: {
20
- type: Number,
21
- default: undefined
22
- },
23
- title: String
24
- },
25
- methods: {
26
- handleMouseDown: function handleMouseDown(e) {
27
- this.$emit('mousedown', e);
28
- },
29
- handleMouseUp: function handleMouseUp(e) {
30
- this.$emit('mouseup', e);
31
- },
32
- handleClick: function handleClick(e) {
33
- this.$emit('click', e);
34
- }
35
- },
36
- // @ts-ignore
37
- setup: !gh ? undefined : function () {
38
- var v3 = !!gh;
39
- return {
40
- v3: v3
41
- };
42
- },
43
- // @ts-ignore
44
- render: function render(createElement) {
45
- var h = gh || createElement;
46
- var defaultSlot = getDefaultSlots(this);
47
- return h("a", {
48
- id: this.$props.id,
49
- attrs: this.v3 ? undefined : {
50
- id: this.$props.id,
51
- role: "button",
52
- tabindex: this.$props.tabIndex,
53
- title: this.$props.title,
54
- "aria-label": this.$props.title
55
- },
56
- role: "button",
57
- "class": 'k-select',
58
- tabindex: this.$props.tabIndex,
59
- title: this.$props.title,
60
- "aria-label": this.$props.title,
61
- onMousedown: this.handleMouseDown,
62
- on: this.v3 ? undefined : {
63
- "mousedown": this.handleMouseDown,
64
- "click": this.handleClick,
65
- "mouseup": this.handleMouseUp
66
- },
67
- onClick: this.handleClick,
68
- onMouseup: this.handleMouseUp
69
- }, [defaultSlot]);
70
- }
71
- };
6
+ var ToggleButton = Button;
72
7
  var ToggleButtonVue3 = ToggleButton;
73
8
  export { ToggleButton, ToggleButtonVue3 };
@@ -5,5 +5,4 @@ export interface DatePickerComputed {
5
5
  [key: string]: any;
6
6
  computedValue: Date | null;
7
7
  computedShow: boolean;
8
- wrapperClassNames: object;
9
8
  }
@@ -38,6 +38,45 @@ export interface DatePickerSettings {
38
38
  * Determines whether the DatePicker is disabled ([see example]({% slug disabled_datepicker_native %})).
39
39
  */
40
40
  disabled?: boolean;
41
+ /**
42
+ * Configures the `size` of the TimeInput.
43
+ *
44
+ * The available options are:
45
+ * - small
46
+ * - medium
47
+ * - large
48
+ * - null&mdash;Does not set a size `class`.
49
+ *
50
+ * @default `medium`
51
+ */
52
+ size?: null | 'small' | 'medium' | 'large' | string;
53
+ /**
54
+ * Configures the `roundness` of the TimeInput.
55
+ *
56
+ * The available options are:
57
+ * - small
58
+ * - medium
59
+ * - large
60
+ * - circle
61
+ * - full
62
+ * - null&mdash;Does not set a rounded `class`.
63
+ *
64
+ * @default `medium`
65
+ */
66
+ rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
67
+ /**
68
+ * Configures the `fillMode` of the TimeInput.
69
+ *
70
+ * The available options are:
71
+ * - solid
72
+ * - outline
73
+ * - flat
74
+ * - link
75
+ * - null&mdash;Does not set a fillMode `class`.
76
+ *
77
+ * @default `solid`
78
+ */
79
+ fillMode?: null | 'solid' | 'outline' | 'flat' | string;
41
80
  /**
42
81
  * Specifies the focused date of the DatePicker ([see example]({% slug dates_datepicker_native %})).
43
82
  */
@@ -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 Vue, DateRangePickerMethods, DateRangePickerData, DateRangePickerComputed, DateRangePickerState {
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, {}>;
@@ -100,6 +100,27 @@ var DateRangePicker = {
100
100
  return MIN_DATE;
101
101
  }
102
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
+ },
103
124
  popupSettings: {
104
125
  type: Object,
105
126
  default: function _default() {
@@ -179,10 +200,11 @@ var DateRangePicker = {
179
200
  },
180
201
  computed: {
181
202
  rootClassName: function rootClassName() {
182
- return {
183
- 'k-daterangepicker': true,
184
- 'k-state-disabled': this.$props.disabled
185
- };
203
+ var _a;
204
+
205
+ return _a = {
206
+ 'k-daterangepicker': true
207
+ }, _a['k-disabled'] = this.$props.disabled, _a;
186
208
  },
187
209
  computedValue: function computedValue() {
188
210
  var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
@@ -209,6 +231,10 @@ var DateRangePicker = {
209
231
 
210
232
  var h = gh || createElement;
211
233
  var value = this.computedValue || EMPTY_SELECTIONRANGE;
234
+ var _a = this.$props,
235
+ size = _a.size,
236
+ fillMode = _a.fillMode,
237
+ rounded = _a.rounded;
212
238
  var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
213
239
  var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
214
240
  var localizationService = provideLocalizationService(this);
@@ -225,6 +251,9 @@ var DateRangePicker = {
225
251
  id: this._startInputId,
226
252
  disabled: this.$props.disabled,
227
253
  valid: this.$props.valid,
254
+ size: size,
255
+ fillMode: fillMode,
256
+ rounded: rounded,
228
257
  ariaHasPopup: true,
229
258
  ariaExpanded: this.computedShow,
230
259
  value: value.start
@@ -257,6 +286,9 @@ var DateRangePicker = {
257
286
  min: this.min,
258
287
  max: this.max,
259
288
  id: this._endInputId,
289
+ size: size,
290
+ fillMode: fillMode,
291
+ rounded: rounded,
260
292
  disabled: this.$props.disabled,
261
293
  valid: this.$props.valid,
262
294
  ariaHasPopup: true,
@@ -324,9 +356,9 @@ var DateRangePicker = {
324
356
  blur: this.calendarBlur
325
357
  }
326
358
  });
327
- var _a = this.$props.popupSettings,
328
- popupClass = _a.popupClass,
329
- animate = _a.animate;
359
+ var _b = this.$props.popupSettings,
360
+ popupClass = _b.popupClass,
361
+ animate = _b.animate;
330
362
  var popupRender = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
331
363
 
332
364
  var popupSettings = __assign({
@@ -364,7 +396,7 @@ var DateRangePicker = {
364
396
  "aria-controls": startDateInputId + ' ' + endDateInputId,
365
397
  "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
366
398
  },
367
- "class": "k-select k-button k-flat",
399
+ "class": "k-button k-button-md k-button-flat k-icon-button",
368
400
  title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
369
401
  onMousedown: this.handleReverseMouseDown,
370
402
  on: this.v3 ? undefined : {
@@ -378,11 +410,11 @@ var DateRangePicker = {
378
410
  style: {
379
411
  transform: 'rotate(90deg)'
380
412
  },
381
- "class": "k-icon k-i-arrows-swap"
413
+ "class": "k-icon k-button-icon k-i-arrows-swap"
382
414
  })]);
383
415
  return h("span", {
384
416
  "class": this.rootClassName,
385
- style: this.$props.style,
417
+ style: this.$attrs.style,
386
418
  id: this.$props.id,
387
419
  attrs: this.v3 ? undefined : {
388
420
  id: this.$props.id,
@@ -400,14 +432,11 @@ var DateRangePicker = {
400
432
  "keydown": this.handleKeyDown
401
433
  },
402
434
  onFocusout: this.handleBlur,
403
- onKeydown: this.handleKeyDown
404
- }, [h("span", {
435
+ onKeydown: this.handleKeyDown,
405
436
  ref: this.v3 ? function (el) {
406
437
  _this.kendoAnchorRef = el;
407
- } : this._anchor,
408
- "class": "k-daterangepicker-wrap",
409
- style: WRAPPER_STYLES
410
- }, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering]), popupRendering]);
438
+ } : this._anchor
439
+ }, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering, popupRendering]);
411
440
  },
412
441
  methods: {
413
442
  focus: function focus() {
@@ -480,11 +509,11 @@ var DateRangePicker = {
480
509
  }
481
510
 
482
511
  if (startInput) {
483
- startInput.classList.add('k-state-focused');
512
+ startInput.classList.add('k-focus');
484
513
  }
485
514
 
486
515
  if (endInput) {
487
- endInput.classList.add('k-state-focused');
516
+ endInput.classList.add('k-focus');
488
517
  }
489
518
 
490
519
  this.$emit('focus', event);
@@ -507,11 +536,11 @@ var DateRangePicker = {
507
536
  var endInput = _this.getEndInput();
508
537
 
509
538
  if (startInput) {
510
- startInput.classList.remove('k-state-focused');
539
+ startInput.classList.remove('k-focus');
511
540
  }
512
541
 
513
542
  if (endInput) {
514
- endInput.classList.remove('k-state-focused');
543
+ endInput.classList.remove('k-focus');
515
544
  }
516
545
 
517
546
  if (startInput && endInput && 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&mdash;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&mdash;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&mdash;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 Vue, DateTimePickerMethods, DateTimePickerData, DateTimePickerComputed, DateTimePickerState {
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, {}>;