nuxt-ui-elements-pro 0.1.5 → 0.1.7

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements-pro",
   "configKey": "uiElementsPro",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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"
       }
     }
   ],
@@ -84,9 +119,109 @@ const eventCalendar = (options) => ({
   }
 });
 
+const orgChart = (options) => ({
+  slots: {
+    // Root container
+    root: "relative w-full overflow-auto",
+    // Viewport (zoom/pan container)
+    viewport: "relative will-change-transform",
+    // SVG connector layer
+    connectorLayer: "absolute inset-0 pointer-events-none overflow-visible",
+    connector: "fill-none text-[var(--ui-border-accented)] stroke-current stroke-2",
+    // Non-hierarchical connection
+    connection: "fill-none text-[var(--ui-border-accented)] stroke-current stroke-2 pointer-events-auto cursor-pointer",
+    connectionLabel: [
+      "absolute text-xs px-1.5 py-0.5 rounded bg-elevated border border-default",
+      "text-muted whitespace-nowrap pointer-events-auto cursor-pointer",
+      "-translate-x-1/2 -translate-y-1/2"
+    ],
+    // Node card
+    node: [
+      "absolute flex items-center gap-3 rounded-lg border border-default bg-default",
+      "px-3 py-2 cursor-pointer select-none",
+      "hover:shadow-md"
+    ],
+    nodeAnimated: "transition-all duration-300 ease-in-out",
+    nodeSelected: "ring-2",
+    nodeFocused: "outline-2 outline-offset-2",
+    nodeDimmed: "opacity-30 pointer-events-none",
+    nodeMatched: "ring-2 shadow-md",
+    // Drag-and-drop
+    nodeDragging: "opacity-50 shadow-lg scale-105",
+    nodeDropTarget: "ring-2 ring-dashed",
+    // Node internals
+    nodeAvatar: "size-10 rounded-full shrink-0 object-cover",
+    nodeIcon: "size-10 shrink-0 flex items-center justify-center rounded-full bg-elevated",
+    nodeContent: "flex flex-col min-w-0",
+    nodeName: "text-sm font-semibold text-highlighted truncate",
+    nodeTitle: "text-xs text-muted truncate",
+    searchHighlight: "text-highlighted rounded-sm px-0.5",
+    // Collapse toggle
+    collapseToggle: [
+      "absolute flex items-center justify-center size-5 rounded-full",
+      "bg-elevated border border-default text-muted cursor-pointer",
+      "hover:bg-default hover:text-highlighted transition-colors"
+    ],
+    descendantBadge: "text-[10px] font-medium",
+    // Zoom controls
+    zoomControls: "absolute top-2 right-2 flex flex-col gap-1 z-10",
+    // Empty state
+    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: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    compact: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        nodeSelected: `ring-${color}`,
+        nodeFocused: `outline-${color}`,
+        nodeDropTarget: `ring-${color} bg-${color}/5`,
+        nodeMatched: `ring-${color}`,
+        searchHighlight: `bg-${color}/30`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        nodeSelected: "ring-inverted",
+        nodeFocused: "outline-inverted",
+        nodeDropTarget: "ring-inverted bg-inverted/5",
+        nodeMatched: "ring-inverted",
+        searchHighlight: "bg-inverted/30"
+      }
+    },
+    {
+      compact: true,
+      class: {
+        node: "px-2 py-1 gap-2",
+        nodeAvatar: "size-6",
+        nodeIcon: "size-6",
+        nodeName: "text-xs",
+        nodeTitle: "hidden"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    compact: false
+  }
+});
+
 const theme = {
   __proto__: null,
-  eventCalendar: eventCalendar
+  eventCalendar: eventCalendar,
+  orgChart: orgChart
 };
 
 function addTemplates(options, _nuxt) {
@@ -211,12 +346,12 @@ Add it to your \`.env\` file to build for production.`
       }
     };
     addTemplates(optionsWithTheme);
-    nuxt.options.css.push(resolver.resolve("./runtime/index.css"));
     addImportsDir(resolver.resolve("./runtime/composables"));
     nuxt.options.alias["#ui-elements-pro"] = resolver.resolve("./runtime");
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
-      prefix: options.prefix
+      prefix: options.prefix,
+      pattern: "*.vue"
     });
   }
 });

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

@@ -1,24 +1,35 @@
 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, CalendarDay, 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;
+    /** Which views are available and shown in the view switcher @defaultValue ['month', 'week', 'day', 'list'] */
+    views?: 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"];
+    /** Override header title. Pass a string for static text, or a function for dynamic formatting. */
+    headerTitle?: string | ((date: CalendarDate, view: CalendarView) => string);
     /** Month view options */
     monthOptions?: MonthViewOptions;
     /** Week view options */
@@ -32,64 +43,140 @@ 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: {
+    default?: (props: EventCalendarContext) => any;
+    /** Replace the entire header */
+    header?: (props: {
         title: string;
         prev: () => void;
         next: () => void;
         today: () => void;
         currentDate: CalendarDate;
-        view: "month" | "week" | "day";
-        setView: (v: "month" | "week" | "day") => void;
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the header title element */
+    "header-title"?: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the header nav buttons */
+    "header-nav"?: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the header view switcher */
+    "header-view-switcher"?: (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
     }) => any;
-    "day-header": (props: {
+    /** Customize event rendering across all views */
+    event?: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+    /** Customize weekday header labels (month view) */
+    "day-header"?: (props: {
         day: string;
         index: number;
     }) => any;
-    day: (props: {
+    /** Customize day cell content (month view) */
+    day?: (props: {
         day: CalendarDay;
     }) => any;
-    event: (props: {
-        event: CalendarEvent;
-        view: "month" | "week" | "day";
-    }) => any;
-    "more-events": (props: {
+    /** Customize "+N more" indicator (month view) */
+    "more-events"?: (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;
     }) => any;
-    "time-label": (props: {
+    /** Customize time labels (week/day view) */
+    "time-label"?: (props: {
         hour: number;
         label: string;
     }) => any;
-    "all-day": (props: {
+    /** Customize all-day event area (week/day view) */
+    "all-day"?: (props: {
         events: CalendarEvent[];
         date: CalendarDate;
     }) => any;
+    /** Customize date group headers (list view) */
+    "date-header"?: (props: {
+        day: CalendarDay;
+        weekday: string;
+        dateLabel: string;
+    }) => any;
+    /** Customize loading overlay */
+    loading?: () => any;
+    /** Customize empty state */
+    empty?: () => 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, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {
+    next: () => void;
+    prev: () => void;
+    today: () => void;
+    setView: (v: CalendarView) => void;
+    setDate: (date: Date | string | DateValue) => void;
+    view: import("vue").ComputedRef<CalendarView>;
+    date: import("vue").ComputedRef<CalendarDate>;
+}, {}, {}, {}, 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;