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

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

@@ -0,0 +1,344 @@
+// @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 { cloneDate } from '@progress/kendo-date-math';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+var DEFAULT_FETCH_MONTHS_COUNT = 1; // import { Virtualization, ScrollActionArguments } from '../../virtualization/Virtualization.js';
+
+import { View } from './View.js';
+import { shiftWeekNames } from '../../utils.js';
+import { CalendarViewEnum } from '../models.js';
+import { classNames } from '@progress/kendo-vue-common';
+var VIEWS_COUNT = 5;
+/**
+ * @hidden
+ */
+
+var ViewListVue2 = {
+  name: 'KendoViewList',
+  inheritAttrs: false,
+  inject: {
+    kendoIntlService: {
+      default: null
+    }
+  },
+  props: {
+    allowReverse: Boolean,
+    hasFocusedDate: Boolean,
+    activeView: {
+      type: Number,
+      required: true
+    },
+    bottomOffset: {
+      type: Number
+    },
+    cell: [String, Function, Object],
+    cellUID: {
+      type: String,
+      required: true
+    },
+    dates: Array,
+    focusedDate: {
+      type: Date,
+      required: true
+    },
+    isActive: {
+      type: Boolean,
+      default: undefined
+    },
+    max: {
+      type: Date,
+      required: true
+    },
+    min: {
+      type: Date,
+      required: true
+    },
+    selectionRange: Object,
+    showWeekNumbers: {
+      type: Boolean,
+      default: false
+    },
+    take: {
+      type: Number,
+      default: VIEWS_COUNT
+    },
+    value: {
+      type: [Date, Array, Object]
+    },
+    views: {
+      type: Number,
+      default: DEFAULT_FETCH_MONTHS_COUNT
+    },
+    viewHeight: Number,
+    viewOffset: Number,
+    bus: Object,
+    dom: Object,
+    weekCell: [String, Function, Object],
+    service: Object
+  },
+  data: function data() {
+    return {
+      lastViewsCount: 0,
+      valueHasUpdated: false
+    };
+  },
+  computed: {
+    weekNames: {
+      get: function get() {
+        this._intl = provideIntlService(this);
+        var weekNames = shiftWeekNames(this._intl.dateFormatNames({
+          nameType: 'short',
+          type: 'days'
+        }), this._intl.firstDay());
+        return this.weekNumber ? [''].concat(weekNames) : weekNames;
+      }
+    },
+    weekNumber: {
+      get: function get() {
+        return Boolean(this.$props.showWeekNumbers && this.$props.activeView === CalendarViewEnum.month);
+      }
+    }
+  },
+  created: function created() {
+    this.lastView = this.$props.activeView;
+    this.lastFocus = this.$props.focusedDate;
+    this.shouldScroll = false; //  this.$data.skip = this.$props.service.skip(this.$props.focusedDate, this.$props.min);
+    //  this.$data.index = this.$props.service.skip(this.$props.focusedDate, this.$props.min);
+  },
+  updated: function updated() {
+    this.shouldScroll = false;
+    this.lastView = this.$props.activeView;
+    this.$data.lastViewsCount = this.$props.views; // this.lastFocus = this.$props.focusedDate;
+
+    this.indexToScroll = undefined;
+  },
+  methods: {
+    handleFocus: function handleFocus(event) {
+      this.$emit('listfocus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('listblur', event);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('listkeydown', event);
+    },
+    handleVirtualizationMount: function handleVirtualizationMount(_virtualization) {// this.virtualization = virtualization;
+      // if (this.virtualization && this.table) {
+      //     this.table.style.transform = `translateY(${this.viewOffset}px)`;
+      //     const viewDate = dateInRange(this.$props.focusedDate, this.$props.min, this.$props.max);
+      //     const indexToScroll = this.$props.service.skip(viewDate, this.$props.min);
+      //   //  this.virtualization.scrollToIndex(indexToScroll);
+      // }
+    },
+    calculateHeights: function calculateHeights() {
+      if (!this.$props.dom) {
+        return;
+      }
+
+      var scrollableHeight = this.$props.activeView === CalendarViewEnum.month ? this.$props.dom.scrollableContentHeight : this.$props.dom.scrollableYearContentHeight;
+      this._bottomOffset = scrollableHeight - this.$props.dom.viewHeight(this.$props.activeView);
+      this._viewOffset = -1 * this.$props.dom.headerHeight;
+      this._viewHeight = this.$props.dom.viewHeight(this.$props.activeView) || 1;
+    },
+    getTake: function getTake(skip, total) {
+      return Math.min(total - skip, this.$props.take);
+    },
+    handleScrollAction: function handleScrollAction() {// const skip = pageAction ? pageAction.skip : this.$data.skip;
+      // if (this.$data.index !== index || this.$data.skip !== skip) {
+      //     this.$data.index = skip;
+      // }
+      // if (this.table && scrollAction) {
+      //     const translate = `translateY(${scrollAction.offset}px)`;
+      //     this.table.style.transform = translate;
+      // }
+    },
+    handleTodayClick: function handleTodayClick(event) {
+      this.shouldScroll = true;
+      this.handleDateChange(event, true);
+    },
+    handleMouseDown: function handleMouseDown(event) {
+      var args = {
+        event: event.event,
+        value: cloneDate(event.value),
+        target: this
+      };
+      this.$emit('listmousedown', args);
+    },
+    handleDateChange: function handleDateChange(event, isTodayClick) {
+      if (isTodayClick === void 0) {
+        isTodayClick = false;
+      }
+
+      var args = {
+        event: event.event,
+        value: cloneDate(event.value),
+        target: this,
+        isTodayClick: isTodayClick
+      };
+      this.$emit('change', args);
+    },
+    handleWeekCellClick: function handleWeekCellClick(event) {
+      this.$emit('weekcellclick', event);
+    },
+    handleWeekNameClick: function handleWeekNameClick(event, value) {
+      var args = {
+        value: value,
+        event: event
+      };
+      this.$emit('weeknameclick', args);
+    },
+    handleCellEnter: function handleCellEnter(event) {
+      this.$emit('cellenter', event);
+    },
+    rotateSelectionRange: function rotateSelectionRange(selectionRange) {
+      if (selectionRange.start === null || selectionRange.end === null) {
+        return selectionRange;
+      }
+
+      var needRotate = selectionRange.end < selectionRange.start;
+      return {
+        start: needRotate ? selectionRange.end : selectionRange.start,
+        end: needRotate ? selectionRange.start : selectionRange.end
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService
+    };
+  },
+  mounted: function mounted() {
+    this._calendarView = this.$refs.calendarView;
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var selectionRange = this.$props.allowReverse ? this.rotateSelectionRange(this.$props.selectionRange) : this.$props.selectionRange;
+    var rootClassNames = classNames('k-calendar-view', 'k-hstack k-align-items-start k-justify-content-center', {
+      'k-calendar-monthview': this.$props.activeView === CalendarViewEnum.month,
+      'k-calendar-yearview': this.$props.activeView === CalendarViewEnum.year,
+      'k-calendar-decadeview': this.$props.activeView === CalendarViewEnum.decade,
+      'k-calendar-centuryview': this.$props.activeView === CalendarViewEnum.century
+    });
+    var tableClassNames = classNames('k-calendar-table', 'k-content', 'k-calendar-content', {
+      'k-month': this.$props.activeView === CalendarViewEnum.month,
+      'k-year': this.$props.activeView === CalendarViewEnum.year,
+      'k-decade': this.$props.activeView === CalendarViewEnum.decade,
+      'k-century': this.$props.activeView === CalendarViewEnum.century
+    });
+
+    var buildMonthView = function buildMonthView(weekNames) {
+      var that = this;
+      return h("thead", {
+        "class": 'k-calendar-thead'
+      }, [h("tr", {
+        "class": 'k-calendar-tr k-calendar-weekdays'
+      }, [weekNames.map(function (name, idx) {
+        return h("th", {
+          "class": 'k-calendar-th',
+          key: idx,
+          onClick: function onClick(ev) {
+            return that.handleWeekNameClick(ev, name);
+          },
+          on: this.v3 ? undefined : {
+            "click": function onClick(ev) {
+              return that.handleWeekNameClick(ev, name);
+            }
+          }
+        }, [name]);
+      }, this)])]);
+    };
+
+    var buildDates = function buildDates() {
+      var cellUID = this.$props.cellUID;
+      return this.$props.dates.map(function (vDate) {
+        return h("table", {
+          role: "grid",
+          attrs: this.v3 ? undefined : {
+            role: "grid",
+            "aria-label": this.$props.service.title(this.$props.focusedDate),
+            "aria-live": 'polite',
+            "aria-activedescendant": cellUID + this.$props.focusedDate.getTime(),
+            tabindex: this.$attrs.tabIndex
+          },
+          "aria-label": this.$props.service.title(this.$props.focusedDate),
+          "aria-live": 'polite',
+          "aria-activedescendant": cellUID + this.$props.focusedDate.getTime(),
+          tabindex: this.$attrs.tabIndex,
+          "class": tableClassNames,
+          onKeydown: this.handleKeyDown,
+          on: this.v3 ? undefined : {
+            "keydown": this.handleKeyDown
+          }
+        }, [this.$props.activeView === CalendarViewEnum.month && buildMonthView.call(this, this.weekNames), // @ts-ignore function children
+        h(View, {
+          key: vDate.getTime(),
+          activeView: this.$props.activeView,
+          attrs: this.v3 ? undefined : {
+            activeView: this.$props.activeView,
+            viewDate: vDate,
+            min: this.$props.min,
+            max: this.$props.max,
+            cellUID: cellUID,
+            isActive: this.$props.isActive,
+            focusedDate: this.$props.focusedDate,
+            cell: this.$props.cell,
+            selectionRange: selectionRange,
+            selectedDate: this.$props.value,
+            showWeekNumbers: this.weekNumber,
+            bus: this.$props.bus,
+            service: this.$props.service,
+            weekCell: this.$props.weekCell
+          },
+          viewDate: vDate,
+          min: this.$props.min,
+          max: this.$props.max,
+          cellUID: cellUID,
+          isActive: this.$props.isActive,
+          focusedDate: this.$props.focusedDate,
+          cell: this.$props.cell,
+          selectionRange: selectionRange,
+          selectedDate: this.$props.value,
+          showWeekNumbers: this.weekNumber,
+          onChange: this.handleDateChange,
+          on: this.v3 ? undefined : {
+            "change": this.handleDateChange,
+            "weekcellclick": this.handleWeekCellClick,
+            "cellenter": this.handleCellEnter,
+            "viewmousedown": this.handleMouseDown
+          },
+          onWeekcellclick: this.handleWeekCellClick,
+          onCellenter: this.handleCellEnter,
+          onViewmousedown: this.handleMouseDown,
+          bus: this.$props.bus,
+          service: this.$props.service,
+          weekCell: this.$props.weekCell
+        })]);
+      }, this);
+    };
+
+    return h("div", {
+      "class": rootClassNames,
+      onFocusin: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
+      },
+      onFocusout: this.handleBlur
+    }, [buildDates.call(this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ViewList = ViewListVue2;
+export { ViewList, ViewListVue2 };

package/dist/esm/calendar/components/interfaces/CalendarComputed.d.ts

@@ -0,0 +1,10 @@
+import { SelectionRangeEnd } from '../../models';
+/**
+ * @hidden
+ */
+export interface CalendarComputed {
+    [key: string]: any;
+    activeRange?: SelectionRangeEnd;
+    currentMin: Date;
+    currentMax: Date;
+}

package/dist/esm/calendar/components/interfaces/CalendarComputed.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/components/interfaces/CalendarData.d.ts

@@ -0,0 +1,10 @@
+import { CalendarViewEnum, SelectionRangeEnd } from '../../models';
+/**
+ * @hidden
+ */
+export interface CalendarData {
+    id: string;
+    activeView: CalendarViewEnum;
+    currentFocusedDate: Date;
+    currentActiveRangeEnd: SelectionRangeEnd;
+}

package/dist/esm/calendar/components/interfaces/CalendarData.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/components/interfaces/CalendarEventArguments.d.ts

@@ -0,0 +1,56 @@
+import { SelectionRange } from '../../models';
+/**
+ * @hidden
+ */
+export interface NavigationEventArguments {
+    event?: any;
+    value: Date;
+    target: any;
+}
+/**
+ * The arguments for the `change` event of the Calendar. The generic argument sets the target type of the event. Defaults to `Calendar`.
+ */
+export interface CalendarChangeEvent {
+    /**
+     * A native DOM event.
+     */
+    event?: any;
+    /**
+     * The new value.
+     */
+    value: Date | Date[] | SelectionRange | null;
+    /**
+     * The Calendar element.
+     */
+    component: any;
+    /**
+     * The target object.
+     */
+    target: any;
+}
+/**
+ * The arguments for the `weekcellclick` event of the Calendar.
+ */
+export interface CalendarWeekCellClickEvent {
+    /**
+     * A native DOM event.
+     */
+    event?: any;
+    /**
+     * The new value.
+     */
+    value: number | null;
+}
+/**
+ * The arguments for the `weeknameclick` event of the Calendar.
+ */
+export interface CalendarWeekNameClickEvent {
+    /**
+     * A native DOM event.
+     */
+    event?: any;
+    /**
+     * The value.
+     */
+    value: string | null;
+}

package/dist/esm/calendar/components/interfaces/CalendarEventArguments.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/components/interfaces/CalendarMethods.d.ts

@@ -0,0 +1,33 @@
+import { SelectionRange, CalendarViewEnum } from '../../models';
+import { ViewListEventArguments } from '../ViewList';
+/**
+ * @hidden
+ */
+export interface CalendarMethods {
+    [key: string]: any;
+    computedValue: () => Date | Date[] | SelectionRange | null;
+    focus: (event?: any) => void;
+    handleTodayClick: (e: any) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    emitFocus: (e: any) => void;
+    emitBlur: (e: any) => void;
+    tableKeyDown: (_: any) => void;
+    handleClick: (_: any) => void;
+    handleWeekCellClick: (_: any) => void;
+    handleWeekNameClick: (_: any) => void;
+    handleCellEnter: (value: Date) => void;
+    handleDateChange: (args: any) => void;
+    handleNextClick: (event: ViewListEventArguments) => void;
+    handlePrevClick: (event: ViewListEventArguments) => void;
+    handleMouseDown: (event: ViewListEventArguments) => void;
+    handleTitleClick: () => void;
+    handleViewChange: (e: {
+        view: CalendarViewEnum;
+    }) => void;
+    triggerChange: (value: Date, event: ViewListEventArguments) => void;
+    isValueEqual: (newValue: Date | Date[] | SelectionRange | null, oldValue: Date | Date[] | SelectionRange | null) => boolean;
+    generateRange: (candidate: Date, value: SelectionRange) => SelectionRange;
+    clampRange: (value: Date) => SelectionRange;
+    rangeWithFocused: (range: SelectionRange, focusedDate: Date) => SelectionRange;
+}

package/dist/esm/calendar/components/interfaces/CalendarMethods.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/components/interfaces/CalendarProps.d.ts

@@ -0,0 +1,55 @@
+import { CalendarSettings, SelectionRangeEnd, SelectionRange, CalendarMode } from '../../models';
+import { CalendarChangeEvent, CalendarWeekCellClickEvent } from '../../../main';
+import { CalendarWeekNameClickEvent } from './CalendarEventArguments';
+/**
+ * Represents the props of the [Kendo UI for Vue Calendar component]({% slug overview_calendar %}). The generic argument is passed to the `change` property and is used as a target in the [`CalendarChangeEvent`]({% slug api_dateinputs_calendarchangeevent %}) interface.
+ */
+export interface CalendarProps extends CalendarSettings {
+    /**
+     * Specifies which end of the defined selection range will be marked as active.
+     *
+     * > If the selection range is undefined, the value is ignored.
+     */
+    activeRangeEnd?: SelectionRangeEnd;
+    /**
+     * If set to `true`, the component skips the validation of whether the `from` value is after the `to` value.
+     */
+    allowReverse?: boolean;
+    /**
+     * @hidden
+     */
+    modelValue?: Date | Date[] | SelectionRange | null;
+    /**
+     * Sets the default value of the Calendar.
+     */
+    defaultValue?: Date | Date[] | SelectionRange | null;
+    /**
+     * An event that is called after the value of the Calendar has changed.
+     */
+    onChange?: (event: CalendarChangeEvent) => void;
+    /**
+     * An event called when the week number cell is clicked.
+     */
+    onWeekcellclick?: (event: CalendarWeekCellClickEvent) => void;
+    /**
+     * An event called when the week name cell is clicked.
+     */
+    onWeeknameclick?: (event: CalendarWeekNameClickEvent) => void;
+    /**
+     * Sets the value of the Calendar.
+     */
+    value?: Date | Date[] | SelectionRange | null;
+    /**
+     * Sets the value of the Calendar.
+     */
+    views: number;
+    /**
+     * Sets the selection mode of the Calendar.
+     *
+     * The available modes are:
+     * * (Default) `single`—Renders a single-date selection.
+     * * `multiple`—Renders a multiple-date selection.
+     * * `range`—Renders a date-range selection.
+     */
+    mode?: CalendarMode;
+}

package/dist/esm/calendar/components/interfaces/CalendarProps.js

@@ -0,0 +1,2 @@
+// tslint:disable:max-line-length
+export {};

package/dist/esm/calendar/components/interfaces/CalendarState.d.ts

@@ -0,0 +1,26 @@
+import { DOMService, BusViewService, NavigationService } from '../../services';
+import { ViewService, CalendarViewEnum, SelectionRange } from '../../models';
+import { IntlService } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+export interface CalendarState {
+    _dom: DOMService;
+    _bus: BusViewService;
+    _service: ViewService;
+    _lastView: CalendarViewEnum;
+    _lastViewsCount: number;
+    _navigation: NavigationService;
+    _intl: IntlService;
+    _oldValue: Date | Date[] | SelectionRange | null;
+    _hasMounted: boolean;
+    _focusedDate: Date;
+    _calculateFocusFromValue: boolean;
+    _dates: Array<any>;
+    _selectedDate: Date | null;
+    _selectedMultiple: Date[] | null;
+    _selectedRange: SelectionRange;
+    calendarViewList: any;
+    calendarViewListRef: any;
+    v3: boolean;
+}

package/dist/esm/calendar/components/interfaces/CalendarState.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/ActiveView.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The literal type that defines all possible Calendar views.
+ */
+export declare type ActiveView = 'month' | 'year' | 'decade' | 'century';

package/dist/esm/calendar/models/ActiveView.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/CalendarMode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Represents the selection modes of the Calendar.
+ *
+ * The supported modes are:
+ * * (Default) `single`—Renders a single-date selection.
+ * * `multiple`—Renders a multiple-date selection.
+ * * `range`—Renders a date-range selection.
+ */
+export declare type CalendarMode = 'single' | 'multiple' | 'range';

package/dist/esm/calendar/models/CalendarMode.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/CalendarSettings.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @hidden
+ */
+export interface CalendarSettings {
+    /**
+     * Defines the bottommost view to which the user can navigate.
+     */
+    bottomView?: string;
+    /**
+     * Sets the `className` of the Calendar.
+     */
+    className?: string;
+    /**
+     * Sets the default active view of the Calendar.
+     * If not set, the Calendar will display the month view.
+     */
+    defaultActiveView?: string;
+    /**
+     * Determines whether the Calendar is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the initial focused date of the Calendar.
+     */
+    focusedDate?: Date;
+    /**
+     * Sets the `id` of the Calendar.
+     */
+    id?: string;
+    /**
+     * Sets the maximum allowed date of the Calendar. Defaults to `2099-12-31`.
+     */
+    max?: Date;
+    /**
+     * Sets the minimum allowed date of the Calendar. Defaults to `1900-1-1`.
+     */
+    min?: Date;
+    /**
+     * Determines if the navigation sidebar will be displayed.
+     */
+    navigation?: boolean;
+    /**
+     * Fires each time the Calendar is blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the Calendar is focused.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Sets the `tabIndex` property of the Calendar.
+     */
+    tabIndex?: number;
+    /**
+     * Defines the topmost view to which the user can navigate.
+     */
+    topView?: string;
+    /**
+     * Determines if the week number column will be displayed.
+     */
+    weekNumber?: boolean;
+    /**
+     * Enables the customization or the override of the default Calendar cell
+     * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)).
+     */
+    cell?: any;
+    /**
+     * Enables the customization or the override of the default week-column cell in the Calendar
+     * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)).
+     */
+    weekCell?: any;
+    /**
+     * Enables the customization or the override of the default header title in the Calendar
+     * ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)).
+     */
+    headerTitle?: any;
+    /**
+     * Enables the customization or the override of the default navigation item in the Calendar
+     * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
+     */
+    navigationItem?: any;
+}

package/dist/esm/calendar/models/CalendarSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/CalendarViewEnum.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The Enum which defines all possible Calendar view types.
+ */
+export declare enum CalendarViewEnum {
+    month = 0,
+    year = 1,
+    decade = 2,
+    century = 3
+}