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

package/dist/esm/items/SchedulerViewItem.js

@@ -0,0 +1,596 @@
+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 { SchedulerItem } from './SchedulerItem.js';
+import { intersects, first, calculateOrder } from '../utils.js';
+import { getRect, setRect } from '../views/common/utils.js';
+import { BORDER_WIDTH } from '../constants.js';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { SchedulerItemContent } from './SchedulerItemContent.js';
+import { getDefaultSlots, getTemplate } from '@progress/kendo-vue-common';
+/** @hidden */
+
+var ITEMS_SPACING = 1;
+/**
+ * @hidden
+ */
+
+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,
+    showOccurrenceDialog: {
+      type: Boolean,
+      default: undefined
+    },
+    showRemoveDialog: {
+      type: Boolean,
+      default: undefined
+    },
+    formItem: Object,
+    dragItem: Object,
+    resizeItem: Object,
+    removeItem: Object
+  },
+  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 "(".concat(this.itemTime, "): ").concat(this.$props.title);
+    }
+  },
+  data: function data() {
+    return {
+      timeout: undefined,
+      currentItem: null,
+      viewItem: null,
+      display: true,
+      visible: false,
+      maxSiblingsPerSlot: 0
+    };
+  },
+  mounted: function mounted() {
+    this.element = this.getElement();
+
+    if (!this.ks.scheduler || !this.ks.scheduler.$el) {
+      return;
+    }
+
+    this.observer = new window.ResizeObserver(this.handleResize);
+    this.observer.observe(this.ks.scheduler.$el);
+  },
+  updated: function updated() {
+    var that = this;
+    this.$nextTick(function () {
+      that.align();
+      that.position();
+    });
+
+    if (!this.ks.scheduler || !this.ks.scheduler.$el || this.observer) {
+      return;
+    }
+
+    this.observer = new window.ResizeObserver(this.handleResize);
+    this.observer.observe(this.ks.scheduler.$el);
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this); // tslint:enable:max-line-length
+
+    this.intl = provideIntlService(this);
+    var itemRender;
+    var itemRenderDefaultRendering = // @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,
+        itemTitle: this.itemTitle,
+        showOccurrenceDialog: this.showOccurrenceDialog,
+        showRemoveDialog: this.showRemoveDialog,
+        formItem: this.formItem,
+        dragItem: this.dragItem,
+        resizeItem: this.resizeItem,
+        removeItem: this.removeItem,
+        maxSiblingsPerSlot: this.maxSiblingsPerSlot
+      },
+      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,
+      itemTitle: this.itemTitle,
+      showOccurrenceDialog: this.showOccurrenceDialog,
+      showRemoveDialog: this.showRemoveDialog,
+      formItem: this.formItem,
+      dragItem: this.dragItem,
+      resizeItem: this.resizeItem,
+      removeItem: this.removeItem,
+      maxSiblingsPerSlot: this.maxSiblingsPerSlot,
+      style: __assign({
+        visibility: this.visible ? undefined : 'hidden',
+        display: this.display ? undefined : 'none'
+      }, this.$props.itemStyle) // Keyboard
+      ,
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "keyup": this.handleKeyUp,
+        "focus": this.handleFocus,
+        "mouseup": this.handleMouseUp,
+        "mousedown": this.handleMouseDown,
+        "click": this.handleClick,
+        "doubleclick": this.handleDoubleClick,
+        "removeclick": this.handleRemoveClick,
+        "press": this.handlePress,
+        "drag": this.handleDrag,
+        "release": this.handleRelease,
+        "resizepress": this.handleResizePress,
+        "resizeenddrag": this.handleResizeEndDrag,
+        "resizestartdrag": this.handleResizeStartDrag,
+        "resizerelease": this.handleResizeRelease
+      },
+      onKeyup: this.handleKeyUp // Focus
+      ,
+      onFocus: this.handleFocus // Mouse
+      ,
+      onMouseup: this.handleMouseUp,
+      onMousedown: this.handleMouseDown,
+      onClick: this.handleClick,
+      onDoubleclick: this.handleDoubleClick,
+      onRemoveclick: this.handleRemoveClick // Drag
+      ,
+      onPress: this.handlePress,
+      onDrag: this.handleDrag,
+      onRelease: this.handleRelease // Resize
+      ,
+      onResizepress: this.handleResizePress,
+      onResizeenddrag: this.handleResizeEndDrag,
+      onResizestartdrag: this.handleResizeStartDrag,
+      onResizerelease: this.handleResizeRelease
+    }, this.v3 ? function () {
+      return [!_this2.$props.resizeHint && h("div", {
+        title: _this2.itemTitle,
+        attrs: _this2.v3 ? undefined : {
+          title: _this2.itemTitle
+        }
+      }, [!_this2.$props.isAllDay && // @ts-ignore  function children
+      h(SchedulerItemContent, {
+        title: _this2.itemTitle,
+        attrs: _this2.v3 ? undefined : {
+          title: _this2.itemTitle
+        },
+        "class": "k-event-template k-event-time "
+      }, _this2.v3 ? function () {
+        return [defaultSlot];
+      } : [defaultSlot]), // @ts-ignore  function children
+      h(SchedulerItemContent, {
+        title: _this2.$props.title,
+        attrs: _this2.v3 ? undefined : {
+          title: _this2.$props.title
+        },
+        "class": "k-event-template"
+      }, _this2.v3 ? function () {
+        return [defaultSlot];
+      } : [defaultSlot])])];
+    } : [!_this2.$props.resizeHint && h("div", {
+      title: _this2.itemTitle,
+      attrs: _this2.v3 ? undefined : {
+        title: _this2.itemTitle
+      }
+    }, [!_this2.$props.isAllDay && h(SchedulerItemContent, {
+      title: _this2.itemTitle,
+      attrs: _this2.v3 ? undefined : {
+        title: _this2.itemTitle
+      },
+      "class": "k-event-template k-event-time "
+    }, _this2.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot]), h(SchedulerItemContent, {
+      title: _this2.$props.title,
+      attrs: _this2.v3 ? undefined : {
+        title: _this2.$props.title
+      },
+      "class": "k-event-template"
+    }, _this2.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot])])]);
+    itemRender = getTemplate.call(this, {
+      h: h,
+      template: this.$props.item,
+      defaultRendering: itemRenderDefaultRendering,
+      defaultSlots: defaultSlot,
+      additionalListeners: {
+        //   keydown: this.handleKeyDown,
+        // keyup: this.handleKeyUp,
+        // Focus
+        //  focus: this.handleFocus,
+        // Mouse
+        // mouseup: this.handleMouseUp,
+        // mousedown: this.handleMouseDown,
+        //  click: this.handleClick,      
+        doubleclick: this.handleDoubleClick,
+        removeclick: this.handleRemoveClick,
+        // Drag
+        press: this.handlePress,
+        drag: this.handleDrag,
+        release: this.handleRelease,
+        // Resize
+        resizepress: this.handleResizePress,
+        resizeenddrag: this.handleResizeEndDrag,
+        resizestartdrag: this.handleResizeStartDrag,
+        resizerelease: this.handleResizeRelease
+      }
+    });
+    return itemRender;
+  },
+  methods: {
+    getElement: function getElement() {
+      return this.$el.nodeType === 8 ? this.$el.parentElement : this.$el.nodeType === 3 ? this.$el.nextElementSibling : this.$el;
+    },
+    // Focus Handlers
+    handleFocus: function handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    // Mouse Handlers
+    handleMouseDown: function handleMouseDown(e) {
+      this.$emit('mousedown', e);
+    },
+    handleClick: function handleClick(e) {
+      this.$emit('click', e);
+    },
+    handleMouseUp: function handleMouseUp(e) {
+      this.$emit('mouseup', e);
+    },
+    handleMouseOver: function handleMouseOver(e) {
+      this.$emit('mouseover', e);
+    },
+    handleMouseOut: function handleMouseOut(e) {
+      this.$emit('mouseout', e);
+    },
+    handleMouseEnter: function handleMouseEnter(e) {
+      this.$emit('mouseenter', e);
+    },
+    handleMouseLeave: function handleMouseLeave(e) {
+      this.$emit('mouseleave', e);
+    },
+    handleDoubleClick: function handleDoubleClick(e) {
+      this.$emit('doubleclick', e);
+    },
+    handleRemoveClick: function handleRemoveClick(e) {
+      this.$emit('removeclick', e);
+    },
+    // Keyboard Handlers
+    handleKeyDown: function handleKeyDown(e) {
+      this.$emit('keydown', e);
+    },
+    handleKeyPress: function handleKeyPress(e) {
+      this.$emit('keypress', e);
+    },
+    handleKeyUp: function handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
+    // Drag Handlers
+    handlePress: function handlePress(e) {
+      this.$emit('press', e);
+    },
+    handleDrag: function handleDrag(e) {
+      this.$emit('drag', e);
+    },
+    handleRelease: function handleRelease(e) {
+      this.$emit('release', e);
+    },
+    handleResizePress: function handleResizePress(e) {
+      this.$emit('resizepress', e);
+    },
+    handleResizeStartDrag: function handleResizeStartDrag(e) {
+      this.$emit('resizestartdrag', e);
+    },
+    handleResizeEndDrag: function handleResizeEndDrag(e) {
+      this.$emit('resizeenddrag', e);
+    },
+    handleResizeRelease: function handleResizeRelease(e) {
+      this.$emit('resizerelease', e);
+    },
+    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;
+
+      if (!this.element) {
+        return;
+      }
+
+      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.sort(function (a, b) {
+        if (a.$props.start && b.$props.start) {
+          return a.$props.start.getTime() - b.$props.start.getTime();
+        }
+
+        return true;
+      }));
+
+      if (!firstSlot) {
+        return;
+      }
+
+      var rect = getRect(firstSlot.$el);
+      setRect(this.element, rect);
+    },
+    position: function position() {
+      var _this = this;
+
+      if (!this.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(this.element);
+      siblingsPerSlot.forEach(function (slot) {
+        var currentOffset = 0;
+        var currentItem = slot.sort(function (a, b) {
+          return a.$props.order - b.$props.order;
+        });
+        currentItem.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.getElement() !== _this.element) {
+            mostSiblingsInSlot = current.$props.maxSiblingsPerSlot;
+          }
+
+          var currentRect = getRect(current.getElement());
+
+          if (current.$props.order !== null && current.$props.order < order) {
+            currentOffset = (currentRect.top || rect.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(this.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();
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SchedulerViewItem = SchedulerViewItemVue2;
+export { SchedulerViewItem, SchedulerViewItemVue2 };

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

@@ -0,0 +1,34 @@
+import { DataItem } from '../../models';
+import { SchedulerEditItemAll } from '../SchedulerEditItem';
+/**
+ * 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: (this: SchedulerEditItemAll, action: SchedulerItemDragItemAction) => void;