nuxt-ui-elements-pro 0.1.9 → 0.1.10

package/dist/module.json

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

package/dist/module.mjs

@@ -15,9 +15,10 @@ const eventCalendar = (options) => ({
     weekdayCell: "py-2 text-center text-xs font-medium text-muted uppercase tracking-wider",
     monthBody: "flex flex-col select-none",
     monthWeekRow: "relative",
-    dayCell: "border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
+    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",

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

@@ -108,6 +108,10 @@ export interface EventCalendarSlots {
     "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) */
     "month-more-events"?: (props: {
         events: CalendarEvent[];

package/dist/runtime/components/EventCalendar.vue

@@ -229,6 +229,9 @@ defineExpose({
         <template v-if="slots['month-day-header']" #month-day-header="dayProps">
           <slot name="month-day-header" v-bind="dayProps" />
         </template>
+        <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>

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

@@ -108,6 +108,10 @@ export interface EventCalendarSlots {
     "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) */
     "month-more-events"?: (props: {
         events: CalendarEvent[];

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

@@ -12,6 +12,9 @@ export interface EventCalendarMonthViewSlots {
     "month-day-header": (props: {
         day: CalendarDay;
     }) => any;
+    "month-day-cell": (props: {
+        day: CalendarDay;
+    }) => any;
     event: (props: {
         event: CalendarEvent;
         view: CalendarView;

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

@@ -78,6 +78,7 @@ 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 }),
@@ -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) -->
@@ -108,16 +115,18 @@ onKeyStroke("Escape", () => {
   gridColumn: `${colIdx + 1}`,
   gridRow: '1'
 }">
-          <slot name="month-day-header" :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 -->

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

@@ -12,6 +12,9 @@ export interface EventCalendarMonthViewSlots {
     "month-day-header": (props: {
         day: CalendarDay;
     }) => any;
+    "month-day-cell": (props: {
+        day: CalendarDay;
+    }) => any;
     event: (props: {
         event: CalendarEvent;
         view: CalendarView;

package/package.json

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