@progress/kendo-vue-dateinputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

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

@@ -1,109 +0,0 @@
-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/main';
-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/es/datetimepicker/DateTimeSelector.js

@@ -1,476 +0,0 @@
-// @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/main';
-import { Button, ButtonGroup } from '@progress/kendo-vue-buttons';
-import { Calendar } from '../calendar/components/Calendar';
-import { TimePart } from '../timepicker/TimePart';
-import { setTime, getToday, MIN_TIME, MAX_TIME, MAX_DATE, MIN_DATE } from '../utils';
-import { isEqualDate } from '@progress/kendo-date-math';
-import { Keys, classNames, cloneDate, getTemplate, canUseDOM } from '@progress/kendo-vue-common';
-import { MIDNIGHT_DATE } from '../defaults';
-import { getNow } from '../timepicker/utils';
-/**
- * @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 };