nuxt-ui-elements-pro 0.1.5 → 0.1.7

package/dist/runtime/composables/useEventCalendar.d.ts

@@ -0,0 +1,52 @@
+import type { CalendarDate, CalendarDateTime, DateValue } from "@internationalized/date";
+import type { CalendarEvent, CalendarDay, CalendarView, CalendarWeek, NormalizedEvent, TimeSlot, TimeGridDay, MonthViewOptions, WeekViewOptions, DayViewOptions, MonthWeekLayout, AllDayLayout } from "../types/event-calendar.js";
+export declare const SLOT_HEIGHT = 48;
+export interface UseEventCalendarOptions {
+    events: () => CalendarEvent[];
+    modelValue: () => Date | string | DateValue | undefined;
+    view: () => CalendarView;
+    locale: () => string;
+    weekStartsOn: () => 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    monthOptions: () => MonthViewOptions | undefined;
+    weekOptions: () => WeekViewOptions | undefined;
+    dayOptions: () => DayViewOptions | undefined;
+    onUpdateModelValue: (date: CalendarDate) => void;
+    onUpdateView: (view: CalendarView) => void;
+}
+export declare function useEventCalendar(options: UseEventCalendarOptions): {
+    displayDate: import("vue").ComputedRef<CalendarDate>;
+    monthConfig: import("vue").ComputedRef<{
+        maxEvents: number;
+        fixedWeeks: boolean;
+    }>;
+    weekConfig: import("vue").ComputedRef<{
+        startHour: number;
+        endHour: number;
+        slotDuration: 15 | 30 | 60;
+    }>;
+    dayConfig: import("vue").ComputedRef<{
+        startHour: number;
+        endHour: number;
+        slotDuration: 15 | 30 | 60;
+    }>;
+    monthWeeks: import("vue").ComputedRef<CalendarWeek[]>;
+    monthWeekLayouts: import("vue").ComputedRef<MonthWeekLayout[]>;
+    weekdayLabels: import("vue").ComputedRef<string[]>;
+    weekDays: import("vue").ComputedRef<CalendarDay[]>;
+    dayViewDate: import("vue").ComputedRef<CalendarDay>;
+    listDays: import("vue").ComputedRef<CalendarDay[]>;
+    timeGridDays: import("vue").ComputedRef<TimeGridDay[]>;
+    allDayLayout: import("vue").ComputedRef<AllDayLayout>;
+    timeGridSlots: import("vue").ComputedRef<TimeSlot[]>;
+    headerTitle: import("vue").ComputedRef<string>;
+    formatTime: (d: CalendarDate | CalendarDateTime) => string;
+    formatTimeRange: (start: CalendarDate | CalendarDateTime, end: CalendarDate | CalendarDateTime) => string;
+    getEventStyle: (event: NormalizedEvent, bgOpacity?: number) => Record<string, string>;
+    isEventStart: (event: NormalizedEvent, date: CalendarDate) => boolean;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goToToday: () => void;
+    setView: (v: CalendarView) => void;
+    normalizedEvents: import("vue").ComputedRef<NormalizedEvent[]>;
+    SLOT_HEIGHT: number;
+};

package/dist/runtime/composables/useEventCalendar.js

@@ -0,0 +1,362 @@
+import { toCalendarDate } from "@internationalized/date";
+import { computed, shallowRef, watchEffect } from "vue";
+import { createMonth } from "reka-ui/date";
+import {
+  today,
+  startOf,
+  add,
+  subtract,
+  format,
+  isSameMonth,
+  isToday as checkIsToday,
+  isWeekend as checkIsWeekend,
+  asCalendarDate,
+  asCalendarDateTime,
+  getLocalTimeZone
+} from "#std/date";
+import { hasTimeComponent, layoutTimedEvents, layoutMonthWeekEvents, layoutAllDayEvents, startOfWeekByDay, endOfWeekByDay } from "../utils/event-calendar.js";
+import { getVisibleRange, expandRecurringEvents } from "../utils/recurrence.js";
+export const SLOT_HEIGHT = 48;
+export function useEventCalendar(options) {
+  const monthConfig = computed(() => ({
+    maxEvents: options.monthOptions()?.maxEvents ?? 3,
+    fixedWeeks: options.monthOptions()?.fixedWeeks ?? true
+  }));
+  const weekConfig = computed(() => ({
+    startHour: options.weekOptions()?.startHour ?? 7,
+    endHour: options.weekOptions()?.endHour ?? 22,
+    slotDuration: options.weekOptions()?.slotDuration ?? 30
+  }));
+  const dayConfig = computed(() => ({
+    startHour: options.dayOptions()?.startHour ?? 7,
+    endHour: options.dayOptions()?.endHour ?? 22,
+    slotDuration: options.dayOptions()?.slotDuration ?? 30
+  }));
+  const displayDate = computed(() => {
+    const mv = options.modelValue();
+    if (mv) return asCalendarDate(mv);
+    return today();
+  });
+  const rruleModule = shallowRef(null);
+  watchEffect(() => {
+    if (rruleModule.value || !options.events().some((e) => e.rrule)) return;
+    import("rrule").then((mod) => {
+      rruleModule.value = mod;
+    }).catch(() => {
+      console.warn('[UEEventCalendar] Install "rrule" for recurring events: pnpm add rrule');
+    });
+  });
+  const visibleRange = computed(
+    () => getVisibleRange(displayDate.value, options.view(), options.weekStartsOn(), monthConfig.value.fixedWeeks)
+  );
+  const expandedEvents = computed(() => {
+    const raw = options.events();
+    const range = visibleRange.value;
+    const rrule = rruleModule.value;
+    if (!rrule) return raw;
+    return expandRecurringEvents(raw, range, rrule);
+  });
+  function goToPrev() {
+    const v = options.view();
+    let target;
+    if (v === "month") {
+      target = startOf(subtract(displayDate.value, 1, "month"), "month");
+    } else if (v === "week" || v === "list") {
+      target = asCalendarDate(subtract(displayDate.value, 1, "week"));
+    } else {
+      target = asCalendarDate(subtract(displayDate.value, 1, "day"));
+    }
+    options.onUpdateModelValue(target);
+  }
+  function goToNext() {
+    const v = options.view();
+    let target;
+    if (v === "month") {
+      target = startOf(add(displayDate.value, 1, "month"), "month");
+    } else if (v === "week" || v === "list") {
+      target = asCalendarDate(add(displayDate.value, 1, "week"));
+    } else {
+      target = asCalendarDate(add(displayDate.value, 1, "day"));
+    }
+    options.onUpdateModelValue(target);
+  }
+  function goToToday() {
+    options.onUpdateModelValue(today());
+  }
+  function setView(v) {
+    options.onUpdateView(v);
+  }
+  const headerTitle = computed(() => {
+    const v = options.view();
+    const loc = options.locale();
+    if (v === "month") {
+      return format(displayDate.value, "MMMM YYYY", loc);
+    }
+    if (v === "week" || v === "list") {
+      const weekStart = startOfWeekByDay(asCalendarDate(displayDate.value), options.weekStartsOn());
+      const weekEnd = endOfWeekByDay(asCalendarDate(displayDate.value), options.weekStartsOn());
+      if (weekStart.month === weekEnd.month) {
+        return `${format(weekStart, "MMM D", loc)} \u2013 ${format(weekEnd, "D, YYYY", loc)}`;
+      }
+      return `${format(weekStart, "MMM D", loc)} \u2013 ${format(weekEnd, "MMM D, YYYY", loc)}`;
+    }
+    return format(displayDate.value, "dddd, MMMM D, YYYY", loc);
+  });
+  function parseDateInput(input) {
+    if (typeof input === "object" && "calendar" in input) {
+      return input;
+    }
+    if (input instanceof Date) {
+      const iso = input.toISOString();
+      if (iso.endsWith("T00:00:00.000Z")) {
+        return asCalendarDate(input);
+      }
+      return asCalendarDateTime(input);
+    }
+    if (typeof input === "string") {
+      if (input.includes("T") || input.includes(" ")) {
+        try {
+          return asCalendarDateTime(input);
+        } catch {
+          return asCalendarDate(input);
+        }
+      }
+      return asCalendarDate(input);
+    }
+    return today();
+  }
+  const normalizedEvents = computed(() => {
+    return expandedEvents.value.map((event) => {
+      const start = parseDateInput(event.start);
+      const end = event.end ? parseDateInput(event.end) : start;
+      const allDay = event.allDay ?? !hasTimeComponent(start);
+      return {
+        id: event.id,
+        title: event.title,
+        start,
+        end,
+        color: event.color ?? "primary",
+        allDay,
+        draggable: event.draggable ?? true,
+        resizable: event.resizable ?? true,
+        original: event,
+        recurringEventId: event.recurringEventId
+      };
+    });
+  });
+  function isAllDayOrMultiDay(event) {
+    if (event.allDay) return true;
+    const startDate = toCalendarDate(event.start);
+    const endDate = toCalendarDate(event.end);
+    return startDate.compare(endDate) !== 0;
+  }
+  const eventsByDate = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const event of normalizedEvents.value) {
+      const startDate = toCalendarDate(event.start);
+      const endDate = toCalendarDate(event.end);
+      let current = startDate;
+      while (current.compare(endDate) <= 0) {
+        const key = current.toString();
+        const existing = map.get(key) ?? [];
+        existing.push(event);
+        map.set(key, existing);
+        current = asCalendarDate(add(current, 1, "day"));
+      }
+    }
+    for (const events of map.values()) {
+      events.sort((a, b) => {
+        const aFirst = isAllDayOrMultiDay(a);
+        const bFirst = isAllDayOrMultiDay(b);
+        if (aFirst && !bFirst) return -1;
+        if (!aFirst && bFirst) return 1;
+        if (!aFirst && !bFirst && hasTimeComponent(a.start) && hasTimeComponent(b.start)) {
+          const aStart = a.start;
+          const bStart = b.start;
+          return aStart.hour * 60 + aStart.minute - (bStart.hour * 60 + bStart.minute);
+        }
+        return 0;
+      });
+    }
+    return map;
+  });
+  function getEventsForDate(date) {
+    return eventsByDate.value.get(date.toString()) ?? [];
+  }
+  const weekdayLabels = computed(() => {
+    const labels = [];
+    const refSunday = asCalendarDate("2025-01-05");
+    for (let i = 0; i < 7; i++) {
+      const day = asCalendarDate(add(refSunday, i + options.weekStartsOn(), "day"));
+      labels.push(format(day, "ddd", options.locale()));
+    }
+    return labels;
+  });
+  const monthWeeks = computed(() => {
+    const grid = createMonth({
+      dateObj: displayDate.value,
+      weekStartsOn: options.weekStartsOn(),
+      fixedWeeks: monthConfig.value.fixedWeeks,
+      locale: options.locale()
+    });
+    const monthStart = startOf(displayDate.value, "month");
+    return grid.rows.map((week) => ({
+      days: week.map((dateVal) => {
+        const date = toCalendarDate(dateVal);
+        return {
+          date,
+          isCurrentMonth: isSameMonth(date, monthStart),
+          isToday: checkIsToday(date, getLocalTimeZone()),
+          isWeekend: checkIsWeekend(date, options.locale()),
+          events: getEventsForDate(date)
+        };
+      })
+    }));
+  });
+  const monthWeekLayouts = computed(() => {
+    return monthWeeks.value.map(
+      (week) => layoutMonthWeekEvents(week, monthConfig.value.maxEvents)
+    );
+  });
+  const weekDays = computed(() => {
+    const weekStart = startOfWeekByDay(asCalendarDate(displayDate.value), options.weekStartsOn());
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+      const date = asCalendarDate(add(weekStart, i, "day"));
+      days.push({
+        date,
+        isCurrentMonth: true,
+        isToday: checkIsToday(date, getLocalTimeZone()),
+        isWeekend: checkIsWeekend(date, options.locale()),
+        events: getEventsForDate(date)
+      });
+    }
+    return days;
+  });
+  const dayViewDate = computed(() => {
+    const date = asCalendarDate(displayDate.value);
+    return {
+      date,
+      isCurrentMonth: true,
+      isToday: checkIsToday(date, getLocalTimeZone()),
+      isWeekend: checkIsWeekend(date, options.locale()),
+      events: getEventsForDate(date)
+    };
+  });
+  const listDays = computed(() => {
+    const weekStart = startOfWeekByDay(asCalendarDate(displayDate.value), options.weekStartsOn());
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+      const date = asCalendarDate(add(weekStart, i, "day"));
+      days.push({
+        date,
+        isCurrentMonth: true,
+        isToday: checkIsToday(date, getLocalTimeZone()),
+        isWeekend: checkIsWeekend(date, options.locale()),
+        events: getEventsForDate(date)
+      });
+    }
+    return days;
+  });
+  function generateTimeSlots(startHour, endHour, slotDuration) {
+    const slots = [];
+    const totalMinutes = (endHour - startHour) * 60;
+    for (let m = 0; m < totalMinutes; m += slotDuration) {
+      const hour = startHour + Math.floor(m / 60);
+      const minute = m % 60;
+      const h12 = hour % 12 || 12;
+      const ampm = hour >= 12 ? "pm" : "am";
+      const label = minute === 0 ? `${h12}${ampm}` : "";
+      slots.push({ hour, minute, label });
+    }
+    return slots;
+  }
+  const weekTimeSlots = computed(
+    () => generateTimeSlots(weekConfig.value.startHour, weekConfig.value.endHour, weekConfig.value.slotDuration)
+  );
+  const dayTimeSlots = computed(
+    () => generateTimeSlots(dayConfig.value.startHour, dayConfig.value.endHour, dayConfig.value.slotDuration)
+  );
+  const timeGridDays = computed(() => {
+    const v = options.view();
+    if (v !== "week" && v !== "day") return [];
+    const days = v === "week" ? weekDays.value : [dayViewDate.value];
+    const config = v === "week" ? weekConfig.value : dayConfig.value;
+    return days.map((day) => ({
+      ...day,
+      dateKey: day.date.toString(),
+      allDayEvents: day.events.filter((e) => e.allDay || !hasTimeComponent(e.start)),
+      timedEvents: layoutTimedEvents(getEventsForDate(day.date), config, SLOT_HEIGHT)
+    }));
+  });
+  const allDayLayout = computed(() => {
+    return layoutAllDayEvents(timeGridDays.value);
+  });
+  const timeGridSlots = computed(() => {
+    const v = options.view();
+    if (v === "week") return weekTimeSlots.value;
+    if (v === "day") return dayTimeSlots.value;
+    return [];
+  });
+  function formatTime(d) {
+    if (!hasTimeComponent(d)) return "";
+    const dt = d;
+    const h12 = dt.hour % 12 || 12;
+    const ampm = dt.hour >= 12 ? "pm" : "am";
+    const min = dt.minute > 0 ? `:${String(dt.minute).padStart(2, "0")}` : "";
+    return `${h12}${min}${ampm}`;
+  }
+  function formatTimeRange(start, end) {
+    const s = formatTime(start);
+    const e = formatTime(end);
+    if (!s) return "";
+    if (!e || s === e) return s;
+    return `${s}-${e}`;
+  }
+  function getEventStyle(event, bgOpacity = 10) {
+    const c = event.color;
+    const cssVar = c === "neutral" ? "var(--ui-bg-inverted)" : `var(--ui-${c})`;
+    return {
+      "--event-color": cssVar,
+      backgroundColor: `color-mix(in oklch, ${cssVar} ${bgOpacity}%, transparent)`
+    };
+  }
+  function isEventStart(event, date) {
+    const startDate = toCalendarDate(event.start);
+    return date.compare(startDate) === 0;
+  }
+  return {
+    // State
+    displayDate,
+    // Config
+    monthConfig,
+    weekConfig,
+    dayConfig,
+    // Grid data
+    monthWeeks,
+    monthWeekLayouts,
+    weekdayLabels,
+    weekDays,
+    dayViewDate,
+    listDays,
+    timeGridDays,
+    allDayLayout,
+    timeGridSlots,
+    // Header
+    headerTitle,
+    // Helpers
+    formatTime,
+    formatTimeRange,
+    getEventStyle,
+    isEventStart,
+    // Navigation
+    goToPrev,
+    goToNext,
+    goToToday,
+    setView,
+    // For drag-drop composable
+    normalizedEvents,
+    // Constant
+    SLOT_HEIGHT
+  };
+}

package/dist/runtime/composables/useEventCalendarContext.d.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from "vue";
+import type { EventCalendarContext } from "../types/event-calendar.js";
+export declare const eventCalendarContextKey: InjectionKey<EventCalendarContext>;
+/**
+ * Inject the EventCalendar context in a sub-component.
+ * Throws if called outside an <UEEventCalendar> root.
+ */
+export declare function useEventCalendarContext(): EventCalendarContext;

package/dist/runtime/composables/useEventCalendarContext.js

@@ -0,0 +1,11 @@
+import { inject } from "vue";
+export const eventCalendarContextKey = Symbol("nuxt-ui-elements-pro.event-calendar");
+export function useEventCalendarContext() {
+  const ctx = inject(eventCalendarContextKey);
+  if (!ctx) {
+    throw new Error(
+      "[EventCalendar] useEventCalendarContext() was called outside of an <UEEventCalendar> root. Sub-components (UEEventCalendarHeader, UEEventCalendarMonthView, UEEventCalendarTimeGrid, UEEventCalendarListView) must be used as children of <UEEventCalendar>."
+    );
+  }
+  return ctx;
+}

package/dist/runtime/composables/useEventCalendarDragDrop.d.ts

@@ -14,7 +14,7 @@ export declare function useEventCalendarDragDrop(options: UseEventCalendarDragDr
     dropTargetKey: import("vue").Ref<string | null, string | null>;
     dragSnapSlot: import("vue").Ref<string | null, string | null>;
     onDragStart: (event: NormalizedEvent, e: DragEvent) => void;
-    onDragEnd: (e: DragEvent) => void;
+    onDragEnd: () => void;
     onDragOver: (key: string, e: DragEvent) => void;
     onDragLeave: () => void;
     onTimeGridDragOver: (dateKey: string, e: DragEvent) => void;

package/dist/runtime/composables/useEventCalendarDragDrop.js

@@ -15,17 +15,11 @@ export function useEventCalendarDragDrop(options) {
     draggedEventId.value = event.id;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", String(event.id));
-    if (e.target instanceof HTMLElement) {
-      e.target.style.opacity = "0.5";
-    }
   }
-  function onDragEnd(e) {
+  function onDragEnd() {
     draggedEventId.value = null;
     dropTargetKey.value = null;
     dragSnapSlot.value = null;
-    if (e.target instanceof HTMLElement) {
-      e.target.style.opacity = "";
-    }
   }
   function onDragOver(key, e) {
     if (!draggedEventId.value) return;
@@ -66,7 +60,11 @@ export function useEventCalendarDragDrop(options) {
       oldStart: event.start,
       oldEnd: event.end,
       newStart: hasTimeComponent(event.start) ? asCalendarDateTime(newStart) : newStart,
-      newEnd: hasTimeComponent(event.end) ? asCalendarDateTime(newEnd) : newEnd
+      newEnd: hasTimeComponent(event.end) ? asCalendarDateTime(newEnd) : newEnd,
+      ...event.recurringEventId != null && {
+        recurringEventId: event.recurringEventId,
+        occurrenceDate: hasTimeComponent(event.start) ? event.start : toCalendarDate(event.start)
+      }
     });
     draggedEventId.value = null;
   }
@@ -96,7 +94,11 @@ export function useEventCalendarDragDrop(options) {
       oldStart: event.start,
       oldEnd: event.end,
       newStart: newStartDate,
-      newEnd: newEndDate
+      newEnd: newEndDate,
+      ...event.recurringEventId != null && {
+        recurringEventId: event.recurringEventId,
+        occurrenceDate: hasTimeComponent(event.start) ? event.start : toCalendarDate(event.start)
+      }
     });
     draggedEventId.value = null;
   }

package/dist/runtime/composables/useEventCalendarKeyboard.d.ts

@@ -0,0 +1,20 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { ComputedRef } from "vue";
+import type { CalendarView, NormalizedEvent } from "../types/event-calendar.js";
+export interface UseEventCalendarKeyboardOptions {
+    displayDate: ComputedRef<CalendarDate>;
+    view: () => CalendarView;
+    locale: () => string;
+    weekStartsOn: () => 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    goToPrev: () => void;
+    goToNext: () => void;
+    onUpdateModelValue: (date: CalendarDate) => void;
+    onDateSelect: (date: CalendarDate) => void;
+}
+export declare function useEventCalendarKeyboard(options: UseEventCalendarKeyboardOptions): {
+    focusedDate: import("vue").ShallowRef<CalendarDate, CalendarDate>;
+    isFocusedDate: (date: CalendarDate) => boolean;
+    onGridKeydown: (e: KeyboardEvent) => void;
+    formatDateAriaLabel: (date: CalendarDate) => string;
+    formatEventAriaLabel: (event: NormalizedEvent) => string;
+};

package/dist/runtime/composables/useEventCalendarKeyboard.js

@@ -0,0 +1,128 @@
+import { isSameDay } from "@internationalized/date";
+import { shallowRef, watch, nextTick } from "vue";
+import {
+  add,
+  subtract,
+  format,
+  asCalendarDate
+} from "#std/date";
+import { hasTimeComponent, startOfWeekByDay, endOfWeekByDay } from "../utils/event-calendar.js";
+export function useEventCalendarKeyboard(options) {
+  const focusedDate = shallowRef(options.displayDate.value);
+  watch(options.displayDate, (newDate) => {
+    focusedDate.value = newDate;
+  });
+  function isFocusedDate(date) {
+    return isSameDay(focusedDate.value, date);
+  }
+  function focusCell(date) {
+    const el = document.querySelector(
+      `[data-date="${date.toString()}"][tabindex="0"]`
+    );
+    el?.focus();
+  }
+  function formatDateAriaLabel(date) {
+    return format(date, "dddd, MMMM D, YYYY", options.locale());
+  }
+  function formatEventAriaLabel(event) {
+    if (event.allDay || !hasTimeComponent(event.start)) {
+      return `${event.title}, all day`;
+    }
+    const startTime = formatTimeForAria(event.start);
+    const endTime = hasTimeComponent(event.end) ? formatTimeForAria(event.end) : "";
+    return endTime ? `${event.title}, ${startTime} to ${endTime}` : `${event.title}, ${startTime}`;
+  }
+  function formatTimeForAria(d) {
+    const h12 = d.hour % 12 || 12;
+    const ampm = d.hour >= 12 ? "PM" : "AM";
+    const min = d.minute > 0 ? `:${String(d.minute).padStart(2, "0")}` : "";
+    return `${h12}${min} ${ampm}`;
+  }
+  function onGridKeydown(e) {
+    const v = options.view();
+    if (v === "month") {
+      handleMonthKeydown(e);
+    } else if (v === "week" || v === "day") {
+      handleTimeGridKeydown(e, v);
+    }
+  }
+  function handleMonthKeydown(e) {
+    let newDate = null;
+    switch (e.key) {
+      case "ArrowRight":
+        newDate = asCalendarDate(add(focusedDate.value, 1, "day"));
+        break;
+      case "ArrowLeft":
+        newDate = asCalendarDate(subtract(focusedDate.value, 1, "day"));
+        break;
+      case "ArrowDown":
+        newDate = asCalendarDate(add(focusedDate.value, 7, "day"));
+        break;
+      case "ArrowUp":
+        newDate = asCalendarDate(subtract(focusedDate.value, 7, "day"));
+        break;
+      case "Home":
+        newDate = startOfWeekByDay(asCalendarDate(focusedDate.value), options.weekStartsOn());
+        break;
+      case "End":
+        newDate = endOfWeekByDay(asCalendarDate(focusedDate.value), options.weekStartsOn());
+        break;
+      case "PageDown":
+        newDate = asCalendarDate(add(focusedDate.value, 1, "month"));
+        break;
+      case "PageUp":
+        newDate = asCalendarDate(subtract(focusedDate.value, 1, "month"));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        options.onDateSelect(focusedDate.value);
+        return;
+      default:
+        return;
+    }
+    if (newDate) {
+      e.preventDefault();
+      focusedDate.value = newDate;
+      options.onUpdateModelValue(newDate);
+      nextTick(() => {
+        focusCell(newDate);
+      });
+    }
+  }
+  function handleTimeGridKeydown(e, v) {
+    switch (e.key) {
+      case "PageDown":
+        e.preventDefault();
+        options.goToNext();
+        break;
+      case "PageUp":
+        e.preventDefault();
+        options.goToPrev();
+        break;
+      case "ArrowLeft":
+        if (v === "week") {
+          e.preventDefault();
+          focusedDate.value = asCalendarDate(subtract(focusedDate.value, 1, "day"));
+          options.onUpdateModelValue(focusedDate.value);
+        }
+        break;
+      case "ArrowRight":
+        if (v === "week") {
+          e.preventDefault();
+          focusedDate.value = asCalendarDate(add(focusedDate.value, 1, "day"));
+          options.onUpdateModelValue(focusedDate.value);
+        }
+        break;
+      default:
+        return;
+    }
+  }
+  return {
+    focusedDate,
+    isFocusedDate,
+    onGridKeydown,
+    formatDateAriaLabel,
+    formatEventAriaLabel
+  };
+}

package/dist/runtime/composables/useEventCalendarResize.d.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef } from "vue";
+import type { CalendarEvent, EventResizePayload, NormalizedEvent, PositionedEvent } from "../types/event-calendar.js";
+export interface UseEventCalendarResizeOptions {
+    /** Whether editing is enabled (getter, since it's a destructured prop) */
+    editable: () => boolean;
+    /** Reactive list of normalized events to look up by ID */
+    normalizedEvents: ComputedRef<NormalizedEvent[]>;
+    /** Returns the current view's grid config */
+    gridConfig: () => {
+        startHour: number;
+        endHour: number;
+        slotDuration: number;
+    };
+    /** Pixel height per slot */
+    slotHeight: number;
+    /** Callback invoked when an event is resized */
+    onEventResize: (payload: EventResizePayload) => void;
+    /** Callback invoked when resize starts */
+    onResizeStart: (payload: {
+        event: CalendarEvent;
+    }) => void;
+    /** Callback invoked when resize ends */
+    onResizeEnd: (payload: {
+        event: CalendarEvent;
+    }) => void;
+}
+export declare function useEventCalendarResize(options: UseEventCalendarResizeOptions): {
+    resizingEventId: import("vue").Ref<string | number | null, string | number | null>;
+    resizePreviewHeightPx: import("vue").Ref<number | null, number | null>;
+    onResizePointerDown: (event: PositionedEvent, e: PointerEvent) => void;
+};