@mantine-vue/schedule 3.3.0 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/esm/index.mjs CHANGED
@@ -394,8 +394,9 @@ function isEventInTimeRange({ event, startTime, endTime }) {
394
394
  const timeWindowEndMinutes = endHour * 60 + endMinute;
395
395
  const eventStart = dayjs(event.start);
396
396
  const eventEnd = dayjs(event.end);
397
+ const endsAtNextDayStart = eventEnd.isSame(eventStart.startOf("day").add(1, "day"), "second");
397
398
  const eventStartMinutes = eventStart.hour() * 60 + eventStart.minute();
398
- return !(eventEnd.hour() * 60 + eventEnd.minute() <= timeWindowStartMinutes || eventStartMinutes >= timeWindowEndMinutes);
399
+ return !((endsAtNextDayStart ? 1440 : eventEnd.hour() * 60 + eventEnd.minute()) <= timeWindowStartMinutes || eventStartMinutes >= timeWindowEndMinutes);
399
400
  }
400
401
  //#endregion
401
402
  //#region src/utils/is-within-week/is-within-week.ts
@@ -662,6 +663,43 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
662
663
  return output;
663
664
  }
664
665
  //#endregion
666
+ //#region src/utils/get-overlap-clusters/get-overlap-clusters.ts
667
+ function getOverlapClusters(events) {
668
+ const clusters = [];
669
+ const assigned = /* @__PURE__ */ new Set();
670
+ for (let i = 0; i < events.length; i++) {
671
+ if (assigned.has(i)) continue;
672
+ const cluster = [events[i]];
673
+ assigned.add(i);
674
+ let j = 0;
675
+ while (j < cluster.length) {
676
+ for (let k = 0; k < events.length; k++) if (!assigned.has(k) && isEventsOverlap(cluster[j], events[k])) {
677
+ cluster.push(events[k]);
678
+ assigned.add(k);
679
+ }
680
+ j += 1;
681
+ }
682
+ clusters.push(cluster);
683
+ }
684
+ return clusters;
685
+ }
686
+ //#endregion
687
+ //#region src/utils/apply-cascade-layout/apply-cascade-layout.ts
688
+ var BASE_STEP = 20;
689
+ var MIN_TOP_WIDTH = 60;
690
+ function applyCascadeLayout(events) {
691
+ const timedEvents = events.filter((event) => !event.position.allDay);
692
+ for (const cluster of getOverlapClusters(timedEvents)) {
693
+ const columns = Math.max(...cluster.map((event) => event.position.column)) + 1;
694
+ const step = columns > 1 ? Math.min(BASE_STEP, (100 - MIN_TOP_WIDTH) / (columns - 1)) : 0;
695
+ for (const event of cluster) {
696
+ event.position.overlaps = columns;
697
+ event.position.offset = event.position.column * step;
698
+ event.position.width = 100 - event.position.offset;
699
+ }
700
+ }
701
+ }
702
+ //#endregion
665
703
  //#region src/utils/get-ordered-resources/get-ordered-resources.ts
666
704
  function getOrderedResources(resources, groups) {
667
705
  if (!groups?.length) return {
@@ -1001,17 +1039,19 @@ function useEventResize(input) {
1001
1039
  document.addEventListener("pointermove", trackPointer);
1002
1040
  document.addEventListener("pointerup", handlePointerUp);
1003
1041
  };
1004
- const getResizePosition = (eventId) => {
1042
+ const getResizePosition = (eventId, eventDate) => {
1005
1043
  const state = resizeState.value;
1006
- return state?.eventId === eventId ? {
1044
+ return state?.eventId === eventId && (eventDate === void 0 || state.eventDate === eventDate) ? {
1007
1045
  top: state.currentTop,
1008
1046
  height: state.currentHeight
1009
1047
  } : null;
1010
1048
  };
1011
- const isResizableEvent = (event) => input.enabled() && input.mode() !== "static" && event.display !== "background" && (input.canResizeEvent()?.(event) ?? true);
1049
+ const isResizableEvent = (event) => input.enabled() && input.mode() !== "static" && (event.display !== "background" || input.withBackgroundEvents?.() === true) && (input.canResizeEvent()?.(event) ?? true);
1012
1050
  onBeforeUnmount(removeDocumentListeners);
1013
1051
  return {
1014
1052
  handleResizeStart,
1053
+ isResizing: computed(() => resizeState.value !== null),
1054
+ resizingEventId: computed(() => resizeState.value?.eventId ?? null),
1015
1055
  getResizePosition,
1016
1056
  isResizableEvent,
1017
1057
  wasResizing: () => justResized
@@ -1234,9 +1274,9 @@ function provideScheduleDragState(input = {}) {
1234
1274
  };
1235
1275
  }
1236
1276
  var ScheduleEvent_module_default = {
1237
- event: "_event_19lsr_1",
1238
- eventInner: "_eventInner_19lsr_14",
1239
- eventResizeHandle: "_eventResizeHandle_19lsr_186"
1277
+ event: "_event_ho258_1",
1278
+ eventInner: "_eventInner_ho258_14",
1279
+ eventResizeHandle: "_eventResizeHandle_ho258_210"
1240
1280
  };
1241
1281
  //#endregion
1242
1282
  //#region src/components/ScheduleEvent/ScheduleEvent.vue?vue&type=script&setup=true&lang.ts
@@ -1616,9 +1656,20 @@ var ScheduleBackgroundEvent_default = /* @__PURE__ */ defineComponent({
1616
1656
  renderEventBody: {
1617
1657
  type: Function,
1618
1658
  default: void 0
1619
- }
1659
+ },
1660
+ withResize: {
1661
+ type: Boolean,
1662
+ default: false
1663
+ },
1664
+ resizeAxis: { default: "vertical" },
1665
+ resizeHandleProps: {},
1666
+ isResizing: {
1667
+ type: Boolean,
1668
+ default: false
1669
+ },
1670
+ activeResizeEdge: { default: void 0 }
1620
1671
  },
1621
- emits: ["eventClick"],
1672
+ emits: ["eventClick", "resizeStart"],
1622
1673
  setup(__props, { emit: __emit }) {
1623
1674
  const props = __props;
1624
1675
  const emit = __emit;
@@ -1657,7 +1708,11 @@ var ScheduleBackgroundEvent_default = /* @__PURE__ */ defineComponent({
1657
1708
  return {
1658
1709
  ...attrs,
1659
1710
  style,
1660
- mod: [attrs.mod, { interactive: props.interactive }],
1711
+ mod: [attrs.mod, {
1712
+ interactive: props.interactive,
1713
+ resizable: props.withResize,
1714
+ resizing: props.isResizing
1715
+ }],
1661
1716
  ...props.interactive ? {
1662
1717
  "data-event-id": props.event.id,
1663
1718
  title: props.event.title,
@@ -1667,7 +1722,17 @@ var ScheduleBackgroundEvent_default = /* @__PURE__ */ defineComponent({
1667
1722
  } : {}
1668
1723
  };
1669
1724
  });
1670
- const content = () => slots.default?.({ event: props.event }) ?? props.renderEventBody?.(props.event) ?? props.event.title;
1725
+ const content = () => {
1726
+ const body = slots.default?.({ event: props.event }) ?? props.renderEventBody?.(props.event) ?? props.event.title;
1727
+ const edges = props.resizeAxis === "horizontal" ? ["start", "end"] : ["top", "bottom"];
1728
+ return props.withResize ? [...edges.map((edge) => h(Box, {
1729
+ ...props.resizeHandleProps,
1730
+ key: edge,
1731
+ mod: { edge },
1732
+ "data-active": props.isResizing && props.activeResizeEdge === edge ? true : void 0,
1733
+ onPointerdown: (event) => emit("resizeStart", edge, event)
1734
+ })), body] : body;
1735
+ };
1671
1736
  const render = () => {
1672
1737
  const component = props.interactive ? UnstyledButton : Box;
1673
1738
  if (props.renderEvent) return props.renderEvent(props.event, {
@@ -2701,7 +2766,7 @@ function columnHasConflict$1({ columns, columnIndex, event, allDay, date }) {
2701
2766
  return hasTimeConflict;
2702
2767
  });
2703
2768
  }
2704
- function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date }) {
2769
+ function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, eventOverlapMode = "columns" }) {
2705
2770
  const columns = [];
2706
2771
  const positioned = [];
2707
2772
  const sorted = sortEvents(events);
@@ -2741,14 +2806,18 @@ function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, d
2741
2806
  }
2742
2807
  });
2743
2808
  }
2809
+ for (const positionedEvent of positioned) if (positionedEvent.position.allDay) {
2810
+ positionedEvent.position.overlaps = 1;
2811
+ positionedEvent.position.width = 100;
2812
+ positionedEvent.position.offset = 0;
2813
+ }
2814
+ if (eventOverlapMode === "cascade") {
2815
+ applyCascadeLayout(positioned);
2816
+ return positioned;
2817
+ }
2744
2818
  for (const positionedEvent of positioned) {
2745
2819
  const { allDay, column } = positionedEvent.position;
2746
- if (allDay) {
2747
- positionedEvent.position.overlaps = 1;
2748
- positionedEvent.position.width = 100;
2749
- positionedEvent.position.offset = 0;
2750
- continue;
2751
- }
2820
+ if (allDay) continue;
2752
2821
  const directlyOverlapping = [];
2753
2822
  for (const otherEvent of positioned) {
2754
2823
  if (otherEvent === positionedEvent || otherEvent.position.allDay) continue;
@@ -2774,7 +2843,7 @@ function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, d
2774
2843
  }
2775
2844
  //#endregion
2776
2845
  //#region src/components/DayView/get-day-view-events/get-day-view-events.ts
2777
- function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes }) {
2846
+ function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, eventOverlapMode }) {
2778
2847
  if (events === void 0) return {
2779
2848
  allDayEvents: [],
2780
2849
  regularEvents: [],
@@ -2809,7 +2878,8 @@ function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes })
2809
2878
  startTime,
2810
2879
  endTime,
2811
2880
  intervalMinutes,
2812
- date
2881
+ date,
2882
+ eventOverlapMode
2813
2883
  });
2814
2884
  const allDayEvents = [];
2815
2885
  const regularEvents = [];
@@ -2872,17 +2942,19 @@ function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes })
2872
2942
  };
2873
2943
  }
2874
2944
  var DayView_module_default = {
2875
- dayView: "_dayView_1nebu_1",
2876
- dayViewScrollArea: "_dayViewScrollArea_1nebu_22",
2877
- dayViewInner: "_dayViewInner_1nebu_32",
2878
- dayViewTimeSlots: "_dayViewTimeSlots_1nebu_36",
2879
- dayViewSlot: "_dayViewSlot_1nebu_39",
2880
- dayViewSlotLabels: "_dayViewSlotLabels_1nebu_44",
2881
- dayViewSlotLabel: "_dayViewSlotLabel_1nebu_44",
2882
- dayViewSlots: "_dayViewSlots_1nebu_74",
2883
- dayViewBackgroundEvent: "_dayViewBackgroundEvent_1nebu_178",
2884
- dayViewAllDay: "_dayViewAllDay_1nebu_201",
2885
- dayViewAllDayEvents: "_dayViewAllDayEvents_1nebu_206"
2945
+ dayView: "_dayView_10v37_1",
2946
+ dayViewDragPreview: "_dayViewDragPreview_10v37_13",
2947
+ dayViewScrollArea: "_dayViewScrollArea_10v37_31",
2948
+ dayViewInner: "_dayViewInner_10v37_41",
2949
+ dayViewTimeSlots: "_dayViewTimeSlots_10v37_45",
2950
+ dayViewSlot: "_dayViewSlot_10v37_48",
2951
+ dayViewSlotLabels: "_dayViewSlotLabels_10v37_53",
2952
+ dayViewSlotLabel: "_dayViewSlotLabel_10v37_53",
2953
+ dayViewSlots: "_dayViewSlots_10v37_83",
2954
+ dayViewBackgroundEvent: "_dayViewBackgroundEvent_10v37_187",
2955
+ dayViewBackgroundEventResizeHandle: "_dayViewBackgroundEventResizeHandle_10v37_216",
2956
+ dayViewAllDay: "_dayViewAllDay_10v37_263",
2957
+ dayViewAllDayEvents: "_dayViewAllDayEvents_10v37_268"
2886
2958
  };
2887
2959
  //#endregion
2888
2960
  //#region src/components/DayView/DayView.vue?vue&type=script&setup=true&lang.ts
@@ -2913,6 +2985,8 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
2913
2985
  inheritAttrs: false,
2914
2986
  __name: "DayView",
2915
2987
  props: {
2988
+ eventOverlapMode: { default: "columns" },
2989
+ eventOverlapRaiseDelay: { default: 600 },
2916
2990
  intervalMinutes: { default: void 0 },
2917
2991
  headerFormat: {
2918
2992
  type: [String, Function],
@@ -3054,7 +3128,8 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3054
3128
  date: date.value,
3055
3129
  startTime: props.startTime,
3056
3130
  endTime: props.endTime,
3057
- intervalMinutes: props.intervalMinutes
3131
+ intervalMinutes: props.intervalMinutes,
3132
+ eventOverlapMode: props.eventOverlapMode
3058
3133
  }));
3059
3134
  const intervals = computed(() => getDayTimeIntervals({
3060
3135
  startTime: props.startTime,
@@ -3077,7 +3152,8 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3077
3152
  intervalMinutes: () => props.intervalMinutes,
3078
3153
  resizeIntervalMinutes: () => props.eventResizeInterval,
3079
3154
  onEventResize: (data) => emit("eventResize", data),
3080
- canResizeEvent: () => props.canResizeEvent
3155
+ canResizeEvent: () => props.canResizeEvent,
3156
+ withBackgroundEvents: () => Boolean(props.withInteractiveBackgroundEvents)
3081
3157
  });
3082
3158
  const slotDragSelect = useSlotDragSelect({
3083
3159
  enabled: () => withSlotSelect.value,
@@ -3168,11 +3244,16 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3168
3244
  "business-hours": false,
3169
3245
  "non-business-hours": false
3170
3246
  }));
3171
- const backgroundEventStyle = (position) => ({
3172
- top: `${position.top}%`,
3173
- bottom: `${100 - position.top - position.height}%`,
3174
- minHeight: "1px"
3175
- });
3247
+ const backgroundEventStyle = (event) => {
3248
+ const resizePosition = eventResize.getResizePosition(event.id);
3249
+ const top = resizePosition?.top ?? event.position.top;
3250
+ const height = resizePosition?.height ?? event.position.height;
3251
+ return {
3252
+ top: `${top}%`,
3253
+ bottom: `${100 - top - height}%`,
3254
+ minHeight: "1px"
3255
+ };
3256
+ };
3176
3257
  const regularEventStyle = (event) => {
3177
3258
  const resizePosition = eventResize.getResizePosition(event.id);
3178
3259
  const top = resizePosition?.top ?? event.position.top;
@@ -3183,7 +3264,9 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3183
3264
  bottom: `${100 - top - height}%`,
3184
3265
  minHeight: "1px",
3185
3266
  width: `${event.position.width}%`,
3186
- insetInlineStart: `${event.position.offset}%`
3267
+ insetInlineStart: `${event.position.offset}%`,
3268
+ "--event-z-index": event.position.column + 3,
3269
+ "--event-z-index-raised": event.position.overlaps + 3
3187
3270
  };
3188
3271
  };
3189
3272
  const startEventResize = (event, edge, pointerEvent) => {
@@ -3206,10 +3289,14 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3206
3289
  return openBlock(), createBlock(unref(Box), mergeProps({
3207
3290
  ...unref(attrs),
3208
3291
  ...unref(getStyles)("dayView")
3209
- }, { mod: [{
3210
- static: isStatic.value,
3211
- "slot-dragging": unref(slotDragSelect).isDragging()
3212
- }, unref(attrs).mod] }), {
3292
+ }, {
3293
+ mod: [{
3294
+ static: isStatic.value,
3295
+ "slot-dragging": unref(slotDragSelect).isDragging()
3296
+ }, unref(attrs).mod],
3297
+ "data-event-interaction": unref(eventResize).isResizing.value || void 0,
3298
+ style: { "--event-raise-delay": `${unref(props).eventOverlapRaiseDelay}ms` }
3299
+ }), {
3213
3300
  default: withCtx(() => [unref(props).withHeader ? (openBlock(), createBlock(unref(ScheduleHeaderBase), mergeProps({
3214
3301
  key: 0,
3215
3302
  view: "day",
@@ -3341,12 +3428,20 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3341
3428
  ...eventRenderers.value,
3342
3429
  ...unref(staticStyles)("dayViewBackgroundEvent")
3343
3430
  }, {
3344
- style: backgroundEventStyle(event.position),
3345
- onEventClick: clickEvent
3431
+ style: backgroundEventStyle(event),
3432
+ "with-resize": unref(eventResize).isResizableEvent(event),
3433
+ "is-resizing": unref(eventResize).getResizePosition(event.id) !== null,
3434
+ "resize-handle-props": unref(staticStyles)("dayViewBackgroundEventResizeHandle"),
3435
+ onEventClick: clickResizableEvent,
3436
+ onResizeStart: (edge, pointerEvent) => startEventResize(event, edge, pointerEvent)
3346
3437
  }), null, 16, [
3347
3438
  "event",
3348
3439
  "interactive",
3349
- "style"
3440
+ "style",
3441
+ "with-resize",
3442
+ "is-resizing",
3443
+ "resize-handle-props",
3444
+ "onResizeStart"
3350
3445
  ]);
3351
3446
  }), 128)),
3352
3447
  (openBlock(true), createElementBlock(Fragment, null, renderList(dayEvents.value.regularEvents, (event) => {
@@ -3355,6 +3450,7 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3355
3450
  event,
3356
3451
  "auto-size": "",
3357
3452
  mode: unref(props).mode,
3453
+ mod: { cascade: unref(props).eventOverlapMode === "cascade" },
3358
3454
  style: regularEventStyle(event),
3359
3455
  draggable: !isStatic.value && unref(props).withEventsDragAndDrop === true && (unref(props).canDragEvent?.(event) ?? true),
3360
3456
  "with-resize": unref(eventResize).isResizableEvent(event),
@@ -3370,6 +3466,7 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3370
3466
  }), null, 16, [
3371
3467
  "event",
3372
3468
  "mode",
3469
+ "mod",
3373
3470
  "style",
3374
3471
  "draggable",
3375
3472
  "with-resize",
@@ -3442,7 +3539,11 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
3442
3539
  _: 1
3443
3540
  }, 16, ["viewport-props"])]),
3444
3541
  _: 1
3445
- }, 16, ["mod"]);
3542
+ }, 16, [
3543
+ "mod",
3544
+ "data-event-interaction",
3545
+ "style"
3546
+ ]);
3446
3547
  };
3447
3548
  }
3448
3549
  }), {
@@ -4726,7 +4827,7 @@ function getHangingStatus({ eventStartDate, actualEndDate, weekDays }) {
4726
4827
  }
4727
4828
  //#endregion
4728
4829
  //#region src/components/WeekView/get-week-view-events/get-week-positioned-events.ts
4729
- function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek = 1, weekendDays = [0, 6], withWeekendDays = true }) {
4830
+ function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek = 1, weekendDays = [0, 6], withWeekendDays = true, eventOverlapMode = "columns" }) {
4730
4831
  const weekDays = getWeekDays({
4731
4832
  week: date,
4732
4833
  firstDayOfWeek,
@@ -4885,7 +4986,8 @@ function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMin
4885
4986
  });
4886
4987
  }
4887
4988
  }
4888
- for (const day of weekDays) calculateRegularEventOverlaps(grouped.regularEvents[day]);
4989
+ for (const day of weekDays) if (eventOverlapMode === "cascade") applyCascadeLayout(grouped.regularEvents[day]);
4990
+ else calculateRegularEventOverlaps(grouped.regularEvents[day]);
4889
4991
  if (grouped.allDayEvents.length > 0) {
4890
4992
  const eventRows = assignEventRows(grouped.allDayEvents);
4891
4993
  const assignedRows = /* @__PURE__ */ new Set();
@@ -4920,27 +5022,29 @@ function getWeekViewEvents(input) {
4920
5022
  });
4921
5023
  }
4922
5024
  var WeekView_module_default = {
4923
- weekView: "_weekView_1f3zt_1",
4924
- weekViewRoot: "_weekViewRoot_1f3zt_22",
4925
- weekViewInner: "_weekViewInner_1f3zt_30",
4926
- weekViewScrollArea: "_weekViewScrollArea_1f3zt_36",
4927
- weekViewHeader: "_weekViewHeader_1f3zt_42",
4928
- weekViewCorner: "_weekViewCorner_1f3zt_57",
4929
- weekViewSlotLabels: "_weekViewSlotLabels_1f3zt_68",
4930
- weekViewSlotLabel: "_weekViewSlotLabel_1f3zt_68",
4931
- weekViewDay: "_weekViewDay_1f3zt_95",
4932
- weekViewDayLabel: "_weekViewDayLabel_1f3zt_100",
4933
- weekViewDayNumber: "_weekViewDayNumber_1f3zt_138",
4934
- weekViewDayWeekday: "_weekViewDayWeekday_1f3zt_154",
4935
- weekViewBackgroundEvent: "_weekViewBackgroundEvent_1f3zt_160",
4936
- weekViewDaySlots: "_weekViewDaySlots_1f3zt_183",
4937
- weekViewDaySlot: "_weekViewDaySlot_1f3zt_183",
4938
- weekViewWeekLabel: "_weekViewWeekLabel_1f3zt_281",
4939
- weekViewWeekNumber: "_weekViewWeekNumber_1f3zt_287",
4940
- weekViewAllDaySlots: "_weekViewAllDaySlots_1f3zt_293",
4941
- weekViewAllDaySlotsLabel: "_weekViewAllDaySlotsLabel_1f3zt_298",
4942
- weekViewAllDaySlotsEvents: "_weekViewAllDaySlotsEvents_1f3zt_305",
4943
- weekViewAllDaySlotsList: "_weekViewAllDaySlotsList_1f3zt_312"
5025
+ weekView: "_weekView_jkexi_1",
5026
+ weekViewRoot: "_weekViewRoot_jkexi_22",
5027
+ weekViewDragPreview: "_weekViewDragPreview_jkexi_33",
5028
+ weekViewInner: "_weekViewInner_jkexi_39",
5029
+ weekViewScrollArea: "_weekViewScrollArea_jkexi_45",
5030
+ weekViewHeader: "_weekViewHeader_jkexi_51",
5031
+ weekViewCorner: "_weekViewCorner_jkexi_66",
5032
+ weekViewSlotLabels: "_weekViewSlotLabels_jkexi_77",
5033
+ weekViewSlotLabel: "_weekViewSlotLabel_jkexi_77",
5034
+ weekViewDay: "_weekViewDay_jkexi_104",
5035
+ weekViewDayLabel: "_weekViewDayLabel_jkexi_109",
5036
+ weekViewDayNumber: "_weekViewDayNumber_jkexi_147",
5037
+ weekViewDayWeekday: "_weekViewDayWeekday_jkexi_163",
5038
+ weekViewBackgroundEvent: "_weekViewBackgroundEvent_jkexi_169",
5039
+ weekViewBackgroundEventResizeHandle: "_weekViewBackgroundEventResizeHandle_jkexi_198",
5040
+ weekViewDaySlots: "_weekViewDaySlots_jkexi_246",
5041
+ weekViewDaySlot: "_weekViewDaySlot_jkexi_246",
5042
+ weekViewWeekLabel: "_weekViewWeekLabel_jkexi_344",
5043
+ weekViewWeekNumber: "_weekViewWeekNumber_jkexi_350",
5044
+ weekViewAllDaySlots: "_weekViewAllDaySlots_jkexi_356",
5045
+ weekViewAllDaySlotsLabel: "_weekViewAllDaySlotsLabel_jkexi_361",
5046
+ weekViewAllDaySlotsEvents: "_weekViewAllDaySlotsEvents_jkexi_368",
5047
+ weekViewAllDaySlotsList: "_weekViewAllDaySlotsList_jkexi_375"
4944
5048
  };
4945
5049
  //#endregion
4946
5050
  //#region src/components/WeekView/WeekView.vue?vue&type=script&setup=true&lang.ts
@@ -4983,6 +5087,8 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
4983
5087
  inheritAttrs: false,
4984
5088
  __name: "WeekView",
4985
5089
  props: {
5090
+ eventOverlapMode: { default: "columns" },
5091
+ eventOverlapRaiseDelay: { default: 600 },
4986
5092
  intervalMinutes: { default: void 0 },
4987
5093
  withCurrentTimeIndicator: {
4988
5094
  type: Boolean,
@@ -5171,7 +5277,8 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5171
5277
  intervalMinutes: props.intervalMinutes,
5172
5278
  firstDayOfWeek: props.firstDayOfWeek,
5173
5279
  weekendDays: props.weekendDays,
5174
- withWeekendDays: props.withWeekendDays
5280
+ withWeekendDays: props.withWeekendDays,
5281
+ eventOverlapMode: props.eventOverlapMode
5175
5282
  }));
5176
5283
  const intervals = computed(() => getDayTimeIntervals({
5177
5284
  startTime: props.startTime,
@@ -5188,7 +5295,8 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5188
5295
  }));
5189
5296
  const rootVars = computed(() => ({
5190
5297
  "--number-of-days": String(days.value.length),
5191
- "--indicator-offset-index": currentWeekdayIndex.value === -1 ? void 0 : String(currentWeekdayIndex.value + 1)
5298
+ "--indicator-offset-index": currentWeekdayIndex.value === -1 ? void 0 : String(currentWeekdayIndex.value + 1),
5299
+ "--event-raise-delay": `${props.eventOverlapRaiseDelay}ms`
5192
5300
  }));
5193
5301
  /**
5194
5302
  * Everything the template needs per day column.
@@ -5235,7 +5343,8 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5235
5343
  intervalMinutes: () => props.intervalMinutes,
5236
5344
  resizeIntervalMinutes: () => props.eventResizeInterval,
5237
5345
  onEventResize: (data) => emit("eventResize", data),
5238
- canResizeEvent: () => props.canResizeEvent
5346
+ canResizeEvent: () => props.canResizeEvent,
5347
+ withBackgroundEvents: () => Boolean(props.withInteractiveBackgroundEvents)
5239
5348
  });
5240
5349
  const slotDragSelect = useSlotDragSelect({
5241
5350
  enabled: () => withSlotSelect.value,
@@ -5353,12 +5462,17 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5353
5462
  width: `${position.width}%`,
5354
5463
  top: `${position.row * 22}px`
5355
5464
  });
5356
- const backgroundEventStyle = (position) => ({
5357
- top: `${position.top}%`,
5358
- bottom: `${100 - position.top - position.height}%`,
5359
- minHeight: "1px",
5360
- width: "100%"
5361
- });
5465
+ const backgroundEventStyle = (event, date) => {
5466
+ const resizePosition = eventResize.getResizePosition(event.id, dayjs(date).format("YYYY-MM-DD"));
5467
+ const top = resizePosition?.top ?? event.position.top;
5468
+ const height = resizePosition?.height ?? event.position.height;
5469
+ return {
5470
+ top: `${top}%`,
5471
+ bottom: `${100 - top - height}%`,
5472
+ minHeight: "1px",
5473
+ width: "100%"
5474
+ };
5475
+ };
5362
5476
  const regularEventStyle = (event) => {
5363
5477
  const resizePosition = eventResize.getResizePosition(event.id);
5364
5478
  const top = resizePosition?.top ?? event.position.top;
@@ -5369,7 +5483,9 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5369
5483
  bottom: `${100 - top - height}%`,
5370
5484
  minHeight: "1px",
5371
5485
  width: `${event.position.width}%`,
5372
- insetInlineStart: `${event.position.offset}%`
5486
+ insetInlineStart: `${event.position.offset}%`,
5487
+ "--event-z-index": event.position.column + 3,
5488
+ "--event-z-index-raised": event.position.overlaps + 3
5373
5489
  };
5374
5490
  };
5375
5491
  const startEventResize = (event, date, edge, pointerEvent) => {
@@ -5419,7 +5535,10 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5419
5535
  "next-control-props",
5420
5536
  "today-control-props",
5421
5537
  "view-select-props"
5422
- ])) : createCommentVNode("", true), createVNode(unref(Box), mergeProps({ "root-ref": setWeekRoot }, unref(getStyles)("weekViewRoot", { style: rootVars.value }), { mod: { "with-weekends": unref(props).withWeekendDays } }), {
5538
+ ])) : createCommentVNode("", true), createVNode(unref(Box), mergeProps({ "root-ref": setWeekRoot }, unref(getStyles)("weekViewRoot", { style: rootVars.value }), {
5539
+ mod: { "with-weekends": unref(props).withWeekendDays },
5540
+ "data-event-interaction": unref(eventResize).isResizing.value || void 0
5541
+ }), {
5423
5542
  default: withCtx(() => [createVNode(unref(ScrollArea).Autosize, mergeProps({ "scrollbar-size": 4 }, {
5424
5543
  ...unref(props).scrollAreaProps,
5425
5544
  ...unref(getStyles)("weekViewScrollArea")
@@ -5581,12 +5700,20 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5581
5700
  ...eventRenderers.value,
5582
5701
  ...unref(staticStyles)("weekViewBackgroundEvent")
5583
5702
  }, {
5584
- style: backgroundEventStyle(event.position),
5585
- onEventClick: clickEvent
5703
+ style: backgroundEventStyle(event, column.date),
5704
+ "with-resize": unref(eventResize).isResizableEvent(event) && !event.position.allDay,
5705
+ "is-resizing": unref(eventResize).getResizePosition(event.id, column.date) !== null,
5706
+ "resize-handle-props": unref(staticStyles)("weekViewBackgroundEventResizeHandle"),
5707
+ onEventClick: clickResizableEvent,
5708
+ onResizeStart: (edge, pointerEvent) => startEventResize(event, column.date, edge, pointerEvent)
5586
5709
  }), null, 16, [
5587
5710
  "event",
5588
5711
  "interactive",
5589
- "style"
5712
+ "style",
5713
+ "with-resize",
5714
+ "is-resizing",
5715
+ "resize-handle-props",
5716
+ "onResizeStart"
5590
5717
  ]);
5591
5718
  }), 128)),
5592
5719
  (openBlock(true), createElementBlock(Fragment, null, renderList(grouped.value.regularEvents[column.date] || [], (event) => {
@@ -5595,6 +5722,7 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5595
5722
  event,
5596
5723
  "auto-size": "",
5597
5724
  mode: unref(props).mode,
5725
+ mod: { cascade: unref(props).eventOverlapMode === "cascade" },
5598
5726
  style: regularEventStyle(event),
5599
5727
  draggable: isDraggableEvent(event),
5600
5728
  "with-resize": unref(eventResize).isResizableEvent(event),
@@ -5610,6 +5738,7 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5610
5738
  }), null, 16, [
5611
5739
  "event",
5612
5740
  "mode",
5741
+ "mod",
5613
5742
  "style",
5614
5743
  "draggable",
5615
5744
  "with-resize",
@@ -5627,7 +5756,7 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
5627
5756
  _: 1
5628
5757
  }, 16, ["viewport-props"])]),
5629
5758
  _: 1
5630
- }, 16, ["mod"])]),
5759
+ }, 16, ["mod", "data-event-interaction"])]),
5631
5760
  _: 1
5632
5761
  }, 16, ["mod"]);
5633
5762
  };
@@ -6322,35 +6451,19 @@ function useHorizontalEventResize(input) {
6322
6451
  onBeforeUnmount(cleanup);
6323
6452
  return {
6324
6453
  state,
6454
+ get resizingEdge() {
6455
+ return state.value?.edge ?? null;
6456
+ },
6325
6457
  handleResizeStart,
6326
- getResizePosition: (id) => state.value?.event.id === id ? {
6458
+ getResizePosition: (id, eventDate) => state.value?.event.id === id && (eventDate === void 0 || state.value.eventDate === eventDate) ? {
6327
6459
  left: state.value.currentLeft,
6328
6460
  width: state.value.currentWidth
6329
6461
  } : null,
6330
- isResizableEvent: (event) => input.enabled() && input.mode() !== "static" && event.display !== "background" && (input.canResizeEvent()?.(event) ?? true),
6462
+ isResizableEvent: (event) => input.enabled() && input.mode() !== "static" && (event.display !== "background" || input.withBackgroundEvents?.() === true) && (input.canResizeEvent()?.(event) ?? true),
6331
6463
  wasResizing: () => justResized
6332
6464
  };
6333
6465
  }
6334
6466
  //#endregion
6335
- //#region src/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.ts
6336
- function getOverlapClusters(events) {
6337
- const sorted = [...events].sort((a, b) => a.position.top - b.position.top);
6338
- const clusters = [];
6339
- let current = [];
6340
- let end = -1;
6341
- sorted.forEach((event) => {
6342
- if (current.length && event.position.top >= end) {
6343
- clusters.push(current);
6344
- current = [];
6345
- end = -1;
6346
- }
6347
- current.push(event);
6348
- end = Math.max(end, event.position.top + event.position.height);
6349
- });
6350
- if (current.length) clusters.push(current);
6351
- return clusters;
6352
- }
6353
- //#endregion
6354
6467
  //#region src/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.ts
6355
6468
  function getResourcesDayViewEvents({ events, resources, date, startTime, endTime, intervalMinutes }) {
6356
6469
  const result = {
@@ -6448,27 +6561,27 @@ function getResourcesDayViewEvents({ events, resources, date, startTime, endTime
6448
6561
  return result;
6449
6562
  }
6450
6563
  var ResourcesDayView_module_default = {
6451
- resourcesDayView: "_resourcesDayView_wmj51_1",
6452
- resourcesDayViewRoot: "_resourcesDayViewRoot_wmj51_22",
6453
- resourcesDayViewScrollArea: "_resourcesDayViewScrollArea_wmj51_30",
6454
- resourcesDayViewInner: "_resourcesDayViewInner_wmj51_39",
6455
- resourcesDayViewTimeLabelsRow: "_resourcesDayViewTimeLabelsRow_wmj51_44",
6456
- resourcesDayViewCorner: "_resourcesDayViewCorner_wmj51_57",
6457
- resourcesDayViewTimeLabel: "_resourcesDayViewTimeLabel_wmj51_44",
6458
- resourcesDayViewRow: "_resourcesDayViewRow_wmj51_96",
6459
- resourcesDayViewResourceLabel: "_resourcesDayViewResourceLabel_wmj51_100",
6460
- resourcesDayViewGroupColumn: "_resourcesDayViewGroupColumn_wmj51_124",
6461
- resourcesDayViewGroupColumnEmpty: "_resourcesDayViewGroupColumnEmpty_wmj51_125",
6462
- resourcesDayViewRowSlots: "_resourcesDayViewRowSlots_wmj51_153",
6463
- resourcesDayViewRowSlot: "_resourcesDayViewRowSlot_wmj51_153",
6464
- resourcesDayViewCurrentTimeIndicator: "_resourcesDayViewCurrentTimeIndicator_wmj51_231",
6465
- resourcesDayViewCurrentTimeIndicatorLine: "_resourcesDayViewCurrentTimeIndicatorLine_wmj51_243",
6466
- resourcesDayViewCurrentTimeIndicatorThumb: "_resourcesDayViewCurrentTimeIndicatorThumb_wmj51_249",
6467
- resourcesDayViewCurrentTimeIndicatorTimeBubble: "_resourcesDayViewCurrentTimeIndicatorTimeBubble_wmj51_259",
6468
- resourcesDayViewBackgroundEvent: "_resourcesDayViewBackgroundEvent_wmj51_278",
6469
- resourcesDayViewAllDayEvent: "_resourcesDayViewAllDayEvent_wmj51_300",
6470
- resourcesDayViewEventWrapper: "_resourcesDayViewEventWrapper_wmj51_306",
6471
- resourcesDayViewResizeHandle: "_resourcesDayViewResizeHandle_wmj51_310"
6564
+ resourcesDayView: "_resourcesDayView_bsrxh_1",
6565
+ resourcesDayViewRoot: "_resourcesDayViewRoot_bsrxh_22",
6566
+ resourcesDayViewScrollArea: "_resourcesDayViewScrollArea_bsrxh_30",
6567
+ resourcesDayViewInner: "_resourcesDayViewInner_bsrxh_39",
6568
+ resourcesDayViewTimeLabelsRow: "_resourcesDayViewTimeLabelsRow_bsrxh_44",
6569
+ resourcesDayViewCorner: "_resourcesDayViewCorner_bsrxh_57",
6570
+ resourcesDayViewTimeLabel: "_resourcesDayViewTimeLabel_bsrxh_44",
6571
+ resourcesDayViewRow: "_resourcesDayViewRow_bsrxh_96",
6572
+ resourcesDayViewResourceLabel: "_resourcesDayViewResourceLabel_bsrxh_100",
6573
+ resourcesDayViewGroupColumn: "_resourcesDayViewGroupColumn_bsrxh_124",
6574
+ resourcesDayViewGroupColumnEmpty: "_resourcesDayViewGroupColumnEmpty_bsrxh_125",
6575
+ resourcesDayViewRowSlots: "_resourcesDayViewRowSlots_bsrxh_153",
6576
+ resourcesDayViewRowSlot: "_resourcesDayViewRowSlot_bsrxh_153",
6577
+ resourcesDayViewCurrentTimeIndicator: "_resourcesDayViewCurrentTimeIndicator_bsrxh_231",
6578
+ resourcesDayViewCurrentTimeIndicatorLine: "_resourcesDayViewCurrentTimeIndicatorLine_bsrxh_243",
6579
+ resourcesDayViewCurrentTimeIndicatorThumb: "_resourcesDayViewCurrentTimeIndicatorThumb_bsrxh_249",
6580
+ resourcesDayViewCurrentTimeIndicatorTimeBubble: "_resourcesDayViewCurrentTimeIndicatorTimeBubble_bsrxh_259",
6581
+ resourcesDayViewBackgroundEvent: "_resourcesDayViewBackgroundEvent_bsrxh_278",
6582
+ resourcesDayViewAllDayEvent: "_resourcesDayViewAllDayEvent_bsrxh_306",
6583
+ resourcesDayViewEventWrapper: "_resourcesDayViewEventWrapper_bsrxh_312",
6584
+ resourcesDayViewResizeHandle: "_resourcesDayViewResizeHandle_bsrxh_316"
6472
6585
  };
6473
6586
  //#endregion
6474
6587
  //#region src/components/ResourcesDayView/ResourcesDayView.vue?vue&type=script&setup=true&lang.ts
@@ -6730,7 +6843,8 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
6730
6843
  intervalMinutes: () => props.intervalMinutes,
6731
6844
  resizeIntervalMinutes: () => props.eventResizeInterval,
6732
6845
  onEventResize: (data) => emit("eventResize", data),
6733
- canResizeEvent: () => props.canResizeEvent
6846
+ canResizeEvent: () => props.canResizeEvent,
6847
+ withBackgroundEvents: () => Boolean(props.withInteractiveBackgroundEvents)
6734
6848
  });
6735
6849
  onMounted(async () => {
6736
6850
  if (!props.startScrollTime) return;
@@ -6829,6 +6943,9 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
6829
6943
  const groupInfo = (resourceIndex) => hasGroups.value ? ordered.value.resourceGroupMap[resourceIndex] : void 0;
6830
6944
  const backgroundEvents = (resourceId) => [...positioned.value.backgroundTimedEvents[resourceId] || [], ...positioned.value.backgroundAllDayEvents[resourceId] || []];
6831
6945
  const backgroundEventStyle = (event) => {
6946
+ const resizePosition = resize.getResizePosition(event.id);
6947
+ const left = resizePosition?.left ?? event.position.top;
6948
+ const width = resizePosition?.width ?? event.position.height;
6832
6949
  const colors = theme.value.variantColorResolver({
6833
6950
  color: event.color || theme.value.primaryColor,
6834
6951
  theme: theme.value,
@@ -6836,8 +6953,8 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
6836
6953
  autoContrast: true
6837
6954
  });
6838
6955
  return {
6839
- left: `${event.position.top}%`,
6840
- right: `${100 - event.position.top - event.position.height}%`,
6956
+ left: `${left}%`,
6957
+ right: `${100 - left - width}%`,
6841
6958
  minWidth: "1px",
6842
6959
  top: 0,
6843
6960
  height: "100%",
@@ -7055,11 +7172,22 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
7055
7172
  ...unref(getStyles)("resourcesDayViewBackgroundEvent")
7056
7173
  }, {
7057
7174
  style: backgroundEventStyle(event),
7058
- onEventClick: clickEvent
7175
+ "with-resize": unref(resize).isResizableEvent(event) && !event.position.allDay,
7176
+ "resize-axis": "horizontal",
7177
+ "is-resizing": unref(resize).getResizePosition(event.id) !== null,
7178
+ "active-resize-edge": unref(resize).resizingEdge,
7179
+ "resize-handle-props": unref(staticStyles)("resourcesDayViewResizeHandle"),
7180
+ onEventClick: clickEvent,
7181
+ onResizeStart: (edge, pointerEvent) => startResize(event, resourceIndex, edge, pointerEvent)
7059
7182
  }), null, 16, [
7060
7183
  "event",
7061
7184
  "interactive",
7062
- "style"
7185
+ "style",
7186
+ "with-resize",
7187
+ "is-resizing",
7188
+ "active-resize-edge",
7189
+ "resize-handle-props",
7190
+ "onResizeStart"
7063
7191
  ])]);
7064
7192
  }), 128)),
7065
7193
  (openBlock(true), createElementBlock(Fragment, null, renderList(allDayEvents(resource.id), (event, index) => {
@@ -7308,31 +7436,31 @@ function getResourcesWeekViewEvents({ events, resources, weekdays, startTime, en
7308
7436
  };
7309
7437
  }
7310
7438
  var ResourcesWeekView_module_default = {
7311
- resourcesWeekView: "_resourcesWeekView_1komm_1",
7312
- resourcesWeekViewRoot: "_resourcesWeekViewRoot_1komm_19",
7313
- resourcesWeekViewScrollArea: "_resourcesWeekViewScrollArea_1komm_26",
7314
- resourcesWeekViewInner: "_resourcesWeekViewInner_1komm_34",
7315
- resourcesWeekViewHeaderRows: "_resourcesWeekViewHeaderRows_1komm_39",
7316
- resourcesWeekViewCorner: "_resourcesWeekViewCorner_1komm_48",
7317
- resourcesWeekViewHeaderContent: "_resourcesWeekViewHeaderContent_1komm_63",
7318
- resourcesWeekViewDayLabelsRow: "_resourcesWeekViewDayLabelsRow_1komm_67",
7319
- resourcesWeekViewDayLabel: "_resourcesWeekViewDayLabel_1komm_67",
7320
- resourcesWeekViewTimeLabelsRow: "_resourcesWeekViewTimeLabelsRow_1komm_94",
7321
- resourcesWeekViewTimeLabel: "_resourcesWeekViewTimeLabel_1komm_94",
7322
- resourcesWeekViewRow: "_resourcesWeekViewRow_1komm_121",
7323
- resourcesWeekViewResourceLabel: "_resourcesWeekViewResourceLabel_1komm_125",
7324
- resourcesWeekViewGroupColumn: "_resourcesWeekViewGroupColumn_1komm_149",
7325
- resourcesWeekViewGroupColumnEmpty: "_resourcesWeekViewGroupColumnEmpty_1komm_150",
7326
- resourcesWeekViewRowSlots: "_resourcesWeekViewRowSlots_1komm_178",
7327
- resourcesWeekViewRowSlot: "_resourcesWeekViewRowSlot_1komm_178",
7328
- resourcesWeekViewBackgroundEvent: "_resourcesWeekViewBackgroundEvent_1komm_250",
7329
- resourcesWeekViewAllDayEvent: "_resourcesWeekViewAllDayEvent_1komm_272",
7330
- resourcesWeekViewEventWrapper: "_resourcesWeekViewEventWrapper_1komm_277",
7331
- resourcesWeekViewResizeHandle: "_resourcesWeekViewResizeHandle_1komm_281",
7332
- resourcesWeekViewCurrentTimeIndicator: "_resourcesWeekViewCurrentTimeIndicator_1komm_322",
7333
- resourcesWeekViewCurrentTimeIndicatorLine: "_resourcesWeekViewCurrentTimeIndicatorLine_1komm_334",
7334
- resourcesWeekViewCurrentTimeIndicatorThumb: "_resourcesWeekViewCurrentTimeIndicatorThumb_1komm_340",
7335
- resourcesWeekViewCurrentTimeIndicatorTimeBubble: "_resourcesWeekViewCurrentTimeIndicatorTimeBubble_1komm_350"
7439
+ resourcesWeekView: "_resourcesWeekView_1rg4q_1",
7440
+ resourcesWeekViewRoot: "_resourcesWeekViewRoot_1rg4q_19",
7441
+ resourcesWeekViewScrollArea: "_resourcesWeekViewScrollArea_1rg4q_26",
7442
+ resourcesWeekViewInner: "_resourcesWeekViewInner_1rg4q_34",
7443
+ resourcesWeekViewHeaderRows: "_resourcesWeekViewHeaderRows_1rg4q_39",
7444
+ resourcesWeekViewCorner: "_resourcesWeekViewCorner_1rg4q_48",
7445
+ resourcesWeekViewHeaderContent: "_resourcesWeekViewHeaderContent_1rg4q_63",
7446
+ resourcesWeekViewDayLabelsRow: "_resourcesWeekViewDayLabelsRow_1rg4q_67",
7447
+ resourcesWeekViewDayLabel: "_resourcesWeekViewDayLabel_1rg4q_67",
7448
+ resourcesWeekViewTimeLabelsRow: "_resourcesWeekViewTimeLabelsRow_1rg4q_94",
7449
+ resourcesWeekViewTimeLabel: "_resourcesWeekViewTimeLabel_1rg4q_94",
7450
+ resourcesWeekViewRow: "_resourcesWeekViewRow_1rg4q_121",
7451
+ resourcesWeekViewResourceLabel: "_resourcesWeekViewResourceLabel_1rg4q_125",
7452
+ resourcesWeekViewGroupColumn: "_resourcesWeekViewGroupColumn_1rg4q_149",
7453
+ resourcesWeekViewGroupColumnEmpty: "_resourcesWeekViewGroupColumnEmpty_1rg4q_150",
7454
+ resourcesWeekViewRowSlots: "_resourcesWeekViewRowSlots_1rg4q_178",
7455
+ resourcesWeekViewRowSlot: "_resourcesWeekViewRowSlot_1rg4q_178",
7456
+ resourcesWeekViewBackgroundEvent: "_resourcesWeekViewBackgroundEvent_1rg4q_250",
7457
+ resourcesWeekViewAllDayEvent: "_resourcesWeekViewAllDayEvent_1rg4q_278",
7458
+ resourcesWeekViewEventWrapper: "_resourcesWeekViewEventWrapper_1rg4q_283",
7459
+ resourcesWeekViewResizeHandle: "_resourcesWeekViewResizeHandle_1rg4q_287",
7460
+ resourcesWeekViewCurrentTimeIndicator: "_resourcesWeekViewCurrentTimeIndicator_1rg4q_364",
7461
+ resourcesWeekViewCurrentTimeIndicatorLine: "_resourcesWeekViewCurrentTimeIndicatorLine_1rg4q_376",
7462
+ resourcesWeekViewCurrentTimeIndicatorThumb: "_resourcesWeekViewCurrentTimeIndicatorThumb_1rg4q_382",
7463
+ resourcesWeekViewCurrentTimeIndicatorTimeBubble: "_resourcesWeekViewCurrentTimeIndicatorTimeBubble_1rg4q_392"
7336
7464
  };
7337
7465
  //#endregion
7338
7466
  //#region src/components/ResourcesWeekView/ResourcesWeekView.vue?vue&type=script&setup=true&lang.ts
@@ -7629,7 +7757,8 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
7629
7757
  intervalMinutes: () => props.intervalMinutes,
7630
7758
  resizeIntervalMinutes: () => props.eventResizeInterval,
7631
7759
  onEventResize: (data) => emit("eventResize", data),
7632
- canResizeEvent: () => props.canResizeEvent
7760
+ canResizeEvent: () => props.canResizeEvent,
7761
+ withBackgroundEvents: () => Boolean(props.withInteractiveBackgroundEvents)
7633
7762
  });
7634
7763
  onMounted(async () => {
7635
7764
  if (!props.startScrollDateTime) return;
@@ -7745,7 +7874,10 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
7745
7874
  dayIndex
7746
7875
  }));
7747
7876
  });
7748
- const backgroundEventStyle = (event, dayIndex) => {
7877
+ const backgroundEventStyle = (event, day, dayIndex) => {
7878
+ const resizePosition = resize.getResizePosition(event.id, day);
7879
+ const left = resizePosition?.left ?? event.position.top;
7880
+ const width = resizePosition?.width ?? event.position.height;
7749
7881
  const colors = theme.value.variantColorResolver({
7750
7882
  color: event.color || theme.value.primaryColor,
7751
7883
  theme: theme.value,
@@ -7753,8 +7885,8 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
7753
7885
  autoContrast: true
7754
7886
  });
7755
7887
  return {
7756
- left: `${dayOffset(dayIndex) + event.position.top / 100 * dayWidth.value}%`,
7757
- right: `${100 - dayOffset(dayIndex) - (event.position.top + event.position.height) / 100 * dayWidth.value}%`,
7888
+ left: `${dayOffset(dayIndex) + left / 100 * dayWidth.value}%`,
7889
+ right: `${100 - dayOffset(dayIndex) - (left + width) / 100 * dayWidth.value}%`,
7758
7890
  minWidth: "1px",
7759
7891
  top: 0,
7760
7892
  height: "100%",
@@ -8006,12 +8138,23 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
8006
8138
  ...eventRenderers.value,
8007
8139
  ...unref(getStyles)("resourcesWeekViewBackgroundEvent")
8008
8140
  }, {
8009
- style: backgroundEventStyle(entry.event, entry.dayIndex),
8010
- onEventClick: clickEvent
8141
+ style: backgroundEventStyle(entry.event, entry.day, entry.dayIndex),
8142
+ "with-resize": unref(resize).isResizableEvent(entry.event) && !entry.event.position.allDay,
8143
+ "resize-axis": "horizontal",
8144
+ "is-resizing": unref(resize).getResizePosition(entry.event.id, entry.day) !== null,
8145
+ "active-resize-edge": unref(resize).resizingEdge,
8146
+ "resize-handle-props": unref(staticStyles)("resourcesWeekViewResizeHandle"),
8147
+ onEventClick: clickEvent,
8148
+ onResizeStart: (edge, pointerEvent) => startResize(entry.event, entry.day, entry.dayIndex, resourceIndex, edge, pointerEvent)
8011
8149
  }), null, 16, [
8012
8150
  "event",
8013
8151
  "interactive",
8014
- "style"
8152
+ "style",
8153
+ "with-resize",
8154
+ "is-resizing",
8155
+ "active-resize-edge",
8156
+ "resize-handle-props",
8157
+ "onResizeStart"
8015
8158
  ])]);
8016
8159
  }), 128)),
8017
8160
  (openBlock(true), createElementBlock(Fragment, null, renderList(allDayBars(resource.id), (bar) => {
@@ -9263,6 +9406,6 @@ var ResourcesSchedule = factory(/* @__PURE__ */ defineComponent({
9263
9406
  }
9264
9407
  }), { classes: ResourcesSchedule_module_default });
9265
9408
  //#endregion
9266
- export { CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, HeaderControl, MobileMonthView, MonthView, MonthYearSelect, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleBackgroundEvent_default as ScheduleBackgroundEvent, ScheduleEvent, ScheduleHeader, ScheduleHeaderBase, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday, ViewSelect, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, compareMonthEvents, createHeaderNavigation, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayPositionedEvents, getDayTimeIntervals, getDayViewEvents, getEndOfWeek, getGroupToResourceIdMap, getLabel, getMonthDays, getMonthPositionedEvents, getMonthRange, getMonthViewEvents, getMonthsByQuarter, getMonthsList, getOrderedResources, getOverlapClusters, getRenderableMonthEventSegments, getResourcesDayViewEvents, getResourcesMonthViewLayout, getResourcesWeekViewEvents, getStartOfWeek, getVisibleEvents, getWeekDays, getWeekLabel, getWeekNumber, getWeekPositionedEvents, getWeekViewEvents, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultiDayEvent, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, provideDragContext, provideScheduleDragState, sortEvents, toDateString, toTimeString, useDragContext, useScheduleHeaderLabels, validateEvent };
9409
+ export { CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, HeaderControl, MobileMonthView, MonthView, MonthYearSelect, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleBackgroundEvent_default as ScheduleBackgroundEvent, ScheduleEvent, ScheduleHeader, ScheduleHeaderBase, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday, ViewSelect, WeekView, YearView, applyCascadeLayout, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, compareMonthEvents, createHeaderNavigation, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayPositionedEvents, getDayTimeIntervals, getDayViewEvents, getEndOfWeek, getGroupToResourceIdMap, getLabel, getMonthDays, getMonthPositionedEvents, getMonthRange, getMonthViewEvents, getMonthsByQuarter, getMonthsList, getOrderedResources, getOverlapClusters, getRenderableMonthEventSegments, getResourcesDayViewEvents, getResourcesMonthViewLayout, getResourcesWeekViewEvents, getStartOfWeek, getVisibleEvents, getWeekDays, getWeekLabel, getWeekNumber, getWeekPositionedEvents, getWeekViewEvents, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultiDayEvent, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, provideDragContext, provideScheduleDragState, sortEvents, toDateString, toTimeString, useDragContext, useScheduleHeaderLabels, validateEvent };
9267
9410
 
9268
9411
  //# sourceMappingURL=index.mjs.map