nuxt-ui-elements-pro 0.1.5 → 0.1.6

package/dist/runtime/composables/useEventCalendarResize.js

@@ -0,0 +1,87 @@
+import { toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+import { onUnmounted, ref } from "vue";
+export function useEventCalendarResize(options) {
+  const { editable, normalizedEvents, gridConfig, slotHeight, onEventResize, onResizeStart, onResizeEnd } = options;
+  const resizingEventId = ref(null);
+  const resizePreviewHeightPx = ref(null);
+  let activeEvent = null;
+  let originalHeightPx = 0;
+  function onPointerMove(e) {
+    if (!activeEvent) return;
+    const config = gridConfig();
+    const deltaY = e.clientY - pointerStartY;
+    const rawHeight = originalHeightPx + deltaY;
+    const snappedHeight = Math.round(rawHeight / slotHeight) * slotHeight;
+    const minHeightPx = 15 / config.slotDuration * slotHeight;
+    const maxDurationMinutes = config.endHour * 60 - activeEvent.startMinutes;
+    const maxHeightPx = maxDurationMinutes / config.slotDuration * slotHeight;
+    resizePreviewHeightPx.value = Math.max(minHeightPx, Math.min(snappedHeight, maxHeightPx));
+  }
+  function onPointerUp(_e) {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+    if (activeEvent) {
+      const event2 = normalizedEvents.value.find((ev) => ev.id === activeEvent.id);
+      if (event2) {
+        onResizeEnd({ event: event2.original });
+      }
+    }
+    if (!activeEvent || resizePreviewHeightPx.value == null) {
+      cleanup();
+      return;
+    }
+    if (resizePreviewHeightPx.value === originalHeightPx) {
+      cleanup();
+      return;
+    }
+    const config = gridConfig();
+    const newDurationMinutes = resizePreviewHeightPx.value / slotHeight * config.slotDuration;
+    const newEndMinutes = activeEvent.startMinutes + newDurationMinutes;
+    const newEndHour = Math.floor(newEndMinutes / 60);
+    const newEndMinute = Math.round(newEndMinutes % 60);
+    const startDate = toCalendarDate(activeEvent.start);
+    const newEnd = toCalendarDateTime(startDate).set({ hour: newEndHour, minute: newEndMinute });
+    const event = normalizedEvents.value.find((ev) => ev.id === activeEvent.id);
+    if (event) {
+      onEventResize({
+        event: event.original,
+        oldStart: event.start,
+        oldEnd: event.end,
+        newStart: event.start,
+        newEnd
+      });
+    }
+    cleanup();
+  }
+  let pointerStartY = 0;
+  function onResizePointerDown(event, e) {
+    if (!editable() || !event.resizable) return;
+    e.preventDefault();
+    e.stopPropagation();
+    resizingEventId.value = event.id;
+    activeEvent = event;
+    originalHeightPx = event.heightPx;
+    resizePreviewHeightPx.value = event.heightPx;
+    pointerStartY = e.clientY;
+    const normalized = normalizedEvents.value.find((ev) => ev.id === event.id);
+    if (normalized) {
+      onResizeStart({ event: normalized.original });
+    }
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+  }
+  function cleanup() {
+    resizingEventId.value = null;
+    resizePreviewHeightPx.value = null;
+    activeEvent = null;
+  }
+  onUnmounted(() => {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+  });
+  return {
+    resizingEventId,
+    resizePreviewHeightPx,
+    onResizePointerDown
+  };
+}

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

@@ -0,0 +1,21 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { CalendarView, SelectPayload } from "../types/event-calendar.js";
+export interface UseEventCalendarSelectOptions {
+    selectable: () => boolean;
+    view: () => CalendarView;
+    slotDuration: () => number;
+    startHour: () => number;
+    endHour: () => number;
+    onSelect: (payload: SelectPayload) => void;
+}
+export declare function useEventCalendarSelect(options: UseEventCalendarSelectOptions): {
+    isSelecting: import("vue").Ref<boolean, boolean>;
+    preventNextClick: import("vue").Ref<boolean, boolean>;
+    isSlotInSelection: (date: CalendarDate, hour: number, minute: number) => boolean;
+    isDateInSelection: (date: CalendarDate) => boolean;
+    onSlotPointerDown: (date: CalendarDate, hour: number, minute: number, e: PointerEvent) => void;
+    onSlotPointerMove: (date: CalendarDate, hour: number, minute: number) => void;
+    onDayCellPointerDown: (date: CalendarDate, e: PointerEvent) => void;
+    onDayCellPointerMove: (date: CalendarDate) => void;
+    onSelectionPointerUp: () => void;
+};

package/dist/runtime/composables/useEventCalendarSelect.js

@@ -0,0 +1,119 @@
+import { toCalendarDateTime } from "@internationalized/date";
+import { ref, shallowRef } from "vue";
+export function useEventCalendarSelect(options) {
+  const { selectable, slotDuration, onSelect } = options;
+  const isSelecting = ref(false);
+  const selectionAnchor = shallowRef(null);
+  const selectionEnd = shallowRef(null);
+  const preventNextClick = ref(false);
+  const didMove = ref(false);
+  function isEventTarget(e) {
+    const el = e.target;
+    if (!el) return false;
+    return !!el.closest("[data-slot='timeEvent'], [data-slot='eventChip']");
+  }
+  function toMinutes(point) {
+    return (point.hour ?? 0) * 60 + (point.minute ?? 0);
+  }
+  function clearState() {
+    isSelecting.value = false;
+    selectionAnchor.value = null;
+    selectionEnd.value = null;
+    didMove.value = false;
+  }
+  function onSlotPointerDown(date, hour, minute, e) {
+    if (!selectable() || e.button !== 0 || isEventTarget(e)) return;
+    selectionAnchor.value = { date, hour, minute };
+    selectionEnd.value = { date, hour, minute };
+    isSelecting.value = true;
+    didMove.value = false;
+  }
+  function onSlotPointerMove(date, hour, minute) {
+    if (!isSelecting.value || !selectionAnchor.value) return;
+    if (date.toString() !== selectionAnchor.value.date.toString()) return;
+    selectionEnd.value = { date, hour, minute };
+    didMove.value = true;
+  }
+  function onDayCellPointerDown(date, e) {
+    if (!selectable() || e.button !== 0 || isEventTarget(e)) return;
+    selectionAnchor.value = { date };
+    selectionEnd.value = { date };
+    isSelecting.value = true;
+    didMove.value = false;
+  }
+  function onDayCellPointerMove(date) {
+    if (!isSelecting.value || !selectionAnchor.value) return;
+    selectionEnd.value = { date };
+    didMove.value = true;
+  }
+  function onSelectionPointerUp() {
+    if (!isSelecting.value || !selectionAnchor.value || !selectionEnd.value) {
+      clearState();
+      return;
+    }
+    const anchor = selectionAnchor.value;
+    const end = selectionEnd.value;
+    const isTimeGrid = anchor.hour !== void 0;
+    if (isTimeGrid) {
+      const anchorMinutes = toMinutes(anchor);
+      const endMinutes = toMinutes(end);
+      const duration = slotDuration();
+      let startMinutes;
+      let finalEndMinutes;
+      if (anchorMinutes <= endMinutes) {
+        startMinutes = anchorMinutes;
+        finalEndMinutes = endMinutes + duration;
+      } else {
+        startMinutes = endMinutes;
+        finalEndMinutes = anchorMinutes + duration;
+      }
+      const startDt = toCalendarDateTime(anchor.date).set({
+        hour: Math.floor(startMinutes / 60),
+        minute: startMinutes % 60
+      });
+      const endDt = toCalendarDateTime(anchor.date).set({
+        hour: Math.floor(finalEndMinutes / 60),
+        minute: finalEndMinutes % 60
+      });
+      onSelect({ start: startDt, end: endDt, allDay: false });
+    } else {
+      const cmp = anchor.date.compare(end.date);
+      const startDate = cmp <= 0 ? anchor.date : end.date;
+      const endDate = cmp <= 0 ? end.date : anchor.date;
+      onSelect({ start: startDate, end: endDate, allDay: true });
+    }
+    if (didMove.value) {
+      preventNextClick.value = true;
+    }
+    clearState();
+  }
+  function isSlotInSelection(date, hour, minute) {
+    if (!isSelecting.value || !selectionAnchor.value || !selectionEnd.value) return false;
+    if (selectionAnchor.value.hour === void 0) return false;
+    if (date.toString() !== selectionAnchor.value.date.toString()) return false;
+    const anchorMin = toMinutes(selectionAnchor.value);
+    const endMin = toMinutes(selectionEnd.value);
+    const slotMin = hour * 60 + minute;
+    const lo = Math.min(anchorMin, endMin);
+    const hi = Math.max(anchorMin, endMin);
+    return slotMin >= lo && slotMin <= hi;
+  }
+  function isDateInSelection(date) {
+    if (!isSelecting.value || !selectionAnchor.value || !selectionEnd.value) return false;
+    if (selectionAnchor.value.hour !== void 0) return false;
+    const anchorCmp = date.compare(selectionAnchor.value.date);
+    const endCmp = date.compare(selectionEnd.value.date);
+    return anchorCmp >= 0 && endCmp <= 0 || anchorCmp <= 0 && endCmp >= 0;
+  }
+  return {
+    isSelecting,
+    preventNextClick,
+    isSlotInSelection,
+    isDateInSelection,
+    onSlotPointerDown,
+    onSlotPointerMove,
+    onDayCellPointerDown,
+    onDayCellPointerMove,
+    onSelectionPointerUp
+  };
+}

package/dist/runtime/index.d.ts

@@ -1 +1,3 @@
 export * from "./types/index.js";
+export { expandRecurringEvents, expandRecurringEventsAsync, getVisibleRange } from "./utils/recurrence.js";
+export type { VisibleRange } from "./utils/recurrence.js";

package/dist/runtime/index.js

@@ -1 +1,2 @@
 export * from "./types/index.js";
+export { expandRecurringEvents, expandRecurringEventsAsync, getVisibleRange } from "./utils/recurrence.js";

package/dist/runtime/types/event-calendar.d.ts

@@ -1,4 +1,7 @@
 import type { CalendarDate, CalendarDateTime, DateValue } from "@internationalized/date";
+import type { ComputedRef, Ref, ShallowRef } from "vue";
+/** All supported calendar view modes */
+export type CalendarView = "month" | "week" | "day" | "list";
 /**
  * Represents an event on the calendar.
  * Accepts flexible date inputs (Date, ISO string, or DateValue).
@@ -18,6 +21,16 @@ export interface CalendarEvent {
     allDay?: boolean;
     /** Whether this event can be dragged. Defaults to true */
     draggable?: boolean;
+    /** Whether this event can be resized. Defaults to true */
+    resizable?: boolean;
+    /** RFC 5545 RRULE string, e.g. "FREQ=WEEKLY;BYDAY=MO,WE,FR". Requires the `rrule` package. */
+    rrule?: string;
+    /** Dates to exclude from the recurrence (RFC 5545 EXDATE) */
+    exdate?: (Date | string | DateValue)[];
+    /** Duration in minutes. Used to compute end for each occurrence. If absent, inferred from start/end. */
+    duration?: number;
+    /** ID of the parent recurring event. Present only on expanded occurrences (set internally). */
+    recurringEventId?: string | number;
 }
 /** Internal normalized event with parsed dates */
 export interface NormalizedEvent {
@@ -28,7 +41,10 @@ export interface NormalizedEvent {
     color: string;
     allDay: boolean;
     draggable: boolean;
+    resizable: boolean;
     original: CalendarEvent;
+    /** ID of the parent recurring event. Present only on expanded occurrences. */
+    recurringEventId?: string | number;
 }
 /** A single day cell in the calendar grid */
 export interface CalendarDay {
@@ -73,6 +89,9 @@ export interface DayViewOptions {
     /** Minutes per time slot row @defaultValue 30 */
     slotDuration?: 15 | 30 | 60;
 }
+/** List/agenda view configuration */
+export interface ListViewOptions {
+}
 /** A timed event with computed pixel positions and overlap column info */
 export interface PositionedEvent extends NormalizedEvent {
     topPx: number;
@@ -89,4 +108,154 @@ export interface EventDropPayload {
     oldEnd: CalendarDate | CalendarDateTime;
     newStart: CalendarDate | CalendarDateTime;
     newEnd: CalendarDate | CalendarDateTime;
+    /** Parent recurring event ID. Set when a recurring occurrence was dropped. */
+    recurringEventId?: string | number;
+    /** The specific occurrence date/time that was dragged. Set when a recurring occurrence was dropped. */
+    occurrenceDate?: CalendarDate | CalendarDateTime;
+}
+/** Payload emitted after a resize operation */
+export interface EventResizePayload {
+    event: CalendarEvent;
+    oldStart: CalendarDate | CalendarDateTime;
+    oldEnd: CalendarDate | CalendarDateTime;
+    newStart: CalendarDate | CalendarDateTime;
+    newEnd: CalendarDate | CalendarDateTime;
+}
+/** Payload emitted after a click or drag selection */
+export interface SelectPayload {
+    start: CalendarDate | CalendarDateTime;
+    end: CalendarDate | CalendarDateTime;
+    allDay: boolean;
+}
+/** A spanning event positioned within a week row of the month grid */
+export interface MonthSpanningEvent {
+    event: NormalizedEvent;
+    /** 0-based column index where this bar starts within the week */
+    startCol: number;
+    /** Number of columns this bar spans */
+    span: number;
+    /** 0-based lane (row) index assigned by the greedy algorithm */
+    lane: number;
+    /** Whether this bar includes the event's true start date */
+    isStart: boolean;
+    /** Whether this bar includes the event's true end date */
+    isEnd: boolean;
+}
+/** A single-day event positioned within a week row of the month grid */
+export interface MonthSingleDayEvent {
+    event: NormalizedEvent;
+    /** 0-based column index */
+    col: number;
+    /** 0-based row index among single-day events for this column */
+    row: number;
+    /** Pre-computed CSS grid row (accounts for per-column spanning offset) */
+    gridRow: number;
+}
+/** Per-day overflow info for "+N more" */
+export interface MonthDayOverflow {
+    col: number;
+    hiddenCount: number;
+    hiddenEvents: NormalizedEvent[];
+    /** Grid row index for the "+N more" chip */
+    gridRow: number;
+}
+/** Complete layout data for one week row in the month view */
+export interface MonthWeekLayout {
+    week: CalendarWeek;
+    spanning: MonthSpanningEvent[];
+    singleDay: MonthSingleDayEvent[];
+    overflow: MonthDayOverflow[];
+    /** Total event rows for grid-template-rows */
+    totalEventRows: number;
+    /** Number of spanning lanes used */
+    spanningLaneCount: number;
+}
+/** Layout for the all-day row in week/day time grid view */
+export interface AllDayLayout {
+    /** Spanning event bars with lane assignments */
+    spanning: MonthSpanningEvent[];
+    /** Total number of lanes used */
+    laneCount: number;
+}
+/** A day column in the week/day time grid view */
+export interface TimeGridDay extends CalendarDay {
+    dateKey: string;
+    allDayEvents: NormalizedEvent[];
+    timedEvents: PositionedEvent[];
+}
+/** The context provided by EventCalendar root to sub-components via provide/inject */
+export interface EventCalendarContext {
+    displayDate: ComputedRef<CalendarDate>;
+    view: ComputedRef<CalendarView>;
+    locale: ComputedRef<string>;
+    weekStartsOn: ComputedRef<0 | 1 | 2 | 3 | 4 | 5 | 6>;
+    editable: ComputedRef<boolean>;
+    loading: ComputedRef<boolean>;
+    color: ComputedRef<string>;
+    monthConfig: ComputedRef<{
+        maxEvents: number;
+        fixedWeeks: boolean;
+    }>;
+    weekConfig: ComputedRef<{
+        startHour: number;
+        endHour: number;
+        slotDuration: number;
+    }>;
+    dayConfig: ComputedRef<{
+        startHour: number;
+        endHour: number;
+        slotDuration: number;
+    }>;
+    monthWeeks: ComputedRef<CalendarWeek[]>;
+    monthWeekLayouts: ComputedRef<MonthWeekLayout[]>;
+    weekdayLabels: ComputedRef<string[]>;
+    weekDays: ComputedRef<CalendarDay[]>;
+    dayViewDate: ComputedRef<CalendarDay>;
+    listDays: ComputedRef<CalendarDay[]>;
+    timeGridDays: ComputedRef<TimeGridDay[]>;
+    allDayLayout: ComputedRef<AllDayLayout>;
+    timeGridSlots: ComputedRef<TimeSlot[]>;
+    headerTitle: 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;
+    handleDateClick: (day: CalendarDay) => void;
+    handleEventClick: (event: NormalizedEvent, e: Event) => void;
+    ui: ComputedRef<any>;
+    propUi: ComputedRef<any>;
+    draggedEventId: Ref<string | number | null>;
+    dropTargetKey: Ref<string | null>;
+    dragSnapSlot: Ref<string | null>;
+    onDragStart: (event: NormalizedEvent, e: DragEvent) => void;
+    onDragEnd: (e: DragEvent) => void;
+    onDragOver: (key: string, e: DragEvent) => void;
+    onDragLeave: () => void;
+    onTimeGridDragOver: (dateKey: string, e: DragEvent) => void;
+    onSlotDragOver: (slotKey: string, e: DragEvent) => void;
+    onDropMonthCell: (targetDate: CalendarDate, e: DragEvent) => void;
+    onDropTimeGrid: (targetDate: CalendarDate, e: DragEvent) => void;
+    resizingEventId: Ref<string | number | null>;
+    resizePreviewHeightPx: Ref<number | null>;
+    onResizePointerDown: (event: PositionedEvent, e: PointerEvent) => void;
+    focusedDate: ShallowRef<CalendarDate>;
+    isFocusedDate: (date: CalendarDate) => boolean;
+    onGridKeydown: (e: KeyboardEvent) => void;
+    formatDateAriaLabel: (date: CalendarDate) => string;
+    formatEventAriaLabel: (event: NormalizedEvent) => string;
+    selectable: ComputedRef<boolean>;
+    isSelecting: Ref<boolean>;
+    isSlotInSelection: (date: CalendarDate, hour: number, minute: number) => boolean;
+    isDateInSelection: (date: CalendarDate) => boolean;
+    onSlotPointerDown: (date: CalendarDate, hour: number, minute: number, e: PointerEvent) => void;
+    onSlotPointerMove: (date: CalendarDate, hour: number, minute: number) => void;
+    onDayCellPointerDown: (date: CalendarDate, e: PointerEvent) => void;
+    onDayCellPointerMove: (date: CalendarDate) => void;
+    onSelectionPointerUp: () => void;
+    preventNextClick: Ref<boolean>;
+    SLOT_HEIGHT: number;
 }

package/dist/runtime/types/index.d.ts

@@ -1,2 +1,6 @@
 export * from "./event-calendar.js";
 export * from "../components/EventCalendar.vue.js";
+export * from "../components/EventCalendarHeader.vue.js";
+export * from "../components/EventCalendarMonthView.vue.js";
+export * from "../components/EventCalendarTimeGrid.vue.js";
+export * from "../components/EventCalendarListView.vue.js";

package/dist/runtime/types/index.js

@@ -1,2 +1,6 @@
 export * from "./event-calendar.js";
 export * from "../components/EventCalendar.vue";
+export * from "../components/EventCalendarHeader.vue";
+export * from "../components/EventCalendarMonthView.vue";
+export * from "../components/EventCalendarTimeGrid.vue";
+export * from "../components/EventCalendarListView.vue";

package/dist/runtime/utils/event-calendar.d.ts

@@ -1,5 +1,14 @@
 import type { CalendarDate, CalendarDateTime } from "@internationalized/date";
-import type { NormalizedEvent, PositionedEvent } from "../types/event-calendar.js";
+import type { NormalizedEvent, PositionedEvent, CalendarWeek, MonthWeekLayout, AllDayLayout, TimeGridDay } from "../types/event-calendar.js";
+/**
+ * Compute the start of the week for any weekStartsOn value (0=Sunday … 6=Saturday).
+ * Uses getDayOfWeek with a fixed locale ('en-US') so Sunday is always 0.
+ */
+export declare function startOfWeekByDay(date: CalendarDate, weekStartsOn: number): CalendarDate;
+/**
+ * Compute the end of the week for any weekStartsOn value.
+ */
+export declare function endOfWeekByDay(date: CalendarDate, weekStartsOn: number): CalendarDate;
 /** Check whether a DateValue has hour/minute (CalendarDateTime vs CalendarDate) */
 export declare function hasTimeComponent(d: CalendarDate | CalendarDateTime): boolean;
 /**
@@ -14,3 +23,15 @@ export declare function layoutTimedEvents(events: NormalizedEvent[], config: {
     endHour: number;
     slotDuration: number;
 }, slotHeight: number): PositionedEvent[];
+/**
+ * Compute layout for one week row in the month view.
+ *
+ * Assigns spanning (all-day / multi-day) events to horizontal lanes,
+ * then positions single-day events below. Returns grid row info for rendering.
+ */
+export declare function layoutMonthWeekEvents(week: CalendarWeek, maxEvents: number): MonthWeekLayout;
+/**
+ * Layout algorithm for the all-day row in week/day time grid views.
+ * Same greedy lane assignment as month view but without maxEvents cap or single-day partitioning.
+ */
+export declare function layoutAllDayEvents(days: TimeGridDay[]): AllDayLayout;