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

package/dist/esm/calendar/components/Calendar.js

@@ -0,0 +1,595 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { classNames, guid, Keys, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
+import { cloneDate, getDate, isEqualDate } from '@progress/kendo-date-math';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { packageMetadata } from '../../package-metadata.js';
+import { ViewList } from './ViewList.js';
+import { MIN_DATE, MAX_DATE } from '../../defaults.js';
+import { CalendarViewEnum } from '../models.js';
+import { getToday, dateInRange, viewInRange } from '../../utils.js';
+import { BusViewService, DOMService, NavigationService } from '../services.js';
+import { Header } from './Header.js';
+import { calculateValue, extractDateFromValue, extractMultipleFromValue, extractRangeFromValue, extractFocusedDate, extractActiveRange } from '../utils.js';
+/**
+ * @hidden
+ */
+
+var CalendarVue2 = {
+  name: 'KendoCalendar',
+  inject: {
+    kendoIntlService: {
+      default: null
+    }
+  },
+  model: {
+    event: 'changemodel'
+  },
+  props: {
+    activeRangeEnd: {
+      type: String,
+      default: undefined
+    },
+    allowReverse: {
+      type: Boolean,
+      default: false
+    },
+    cell: [String, Function, Object],
+    className: String,
+    defaultActiveView: {
+      type: String,
+      default: 'month'
+    },
+    modelValue: {
+      type: [Date, Array, Object],
+      default: undefined
+    },
+    defaultValue: {
+      type: [Date, Array, Object],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    focusedDate: Date,
+    id: {
+      type: String,
+      default: function _default() {
+        return guid();
+      }
+    },
+    headerTitle: [String, Function, Object],
+    max: {
+      type: Date,
+      default: function _default() {
+        return MAX_DATE;
+      }
+    },
+    min: {
+      type: Date,
+      default: function _default() {
+        return MIN_DATE;
+      }
+    },
+    mode: String,
+    navigation: {
+      type: Boolean,
+      default: true
+    },
+    tabIndex: Number,
+    value: [Date, Array, Object],
+    views: {
+      type: Number,
+      default: 1
+    },
+    weekNumber: Boolean,
+    weekCell: [String, Function, Object],
+    topView: {
+      type: String,
+      default: 'century'
+    },
+    bottomView: {
+      type: String,
+      default: 'month'
+    }
+  },
+  data: function data() {
+    return {
+      valueDuringOnChange: undefined,
+      currentFocusedDate: null,
+      currentActiveView: null,
+      currentValue: null,
+      cellUID: guid(),
+      isActive: false,
+      oldValue: null,
+      didNavigationChange: false,
+      currentActiveRangeEnd: undefined
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    var value = calculateValue(this.currentMin, this.currentMax, this.$props.defaultValue, this.$props.value || this.$props.modelValue);
+    var selectedDate = extractDateFromValue(this.currentMin, this.currentMax, value);
+    var selectedMultiple = extractMultipleFromValue(this.currentMin, this.currentMax, value);
+    var selectedRange = extractRangeFromValue(value);
+    var calculatedFocus = extractFocusedDate(selectedDate, selectedMultiple, selectedRange);
+    this._hasMounted = false;
+    this.$data.currentFocusedDate = dateInRange(this.$props.focusedDate || calculatedFocus || getToday(), this.currentMin, this.currentMax);
+    this.$data.currentValue = value;
+    this.$data.currentActiveView = viewInRange(CalendarViewEnum[this.$props.defaultActiveView], CalendarViewEnum[this.$props.bottomView], CalendarViewEnum[this.$props.topView]);
+    this.$data.currentActiveRangeEnd = extractActiveRange(selectedRange, selectedDate);
+    this._dates = [];
+    this._calculateFocusFromValue = false;
+    this._lastView = this.$props.activeView || this.$data.currentActiveView;
+    this._lastViewsCount = this.$props.views;
+    this._dom = new DOMService();
+    this._bus = new BusViewService(this.handleViewChange);
+    this._navigation = new NavigationService(this._bus);
+    this._oldValue = value;
+  },
+  watch: {
+    value: function value(newValue, _oldValue) {
+      this.$data.currentFocusedDate = newValue;
+    },
+    focusedDate: function focusedDate(newValue, _oldValue) {
+      this.$data.currentFocusedDate = newValue;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService
+    };
+  },
+  mounted: function mounted() {
+    this.calendarViewList = this.v3 ? this.calendarViewListRef : this.$refs.calendarViewList;
+    this._calculateFocusFromValue = true;
+  },
+  updated: function updated() {
+    var stateValue = extractDateFromValue(this.currentMin, this.currentMax, this.computedValue());
+    this._calculateFocusFromValue = Boolean(this._selectedDate && stateValue && this._selectedDate.getTime() && stateValue.getTime());
+    this._lastView = this.$props.activeView || this.$data.currentActiveView;
+    this._lastViewsCount = this.$props.views;
+    this._oldValue = this.computedValue();
+
+    if (!this.calendarViewList) {
+      this.calendarViewList = this.v3 ? this.calendarViewListRef : this.$refs.calendarViewList;
+    }
+  },
+  computed: {
+    activeRange: {
+      get: function get() {
+        return this.$props.activeRangeEnd !== undefined ? this.$props.activeRangeEnd : this.$data.currentActiveRangeEnd;
+      }
+    },
+    currentMin: function currentMin() {
+      return getDate(this.$props.min);
+    },
+    currentMax: function currentMax() {
+      return getDate(this.$props.max);
+    }
+  },
+  methods: {
+    element: function element() {
+      return this.$el;
+    },
+    computedValue: function computedValue() {
+      return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
+    },
+    focus: function focus(event) {
+      if (this.calendarViewList) {
+        this.calendarViewList.$el.firstElementChild.focus(event);
+      }
+    },
+    handleBlur: function handleBlur() {
+      this.$data.isActive = false;
+    },
+    handleFocus: function handleFocus() {
+      this.$data.isActive = true;
+    },
+    emitBlur: function emitBlur(event) {
+      this.$emit('blur', event);
+    },
+    emitFocus: function emitFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleTodayClick: function handleTodayClick(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.$data.didNavigationChange = true;
+      var focusedDate = cloneDate(event.value);
+      this.$data.currentFocusedDate = focusedDate;
+      this.$data.currentValue = focusedDate;
+      this.triggerChange(focusedDate, event);
+    },
+    handleViewChange: function handleViewChange(_a) {
+      var view = _a.view;
+      this.$data.currentActiveView = view;
+    },
+    handlePrevClick: function handlePrevClick(event) {
+      var focusedDate = cloneDate(event.value);
+      this.focus();
+
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.$data.currentFocusedDate = focusedDate;
+    },
+    handleTitleClick: function handleTitleClick() {
+      this.focus();
+    },
+    handleNextClick: function handleNextClick(event) {
+      var focusedDate = cloneDate(event.value);
+      this.focus();
+
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.$data.currentFocusedDate = focusedDate;
+    },
+    handleCellEnter: function handleCellEnter(value) {
+      if (this.$props.mode === 'range') {
+        this.$data.currentFocusedDate = value;
+      }
+    },
+    generateRange: function generateRange(candidate, value) {
+      var end = value.end,
+          start = value.start;
+      var shouldSwap = value.start !== null && candidate.getTime() <= value.start.getTime();
+
+      if (!this.$props.allowReverse && shouldSwap) {
+        return {
+          start: candidate,
+          end: this._selectedRange.start
+        };
+      }
+
+      return this.activeRange !== 'end' ? {
+        start: candidate,
+        end: end
+      } : {
+        start: start || this._selectedDate,
+        end: candidate
+      };
+    },
+    clampRange: function clampRange(value) {
+      return {
+        start: value,
+        end: null
+      };
+    },
+    handleWeekCellClick: function handleWeekCellClick(event) {
+      this.$emit('weekcellclick', event);
+    },
+    handleWeekNameClick: function handleWeekNameClick(event) {
+      this.$emit('weeknameclick', event);
+    },
+    handleDateChange: function handleDateChange(event) {
+      var focusedDate = cloneDate(event.value);
+
+      var canNavigateDown = this._bus.canMoveDown(this.$data.currentActiveView);
+
+      if (this.$props.disabled) {
+        return;
+      }
+
+      if (canNavigateDown) {
+        if (event.isTodayClick) {
+          this._bus.moveToBottom(this.$data.currentActiveView);
+        } else {
+          this._bus.moveDown(this.$data.currentActiveView, event.event);
+
+          this.$data.currentFocusedDate = focusedDate;
+          return;
+        }
+      }
+
+      var value;
+
+      switch (this.$props.mode) {
+        case 'single':
+          value = cloneDate(event.value);
+          break;
+
+        case 'multiple':
+          if (Array.isArray(this._selectedMultiple)) {
+            var result = this._selectedMultiple.slice();
+
+            var index_1 = -1;
+            result.forEach(function (date, idx) {
+              if (isEqualDate(date, event.value)) {
+                index_1 = idx;
+              }
+            });
+            index_1 !== -1 ? result.splice(index_1, 1) : result.push(cloneDate(event.value));
+            value = result.slice();
+          } else {
+            if (this._selectedDate) {
+              value = [cloneDate(this._selectedDate), cloneDate(event.value)];
+            } else {
+              value = [cloneDate(event.value)];
+            }
+          }
+
+          break;
+
+        case 'range':
+          var hasSelection = this._selectedRange.start !== null && this._selectedRange.end !== null && this.activeRange === 'start';
+          value = hasSelection ? this.clampRange(event.value) : this.generateRange(event.value, this._selectedRange);
+          this.$data.currentActiveRangeEnd = this.activeRange !== 'end' ? 'end' : 'start';
+          break;
+
+        default:
+          value = cloneDate(event.value);
+          break;
+      }
+
+      this.$data.currentValue = value;
+      this.triggerChange(value, event);
+    },
+    triggerChange: function triggerChange(value, event) {
+      this.$data.valueDuringOnChange = value;
+      var args = {
+        event: event.event,
+        value: value,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: value,
+          valueAsDate: value
+        }
+      };
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
+      this.$emit('change', args);
+      this.$data.valueDuringOnChange = undefined;
+    },
+    handleMouseDown: function handleMouseDown(event) {
+      var focusedDate = cloneDate(event.value);
+
+      if (this.$props.disabled || this.$data.currentActiveView !== 0) {
+        return;
+      }
+
+      this.$data.currentFocusedDate = focusedDate;
+    },
+    tableKeyDown: function tableKeyDown(event) {
+      var keyCode = event.keyCode;
+      this.$emit('keydown', event);
+
+      if (keyCode === Keys.enter) {
+        var args = {
+          event: event,
+          value: this._focusedDate,
+          component: this,
+          target: {
+            name: this.$props.name,
+            value: this._focusedDate,
+            valueAsDate: this._focusedDate
+          }
+        };
+        this.handleDateChange(args);
+      } else {
+        var candidate = dateInRange(this._navigation.move(this._focusedDate, this._navigation.action(event), this.$data.currentActiveView, this._service, event), this.currentMin, this.currentMax);
+
+        if (isEqualDate(this._focusedDate, candidate)) {
+          return;
+        }
+
+        this._calculateFocusFromValue = false;
+        this.$data.currentFocusedDate = candidate;
+      }
+
+      event.preventDefault();
+    },
+    isValueEqual: function isValueEqual(newValue, oldValue) {
+      if (newValue instanceof Date && oldValue instanceof Date) {
+        return isEqualDate(newValue, oldValue); // @ts-ignore
+      } else if (newValue instanceof Object && oldValue instanceof Object) {
+        if (newValue && oldValue && // @ts-ignore
+        isEqualDate(newValue.start, oldValue.start) && isEqualDate(newValue.end, oldValue.end)) {
+          return true;
+        } else {
+          return false;
+        }
+      } else if (newValue instanceof Array && oldValue instanceof Array) {
+        if (newValue && oldValue && // @ts-ignore
+        newValue.length === oldValue.length) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+
+      return false;
+    },
+    rangeWithFocused: function rangeWithFocused(range, focusedDate) {
+      return {
+        start: range.start,
+        end: range.end === null && range.start !== null && this.$data.isActive ? focusedDate.end : range.end
+      };
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var views = this.$props.views;
+    var currentValue = this.computedValue();
+    var currentFocusedDate = this.$data.currentFocusedDate;
+    var didValueChange = currentValue !== null && this._oldValue !== null ? !this.isValueEqual(currentValue, this._oldValue) : currentValue !== this._oldValue;
+    this._selectedDate = extractDateFromValue(this.currentMin, this.currentMax, currentValue);
+    this._selectedMultiple = extractMultipleFromValue(this.currentMin, this.currentMax, currentValue);
+    var cell = templateRendering.call(this, this.$props.cell, getListeners.call(this));
+    var weekCell = templateRendering.call(this, this.$props.weekCell, getListeners.call(this));
+    var headerTitle = templateRendering.call(this, this.$props.headerTitle, getListeners.call(this));
+    var activeView = viewInRange(this.$data.currentActiveView, CalendarViewEnum[this.$props.bottomView], CalendarViewEnum[this.$props.topView]);
+    this._selectedDate = extractDateFromValue(this.currentMin, this.currentMax, currentValue);
+    this._selectedMultiple = extractMultipleFromValue(this.currentMin, this.currentMax, currentValue);
+    this._selectedRange = extractRangeFromValue(currentValue);
+    var calculatedFocus = extractFocusedDate(this._selectedDate, this._selectedMultiple, this._selectedRange);
+    var currentDateInRange = dateInRange(didValueChange && calculatedFocus !== null ? calculatedFocus : currentFocusedDate, this.currentMin, this.currentMax);
+
+    if (currentDateInRange instanceof Date) {
+      this._focusedDate = getDate(currentDateInRange);
+    } else if (calculatedFocus) {
+      this._focusedDate = calculatedFocus;
+    }
+
+    var visualizedRange = this.rangeWithFocused(this._selectedRange, currentFocusedDate);
+    this._intl = provideIntlService(this);
+
+    this._bus.configure(CalendarViewEnum[this.$props.bottomView], CalendarViewEnum[this.$props.topView]);
+
+    this._service = this._bus.service(activeView, this._intl);
+    var rootClassNames = classNames('k-widget k-calendar', 'k-calendar-range', {
+      'k-disabled': this.$props.disabled,
+      'k-week-number': this.$props.weekNumber
+    }, this.$props.className);
+    var didViewChange = this._lastView !== this.$data.currentActiveView;
+
+    var isDateInList = this._dates && this._service.isInArray(this._focusedDate, this._dates);
+
+    var didViewsCountChange = this._lastViewsCount !== this.$props.views;
+
+    if (!isDateInList || didViewChange || didViewsCountChange) {
+      this._dates = this._service.datesList(this._focusedDate, views);
+    }
+
+    var activeDate = cloneDate(this._dates && this._dates[0] ? this._dates[0] : undefined);
+    var calendarBody = [this.$props.navigation && // @ts-ignore  function children
+    h(Header, {
+      tabIndex: !this.$props.disabled ? this.$props.tabIndex || 0 : undefined // key={`.kendo.calendar.header.${this.$data.currentFocusedDate.getTime()}`}
+      ,
+      attrs: this.v3 ? undefined : {
+        tabIndex: !this.$props.disabled ? this.$props.tabIndex || 0 : undefined,
+        activeView: this.$data.currentActiveView,
+        currentDate: activeDate,
+        focusedDate: this._focusedDate,
+        min: this.currentMin,
+        max: this.currentMax,
+        rangeLength: this.$props.views,
+        bus: this._bus,
+        service: this._service,
+        headerTitle: headerTitle
+      },
+      activeView: this.$data.currentActiveView,
+      currentDate: activeDate,
+      focusedDate: this._focusedDate,
+      min: this.currentMin,
+      max: this.currentMax,
+      rangeLength: this.$props.views,
+      onTodayclick: this.handleTodayClick,
+      on: this.v3 ? undefined : {
+        "todayclick": this.handleTodayClick,
+        "nextclick": this.handleNextClick,
+        "prevclick": this.handlePrevClick,
+        "titleclick": this.handleTitleClick
+      },
+      onNextclick: this.handleNextClick,
+      onPrevclick: this.handlePrevClick,
+      onTitleclick: this.handleTitleClick,
+      bus: this._bus,
+      service: this._service,
+      headerTitle: headerTitle
+    }), // @ts-ignore function children
+    h(ViewList // key={`.kendo.calendar.viewlist.${this.$data.currentFocusedDate.getTime()}`}
+    , {
+      allowReverse: this.$props.allowReverse,
+      attrs: this.v3 ? undefined : {
+        allowReverse: this.$props.allowReverse,
+        isActive: this.$data.isActive,
+        tabIndex: !this.$props.disabled ? this.$props.tabIndex || 0 : undefined,
+        activeView: this.$data.currentActiveView,
+        focusedDate: this._focusedDate,
+        min: this.currentMin,
+        max: this.currentMax,
+        bus: this._bus,
+        dates: this._dates,
+        shouldScroll: this.$data.didNavigationChange,
+        service: this._service,
+        cell: cell,
+        weekCell: weekCell,
+        dom: this._dom,
+        views: this.$props.views,
+        selectionRange: visualizedRange,
+        showWeekNumbers: this.$props.weekNumber,
+        value: this._selectedMultiple || this._selectedDate,
+        cellUID: this.$data.cellUID
+      },
+      isActive: this.$data.isActive,
+      tabIndex: !this.$props.disabled ? this.$props.tabIndex || 0 : undefined,
+      ref: this.v3 ? function (el) {
+        _this.calendarViewListRef = el;
+      } : 'calendarViewList',
+      activeView: this.$data.currentActiveView,
+      focusedDate: this._focusedDate,
+      min: this.currentMin,
+      max: this.currentMax,
+      bus: this._bus,
+      dates: this._dates,
+      shouldScroll: this.$data.didNavigationChange,
+      service: this._service,
+      cell: cell,
+      weekCell: weekCell,
+      dom: this._dom,
+      views: this.$props.views,
+      selectionRange: visualizedRange,
+      showWeekNumbers: this.$props.weekNumber,
+      onChange: this.handleDateChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleDateChange,
+        "weekcellclick": this.handleWeekCellClick,
+        "weeknameclick": this.handleWeekNameClick,
+        "listmousedown": this.handleMouseDown,
+        "cellenter": this.handleCellEnter,
+        "listkeydown": this.tableKeyDown,
+        "listfocus": this.handleFocus,
+        "listblur": this.handleBlur
+      },
+      onWeekcellclick: this.handleWeekCellClick,
+      onWeeknameclick: this.handleWeekNameClick,
+      onListmousedown: this.handleMouseDown,
+      onCellenter: this.handleCellEnter,
+      onListkeydown: this.tableKeyDown,
+      onListfocus: this.handleFocus,
+      onListblur: this.handleBlur,
+      value: this._selectedMultiple || this._selectedDate,
+      cellUID: this.$data.cellUID
+    })];
+    return h("div", {
+      "aria-disabled": this.$props.disabled,
+      attrs: this.v3 ? undefined : {
+        "aria-disabled": this.$props.disabled,
+        id: this.$props.id
+      },
+      "class": rootClassNames,
+      id: this.$props.id,
+      onFocusout: this.emitBlur,
+      on: this.v3 ? undefined : {
+        "focusout": this.emitBlur,
+        "focusin": this.emitFocus
+      },
+      onFocusin: this.emitFocus
+    }, [calendarBody]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var Calendar = CalendarVue2;
+export { Calendar, CalendarVue2 };

package/dist/esm/calendar/components/CalendarCell.d.ts

@@ -0,0 +1,36 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../../additionalTypes';
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { CellContext } from '../models';
+/**
+ * The props which will be received by the custom cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-cell).
+ */
+export interface CalendarCellProps extends CellContext {
+    isDisabled?: boolean;
+    view?: number;
+}
+/**
+ * @hidden
+ */
+export interface CalendarCellMethods {
+    [key: string]: any;
+    handleClick?: (e: any) => void;
+    handleMouseDown?: (e: any) => void;
+    handleMouseEnter?: () => void;
+    handleMouseLeave?: () => void;
+}
+/**
+ * @hidden
+ */
+export interface CalendarCellAllMethods extends Vue2type, CalendarCellMethods {
+}
+/**
+ * @hidden
+ */
+declare let CalendarCellVue2: ComponentOptions<CalendarCellAllMethods, {}, DefaultMethods<CalendarCellAllMethods>, {}, RecordPropsDefinition<CalendarCellProps>>;
+/**
+ * @hidden
+ */
+declare const CalendarCell: DefineComponent<CalendarCellProps, any, {}, {}, CalendarCellMethods, {}, {}, {}, string, CalendarCellProps, CalendarCellProps, {}>;
+export { CalendarCell, CalendarCellVue2 };