@progress/kendo-vue-scheduler 3.0.7 → 3.0.9-dev.202202280631

package/dist/es/items/SchedulerItemContent.js

@@ -0,0 +1,27 @@
+// @ts-ignore
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h; // tslint:enable:max-line-length
+
+var SchedulerItemContentVue2 = {
+  name: 'KendoSchedulerItemContent',
+  props: {},
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return h("div", {
+      "class": 'k-event-template'
+    }, [defaultSlot]);
+  }
+};
+var SchedulerItemContent = SchedulerItemContentVue2;
+export { SchedulerItemContent, SchedulerItemContentVue2 };

package/dist/es/items/SchedulerViewItem.d.ts

@@ -0,0 +1,58 @@
+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 { SchedulerItemProps } from './SchedulerItem';
+/**
+ * Represents the props of the Kendo UI for Vue [SchedulerViewItem]({% slug api_scheduler_schedulerviewitem %}) component.
+ */
+export interface SchedulerViewItemProps extends SchedulerItemProps {
+    /** @hidden */
+    ignoreIsAllDay?: boolean;
+    /**
+     * Overrides the default component responsible for visualizing a single item.
+     *
+     * The default Component is: [SchedulerItem]({% slug api_scheduler_scheduleritem %}).
+     */
+    item?: any;
+}
+/**
+ * Represents the object which is returned from the `ref` callback of the [SchedulerViewItem]({% slug api_scheduler_schedulerviewitem %}).
+ *
+ * For more information about Refs, refer to the [React Refs & Dom](https://reactjs.org/docs/refs-and-the-dom.html) article.
+ */
+export interface SchedulerViewItemHandle {
+    element: HTMLDivElement | null;
+    props: SchedulerViewItemProps;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewItemState {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewItemData {
+}
+/**
+ * @hidden
+ */
+export interface SchedulerViewItemAll extends Vue2type, SchedulerViewItemMethods, SchedulerViewItemData, SchedulerViewItemComputed, SchedulerViewItemState {
+}
+declare let SchedulerViewItemVue2: ComponentOptions<SchedulerViewItemAll, DefaultData<SchedulerViewItemData>, DefaultMethods<SchedulerViewItemAll>, SchedulerViewItemComputed, RecordPropsDefinition<SchedulerViewItemProps>>;
+declare const SchedulerViewItem: DefineComponent<SchedulerViewItemProps, any, SchedulerViewItemData, SchedulerViewItemComputed, SchedulerViewItemMethods, {}, {}, {}, string, SchedulerViewItemProps, SchedulerViewItemProps, {}>;
+export { SchedulerViewItem, SchedulerViewItemVue2 };

package/dist/es/items/SchedulerViewItem.js

@@ -0,0 +1,411 @@
+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 inject = allVue.inject;
+import { SchedulerItem } from './SchedulerItem';
+import { intersects, first, calculateOrder } from '../utils';
+import { getRect, setRect } from '../views/common/utils';
+import { BORDER_WIDTH } from '../constants';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { SchedulerItemContent } from './SchedulerItemContent';
+var ITEMS_SPACING = 1; // tslint:enable:max-line-length
+
+var SchedulerViewItemVue2 = {
+  name: 'KendoSchedulerViewItem',
+  props: {
+    ignoreIsAllDay: Boolean,
+    item: [String, Function, Object],
+    uid: [String, Number],
+    start: Date,
+    end: Date,
+    originalStart: Date,
+    startTimezone: String,
+    endTimezone: String,
+    isAllDay: Boolean,
+    title: String,
+    description: String,
+    occurrenceId: String,
+    recurrenceExceptions: Array,
+    recurrenceRule: String,
+    recurrenceId: [String, Number],
+    dataItem: Object,
+    head: Boolean,
+    tail: Boolean,
+    order: Number,
+    zonedStart: Object,
+    zonedEnd: Object,
+    slots: Array,
+    group: Object,
+    range: Object,
+    isException: Boolean,
+    isRecurring: Boolean,
+    id: String,
+    tabIndex: Number,
+    className: String,
+    itemStyle: Object,
+    editable: [Object, Boolean],
+    selected: Boolean,
+    vertical: Boolean,
+    dragHint: Boolean,
+    resizeHint: Boolean,
+    format: String,
+    refTo: Function
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    ks: {
+      default: null
+    },
+    bv: {
+      default: null
+    }
+  },
+  computed: {
+    itemTime: function itemTime() {
+      return this.$props.isAllDay ? this.intl.toString(this.$props.zonedStart, 't') : this.intl.format('{0:t} - {1:t}', this.$props.zonedStart, this.$props.zonedEnd);
+    },
+    itemTitle: function itemTitle() {
+      return "(" + this.itemTime + "): " + this.$props.title;
+    }
+  },
+  data: function data() {
+    return {
+      timeout: undefined,
+      currentItem: null,
+      viewItem: null,
+      display: true,
+      visible: false,
+      maxSiblingsPerSlot: 0
+    };
+  },
+  mounted: function mounted() {
+    this.align();
+    this.position();
+
+    if (!this.ks.scheduler) {
+      return;
+    }
+
+    this.observer = new window.ResizeObserver(this.handleResize);
+    this.observer.observe(this.ks.scheduler);
+  },
+  updated: function updated() {
+    this.align();
+    this.position();
+  },
+  destroyed: !!gh ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement; // tslint:enable:max-line-length
+
+    var _a = this.$props,
+        itemProp = _a.item,
+        refTo = _a.refTo,
+        itemRef = _a.itemRef;
+    this.intl = provideIntlService(this);
+    return (// @ts-ignore  function children
+      h(SchedulerItem, {
+        ignoreIsAllDay: this.ignoreIsAllDay,
+        attrs: this.v3 ? undefined : {
+          ignoreIsAllDay: this.ignoreIsAllDay,
+          item: this.item,
+          uid: this.uid,
+          start: this.start,
+          end: this.end,
+          originalStart: this.originalStart,
+          startTimezone: this.startTimezone,
+          endTimezone: this.endTimezone,
+          isAllDay: this.isAllDay,
+          title: this.title,
+          description: this.description,
+          occurrenceId: this.occurrenceId,
+          recurrenceExceptions: this.recurrenceExceptions,
+          recurrenceRule: this.recurrenceRule,
+          recurrenceId: this.recurrenceId,
+          dataItem: this.dataItem,
+          head: this.head,
+          tail: this.tail,
+          order: this.order,
+          zonedStart: this.zonedStart,
+          zonedEnd: this.zonedEnd,
+          slots: this.slots,
+          group: this.group,
+          range: this.range,
+          isException: this.isException,
+          isRecurring: this.isRecurring,
+          id: this.id,
+          tabIndex: this.tabIndex,
+          className: this.className,
+          itemStyle: this.itemStyle,
+          editable: this.editable,
+          selected: this.selected,
+          vertical: this.vertical,
+          dragHint: this.dragHint,
+          resizeHint: this.resizeHint,
+          format: this.format //   {...itemProps}
+          //  refTo={this}
+          ,
+          maxSiblingsPerSlot: this.maxSiblingsPerSlot //  itemRef={item}
+
+        },
+        item: this.item,
+        uid: this.uid,
+        start: this.start,
+        end: this.end,
+        originalStart: this.originalStart,
+        startTimezone: this.startTimezone,
+        endTimezone: this.endTimezone,
+        isAllDay: this.isAllDay,
+        title: this.title,
+        description: this.description,
+        occurrenceId: this.occurrenceId,
+        recurrenceExceptions: this.recurrenceExceptions,
+        recurrenceRule: this.recurrenceRule,
+        recurrenceId: this.recurrenceId,
+        dataItem: this.dataItem,
+        head: this.head,
+        tail: this.tail,
+        order: this.order,
+        zonedStart: this.zonedStart,
+        zonedEnd: this.zonedEnd,
+        slots: this.slots,
+        group: this.group,
+        range: this.range,
+        isException: this.isException,
+        isRecurring: this.isRecurring,
+        id: this.id,
+        tabIndex: this.tabIndex,
+        className: this.className,
+        itemStyle: this.itemStyle,
+        editable: this.editable,
+        selected: this.selected,
+        vertical: this.vertical,
+        dragHint: this.dragHint,
+        resizeHint: this.resizeHint,
+        format: this.format,
+        maxSiblingsPerSlot: this.maxSiblingsPerSlot,
+        style: __assign({
+          visibility: this.visible ? undefined : 'hidden',
+          display: this.display ? undefined : 'none'
+        }, this.$props.style)
+      }, this.v3 ? function () {
+        return [!_this2.$props.resizeHint && h("span", {
+          "class": "k-event-actions"
+        }, [_this2.$props.tail && h("span", {
+          "class": "k-icon k-i-arrow-60-left"
+        }), _this2.$props.isRecurring && !_this2.$props.isException && h("span", {
+          "class": "k-icon k-i-reload"
+        }), !_this2.$props.isRecurring && _this2.$props.isException && h("span", {
+          "class": "k-icon k-i-non-recurrence"
+        })]), !_this2.$props.resizeHint && h("div", {
+          title: _this2.itemTitle,
+          attrs: _this2.v3 ? undefined : {
+            title: _this2.itemTitle
+          }
+        }, [!_this2.$props.isAllDay && // @ts-ignore  function children
+        h(SchedulerItemContent, {
+          "class": "k-event-template k-event-time "
+        }, _this2.v3 ? function () {
+          return [_this2.itemTitle];
+        } : [_this2.itemTitle]), // @ts-ignore  function children
+        h(SchedulerItemContent, {
+          "class": "k-event-template"
+        }, _this2.v3 ? function () {
+          return [_this2.$props.title];
+        } : [_this2.$props.title])])];
+      } : [!_this2.$props.resizeHint && h("span", {
+        "class": "k-event-actions"
+      }, [_this2.$props.tail && h("span", {
+        "class": "k-icon k-i-arrow-60-left"
+      }), _this2.$props.isRecurring && !_this2.$props.isException && h("span", {
+        "class": "k-icon k-i-reload"
+      }), !_this2.$props.isRecurring && _this2.$props.isException && h("span", {
+        "class": "k-icon k-i-non-recurrence"
+      })]), !_this2.$props.resizeHint && h("div", {
+        title: _this2.itemTitle,
+        attrs: _this2.v3 ? undefined : {
+          title: _this2.itemTitle
+        }
+      }, [!_this2.$props.isAllDay && h(SchedulerItemContent, {
+        "class": "k-event-template k-event-time "
+      }, _this2.v3 ? function () {
+        return [_this2.itemTitle];
+      } : [_this2.itemTitle]), h(SchedulerItemContent, {
+        "class": "k-event-template"
+      }, _this2.v3 ? function () {
+        return [_this2.$props.title];
+      } : [_this2.$props.title])])])
+    );
+  },
+  methods: {
+    calculateMostSiblings: function calculateMostSiblings(slots, items) {
+      var _this = this;
+
+      var most = 1;
+      slots.forEach(function (slot) {
+        var itemsInSlot = items.filter(function (i) {
+          return _this.inSlot(slot.$props, i.$props);
+        });
+
+        if (itemsInSlot.length > most) {
+          most = itemsInSlot.length;
+        }
+      });
+      return most;
+    },
+    getSiblingsInAllSlots: function getSiblingsInAllSlots(slots, items) {
+      var _this = this;
+
+      var siblings = slots.map(function (slot) {
+        return items.filter(function (i) {
+          return _this.inSlot(slot.$props, i.$props);
+        });
+      });
+      return siblings;
+    },
+    inSlot: function inSlot(slot, current) {
+      return intersects(slot.start, slot.end, current.start, current.end) && slot.group.index === current.group.index && slot.range.index === current.range.index && (this.$props.ignoreIsAllDay || slot.isAllDay === current.isAllDay);
+    },
+    align: function align() {
+      var _this = this;
+
+      var slots = (this.bv.slots || []).filter(function (slot) {
+        return slot && _this.inSlot(slot.$props, _this.$props);
+      });
+
+      if (slots.length === 0) {
+        this.display = false;
+        return;
+      }
+
+      var firstSlot = first(slots);
+
+      if (!firstSlot) {
+        return;
+      }
+
+      var rect = getRect(firstSlot.$el);
+      setRect(this.$el, rect);
+    },
+    position: function position() {
+      var _this = this;
+
+      var element = this.$el;
+
+      if (!element) {
+        return;
+      }
+
+      var slots = (this.bv.slots || []).filter(function (slot) {
+        return slot && _this.inSlot(slot.$props, _this.$props);
+      });
+      var items = [];
+      var dragItems = [];
+      var resizeItems = [];
+      (this.bv.items || []).forEach(function (i) {
+        if (!i) {
+          return;
+        }
+
+        if (i.$props.dragHint) {
+          dragItems.push(i);
+        } else if (i.$props.resizeHint) {
+          resizeItems.push(i);
+        } else {
+          items.push(i);
+        }
+      });
+      var order = this.$props.dragHint || this.$props.resizeHint ? calculateOrder(this, this.$props.dragHint ? dragItems : resizeItems, slots, this.$props.ignoreIsAllDay) : this.$props.order || 0;
+      var mostSiblingsInSlot = this.$props.dragHint || this.$props.resizeHint ? this.calculateMostSiblings(slots, this.$props.dragHint ? dragItems : resizeItems) : this.calculateMostSiblings(slots, items);
+      var siblingsPerSlot = this.getSiblingsInAllSlots(slots, items);
+      var topOffset = 0;
+      var rect = getRect(element);
+      siblingsPerSlot.forEach(function (slot) {
+        var currentOffset = 0;
+        slot.forEach(function (current) {
+          if (intersects(current.$props.start, current.$props.end, _this.$props.start, _this.$props.end) && !(_this.$props.dragHint || _this.$props.resizeHint) && current.$props.maxSiblingsPerSlot && current.$props.maxSiblingsPerSlot > mostSiblingsInSlot && current.$el !== element) {
+            mostSiblingsInSlot = current.$props.maxSiblingsPerSlot;
+          }
+
+          var currentRect = getRect(current.$el);
+
+          if (current.$props.order !== null && current.$props.order < order) {
+            currentOffset = currentRect.top + currentRect.height - rect.top - BORDER_WIDTH * order + ITEMS_SPACING;
+          }
+        });
+
+        if (currentOffset > topOffset) {
+          topOffset = currentOffset;
+        }
+      });
+
+      if (slots.length === 0) {
+        this.display = false;
+        return;
+      }
+
+      var OFFSET = 20;
+      rect.width = this.$props.vertical ? rect.width / mostSiblingsInSlot - BORDER_WIDTH - OFFSET / mostSiblingsInSlot : rect.width * slots.length - BORDER_WIDTH - OFFSET;
+      rect.height = this.$props.vertical ? rect.height * slots.length - BORDER_WIDTH : (this.$props.resizeHint || this.$props.dragHint) && mostSiblingsInSlot <= 1 ? rect.height : this.$props.itemStyle && this.$props.itemStyle.height ? this.$props.itemStyle.height : 25;
+      rect.left = this.$props.vertical ? rect.left + order * rect.width + BORDER_WIDTH * order : rect.left;
+      rect.top = this.$props.vertical ? rect.top : rect.top + topOffset + BORDER_WIDTH * order;
+      this.maxSiblingsPerSlot = mostSiblingsInSlot;
+      setRect(element, rect);
+      this.visible = true;
+      this.display = true;
+    },
+    handleResize: function handleResize() {
+      var _this = this;
+
+      if (this.timeout !== undefined) {
+        window.cancelAnimationFrame(this.timeout);
+      }
+
+      this.timeout = window.requestAnimationFrame(function () {
+        _this.align();
+
+        _this.position();
+      });
+    }
+  }
+};
+var SchedulerViewItem = SchedulerViewItemVue2;
+export { SchedulerViewItem, SchedulerViewItemVue2 };

package/dist/es/items/hooks/use-drag-item.d.ts

@@ -0,0 +1,38 @@
+import { DataItem } from '../../models';
+/**
+ * Represents the available `action` types for the `SchedulerItemDragItemAction` objects.
+ *
+ * The available types are:
+ * - `DRAG_ITEM_SET'`
+ * - `DRAG_ITEM_START'`
+ * - `DRAG_ITEM_DRAG'`
+ * - `DRAG_ITEM_COMPLETE'`
+ * - `DRAG_ITEM_COMPLETE_OCCURRENCE'`
+ * - `DRAG_ITEM_COMPLETE_SERIES'`
+ * - `DRAG_ITEM_RESET'`
+ * - `DRAG_ITEM_DRAG_SELECTED`
+ */
+export declare enum DRAG_ITEM_ACTION {
+    set = "DRAG_ITEM_SET",
+    start = "DRAG_ITEM_START",
+    drag = "DRAG_ITEM_DRAG",
+    complete = "DRAG_ITEM_COMPLETE",
+    completeOccurrence = "DRAG_ITEM_COMPLETE_OCCURRENCE",
+    completeSeries = "DRAG_ITEM_COMPLETE_SERIES",
+    reset = "DRAG_ITEM_RESET",
+    dragSelected = "DRAG_ITEM_DRAG_SELECTED"
+}
+/**
+ * Represents the object passed to the `drag-item` reducer.
+ */
+export interface SchedulerItemDragItemAction {
+    type: DRAG_ITEM_ACTION;
+    payload?: DataItem;
+}
+/** @hidden */
+export declare const useDragItem: (_config: {
+    dataItem: DataItem;
+    ignoreIsAllDay?: boolean;
+    isAllDay?: boolean;
+    onDataaction?: any;
+}, _state: [DataItem, DataItem, any]) => any[];