nuxt-ui-elements-pro 0.1.4 → 0.1.6

package/dist/runtime/components/EventCalendarTimeGrid.vue

@@ -0,0 +1,306 @@
+<script>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+import { format } from "#std/date";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false }
+});
+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>
+  <Primitive
+    v-if="ctx.view.value === 'week' || ctx.view.value === 'day'"
+    :as="props.as ?? 'div'"
+    data-slot="timeGridRoot"
+    :class="ctx.ui.value.timeGridRoot({ class: ctx.propUi.value?.timeGridRoot })"
+    role="region"
+    :aria-label="`${ctx.view.value === 'week' ? 'Week' : 'Day'} view: ${ctx.headerTitle.value}`"
+    @keydown="ctx.onGridKeydown">
+    <!-- Column headers -->
+    <div data-slot="columnHeaders" :class="ctx.ui.value.columnHeaders({ class: ctx.propUi.value?.columnHeaders })">
+      <div data-slot="timeGutterSpacer" :class="ctx.ui.value.timeGutterSpacer({ class: ctx.propUi.value?.timeGutterSpacer })" />
+      <div
+        v-for="day in ctx.timeGridDays.value"
+        :key="day.dateKey"
+        data-slot="dayColumnHeader"
+        :aria-label="ctx.formatDateAriaLabel(day.date)"
+        :aria-current="day.isToday ? 'date' : void 0"
+        :class="ctx.ui.value.dayColumnHeader({ class: ctx.propUi.value?.dayColumnHeader })">
+        <div :class="ctx.ui.value.dayColumnHeaderLabel({ class: ctx.propUi.value?.dayColumnHeaderLabel })">
+          {{ format(day.date, ctx.timeGridDays.value.length === 1 ? "dddd" : "ddd", ctx.locale.value) }}
+        </div>
+        <div
+          :class="[
+  day.isToday ? ctx.ui.value.dayColumnHeaderToday({ class: ctx.propUi.value?.dayColumnHeaderToday }) : ctx.ui.value.dayColumnHeaderNumber({ class: ctx.propUi.value?.dayColumnHeaderNumber })
+]">
+          {{ day.date.day }}
+        </div>
+      </div>
+    </div>
+
+    <!-- All-day events row -->
+    <div data-slot="allDayRow" aria-label="All-day events" :class="ctx.ui.value.allDayRow({ class: ctx.propUi.value?.allDayRow })">
+      <div data-slot="allDayLabel" :class="ctx.ui.value.allDayLabel({ class: ctx.propUi.value?.allDayLabel })">all-day</div>
+
+      <!-- Day view: single column with all-day slot -->
+      <template v-if="ctx.timeGridDays.value.length === 1">
+        <div
+          v-for="day in ctx.timeGridDays.value"
+          :key="`allday-${day.dateKey}`"
+          data-slot="allDayCell"
+          :class="[
+  'flex-1 p-0.5 flex flex-wrap gap-0.5',
+  ctx.ui.value.allDayCell({ class: ctx.propUi.value?.allDayCell }),
+  ctx.dropTargetKey.value === `allday-${day.dateKey}` && ctx.ui.value.dropTarget({ class: ctx.propUi.value?.dropTarget })
+]"
+          @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">
+            <div
+              v-for="event in day.allDayEvents"
+              :key="event.id"
+              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 }), 'w-full']"
+              :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" />
+                {{ event.title }}
+              </slot>
+            </div>
+          </slot>
+        </div>
+      </template>
+
+      <!-- Week view: CSS Grid with spanning bars -->
+      <template v-else>
+        <div
+          data-slot="allDayGrid"
+          :class="ctx.ui.value.allDayGrid({ class: ctx.propUi.value?.allDayGrid })"
+          :style="{
+  display: 'grid',
+  gridTemplateColumns: `repeat(${ctx.timeGridDays.value.length}, minmax(0, 1fr))`,
+  gridTemplateRows: ctx.allDayLayout.value.laneCount > 0 ? `repeat(${ctx.allDayLayout.value.laneCount}, 24px)` : 'minmax(24px, auto)'
+}">
+          <!-- Background cells (drop targets + borders) -->
+          <div
+            v-for="(day, colIdx) in ctx.timeGridDays.value"
+            :key="`allday-bg-${day.dateKey}`"
+            data-slot="allDayCell"
+            :class="[
+  ctx.ui.value.allDayCell({ class: ctx.propUi.value?.allDayCell }),
+  ctx.dropTargetKey.value === `allday-${day.dateKey}` && ctx.ui.value.dropTarget({ class: ctx.propUi.value?.dropTarget })
+]"
+            :style="{
+  gridColumn: `${colIdx + 1}`,
+  gridRow: '1 / -1'
+}"
+            @dragover="ctx.onDragOver(`allday-${day.dateKey}`, $event)"
+            @dragleave="ctx.onDragLeave"
+            @drop="ctx.onDropMonthCell(day.date, $event)" />
+
+          <!-- Spanning event bars -->
+          <div
+            v-for="spanEvent in ctx.allDayLayout.value.spanning"
+            :key="`allday-span-${spanEvent.event.id}-${spanEvent.startCol}`"
+            data-slot="allDaySpanningChip"
+            role="button"
+            :aria-label="ctx.formatEventAriaLabel(spanEvent.event)"
+            tabindex="0"
+            :draggable="ctx.editable.value && spanEvent.event.draggable && spanEvent.isStart"
+            :class="[
+  ctx.ui.value.allDaySpanningChip({ class: ctx.propUi.value?.allDaySpanningChip }),
+  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 + 1}`
+}"
+            @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" />
+                {{ spanEvent.event.title }}
+              </template>
+              <span v-else class="sr-only">{{ spanEvent.event.title }} (continued)</span>
+            </slot>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Time grid -->
+    <div class="relative">
+    <div data-slot="timeGrid" :class="ctx.ui.value.timeGrid({ class: ctx.propUi.value?.timeGrid })" @selectstart.prevent>
+      <!-- Time gutter -->
+      <div data-slot="timeGutter" :class="ctx.ui.value.timeGutter({ class: ctx.propUi.value?.timeGutter })">
+        <div
+          v-for="slot in ctx.timeGridSlots.value"
+          :key="`gutter-${slot.hour}-${slot.minute}`"
+          data-slot="timeGutterSlot"
+          :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.label }}
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <!-- Day columns -->
+      <div
+        v-for="day in ctx.timeGridDays.value"
+        :key="`col-${day.dateKey}`"
+        data-slot="dayColumn"
+        :class="ctx.ui.value.dayColumn({ class: ctx.propUi.value?.dayColumn })"
+        @dragover="ctx.onTimeGridDragOver(`time-${day.dateKey}`, $event)"
+        @dragleave="ctx.onDragLeave"
+        @drop="ctx.onDropTimeGrid(day.date, $event)">
+        <!-- Time slot rows (grid lines + drag targets) -->
+        <div
+          v-for="slot in ctx.timeGridSlots.value"
+          :key="`row-${slot.hour}-${slot.minute}`"
+          data-slot="timeSlotRow"
+          :class="[
+  ctx.ui.value.timeSlotRow({ class: ctx.propUi.value?.timeSlotRow }),
+  ctx.dragSnapSlot.value === `time-${day.dateKey}-${slot.hour}-${slot.minute}` && ctx.ui.value.dragSnapSlot({ class: ctx.propUi.value?.dragSnapSlot }),
+  ctx.isSlotInSelection(day.date, slot.hour, slot.minute) && ctx.ui.value.selectionOverlay({ class: ctx.propUi.value?.selectionOverlay })
+]"
+          :style="{ height: `${ctx.SLOT_HEIGHT}px` }"
+          @click="ctx.handleDateClick(day)"
+          @pointerdown="ctx.onSlotPointerDown(day.date, slot.hour, slot.minute, $event)"
+          @pointermove="ctx.onSlotPointerMove(day.date, slot.hour, slot.minute)"
+          @pointerup="ctx.onSelectionPointerUp()"
+          @dragover="ctx.onSlotDragOver(`time-${day.dateKey}-${slot.hour}-${slot.minute}`, $event)" />
+
+        <!-- Timed events (absolutely positioned) -->
+        <div
+          v-for="event in day.timedEvents"
+          :key="`ev-${event.id}`"
+          data-slot="timeEvent"
+          role="button"
+          :aria-label="ctx.formatEventAriaLabel(event)"
+          tabindex="0"
+          :draggable="ctx.editable.value && event.draggable && ctx.resizingEventId.value == null"
+          :class="[
+  ctx.ui.value.timeEvent({ class: ctx.propUi.value?.timeEvent }),
+  ctx.draggedEventId.value != null && ctx.draggedEventId.value !== event.id && 'pointer-events-none',
+  ctx.draggedEventId.value === event.id && 'opacity-50',
+  ctx.resizingEventId.value != null && ctx.resizingEventId.value !== event.id && 'pointer-events-none',
+  ctx.resizingEventId.value === event.id && 'select-none'
+]"
+          :style="{
+  ...ctx.getEventStyle(event, 15),
+  top: `${event.topPx}px`,
+  height: ctx.resizingEventId.value === event.id && ctx.resizePreviewHeightPx.value != null ? `${ctx.resizePreviewHeightPx.value}px` : `${event.heightPx}px`,
+  minHeight: '20px',
+  left: `calc(${event.column / event.totalColumns * 100}% + 2px)`,
+  width: `calc(${1 / event.totalColumns * 100}% - 4px)`
+}"
+          @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">
+            <div data-slot="timeEventTitle" :class="ctx.ui.value.timeEventTitle({ class: ctx.propUi.value?.timeEventTitle })">
+              <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" />
+              {{ event.title }}
+            </div>
+            <div data-slot="timeEventTime" :class="ctx.ui.value.timeEventTime({ class: ctx.propUi.value?.timeEventTime })">
+              {{ ctx.formatTimeRange(event.start, event.end) }}
+            </div>
+          </slot>
+          <!-- Resize handle (bottom edge) -->
+          <div
+            v-if="ctx.editable.value && event.resizable"
+            data-slot="resizeHandle"
+            :class="ctx.ui.value.resizeHandle({ class: ctx.propUi.value?.resizeHandle })"
+            @pointerdown.stop="ctx.onResizePointerDown(event, $event)">
+            <div
+              data-slot="resizeHandleBar"
+              :class="ctx.ui.value.resizeHandleBar({ class: ctx.propUi.value?.resizeHandleBar })" />
+          </div>
+        </div>
+      </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/EventCalendarTimeGrid.vue.d.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;
+    };
+};

package/dist/runtime/composables/useEventCalendar.d.ts

@@ -0,0 +1,52 @@
+import type { CalendarDate, CalendarDateTime, DateValue } from "@internationalized/date";
+import type { CalendarEvent, CalendarDay, CalendarView, CalendarWeek, NormalizedEvent, TimeSlot, TimeGridDay, MonthViewOptions, WeekViewOptions, DayViewOptions, MonthWeekLayout, AllDayLayout } from "../types/event-calendar.js";
+export declare const SLOT_HEIGHT = 48;
+export interface UseEventCalendarOptions {
+    events: () => CalendarEvent[];
+    modelValue: () => Date | string | DateValue | undefined;
+    view: () => CalendarView;
+    locale: () => string;
+    weekStartsOn: () => 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    monthOptions: () => MonthViewOptions | undefined;
+    weekOptions: () => WeekViewOptions | undefined;
+    dayOptions: () => DayViewOptions | undefined;
+    onUpdateModelValue: (date: CalendarDate) => void;
+    onUpdateView: (view: CalendarView) => void;
+}
+export declare function useEventCalendar(options: UseEventCalendarOptions): {
+    displayDate: import("vue").ComputedRef<CalendarDate>;
+    monthConfig: import("vue").ComputedRef<{
+        maxEvents: number;
+        fixedWeeks: boolean;
+    }>;
+    weekConfig: import("vue").ComputedRef<{
+        startHour: number;
+        endHour: number;
+        slotDuration: 15 | 30 | 60;
+    }>;
+    dayConfig: import("vue").ComputedRef<{
+        startHour: number;
+        endHour: number;
+        slotDuration: 15 | 30 | 60;
+    }>;
+    monthWeeks: import("vue").ComputedRef<CalendarWeek[]>;
+    monthWeekLayouts: import("vue").ComputedRef<MonthWeekLayout[]>;
+    weekdayLabels: import("vue").ComputedRef<string[]>;
+    weekDays: import("vue").ComputedRef<CalendarDay[]>;
+    dayViewDate: import("vue").ComputedRef<CalendarDay>;
+    listDays: import("vue").ComputedRef<CalendarDay[]>;
+    timeGridDays: import("vue").ComputedRef<TimeGridDay[]>;
+    allDayLayout: import("vue").ComputedRef<AllDayLayout>;
+    timeGridSlots: import("vue").ComputedRef<TimeSlot[]>;
+    headerTitle: import("vue").ComputedRef<string>;
+    formatTime: (d: CalendarDate | CalendarDateTime) => string;
+    formatTimeRange: (start: CalendarDate | CalendarDateTime, end: CalendarDate | CalendarDateTime) => string;
+    getEventStyle: (event: NormalizedEvent, bgOpacity?: number) => Record<string, string>;
+    isEventStart: (event: NormalizedEvent, date: CalendarDate) => boolean;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goToToday: () => void;
+    setView: (v: CalendarView) => void;
+    normalizedEvents: import("vue").ComputedRef<NormalizedEvent[]>;
+    SLOT_HEIGHT: number;
+};