@mantine-vue/schedule 3.0.0 → 3.2.0

package/lib/components/YearView/YearView.d.ts

@@ -1,151 +1,9 @@
-import { type PropType } from 'vue';
-import type { YearViewProps } from '../../component-props';
-import type { DateLabelFormat, DayOfWeek, ScheduleEventData } from '../../types';
-export declare const YearView: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    firstDayOfWeek: {
-        type: PropType<DayOfWeek>;
-        default: number;
-    };
-    weekdayFormat: {
-        type: PropType<DateLabelFormat>;
-        default: string;
-    };
-    weekendDays: {
-        type: PropType<DayOfWeek[]>;
-        default: () => number[];
-    };
-    withWeekNumbers: BooleanConstructor;
-    withWeekDays: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    consistentWeeks: BooleanConstructor;
-    highlightToday: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withOutsideDays: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    monthsListFormat: {
-        type: PropType<DateLabelFormat>;
-        default: string;
-    };
-    getDayProps: PropType<YearViewProps["getDayProps"]>;
-    getWeekNumberProps: PropType<YearViewProps["getWeekNumberProps"]>;
-    onDayClick: PropType<YearViewProps["onDayClick"]>;
-    onMonthClick: PropType<YearViewProps["onMonthClick"]>;
-    onWeekNumberClick: PropType<YearViewProps["onWeekNumberClick"]>;
-    date: {
-        type: PropType<Date | import("../..").DateStringValue>;
-        required: boolean;
-    };
-    onDateChange: PropType<(date: import("../..").DateStringValue) => void>;
-    events: PropType<ScheduleEventData[]>;
-    locale: StringConstructor;
-    radius: PropType<string | number>;
-    labels: ObjectConstructor;
-    mode: {
-        type: PropType<import("../..").ScheduleMode>;
-        default: string;
-    };
-    withHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onViewChange: PropType<(view: import("../..").ScheduleViewLevel) => void>;
-    previousControlProps: PropType<import("../../component-props").NativeButtonProps>;
-    nextControlProps: PropType<import("../../component-props").NativeButtonProps>;
-    todayControlProps: PropType<import("../../component-props").NativeButtonProps>;
-    viewSelectProps: ObjectConstructor;
-    renderEventBody: PropType<import("../ScheduleEvent").RenderEventBody>;
-    renderEvent: PropType<import("../ScheduleEvent").RenderEvent>;
-    onEventClick: PropType<(event: ScheduleEventData, nativeEvent: MouseEvent) => void>;
-    recurrenceExpansionLimit: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    firstDayOfWeek: {
-        type: PropType<DayOfWeek>;
-        default: number;
-    };
-    weekdayFormat: {
-        type: PropType<DateLabelFormat>;
-        default: string;
-    };
-    weekendDays: {
-        type: PropType<DayOfWeek[]>;
-        default: () => number[];
-    };
-    withWeekNumbers: BooleanConstructor;
-    withWeekDays: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    consistentWeeks: BooleanConstructor;
-    highlightToday: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withOutsideDays: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    monthsListFormat: {
-        type: PropType<DateLabelFormat>;
-        default: string;
-    };
-    getDayProps: PropType<YearViewProps["getDayProps"]>;
-    getWeekNumberProps: PropType<YearViewProps["getWeekNumberProps"]>;
-    onDayClick: PropType<YearViewProps["onDayClick"]>;
-    onMonthClick: PropType<YearViewProps["onMonthClick"]>;
-    onWeekNumberClick: PropType<YearViewProps["onWeekNumberClick"]>;
-    date: {
-        type: PropType<Date | import("../..").DateStringValue>;
-        required: boolean;
-    };
-    onDateChange: PropType<(date: import("../..").DateStringValue) => void>;
-    events: PropType<ScheduleEventData[]>;
-    locale: StringConstructor;
-    radius: PropType<string | number>;
-    labels: ObjectConstructor;
-    mode: {
-        type: PropType<import("../..").ScheduleMode>;
-        default: string;
-    };
-    withHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onViewChange: PropType<(view: import("../..").ScheduleViewLevel) => void>;
-    previousControlProps: PropType<import("../../component-props").NativeButtonProps>;
-    nextControlProps: PropType<import("../../component-props").NativeButtonProps>;
-    todayControlProps: PropType<import("../../component-props").NativeButtonProps>;
-    viewSelectProps: ObjectConstructor;
-    renderEventBody: PropType<import("../ScheduleEvent").RenderEventBody>;
-    renderEvent: PropType<import("../ScheduleEvent").RenderEvent>;
-    onEventClick: PropType<(event: ScheduleEventData, nativeEvent: MouseEvent) => void>;
-    recurrenceExpansionLimit: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    mode: import("../..").ScheduleMode;
-    firstDayOfWeek: DayOfWeek;
-    weekendDays: DayOfWeek[];
-    consistentWeeks: boolean;
-    highlightToday: boolean;
-    withWeekNumbers: boolean;
-    weekdayFormat: DateLabelFormat;
-    monthsListFormat: DateLabelFormat;
-    withOutsideDays: boolean;
-    withHeader: boolean;
-    recurrenceExpansionLimit: number;
-    withWeekDays: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export type { YearViewProps };
-export type YearViewStylesNames = 'yearView' | 'yearViewMonths' | 'yearViewMonth' | 'yearViewWeekdays' | 'yearViewWeek' | 'yearViewWeekNumber' | 'yearViewWeekday' | 'yearViewWeekdaysCorner' | 'yearViewDay' | 'yearViewMonthCaption' | 'yearViewDayIndicators' | 'yearViewDayIndicator';
+export declare const YearView: import("@mantine-vue/core").MantineComponent<{
+    props: Omit<import("./YearView.types").YearViewProps, "rootRef">;
+    emits: import("./YearView.types").YearViewEmits;
+    ref: HTMLDivElement;
+    element: "div";
+    stylesNames: import("./YearView.types").YearViewStylesNames;
+    vars: import("./YearView.types").YearViewCssVariables;
+}>;
+export type { YearViewCssVariables, YearViewEmits, YearViewFactory, YearViewOwnProps, YearViewOwnStylesNames, YearViewProps, YearViewStylesNames, } from './YearView.types';

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

@@ -0,0 +1,87 @@
+import type { BoxProps, Factory } from '@mantine-vue/core';
+import type { StylesApiProps } from '@mantine-vue/core/styles-api';
+import type { BaseViewEmits, BaseViewOwnProps, ForwardedProps, NativeButtonProps } from '../../component-props';
+import type { DateLabelFormat, DateStringValue, DayOfWeek } from '../../types';
+import type { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader.types';
+import type { MonthYearSelectEmits, MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect.types';
+export type YearViewOwnStylesNames = 'yearView' | 'yearViewMonths' | 'yearViewMonth' | 'yearViewMonthCaption' | 'yearViewWeekdays' | 'yearViewWeekday' | 'yearViewWeekdaysCorner' | 'yearViewWeek' | 'yearViewWeekNumber' | 'yearViewDay' | 'yearViewDayIndicators' | 'yearViewDayIndicator';
+/**
+ * `YearView` forwards `classNames` and `styles` to the header it renders, so the header
+ * selectors are part of its Styles API.
+ */
+export type YearViewStylesNames = YearViewOwnStylesNames | CombinedScheduleHeaderStylesNames;
+export type YearViewCssVariables = {
+    yearView: '--year-view-radius';
+};
+/** Props declared by `YearView` itself. See `YearViewProps` for the full public type. */
+export interface YearViewOwnProps extends BaseViewOwnProps, StylesApiProps<YearViewFactory> {
+    /**
+     * Day the week starts on, `0` – Sunday.
+     * @default 1
+     */
+    firstDayOfWeek?: DayOfWeek;
+    /**
+     * Format of the weekday names above each month.
+     * @default 'dd'
+     */
+    weekdayFormat?: DateLabelFormat;
+    /**
+     * Days marked as weekend, `0` – Sunday.
+     * @default [0, 6]
+     */
+    weekendDays?: DayOfWeek[];
+    /**
+     * If set, week numbers are displayed in the first column of each month.
+     * @default false
+     */
+    withWeekNumbers?: boolean;
+    /**
+     * If set, weekday names are displayed above each month.
+     * @default true
+     */
+    withWeekDays?: boolean;
+    /**
+     * If set, every month renders six weeks so the grids all have the same height.
+     * @default false
+     */
+    consistentWeeks?: boolean;
+    /**
+     * If set, today is highlighted.
+     * @default true
+     */
+    highlightToday?: boolean;
+    /**
+     * If set, days of the neighbouring months are rendered.
+     * @default true
+     */
+    withOutsideDays?: boolean;
+    /**
+     * Format of the month captions.
+     * @default 'MMMM'
+     */
+    monthsListFormat?: DateLabelFormat;
+    /** Returns extra props for the control of the given day. */
+    getDayProps?: (date: DateStringValue) => NativeButtonProps;
+    /** Returns extra props for the control of the week that starts on the given day. */
+    getWeekNumberProps?: (weekStartDate: DateStringValue) => NativeButtonProps;
+    /** Props passed to the year select in the header. */
+    monthYearSelectProps?: ForwardedProps<MonthYearSelectProps, MonthYearSelectEmits>;
+}
+export interface YearViewProps extends Omit<BoxProps, keyof YearViewOwnProps>, YearViewOwnProps {
+}
+export interface YearViewEmits extends BaseViewEmits {
+    /** Emitted when a day is clicked. */
+    dayClick: [date: DateStringValue, nativeEvent: MouseEvent];
+    /** Emitted when a month caption is clicked. */
+    monthClick: [month: DateStringValue];
+    /** Emitted when a week number is clicked. */
+    weekNumberClick: [date: DateStringValue, nativeEvent: MouseEvent];
+}
+export type YearViewFactory = Factory<{
+    props: Omit<YearViewProps, 'rootRef'>;
+    emits: YearViewEmits;
+    ref: HTMLDivElement;
+    element: 'div';
+    stylesNames: YearViewStylesNames;
+    vars: YearViewCssVariables;
+}>;

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

@@ -0,0 +1,35 @@
+import type { ScheduleEventData } from '../../types';
+import type { YearViewOwnProps } from './YearView.types';
+declare const defaultProps: {
+    mode: "default";
+    withHeader: true;
+    recurrenceExpansionLimit: number;
+    firstDayOfWeek: 1;
+    weekdayFormat: string;
+    weekendDays: (0 | 6)[];
+    withWeekDays: true;
+    highlightToday: true;
+    withOutsideDays: true;
+    monthsListFormat: string;
+};
+declare const COLUMNS = 7;
+declare const MAX_DAY_INDICATORS = 3;
+declare const varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { defaultProps, varsResolver, COLUMNS, MAX_DAY_INDICATORS };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<YearViewOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dateChange: (date: string) => any;
+    dayClick: (date: string, nativeEvent: MouseEvent) => any;
+    eventClick: (event: ScheduleEventData, nativeEvent: MouseEvent) => any;
+    viewChange: (view: import("../..").ScheduleViewLevel) => any;
+    weekNumberClick: (date: string, nativeEvent: MouseEvent) => any;
+    monthClick: (month: string) => any;
+}, string, import("vue").PublicProps, Readonly<YearViewOwnProps> & Readonly<{
+    onDateChange?: ((date: string) => any) | undefined;
+    onDayClick?: ((date: string, nativeEvent: MouseEvent) => any) | undefined;
+    onEventClick?: ((event: ScheduleEventData, nativeEvent: MouseEvent) => any) | undefined;
+    onViewChange?: ((view: import("../..").ScheduleViewLevel) => any) | undefined;
+    onWeekNumberClick?: ((date: string, nativeEvent: MouseEvent) => any) | undefined;
+    onMonthClick?: ((month: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/shared.d.ts

@@ -1,151 +1,81 @@
 import dayjs from 'dayjs';
-import { type CSSProperties, type PropType, type VNodeChild } from 'vue';
-import type { BaseViewProps, EventDropData, NativeButtonProps, RenderEvent, RenderEventBody, TimeSlotClickData } from '../component-props';
-import type { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../types';
-import type { BusinessHoursValue } from '../utils';
-export declare const baseViewProps: {
-    date: {
-        type: PropType<Date | DateStringValue>;
-        required: boolean;
-    };
-    onDateChange: PropType<(date: DateStringValue) => void>;
-    events: PropType<ScheduleEventData[]>;
-    locale: StringConstructor;
-    radius: PropType<string | number>;
-    labels: ObjectConstructor;
-    mode: {
-        type: PropType<ScheduleMode>;
-        default: string;
-    };
-    withHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onViewChange: PropType<(view: ScheduleViewLevel) => void>;
-    previousControlProps: PropType<NativeButtonProps>;
-    nextControlProps: PropType<NativeButtonProps>;
-    todayControlProps: PropType<NativeButtonProps>;
-    viewSelectProps: ObjectConstructor;
-    renderEventBody: PropType<RenderEventBody>;
-    renderEvent: PropType<RenderEvent>;
-    onEventClick: PropType<(event: ScheduleEventData, nativeEvent: MouseEvent) => void>;
-    recurrenceExpansionLimit: {
-        type: NumberConstructor;
-        default: number;
-    };
-};
-export declare const timeViewProps: {
-    startTime: {
-        type: StringConstructor;
-        default: string;
-    };
-    endTime: {
-        type: StringConstructor;
-        default: string;
-    };
-    intervalMinutes: {
-        type: NumberConstructor;
-        default: number;
-    };
-    slotLabelFormat: {
-        type: PropType<DateLabelFormat>;
-        default: string;
-    };
-    withCurrentTimeIndicator: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    withCurrentTimeBubble: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    getCurrentTime: PropType<() => AnyDateValue>;
-    slotHeight: {
-        type: PropType<CSSProperties["height"]>;
-        default: number;
-    };
-    highlightBusinessHours: BooleanConstructor;
-    businessHours: PropType<BusinessHoursValue>;
-    withEventsDragAndDrop: BooleanConstructor;
-    onEventDrop: PropType<(data: EventDropData) => void>;
-    canDragEvent: PropType<(event: ScheduleEventData) => boolean>;
-    onEventDragStart: PropType<(event: ScheduleEventData) => void>;
-    onEventDragEnd: PropType<() => void>;
-    onTimeSlotClick: PropType<(data: TimeSlotClickData) => void>;
-    onAllDaySlotClick: PropType<(date: DateStringValue, nativeEvent: MouseEvent) => void>;
-    withDragSlotSelect: BooleanConstructor;
-    onSlotDragEnd: FunctionConstructor;
-    startScrollTime: StringConstructor;
-    onExternalEventDrop: FunctionConstructor;
-    withEventResize: BooleanConstructor;
-    onEventResize: PropType<(data: EventDropData) => void>;
-    canResizeEvent: PropType<(event: ScheduleEventData) => boolean>;
-    date: {
-        type: PropType<Date | DateStringValue>;
-        required: boolean;
-    };
-    onDateChange: PropType<(date: DateStringValue) => void>;
-    events: PropType<ScheduleEventData[]>;
-    locale: StringConstructor;
-    radius: PropType<string | number>;
-    labels: ObjectConstructor;
-    mode: {
-        type: PropType<ScheduleMode>;
-        default: string;
-    };
-    withHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onViewChange: PropType<(view: ScheduleViewLevel) => void>;
-    previousControlProps: PropType<NativeButtonProps>;
-    nextControlProps: PropType<NativeButtonProps>;
-    todayControlProps: PropType<NativeButtonProps>;
-    viewSelectProps: ObjectConstructor;
-    renderEventBody: PropType<RenderEventBody>;
-    renderEvent: PropType<RenderEvent>;
-    onEventClick: PropType<(event: ScheduleEventData, nativeEvent: MouseEvent) => void>;
-    recurrenceExpansionLimit: {
-        type: NumberConstructor;
-        default: number;
-    };
-};
+import type { EventSlots, RenderEvent, RenderEventBody } from '../component-props';
+import type { DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData } from '../types';
+/**
+ * Resolves a schedule `radius` prop to a CSS value.
+ *
+ * Deliberately not `getRadius` from the core package: this accepts any CSS length
+ * (`12px`, `1em`, `clamp(...)`) alongside the `theme.radius` keys, and treats a plain
+ * number as pixels rather than rem.
+ */
 export declare function resolveScheduleRadius(radius: string | number | undefined): string | undefined;
+/** A callback coalesced to one animation frame, with the pending frame cancellable. */
+export interface RafThrottled<Args extends unknown[]> {
+    (...args: Args): void;
+    /** Drops the pending frame. Call this the moment the gesture ends. */
+    cancel: () => void;
+}
+/**
+ * Runs `callback` at most once per animation frame with the most recent arguments.
+ *
+ * Pointer and drag events fire far faster than the browser paints. Handling every one of them
+ * means the schedule reads layout and re-renders several times per frame, which makes the drag
+ * fall behind the pointer and keep catching up after it has stopped. Coalescing to one frame
+ * keeps the work bounded, and `cancel` guarantees nothing lands after the drop.
+ */
+export declare function rafThrottle<Args extends unknown[]>(callback: (...args: Args) => void): RafThrottled<Args>;
+/**
+ * Styles produced by `getStyles` for one selector. `any` matches the core signature: the value
+ * is spread onto an element, where `class` and `style` accept every shape Vue supports.
+ */
+export type SelectorStyles = {
+    class: any;
+    style: any;
+};
+/**
+ * Memoizes `getStyles(selector)` for selectors that take no per-element options.
+ *
+ * A view renders the same selector for hundreds of slots, and every `getStyles` call rebuilds
+ * the class list and merges the resolved styles and CSS variables. Wrapping each selector in a
+ * `computed` turns that into one evaluation per selector per change of the theme or the props,
+ * instead of one per element per render — which is what a drag re-render is made of.
+ */
+export declare function useStaticStyles<Selector extends string>(getStyles: (selector: Selector) => SelectorStyles): (selector: Selector) => SelectorStyles;
+/** Converts a `slotHeight` / `rowHeight` style prop to a CSS length. */
+export declare function cssSize(value: string | number | undefined): string | undefined;
 export declare function getExpandedEvents(events: ScheduleEventData[] | undefined, rangeStart: Date | string, rangeEnd: Date | string, expansionLimit: number): ScheduleEventData[];
 export declare function formatLabel(date: Date | string, locale: string | undefined, format: DateLabelFormat): string;
-/** Scoped slots that mirror the `renderEvent` / `renderEventBody` props. */
-export interface EventSlots {
-    eventBody?: (props: {
-        event: ScheduleEventData;
-    }) => VNodeChild;
-    event?: (props: Record<string, unknown> & {
-        event: ScheduleEventData;
-    }) => VNodeChild;
+/** The `renderEvent` / `renderEventBody` pair a view hands down to `ScheduleEvent`. */
+export interface EventRenderers {
+    renderEvent?: RenderEvent;
+    renderEventBody?: RenderEventBody;
 }
 /**
- * Build the slots object forwarded to a child component, omitting undefined entries.
- * Returns a `Record<string, unknown>` (possibly empty) so it satisfies Vue's `RawSlots`
- * type when passed as the third argument to `h()`.
+ * Folds the `event` / `eventBody` scoped slots into the equivalent render props, so a view
+ * forwards a single object down to every `ScheduleEvent` it renders instead of re-declaring
+ * the slots at each call site. Slots win over props, matching the rest of the library.
  */
-export declare function forwardEventSlots(slots: EventSlots | undefined): Record<string, unknown>;
-export declare function eventNode(event: ScheduleEventData, props: Pick<BaseViewProps, 'mode' | 'renderEvent' | 'renderEventBody' | 'onEventClick'> & {
-    withEventsDragAndDrop?: boolean;
-    canDragEvent?: (event: ScheduleEventData) => boolean;
-    onEventDragStart?: (event: ScheduleEventData) => void;
-    onEventDragEnd?: () => void;
-}, extra?: Record<string, unknown>, slots?: EventSlots): VNodeChild;
+export declare function resolveEventRenderers(props: EventRenderers, slots: EventSlots): EventRenderers;
+/** Reads the event referenced by a native drag payload, if the drag started inside a schedule. */
 export declare function getDropEvent(events: ScheduleEventData[] | undefined, transfer: DataTransfer | null): ScheduleEventData | undefined;
-export declare function getTimeSlotDropTarget({ nativeEvent, container, intervals, date, }: {
-    nativeEvent: DragEvent;
-    container: HTMLElement;
-    intervals: Array<{
-        startTime: string;
-    }>;
-    date: string;
-}): {
-    slotIndex: number;
-    target: DateTimeStringValue;
-} | undefined;
+/**
+ * Attribute the views put on their `ScrollArea` viewport so they can find it again without
+ * depending on Mantine static classes, which a consumer can turn off.
+ */
+export declare const SCROLL_VIEWPORT_ATTRIBUTE = "data-schedule-viewport";
+/** Props spread onto the viewport of a view's `ScrollArea`. */
+export declare const scheduleViewportProps: {
+    "data-schedule-viewport": string;
+};
+/** Finds the `ScrollArea` viewport that contains `node`. */
+export declare function getScrollAreaViewport(node: HTMLElement | null | undefined): HTMLElement | null;
+/**
+ * Scrolls the viewport around `target` so that `target` sits at its start.
+ *
+ * The second pass runs a frame later because a `ScrollArea` viewport is still being laid out
+ * on the tick it mounts, so the first offsets it reports are not final.
+ */
+export declare function scrollSlotIntoView(target: HTMLElement | null | undefined, axis?: 'x' | 'y'): void;
 export declare function moveEventTo(event: ScheduleEventData, newStart: dayjs.ConfigType): {
     eventId: string | number;
     newStart: DateTimeStringValue;
@@ -158,4 +88,4 @@ export declare function moveEventToAllDay(event: ScheduleEventData, date: dayjs.
     newEnd: DateTimeStringValue;
     event: ScheduleEventData;
 };
-export declare function todayString(): string;
+export declare function todayString(): DateStringValue;

package/lib/components/use-slot-drag-select.d.ts

@@ -5,23 +5,21 @@ interface SelectedRange {
     end: number;
 }
 export interface UseSlotDragSelectInput {
-    /** Whether slot drag selection is enabled */
     enabled: () => boolean;
-    /** Called with the selected range once a multi-slot drag finishes */
-    onDragEnd?: () => ((startIndex: number, endIndex: number, group: string) => void) | undefined;
+    onDragEnd?: (startIndex: number, endIndex: number, group: string) => void;
 }
 export interface SlotDragSelect {
-    /** Begin a slot selection at the given index/group */
     handleSlotPointerDown: (event: PointerEvent, index: number, group: string) => void;
-    /** Whether the slot at index within group is currently selected */
     isSlotSelected: (index: number, group: string) => boolean;
-    /** Whether a slot drag selection is currently in progress */
     isDragging: () => boolean;
 }
 /**
- * Composable that provides unified slot drag-selection for Day, Week and Month views.
- * tracks a selected range as the pointer
- * moves across elements carrying `data-drag-slot-index` / `data-drag-slot-group`.
+ * Slot drag-selection shared by the day, week and month views. It tracks a selected range as the
+ * pointer moves across elements carrying `data-drag-slot-index` / `data-drag-slot-group`.
+ *
+ * Hit testing goes through `elementsFromPoint`, which reads layout, so it is coalesced to one
+ * animation frame: a fast pointer would otherwise queue up more hit tests and re-renders than the
+ * browser can paint, and the selection would keep growing after the pointer stopped.
  */
 export declare function useSlotDragSelect(input: UseSlotDragSelectInput): SlotDragSelect;
 export type SelectedRangeRef = Ref<SelectedRange | null>;

package/lib/components/use-slot-drop-target.d.ts

@@ -0,0 +1,38 @@
+import type { DateStringValue, DateTimeStringValue } from '../types';
+export interface SlotDropTarget {
+    date: DateStringValue;
+    slotIndex: number;
+}
+export interface SlotDropInterval {
+    startTime: string;
+}
+export interface ResolveSlotInput {
+    container: HTMLElement | null | undefined;
+    date: DateStringValue;
+    intervals: SlotDropInterval[];
+}
+export interface ResolvedSlotDrop {
+    slotIndex: number;
+    target: DateTimeStringValue;
+}
+/**
+ * Tracks the time slot a drag is hovering over.
+ *
+ * `dragover` fires many times per frame and the fallback that measures slots reads layout, so
+ * resolving the target on every event makes the highlight lag behind the pointer and keep
+ * catching up after it stops. The resolution is therefore coalesced to one animation frame, the
+ * state is only written when the slot actually changes, and any pending frame is dropped as soon
+ * as the drag leaves or the drop happens — so nothing lands after the fact.
+ */
+export declare function useSlotDropTarget(): {
+    dropTarget: import("vue").ShallowRef<SlotDropTarget | null, SlotDropTarget | null>;
+    isTarget: (date: DateStringValue, slotIndex: number) => boolean;
+    /**
+     * Accepts the drag and schedules the target update. `preventDefault` and `dropEffect` run
+     * synchronously because the browser reads them as the handler returns.
+     */
+    dragOver: (nativeEvent: DragEvent, input: ResolveSlotInput) => void;
+    dragLeave: (nativeEvent: DragEvent, container: HTMLElement | null | undefined) => void;
+    drop: (nativeEvent: DragEvent, input: ResolveSlotInput) => ResolvedSlotDrop | undefined;
+    reset: () => void;
+};

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

@@ -16,7 +16,7 @@ export interface UseEventResizeInput {
     startTime: () => string;
     endTime: () => string;
     intervalMinutes: () => number;
-    onEventResize: () => ((data: EventDropData) => void) | undefined;
+    onEventResize: (data: EventDropData) => void;
     canResizeEvent: () => ((event: ScheduleEventData) => boolean) | undefined;
 }
 export declare function useEventResize(input: UseEventResizeInput): {