nuxt-ui-elements-pro 0.1.4 → 0.1.6

package/dist/runtime/components/EventCalendarMonthView.vue

@@ -0,0 +1,336 @@
+<script>
+import { Primitive } from "reka-ui";
+import { computed, ref } from "vue";
+import { useEventListener, onKeyStroke } from "@vueuse/core";
+import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false }
+});
+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();
+  expandedDay.value = dateKey;
+}
+function closeExpandDay() {
+  expandedDay.value = null;
+}
+function isExpanded(dateKey) {
+  return expandedDay.value === dateKey;
+}
+useEventListener(document, "click", closeExpandDay);
+onKeyStroke("Escape", () => {
+  if (expandedDay.value) closeExpandDay();
+});
+</script>
+
+<template>
+  <Primitive v-if="ctx.view.value === 'month'" :as="props.as ?? 'div'" data-slot="monthView">
+    <!-- Weekday headers -->
+    <div data-slot="weekdayRow" role="row" :class="ctx.ui.value.weekdayRow({ class: ctx.propUi.value?.weekdayRow })">
+      <div
+        v-for="(day, index) in ctx.weekdayLabels.value"
+        :key="day"
+        data-slot="weekdayCell"
+        role="columnheader"
+        :class="ctx.ui.value.weekdayCell({ class: ctx.propUi.value?.weekdayCell })">
+        <slot name="day-header" :day="day" :index="index">
+          {{ day }}
+        </slot>
+      </div>
+    </div>
+
+    <!-- Month grid body -->
+    <div class="relative">
+    <div
+      data-slot="monthBody"
+      role="grid"
+      :aria-label="ctx.headerTitle.value"
+      :class="ctx.ui.value.monthBody({ class: ctx.propUi.value?.monthBody })"
+      @keydown="ctx.onGridKeydown"
+      @selectstart.prevent>
+      <div
+        v-for="layout in ctx.monthWeekLayouts.value"
+        :key="layout.week.days[0].date.toString()"
+        data-slot="monthWeekRow"
+        role="row"
+        :class="ctx.ui.value.monthWeekRow({ class: ctx.propUi.value?.monthWeekRow })"
+        :style="{
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+  gridTemplateRows: layout.totalEventRows > 0 ? `auto repeat(${layout.totalEventRows}, 24px)${layout.overflow.length > 0 ? ' auto' : ''} 1fr` : 'auto 1fr',
+  rowGap: '2px',
+  minHeight: '96px'
+}">
+
+        <!-- Layer 1: Day cell backgrounds (borders, hover, click/drop targets) -->
+        <div
+          v-for="(day, colIdx) in layout.week.days"
+          :key="'bg-' + day.date.toString()"
+          data-slot="dayCell"
+          role="gridcell"
+          :tabindex="ctx.isFocusedDate(day.date) ? 0 : -1"
+          :aria-label="ctx.formatDateAriaLabel(day.date)"
+          :aria-current="day.isToday ? 'date' : void 0"
+          :data-date="day.date.toString()"
+          :class="[
+  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'
+]"
+          :style="{
+  gridColumn: `${colIdx + 1}`,
+  gridRow: '1 / -1'
+}"
+          @click="ctx.handleDateClick(day)"
+          @pointerdown="ctx.onDayCellPointerDown(day.date, $event)"
+          @pointermove="ctx.onDayCellPointerMove(day.date)"
+          @pointerup="ctx.onSelectionPointerUp()"
+          @dragover="ctx.onDragOver(`month-${day.date.toString()}`, $event)"
+          @dragleave="ctx.onDragLeave"
+          @drop="ctx.onDropMonthCell(day.date, $event)">
+        </div>
+
+        <!-- Layer 2: Day numbers (row 1) -->
+        <div
+          v-for="(day, colIdx) in layout.week.days"
+          :key="'num-' + day.date.toString()"
+          data-slot="dayNumber"
+          :class="ctx.ui.value.monthDayNumber({ class: ctx.propUi.value?.monthDayNumber })"
+          :style="{
+  gridColumn: `${colIdx + 1}`,
+  gridRow: '1',
+  pointerEvents: 'none'
+}">
+          <slot name="day" :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>
+        </div>
+
+        <!-- Layer 3: Spanning event bars -->
+        <template v-for="spanEvent in layout.spanning" :key="'span-' + spanEvent.event.id + '-' + spanEvent.startCol">
+          <div
+            v-if="spanEvent.lane < ctx.monthConfig.value.maxEvents"
+            data-slot="spanningEventChip"
+            role="button"
+            :aria-label="ctx.formatEventAriaLabel(spanEvent.event)"
+            tabindex="0"
+            :draggable="ctx.editable.value && spanEvent.event.draggable && spanEvent.isStart"
+            :class="[
+  ctx.ui.value.spanningEventChip({ class: ctx.propUi.value?.spanningEventChip }),
+  spanEvent.isStart && 'rounded-l border-l-2 border-[var(--event-color)] ml-0.5',
+  spanEvent.isEnd && 'rounded-r mr-0.5',
+  !spanEvent.isStart && 'pl-1',
+  !spanEvent.isEnd && 'pr-1',
+  ctx.draggedEventId.value === spanEvent.event.id && 'opacity-50'
+]"
+            :style="{
+  ...ctx.getEventStyle(spanEvent.event, 15),
+  gridColumn: `${spanEvent.startCol + 1} / span ${spanEvent.span}`,
+  gridRow: `${spanEvent.lane + 2}`
+}"
+            @click="ctx.handleEventClick(spanEvent.event, $event)"
+            @keydown.enter.stop="ctx.handleEventClick(spanEvent.event, $event)"
+            @keydown.space.prevent.stop="ctx.handleEventClick(spanEvent.event, $event)"
+            @dragstart="ctx.onDragStart(spanEvent.event, $event)"
+            @dragend="ctx.onDragEnd">
+            <slot name="event" :event="spanEvent.event.original" :view="ctx.view.value">
+              <template v-if="spanEvent.isStart">
+                <UIcon
+                  v-if="spanEvent.event.recurringEventId"
+                  name="i-lucide-repeat"
+                  data-slot="recurringIcon"
+                  :class="ctx.ui.value.recurringIcon({ class: ctx.propUi.value?.recurringIcon })"
+                  aria-hidden="true" />
+                <span
+                  v-if="!spanEvent.event.allDay"
+                  data-slot="eventTime"
+                  :class="ctx.ui.value.eventTime({ class: ctx.propUi.value?.eventTime })">
+                  {{ ctx.formatTime(spanEvent.event.start) }}
+                </span>
+                {{ spanEvent.event.title }}
+              </template>
+              <span v-else class="sr-only">{{ spanEvent.event.title }} (continued)</span>
+            </slot>
+          </div>
+        </template>
+
+        <!-- Layer 4: Single-day events -->
+        <template v-for="singleEvent in layout.singleDay" :key="'single-' + singleEvent.event.id">
+          <div
+            data-slot="eventChip"
+            role="button"
+            :aria-label="ctx.formatEventAriaLabel(singleEvent.event)"
+            tabindex="0"
+            :draggable="ctx.editable.value && singleEvent.event.draggable"
+            :class="[
+  ctx.ui.value.eventChip({ class: ctx.propUi.value?.eventChip }),
+  ctx.draggedEventId.value === singleEvent.event.id && 'opacity-50'
+]"
+            :style="{
+  ...ctx.getEventStyle(singleEvent.event),
+  gridColumn: `${singleEvent.col + 1}`,
+  gridRow: `${singleEvent.gridRow}`
+}"
+            @click="ctx.handleEventClick(singleEvent.event, $event)"
+            @keydown.enter.stop="ctx.handleEventClick(singleEvent.event, $event)"
+            @keydown.space.prevent.stop="ctx.handleEventClick(singleEvent.event, $event)"
+            @dragstart="ctx.onDragStart(singleEvent.event, $event)"
+            @dragend="ctx.onDragEnd">
+            <slot name="event" :event="singleEvent.event.original" :view="ctx.view.value">
+              <UIcon
+                v-if="singleEvent.event.recurringEventId"
+                name="i-lucide-repeat"
+                data-slot="recurringIcon"
+                :class="ctx.ui.value.recurringIcon({ class: ctx.propUi.value?.recurringIcon })"
+                aria-hidden="true" />
+              <span
+                v-if="!singleEvent.event.allDay"
+                data-slot="eventTime"
+                :class="ctx.ui.value.eventTime({ class: ctx.propUi.value?.eventTime })">
+                {{ ctx.formatTime(singleEvent.event.start) }}
+              </span>
+              {{ singleEvent.event.title }}
+            </slot>
+          </div>
+        </template>
+
+        <!-- Layer 5: "+N more" indicators -->
+        <template v-for="overflowItem in layout.overflow" :key="'more-' + overflowItem.col">
+          <div
+            data-slot="moreEvents"
+            role="button"
+            tabindex="0"
+            :aria-label="`${overflowItem.hiddenCount} more events`"
+            :class="ctx.ui.value.moreEvents({ class: ctx.propUi.value?.moreEvents })"
+            :style="{
+  gridColumn: `${overflowItem.col + 1}`,
+  gridRow: `${overflowItem.gridRow}`
+}"
+            @click="openExpandDay(layout.week.days[overflowItem.col].date.toString(), $event)"
+            @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"
+              :events="overflowItem.hiddenEvents.map((e) => e.original)"
+              :count="overflowItem.hiddenCount"
+              :day="layout.week.days[overflowItem.col]">
+              +{{ overflowItem.hiddenCount }} more
+            </slot>
+          </div>
+        </template>
+
+        <!-- Layer 6: Expanded overlay -->
+        <template v-for="(day, colIdx) in layout.week.days" :key="'expand-' + day.date.toString()">
+          <div
+            v-if="isExpanded(day.date.toString()) && day.events.length > ctx.monthConfig.value.maxEvents"
+            data-slot="expandedOverlay"
+            role="dialog"
+            :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
+}"
+            @click.stop>
+            <div
+              data-slot="dayNumber"
+              :class="[
+  !day.isToday && ctx.ui.value.dayNumber({ class: ctx.propUi.value?.dayNumber }),
+  day.isToday && ctx.ui.value.dayNumberToday({ class: ctx.propUi.value?.dayNumberToday })
+]">
+              {{ day.date.day }}
+            </div>
+            <div data-slot="eventList" :class="ctx.ui.value.eventList({ class: ctx.propUi.value?.eventList })">
+              <div
+                v-for="event in day.events"
+                :key="`expanded-${event.id}`"
+                data-slot="eventChip"
+                role="button"
+                :aria-label="ctx.formatEventAriaLabel(event)"
+                tabindex="0"
+                :draggable="ctx.editable.value && event.draggable"
+                :class="ctx.ui.value.eventChip({ class: ctx.propUi.value?.eventChip })"
+                :style="ctx.getEventStyle(event)"
+                @click="ctx.handleEventClick(event, $event)"
+                @keydown.enter.stop="ctx.handleEventClick(event, $event)"
+                @keydown.space.prevent.stop="ctx.handleEventClick(event, $event)"
+                @dragstart="ctx.onDragStart(event, $event)"
+                @dragend="ctx.onDragEnd">
+                <slot name="event" :event="event.original" :view="ctx.view.value">
+                  <UIcon
+                    v-if="event.recurringEventId"
+                    name="i-lucide-repeat"
+                    data-slot="recurringIcon"
+                    :class="ctx.ui.value.recurringIcon({ class: ctx.propUi.value?.recurringIcon })"
+                    aria-hidden="true" />
+                  <span
+                    v-if="!event.allDay"
+                    data-slot="eventTime"
+                    :class="ctx.ui.value.eventTime({ class: ctx.propUi.value?.eventTime })">
+                    {{ ctx.formatTime(event.start) }}
+                  </span>
+                  {{ event.title }}
+                </slot>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Loading overlay -->
+    <div
+      v-if="ctx.loading.value"
+      data-slot="loadingOverlay"
+      role="status"
+      :class="ctx.ui.value.loadingOverlay({ class: ctx.propUi.value?.loadingOverlay })">
+      <slot name="loading">
+        <UIcon
+          name="i-lucide-loader-circle"
+          data-slot="loadingIcon"
+          :class="ctx.ui.value.loadingIcon({ class: ctx.propUi.value?.loadingIcon })"
+          aria-hidden="true" />
+        <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/EventCalendarMonthView.vue.d.ts

@@ -0,0 +1,34 @@
+import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import { type Component } from "vue";
+export interface EventCalendarMonthViewProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+}
+export interface EventCalendarMonthViewSlots {
+    "day-header": (props: {
+        day: string;
+        index: number;
+    }) => any;
+    day: (props: {
+        day: CalendarDay;
+    }) => any;
+    event: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+    "more-events": (props: {
+        events: CalendarEvent[];
+        count: number;
+        day: CalendarDay;
+    }) => any;
+    loading: () => any;
+    empty: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarMonthViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EventCalendarMonthViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarMonthViewSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,31 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { CalendarEvent, CalendarView } from "../types/event-calendar.js";
+import { type Component } from "vue";
+export interface EventCalendarTimeGridProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+}
+export interface EventCalendarTimeGridSlots {
+    event: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+    "time-label": (props: {
+        hour: number;
+        label: string;
+    }) => any;
+    "all-day": (props: {
+        events: CalendarEvent[];
+        date: CalendarDate;
+    }) => any;
+    loading: () => any;
+    empty: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarTimeGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EventCalendarTimeGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarTimeGridSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};