@progress/kendo-vue-scheduler 3.8.3 → 3.8.4-dev.202302151223

package/dist/esm/slots/SchedulerSlot.js

@@ -76,6 +76,9 @@ var SchedulerSlotVue2 = {
     formItem: Object
   },
   computed: {
+    cSlot: function cSlot() {
+      return this.ksSlots.cSlots ? this.ksSlots.cSlots[this.index] : {};
+    },
     currentTabIndex: function currentTabIndex() {
       return this.$props.tabIndex !== undefined ? this.$props.tabIndex === null ? undefined : this.$props.tabIndex : this.$props.selected ? 0 : -1;
     },
@@ -111,14 +114,11 @@ var SchedulerSlotVue2 = {
     },
     ksEditFormClose: {
       default: null
+    },
+    ksSlots: {
+      default: {}
     }
   },
-  created: function created() {
-    this.setSlots({
-      type: COLLECTION_ACTION.add,
-      item: this
-    });
-  },
   data: function data() {
     return {
       hasMounted: false
@@ -126,17 +126,8 @@ var SchedulerSlotVue2 = {
   },
   mounted: function mounted() {
     this.hasMounted = true;
-  },
-  destroyed: !!isV3 ? undefined : function () {
     this.setSlots({
-      type: COLLECTION_ACTION.remove,
-      item: this
-    });
-  },
-  // @ts-ignore
-  unmounted: function unmounted() {
-    this.setSlots({
-      type: COLLECTION_ACTION.remove,
+      type: COLLECTION_ACTION.add,
       item: this
     });
   },
@@ -153,6 +144,7 @@ var SchedulerSlotVue2 = {
     this.intl = provideIntlService(this);
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
+      //   key={`${this.cSlot.start.getTime()}:${this.cSlot.group.index}`}
       id: this.$props.id,
       attrs: this.v3 ? undefined : {
         id: this.$props.id,
@@ -161,12 +153,12 @@ var SchedulerSlotVue2 = {
         ,
 
         "data-slot": true,
-        "data-slot-allday": this.$props.isAllDay,
-        "data-slot-start": this.$props.start.getTime(),
-        "data-slot-end": this.$props.end.getTime(),
-        "data-slot-group": this.$props.group.index,
-        "data-slot-range": this.$props.range.index,
-        "data-slot-index": this.$props.index
+        "data-slot-allday": this.cSlot.isAllDay,
+        "data-slot-start": this.cSlot.start.getTime(),
+        "data-slot-end": this.cSlot.end.getTime(),
+        "data-slot-group": this.cSlot.group.index,
+        "data-slot-range": this.cSlot.range.index,
+        "data-slot-index": this.cSlot.index
       },
       style: {
         userSelect: 'none'
@@ -202,15 +194,15 @@ var SchedulerSlotVue2 = {
       onKeypress: this.handleKeyPress,
       onKeyup: this.handleKeyUp,
       "data-slot": true,
-      "data-slot-allday": this.$props.isAllDay,
-      "data-slot-start": this.$props.start.getTime(),
-      "data-slot-end": this.$props.end.getTime(),
-      "data-slot-group": this.$props.group.index,
-      "data-slot-range": this.$props.range.index,
-      "data-slot-index": this.$props.index
+      "data-slot-allday": this.cSlot.isAllDay,
+      "data-slot-start": this.cSlot.start.getTime(),
+      "data-slot-end": this.cSlot.end.getTime(),
+      "data-slot-group": this.cSlot.group.index,
+      "data-slot-range": this.cSlot.range.index,
+      "data-slot-index": this.cSlot.index
     }, [this.navDay && h("span", {
       "class": "k-link k-nav-day"
-    }, [this.intl.formatDate(new Date(this.end.getTime() - (this.end.getTime() - this.start.getTime()) / 2), DAY_FORMAT)]), this.hasMounted && this.itemsPerSlot < this.items.length && h(ShowMoreItemsButton, {
+    }, [this.intl.formatDate(new Date(this.cSlot.end.getTime() - (this.cSlot.end.getTime() - this.cSlot.start.getTime()) / 2), DAY_FORMAT)]), this.hasMounted && this.itemsPerSlot < this.cSlot.items.length && h(ShowMoreItemsButton, {
       onClick: this.handleShowMoreItemsClick,
       on: this.v3 ? undefined : {
         "click": this.handleShowMoreItemsClick
@@ -238,7 +230,7 @@ var SchedulerSlotVue2 = {
       this.$emit('focus', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -247,7 +239,7 @@ var SchedulerSlotVue2 = {
       this.$emit('blur', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -256,7 +248,7 @@ var SchedulerSlotVue2 = {
       var args = {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       };
@@ -267,7 +259,7 @@ var SchedulerSlotVue2 = {
       this.$emit('mouseover', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -276,7 +268,7 @@ var SchedulerSlotVue2 = {
       this.$emit('mouseout', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -285,7 +277,7 @@ var SchedulerSlotVue2 = {
       this.$emit('mouseenter', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -294,7 +286,7 @@ var SchedulerSlotVue2 = {
       this.$emit('mouseleave', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -303,7 +295,7 @@ var SchedulerSlotVue2 = {
       var args = {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       };
@@ -314,7 +306,7 @@ var SchedulerSlotVue2 = {
       this.$emit('keydown', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -323,7 +315,7 @@ var SchedulerSlotVue2 = {
       this.$emit('keypress', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });
@@ -332,7 +324,7 @@ var SchedulerSlotVue2 = {
       this.$emit('keyup', {
         event: event,
         target: {
-          props: __assign({}, this.$props),
+          props: __assign({}, this.cSlot),
           element: this.$el
         }
       });

package/dist/esm/slots/SchedulerViewSlot.js

@@ -63,6 +63,9 @@ var SchedulerViewSlotVue2 = {
     },
     bv: {
       default: null
+    },
+    ksSlots: {
+      default: {}
     }
   },
   data: function data() {
@@ -70,6 +73,11 @@ var SchedulerViewSlotVue2 = {
       timeout: undefined
     };
   },
+  computed: {
+    cSlot: function cSlot() {
+      return this.ksSlots.cSlots ? this.ksSlots.cSlots[this.index] : {};
+    }
+  },
   updated: function updated() {
     var that = this;
     this.$nextTick(function () {

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

@@ -3,6 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { COLLECTION_ACTION } from '../../utils/main.js';
 import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot.js';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
 import { SchedulerEditTask } from '../../tasks/SchedulerEditTask.js';
@@ -34,13 +35,53 @@ var AgendaViewBodyVue2 = {
     },
     kendoLocalizationService: {
       default: null
+    },
+    setSlots: {
+      default: null
     }
   },
+  provide: function provide() {
+    return {
+      ksSlots: this.ksSlots
+    };
+  },
   data: function data() {
+    var _this = this;
     return {
-      hasMounted: false
+      hasMounted: false,
+      ksSlots: {
+        cSlots: this.agendaSlots.filter(function (slot) {
+          return slot.group.index === (_this.ri.groupIndex || 0);
+        })
+      }
     };
   },
+  watch: {
+    currentCellSlots: function currentCellSlots(newValue) {
+      this.ksSlots.cSlots = newValue;
+    }
+  },
+  computed: {
+    currentCellSlots: function currentCellSlots() {
+      var _this = this;
+      return this.agendaSlots.filter(function (slot) {
+        return slot.group.index === (_this.ri.groupIndex || 0);
+      });
+    }
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
   mounted: function mounted() {
     this.hasMounted = true;
   },
@@ -53,7 +94,6 @@ var AgendaViewBodyVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
     var h = gh || createElement;
     this.intl = provideIntlService(this);
     var EditSlot = this.$props.editSlot || SchedulerEditSlot;
@@ -61,9 +101,7 @@ var AgendaViewBodyVue2 = {
     var localization = provideLocalizationService(this);
     return h("div", {
       "class": "k-scheduler-body"
-    }, [this.items.length && this.agendaSlots.filter(function (slot) {
-      return slot.group.index === (_this.ri.groupIndex || 0);
-    }).map(function (slot, slotIndex, filtered) {
+    }, [this.currentCellSlots.map(function (slot, slotIndex, filtered) {
       var _this2 = this;
       return h("div", {
         "class": "k-scheduler-row  k-scheduler-content",
@@ -71,30 +109,14 @@ var AgendaViewBodyVue2 = {
       }, [
       // @ts-ignore  function children
       h(EditSlot, {
-        index: slot.index,
+        index: slotIndex,
         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,
+          index: slotIndex,
           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,

package/dist/esm/views/day/DayViewAllDaySlots.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
+import { COLLECTION_ACTION } from '../../utils/main.js';
 import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot.js';
 /** @hidden */
 var DayViewAllDaySlotsVue2 = {
@@ -27,8 +28,50 @@ var DayViewAllDaySlotsVue2 = {
     },
     ks: {
       default: null
+    },
+    setSlots: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    return {
+      ksSlots: this.ksSlots
+    };
+  },
+  data: function data() {
+    var daySlots = this.daySlots;
+    var groupIndex = this.groupIndex !== undefined ? this.groupIndex : this.ri.groupIndex;
+    return {
+      ksSlots: {
+        cSlots: this.calculateRanges(daySlots, groupIndex, this.dayRanges)
+      }
+    };
+  },
+  watch: {
+    currentCellSlots: function currentCellSlots(newValue) {
+      this.ksSlots.cSlots = newValue;
+    }
+  },
+  computed: {
+    currentCellSlots: function currentCellSlots() {
+      var daySlots = this.daySlots;
+      var groupIndex = this.groupIndex !== undefined ? this.groupIndex : this.ri.groupIndex;
+      return this.calculateRanges(daySlots, groupIndex, this.dayRanges);
     }
   },
+  destroyed: !!isV3 ? undefined : function () {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -47,59 +90,47 @@ var DayViewAllDaySlotsVue2 = {
     return h("div", {
       key: groupIndex,
       "class": "k-scheduler-row"
-    }, [this.dayRanges.map(function (_, rangeIndex) {
-      return this.daySlots.filter(function (s) {
-        return s.group.index === groupIndex && s.range.index === rangeIndex;
-      }).map(function (slot, slotIndex, filtered) {
-        return h(SchedulerEditSlot, {
-          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,
-            form: this.$props.form,
-            slotRender: this.$props.slotRender,
-            viewSlot: this.$props.viewSlot,
-            row: 0,
-            col: this.ks.orientation === 'horizontal' ? filtered.length * (groupIndex || 0) + slotIndex : slotIndex,
-            isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart),
-            expandable: true,
-            editable: this.$props.editable
-          },
-          start: slot.start,
-          end: slot.end,
-          zonedStart: slot.zonedStart,
-          zonedEnd: slot.zonedEnd,
-          items: slot.items,
-          group: slot.group,
-          range: slot.range,
-          isAllDay: slot.isAllDay,
-          onDataaction: this.handleDataAction,
-          on: this.v3 ? undefined : {
-            "dataaction": this.handleDataAction
-          },
+    }, [this.currentCellSlots.map(function (slot, slotIndex, filtered) {
+      return h(SchedulerEditSlot, {
+        index: slotIndex,
+        attrs: this.v3 ? undefined : {
+          index: slotIndex,
           form: this.$props.form,
           slotRender: this.$props.slotRender,
-          viewSlot: this.$props.viewSlot,
-          key: "".concat(slot.start.getTime(), ":").concat(slot.group.index),
+          viewSlot: this.$props.viewSlot
+          //      key={`${slot.start.getTime()}:${slot.group.index}`}
+          ,
           row: 0,
           col: this.ks.orientation === 'horizontal' ? filtered.length * (groupIndex || 0) + slotIndex : slotIndex,
           isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart),
           expandable: true,
           editable: this.$props.editable
-        });
-      }, this);
+        },
+        onDataaction: this.handleDataAction,
+        on: this.v3 ? undefined : {
+          "dataaction": this.handleDataAction
+        },
+        form: this.$props.form,
+        slotRender: this.$props.slotRender,
+        viewSlot: this.$props.viewSlot,
+        row: 0,
+        col: this.ks.orientation === 'horizontal' ? filtered.length * (groupIndex || 0) + slotIndex : slotIndex,
+        isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart),
+        expandable: true,
+        editable: this.$props.editable
+      });
     }, this)]);
   },
   methods: {
     handleDataAction: function handleDataAction(action) {
       this.$emit('dataaction', action);
+    },
+    calculateRanges: function calculateRanges(daySlots, groupIndex, dayRanges) {
+      return dayRanges.map(function (_, rangeIndex) {
+        return daySlots.filter(function (s) {
+          return s.group.index === groupIndex && s.range.index === rangeIndex;
+        });
+      }).flat();
     }
   }
 };

package/dist/esm/views/day/DayViewMiddleRow.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
+import { COLLECTION_ACTION } from '../../utils/main.js';
 import { classNames } from '@progress/kendo-vue-common';
 import { GRID_OFFSET } from './MultiDayView.js';
 import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot.js';
@@ -34,8 +35,52 @@ var DayViewMiddleRowVue2 = {
   inject: {
     ri: {
       default: null
+    },
+    setSlots: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    return {
+      ksSlots: this.ksSlots
+    };
+  },
+  data: function data() {
+    var timeSlots = this.timeSlots;
+    var groupIndex = this.ri.groupIndex;
+    var root = this.root;
+    return {
+      ksSlots: {
+        cSlots: this.calculateRanges(timeSlots, groupIndex, this.timeRanges, root)
+      }
+    };
+  },
+  watch: {
+    currentCellSlots: function currentCellSlots(newValue) {
+      this.ksSlots.cSlots = newValue;
+    }
+  },
+  computed: {
+    currentCellSlots: function currentCellSlots() {
+      var timeSlots = this.timeSlots;
+      var groupIndex = this.ri.groupIndex;
+      var root = this.root;
+      return this.calculateRanges(timeSlots, groupIndex, this.timeRanges, root);
     }
   },
+  destroyed: !!isV3 ? undefined : function () {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.setSlots({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -53,60 +98,45 @@ var DayViewMiddleRowVue2 = {
       "class": classNames('k-scheduler-row', {
         'k-middle-row': !((this.rootIndex + 1) % this.slotDivisions === 0)
       })
-    }, [this.timeRanges.map(function (_range, rangeIndex) {
-      var _this = this;
-      return this.timeSlots.filter(function (s) {
-        return s.index === _this.root.index && s.range.index === rangeIndex && s.group.index === _this.ri.groupIndex;
-      }).map(function (slot) {
-        return h(EditSlot, {
-          key: "".concat(slot.start.getTime(), ":").concat(slot.group.index),
-          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,
-            slotRender: this.$props.slotRender,
-            viewSlot: this.$props.viewSlot,
-            form: this.$props.form,
-            row: this.rootIndex + GRID_OFFSET,
-            col: this.timeRanges.length * (this.ri.groupIndex || 0) + rangeIndex,
-            isWorkHour: isInTimeRange(slot.zonedStart, that.workDayStart, that.workDayEnd),
-            isWorkDay: 0 <= slot.zonedStart.getDay() + (that.numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (that.numberOfDays - workWeekStart)) % that.numberOfDays <= that.workWeekEnd + (that.numberOfDays - workWeekStart),
-            editable: that.$props.editable
-          },
-          start: slot.start,
-          end: slot.end,
-          zonedStart: slot.zonedStart,
-          zonedEnd: slot.zonedEnd,
-          items: slot.items,
-          group: slot.group,
-          range: slot.range,
-          isAllDay: slot.isAllDay,
-          onDataaction: this.handleDataAction,
-          on: this.v3 ? undefined : {
-            "dataaction": this.handleDataAction
-          },
+    }, [this.currentCellSlots.map(function (slot, slotIndex) {
+      return h(EditSlot, {
+        index: slotIndex,
+        attrs: this.v3 ? undefined : {
+          index: slotIndex,
           slotRender: this.$props.slotRender,
           viewSlot: this.$props.viewSlot,
           form: this.$props.form,
           row: this.rootIndex + GRID_OFFSET,
-          col: this.timeRanges.length * (this.ri.groupIndex || 0) + rangeIndex,
+          col: this.timeRanges.length * (this.ri.groupIndex || 0) + slot.range.index,
           isWorkHour: isInTimeRange(slot.zonedStart, that.workDayStart, that.workDayEnd),
           isWorkDay: 0 <= slot.zonedStart.getDay() + (that.numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (that.numberOfDays - workWeekStart)) % that.numberOfDays <= that.workWeekEnd + (that.numberOfDays - workWeekStart),
           editable: that.$props.editable
-        });
-      }, that);
-    }, this)]);
+        },
+        onDataaction: this.handleDataAction,
+        on: this.v3 ? undefined : {
+          "dataaction": this.handleDataAction
+        },
+        slotRender: this.$props.slotRender,
+        viewSlot: this.$props.viewSlot,
+        form: this.$props.form,
+        row: this.rootIndex + GRID_OFFSET,
+        col: this.timeRanges.length * (this.ri.groupIndex || 0) + slot.range.index,
+        isWorkHour: isInTimeRange(slot.zonedStart, that.workDayStart, that.workDayEnd),
+        isWorkDay: 0 <= slot.zonedStart.getDay() + (that.numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (that.numberOfDays - workWeekStart)) % that.numberOfDays <= that.workWeekEnd + (that.numberOfDays - workWeekStart),
+        editable: that.$props.editable
+      });
+    }, that)]);
   },
   methods: {
     handleDataAction: function handleDataAction(action) {
       this.$emit('dataaction', action);
+    },
+    calculateRanges: function calculateRanges(timeSlots, groupIndex, timeRanges, root) {
+      return timeRanges.map(function (_range, rangeIndex) {
+        return timeSlots.filter(function (s) {
+          return s.index === root.index && s.range.index === rangeIndex && s.group.index === groupIndex;
+        });
+      }).flat();
     }
   }
 };