@progress/kendo-vue-scheduler 10.0.1-develop.5 → 10.0.1-develop.7

package/views/month/MonthView.mjs

@@ -5,25 +5,26 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as w, createVNode as r } from "vue";
-import { BaseView as k } from "../../components/BaseView.mjs";
-import { firstDayInWeek as l, firstDayOfMonth as y, getDate as h, addDays as z, lastDayOfMonth as R, ZonedDate as d, MS_PER_DAY as p } from "@progress/kendo-date-math";
-import { VerticalResourceIterator as u } from "../common/VerticalResourceIterator.mjs";
-import { HorizontalResourceIterator as c } from "../common/HorizontalResourceIterator.mjs";
-import { orderSort as b, mapItemsToSlots as $, mapSlotsToItems as C, toUTCDateTime as m } from "../../utils/main.mjs";
-import { monthViewTitle as g, messages as A } from "../../messages/main.mjs";
-import { SchedulerEditSlot as O } from "../../slots/SchedulerEditSlot.mjs";
-import { provideLocalizationService as T, provideIntlService as f } from "@progress/kendo-vue-intl";
-import { DAYS_IN_WEEK_COUNT as v } from "../../constants/main.mjs";
-import { toRanges as E } from "../../services/rangeService.mjs";
-import { toSlots as M } from "../../services/slotsService.mjs";
-import { toOccurrences as P } from "../../services/occurrenceService.mjs";
-import { toItems as V } from "../../services/itemsService.mjs";
+import { defineComponent as D, createVNode as r } from "vue";
+import { BaseView as I } from "../../components/BaseView.mjs";
+import { firstDayInWeek as l, firstDayOfMonth as k, getDate as h, addDays as z, lastDayOfMonth as R, ZonedDate as d, MS_PER_DAY as c } from "@progress/kendo-date-math";
+import { VerticalResourceIterator as p } from "../common/VerticalResourceIterator.mjs";
+import { HorizontalResourceIterator as u } from "../common/HorizontalResourceIterator.mjs";
+import { orderSort as $, mapItemsToSlots as b, mapSlotsToItems as A, toUTCDateTime as m } from "../../utils/main.mjs";
+import { monthViewTitle as f, messages as C } from "../../messages/main.mjs";
+import { SchedulerEditSlot as F } from "../../slots/SchedulerEditSlot.mjs";
+import { provideLocalizationService as T, provideIntlService as g } from "@progress/kendo-vue-intl";
+import { DAYS_IN_WEEK_COUNT as w } from "../../constants/main.mjs";
+import { toRanges as O } from "../../services/rangeService.mjs";
+import { toSlots as E } from "../../services/slotsService.mjs";
+import { toOccurrences as M } from "../../services/occurrenceService.mjs";
+import { toItems as x } from "../../services/itemsService.mjs";
 import { MonthViewHead as S } from "./MonthViewHead.mjs";
-import { MonthViewBody as j } from "./MonthViewBody.mjs";
-import { MoreEventsPopover as x } from "../../components/MoreEventsPopover.mjs";
-import { SchedulerEditItem as N } from "../../items/SchedulerEditItem.mjs";
-const se = /* @__PURE__ */ w({
+import { MonthViewBody as P } from "./MonthViewBody.mjs";
+import { MoreEventsPopover as V } from "../../components/MoreEventsPopover.mjs";
+import { SchedulerEditItem as j } from "../../items/SchedulerEditItem.mjs";
+import { syncGroupRowHeights as N } from "../../hooks/useGroupRowHeightSync.mjs";
+const ie = /* @__PURE__ */ D({
   name: "KendoMonthView",
   props: {
     itemsPerSlot: {
@@ -37,7 +38,7 @@ const se = /* @__PURE__ */ w({
     dateRange: {
       type: [Function, Object],
       default: function() {
-        return F;
+        return H;
       }
     },
     slotDuration: {
@@ -100,14 +101,21 @@ const se = /* @__PURE__ */ w({
     }
   },
   created() {
-    this.intl = f(this);
+    this.intl = g(this);
   },
   mounted() {
-    this.hasMounted = !0;
+    this.hasMounted = !0, this.$nextTick(this.syncGroupRows);
+  },
+  updated() {
+    this.$nextTick(this.syncGroupRows);
+  },
+  unmounted() {
+    this.rowSyncFrame !== void 0 && window.cancelAnimationFrame(this.rowSyncFrame);
   },
   data() {
     return {
       hasMounted: !1,
+      rowSyncFrame: void 0,
       currentDragItem: void 0,
       currentResizeItem: void 0,
       popoverShow: !1,
@@ -117,34 +125,34 @@ const se = /* @__PURE__ */ w({
   },
   computed: {
     ranges() {
-      return E(this.ks.dateRange, {
-        step: p * v,
+      return O(this.ks.dateRange, {
+        step: c * w,
         timezone: this.ks.timezone
       });
     },
     monthSlots() {
-      return M(this.ks.dateRange, {
-        step: p
+      return E(this.ks.dateRange, {
+        step: c
       }, {
         groups: this.ks.groups,
         ranges: this.ranges
       });
     },
     occurrences() {
-      return P(this.ks.dataItems, {
+      return M(this.ks.dataItems, {
         dateRange: this.ks.dateRange,
         fields: this.ks.fields,
         timezone: this.ks.timezone
       });
     },
     items() {
-      const t = V(this.occurrences, {
+      const t = x(this.occurrences, {
         timezone: this.ks.timezone
       }, {
         groups: this.ks.groups,
         ranges: this.ranges
       });
-      return $(t, this.monthSlots, !0), C(t, this.monthSlots, !0), t;
+      return b(t, this.monthSlots, !0), A(t, this.monthSlots, !0), t;
     },
     compDragItem() {
       return this.dragItem !== void 0 ? this.dragItem : this.currentDragItem;
@@ -154,17 +162,17 @@ const se = /* @__PURE__ */ w({
     }
   },
   render() {
-    this.localization = T(this), this.localization.toLanguageString(g, A[g]);
-    const t = this.$props.editItem || N;
-    this.$props.editSlot || O;
+    this.localization = T(this), this.localization.toLanguageString(f, C[f]);
+    const t = this.$props.editItem || j;
+    this.$props.editSlot || F;
     const n = this.items, o = this.monthSlots;
-    this.intl = f(this);
+    this.intl = g(this);
     const s = this.$props.itemsPerSlot, a = this.ks.orientation === "horizontal" ? this.ranges.map(function(e, i) {
-      return r(c, {
+      return r(u, {
         resources: this.ks.props.resources,
         group: this.ks.props.group
       }, {
-        default: () => [r(j, {
+        default: () => [r(P, {
           editable: this.$props.editable,
           slotRender: this.$props.slotRender,
           viewSlot: this.$props.viewSlot,
@@ -175,7 +183,7 @@ const se = /* @__PURE__ */ w({
           onShowmoreitems: this.handleShowMoreItemsClick
         }, null)]
       });
-    }, this) : r(u, {
+    }, this) : r(p, {
       nested: !0,
       resources: this.ks.props.resources,
       group: this.ks.props.group,
@@ -190,7 +198,7 @@ const se = /* @__PURE__ */ w({
         onShowmoreitems: this.handleShowMoreItemsClick
       }
     }, null);
-    return r(k, {
+    return r(I, {
       viewProps: {
         ...this.$props
       },
@@ -200,7 +208,7 @@ const se = /* @__PURE__ */ w({
     }, {
       default: () => [r("div", {
         class: "k-scheduler-head"
-      }, [this.ks.orientation === "horizontal" ? r(c, {
+      }, [this.ks.orientation === "horizontal" ? r(u, {
         nested: !0,
         resources: this.ks.props.resources,
         group: this.ks.props.group
@@ -209,7 +217,7 @@ const se = /* @__PURE__ */ w({
           monthSlots: o,
           dateHeaderCell: this.$props.dateHeaderCell
         }, null)]
-      }) : r(u, {
+      }) : r(p, {
         resources: this.ks.props.resources,
         group: this.ks.props.group
       }, {
@@ -218,8 +226,9 @@ const se = /* @__PURE__ */ w({
           dateHeaderCell: this.$props.dateHeaderCell
         }, null)]
       })]), r("div", {
-        class: "k-scheduler-body"
-      }, [a, this.hasMounted && n.filter((e) => e.order === null || e.order < s).sort(b).map(function(e) {
+        class: "k-scheduler-body",
+        ref: "body"
+      }, [a, this.hasMounted && n.filter((e) => e.order === null || e.order < s).sort($).map(function(e) {
         return r(t, {
           item: this.$props.item,
           viewItem: this.$props.viewItem,
@@ -258,7 +267,7 @@ const se = /* @__PURE__ */ w({
           editable: this.$props.editable,
           ignoreIsAllDay: !0
         }, null);
-      }, this)]), r(x, {
+      }, this)]), r(V, {
         show: this.popoverShow,
         anchor: this.popoverAnchor,
         slot: this.popoverSlot,
@@ -270,6 +279,11 @@ const se = /* @__PURE__ */ w({
     });
   },
   methods: {
+    syncGroupRows() {
+      this.rowSyncFrame !== void 0 && window.cancelAnimationFrame(this.rowSyncFrame), this.rowSyncFrame = window.requestAnimationFrame(() => {
+        N(this.$refs.body), this.rowSyncFrame = void 0;
+      });
+    },
     handleShowMoreItemsClick({
       event: t,
       slot: n
@@ -301,19 +315,19 @@ const se = /* @__PURE__ */ w({
       this.currentResizeItem = t;
     }
   }
-}), F = ({
+}), H = ({
   intl: t,
   date: n,
   timezone: o
 }) => {
-  const s = l(y(h(n)), t.firstDay()), a = z(l(R(h(n)), t.firstDay()), v), e = d.fromUTCDate(m(s), o), i = d.fromUTCDate(m(a), o), D = new Date(e.getTime()), I = new Date(i.getTime());
+  const s = l(k(h(n)), t.firstDay()), a = z(l(R(h(n)), t.firstDay()), w), e = d.fromUTCDate(m(s), o), i = d.fromUTCDate(m(a), o), v = new Date(e.getTime()), y = new Date(i.getTime());
   return {
-    start: D,
-    end: I,
+    start: v,
+    end: y,
     zonedStart: e,
     zonedEnd: i
   };
 };
 export {
-  se as MonthView
+  ie as MonthView
 };