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

package/dist/esm/views/agenda/AgendaView.js

@@ -0,0 +1,342 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @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 { BaseView } from '../../components/BaseView.js';
+import { VerticalResourceIterator } from '../common/VerticalResourceIterator.js';
+import { useCellSync } from '../../hooks.js';
+import { DAYS_IN_WEEK_COUNT } from '../../constants.js';
+import { MS_PER_DAY, getDate, addDays, firstDayInWeek, ZonedDate } from '@progress/kendo-date-math';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { toRanges } from '../../services/rangeService.js';
+import { toOccurrences } from '../../services/occurrenceService.js';
+import { toItems } from '../../services/itemsService.js';
+import { toUTCDateTime, mapItemsToSlots, mapSlotsToItems } from '../../utils.js';
+import { toSlots } from '../../services.js';
+import { AgendaViewHead } from './AgendaViewHead.js';
+import { AgendaViewBody } from './AgendaViewBody.js';
+import { SchedulerEditTask } from '../../tasks/SchedulerEditTask.js';
+import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot.js';
+/**
+ * @hidden
+ */
+
+var AgendaViewVue2 = {
+  name: 'KendoAgendaView',
+  props: {
+    name: {
+      type: String,
+      default: 'agenda'
+    },
+    // title: (localization: LocalizationService): string =>
+    // localization.toLanguageString(agendaViewTitle, messages[agendaViewTitle]),
+    dateRange: {
+      type: [Function, Object],
+      default: function _default() {
+        return agendaViewDateRange;
+      }
+    },
+    selectedDateFormat: {
+      type: String,
+      default: '{0:D} - {1:D}'
+    },
+    selectedShortDateFormat: {
+      type: String,
+      default: '{0:d} - {1:d}'
+    },
+    slotDuration: {
+      type: Number,
+      default: 60 * 24
+    },
+    slotDivisions: {
+      type: Number,
+      default: 1
+    },
+    step: {
+      type: Number,
+      default: DAYS_IN_WEEK_COUNT
+    },
+    numberOfDays: {
+      type: Number,
+      default: DAYS_IN_WEEK_COUNT
+    },
+    task: [String, Function, Object],
+    editable: {
+      type: [Boolean, Object],
+      default: false
+    }
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.intl = provideIntlService(this);
+  },
+  mounted: function mounted() {
+    useCellSync({
+      element: this.$el,
+      selector: '.k-scheduler-datecolumn',
+      explicitDepth: false
+    });
+    useCellSync({
+      element: this.$el,
+      selector: '.k-scheduler-timecolumn',
+      explicitDepth: false
+    });
+  },
+  updated: function updated() {
+    useCellSync({
+      element: this.$el,
+      selector: '.k-scheduler-datecolumn',
+      explicitDepth: false
+    });
+    useCellSync({
+      element: this.$el,
+      selector: '.k-scheduler-timecolumn',
+      explicitDepth: false
+    });
+  },
+  computed: {
+    ranges: function ranges() {
+      return toRanges(this.ks.dateRange, {
+        step: MS_PER_DAY,
+        timezone: this.ks.timezone
+      });
+    },
+    agendaSlots: function agendaSlots() {
+      return toSlots(this.ks.dateRange, {
+        step: MS_PER_DAY
+      }, {
+        groups: this.ks.groups,
+        ranges: this.ranges
+      });
+    },
+    occurrences: function occurrences() {
+      return toOccurrences(this.ks.dataItems, {
+        dateRange: this.ks.dateRange,
+        fields: this.ks.fields,
+        timezone: this.ks.timezone
+      });
+    },
+    items: function items() {
+      var items = toItems(this.occurrences, {
+        timezone: this.ks.timezone
+      }, {
+        groups: this.ks.groups,
+        ranges: this.ranges
+      });
+      mapItemsToSlots(items, this.agendaSlots, true);
+      mapSlotsToItems(items, this.agendaSlots, true);
+      return items;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var EditTask = this.$props.editTask || SchedulerEditTask;
+    var EditSlot = this.$props.editSlot || SchedulerEditSlot;
+    var intl = provideIntlService(this);
+    var localization = provideLocalizationService(this);
+    var agendaSlots = this.agendaSlots;
+    return (// @ts-ignore  function children
+      h(BaseView, {
+        id: this.$props.id,
+        attrs: this.v3 ? undefined : {
+          id: this.$props.id,
+          viewProps: __assign({}, this.$props),
+          baseSlots: this.items,
+          ranges: this.ranges
+        },
+        "class": 'k-scheduler-agendaview',
+        viewProps: __assign({}, this.$props),
+        baseSlots: this.items,
+        ranges: this.ranges
+      }, this.v3 ? function () {
+        return [h("div", {
+          "class": "k-scheduler-head"
+        }, [// @ts-ignore  function children
+        h(VerticalResourceIterator, {
+          resources: _this.ks.props.resources,
+          attrs: _this.v3 ? undefined : {
+            resources: _this.ks.props.resources,
+            group: _this.ks.props.group
+          },
+          group: _this.ks.props.group
+        }, _this.v3 ? function () {
+          return [// @ts-ignore
+          h(AgendaViewHead)];
+        } : [h(AgendaViewHead)])]), // @ts-ignore  function children
+        h(VerticalResourceIterator, {
+          resources: _this.ks.props.resources,
+          attrs: _this.v3 ? undefined : {
+            resources: _this.ks.props.resources,
+            group: _this.ks.props.group,
+            nested: true
+          },
+          group: _this.ks.props.group,
+          nested: true
+        }, _this.v3 ? function () {
+          return [h(AgendaViewBody, {
+            items: _this.items,
+            attrs: _this.v3 ? undefined : {
+              items: _this.items,
+              agendaSlots: agendaSlots,
+              task: _this.$props.task,
+              editable: _this.$props.editable
+            },
+            agendaSlots: agendaSlots,
+            task: _this.$props.task,
+            editable: _this.$props.editable,
+            onDataaction: _this.handleDataAction,
+            on: _this.v3 ? undefined : {
+              "dataaction": _this.handleDataAction
+            }
+          })];
+        } : [h(AgendaViewBody, {
+          items: _this.items,
+          attrs: _this.v3 ? undefined : {
+            items: _this.items,
+            agendaSlots: agendaSlots,
+            task: _this.$props.task,
+            editable: _this.$props.editable
+          },
+          agendaSlots: agendaSlots,
+          task: _this.$props.task,
+          editable: _this.$props.editable,
+          onDataaction: _this.handleDataAction,
+          on: _this.v3 ? undefined : {
+            "dataaction": _this.handleDataAction
+          }
+        })])];
+      } : [h("div", {
+        "class": "k-scheduler-head"
+      }, [h(VerticalResourceIterator, {
+        resources: _this.ks.props.resources,
+        attrs: _this.v3 ? undefined : {
+          resources: _this.ks.props.resources,
+          group: _this.ks.props.group
+        },
+        group: _this.ks.props.group
+      }, _this.v3 ? function () {
+        return [h(AgendaViewHead)];
+      } : [h(AgendaViewHead)])]), h(VerticalResourceIterator, {
+        resources: _this.ks.props.resources,
+        attrs: _this.v3 ? undefined : {
+          resources: _this.ks.props.resources,
+          group: _this.ks.props.group,
+          nested: true
+        },
+        group: _this.ks.props.group,
+        nested: true
+      }, _this.v3 ? function () {
+        return [h(AgendaViewBody, {
+          items: _this.items,
+          attrs: _this.v3 ? undefined : {
+            items: _this.items,
+            agendaSlots: agendaSlots,
+            task: _this.$props.task,
+            editable: _this.$props.editable
+          },
+          agendaSlots: agendaSlots,
+          task: _this.$props.task,
+          editable: _this.$props.editable,
+          onDataaction: _this.handleDataAction,
+          on: _this.v3 ? undefined : {
+            "dataaction": _this.handleDataAction
+          }
+        })];
+      } : [h(AgendaViewBody, {
+        items: _this.items,
+        attrs: _this.v3 ? undefined : {
+          items: _this.items,
+          agendaSlots: agendaSlots,
+          task: _this.$props.task,
+          editable: _this.$props.editable
+        },
+        agendaSlots: agendaSlots,
+        task: _this.$props.task,
+        editable: _this.$props.editable,
+        onDataaction: _this.handleDataAction,
+        on: _this.v3 ? undefined : {
+          "dataaction": _this.handleDataAction
+        }
+      })])])
+    );
+  },
+  methods: {
+    handleDataAction: function handleDataAction(action) {
+      this.$emit('dataaction', action);
+    }
+  }
+};
+
+var GET_START_DATE = function GET_START_DATE(date) {
+  return getDate(date);
+};
+
+var GET_END_DATE = function GET_END_DATE(start, numberOfDays) {
+  return getDate(addDays(start, numberOfDays || 1));
+};
+
+var agendaViewDateRange = function agendaViewDateRange(_a) {
+  var intl = _a.intl,
+      date = _a.date,
+      _b = _a.numberOfDays,
+      numberOfDays = _b === void 0 ? 1 : _b,
+      timezone = _a.timezone;
+  var normalized = ZonedDate.fromLocalDate(date, timezone);
+  var firstDate = numberOfDays === DAYS_IN_WEEK_COUNT ? GET_START_DATE(firstDayInWeek(normalized, intl.firstDay())) : GET_START_DATE(normalized);
+  var lastDate = GET_END_DATE(firstDate, numberOfDays);
+  var zonedStart = ZonedDate.fromUTCDate(toUTCDateTime(firstDate), timezone);
+  var zonedEnd = ZonedDate.fromUTCDate(toUTCDateTime(lastDate), timezone);
+  var start = new Date(zonedStart.getTime());
+  var end = new Date(zonedEnd.getTime());
+  return {
+    start: start,
+    end: end,
+    zonedStart: zonedStart,
+    zonedEnd: zonedEnd
+  };
+};
+/**
+ * @hidden
+ */
+
+
+var AgendaView = AgendaViewVue2;
+export { AgendaView, AgendaViewVue2 };

package/dist/esm/views/agenda/AgendaViewBody.d.ts

@@ -0,0 +1,50 @@
+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;
+};
+/** @hidden */
+export interface AgendaViewBodyProps {
+    items: any[];
+    rangeIndex: number;
+    itemsPerSlot: number;
+    agendaSlots: any[];
+    task: any;
+    editable?: boolean | object;
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewBodyState {
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewBodyComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewBodyMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewBodyData {
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewBodyAll extends Vue2type, AgendaViewBodyMethods, AgendaViewBodyData, AgendaViewBodyComputed, AgendaViewBodyState {
+}
+/**
+ * @hidden
+ */
+declare let AgendaViewBodyVue2: ComponentOptions<AgendaViewBodyAll, DefaultData<AgendaViewBodyData>, DefaultMethods<AgendaViewBodyAll>, AgendaViewBodyComputed, RecordPropsDefinition<AgendaViewBodyProps>>;
+/**
+ * @hidden
+ */
+declare const AgendaViewBody: DefineComponent<AgendaViewBodyProps, any, AgendaViewBodyData, AgendaViewBodyComputed, AgendaViewBodyMethods, {}, {}, {}, string, AgendaViewBodyProps, AgendaViewBodyProps, {}>;
+export { AgendaViewBody, AgendaViewBodyVue2 };

package/dist/esm/views/agenda/AgendaViewBody.js

@@ -0,0 +1,225 @@
+// @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 { SchedulerEditSlot } from '../../slots/SchedulerEditSlot.js';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { SchedulerEditTask } from '../../tasks/SchedulerEditTask.js';
+import { messages, noEvents, allDay } from '../../messages.js';
+var DAY_FORMAT = {
+  skeleton: 'dd'
+};
+/**
+ * @hidden
+ */
+
+var AgendaViewBodyVue2 = {
+  name: 'KendoAgendaViewBody',
+  props: {
+    items: Array,
+    rangeIndex: Number,
+    itemsPerSlot: Number,
+    agendaSlots: Array,
+    task: [String, Function, Object],
+    editable: [Object, Boolean]
+  },
+  inject: {
+    ri: {
+      default: null
+    },
+    ks: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    this.intl = provideIntlService(this);
+    var EditSlot = this.$props.editSlot || SchedulerEditSlot;
+    var EditTask = this.$props.editTask || SchedulerEditTask;
+    var localization = provideLocalizationService(this);
+    return h("div", {
+      "class": "k-scheduler-body"
+    }, [(this.items.length || true) && this.agendaSlots.filter(function (slot) {
+      return slot.group.index === (_this.ri.groupIndex || 0);
+    }).map(function (slot, slotIndex, filtered) {
+      var _this2 = this;
+
+      return h("div", {
+        "class": "k-scheduler-row  k-scheduler-content",
+        key: "".concat(this.ri.groupIndex, ":").concat(slotIndex)
+      }, [// @ts-ignore  function children
+      h(EditSlot, {
+        index: slot.index,
+        attrs: this.v3 ? undefined : {
+          index: slot.index,
+          start: slot.start,
+          end: slot.end,
+          zonedStart: slot.zonedStart,
+          zonedEnd: slot.zonedEnd,
+          items: slot.items,
+          group: slot.group,
+          range: slot.range,
+          isAllDay: slot.isAllDay,
+          editable: this.$props.editable,
+          row: filtered.length * (this.ri.groupIndex || 0) + slotIndex,
+          col: 0,
+          viewSlot: this.$props.viewSlot
+        },
+        start: slot.start,
+        end: slot.end,
+        zonedStart: slot.zonedStart,
+        zonedEnd: slot.zonedEnd,
+        items: slot.items,
+        group: slot.group,
+        range: slot.range,
+        isAllDay: slot.isAllDay,
+        editable: this.$props.editable,
+        row: filtered.length * (this.ri.groupIndex || 0) + slotIndex,
+        col: 0,
+        viewSlot: this.$props.viewSlot,
+        onDataaction: this.handleDataAction,
+        on: this.v3 ? undefined : {
+          "dataaction": this.handleDataAction
+        },
+        "class": "k-scheduler-datecolumn k-group-cell"
+      }, this.v3 ? function () {
+        return [h("div", [h("strong", {
+          "class": "k-scheduler-agendaday"
+        }, [_this2.intl.formatDate(slot.zonedStart, 'dd')]), h("em", {
+          "class": "k-scheduler-agendaweek"
+        }, [_this2.intl.formatDate(slot.zonedStart, 'EEEE')]), h("span", {
+          "class": "k-scheduler-agendadate"
+        }, [_this2.intl.formatDate(slot.zonedStart, 'y')])])];
+      } : [h("div", [h("strong", {
+        "class": "k-scheduler-agendaday"
+      }, [_this2.intl.formatDate(slot.zonedStart, 'dd')]), h("em", {
+        "class": "k-scheduler-agendaweek"
+      }, [_this2.intl.formatDate(slot.zonedStart, 'EEEE')]), h("span", {
+        "class": "k-scheduler-agendadate"
+      }, [_this2.intl.formatDate(slot.zonedStart, 'y')])])]), h("div", {
+        "class": "k-scheduler-cell k-group-content"
+      }, [slot.items.length ? slot.items.map(function (item, itemIndex) {
+        return h("div", {
+          "class": "k-scheduler-row",
+          key: itemIndex
+        }, [h("div", {
+          "class": "k-scheduler-cell k-scheduler-timecolumn"
+        }, [h("div", [item.tail && h("span", {
+          "class": "k-icon k-i-arrow-60-left"
+        }), item.isAllDay ? localization.toLanguageString(allDay, messages[allDay]) : getTimeFormat(this.intl, item), item.head && h("span", {
+          "class": "k-icon k-i-arrow-60-right"
+        })])]), h("div", {
+          "class": "k-scheduler-cell"
+        }, [h(EditTask, {
+          key: "".concat(slotIndex, ":").concat(itemIndex),
+          uid: item.uid,
+          attrs: this.v3 ? undefined : {
+            uid: item.uid,
+            start: item.start,
+            end: item.end,
+            originalStart: item.originalStart,
+            startTimezone: item.startTimezone,
+            endTimezone: item.endTimezone,
+            isAllDay: item.isAllDay,
+            title: item.title,
+            description: item.description,
+            occurrenceId: item.occurrenceId,
+            recurrenceExceptions: item.recurrenceExceptions,
+            recurrenceRule: item.recurrenceRule,
+            recurrenceId: item.recurrenceId,
+            dataItem: item.dataItem,
+            itemRef: item.itemRef,
+            head: item.head,
+            tail: item.tail,
+            order: item.order,
+            zonedStart: item.zonedStart,
+            zonedEnd: item.zonedEnd,
+            slots: item.slots,
+            group: item.group,
+            range: item.range,
+            isException: item.isException,
+            isRecurring: item.isRecurring,
+            task: this.$props.task,
+            viewTask: this.$props.viewTask,
+            editable: this.$props.editable
+          },
+          start: item.start,
+          end: item.end,
+          originalStart: item.originalStart,
+          startTimezone: item.startTimezone,
+          endTimezone: item.endTimezone,
+          isAllDay: item.isAllDay,
+          title: item.title,
+          description: item.description,
+          occurrenceId: item.occurrenceId,
+          recurrenceExceptions: item.recurrenceExceptions,
+          recurrenceRule: item.recurrenceRule,
+          recurrenceId: item.recurrenceId,
+          dataItem: item.dataItem,
+          itemRef: item.itemRef,
+          head: item.head,
+          tail: item.tail,
+          order: item.order,
+          zonedStart: item.zonedStart,
+          zonedEnd: item.zonedEnd,
+          slots: item.slots,
+          group: item.group,
+          range: item.range,
+          isException: item.isException,
+          isRecurring: item.isRecurring,
+          onDataaction: this.handleDataAction,
+          on: this.v3 ? undefined : {
+            "dataaction": this.handleDataAction
+          },
+          task: this.$props.task,
+          viewTask: this.$props.viewTask,
+          editable: this.$props.editable
+        })])]);
+      }, this) : h("div", {
+        "class": "k-scheduler-cell k-heading-cell k-group-cell"
+      }, [localization.toLanguageString(noEvents, messages[noEvents])])])]);
+    }, this)]);
+  },
+  methods: {
+    handleDataAction: function handleDataAction(action) {
+      this.$emit('dataaction', action);
+    }
+  }
+};
+
+var getTimeFormat = function getTimeFormat(intl, props) {
+  var format = '{0:t}-{1:t}';
+
+  if (props.head) {
+    format = '{0:t}';
+  } else if (props.tail) {
+    format = '{1:t}';
+  }
+
+  return intl.format(format, props.zonedStart, props.zonedEnd);
+};
+/**
+ * @hidden
+ */
+
+
+var AgendaViewBody = AgendaViewBodyVue2;
+export { AgendaViewBody, AgendaViewBodyVue2 };

package/dist/esm/views/agenda/AgendaViewHead.d.ts

@@ -0,0 +1,46 @@
+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;
+};
+/** @hidden */
+export interface AgendaViewHeadProps {
+    monthSlots: any[];
+    dateHeaderCell: any;
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewHeadState {
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewHeadComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewHeadMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewHeadData {
+}
+/**
+ * @hidden
+ */
+export interface AgendaViewHeadAll extends Vue2type, AgendaViewHeadMethods, AgendaViewHeadData, AgendaViewHeadComputed, AgendaViewHeadState {
+}
+/**
+ * @hidden
+ */
+declare let AgendaViewHeadVue2: ComponentOptions<AgendaViewHeadAll, DefaultData<AgendaViewHeadData>, DefaultMethods<AgendaViewHeadAll>, AgendaViewHeadComputed, RecordPropsDefinition<AgendaViewHeadProps>>;
+/**
+ * @hidden
+ */
+declare const AgendaViewHead: DefineComponent<AgendaViewHeadProps, any, AgendaViewHeadData, AgendaViewHeadComputed, AgendaViewHeadMethods, {}, {}, {}, string, AgendaViewHeadProps, AgendaViewHeadProps, {}>;
+export { AgendaViewHead, AgendaViewHeadVue2 };