@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/cjs/index.cjs +308 -164
- package/cjs/index.cjs.map +1 -1
- package/esm/index.mjs +308 -165
- package/esm/index.mjs.map +1 -1
- package/lib/component-props.d.ts +2 -1
- package/lib/components/DayView/DayView.types.d.ts +7 -3
- package/lib/components/DayView/get-day-view-events/get-day-positioned-events.d.ts +4 -2
- package/lib/components/DayView/get-day-view-events/get-day-view-events.d.ts +3 -2
- package/lib/components/ResourcesDayView/index.d.ts +0 -1
- package/lib/components/Schedule/Schedule.types.d.ts +1 -1
- package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.types.d.ts +12 -0
- package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.vue.d.ts +2 -0
- package/lib/components/WeekView/WeekView.types.d.ts +7 -3
- package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts +4 -2
- package/lib/hooks/use-event-resize.d.ts +4 -1
- package/lib/hooks/use-horizontal-event-resize.d.ts +3 -1
- package/lib/types.d.ts +2 -0
- package/lib/utils/apply-cascade-layout/apply-cascade-layout.d.ts +5 -0
- package/lib/utils/get-overlap-clusters/get-overlap-clusters.d.ts +2 -0
- package/lib/utils/index.d.ts +2 -0
- package/package.json +4 -4
- package/styles.css +549 -270
- package/styles.layer.css +549 -270
- package/lib/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.d.ts +0 -2
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: "
|
|
1238
|
-
eventInner: "
|
|
1239
|
-
eventResizeHandle: "
|
|
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, {
|
|
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 = () =>
|
|
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: "
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
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 = (
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
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
|
-
}, {
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
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
|
|
3345
|
-
|
|
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, [
|
|
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)
|
|
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: "
|
|
4924
|
-
weekViewRoot: "
|
|
4925
|
-
|
|
4926
|
-
|
|
4927
|
-
|
|
4928
|
-
|
|
4929
|
-
|
|
4930
|
-
|
|
4931
|
-
|
|
4932
|
-
|
|
4933
|
-
|
|
4934
|
-
|
|
4935
|
-
|
|
4936
|
-
|
|
4937
|
-
|
|
4938
|
-
|
|
4939
|
-
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
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 = (
|
|
5357
|
-
|
|
5358
|
-
|
|
5359
|
-
|
|
5360
|
-
|
|
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 }), {
|
|
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.
|
|
5585
|
-
|
|
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: "
|
|
6452
|
-
resourcesDayViewRoot: "
|
|
6453
|
-
resourcesDayViewScrollArea: "
|
|
6454
|
-
resourcesDayViewInner: "
|
|
6455
|
-
resourcesDayViewTimeLabelsRow: "
|
|
6456
|
-
resourcesDayViewCorner: "
|
|
6457
|
-
resourcesDayViewTimeLabel: "
|
|
6458
|
-
resourcesDayViewRow: "
|
|
6459
|
-
resourcesDayViewResourceLabel: "
|
|
6460
|
-
resourcesDayViewGroupColumn: "
|
|
6461
|
-
resourcesDayViewGroupColumnEmpty: "
|
|
6462
|
-
resourcesDayViewRowSlots: "
|
|
6463
|
-
resourcesDayViewRowSlot: "
|
|
6464
|
-
resourcesDayViewCurrentTimeIndicator: "
|
|
6465
|
-
resourcesDayViewCurrentTimeIndicatorLine: "
|
|
6466
|
-
resourcesDayViewCurrentTimeIndicatorThumb: "
|
|
6467
|
-
resourcesDayViewCurrentTimeIndicatorTimeBubble: "
|
|
6468
|
-
resourcesDayViewBackgroundEvent: "
|
|
6469
|
-
resourcesDayViewAllDayEvent: "
|
|
6470
|
-
resourcesDayViewEventWrapper: "
|
|
6471
|
-
resourcesDayViewResizeHandle: "
|
|
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: `${
|
|
6840
|
-
right: `${100 -
|
|
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
|
-
|
|
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: "
|
|
7312
|
-
resourcesWeekViewRoot: "
|
|
7313
|
-
resourcesWeekViewScrollArea: "
|
|
7314
|
-
resourcesWeekViewInner: "
|
|
7315
|
-
resourcesWeekViewHeaderRows: "
|
|
7316
|
-
resourcesWeekViewCorner: "
|
|
7317
|
-
resourcesWeekViewHeaderContent: "
|
|
7318
|
-
resourcesWeekViewDayLabelsRow: "
|
|
7319
|
-
resourcesWeekViewDayLabel: "
|
|
7320
|
-
resourcesWeekViewTimeLabelsRow: "
|
|
7321
|
-
resourcesWeekViewTimeLabel: "
|
|
7322
|
-
resourcesWeekViewRow: "
|
|
7323
|
-
resourcesWeekViewResourceLabel: "
|
|
7324
|
-
resourcesWeekViewGroupColumn: "
|
|
7325
|
-
resourcesWeekViewGroupColumnEmpty: "
|
|
7326
|
-
resourcesWeekViewRowSlots: "
|
|
7327
|
-
resourcesWeekViewRowSlot: "
|
|
7328
|
-
resourcesWeekViewBackgroundEvent: "
|
|
7329
|
-
resourcesWeekViewAllDayEvent: "
|
|
7330
|
-
resourcesWeekViewEventWrapper: "
|
|
7331
|
-
resourcesWeekViewResizeHandle: "
|
|
7332
|
-
resourcesWeekViewCurrentTimeIndicator: "
|
|
7333
|
-
resourcesWeekViewCurrentTimeIndicatorLine: "
|
|
7334
|
-
resourcesWeekViewCurrentTimeIndicatorThumb: "
|
|
7335
|
-
resourcesWeekViewCurrentTimeIndicatorTimeBubble: "
|
|
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) +
|
|
7757
|
-
right: `${100 - dayOffset(dayIndex) - (
|
|
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
|
-
|
|
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
|