@progress/kendo-vue-scheduler 3.0.9-dev.202202281506 → 3.0.9-dev.202203011321

package/dist/es/views/time/TimelineView.js

@@ -3,7 +3,8 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
-import { MultiDayTimelineView } from './MultiDayTimelineView'; // tslint:enable:max-line-length
+import { MultiDayTimelineView } from './MultiDayTimelineView';
+import { Day } from '@progress/kendo-date-math'; // tslint:enable:max-line-length
 
 var TimelineViewVue2 = {
   name: 'KendoTimelineView',
@@ -23,9 +24,13 @@ var TimelineViewVue2 = {
     dateRange: {
       type: [Function, Object],
       default: function _default() {
-        return MultiDayTimelineView.props.dateRange.default;
+        return MultiDayTimelineView.props.dateRange.default();
       }
     },
+    showWorkHours: {
+      type: Boolean,
+      default: true
+    },
     selectedDateFormat: {
       type: String,
       default: '{0:D}'
@@ -50,14 +55,22 @@ var TimelineViewVue2 = {
       type: String,
       default: '00:00'
     },
-    isWorkDayStart: {
+    workDayStart: {
       type: String,
       default: '8:00'
     },
-    isWorkDayEnd: {
+    workDayEnd: {
       type: String,
       default: '17:00'
     },
+    workWeekStart: {
+      type: Number,
+      default: Day.Monday
+    },
+    workWeekEnd: {
+      type: Number,
+      default: Day.Friday
+    },
     slotDivisions: {
       type: Number,
       default: 2
@@ -97,7 +110,16 @@ var TimelineViewVue2 = {
         slotDivisions: this.$props.slotDivisions,
         selectedDateFormat: this.$props.selectedDateFormat,
         selectedShortDateFormat: this.$props.selectedShortDateFormat,
-        showWorkHours: this.$props.showWorkHours
+        showWorkHours: this.$props.showWorkHours,
+        columnWidth: this.$props.columnWidth,
+        title: this.$props.title,
+        currentTimeMarker: this.$props.currentTimeMarker,
+        startTime: this.$props.startTime,
+        endTime: this.$props.endTime,
+        workDayStart: this.$props.workDayStart,
+        workDayEnd: this.$props.workDayEnd,
+        workWeekStart: this.$props.workWeekStart,
+        workWeekEnd: this.$props.workWeekEnd
       },
       dateRange: this.$props.dateRange,
       step: this.$props.step,
@@ -106,7 +128,16 @@ var TimelineViewVue2 = {
       slotDivisions: this.$props.slotDivisions,
       selectedDateFormat: this.$props.selectedDateFormat,
       selectedShortDateFormat: this.$props.selectedShortDateFormat,
-      showWorkHours: this.$props.showWorkHours
+      showWorkHours: this.$props.showWorkHours,
+      columnWidth: this.$props.columnWidth,
+      title: this.$props.title,
+      currentTimeMarker: this.$props.currentTimeMarker,
+      startTime: this.$props.startTime,
+      endTime: this.$props.endTime,
+      workDayStart: this.$props.workDayStart,
+      workDayEnd: this.$props.workDayEnd,
+      workWeekStart: this.$props.workWeekStart,
+      workWeekEnd: this.$props.workWeekEnd
     });
   }
 };

package/dist/npm/Scheduler.js

@@ -198,10 +198,7 @@ var SchedulerVue2 = {
   },
   watch: {
     view: function view(newName) {
-      this.ks.activeViewName = newName;
-      this.ks.view = this.views.find(function (currentView) {
-        return currentView.name === newName;
-      }) || this.views[0] || h(DayView_1.DayView);
+      this.updatePassedState(newName);
     }
   },
   // @ts-ignore
@@ -234,6 +231,7 @@ var SchedulerVue2 = {
     var viewComponent = this.getViewComponentByName(this.ks.activeViewName || view.name);
 
     var viewProps = __assign(__assign(__assign({}, this.$props), this.ks.view), {
+      showWorkHours: this.ks.showWorkHours,
       dataItems: undefined,
       views: undefined,
       defaultDate: undefined,
@@ -1109,20 +1107,7 @@ var SchedulerVue2 = {
       }
     },
     handleActiveViewNameChange: function handleActiveViewNameChange(newView, event) {
-      this.ks.activeViewName = newView;
-      this.ks.view = this.views.find(function (currentView) {
-        return currentView.name === newView;
-      }) || this.views[0] || h(DayView_1.DayView);
-      this.ks.dateFormat = this.getViewPropValue(this.ks.view, 'selectedDateFormat', newView) || DEFAULT_DATE_FORMAT;
-      this.ks.shortDateFormat = this.getViewPropValue(this.ks.view, 'selectedShortDateFormat', newView) || DEFAULT_SHORT_DATE_FORMAT;
-      this.ks.dateRange = this.getViewComponentByName(newView).props.dateRange.default()({
-        intl: this.intl,
-        date: this.ks.currentDate,
-        timezone: this.$props.timezone,
-        numberOfDays: this.getViewPropValue(this.ks.view, 'numberOfDays', this.ks.activeViewName),
-        workWeekStart: this.getViewPropValue(this.ks.view, 'workWeekStart', this.ks.activeViewName) || this.intl.firstDay(),
-        workWeekEnd: this.getViewPropValue(this.ks.view, 'workWeekEnd', this.ks.activeViewName) || (this.intl.firstDay() + this.getViewPropValue(this.ks.view, 'numberOfDays', this.ks.activeViewName)) % 6
-      });
+      this.updatePassedState(newView);
       this.$emit('viewchange', __assign(__assign({
         viewName: newView
       }, event), {
@@ -1178,7 +1163,21 @@ var SchedulerVue2 = {
     },
     setDate: function setDate(newDate, event) {
       this.ks.currentDate = newDate;
-      this.ks.dateRange = this.getViewComponentByName(this.ks.activeViewName).props.dateRange.default()({
+      this.updatePassedState();
+      this.$emit('datechange', {
+        date: newDate,
+        event: event
+      });
+    },
+    updatePassedState: function updatePassedState(newViewName) {
+      var newView = newViewName || this.ks.activeViewName;
+      this.ks.activeViewName = newView;
+      this.ks.view = this.views.find(function (currentView) {
+        return currentView.name === newView;
+      }) || this.views[0] || h(DayView_1.DayView);
+      this.ks.dateFormat = this.getViewPropValue(this.ks.view, 'selectedDateFormat', newView) || DEFAULT_DATE_FORMAT;
+      this.ks.shortDateFormat = this.getViewPropValue(this.ks.view, 'selectedShortDateFormat', newView) || DEFAULT_SHORT_DATE_FORMAT;
+      this.ks.dateRange = this.getViewComponentByName(newView).props.dateRange.default()({
         intl: this.intl,
         date: this.ks.currentDate,
         timezone: this.$props.timezone,
@@ -1186,10 +1185,6 @@ var SchedulerVue2 = {
         workWeekStart: this.getViewPropValue(this.ks.view, 'workWeekStart', this.ks.activeViewName) || this.intl.firstDay(),
         workWeekEnd: this.getViewPropValue(this.ks.view, 'workWeekEnd', this.ks.activeViewName) || (this.intl.firstDay() + this.getViewPropValue(this.ks.view, 'numberOfDays', this.ks.activeViewName)) % 6
       });
-      this.$emit('datechange', {
-        date: newDate,
-        event: event
-      });
     }
   }
 };

package/dist/npm/components/header/view-selector/ViewSelectorList.js

@@ -104,6 +104,7 @@ var ViewSelectorListVue2 = {
         items: views.map(function (v) {
           return __assign(__assign({}, v.props), {
             selected: v.name === this.ks.activeViewName,
+            name: v.name,
             title: v.title || v.name
           });
         }, this),
@@ -116,6 +117,7 @@ var ViewSelectorListVue2 = {
       items: views.map(function (v) {
         return __assign(__assign({}, v.props), {
           selected: v.name === this.ks.activeViewName,
+          name: v.name,
           title: v.title || v.name
         });
       }, this),

package/dist/npm/items/SchedulerViewItem.js

@@ -125,6 +125,13 @@ var SchedulerViewItemVue2 = {
   updated: function updated() {
     this.align();
     this.position();
+
+    if (!this.ks.scheduler || this.observer) {
+      return;
+    }
+
+    this.observer = new window.ResizeObserver(this.handleResize);
+    this.observer.observe(this.ks.scheduler);
   },
   destroyed: !!gh ? undefined : function () {
     if (this.observer) {
@@ -330,7 +337,13 @@ var SchedulerViewItemVue2 = {
         return;
       }
 
-      var firstSlot = utils_1.first(slots);
+      var firstSlot = utils_1.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;
@@ -374,7 +387,10 @@ var SchedulerViewItemVue2 = {
       var rect = utils_2.getRect(element);
       siblingsPerSlot.forEach(function (slot) {
         var currentOffset = 0;
-        slot.forEach(function (current) {
+        var currentSlot = slot.sort(function (a, b) {
+          return a.$props.order - b.$props.order;
+        });
+        currentSlot.forEach(function (current) {
           if (utils_1.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;
           }
@@ -382,7 +398,7 @@ var SchedulerViewItemVue2 = {
           var currentRect = utils_2.getRect(current.$el);
 
           if (current.$props.order !== null && current.$props.order < order) {
-            currentOffset = currentRect.top + currentRect.height - rect.top - constants_1.BORDER_WIDTH * order + ITEMS_SPACING;
+            currentOffset = (currentRect.top || rect.top) + currentRect.height - rect.top - constants_1.BORDER_WIDTH * order + ITEMS_SPACING;
           }
         });
 

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-scheduler',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1646060571,
+    publishDate: 1646140644,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

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

@@ -149,6 +149,8 @@ var AgendaViewVue2 = {
         groups: this.ks.groups,
         ranges: this.ranges
       });
+      utils_1.mapItemsToSlots(items, this.agendaSlots, true);
+      utils_1.mapSlotsToItems(items, this.agendaSlots, true);
       return items;
     }
   },
@@ -168,22 +170,18 @@ var AgendaViewVue2 = {
     var EditSlot = this.$props.editSlot || SchedulerEditSlot_1.SchedulerEditSlot;
     var intl = kendo_vue_intl_1.provideIntlService(this);
     var localization = kendo_vue_intl_1.provideLocalizationService(this);
-    var items = this.items;
-    var agendaSlots = this.agendaSlots;
-    utils_1.mapItemsToSlots(items, agendaSlots, true);
-    utils_1.mapSlotsToItems(items, agendaSlots, true);
     return (// @ts-ignore  function children
       h(BaseView_1.BaseView, {
         id: this.$props.id,
         attrs: this.v3 ? undefined : {
           id: this.$props.id,
           props: this.$props,
-          baseSlots: items,
+          baseSlots: this.items,
           ranges: this.ranges
         },
         "class": 'k-scheduler-agendaview',
         props: this.$props,
-        baseSlots: items,
+        baseSlots: this.items,
         ranges: this.ranges
       }, this.v3 ? function () {
         return [h("div", {
@@ -210,15 +208,15 @@ var AgendaViewVue2 = {
           nested: true
         }, _this.v3 ? function () {
           return [h(AgendaViewBody_1.AgendaViewBody, {
-            agendaSlots: agendaSlots,
+            agendaSlots: _this.agendaSlots,
             attrs: _this.v3 ? undefined : {
-              agendaSlots: agendaSlots
+              agendaSlots: _this.agendaSlots
             }
           })];
         } : [h(AgendaViewBody_1.AgendaViewBody, {
-          agendaSlots: agendaSlots,
+          agendaSlots: _this.agendaSlots,
           attrs: _this.v3 ? undefined : {
-            agendaSlots: agendaSlots
+            agendaSlots: _this.agendaSlots
           }
         })])];
       } : [h("div", {
@@ -243,15 +241,15 @@ var AgendaViewVue2 = {
         nested: true
       }, _this.v3 ? function () {
         return [h(AgendaViewBody_1.AgendaViewBody, {
-          agendaSlots: agendaSlots,
+          agendaSlots: _this.agendaSlots,
           attrs: _this.v3 ? undefined : {
-            agendaSlots: agendaSlots
+            agendaSlots: _this.agendaSlots
           }
         })];
       } : [h(AgendaViewBody_1.AgendaViewBody, {
-        agendaSlots: agendaSlots,
+        agendaSlots: _this.agendaSlots,
         attrs: _this.v3 ? undefined : {
-          agendaSlots: agendaSlots
+          agendaSlots: _this.agendaSlots
         }
       })])])
     );

package/dist/npm/views/day/MultiDayView.js

@@ -255,6 +255,8 @@ var MultiDayViewVue2 = {
         groups: this.ks.groups,
         ranges: this.dayRanges
       });
+      utils_1.mapItemsToSlots(dayItems, this.daySlots, false);
+      utils_1.mapSlotsToItems(dayItems, this.daySlots, false);
       return dayItems;
     },
     timeItems: function timeItems() {
@@ -268,6 +270,8 @@ var MultiDayViewVue2 = {
       }).filter(function (item) {
         return _this.viewStart.getTime() === _this.viewEnd.getTime() || utils_1.isInTimeRange(item.zonedStart, _this.viewStart, _this.viewEnd) || utils_1.isInTimeRange(item.zonedEnd, _this.viewStart, _this.viewEnd) || utils_1.isInTimeRange(new Date(item.zonedEnd.getTime() - (item.zonedEnd.getTime() - item.zonedStart.getTime()) / 2), _this.viewStart, _this.viewEnd);
       });
+      utils_1.mapItemsToSlots(timeItems, this.timeSlots, false);
+      utils_1.mapSlotsToItems(timeItems, this.timeSlots, false);
       return timeItems;
     }
   },
@@ -306,10 +310,6 @@ var MultiDayViewVue2 = {
     var timeItems = this.timeItems;
     var daySlots = this.daySlots;
     var timeSlots = this.timeSlots;
-    utils_1.mapItemsToSlots(dayItems, daySlots, false);
-    utils_1.mapSlotsToItems(dayItems, daySlots, false);
-    utils_1.mapItemsToSlots(timeItems, timeSlots, false);
-    utils_1.mapSlotsToItems(timeItems, timeSlots, false);
     return (// @ts-ignore  function children
       h(BaseView_1.BaseView, {
         id: this.$props.id,

package/dist/npm/views/month/MonthView.js

@@ -129,6 +129,8 @@ var MonthViewVue2 = {
         groups: this.ks.groups,
         ranges: this.ranges
       });
+      utils_1.mapItemsToSlots(items, this.monthSlots, false);
+      utils_1.mapSlotsToItems(items, this.monthSlots, false);
       return items;
     }
   },
@@ -154,9 +156,7 @@ var MonthViewVue2 = {
     var EditItem = this.$props.editItem || SchedulerEditItem_1.SchedulerEditItem;
     var EditSlot = this.$props.editSlot || SchedulerEditSlot_1.SchedulerEditSlot;
     var items = this.items;
-    var monthSlots = this.monthSlots;
-    utils_1.mapItemsToSlots(items, monthSlots, false);
-    utils_1.mapSlotsToItems(items, monthSlots, false); // const [dataItems] = useSchedulerDataContext();
+    var monthSlots = this.monthSlots; // const [dataItems] = useSchedulerDataContext();
     // const [, setDate] = useSchedulerDateContext();
     // const [, setView] = useSchedulerActiveViewContext();
     // const views = useSchedulerViewsContext();