@mantine-vue/schedule 2.1.0 → 2.2.0

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

@@ -0,0 +1,200 @@
+import type { EventDropData } from '../component-props';
+import type { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';
+type ResizeEdge = 'start' | 'end';
+interface ResizeState {
+    event: ScheduleEventData;
+    edge: ResizeEdge;
+    container: HTMLElement;
+    originalLeft: number;
+    originalWidth: number;
+    currentLeft: number;
+    currentWidth: number;
+    eventDate: string;
+    originalStart: DateTimeStringValue;
+    originalEnd: DateTimeStringValue;
+    dayIndex: number;
+    dayCount: number;
+}
+export declare function useHorizontalEventResize(input: {
+    enabled: () => boolean;
+    mode: () => ScheduleMode;
+    startTime: () => string;
+    endTime: () => string;
+    intervalMinutes: () => number;
+    onEventResize: () => ((data: EventDropData) => void) | undefined;
+    canResizeEvent: () => ((event: ScheduleEventData) => boolean) | undefined;
+}): {
+    state: import("vue").Ref<{
+        event: {
+            recurrence?: never | undefined;
+            recurringEventId?: never | undefined;
+            recurrenceId?: never | undefined;
+            id: string | number;
+            title: string;
+            start: Date | DateTimeStringValue;
+            end: Date | DateTimeStringValue;
+            color: import("@mantine-vue/core").MantineColor;
+            variant?: "filled" | "light" | undefined;
+            display?: "default" | "background" | undefined;
+            payload?: import("..").EventPayload | undefined;
+            resourceId?: string | number | undefined;
+            recurringInstance?: {
+                isRecurringInstance: boolean;
+                recurringEventId: string | number;
+                recurrenceId: DateTimeStringValue;
+                originalStart: DateTimeStringValue;
+                originalEnd: DateTimeStringValue;
+            } | undefined;
+        } | {
+            recurrence: {
+                rrule: string;
+                exdate?: DateTimeStringValue[] | undefined;
+                dtstart?: DateTimeStringValue | undefined;
+            };
+            recurringEventId?: never | undefined;
+            recurrenceId?: never | undefined;
+            id: string | number;
+            title: string;
+            start: Date | DateTimeStringValue;
+            end: Date | DateTimeStringValue;
+            color: import("@mantine-vue/core").MantineColor;
+            variant?: "filled" | "light" | undefined;
+            display?: "default" | "background" | undefined;
+            payload?: import("..").EventPayload | undefined;
+            resourceId?: string | number | undefined;
+            recurringInstance?: {
+                isRecurringInstance: boolean;
+                recurringEventId: string | number;
+                recurrenceId: DateTimeStringValue;
+                originalStart: DateTimeStringValue;
+                originalEnd: DateTimeStringValue;
+            } | undefined;
+        } | {
+            recurrence?: never | undefined;
+            recurringEventId: string | number;
+            recurrenceId: DateTimeStringValue;
+            id: string | number;
+            title: string;
+            start: Date | DateTimeStringValue;
+            end: Date | DateTimeStringValue;
+            color: import("@mantine-vue/core").MantineColor;
+            variant?: "filled" | "light" | undefined;
+            display?: "default" | "background" | undefined;
+            payload?: import("..").EventPayload | undefined;
+            resourceId?: string | number | undefined;
+            recurringInstance?: {
+                isRecurringInstance: boolean;
+                recurringEventId: string | number;
+                recurrenceId: DateTimeStringValue;
+                originalStart: DateTimeStringValue;
+                originalEnd: DateTimeStringValue;
+            } | undefined;
+        };
+        edge: ResizeEdge;
+        container: HTMLElement;
+        originalLeft: number;
+        originalWidth: number;
+        currentLeft: number;
+        currentWidth: number;
+        eventDate: string;
+        originalStart: DateTimeStringValue;
+        originalEnd: DateTimeStringValue;
+        dayIndex: number;
+        dayCount: number;
+    } | null, ResizeState | {
+        event: {
+            recurrence?: never | undefined;
+            recurringEventId?: never | undefined;
+            recurrenceId?: never | undefined;
+            id: string | number;
+            title: string;
+            start: Date | DateTimeStringValue;
+            end: Date | DateTimeStringValue;
+            color: import("@mantine-vue/core").MantineColor;
+            variant?: "filled" | "light" | undefined;
+            display?: "default" | "background" | undefined;
+            payload?: import("..").EventPayload | undefined;
+            resourceId?: string | number | undefined;
+            recurringInstance?: {
+                isRecurringInstance: boolean;
+                recurringEventId: string | number;
+                recurrenceId: DateTimeStringValue;
+                originalStart: DateTimeStringValue;
+                originalEnd: DateTimeStringValue;
+            } | undefined;
+        } | {
+            recurrence: {
+                rrule: string;
+                exdate?: DateTimeStringValue[] | undefined;
+                dtstart?: DateTimeStringValue | undefined;
+            };
+            recurringEventId?: never | undefined;
+            recurrenceId?: never | undefined;
+            id: string | number;
+            title: string;
+            start: Date | DateTimeStringValue;
+            end: Date | DateTimeStringValue;
+            color: import("@mantine-vue/core").MantineColor;
+            variant?: "filled" | "light" | undefined;
+            display?: "default" | "background" | undefined;
+            payload?: import("..").EventPayload | undefined;
+            resourceId?: string | number | undefined;
+            recurringInstance?: {
+                isRecurringInstance: boolean;
+                recurringEventId: string | number;
+                recurrenceId: DateTimeStringValue;
+                originalStart: DateTimeStringValue;
+                originalEnd: DateTimeStringValue;
+            } | undefined;
+        } | {
+            recurrence?: never | undefined;
+            recurringEventId: string | number;
+            recurrenceId: DateTimeStringValue;
+            id: string | number;
+            title: string;
+            start: Date | DateTimeStringValue;
+            end: Date | DateTimeStringValue;
+            color: import("@mantine-vue/core").MantineColor;
+            variant?: "filled" | "light" | undefined;
+            display?: "default" | "background" | undefined;
+            payload?: import("..").EventPayload | undefined;
+            resourceId?: string | number | undefined;
+            recurringInstance?: {
+                isRecurringInstance: boolean;
+                recurringEventId: string | number;
+                recurrenceId: DateTimeStringValue;
+                originalStart: DateTimeStringValue;
+                originalEnd: DateTimeStringValue;
+            } | undefined;
+        };
+        edge: ResizeEdge;
+        container: HTMLElement;
+        originalLeft: number;
+        originalWidth: number;
+        currentLeft: number;
+        currentWidth: number;
+        eventDate: string;
+        originalStart: DateTimeStringValue;
+        originalEnd: DateTimeStringValue;
+        dayIndex: number;
+        dayCount: number;
+    } | null>;
+    handleResizeStart: (params: {
+        event: ScheduleEventData;
+        edge: ResizeEdge;
+        container: HTMLElement;
+        originalLeft: number;
+        originalWidth: number;
+        eventDate: string;
+        pointerEvent: PointerEvent;
+        dayIndex?: number;
+        dayCount?: number;
+    }) => void;
+    getResizePosition: (id: string | number) => {
+        left: number;
+        width: number;
+    } | null;
+    isResizableEvent: (event: ScheduleEventData) => boolean;
+    wasResizing: () => boolean;
+};
+export {};

package/lib/index.d.mts

@@ -7,6 +7,10 @@ export * from './components/DayView';
 export * from './components/WeekView';
 export * from './components/MonthView';
 export * from './components/YearView';
+export * from './components/ResourcesDayView';
+export * from './components/ResourcesWeekView';
+export * from './components/ResourcesMonthView';
+export * from './components/ResourcesSchedule';
 export * from './components/ScheduleEvent';
 export * from './components/ScheduleHeader';
 export * from './components/CurrentTimeIndicator';

package/lib/index.d.ts

@@ -7,6 +7,10 @@ export * from './components/DayView';
 export * from './components/WeekView';
 export * from './components/MonthView';
 export * from './components/YearView';
+export * from './components/ResourcesDayView';
+export * from './components/ResourcesWeekView';
+export * from './components/ResourcesMonthView';
+export * from './components/ResourcesSchedule';
 export * from './components/ScheduleEvent';
 export * from './components/ScheduleHeader';
 export * from './components/CurrentTimeIndicator';

package/lib/labels.d.ts

@@ -19,6 +19,9 @@ export interface ScheduleLabels {
     viewSelectLabel: string;
     noEvents: string;
     moreLabel: (hiddenEventsCount: number) => string;
+    resource?: string;
+    resources?: string;
+    resourceSlot?: string;
 }
 export declare const DEFAULT_SCHEDULE_LABELS: ScheduleLabels;
 export type ScheduleLabelsOverride = Partial<ScheduleLabels>;

package/lib/types.d.ts

@@ -1,5 +1,18 @@
 import dayjs from 'dayjs';
+import type { VNodeChild } from 'vue';
 import type { MantineColor } from '@mantine-vue/core';
+/** Resource data object passed to resource view components */
+export interface ScheduleResourceData {
+    id: string | number;
+    label: VNodeChild;
+    color?: MantineColor;
+    payload?: Record<PropertyKey, unknown>;
+}
+/** Group definition for resource views */
+export interface ScheduleResourceGroup {
+    label: VNodeChild;
+    resourceIds: Array<string | number>;
+}
 /** Date value type used by internal package utils */
 export type AnyDateValue = DateStringValue | Date | dayjs.Dayjs;
 /** Date value used by all Mantine components, format: `YYYY-MM-DD` */
@@ -54,6 +67,8 @@ interface ScheduleEventBase<Payload extends EventPayload = EventPayload> {
     display?: 'default' | 'background';
     /** Additional event data, defined by the user, not used internally by the library */
     payload?: Payload;
+    /** Resource ID that this event belongs to, used by resource view components */
+    resourceId?: string | number;
 }
 /** One-off event without recurrence */
 export interface ScheduleSingleEventData<Payload extends EventPayload = EventPayload> extends ScheduleEventBase<Payload> {

package/lib/utils/get-group-to-resource-id-map/get-group-to-resource-id-map.d.ts

@@ -0,0 +1,2 @@
+import type { ScheduleResourceData } from '../../types';
+export declare function getGroupToResourceIdMap(resources: ScheduleResourceData[]): Map<string, string | number>;

package/lib/utils/get-ordered-resources/get-ordered-resources.d.ts

@@ -0,0 +1,17 @@
+import type { ScheduleResourceData, ScheduleResourceGroup } from '../../types';
+export interface GroupRange {
+    group: ScheduleResourceGroup;
+    startIndex: number;
+    count: number;
+}
+export interface ResourceGroupInfo {
+    group: ScheduleResourceGroup;
+    position: 'first' | 'middle' | 'last' | 'only';
+    count: number;
+}
+export interface OrderedResourcesResult {
+    orderedResources: ScheduleResourceData[];
+    groupRanges: GroupRange[];
+    resourceGroupMap: Array<ResourceGroupInfo | null>;
+}
+export declare function getOrderedResources(resources: ScheduleResourceData[], groups: ScheduleResourceGroup[] | undefined): OrderedResourcesResult;

package/lib/utils/handle-resources-grid-key-down/handle-resources-grid-key-down.d.ts

@@ -0,0 +1,8 @@
+export type ResourcesGridControls = Array<Array<HTMLButtonElement | undefined>>;
+export interface HandleResourcesGridKeyDownInput {
+    controls: ResourcesGridControls;
+    resourceIndex: number;
+    slotIndex: number;
+    event: KeyboardEvent;
+}
+export declare function handleResourcesGridKeyDown({ controls, resourceIndex, slotIndex, event, }: HandleResourcesGridKeyDownInput): void;

package/lib/utils/index.d.ts

@@ -39,3 +39,8 @@ export type { ParsedTime } from './parse-time-string/parse-time-string';
 export type { CalculateDropTimeInput, CalculateDropTimeResult, } from './calculate-drop-time/calculate-drop-time';
 export type { CalculateMonthDropDateInput, CalculateMonthDropDateResult, } from './calculate-month-drop-date/calculate-month-drop-date';
 export type { BusinessHoursMod, BusinessHoursPerDay, BusinessHoursRange, BusinessHoursValue, GetBusinessHoursModInput, } from './get-business-hours-mod/get-business-hours-mod';
+export { getOrderedResources } from './get-ordered-resources/get-ordered-resources';
+export type { GroupRange, OrderedResourcesResult, ResourceGroupInfo, } from './get-ordered-resources/get-ordered-resources';
+export { getGroupToResourceIdMap } from './get-group-to-resource-id-map/get-group-to-resource-id-map';
+export { handleResourcesGridKeyDown } from './handle-resources-grid-key-down/handle-resources-grid-key-down';
+export type { HandleResourcesGridKeyDownInput, ResourcesGridControls, } from './handle-resources-grid-key-down/handle-resources-grid-key-down';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/schedule",
-  "version": "2.1.0",
+  "version": "2.2.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": "2.1.0",
-    "@mantine-vue/dates": "2.1.0",
-    "@mantine-vue/hooks": "2.1.0",
+    "@mantine-vue/core": "2.2.0",
+    "@mantine-vue/dates": "2.2.0",
+    "@mantine-vue/hooks": "2.2.0",
     "dayjs": ">=1.0.0",
     "vue": "^3.5.0"
   }