nuxt-ui-elements-pro 0.1.4 → 0.1.6

package/dist/runtime/utils/event-calendar.js

@@ -1,4 +1,12 @@
-import { toCalendarDateTime } from "@internationalized/date";
+import { getDayOfWeek, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+export function startOfWeekByDay(date, weekStartsOn) {
+  const dow = getDayOfWeek(date, "en-US");
+  const diff = (dow - weekStartsOn + 7) % 7;
+  return toCalendarDate(date.subtract({ days: diff }));
+}
+export function endOfWeekByDay(date, weekStartsOn) {
+  return toCalendarDate(startOfWeekByDay(date, weekStartsOn).add({ days: 6 }));
+}
 export function hasTimeComponent(d) {
   return "hour" in d;
 }
@@ -65,3 +73,193 @@ export function layoutTimedEvents(events, config, slotHeight) {
   }
   return timed;
 }
+export function layoutMonthWeekEvents(week, maxEvents) {
+  const days = week.days;
+  const weekStartDate = days[0].date;
+  const weekEndDate = days[6].date;
+  const seenSpanning = /* @__PURE__ */ new Set();
+  const spanningCandidates = [];
+  const singleDayByCol = Array.from({ length: 7 }, () => []);
+  for (let col = 0; col < 7; col++) {
+    const day = days[col];
+    for (const event of day.events) {
+      const eventStartDate = toCalendarDate(event.start);
+      const eventEndDate = toCalendarDate(event.end);
+      const isMultiDay = eventStartDate.compare(eventEndDate) !== 0;
+      const isSpanning = event.allDay || isMultiDay;
+      if (isSpanning) {
+        if (!seenSpanning.has(event.id)) {
+          seenSpanning.add(event.id);
+          const clampedStart = eventStartDate.compare(weekStartDate) < 0 ? weekStartDate : eventStartDate;
+          const clampedEnd = eventEndDate.compare(weekEndDate) > 0 ? weekEndDate : eventEndDate;
+          let startCol = 0;
+          let endCol = 6;
+          for (let i = 0; i < 7; i++) {
+            if (days[i].date.compare(clampedStart) === 0) startCol = i;
+            if (days[i].date.compare(clampedEnd) === 0) endCol = i;
+          }
+          spanningCandidates.push({
+            event,
+            startCol,
+            endCol,
+            isStart: eventStartDate.compare(weekStartDate) >= 0,
+            isEnd: eventEndDate.compare(weekEndDate) <= 0
+          });
+        }
+      } else {
+        singleDayByCol[col].push(event);
+      }
+    }
+  }
+  spanningCandidates.sort((a, b) => {
+    if (a.startCol !== b.startCol) return a.startCol - b.startCol;
+    const spanA = a.endCol - a.startCol;
+    const spanB = b.endCol - b.startCol;
+    if (spanA !== spanB) return spanB - spanA;
+    return String(a.event.id).localeCompare(String(b.event.id));
+  });
+  const laneOccupancy = [];
+  const spanning = [];
+  for (const candidate of spanningCandidates) {
+    const { event, startCol, endCol, isStart, isEnd } = candidate;
+    const span = endCol - startCol + 1;
+    let assignedLane = -1;
+    for (let lane = 0; lane < laneOccupancy.length; lane++) {
+      let free = true;
+      for (let col = startCol; col <= endCol; col++) {
+        if (laneOccupancy[lane][col]) {
+          free = false;
+          break;
+        }
+      }
+      if (free) {
+        assignedLane = lane;
+        break;
+      }
+    }
+    if (assignedLane === -1) {
+      assignedLane = laneOccupancy.length;
+      laneOccupancy.push(new Array(7).fill(false));
+    }
+    for (let col = startCol; col <= endCol; col++) {
+      laneOccupancy[assignedLane][col] = true;
+    }
+    spanning.push({ event, startCol, span, lane: assignedLane, isStart, isEnd });
+  }
+  const perColSpanningOffset = new Array(7).fill(0);
+  for (let lane = 0; lane < laneOccupancy.length; lane++) {
+    for (let col = 0; col < 7; col++) {
+      if (laneOccupancy[lane][col]) {
+        perColSpanningOffset[col] = lane + 1;
+      }
+    }
+  }
+  const perColVisibleOffset = perColSpanningOffset.map((o) => Math.min(o, maxEvents));
+  const singleDay = [];
+  const overflow = [];
+  let totalEventRows = 0;
+  for (let col = 0; col < 7; col++) {
+    const colSingleDay = singleDayByCol[col];
+    const colOffset = perColVisibleOffset[col];
+    const colRemainingSlots = Math.max(0, maxEvents - colOffset);
+    const visibleSingle = colSingleDay.slice(0, colRemainingSlots);
+    for (let row = 0; row < visibleSingle.length; row++) {
+      singleDay.push({ event: visibleSingle[row], col, row, gridRow: colOffset + row + 2 });
+    }
+    totalEventRows = Math.max(totalEventRows, colOffset + visibleSingle.length);
+    const hiddenSpanning = [];
+    for (const s of spanning) {
+      if (s.lane >= maxEvents && s.startCol <= col && s.startCol + s.span - 1 >= col) {
+        hiddenSpanning.push(s.event);
+      }
+    }
+    const hiddenSingle = colSingleDay.slice(colRemainingSlots);
+    const hiddenCount = hiddenSpanning.length + hiddenSingle.length;
+    if (hiddenCount > 0) {
+      overflow.push({
+        col,
+        hiddenCount,
+        hiddenEvents: [...hiddenSpanning, ...hiddenSingle],
+        gridRow: 0
+        // set after loop
+      });
+    }
+  }
+  for (const item of overflow) {
+    item.gridRow = totalEventRows + 2;
+  }
+  return {
+    week,
+    spanning,
+    singleDay,
+    overflow,
+    totalEventRows,
+    spanningLaneCount: Math.min(laneOccupancy.length, maxEvents)
+  };
+}
+export function layoutAllDayEvents(days) {
+  const colCount = days.length;
+  if (colCount === 0) return { spanning: [], laneCount: 0 };
+  const startDate = days[0].date;
+  const endDate = days[colCount - 1].date;
+  const seen = /* @__PURE__ */ new Set();
+  const candidates = [];
+  for (let col = 0; col < colCount; col++) {
+    for (const event of days[col].allDayEvents) {
+      if (seen.has(event.id)) continue;
+      seen.add(event.id);
+      const eventStartDate = toCalendarDate(event.start);
+      const eventEndDate = toCalendarDate(event.end);
+      const clampedStart = eventStartDate.compare(startDate) < 0 ? startDate : eventStartDate;
+      const clampedEnd = eventEndDate.compare(endDate) > 0 ? endDate : eventEndDate;
+      let sc = 0;
+      let ec = colCount - 1;
+      for (let i = 0; i < colCount; i++) {
+        if (days[i].date.compare(clampedStart) === 0) sc = i;
+        if (days[i].date.compare(clampedEnd) === 0) ec = i;
+      }
+      candidates.push({
+        event,
+        startCol: sc,
+        endCol: ec,
+        isStart: eventStartDate.compare(startDate) >= 0,
+        isEnd: eventEndDate.compare(endDate) <= 0
+      });
+    }
+  }
+  candidates.sort((a, b) => {
+    if (a.startCol !== b.startCol) return a.startCol - b.startCol;
+    const spanA = a.endCol - a.startCol;
+    const spanB = b.endCol - b.startCol;
+    if (spanA !== spanB) return spanB - spanA;
+    return String(a.event.id).localeCompare(String(b.event.id));
+  });
+  const laneOccupancy = [];
+  const spanning = [];
+  for (const { event, startCol, endCol, isStart, isEnd } of candidates) {
+    const span = endCol - startCol + 1;
+    let assignedLane = -1;
+    for (let lane = 0; lane < laneOccupancy.length; lane++) {
+      let free = true;
+      for (let col = startCol; col <= endCol; col++) {
+        if (laneOccupancy[lane][col]) {
+          free = false;
+          break;
+        }
+      }
+      if (free) {
+        assignedLane = lane;
+        break;
+      }
+    }
+    if (assignedLane === -1) {
+      assignedLane = laneOccupancy.length;
+      laneOccupancy.push(new Array(colCount).fill(false));
+    }
+    for (let col = startCol; col <= endCol; col++) {
+      laneOccupancy[assignedLane][col] = true;
+    }
+    spanning.push({ event, startCol, span, lane: assignedLane, isStart, isEnd });
+  }
+  return { spanning, laneCount: laneOccupancy.length };
+}

package/dist/runtime/utils/recurrence.d.ts

@@ -0,0 +1,30 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { CalendarEvent } from "../types/event-calendar.js";
+/** Visible date range for the calendar grid */
+export interface VisibleRange {
+    start: CalendarDate;
+    end: CalendarDate;
+}
+/**
+ * Compute the date range the calendar grid actually renders.
+ * Includes padding for multi-day event bleed.
+ */
+export declare function getVisibleRange(displayDate: CalendarDate, view: "month" | "week" | "day" | "list", weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, fixedWeeks: boolean): VisibleRange;
+/**
+ * Expand recurring events within a visible date range.
+ * Synchronous — requires the rrule module to be pre-loaded.
+ *
+ * @param events - Array of CalendarEvent (recurring and non-recurring mixed)
+ * @param range - Visible date range to expand within
+ * @param rruleLib - The pre-loaded rrule module (`import('rrule')`)
+ * @returns Flat array of CalendarEvent with occurrences expanded
+ */
+export declare function expandRecurringEvents(events: CalendarEvent[], range: VisibleRange, rruleLib: typeof import("rrule")): CalendarEvent[];
+/**
+ * Async convenience wrapper for standalone use (auto-imports rrule).
+ *
+ * @param events - Array of CalendarEvent
+ * @param range - Visible date range
+ * @returns Flat array of CalendarEvent with occurrences expanded
+ */
+export declare function expandRecurringEventsAsync(events: CalendarEvent[], range: VisibleRange): Promise<CalendarEvent[]>;

package/dist/runtime/utils/recurrence.js

@@ -0,0 +1,150 @@
+import {
+  asCalendarDate,
+  asCalendarDateTime,
+  startOf,
+  add,
+  subtract
+} from "#std/date";
+import { hasTimeComponent, startOfWeekByDay } from "./event-calendar.js";
+export function getVisibleRange(displayDate, view, weekStartsOn, fixedWeeks) {
+  if (view === "month") {
+    const monthStart = startOf(displayDate, "month");
+    const monthEnd = asCalendarDate(add(startOf(displayDate, "month"), 1, "month"));
+    const monthEndDate = asCalendarDate(subtract(monthEnd, 1, "day"));
+    const gridStart = asCalendarDate(subtract(startOfWeekByDay(monthStart, weekStartsOn), 1, "day"));
+    const gridEnd = fixedWeeks ? asCalendarDate(add(startOfWeekByDay(monthStart, weekStartsOn), 42, "day")) : asCalendarDate(add(startOfWeekByDay(monthEndDate, weekStartsOn).add({ days: 6 }), 1, "day"));
+    return { start: gridStart, end: gridEnd };
+  }
+  if (view === "week" || view === "list") {
+    const weekStart = startOfWeekByDay(asCalendarDate(displayDate), weekStartsOn);
+    return {
+      start: asCalendarDate(subtract(weekStart, 1, "day")),
+      end: asCalendarDate(add(weekStart, 7, "day"))
+    };
+  }
+  return {
+    start: asCalendarDate(subtract(displayDate, 1, "day")),
+    end: asCalendarDate(add(displayDate, 1, "day"))
+  };
+}
+function toFloatingUTC(value) {
+  if (hasTimeComponent(value)) {
+    const dt = value;
+    return new Date(Date.UTC(dt.year, dt.month - 1, dt.day, dt.hour, dt.minute, dt.second ?? 0));
+  }
+  return new Date(Date.UTC(value.year, value.month - 1, value.day));
+}
+function fromFloatingUTC(date, withTime) {
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  if (withTime) {
+    const hour = String(date.getUTCHours()).padStart(2, "0");
+    const minute = String(date.getUTCMinutes()).padStart(2, "0");
+    return asCalendarDateTime(`${year}-${month}-${day}T${hour}:${minute}`);
+  }
+  return asCalendarDate(`${year}-${month}-${day}`);
+}
+function parseDateValue(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 asCalendarDate(/* @__PURE__ */ new Date());
+}
+function formatDtstart(date, allDay) {
+  const y = date.getUTCFullYear();
+  const m = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const d = String(date.getUTCDate()).padStart(2, "0");
+  if (allDay) {
+    return `DTSTART;VALUE=DATE:${y}${m}${d}`;
+  }
+  const hh = String(date.getUTCHours()).padStart(2, "0");
+  const mm = String(date.getUTCMinutes()).padStart(2, "0");
+  const ss = String(date.getUTCSeconds()).padStart(2, "0");
+  return `DTSTART:${y}${m}${d}T${hh}${mm}${ss}Z`;
+}
+export function expandRecurringEvents(events, range, rruleLib) {
+  return events.flatMap((event) => {
+    if (!event.rrule) return [event];
+    return expandSingleEvent(event, range, rruleLib);
+  });
+}
+function expandSingleEvent(event, range, rruleLib) {
+  const { rrulestr } = rruleLib;
+  const parsedStart = parseDateValue(event.start);
+  const isTimedEvent = hasTimeComponent(parsedStart);
+  const startAsUTC = toFloatingUTC(parsedStart);
+  let rruleString = event.rrule;
+  const hasExistingDtstart = /DTSTART[;:]/i.test(rruleString);
+  if (!hasExistingDtstart) {
+    const dtstart = formatDtstart(startAsUTC, !isTimedEvent);
+    if (!rruleString.startsWith("RRULE:")) {
+      rruleString = `RRULE:${rruleString}`;
+    }
+    rruleString = `${dtstart}
+${rruleString}`;
+  }
+  let ruleSet;
+  try {
+    const parsed = rrulestr(rruleString, { forceset: true });
+    ruleSet = parsed;
+  } catch (err) {
+    console.warn(`[UEEventCalendar] Failed to parse rrule for event "${event.id}":`, err);
+    return [event];
+  }
+  if (event.exdate?.length) {
+    for (const exd of event.exdate) {
+      const parsedEx = parseDateValue(exd);
+      ruleSet.exdate(toFloatingUTC(parsedEx));
+    }
+  }
+  const rangeStart = toFloatingUTC(range.start);
+  const rangeEnd = toFloatingUTC(range.end);
+  const occurrences = ruleSet.between(rangeStart, rangeEnd, true);
+  if (occurrences.length === 0) return [];
+  let durationMinutes = 0;
+  if (event.duration != null) {
+    durationMinutes = event.duration;
+  } else if (event.end) {
+    const parsedEnd = parseDateValue(event.end);
+    const endUTC = toFloatingUTC(parsedEnd);
+    durationMinutes = Math.round((endUTC.getTime() - startAsUTC.getTime()) / 6e4);
+  }
+  return occurrences.map((occDate) => {
+    const occStart = fromFloatingUTC(occDate, isTimedEvent);
+    const occEnd = durationMinutes > 0 ? fromFloatingUTC(new Date(occDate.getTime() + durationMinutes * 6e4), isTimedEvent) : occStart;
+    const occKey = isTimedEvent ? `${occStart.toString()}` : `${occStart.toString()}`;
+    return {
+      id: `${event.id}::${occKey}`,
+      title: event.title,
+      start: occStart,
+      end: occEnd,
+      color: event.color,
+      allDay: event.allDay,
+      draggable: event.draggable,
+      resizable: event.resizable,
+      recurringEventId: event.id
+    };
+  });
+}
+export async function expandRecurringEventsAsync(events, range) {
+  const rruleLib = await import("rrule");
+  return expandRecurringEvents(events, range, rruleLib);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements-pro",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Pro components for nuxt-ui-elements",
   "license": "UNLICENSED",
   "files": [
@@ -46,23 +46,32 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "3.2.1",
-    "@nuxt/ui": "4.4.0",
     "@nuxt/eslint-config": "1.15.1",
     "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "4.3.1",
     "@nuxt/test-utils": "4.0.0",
+    "@nuxt/ui": "4.4.0",
     "@types/node": "latest",
-    "eslint": "10.0.0",
+    "@vue/test-utils": "2.4.6",
+    "eslint": "10.0.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
+    "happy-dom": "20.7.0",
     "nuxt": "4.3.1",
     "prettier": "3.8.1",
+    "rrule": "2.8.1",
     "typescript": "5.9.3",
     "vitest": "4.0.18",
-    "vue-tsc": "3.2.4"
+    "vue-tsc": "3.2.5"
   },
   "peerDependencies": {
-    "@nuxt/ui": "^4.0.0"
+    "@nuxt/ui": "^4.0.0",
+    "rrule": "^2.8.0"
+  },
+  "peerDependenciesMeta": {
+    "rrule": {
+      "optional": true
+    }
   },
-  "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8"
+  "packageManager": "pnpm@10.30.1+sha512.3590e550d5384caa39bd5c7c739f72270234b2f6059e13018f975c313b1eb9fefcc09714048765d4d9efe961382c312e624572c0420762bdc5d5940cdf9be73a"
 }