nuxt-ui-elements-pro 0.1.8 → 0.1.10

package/dist/module.json

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

package/dist/module.mjs

@@ -14,10 +14,11 @@ const eventCalendar = (options) => ({
     weekdayRow: "grid grid-cols-7 border-b border-default",
     weekdayCell: "py-2 text-center text-xs font-medium text-muted uppercase tracking-wider",
     monthBody: "flex flex-col select-none",
-    monthWeekRow: "",
-    dayCell: "border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
+    monthWeekRow: "relative",
+    dayCell: "relative border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
     dayCellOutside: "bg-muted/20",
-    monthDayNumber: "relative z-[1] p-1",
+    monthDayCell: "absolute inset-0 pointer-events-none",
+    monthDayNumber: "relative z-[1] p-1 pointer-events-none",
     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",
@@ -33,7 +34,7 @@ const eventCalendar = (options) => ({
     eventTime: "font-medium mr-1",
     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",
+    expandedOverlay: "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 bg-default border border-default rounded-lg p-1.5 shadow-xl z-20 animate-expand-overlay",
     // Week/Day view
     timeGridRoot: "flex-1 flex flex-col min-h-0 overflow-hidden",
     columnHeaders: "flex border-b border-default shrink-0",

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

@@ -100,32 +100,36 @@ export interface EventCalendarSlots {
         view: CalendarView;
     }) => any;
     /** Customize weekday header labels (month view) */
-    "day-header"?: (props: {
+    "month-weekday-header"?: (props: {
         day: string;
         index: number;
     }) => any;
-    /** Customize day cell content (month view) */
-    day?: (props: {
+    /** Customize the day header area in each month cell (month view) */
+    "month-day-header"?: (props: {
+        day: CalendarDay;
+    }) => any;
+    /** Full day-cell overlay for custom interactive content (month view). Container has pointer-events: none; use pointer-events-auto on your content. */
+    "month-day-cell"?: (props: {
         day: CalendarDay;
     }) => any;
     /** Customize "+N more" indicator (month view) */
-    "more-events"?: (props: {
+    "month-more-events"?: (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;
     }) => any;
     /** Customize time labels (week/day view) */
-    "time-label"?: (props: {
+    "time-grid-label"?: (props: {
         hour: number;
         label: string;
     }) => any;
     /** Customize all-day event area (week/day view) */
-    "all-day"?: (props: {
+    "time-grid-all-day"?: (props: {
         events: CalendarEvent[];
         date: CalendarDate;
     }) => any;
     /** Customize date group headers (list view) */
-    "date-header"?: (props: {
+    "list-date-header"?: (props: {
         day: CalendarDay;
         weekday: string;
         dateLabel: string;

package/dist/runtime/components/EventCalendar.vue

@@ -223,14 +223,17 @@ defineExpose({
         <template v-if="slots.event" #event="eventProps">
           <slot name="event" v-bind="eventProps" />
         </template>
-        <template v-if="slots['day-header']" #day-header="dayHeaderProps">
-          <slot name="day-header" v-bind="dayHeaderProps" />
+        <template v-if="slots['month-weekday-header']" #month-weekday-header="dayHeaderProps">
+          <slot name="month-weekday-header" v-bind="dayHeaderProps" />
         </template>
-        <template v-if="slots.day" #day="dayProps">
-          <slot name="day" v-bind="dayProps" />
+        <template v-if="slots['month-day-header']" #month-day-header="dayProps">
+          <slot name="month-day-header" v-bind="dayProps" />
         </template>
-        <template v-if="slots['more-events']" #more-events="moreProps">
-          <slot name="more-events" v-bind="moreProps" />
+        <template v-if="slots['month-day-cell']" #month-day-cell="cellProps">
+          <slot name="month-day-cell" v-bind="cellProps" />
+        </template>
+        <template v-if="slots['month-more-events']" #month-more-events="moreProps">
+          <slot name="month-more-events" v-bind="moreProps" />
         </template>
         <template v-if="slots.loading" #loading>
           <slot name="loading" />
@@ -242,11 +245,11 @@ defineExpose({
         <template v-if="slots.event" #event="eventProps">
           <slot name="event" v-bind="eventProps" />
         </template>
-        <template v-if="slots['time-label']" #time-label="timeLabelProps">
-          <slot name="time-label" v-bind="timeLabelProps" />
+        <template v-if="slots['time-grid-label']" #time-grid-label="timeLabelProps">
+          <slot name="time-grid-label" v-bind="timeLabelProps" />
         </template>
-        <template v-if="slots['all-day']" #all-day="allDayProps">
-          <slot name="all-day" v-bind="allDayProps" />
+        <template v-if="slots['time-grid-all-day']" #time-grid-all-day="allDayProps">
+          <slot name="time-grid-all-day" v-bind="allDayProps" />
         </template>
         <template v-if="slots.loading" #loading>
           <slot name="loading" />
@@ -258,8 +261,8 @@ defineExpose({
         <template v-if="slots.event" #event="eventProps">
           <slot name="event" v-bind="eventProps" />
         </template>
-        <template v-if="slots['date-header']" #date-header="dateHeaderProps">
-          <slot name="date-header" v-bind="dateHeaderProps" />
+        <template v-if="slots['list-date-header']" #list-date-header="dateHeaderProps">
+          <slot name="list-date-header" v-bind="dateHeaderProps" />
         </template>
       </EventCalendarListView>
     </template>

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

@@ -100,32 +100,36 @@ export interface EventCalendarSlots {
         view: CalendarView;
     }) => any;
     /** Customize weekday header labels (month view) */
-    "day-header"?: (props: {
+    "month-weekday-header"?: (props: {
         day: string;
         index: number;
     }) => any;
-    /** Customize day cell content (month view) */
-    day?: (props: {
+    /** Customize the day header area in each month cell (month view) */
+    "month-day-header"?: (props: {
+        day: CalendarDay;
+    }) => any;
+    /** Full day-cell overlay for custom interactive content (month view). Container has pointer-events: none; use pointer-events-auto on your content. */
+    "month-day-cell"?: (props: {
         day: CalendarDay;
     }) => any;
     /** Customize "+N more" indicator (month view) */
-    "more-events"?: (props: {
+    "month-more-events"?: (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;
     }) => any;
     /** Customize time labels (week/day view) */
-    "time-label"?: (props: {
+    "time-grid-label"?: (props: {
         hour: number;
         label: string;
     }) => any;
     /** Customize all-day event area (week/day view) */
-    "all-day"?: (props: {
+    "time-grid-all-day"?: (props: {
         events: CalendarEvent[];
         date: CalendarDate;
     }) => any;
     /** Customize date group headers (list view) */
-    "date-header"?: (props: {
+    "list-date-header"?: (props: {
         day: CalendarDay;
         weekday: string;
         dateLabel: string;

package/dist/runtime/components/event-calendar/EventCalendarListView.d.vue.ts

@@ -5,7 +5,7 @@ export interface EventCalendarListViewProps {
     as?: string | Component;
 }
 export interface EventCalendarListViewSlots {
-    "date-header": (props: {
+    "list-date-header": (props: {
         day: CalendarDay;
         weekday: string;
         dateLabel: string;

package/dist/runtime/components/event-calendar/EventCalendarListView.vue

@@ -31,7 +31,7 @@ function formatDateLabel(day) {
           <div
             data-slot="listDateHeader"
             :class="ctx.ui.value.listDateHeader({ class: ctx.propUi.value?.listDateHeader })">
-            <slot name="date-header" :day="day" :weekday="formatWeekday(day)" :date-label="formatDateLabel(day)">
+            <slot name="list-date-header" :day="day" :weekday="formatWeekday(day)" :date-label="formatDateLabel(day)">
               <span
                 data-slot="listDateWeekday"
                 :class="ctx.ui.value.listDateWeekday({ class: ctx.propUi.value?.listDateWeekday })">

package/dist/runtime/components/event-calendar/EventCalendarListView.vue.d.ts

@@ -5,7 +5,7 @@ export interface EventCalendarListViewProps {
     as?: string | Component;
 }
 export interface EventCalendarListViewSlots {
-    "date-header": (props: {
+    "list-date-header": (props: {
         day: CalendarDay;
         weekday: string;
         dateLabel: string;

package/dist/runtime/components/event-calendar/EventCalendarMonthView.d.vue.ts

@@ -5,18 +5,21 @@ export interface EventCalendarMonthViewProps {
     as?: string | Component;
 }
 export interface EventCalendarMonthViewSlots {
-    "day-header": (props: {
+    "month-weekday-header": (props: {
         day: string;
         index: number;
     }) => any;
-    day: (props: {
+    "month-day-header": (props: {
+        day: CalendarDay;
+    }) => any;
+    "month-day-cell": (props: {
         day: CalendarDay;
     }) => any;
     event: (props: {
         event: CalendarEvent;
         view: CalendarView;
     }) => any;
-    "more-events": (props: {
+    "month-more-events": (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;

package/dist/runtime/components/event-calendar/EventCalendarMonthView.vue

@@ -38,7 +38,7 @@ onKeyStroke("Escape", () => {
         data-slot="weekdayCell"
         role="columnheader"
         :class="ctx.ui.value.weekdayCell({ class: ctx.propUi.value?.weekdayCell })">
-        <slot name="day-header" :day="day" :index="index">
+        <slot name="month-weekday-header" :day="day" :index="index">
           {{ day }}
         </slot>
       </div>
@@ -78,12 +78,13 @@ onKeyStroke("Escape", () => {
           :aria-current="day.isToday ? 'date' : void 0"
           :data-date="day.date.toString()"
           :class="[
+  'group/cell',
   ctx.ui.value.dayCell({ class: ctx.propUi.value?.dayCell }),
   !day.isCurrentMonth && ctx.ui.value.dayCellOutside({ class: ctx.propUi.value?.dayCellOutside }),
   ctx.dropTargetKey.value === `month-${day.date.toString()}` && ctx.ui.value.dropTarget({ class: ctx.propUi.value?.dropTarget }),
   colIdx === 6 && 'border-r-0!',
   ctx.isDateInSelection(day.date) && ctx.ui.value.selectionOverlay({ class: ctx.propUi.value?.selectionOverlay }),
-  isExpanded(day.date.toString()) && 'relative z-10'
+  isExpanded(day.date.toString()) && 'z-10'
 ]"
           :style="{
   gridColumn: `${colIdx + 1}`,
@@ -96,6 +97,12 @@ onKeyStroke("Escape", () => {
           @dragover="ctx.onDragOver(`month-${day.date.toString()}`, $event)"
           @dragleave="ctx.onDragLeave"
           @drop="ctx.onDropMonthCell(day.date, $event)">
+          <div
+            v-if="$slots['month-day-cell']"
+            data-slot="monthDayCell"
+            :class="ctx.ui.value.monthDayCell({ class: ctx.propUi.value?.monthDayCell })">
+            <slot name="month-day-cell" :day="day" />
+          </div>
         </div>
 
         <!-- Layer 2: Day numbers (row 1) -->
@@ -106,19 +113,20 @@ onKeyStroke("Escape", () => {
           :class="ctx.ui.value.monthDayNumber({ class: ctx.propUi.value?.monthDayNumber })"
           :style="{
   gridColumn: `${colIdx + 1}`,
-  gridRow: '1',
-  pointerEvents: 'none'
+  gridRow: '1'
 }">
-          <slot name="day" :day="day">
-            <div
-              :class="[
+          <div class="pointer-events-auto w-fit">
+            <slot name="month-day-header" :day="day">
+              <div
+                :class="[
   !day.isToday && ctx.ui.value.dayNumber({ class: ctx.propUi.value?.dayNumber }),
   day.isToday && ctx.ui.value.dayNumberToday({ class: ctx.propUi.value?.dayNumberToday }),
   !day.isCurrentMonth && !day.isToday && ctx.ui.value.dayNumberOutside({ class: ctx.propUi.value?.dayNumberOutside })
 ]">
-              {{ day.date.day }}
-            </div>
-          </slot>
+                {{ day.date.day }}
+              </div>
+            </slot>
+          </div>
         </div>
 
         <!-- Layer 3: Spanning event bars -->
@@ -225,7 +233,7 @@ onKeyStroke("Escape", () => {
             @keydown.enter.stop="openExpandDay(layout.week.days[overflowItem.col].date.toString(), $event)"
             @keydown.space.prevent.stop="openExpandDay(layout.week.days[overflowItem.col].date.toString(), $event)">
             <slot
-              name="more-events"
+              name="month-more-events"
               :events="overflowItem.hiddenEvents.map((e) => e.original)"
               :count="overflowItem.hiddenCount"
               :day="layout.week.days[overflowItem.col]">
@@ -243,9 +251,8 @@ onKeyStroke("Escape", () => {
             :aria-label="`Events for ${ctx.formatDateAriaLabel(day.date)}`"
             :class="ctx.ui.value.expandedOverlay({ class: ctx.propUi.value?.expandedOverlay })"
             :style="{
-  gridColumn: `${colIdx + 1}`,
-  gridRow: '1 / -1',
-  zIndex: 20
+  left: `calc(${colIdx} / 7 * 100% + 100% / 14)`,
+  width: 'calc(100% / 7 + 16px)'
 }"
             @click.stop>
             <div

package/dist/runtime/components/event-calendar/EventCalendarMonthView.vue.d.ts

@@ -5,18 +5,21 @@ export interface EventCalendarMonthViewProps {
     as?: string | Component;
 }
 export interface EventCalendarMonthViewSlots {
-    "day-header": (props: {
+    "month-weekday-header": (props: {
         day: string;
         index: number;
     }) => any;
-    day: (props: {
+    "month-day-header": (props: {
+        day: CalendarDay;
+    }) => any;
+    "month-day-cell": (props: {
         day: CalendarDay;
     }) => any;
     event: (props: {
         event: CalendarEvent;
         view: CalendarView;
     }) => any;
-    "more-events": (props: {
+    "month-more-events": (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;

package/dist/runtime/components/event-calendar/EventCalendarTimeGrid.d.vue.ts

@@ -10,11 +10,11 @@ export interface EventCalendarTimeGridSlots {
         event: CalendarEvent;
         view: CalendarView;
     }) => any;
-    "time-label": (props: {
+    "time-grid-label": (props: {
         hour: number;
         label: string;
     }) => any;
-    "all-day": (props: {
+    "time-grid-all-day": (props: {
         events: CalendarEvent[];
         date: CalendarDate;
     }) => any;

package/dist/runtime/components/event-calendar/EventCalendarTimeGrid.vue

@@ -62,7 +62,7 @@ const ctx = useEventCalendarContext();
           @dragover="ctx.onDragOver(`allday-${day.dateKey}`, $event)"
           @dragleave="ctx.onDragLeave"
           @drop="ctx.onDropMonthCell(day.date, $event)">
-          <slot name="all-day" :events="day.allDayEvents.map((e) => e.original)" :date="day.date">
+          <slot name="time-grid-all-day" :events="day.allDayEvents.map((e) => e.original)" :date="day.date">
             <div
               v-for="event in day.allDayEvents"
               :key="event.id"
@@ -174,7 +174,7 @@ const ctx = useEventCalendarContext();
           :class="ctx.ui.value.timeGutterSlot({ class: ctx.propUi.value?.timeGutterSlot })"
           :style="{ height: `${ctx.SLOT_HEIGHT}px` }">
           <div v-if="slot.label" data-slot="timeLabel" :class="ctx.ui.value.timeLabel({ class: ctx.propUi.value?.timeLabel })">
-            <slot name="time-label" :hour="slot.hour" :label="slot.label">
+            <slot name="time-grid-label" :hour="slot.hour" :label="slot.label">
               {{ slot.label }}
             </slot>
           </div>

package/dist/runtime/components/event-calendar/EventCalendarTimeGrid.vue.d.ts

@@ -10,11 +10,11 @@ export interface EventCalendarTimeGridSlots {
         event: CalendarEvent;
         view: CalendarView;
     }) => any;
-    "time-label": (props: {
+    "time-grid-label": (props: {
         hour: number;
         label: string;
     }) => any;
-    "all-day": (props: {
+    "time-grid-all-day": (props: {
         events: CalendarEvent[];
         date: CalendarDate;
     }) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements-pro",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Pro components for nuxt-ui-elements",
   "license": "UNLICENSED",
   "files": [