@mantine-vue/schedule 3.4.0 → 3.5.0

package/lib/component-props.d.ts

@@ -99,7 +99,8 @@ export interface BaseViewOwnProps {
      */
     recurrenceExpansionLimit?: number;
     /**
-     * If set, background events can be focused and clicked. Has no effect in static mode.
+     * If set, background events can be focused and clicked. Combined with event resize, timed
+     * background events can also be resized. Has no effect in static mode.
      * @default false
      */
     withInteractiveBackgroundEvents?: boolean;

package/lib/components/DayView/DayView.types.d.ts

@@ -2,13 +2,13 @@ import type { CSSProperties } from 'vue';
 import type { BoxProps, Factory, ScrollAreaProps } from '@mantine-vue/core';
 import type { StylesApiProps } from '@mantine-vue/core/styles-api';
 import type { EventSlots, ForwardedProps, TimeViewEmits, TimeViewOwnProps } from '../../component-props';
-import type { DateLabelFormat } from '../../types';
+import type { DateLabelFormat, ScheduleEventOverlapMode } from '../../types';
 import type { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator.types';
 import type { MoreEventsEmits, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents.types';
 import type { ScheduleEventStylesNames } from '../ScheduleEvent/ScheduleEvent.types';
 import type { CombinedScheduleHeaderStylesNames, ScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader.types';
 import type { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect.types';
-export type DayViewOwnStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent';
+export type DayViewOwnStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent' | 'dayViewBackgroundEventResizeHandle';
 /**
  * `DayView` forwards `classNames` and `styles` to the components it renders, so their
  * selectors are part of its Styles API. The month/year select is excluded because the day
@@ -16,11 +16,15 @@ export type DayViewOwnStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollA
  */
 export type DayViewStylesNames = DayViewOwnStylesNames | MoreEventsStylesNames | ScheduleEventStylesNames | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames> | CurrentTimeIndicatorStylesNames | ScheduleHeaderStylesNames;
 export type DayViewCssVariables = {
-    dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';
+    dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height' | '--event-raise-delay' | '--event-z-index' | '--event-z-index-raised';
 };
 export type DayViewSlots = EventSlots;
 /** Props declared by `DayView` itself. See `DayViewProps` for the full public type. */
 export interface DayViewOwnProps extends TimeViewOwnProps, StylesApiProps<DayViewFactory> {
+    /** Determines how overlapping events are laid out. @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
+    /** Time in ms before a hovered cascade event is raised above covering events. @default 600 */
+    eventOverlapRaiseDelay?: number;
     /**
      * Length of one time slot in minutes.
      * @default 15

package/lib/components/DayView/get-day-view-events/get-day-positioned-events.d.ts

@@ -1,4 +1,4 @@
-import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleEventOverlapMode } from '../../../types';
 interface GetDayPositionedEventsInput {
     /** Date at which events are positioned, used to check if events are all-day */
     date: AnyDateValue;
@@ -10,6 +10,8 @@ interface GetDayPositionedEventsInput {
     endTime?: string;
     /** Number of minutes per time slot, used to align the canvas to whole slots */
     intervalMinutes?: number;
+    /** Determines how overlapping events are laid out. @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
-export declare function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, }: GetDayPositionedEventsInput): DayPositionedEventData[];
+export declare function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, eventOverlapMode, }: GetDayPositionedEventsInput): DayPositionedEventData[];
 export {};

package/lib/components/DayView/get-day-view-events/get-day-view-events.d.ts

@@ -1,12 +1,13 @@
-import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleEventOverlapMode } from '../../../types';
 interface GetDayViewEventsInput {
     events: ScheduleEventData[] | undefined;
     date: AnyDateValue;
     startTime?: string;
     endTime?: string;
     intervalMinutes?: number;
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
-export declare function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, }: GetDayViewEventsInput): {
+export declare function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, eventOverlapMode, }: GetDayViewEventsInput): {
     allDayEvents: DayPositionedEventData[];
     regularEvents: DayPositionedEventData[];
     backgroundTimedEvents: DayPositionedEventData[];

package/lib/components/ResourcesDayView/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ResourcesDayView';
-export * from './get-overlap-clusters/get-overlap-clusters';
 export * from './get-resources-day-view-events/get-resources-day-view-events';

package/lib/components/Schedule/Schedule.types.d.ts

@@ -88,7 +88,7 @@ export interface ScheduleOwnProps extends StylesApiProps<ScheduleFactory> {
      * @default () => true
      */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
-    /** If set, background events can be focused and clicked in day, week and month views. */
+    /** If set, background events can be focused and clicked. Combined with event resize, timed background events in day and week views can also be resized. */
     withInteractiveBackgroundEvents?: boolean;
     /**
      * Maximum number of instances generated per recurring series.

package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.types.d.ts

@@ -2,6 +2,7 @@ import type { VNodeChild } from 'vue';
 import type { BoxProps } from '@mantine-vue/core';
 import type { RenderEvent, RenderEventBody } from '../../component-props';
 import type { ScheduleEventData } from '../../types';
+export type ScheduleBackgroundEventResizeEdge = 'top' | 'bottom' | 'start' | 'end';
 export interface ScheduleBackgroundEventOwnProps {
     /** Background event to display. */
     event: ScheduleEventData;
@@ -11,11 +12,22 @@ export interface ScheduleBackgroundEventOwnProps {
     renderEvent?: RenderEvent;
     /** Function to customize event body. */
     renderEventBody?: RenderEventBody;
+    /** If set, resize handles are rendered on both edges. */
+    withResize?: boolean;
+    /** Axis along which the event is resized. @default 'vertical' */
+    resizeAxis?: 'vertical' | 'horizontal';
+    /** Props passed to both resize handles. */
+    resizeHandleProps?: Record<string, any>;
+    /** Whether this event is currently being resized. */
+    isResizing?: boolean;
+    /** Edge currently being dragged. */
+    activeResizeEdge?: ScheduleBackgroundEventResizeEdge | null;
 }
 export interface ScheduleBackgroundEventProps extends Omit<BoxProps, keyof ScheduleBackgroundEventOwnProps>, ScheduleBackgroundEventOwnProps {
 }
 export interface ScheduleBackgroundEventEmits {
     eventClick: [event: ScheduleEventData, nativeEvent: MouseEvent];
+    resizeStart: [edge: ScheduleBackgroundEventResizeEdge, nativeEvent: PointerEvent];
 }
 export interface ScheduleBackgroundEventSlots {
     default?: (props: {

package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.vue.d.ts

@@ -1,8 +1,10 @@
 import type { ScheduleBackgroundEventOwnProps, ScheduleBackgroundEventSlots } from './ScheduleBackgroundEvent.types';
 type __VLS_Slots = ScheduleBackgroundEventSlots;
 declare const __VLS_base: import("vue").DefineComponent<ScheduleBackgroundEventOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resizeStart: (edge: import("./ScheduleBackgroundEvent.types").ScheduleBackgroundEventResizeEdge, nativeEvent: PointerEvent) => any;
     eventClick: (event: import("../..").ScheduleEventData, nativeEvent: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ScheduleBackgroundEventOwnProps> & Readonly<{
+    onResizeStart?: ((edge: import("./ScheduleBackgroundEvent.types").ScheduleBackgroundEventResizeEdge, nativeEvent: PointerEvent) => any) | undefined;
     onEventClick?: ((event: import("../..").ScheduleEventData, nativeEvent: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/lib/components/WeekView/WeekView.types.d.ts

@@ -2,18 +2,18 @@ import type { CSSProperties, VNodeChild } from 'vue';
 import type { BoxProps, Factory, ScrollAreaProps } from '@mantine-vue/core';
 import type { StylesApiProps } from '@mantine-vue/core/styles-api';
 import type { EventSlots, ForwardedProps, TimeViewEmits, TimeViewOwnProps } from '../../component-props';
-import type { DateLabelFormat, DateStringValue, DayOfWeek } from '../../types';
+import type { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleEventOverlapMode } from '../../types';
 import type { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator.types';
 import type { ScheduleEventStylesNames } from '../ScheduleEvent/ScheduleEvent.types';
 import type { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader.types';
-export type WeekViewOwnStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent';
+export type WeekViewOwnStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | 'weekViewBackgroundEventResizeHandle';
 /**
  * `WeekView` forwards `classNames` and `styles` to the components it renders, so their
  * selectors are part of its Styles API.
  */
 export type WeekViewStylesNames = WeekViewOwnStylesNames | ScheduleEventStylesNames | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames;
 export type WeekViewCssVariables = {
-    weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height';
+    weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height' | '--event-raise-delay' | '--event-z-index' | '--event-z-index-raised';
 };
 /** Range covered by the label shown in the week header. */
 export interface WeekLabelPayload {
@@ -31,6 +31,10 @@ export interface WeekViewSlots extends EventSlots {
 }
 /** Props declared by `WeekView` itself. See `WeekViewProps` for the full public type. */
 export interface WeekViewOwnProps extends TimeViewOwnProps, StylesApiProps<WeekViewFactory> {
+    /** Determines how overlapping events are laid out. @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
+    /** Time in ms before a hovered cascade event is raised above covering events. @default 600 */
+    eventOverlapRaiseDelay?: number;
     /**
      * Length of one time slot in minutes.
      * @default 60

package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts

@@ -1,4 +1,4 @@
-import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, WeekPositionedEventData } from '../../../types';
+import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, ScheduleEventOverlapMode, WeekPositionedEventData } from '../../../types';
 export interface GetWeekPositionedEventsInput {
     /** Date (week start) at which events are positioned, used to check if events are all-day */
     date: AnyDateValue;
@@ -16,6 +16,8 @@ export interface GetWeekPositionedEventsInput {
     weekendDays?: DayOfWeek[];
     /** If set to false, weekend days are hidden @default true */
     withWeekendDays?: boolean;
+    /** Determines how overlapping events are laid out. @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
 /** Events grouped by week day date (YYYY-MM-DD 00:00:00) and by columns */
 export interface GroupedWeekEvents {
@@ -23,4 +25,4 @@ export interface GroupedWeekEvents {
     regularEvents: Record<DateStringValue, WeekPositionedEventData[]>;
     backgroundEvents: Record<DateStringValue, WeekPositionedEventData[]>;
 }
-export declare function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek, weekendDays, withWeekendDays, }: GetWeekPositionedEventsInput): GroupedWeekEvents;
+export declare function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek, weekendDays, withWeekendDays, eventOverlapMode, }: GetWeekPositionedEventsInput): GroupedWeekEvents;

package/lib/hooks/use-event-resize.d.ts

@@ -19,10 +19,13 @@ export interface UseEventResizeInput {
     resizeIntervalMinutes?: () => number | undefined;
     onEventResize: (data: EventDropData) => void;
     canResizeEvent: () => ((event: ScheduleEventData) => boolean) | undefined;
+    withBackgroundEvents?: () => boolean;
 }
 export declare function useEventResize(input: UseEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent, }: HandleResizeStartInput) => void;
-    getResizePosition: (eventId: string | number) => {
+    isResizing: import("vue").ComputedRef<boolean>;
+    resizingEventId: import("vue").ComputedRef<string | number | null>;
+    getResizePosition: (eventId: string | number, eventDate?: string) => {
         top: number;
         height: number;
     } | null;

package/lib/hooks/use-horizontal-event-resize.d.ts

@@ -24,8 +24,10 @@ export declare function useHorizontalEventResize(input: {
     resizeIntervalMinutes?: () => number | undefined;
     onEventResize: (data: EventDropData) => void;
     canResizeEvent: () => ((event: ScheduleEventData) => boolean) | undefined;
+    withBackgroundEvents?: () => boolean;
 }): {
     state: import("vue").ShallowRef<ResizeState | null, ResizeState | null>;
+    readonly resizingEdge: ResizeEdge | null;
     handleResizeStart: (params: {
         event: ScheduleEventData;
         edge: ResizeEdge;
@@ -37,7 +39,7 @@ export declare function useHorizontalEventResize(input: {
         dayIndex?: number;
         dayCount?: number;
     }) => void;
-    getResizePosition: (id: string | number) => {
+    getResizePosition: (id: string | number, eventDate?: string) => {
         left: number;
         width: number;
     } | null;

package/lib/types.d.ts

@@ -97,6 +97,8 @@ interface ScheduleEventRuntimeMeta {
 }
 /** Event data object passed to all `@mantine/schedule` components */
 export type ScheduleEventData<Payload extends EventPayload = EventPayload> = (ScheduleSingleEventData<Payload> & ScheduleEventRuntimeMeta) | (ScheduleRecurringSeriesEventData<Payload> & ScheduleEventRuntimeMeta) | (ScheduleRecurringOverrideEventData<Payload> & ScheduleEventRuntimeMeta);
+/** Controls how events that overlap in time are laid out along the horizontal axis. */
+export type ScheduleEventOverlapMode = 'columns' | 'cascade';
 export interface DayEventPositionData {
     /** All day events */
     allDay: boolean;

package/lib/utils/apply-cascade-layout/apply-cascade-layout.d.ts

@@ -0,0 +1,5 @@
+import type { DayEventPositionData, ScheduleEventData } from '../../types';
+export type CascadePositionedEvent = ScheduleEventData & {
+    position: Pick<DayEventPositionData, 'allDay' | 'column' | 'width' | 'offset' | 'overlaps'>;
+};
+export declare function applyCascadeLayout<T extends CascadePositionedEvent>(events: T[]): void;

package/lib/utils/get-overlap-clusters/get-overlap-clusters.d.ts

@@ -0,0 +1,2 @@
+import type { ScheduleEventData } from '../../types';
+export declare function getOverlapClusters<T extends ScheduleEventData>(events: T[]): T[][];

package/lib/utils/index.d.ts

@@ -34,6 +34,8 @@ export { calculateDropTime } from './calculate-drop-time/calculate-drop-time';
 export { calculateMonthDropDate } from './calculate-month-drop-date/calculate-month-drop-date';
 export { getBusinessHoursMod } from './get-business-hours-mod/get-business-hours-mod';
 export { expandRecurringEvents } from './expand-recurring-events/expand-recurring-events';
+export { applyCascadeLayout } from './apply-cascade-layout/apply-cascade-layout';
+export { getOverlapClusters } from './get-overlap-clusters/get-overlap-clusters';
 export type { DayTimeInterval } from './get-day-time-intervals/get-day-time-intervals';
 export type { ParsedTime } from './parse-time-string/parse-time-string';
 export type { CalculateDropTimeInput, CalculateDropTimeResult, } from './calculate-drop-time/calculate-drop-time';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/schedule",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Vue schedule and calendar components equivalent to @mantine/schedule",
   "license": "MIT",
   "files": [
@@ -44,9 +44,9 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/core": "3.4.0",
-    "@mantine-vue/dates": "3.4.0",
-    "@mantine-vue/hooks": "3.4.0",
+    "@mantine-vue/core": "3.5.0",
+    "@mantine-vue/dates": "3.5.0",
+    "@mantine-vue/hooks": "3.5.0",
     "dayjs": ">=1.0.0",
     "vue": "^3.5.0"
   }