nuxt-ui-elements-pro 0.1.7 → 0.1.9

package/dist/module.json

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

package/dist/module.mjs

@@ -14,7 +14,7 @@ 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: "",
+    monthWeekRow: "relative",
     dayCell: "border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
     dayCellOutside: "bg-muted/20",
     monthDayNumber: "relative z-[1] p-1",
@@ -33,7 +33,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",
@@ -79,12 +79,9 @@ const eventCalendar = (options) => ({
     dragSnapSlot: "",
     // Selection
     selectionOverlay: "",
-    // Loading & empty states
+    // Loading state
     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"
+    loadingIcon: "size-8 text-muted animate-spin"
   },
   variants: {
     color: {

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

@@ -100,40 +100,38 @@ 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;
     /** 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;
     }) => any;
     /** Customize loading overlay */
     loading?: () => any;
-    /** Customize empty state */
-    empty?: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/EventCalendar.vue

@@ -223,21 +223,18 @@ 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-more-events']" #month-more-events="moreProps">
+          <slot name="month-more-events" v-bind="moreProps" />
         </template>
         <template v-if="slots.loading" #loading>
           <slot name="loading" />
         </template>
-        <template v-if="slots.empty" #empty>
-          <slot name="empty" />
-        </template>
       </EventCalendarMonthView>
 
       <!-- Week/Day time grid view -->
@@ -245,18 +242,15 @@ 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" />
         </template>
-        <template v-if="slots.empty" #empty>
-          <slot name="empty" />
-        </template>
       </EventCalendarTimeGrid>
 
       <!-- List view -->
@@ -264,8 +258,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,40 +100,38 @@ 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;
     /** 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;
     }) => any;
     /** Customize loading overlay */
     loading?: () => any;
-    /** Customize empty state */
-    empty?: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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,24 +5,23 @@ 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;
     event: (props: {
         event: CalendarEvent;
         view: CalendarView;
     }) => any;
-    "more-events": (props: {
+    "month-more-events": (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;
     }) => any;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,6 @@
 <script>
 import { Primitive } from "reka-ui";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useEventListener, onKeyStroke } from "@vueuse/core";
 import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
 </script>
@@ -11,11 +11,6 @@ const props = defineProps({
 });
 defineSlots();
 const ctx = useEventCalendarContext();
-const isEmpty = computed(
-  () => !ctx.loading.value && ctx.monthWeekLayouts.value.every(
-    (layout) => layout.spanning.length === 0 && layout.singleDay.length === 0
-  )
-);
 const expandedDay = ref(null);
 function openExpandDay(dateKey, e) {
   e.stopPropagation();
@@ -43,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>
@@ -88,7 +83,7 @@ onKeyStroke("Escape", () => {
   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}`,
@@ -111,10 +106,9 @@ 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">
+          <slot name="month-day-header" :day="day">
             <div
               :class="[
   !day.isToday && ctx.ui.value.dayNumber({ class: ctx.propUi.value?.dayNumber }),
@@ -230,7 +224,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]">
@@ -248,9 +242,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
@@ -314,23 +307,6 @@ onKeyStroke("Escape", () => {
         <span class="sr-only">Loading events</span>
       </slot>
     </div>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="isEmpty"
-      data-slot="emptyState"
-      :class="ctx.ui.value.emptyState({ class: ctx.propUi.value?.emptyState })">
-      <slot name="empty">
-        <UIcon
-          name="i-lucide-calendar-x2"
-          data-slot="emptyStateIcon"
-          :class="ctx.ui.value.emptyStateIcon({ class: ctx.propUi.value?.emptyStateIcon })"
-          aria-hidden="true" />
-        <p data-slot="emptyStateText" :class="ctx.ui.value.emptyStateText({ class: ctx.propUi.value?.emptyStateText })">
-          No events
-        </p>
-      </slot>
-    </div>
     </div>
   </Primitive>
 </template>

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

@@ -5,24 +5,23 @@ 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;
     event: (props: {
         event: CalendarEvent;
         view: CalendarView;
     }) => any;
-    "more-events": (props: {
+    "month-more-events": (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;
     }) => any;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -10,16 +10,15 @@ 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;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,6 @@
 <script>
 import { Primitive } from "reka-ui";
-import { computed } from "vue";
+import {} from "vue";
 import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
 import { format } from "#std/date";
 </script>
@@ -11,11 +11,6 @@ const props = defineProps({
 });
 defineSlots();
 const ctx = useEventCalendarContext();
-const isEmpty = computed(
-  () => !ctx.loading.value && ctx.timeGridDays.value.every(
-    (day) => day.allDayEvents.length === 0 && day.timedEvents.length === 0
-  )
-);
 </script>
 
 <template>
@@ -67,7 +62,7 @@ const isEmpty = computed(
           @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"
@@ -179,7 +174,7 @@ const isEmpty = computed(
           :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>
@@ -284,23 +279,6 @@ const isEmpty = computed(
         <span class="sr-only">Loading events</span>
       </slot>
     </div>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="isEmpty"
-      data-slot="emptyState"
-      :class="ctx.ui.value.emptyState({ class: ctx.propUi.value?.emptyState })">
-      <slot name="empty">
-        <UIcon
-          name="i-lucide-calendar-x2"
-          data-slot="emptyStateIcon"
-          :class="ctx.ui.value.emptyStateIcon({ class: ctx.propUi.value?.emptyStateIcon })"
-          aria-hidden="true" />
-        <p data-slot="emptyStateText" :class="ctx.ui.value.emptyStateText({ class: ctx.propUi.value?.emptyStateText })">
-          No events
-        </p>
-      </slot>
-    </div>
     </div>
   </Primitive>
 </template>

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

@@ -10,16 +10,15 @@ 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;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

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