nuxt-ui-elements-pro 0.1.4 → 0.1.6

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

@@ -1,22 +1,29 @@
 import type { CalendarDate, DateValue } from "@internationalized/date";
 import type { AppConfig } from "@nuxt/schema";
-import theme from "#build/ui-elements-pro/event-calendar";
 import type { ComponentConfig } from "nuxt-ui-elements";
-import type { CalendarEvent, CalendarDay, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload, EventResizePayload, SelectPayload, EventCalendarContext } from "../types/event-calendar.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/event-calendar";
 type EventCalendar = ComponentConfig<typeof theme, AppConfig, "eventCalendar">;
 export interface EventCalendarProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
     /** Array of events to display */
     events?: CalendarEvent[];
     /** Currently displayed date. Controls which month/week/day is shown. Supports v-model. */
     modelValue?: Date | string | DateValue;
     /** Calendar view mode @defaultValue 'month' */
-    view?: "month" | "week" | "day";
+    view?: CalendarView;
     /** Locale for day/month names @defaultValue 'en-US' */
     locale?: string;
-    /** Day the week starts on @defaultValue 0 */
-    weekStartsOn?: 0 | 1;
+    /** Day the week starts on (0=Sun, 1=Mon, … 6=Sat) @defaultValue 0 */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /** Enable drag-and-drop globally @defaultValue true */
     editable?: boolean;
+    /** Show loading overlay @defaultValue false */
+    loading?: boolean;
+    /** Enable click/drag date range selection @defaultValue true */
+    selectable?: boolean;
     /** Theme color for calendar chrome @defaultValue 'primary' */
     color?: EventCalendar["variants"]["color"];
     /** Month view options */
@@ -32,64 +39,63 @@ export interface EventCalendarEmits {
     /** Fires when the displayed date changes */
     "update:modelValue": [value: CalendarDate];
     /** Fires when the view changes */
-    "update:view": [value: "month" | "week" | "day"];
+    "update:view": [value: CalendarView];
     /** Fires when a date cell is clicked */
     dateClick: [date: CalendarDate];
     /** Fires when an event is clicked */
     eventClick: [event: CalendarEvent];
     /** Fires after drag-and-drop */
     eventDrop: [payload: EventDropPayload];
+    /** Fires after resize */
+    eventResize: [payload: EventResizePayload];
+    /** Fires when resize starts */
+    eventResizeStart: [payload: {
+        event: CalendarEvent;
+    }];
+    /** Fires when resize ends */
+    eventResizeEnd: [payload: {
+        event: CalendarEvent;
+    }];
+    /** Fires after a click or drag date range selection */
+    select: [payload: SelectPayload];
 }
 export interface EventCalendarSlots {
-    header: (props: {
-        title: string;
-        prev: () => void;
-        next: () => void;
-        today: () => void;
-        currentDate: CalendarDate;
-        view: "month" | "week" | "day";
-        setView: (v: "month" | "week" | "day") => void;
-    }) => any;
-    "day-header": (props: {
-        day: string;
-        index: number;
-    }) => any;
-    day: (props: {
-        day: CalendarDay;
-    }) => any;
-    event: (props: {
-        event: CalendarEvent;
-        view: "month" | "week" | "day";
-    }) => any;
-    "more-events": (props: {
-        events: CalendarEvent[];
-        count: number;
-        day: CalendarDay;
-    }) => any;
-    "time-label": (props: {
-        hour: number;
-        label: string;
-    }) => any;
-    "all-day": (props: {
-        events: CalendarEvent[];
-        date: CalendarDate;
-    }) => any;
+    default: (props: EventCalendarContext) => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (payload: SelectPayload) => any;
     "update:modelValue": (value: CalendarDate) => any;
-    "update:view": (value: "day" | "month" | "week") => any;
+    "update:view": (value: CalendarView) => any;
     dateClick: (date: CalendarDate) => any;
     eventClick: (event: CalendarEvent) => any;
     eventDrop: (payload: EventDropPayload) => any;
+    eventResize: (payload: EventResizePayload) => any;
+    eventResizeStart: (payload: {
+        event: CalendarEvent;
+    }) => any;
+    eventResizeEnd: (payload: {
+        event: CalendarEvent;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<EventCalendarProps> & Readonly<{
+    onSelect?: ((payload: SelectPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: CalendarDate) => any) | undefined;
-    "onUpdate:view"?: ((value: "day" | "month" | "week") => any) | undefined;
+    "onUpdate:view"?: ((value: CalendarView) => any) | undefined;
     onDateClick?: ((date: CalendarDate) => any) | undefined;
     onEventClick?: ((event: CalendarEvent) => any) | undefined;
     onEventDrop?: ((payload: EventDropPayload) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
+    onEventResize?: ((payload: EventResizePayload) => any) | undefined;
+    onEventResizeStart?: ((payload: {
+        event: CalendarEvent;
+    }) => any) | undefined;
+    onEventResizeEnd?: ((payload: {
+        event: CalendarEvent;
+    }) => any) | undefined;
+}>, {
+    editable: boolean;
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,26 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { CalendarView } from "../types/event-calendar.js";
+import type { Component } from "vue";
+export interface EventCalendarHeaderProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+}
+export interface EventCalendarHeaderSlots {
+    default: (props: {
+        title: string;
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+        currentDate: CalendarDate;
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EventCalendarHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarHeaderSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/EventCalendarHeader.vue

@@ -0,0 +1,48 @@
+<script>
+import { Primitive } from "reka-ui";
+import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false }
+});
+defineSlots();
+const ctx = useEventCalendarContext();
+</script>
+
+<template>
+  <Primitive :as="props.as ?? 'div'" data-slot="header" :class="ctx.ui.value.header({ class: ctx.propUi.value?.header })">
+    <slot
+      :title="ctx.headerTitle.value"
+      :prev="ctx.goToPrev"
+      :next="ctx.goToNext"
+      :today="ctx.goToToday"
+      :current-date="ctx.displayDate.value"
+      :view="ctx.view.value"
+      :set-view="ctx.setView">
+      <span data-slot="headerTitle" :class="ctx.ui.value.headerTitle({ class: ctx.propUi.value?.headerTitle })" aria-live="polite" aria-atomic="true">
+        {{ ctx.headerTitle.value }}
+      </span>
+
+      <div data-slot="headerActions" :class="ctx.ui.value.headerActions({ class: ctx.propUi.value?.headerActions })">
+        <div data-slot="viewSwitcher" role="group" aria-label="Calendar view" :class="ctx.ui.value.viewSwitcher({ class: ctx.propUi.value?.viewSwitcher })">
+          <UButton
+            v-for="v in ['month', 'week', 'day', 'list']"
+            :key="v"
+            :label="v"
+            size="xs"
+            :color="ctx.view.value === v ? ctx.color.value : 'neutral'"
+            :variant="ctx.view.value === v ? 'subtle' : 'ghost'"
+            :aria-pressed="ctx.view.value === v"
+            class="capitalize"
+            @click="ctx.setView(v)" />
+        </div>
+
+        <UButton icon="i-lucide-chevron-left" color="neutral" variant="ghost" size="xs" square :aria-label="`Previous ${ctx.view.value}`" @click="ctx.goToPrev" />
+        <UButton label="Today" color="neutral" variant="ghost" size="xs" aria-label="Go to today" @click="ctx.goToToday" />
+        <UButton icon="i-lucide-chevron-right" color="neutral" variant="ghost" size="xs" square :aria-label="`Next ${ctx.view.value}`" @click="ctx.goToNext" />
+      </div>
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,26 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { CalendarView } from "../types/event-calendar.js";
+import type { Component } from "vue";
+export interface EventCalendarHeaderProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+}
+export interface EventCalendarHeaderSlots {
+    default: (props: {
+        title: string;
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+        currentDate: CalendarDate;
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EventCalendarHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarHeaderSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import type { Component } from "vue";
+export interface EventCalendarListViewProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+}
+export interface EventCalendarListViewSlots {
+    "date-header": (props: {
+        day: CalendarDay;
+        weekday: string;
+        dateLabel: string;
+    }) => any;
+    event: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarListViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EventCalendarListViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarListViewSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/EventCalendarListView.vue

@@ -0,0 +1,95 @@
+<script>
+import { Primitive } from "reka-ui";
+import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { format } from "#std/date";
+const props = defineProps({
+  as: { type: null, required: false }
+});
+defineSlots();
+const ctx = useEventCalendarContext();
+const daysWithEvents = computed(
+  () => ctx.listDays.value.filter((day) => day.events.length > 0)
+);
+function formatWeekday(day) {
+  return format(day.date, "dddd", ctx.locale.value);
+}
+function formatDateLabel(day) {
+  return format(day.date, "MMMM D, YYYY", ctx.locale.value);
+}
+</script>
+
+<template>
+  <Primitive v-if="ctx.view.value === 'list'" :as="props.as ?? 'div'" data-slot="listView">
+    <div data-slot="listBody" :class="ctx.ui.value.listBody({ class: ctx.propUi.value?.listBody })">
+      <template v-if="daysWithEvents.length > 0">
+        <template v-for="day in daysWithEvents" :key="day.date.toString()">
+          <!-- Date header -->
+          <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)">
+              <span
+                data-slot="listDateWeekday"
+                :class="ctx.ui.value.listDateWeekday({ class: ctx.propUi.value?.listDateWeekday })">
+                {{ formatWeekday(day) }}
+              </span>
+              <span
+                data-slot="listDateLabel"
+                :class="ctx.ui.value.listDateLabel({ class: ctx.propUi.value?.listDateLabel })">
+                {{ formatDateLabel(day) }}
+              </span>
+            </slot>
+          </div>
+
+          <!-- Event rows -->
+          <div
+            v-for="event in day.events"
+            :key="event.id"
+            data-slot="listEventRow"
+            role="button"
+            :aria-label="ctx.formatEventAriaLabel(event)"
+            tabindex="0"
+            :class="ctx.ui.value.listEventRow({ class: ctx.propUi.value?.listEventRow })"
+            @click="ctx.handleEventClick(event, $event)"
+            @keydown.enter.stop="ctx.handleEventClick(event, $event)"
+            @keydown.space.prevent.stop="ctx.handleEventClick(event, $event)">
+            <slot name="event" :event="event.original" :view="ctx.view.value">
+              <span
+                data-slot="listEventTime"
+                :class="ctx.ui.value.listEventTime({ class: ctx.propUi.value?.listEventTime })">
+                {{ event.allDay ? "all day" : ctx.formatTimeRange(event.start, event.end) }}
+              </span>
+              <span
+                data-slot="listEventDot"
+                :class="ctx.ui.value.listEventDot({ class: ctx.propUi.value?.listEventDot })"
+                :style="{ backgroundColor: `var(--ui-${event.color === 'neutral' ? 'bg-inverted' : event.color})` }" />
+              <span
+                data-slot="listEventTitle"
+                :class="ctx.ui.value.listEventTitle({ class: ctx.propUi.value?.listEventTitle })">
+                <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 }}
+              </span>
+            </slot>
+          </div>
+        </template>
+      </template>
+
+      <!-- Empty state -->
+      <div
+        v-else
+        data-slot="listEmpty"
+        :class="ctx.ui.value.listEmpty({ class: ctx.propUi.value?.listEmpty })">
+        No events this week
+      </div>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,25 @@
+import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import type { Component } from "vue";
+export interface EventCalendarListViewProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+}
+export interface EventCalendarListViewSlots {
+    "date-header": (props: {
+        day: CalendarDay;
+        weekday: string;
+        dateLabel: string;
+    }) => any;
+    event: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarListViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EventCalendarListViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarListViewSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/EventCalendarMonthView.d.vue.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;
+    };
+};