@progress/kendo-vue-dateinputs 3.5.0-dev.202208010922 → 3.5.1-dev.202208100944

package/dist/esm/datetimepicker/DateTimeSelector.d.ts

@@ -0,0 +1,109 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { TimePickerIncrementalSteps } from '../timepicker/models';
+import { DateFormatOptions } from '@progress/kendo-vue-intl';
+import { CalendarChangeEvent } from '../main';
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorChangeEvent {
+    event?: any;
+    value: Date | null;
+    target: any;
+    cancelButton?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorRejectEvent {
+    event?: any;
+    value: Date | null;
+    target: any;
+    cancelButton?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorProps {
+    value: Date | null;
+    disabled?: boolean;
+    cancelButton?: boolean;
+    min: Date;
+    max: Date;
+    minTime?: Date;
+    maxTime?: Date;
+    weekNumber?: boolean;
+    steps?: TimePickerIncrementalSteps;
+    focusedDate?: Date;
+    format?: string | DateFormatOptions;
+    calendar?: any;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorData {
+    currentTab: 'date' | 'time';
+    dateValue: Date | null;
+    timeValue: Date;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorState {
+    _calendar: any;
+    _timePart: any;
+    _cancelButton: any;
+    _acceptButton: any;
+    _calendarWrap: any;
+    shouldFocusPart: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorComputed {
+    [key: string]: any;
+    hasDateValue: boolean;
+    computedMinTime: Date | null;
+    computedMaxTime: Date | null;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorMethods {
+    [key: string]: any;
+    focus: (args?: any) => void;
+    calendarElement: () => any;
+    normalizeRange: (candidate: Date, value: Date | null) => Date | null;
+    hasActiveButton: () => boolean;
+    mergeTime: (current: Date | null, candidate: Date | null) => Date | null;
+    mergeDate: (candidate: Date | null, value: Date) => Date | null;
+    move: (direction: 'left' | 'right') => void;
+    handleReject: (event: any) => void;
+    handleAccept: (event: any, timeOverride?: Date) => void;
+    handleNowClick: (event: any) => void;
+    handleCalendarValueChange: (event: CalendarChangeEvent) => void;
+    handleTimeListContainerChange: (candidate: Date) => void;
+    handleDateClick: (event: any) => void;
+    handleTimeClick: (event: any) => void;
+    handleKeyDown: (event: any) => void;
+    handleTimePartMount: (value: Date) => void;
+    handleBlur: (event: any) => void;
+    handleFocus: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorAll extends Vue2type, DateTimeSelectorMethods, DateTimeSelectorData, DateTimeSelectorComputed, DateTimeSelectorState {
+}
+/**
+ * @hidden
+ */
+declare let DateTimeSelectorVue2: ComponentOptions<DateTimeSelectorAll, DefaultData<DateTimeSelectorData>, DefaultMethods<DateTimeSelectorAll>, DateTimeSelectorComputed, RecordPropsDefinition<DateTimeSelectorProps>>;
+/**
+ * @hidden
+ */
+declare const DateTimeSelector: DefineComponent<DateTimeSelectorProps, any, DateTimeSelectorData, DateTimeSelectorComputed, DateTimeSelectorMethods, {}, {}, {}, string, DateTimeSelectorProps, DateTimeSelectorProps, {}>;
+export { DateTimeSelector, DateTimeSelectorVue2 };

package/dist/esm/datetimepicker/DateTimeSelector.js

@@ -0,0 +1,487 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, date, time, dateTimePickerCancel as cancel, dateTimePickerSet as set } from '../messages.js';
+import { Button, ButtonGroup } from '@progress/kendo-vue-buttons';
+import { Calendar } from '../calendar/components/Calendar.js';
+import { TimePart } from '../timepicker/TimePart.js';
+import { setTime, getToday, MIN_TIME, MAX_TIME, MAX_DATE, MIN_DATE } from '../utils.js';
+import { isEqualDate } from '@progress/kendo-date-math';
+import { Keys, classNames, cloneDate, getTemplate, canUseDOM } from '@progress/kendo-vue-common';
+import { MIDNIGHT_DATE } from '../defaults.js';
+import { getNow } from '../timepicker/utils.js';
+/**
+ * @hidden
+ */
+
+var DateTimeSelectorVue2 = {
+  name: 'KendoDateTimeSelector',
+  props: {
+    value: Date,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    cancelButton: {
+      type: Boolean,
+      default: true
+    },
+    min: {
+      type: Date,
+      default: MIN_DATE
+    },
+    max: {
+      type: Date,
+      default: MAX_DATE
+    },
+    maxTime: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MAX_TIME);
+      }
+    },
+    minTime: {
+      type: Date,
+      default: function _default() {
+        return cloneDate(MIN_TIME);
+      }
+    },
+    weekNumber: {
+      type: Boolean,
+      default: false
+    },
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    focusedDate: Date,
+    format: String,
+    calendar: Object
+  },
+  created: function created() {
+    this._calendarWrap = null;
+    this.currentTab = 'date';
+    this.dateValue = this.$props.value;
+    this.timeValue = this.$props.value || MIDNIGHT_DATE;
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentTab: null,
+      dateValue: null,
+      timeValue: Date
+    };
+  },
+  computed: {
+    hasDateValue: function hasDateValue() {
+      return this.dateValue !== null;
+    },
+    computedMinTime: function computedMinTime() {
+      return this.$props.minTime !== undefined ? this.$props.minTime : this.normalizeRange(this.$props.min, this.dateValue);
+    },
+    computedMaxTime: function computedMaxTime() {
+      return this.$props.maxTime !== undefined ? this.$props.maxTime : this.normalizeRange(this.$props.max, this.dateValue);
+    }
+  },
+  mounted: function mounted() {
+    this._acceptButton = this.$refs.acceptButton;
+    this._calendar = this.$refs.calendar;
+    this._calendarWrap = this.$refs.calendarWrap;
+    this._cancelButton = this.$refs.cancelButton;
+    this._timePart = this.$refs.timePart;
+    this.focus({
+      preventScroll: true
+    });
+  },
+  updated: function updated() {
+    if (this.shouldFocusPart) {
+      this.focus({
+        preventScroll: true
+      });
+    }
+
+    this.shouldFocusPart = false;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoAnchorRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoAnchorRef: kendoAnchorRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        disabled = _a.disabled,
+        cancelButton = _a.cancelButton,
+        min = _a.min,
+        max = _a.max,
+        weekNumber = _a.weekNumber,
+        focusedDate = _a.focusedDate,
+        format = _a.format,
+        steps = _a.steps;
+    var rootClassName = classNames({
+      'k-date-tab': this.currentTab === 'date',
+      'k-time-tab': this.currentTab === 'time',
+      'k-disabled': disabled
+    }, 'k-datetime-wrap');
+    var localizationService = provideLocalizationService(this);
+    var dateMessage = localizationService.toLanguageString(date, messages[date]);
+    var timeMessage = localizationService.toLanguageString(time, messages[time]);
+    var cancelMessage = localizationService.toLanguageString(cancel, messages[cancel]);
+    var setMessage = localizationService.toLanguageString(set, messages[set]);
+    var calendarDefaultRendering = // @ts-ignore  function children
+    h(Calendar, {
+      ref: 'calendar',
+      min: min,
+      attrs: this.v3 ? undefined : {
+        min: min,
+        max: max,
+        weekNumber: weekNumber,
+        focusedDate: focusedDate,
+        disabled: disabled || this.currentTab !== 'date',
+        value: this.dateValue
+      },
+      max: max,
+      weekNumber: weekNumber,
+      focusedDate: focusedDate,
+      disabled: disabled || this.currentTab !== 'date',
+      value: this.dateValue,
+      onChange: this.handleCalendarValueChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleCalendarValueChange,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur
+      },
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    });
+    var calendar = getTemplate.call(this, {
+      h: h,
+      template: this.$props.calendar,
+      defaultRendering: calendarDefaultRendering
+    });
+    return h("div", {
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown
+      },
+      "class": rootClassName,
+      tabindex: -1,
+      attrs: this.v3 ? undefined : {
+        tabindex: -1
+      }
+    }, [h("div", {
+      "class": "k-datetime-buttongroup"
+    }, [// @ts-ignore  function children
+    h(ButtonGroup, {
+      width: "100%",
+      attrs: this.v3 ? undefined : {
+        width: "100%"
+      }
+    }, this.v3 ? function () {
+      return [// @ts-ignore  function children
+      h(Button, {
+        type: "button",
+        attrs: _this2.v3 ? undefined : {
+          type: "button",
+          selected: _this2.currentTab === 'date',
+          togglable: true
+        },
+        selected: _this2.currentTab === 'date',
+        togglable: true,
+        onClick: _this2.handleDateClick,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.handleDateClick
+        }
+      }, _this2.v3 ? function () {
+        return [dateMessage];
+      } : [dateMessage]), // @ts-ignore  function children
+      h(Button, {
+        type: "button",
+        attrs: _this2.v3 ? undefined : {
+          type: "button",
+          selected: _this2.currentTab === 'time',
+          togglable: true
+        },
+        selected: _this2.currentTab === 'time',
+        togglable: true,
+        onClick: _this2.handleTimeClick,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.handleTimeClick
+        }
+      }, _this2.v3 ? function () {
+        return [timeMessage];
+      } : [timeMessage])];
+    } : [h(Button, {
+      type: "button",
+      attrs: _this2.v3 ? undefined : {
+        type: "button",
+        selected: _this2.currentTab === 'date',
+        togglable: true
+      },
+      selected: _this2.currentTab === 'date',
+      togglable: true,
+      onClick: _this2.handleDateClick,
+      on: _this2.v3 ? undefined : {
+        "click": _this2.handleDateClick
+      }
+    }, _this2.v3 ? function () {
+      return [dateMessage];
+    } : [dateMessage]), h(Button, {
+      type: "button",
+      attrs: _this2.v3 ? undefined : {
+        type: "button",
+        selected: _this2.currentTab === 'time',
+        togglable: true
+      },
+      selected: _this2.currentTab === 'time',
+      togglable: true,
+      onClick: _this2.handleTimeClick,
+      on: _this2.v3 ? undefined : {
+        "click": _this2.handleTimeClick
+      }
+    }, _this2.v3 ? function () {
+      return [timeMessage];
+    } : [timeMessage])])]), h("div", {
+      "class": "k-datetime-selector"
+    }, [h("div", {
+      "class": "k-datetime-calendar-wrap",
+      ref: 'calendarWrap'
+    }, [calendar]), h("div", {
+      "class": "k-datetime-time-wrap"
+    }, [// @ts-ignore  function children
+    h(TimePart, {
+      key: 1,
+      onNowclick: this.handleNowClick,
+      on: this.v3 ? undefined : {
+        "nowclick": this.handleNowClick,
+        "change": this.handleTimeListContainerChange,
+        "mount": this.handleTimePartMount,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur
+      },
+      disabled: disabled || this.currentTab !== 'time',
+      attrs: this.v3 ? undefined : {
+        disabled: disabled || this.currentTab !== 'time',
+        min: this.computedMinTime || MIN_TIME,
+        max: this.computedMaxTime || MAX_TIME,
+        value: this.timeValue,
+        format: format,
+        steps: steps
+      },
+      ref: 'timePart',
+      min: this.computedMinTime || MIN_TIME,
+      max: this.computedMaxTime || MAX_TIME,
+      value: this.timeValue,
+      format: format,
+      steps: steps,
+      onChange: this.handleTimeListContainerChange,
+      onMount: this.handleTimePartMount,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    })])]), h("div", {
+      "class": "k-datetime-footer k-actions k-actions-stretched"
+    }, [cancelButton && // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        title: cancelMessage,
+        "aria-label": cancelMessage
+      },
+      ref: 'cancelButton',
+      "class": "k-time-cancel",
+      onClick: this.handleReject,
+      on: this.v3 ? undefined : {
+        "click": this.handleReject
+      },
+      title: cancelMessage,
+      "aria-label": cancelMessage
+    }, this.v3 ? function () {
+      return [cancelMessage];
+    } : [cancelMessage]), // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        disabled: !this.hasDateValue,
+        themeColor: 'primary',
+        title: setMessage,
+        "aria-label": setMessage
+      },
+      ref: 'acceptButton',
+      disabled: !this.hasDateValue,
+      themeColor: 'primary',
+      "class": 'k-time-accept',
+      onClick: this.handleAccept,
+      on: this.v3 ? undefined : {
+        "click": this.handleAccept
+      },
+      title: setMessage,
+      "aria-label": setMessage
+    }, this.v3 ? function () {
+      return [setMessage];
+    } : [setMessage])])]);
+  },
+  methods: {
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    focus: function focus(args) {
+      var _this = this;
+
+      this.$nextTick(function () {
+        if (_this.currentTab === 'time' && _this._timePart) {
+          _this._timePart.focus(args);
+        }
+
+        var calendarElement = _this.calendarElement();
+
+        if (_this.currentTab === 'date' && calendarElement) {
+          calendarElement.focus(args);
+        }
+      });
+    },
+    calendarElement: function calendarElement() {
+      return this._calendar && this._calendar.$el ? this._calendar : null;
+    },
+    normalizeRange: function normalizeRange(candidate, value) {
+      return isEqualDate(candidate, value || getToday()) ? candidate : null;
+    },
+    hasActiveButton: function hasActiveButton() {
+      if (!this._acceptButton) {
+        return false;
+      }
+
+      return canUseDOM && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el);
+    },
+    mergeTime: function mergeTime(current, candidate) {
+      return current && candidate ? setTime(candidate, current) : candidate;
+    },
+    mergeDate: function mergeDate(candidate, value) {
+      return candidate ? setTime(candidate || getToday(), value) : value;
+    },
+    move: function move(direction) {
+      if (direction === 'right' && this.currentTab === 'time') {
+        return;
+      }
+
+      if (direction === 'left' && this.currentTab === 'date') {
+        return;
+      }
+
+      var nextPart = direction === 'left' ? 'date' : 'time';
+      this.shouldFocusPart = true;
+      this.currentTab = nextPart;
+    },
+    handleReject: function handleReject(event) {
+      this.dateValue = this.$props.value;
+      this.timeValue = this.$props.value || MIDNIGHT_DATE;
+      var value = this.mergeDate(this.$props.value, this.$props.value || MIDNIGHT_DATE);
+      var args = {
+        event: event,
+        target: this,
+        value: value
+      };
+      this.$emit('reject', args);
+    },
+    handleAccept: function handleAccept(event, timeOverride) {
+      if (!this.dateValue || !this.timeValue || !this.hasDateValue) {
+        return;
+      }
+
+      var value = this.mergeDate(this.dateValue, timeOverride || this.timeValue);
+      this.$emit('change', {
+        event: event,
+        value: value,
+        target: this
+      });
+    },
+    handleNowClick: function handleNowClick(event) {
+      this.timeValue = getNow();
+      this.handleAccept(event, getNow());
+    },
+    handleCalendarValueChange: function handleCalendarValueChange(event) {
+      event.event.stopPropagation(); // @ts-ignore
+
+      this.dateValue = event.value;
+      this.currentTab = 'time';
+      this.shouldFocusPart = true;
+    },
+    handleTimeListContainerChange: function handleTimeListContainerChange(candidate) {
+      this.timeValue = candidate;
+    },
+    handleDateClick: function handleDateClick(event) {
+      event.stopPropagation();
+      this.move('left');
+    },
+    handleTimeClick: function handleTimeClick(event) {
+      event.stopPropagation();
+      this.move('right');
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var keyCode = event.keyCode,
+          altKey = event.altKey;
+      this.$emit('keydown', event);
+
+      switch (keyCode) {
+        case Keys.enter:
+          if (!this.hasActiveButton() && this.hasDateValue) {
+            this.handleAccept(event);
+          }
+
+          return;
+
+        case Keys.left:
+          if (!altKey) {
+            return;
+          }
+
+          this.move('left');
+          return;
+
+        case Keys.right:
+          if (!altKey) {
+            return;
+          }
+
+          this.move('right');
+          return;
+
+        default:
+          return;
+      }
+    },
+    handleTimePartMount: function handleTimePartMount(value) {
+      this.timeValue = value;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var DateTimeSelector = DateTimeSelectorVue2;
+export { DateTimeSelector, DateTimeSelectorVue2 };