nuxt-ui-elements-pro 0.1.0

package/dist/runtime/components/EventCalendar.vue.d.ts

@@ -0,0 +1,97 @@
+import type { CalendarDate, DateValue } from "@internationalized/date";
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements-pro/event-calendar";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { CalendarEvent, CalendarDay, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload } from "../types/event-calendar.js";
+type EventCalendar = ComponentConfig<typeof theme, AppConfig, "eventCalendar">;
+export interface EventCalendarProps {
+    /** Array of events to display */
+    events?: CalendarEvent[];
+    /** Currently displayed date. Controls which month/week/day is shown. Supports v-model. */
+    modelValue?: Date | string | DateValue;
+    /** Calendar view mode @defaultValue 'month' */
+    view?: "month" | "week" | "day";
+    /** Locale for day/month names @defaultValue 'en-US' */
+    locale?: string;
+    /** Day the week starts on @defaultValue 0 */
+    weekStartsOn?: 0 | 1;
+    /** Enable drag-and-drop globally @defaultValue true */
+    editable?: boolean;
+    /** Theme color for calendar chrome @defaultValue 'primary' */
+    color?: EventCalendar["variants"]["color"];
+    /** Month view options */
+    monthOptions?: MonthViewOptions;
+    /** Week view options */
+    weekOptions?: WeekViewOptions;
+    /** Day view options */
+    dayOptions?: DayViewOptions;
+    /** Slot class overrides */
+    ui?: EventCalendar["slots"];
+}
+export interface EventCalendarEmits {
+    /** Fires when the displayed date changes */
+    "update:modelValue": [value: CalendarDate];
+    /** Fires when the view changes */
+    "update:view": [value: "month" | "week" | "day"];
+    /** Fires when a date cell is clicked */
+    dateClick: [date: CalendarDate];
+    /** Fires when an event is clicked */
+    eventClick: [event: CalendarEvent];
+    /** Fires after drag-and-drop */
+    eventDrop: [payload: EventDropPayload];
+}
+export interface EventCalendarSlots {
+    header: (props: {
+        title: string;
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+        currentDate: CalendarDate;
+        view: "month" | "week" | "day";
+        setView: (v: "month" | "week" | "day") => void;
+    }) => any;
+    "day-header": (props: {
+        day: string;
+        index: number;
+    }) => any;
+    day: (props: {
+        day: CalendarDay;
+    }) => any;
+    event: (props: {
+        event: CalendarEvent;
+        view: "month" | "week" | "day";
+    }) => any;
+    "more-events": (props: {
+        events: CalendarEvent[];
+        count: number;
+        day: CalendarDay;
+    }) => any;
+    "time-label": (props: {
+        hour: number;
+        label: string;
+    }) => any;
+    "all-day": (props: {
+        events: CalendarEvent[];
+        date: CalendarDate;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CalendarDate) => any;
+    "update:view": (value: "day" | "week" | "month") => any;
+    dateClick: (date: CalendarDate) => any;
+    eventClick: (event: CalendarEvent) => any;
+    eventDrop: (payload: EventDropPayload) => any;
+}, string, import("vue").PublicProps, Readonly<EventCalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CalendarDate) => any) | undefined;
+    "onUpdate:view"?: ((value: "day" | "week" | "month") => any) | undefined;
+    onDateClick?: ((date: CalendarDate) => any) | undefined;
+    onEventClick?: ((event: CalendarEvent) => any) | undefined;
+    onEventDrop?: ((payload: EventDropPayload) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { ComputedRef } from "vue";
+import type { EventDropPayload, NormalizedEvent } from "../types/event-calendar.js";
+export interface UseEventCalendarDragDropOptions {
+    /** Whether drag-and-drop is enabled (getter, since it's a destructured prop) */
+    editable: () => boolean;
+    /** Reactive list of normalized events to look up dragged event by ID */
+    normalizedEvents: ComputedRef<NormalizedEvent[]>;
+    /** Callback invoked when an event is dropped on a new target */
+    onEventDrop: (payload: EventDropPayload) => void;
+}
+export declare function useEventCalendarDragDrop(options: UseEventCalendarDragDropOptions): {
+    draggedEventId: import("vue").Ref<string | number | null, string | number | null>;
+    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;
+    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;
+};

package/dist/runtime/composables/useEventCalendarDragDrop.js

@@ -0,0 +1,116 @@
+import { toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+import { ref } from "vue";
+import { add, asCalendarDate, asCalendarDateTime } from "#std/date";
+import { hasTimeComponent } from "../utils/event-calendar.js";
+export function useEventCalendarDragDrop(options) {
+  const { editable, normalizedEvents, onEventDrop } = options;
+  const draggedEventId = ref(null);
+  const dropTargetKey = ref(null);
+  const dragSnapSlot = ref(null);
+  function onDragStart(event, e) {
+    if (!editable() || !event.draggable) {
+      e.preventDefault();
+      return;
+    }
+    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) {
+    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;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    dropTargetKey.value = key;
+  }
+  function onDragLeave() {
+    dropTargetKey.value = null;
+    dragSnapSlot.value = null;
+  }
+  function onTimeGridDragOver(dateKey, e) {
+    if (!draggedEventId.value) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    dropTargetKey.value = dateKey;
+  }
+  function onSlotDragOver(slotKey, e) {
+    if (!draggedEventId.value) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    dragSnapSlot.value = slotKey;
+  }
+  function onDropMonthCell(targetDate, e) {
+    e.preventDefault();
+    dropTargetKey.value = null;
+    const eventId = draggedEventId.value;
+    if (eventId === null) return;
+    const event = normalizedEvents.value.find((ev) => ev.id === eventId);
+    if (!event) return;
+    const oldStartDate = toCalendarDate(event.start);
+    const dayDiff = targetDate.compare(oldStartDate);
+    if (dayDiff === 0) return;
+    const newStart = asCalendarDate(add(event.start, dayDiff, "day"));
+    const newEnd = asCalendarDate(add(event.end, dayDiff, "day"));
+    onEventDrop({
+      event: event.original,
+      oldStart: event.start,
+      oldEnd: event.end,
+      newStart: hasTimeComponent(event.start) ? asCalendarDateTime(newStart) : newStart,
+      newEnd: hasTimeComponent(event.end) ? asCalendarDateTime(newEnd) : newEnd
+    });
+    draggedEventId.value = null;
+  }
+  function onDropTimeGrid(targetDate, e) {
+    e.preventDefault();
+    const eventId = draggedEventId.value;
+    const snapKey = dragSnapSlot.value;
+    dropTargetKey.value = null;
+    dragSnapSlot.value = null;
+    if (eventId === null || !snapKey) return;
+    const event = normalizedEvents.value.find((ev) => ev.id === eventId);
+    if (!event) return;
+    const parts = snapKey.split("-");
+    const newHour = parseInt(parts[parts.length - 2]);
+    const newMinute = parseInt(parts[parts.length - 1]);
+    const oldStartDt = hasTimeComponent(event.start) ? event.start : toCalendarDateTime(event.start);
+    const oldEndDt = hasTimeComponent(event.end) ? event.end : toCalendarDateTime(event.end);
+    const durationMinutes = oldEndDt.hour * 60 + oldEndDt.minute - (oldStartDt.hour * 60 + oldStartDt.minute);
+    const targetMinutes = newHour * 60 + newMinute;
+    const endMinutes = targetMinutes + Math.max(durationMinutes, 15);
+    const endHour = Math.floor(endMinutes / 60);
+    const endMinute = endMinutes % 60;
+    const newStartDate = toCalendarDateTime(targetDate).set({ hour: newHour, minute: newMinute });
+    const newEndDate = toCalendarDateTime(targetDate).set({ hour: endHour, minute: endMinute });
+    onEventDrop({
+      event: event.original,
+      oldStart: event.start,
+      oldEnd: event.end,
+      newStart: newStartDate,
+      newEnd: newEndDate
+    });
+    draggedEventId.value = null;
+  }
+  return {
+    draggedEventId,
+    dropTargetKey,
+    dragSnapSlot,
+    onDragStart,
+    onDragEnd,
+    onDragOver,
+    onDragLeave,
+    onTimeGridDragOver,
+    onSlotDragOver,
+    onDropMonthCell,
+    onDropTimeGrid
+  };
+}

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@import "#build/ui-elements-pro.css";@source "./components";

package/dist/runtime/index.d.ts

@@ -0,0 +1 @@
+export * from "./types/index.js";

package/dist/runtime/index.js

@@ -0,0 +1 @@
+export * from "./types/index.js";

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

@@ -0,0 +1,92 @@
+import type { CalendarDate, CalendarDateTime, DateValue } from "@internationalized/date";
+/**
+ * Represents an event on the calendar.
+ * Accepts flexible date inputs (Date, ISO string, or DateValue).
+ */
+export interface CalendarEvent {
+    /** Unique identifier */
+    id: string | number;
+    /** Display title */
+    title: string;
+    /** Start date/time */
+    start: Date | string | DateValue;
+    /** End date/time. Defaults to same as start */
+    end?: Date | string | DateValue;
+    /** Nuxt UI theme color name (e.g., 'primary', 'success', 'error') */
+    color?: string;
+    /** Whether this is an all-day event */
+    allDay?: boolean;
+    /** Whether this event can be dragged. Defaults to true */
+    draggable?: boolean;
+}
+/** Internal normalized event with parsed dates */
+export interface NormalizedEvent {
+    id: string | number;
+    title: string;
+    start: CalendarDate | CalendarDateTime;
+    end: CalendarDate | CalendarDateTime;
+    color: string;
+    allDay: boolean;
+    draggable: boolean;
+    original: CalendarEvent;
+}
+/** A single day cell in the calendar grid */
+export interface CalendarDay {
+    date: CalendarDate;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isWeekend: boolean;
+    events: NormalizedEvent[];
+}
+/** A week row in the month grid */
+export interface CalendarWeek {
+    days: CalendarDay[];
+}
+/** A time slot row for week/day views */
+export interface TimeSlot {
+    hour: number;
+    minute: number;
+    label: string;
+}
+/** Month view configuration */
+export interface MonthViewOptions {
+    /** Max event chips per cell before "+N more" @defaultValue 3 */
+    maxEvents?: number;
+    /** Always show 6 rows for consistent height @defaultValue true */
+    fixedWeeks?: boolean;
+}
+/** Week view configuration */
+export interface WeekViewOptions {
+    /** First visible hour (0-23) @defaultValue 7 */
+    startHour?: number;
+    /** Last visible hour (0-23) @defaultValue 22 */
+    endHour?: number;
+    /** Minutes per time slot row @defaultValue 30 */
+    slotDuration?: 15 | 30 | 60;
+}
+/** Day view configuration */
+export interface DayViewOptions {
+    /** First visible hour (0-23) @defaultValue 7 */
+    startHour?: number;
+    /** Last visible hour (0-23) @defaultValue 22 */
+    endHour?: number;
+    /** Minutes per time slot row @defaultValue 30 */
+    slotDuration?: 15 | 30 | 60;
+}
+/** A timed event with computed pixel positions and overlap column info */
+export interface PositionedEvent extends NormalizedEvent {
+    topPx: number;
+    heightPx: number;
+    startMinutes: number;
+    endMinutes: number;
+    column: number;
+    totalColumns: number;
+}
+/** Payload emitted after a drag-and-drop operation */
+export interface EventDropPayload {
+    event: CalendarEvent;
+    oldStart: CalendarDate | CalendarDateTime;
+    oldEnd: CalendarDate | CalendarDateTime;
+    newStart: CalendarDate | CalendarDateTime;
+    newEnd: CalendarDate | CalendarDateTime;
+}

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

@@ -0,0 +1,2 @@
+export * from "./event-calendar.js";
+export * from "../components/EventCalendar.vue.js";

package/dist/runtime/types/index.js

@@ -0,0 +1,2 @@
+export * from "./event-calendar.js";
+export * from "../components/EventCalendar.vue";

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

@@ -0,0 +1,16 @@
+import type { CalendarDate, CalendarDateTime } from "@internationalized/date";
+import type { NormalizedEvent, PositionedEvent } from "../types/event-calendar.js";
+/** Check whether a DateValue has hour/minute (CalendarDateTime vs CalendarDate) */
+export declare function hasTimeComponent(d: CalendarDate | CalendarDateTime): boolean;
+/**
+ * Compute pixel positions and overlap columns for timed events in a single day.
+ *
+ * Filters the given events to timed-only (non-all-day with hour/minute),
+ * calculates vertical position and height based on the time grid configuration,
+ * then assigns columns so overlapping events sit side-by-side.
+ */
+export declare function layoutTimedEvents(events: NormalizedEvent[], config: {
+    startHour: number;
+    endHour: number;
+    slotDuration: number;
+}, slotHeight: number): PositionedEvent[];

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

@@ -0,0 +1,67 @@
+import { toCalendarDateTime } from "@internationalized/date";
+export function hasTimeComponent(d) {
+  return "hour" in d;
+}
+export function layoutTimedEvents(events, config, slotHeight) {
+  const timed = events.filter((e) => !e.allDay && hasTimeComponent(e.start)).map((event) => {
+    const startDt = event.start;
+    const endDt = hasTimeComponent(event.end) ? event.end : toCalendarDateTime(event.end);
+    const gridStartMinutes = config.startHour * 60;
+    const eventStartMinutes = startDt.hour * 60 + startDt.minute;
+    const eventEndMinutes = endDt.hour * 60 + endDt.minute;
+    const duration = Math.max(eventEndMinutes - eventStartMinutes, 15);
+    const topPx = (eventStartMinutes - gridStartMinutes) / config.slotDuration * slotHeight;
+    const heightPx = duration / config.slotDuration * slotHeight;
+    return {
+      ...event,
+      topPx: Math.max(0, topPx),
+      heightPx,
+      startMinutes: eventStartMinutes,
+      endMinutes: eventStartMinutes + duration,
+      column: 0,
+      totalColumns: 1
+    };
+  }).sort((a, b) => a.startMinutes - b.startMinutes || b.endMinutes - a.endMinutes || String(a.id).localeCompare(String(b.id)));
+  if (timed.length > 1) {
+    const clusters = [];
+    let currentCluster = [];
+    for (const ev of timed) {
+      if (currentCluster.length === 0) {
+        currentCluster.push(ev);
+      } else {
+        const clusterEnd = Math.max(...currentCluster.map((e) => e.endMinutes));
+        if (ev.startMinutes < clusterEnd) {
+          currentCluster.push(ev);
+        } else {
+          clusters.push(currentCluster);
+          currentCluster = [ev];
+        }
+      }
+    }
+    if (currentCluster.length > 0) clusters.push(currentCluster);
+    for (const cluster of clusters) {
+      const columns = [];
+      for (const ev of cluster) {
+        let placed = false;
+        for (let col = 0; col < columns.length; col++) {
+          const lastInCol = columns[col][columns[col].length - 1];
+          if (lastInCol.endMinutes <= ev.startMinutes) {
+            columns[col].push(ev);
+            ev.column = col;
+            placed = true;
+            break;
+          }
+        }
+        if (!placed) {
+          ev.column = columns.length;
+          columns.push([ev]);
+        }
+      }
+      const totalCols = columns.length;
+      for (const ev of cluster) {
+        ev.totalColumns = totalCols;
+      }
+    }
+  }
+  return timed;
+}

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

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").TV;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,2 @@
+import { createTV } from "tailwind-variants";
+export const tv = /* @__PURE__ */ createTV({});

package/dist/types.d.mts

@@ -0,0 +1,5 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'
+
+export * from '../dist/runtime/types/index.js'

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "nuxt-ui-elements-pro",
+  "version": "0.1.0",
+  "description": "Pro components for nuxt-ui-elements",
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "style": "./dist/runtime/index.css",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "style": "./dist/runtime/index.css",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "pnpm dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@internationalized/date": "3.11.0",
+    "@nuxt/kit": "4.3.1",
+    "nuxt-ui-elements": "0.1.39",
+    "scule": "1.3.0",
+    "tailwind-variants": "3.2.2"
+  },
+  "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",
+    "@types/node": "latest",
+    "eslint": "10.0.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-prettier": "5.5.5",
+    "nuxt": "4.3.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18",
+    "vue-tsc": "3.2.4"
+  },
+  "peerDependencies": {
+    "@nuxt/ui": "^4.0.0",
+    "nuxt-ui-elements": ">=0.1.0"
+  },
+  "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8"
+}