nuxt-ui-elements-pro 0.1.4 → 0.1.6

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements-pro",
   "configKey": "uiElementsPro",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -5,7 +5,7 @@ import { ofetch } from 'ofetch';
 const eventCalendar = (options) => ({
   slots: {
     // Shared
-    root: "w-full border border-default rounded-lg bg-default",
+    root: "w-full border border-default rounded-lg bg-default flex flex-col overflow-hidden",
     header: "flex items-center justify-between px-4 py-3 border-b border-default",
     headerTitle: "text-lg font-semibold text-highlighted",
     headerActions: "flex items-center gap-1",
@@ -13,45 +13,78 @@ const eventCalendar = (options) => ({
     // Month view
     weekdayRow: "grid grid-cols-7 border-b border-default",
     weekdayCell: "py-2 text-center text-xs font-medium text-muted uppercase tracking-wider",
-    monthBody: "grid grid-cols-7",
-    dayCell: "min-h-24 border-b border-r border-default p-1 last-of-type:border-r-0 hover:bg-elevated/50 cursor-pointer",
+    monthBody: "flex flex-col select-none",
+    monthWeekRow: "",
+    dayCell: "border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
     dayCellOutside: "bg-muted/20",
+    monthDayNumber: "relative z-[1] p-1",
     dayNumber: "text-xs font-medium p-1 leading-none",
     dayNumberToday: "inline-flex items-center justify-center size-6 rounded-full text-inverted font-semibold",
     dayNumberOutside: "text-muted",
     eventList: "space-y-1 mt-1",
+    spanningEventChip: [
+      "relative z-[2] flex items-center text-xs px-1.5 truncate cursor-pointer",
+      "text-[var(--event-color)]"
+    ],
     eventChip: [
-      "text-xs px-1.5 py-1 rounded truncate cursor-pointer mb-0.5",
+      "relative z-[2] flex items-center gap-1 text-xs px-1.5 py-0.5 rounded truncate cursor-pointer mx-0.5",
       "border-l-2 text-[var(--event-color)] border-[var(--event-color)]"
     ],
     eventTime: "font-medium mr-1",
-    moreEvents: "text-xs text-muted px-1.5 py-0.5 cursor-pointer hover:text-highlighted block w-full",
-    expandedOverlay: "absolute -m-1.5 min-h-[calc(100%+12px)] bg-default border border-default rounded-lg p-1.5 shadow-xl z-20 animate-expand-overlay",
+    recurringIcon: "size-3 shrink-0 opacity-60 align-middle mr-0.5",
+    moreEvents: "relative z-[2] text-xs text-muted px-1.5 py-0.5 cursor-pointer hover:text-highlighted",
+    expandedOverlay: "bg-default border border-default rounded-lg p-1.5 shadow-xl z-20 animate-expand-overlay",
     // Week/Day view
-    columnHeaders: "flex border-b border-default",
+    timeGridRoot: "flex-1 flex flex-col min-h-0 overflow-hidden",
+    columnHeaders: "flex border-b border-default shrink-0",
     timeGutterSpacer: "w-16 shrink-0 border-r border-default",
     dayColumnHeader: "flex-1 bg-default py-2 text-center border-r border-default last:border-r-0",
     dayColumnHeaderLabel: "text-xs font-medium text-muted uppercase",
     dayColumnHeaderNumber: "text-lg font-semibold text-highlighted",
     dayColumnHeaderToday: "inline-flex items-center justify-center size-8 rounded-full text-inverted font-semibold",
-    allDayRow: "flex border-b border-default min-h-8",
+    allDayRow: "flex border-b border-default min-h-8 shrink-0",
     allDayLabel: "w-16 shrink-0 border-r border-default flex items-center justify-end pr-2 text-[10px] text-muted",
-    allDayCell: "flex-1 border-r border-default last:border-r-0 p-0.5 flex flex-wrap gap-0.5",
-    timeGrid: "relative flex items-start flex-1 overflow-auto h-[600px]",
+    allDayGrid: "flex-1 relative",
+    allDayCell: "border-r border-default last:border-r-0",
+    allDaySpanningChip: [
+      "relative z-[2] flex items-center text-xs px-1.5 truncate cursor-pointer",
+      "text-[var(--event-color)]"
+    ],
+    timeGrid: "relative flex items-start flex-1 min-h-0 overflow-auto select-none",
     timeGutter: "sticky left-0 z-10 w-16 shrink-0 bg-default border-r border-default",
     timeGutterSlot: "relative border-b border-default/50",
     timeLabel: "absolute top-0 right-0 px-2 mr-2 text-[10px] text-muted -translate-y-1/2 bg-default",
     dayColumn: "flex-1 relative border-r border-default last:border-r-0",
     timeSlotRow: "border-b border-default/50 transition-colors",
     timeEvent: [
-      "absolute rounded px-1.5 py-0.5 text-xs cursor-pointer overflow-hidden",
+      "absolute rounded px-1.5 py-0.5 text-xs cursor-pointer overflow-hidden group",
       "border-l-2 text-[var(--event-color)] border-[var(--event-color)]"
     ],
-    timeEventTitle: "font-medium truncate",
+    timeEventTitle: "font-medium truncate flex items-center gap-1",
     timeEventTime: "opacity-70 text-[10px]",
+    resizeHandle: "absolute bottom-0 left-0 right-0 h-2 cursor-s-resize flex items-center justify-center",
+    resizeHandleBar: "w-8 h-0.5 rounded-full bg-current opacity-0 group-hover:opacity-40 transition-opacity",
+    // List/agenda view
+    listBody: "divide-y divide-default",
+    listDateHeader: "flex items-center gap-3 px-4 py-2.5 bg-elevated/50 sticky top-0",
+    listDateWeekday: "text-sm font-semibold text-highlighted",
+    listDateLabel: "text-sm text-muted",
+    listEventRow: "flex items-center gap-3 px-4 py-2.5 hover:bg-elevated/50 cursor-pointer transition-colors",
+    listEventTime: "w-28 shrink-0 text-xs text-muted text-right",
+    listEventDot: "size-2.5 shrink-0 rounded-full",
+    listEventTitle: "text-sm text-highlighted truncate",
+    listEmpty: "px-4 py-8 text-center text-sm text-muted",
     // Drag state
     dropTarget: "ring-2 ring-dashed ring-offset-1",
-    dragSnapSlot: ""
+    dragSnapSlot: "",
+    // Selection
+    selectionOverlay: "",
+    // Loading & empty states
+    loadingOverlay: "absolute inset-0 z-30 flex items-center justify-center bg-default/60",
+    loadingIcon: "size-8 text-muted animate-spin",
+    emptyState: "flex flex-col items-center justify-center gap-2 py-14 text-center",
+    emptyStateIcon: "size-10 text-muted/50",
+    emptyStateText: "text-sm text-muted"
   },
   variants: {
     color: {
@@ -66,7 +99,8 @@ const eventCalendar = (options) => ({
         dayNumberToday: `bg-${color}`,
         dayColumnHeaderToday: `bg-${color}`,
         dropTarget: `ring-${color}`,
-        dragSnapSlot: `bg-${color}/10 ring-1 ring-inset ring-${color}/30`
+        dragSnapSlot: `bg-${color}/10 ring-1 ring-inset ring-${color}/30`,
+        selectionOverlay: `bg-${color}/10`
       }
     })),
     {
@@ -75,7 +109,8 @@ const eventCalendar = (options) => ({
         dayNumberToday: "bg-inverted",
         dayColumnHeaderToday: "bg-inverted",
         dropTarget: "ring-inverted",
-        dragSnapSlot: "bg-inverted/10 ring-1 ring-inset ring-inverted/30"
+        dragSnapSlot: "bg-inverted/10 ring-1 ring-inset ring-inverted/30",
+        selectionOverlay: "bg-inverted/10"
       }
     }
   ],

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

@@ -1,22 +1,29 @@
 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";
+import type { CalendarEvent, CalendarView, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload, EventResizePayload, SelectPayload, EventCalendarContext } from "../types/event-calendar.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/event-calendar";
 type EventCalendar = ComponentConfig<typeof theme, AppConfig, "eventCalendar">;
 export interface EventCalendarProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
     /** 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";
+    view?: CalendarView;
     /** Locale for day/month names @defaultValue 'en-US' */
     locale?: string;
-    /** Day the week starts on @defaultValue 0 */
-    weekStartsOn?: 0 | 1;
+    /** Day the week starts on (0=Sun, 1=Mon, … 6=Sat) @defaultValue 0 */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /** Enable drag-and-drop globally @defaultValue true */
     editable?: boolean;
+    /** Show loading overlay @defaultValue false */
+    loading?: boolean;
+    /** Enable click/drag date range selection @defaultValue true */
+    selectable?: boolean;
     /** Theme color for calendar chrome @defaultValue 'primary' */
     color?: EventCalendar["variants"]["color"];
     /** Month view options */
@@ -32,64 +39,63 @@ export interface EventCalendarEmits {
     /** Fires when the displayed date changes */
     "update:modelValue": [value: CalendarDate];
     /** Fires when the view changes */
-    "update:view": [value: "month" | "week" | "day"];
+    "update:view": [value: CalendarView];
     /** 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];
+    /** Fires after resize */
+    eventResize: [payload: EventResizePayload];
+    /** Fires when resize starts */
+    eventResizeStart: [payload: {
+        event: CalendarEvent;
+    }];
+    /** Fires when resize ends */
+    eventResizeEnd: [payload: {
+        event: CalendarEvent;
+    }];
+    /** Fires after a click or drag date range selection */
+    select: [payload: SelectPayload];
 }
 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;
+    default: (props: EventCalendarContext) => 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, {
+    select: (payload: SelectPayload) => any;
     "update:modelValue": (value: CalendarDate) => any;
-    "update:view": (value: "day" | "month" | "week") => any;
+    "update:view": (value: CalendarView) => any;
     dateClick: (date: CalendarDate) => any;
     eventClick: (event: CalendarEvent) => any;
     eventDrop: (payload: EventDropPayload) => any;
+    eventResize: (payload: EventResizePayload) => any;
+    eventResizeStart: (payload: {
+        event: CalendarEvent;
+    }) => any;
+    eventResizeEnd: (payload: {
+        event: CalendarEvent;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<EventCalendarProps> & Readonly<{
+    onSelect?: ((payload: SelectPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: CalendarDate) => any) | undefined;
-    "onUpdate:view"?: ((value: "day" | "month" | "week") => any) | undefined;
+    "onUpdate:view"?: ((value: CalendarView) => any) | undefined;
     onDateClick?: ((date: CalendarDate) => any) | undefined;
     onEventClick?: ((event: CalendarEvent) => any) | undefined;
     onEventDrop?: ((payload: EventDropPayload) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
+    onEventResize?: ((payload: EventResizePayload) => any) | undefined;
+    onEventResizeStart?: ((payload: {
+        event: CalendarEvent;
+    }) => any) | undefined;
+    onEventResizeEnd?: ((payload: {
+        event: CalendarEvent;
+    }) => any) | undefined;
+}>, {
+    editable: boolean;
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;