nuxt-ui-elements-pro 0.1.6 → 0.1.7

package/dist/module.json

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

package/dist/module.mjs

@@ -119,9 +119,109 @@ const eventCalendar = (options) => ({
   }
 });
 
+const orgChart = (options) => ({
+  slots: {
+    // Root container
+    root: "relative w-full overflow-auto",
+    // Viewport (zoom/pan container)
+    viewport: "relative will-change-transform",
+    // SVG connector layer
+    connectorLayer: "absolute inset-0 pointer-events-none overflow-visible",
+    connector: "fill-none text-[var(--ui-border-accented)] stroke-current stroke-2",
+    // Non-hierarchical connection
+    connection: "fill-none text-[var(--ui-border-accented)] stroke-current stroke-2 pointer-events-auto cursor-pointer",
+    connectionLabel: [
+      "absolute text-xs px-1.5 py-0.5 rounded bg-elevated border border-default",
+      "text-muted whitespace-nowrap pointer-events-auto cursor-pointer",
+      "-translate-x-1/2 -translate-y-1/2"
+    ],
+    // Node card
+    node: [
+      "absolute flex items-center gap-3 rounded-lg border border-default bg-default",
+      "px-3 py-2 cursor-pointer select-none",
+      "hover:shadow-md"
+    ],
+    nodeAnimated: "transition-all duration-300 ease-in-out",
+    nodeSelected: "ring-2",
+    nodeFocused: "outline-2 outline-offset-2",
+    nodeDimmed: "opacity-30 pointer-events-none",
+    nodeMatched: "ring-2 shadow-md",
+    // Drag-and-drop
+    nodeDragging: "opacity-50 shadow-lg scale-105",
+    nodeDropTarget: "ring-2 ring-dashed",
+    // Node internals
+    nodeAvatar: "size-10 rounded-full shrink-0 object-cover",
+    nodeIcon: "size-10 shrink-0 flex items-center justify-center rounded-full bg-elevated",
+    nodeContent: "flex flex-col min-w-0",
+    nodeName: "text-sm font-semibold text-highlighted truncate",
+    nodeTitle: "text-xs text-muted truncate",
+    searchHighlight: "text-highlighted rounded-sm px-0.5",
+    // Collapse toggle
+    collapseToggle: [
+      "absolute flex items-center justify-center size-5 rounded-full",
+      "bg-elevated border border-default text-muted cursor-pointer",
+      "hover:bg-default hover:text-highlighted transition-colors"
+    ],
+    descendantBadge: "text-[10px] font-medium",
+    // Zoom controls
+    zoomControls: "absolute top-2 right-2 flex flex-col gap-1 z-10",
+    // Empty state
+    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"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    compact: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        nodeSelected: `ring-${color}`,
+        nodeFocused: `outline-${color}`,
+        nodeDropTarget: `ring-${color} bg-${color}/5`,
+        nodeMatched: `ring-${color}`,
+        searchHighlight: `bg-${color}/30`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        nodeSelected: "ring-inverted",
+        nodeFocused: "outline-inverted",
+        nodeDropTarget: "ring-inverted bg-inverted/5",
+        nodeMatched: "ring-inverted",
+        searchHighlight: "bg-inverted/30"
+      }
+    },
+    {
+      compact: true,
+      class: {
+        node: "px-2 py-1 gap-2",
+        nodeAvatar: "size-6",
+        nodeIcon: "size-6",
+        nodeName: "text-xs",
+        nodeTitle: "hidden"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    compact: false
+  }
+});
+
 const theme = {
   __proto__: null,
-  eventCalendar: eventCalendar
+  eventCalendar: eventCalendar,
+  orgChart: orgChart
 };
 
 function addTemplates(options, _nuxt) {
@@ -246,12 +346,12 @@ Add it to your \`.env\` file to build for production.`
       }
     };
     addTemplates(optionsWithTheme);
-    nuxt.options.css.push(resolver.resolve("./runtime/index.css"));
     addImportsDir(resolver.resolve("./runtime/composables"));
     nuxt.options.alias["#ui-elements-pro"] = resolver.resolve("./runtime");
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
-      prefix: options.prefix
+      prefix: options.prefix,
+      pattern: "*.vue"
     });
   }
 });

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

@@ -1,7 +1,7 @@
 import type { CalendarDate, DateValue } from "@internationalized/date";
 import type { AppConfig } from "@nuxt/schema";
 import type { ComponentConfig } from "nuxt-ui-elements";
-import type { CalendarEvent, CalendarView, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload, EventResizePayload, SelectPayload, EventCalendarContext } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay, 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">;
@@ -14,6 +14,8 @@ export interface EventCalendarProps {
     modelValue?: Date | string | DateValue;
     /** Calendar view mode @defaultValue 'month' */
     view?: CalendarView;
+    /** Which views are available and shown in the view switcher @defaultValue ['month', 'week', 'day', 'list'] */
+    views?: CalendarView[];
     /** Locale for day/month names @defaultValue 'en-US' */
     locale?: string;
     /** Day the week starts on (0=Sun, 1=Mon, … 6=Sat) @defaultValue 0 */
@@ -26,6 +28,8 @@ export interface EventCalendarProps {
     selectable?: boolean;
     /** Theme color for calendar chrome @defaultValue 'primary' */
     color?: EventCalendar["variants"]["color"];
+    /** Override header title. Pass a string for static text, or a function for dynamic formatting. */
+    headerTitle?: string | ((date: CalendarDate, view: CalendarView) => string);
     /** Month view options */
     monthOptions?: MonthViewOptions;
     /** Week view options */
@@ -60,11 +64,88 @@ export interface EventCalendarEmits {
     select: [payload: SelectPayload];
 }
 export interface EventCalendarSlots {
-    default: (props: EventCalendarContext) => any;
+    default?: (props: EventCalendarContext) => any;
+    /** Replace the entire header */
+    header?: (props: {
+        title: string;
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+        currentDate: CalendarDate;
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the header title element */
+    "header-title"?: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the header nav buttons */
+    "header-nav"?: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the header view switcher */
+    "header-view-switcher"?: (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Customize event rendering across all views */
+    event?: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+    /** Customize weekday header labels (month view) */
+    "day-header"?: (props: {
+        day: string;
+        index: number;
+    }) => any;
+    /** Customize day cell content (month view) */
+    day?: (props: {
+        day: CalendarDay;
+    }) => any;
+    /** Customize "+N more" indicator (month view) */
+    "more-events"?: (props: {
+        events: CalendarEvent[];
+        count: number;
+        day: CalendarDay;
+    }) => any;
+    /** Customize time labels (week/day view) */
+    "time-label"?: (props: {
+        hour: number;
+        label: string;
+    }) => any;
+    /** Customize all-day event area (week/day view) */
+    "all-day"?: (props: {
+        events: CalendarEvent[];
+        date: CalendarDate;
+    }) => any;
+    /** Customize date group headers (list view) */
+    "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;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {
+    next: () => void;
+    prev: () => void;
+    today: () => void;
+    setView: (v: CalendarView) => void;
+    setDate: (date: Date | string | DateValue) => void;
+    view: import("vue").ComputedRef<CalendarView>;
+    date: import("vue").ComputedRef<CalendarDate>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (payload: SelectPayload) => any;
     "update:modelValue": (value: CalendarDate) => any;
     "update:view": (value: CalendarView) => any;

package/dist/runtime/components/EventCalendar.vue

@@ -1,6 +1,7 @@
 <script>
 import { Primitive } from "reka-ui";
-import { computed, provide } from "vue";
+import { computed, provide, ref, useSlots, watch } from "vue";
+import { asCalendarDate } from "#std/date";
 import { tv } from "../utils/tv";
 import { useEventCalendar } from "../composables/useEventCalendar";
 import { useEventCalendarDragDrop } from "../composables/useEventCalendarDragDrop";
@@ -8,6 +9,10 @@ import { useEventCalendarKeyboard } from "../composables/useEventCalendarKeyboar
 import { useEventCalendarResize } from "../composables/useEventCalendarResize";
 import { useEventCalendarSelect } from "../composables/useEventCalendarSelect";
 import { eventCalendarContextKey } from "../composables/useEventCalendarContext";
+import EventCalendarHeader from "./event-calendar/EventCalendarHeader.vue";
+import EventCalendarMonthView from "./event-calendar/EventCalendarMonthView.vue";
+import EventCalendarTimeGrid from "./event-calendar/EventCalendarTimeGrid.vue";
+import EventCalendarListView from "./event-calendar/EventCalendarListView.vue";
 import theme from "#build/ui-elements-pro/event-calendar";
 </script>
 
@@ -17,12 +22,14 @@ const props = defineProps({
   events: { type: Array, required: false },
   modelValue: { type: null, required: false },
   view: { type: String, required: false },
+  views: { type: Array, required: false },
   locale: { type: String, required: false },
   weekStartsOn: { type: Number, required: false },
   editable: { type: Boolean, required: false, default: true },
   loading: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false, default: true },
   color: { type: null, required: false },
+  headerTitle: { type: [String, Function], required: false },
   monthOptions: { type: Object, required: false },
   weekOptions: { type: Object, required: false },
   dayOptions: { type: Object, required: false },
@@ -30,6 +37,16 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue", "update:view", "dateClick", "eventClick", "eventDrop", "eventResize", "eventResizeStart", "eventResizeEnd", "select"]);
 defineSlots();
+const slots = useSlots();
+const ALL_VIEWS = ["month", "week", "day", "list"];
+const internalView = ref(props.view ?? "month");
+watch(() => props.view, (v) => {
+  if (v !== void 0) internalView.value = v;
+});
+function updateView(v) {
+  internalView.value = v;
+  emit("update:view", v);
+}
 const ui = computed(
   () => tv({
     extend: tv(theme)
@@ -40,14 +57,14 @@ const ui = computed(
 const calendar = useEventCalendar({
   events: () => props.events ?? [],
   modelValue: () => props.modelValue,
-  view: () => props.view ?? "month",
+  view: () => internalView.value,
   locale: () => props.locale ?? "en-US",
   weekStartsOn: () => props.weekStartsOn ?? 0,
   monthOptions: () => props.monthOptions,
   weekOptions: () => props.weekOptions,
   dayOptions: () => props.dayOptions,
   onUpdateModelValue: (date) => emit("update:modelValue", date),
-  onUpdateView: (v) => emit("update:view", v)
+  onUpdateView: updateView
 });
 const dragDrop = useEventCalendarDragDrop({
   editable: () => props.editable ?? true,
@@ -58,7 +75,7 @@ const resize = useEventCalendarResize({
   editable: () => props.editable ?? true,
   normalizedEvents: calendar.normalizedEvents,
   gridConfig: () => {
-    const v = props.view ?? "month";
+    const v = internalView.value;
     return v === "day" ? calendar.dayConfig.value : calendar.weekConfig.value;
   },
   slotHeight: calendar.SLOT_HEIGHT,
@@ -68,7 +85,7 @@ const resize = useEventCalendarResize({
 });
 const keyboard = useEventCalendarKeyboard({
   displayDate: calendar.displayDate,
-  view: () => props.view ?? "month",
+  view: () => internalView.value,
   locale: () => props.locale ?? "en-US",
   weekStartsOn: () => props.weekStartsOn ?? 0,
   goToPrev: calendar.goToPrev,
@@ -78,17 +95,17 @@ const keyboard = useEventCalendarKeyboard({
 });
 const selection = useEventCalendarSelect({
   selectable: () => props.selectable ?? true,
-  view: () => props.view ?? "month",
+  view: () => internalView.value,
   slotDuration: () => {
-    const v = props.view ?? "month";
+    const v = internalView.value;
     return v === "day" ? props.dayOptions?.slotDuration ?? 30 : props.weekOptions?.slotDuration ?? 30;
   },
   startHour: () => {
-    const v = props.view ?? "month";
+    const v = internalView.value;
     return v === "day" ? props.dayOptions?.startHour ?? 7 : props.weekOptions?.startHour ?? 7;
   },
   endHour: () => {
-    const v = props.view ?? "month";
+    const v = internalView.value;
     return v === "day" ? props.dayOptions?.endHour ?? 22 : props.weekOptions?.endHour ?? 22;
   },
   onSelect: (payload) => emit("select", payload)
@@ -105,14 +122,23 @@ function handleEventClick(event, e) {
   e.stopPropagation();
   emit("eventClick", event.original);
 }
+const resolvedHeaderTitle = computed(() => {
+  if (typeof props.headerTitle === "string") return props.headerTitle;
+  if (typeof props.headerTitle === "function") {
+    return props.headerTitle(calendar.displayDate.value, internalView.value);
+  }
+  return calendar.headerTitle.value;
+});
+const resolvedViews = computed(() => props.views ?? ALL_VIEWS);
 const ctx = {
   displayDate: calendar.displayDate,
-  view: computed(() => props.view ?? "month"),
+  view: computed(() => internalView.value),
   locale: computed(() => props.locale ?? "en-US"),
   weekStartsOn: computed(() => props.weekStartsOn ?? 0),
   editable: computed(() => props.editable ?? true),
   loading: computed(() => props.loading ?? false),
   color: computed(() => props.color ?? "primary"),
+  views: resolvedViews,
   monthConfig: calendar.monthConfig,
   weekConfig: calendar.weekConfig,
   dayConfig: calendar.dayConfig,
@@ -125,7 +151,7 @@ const ctx = {
   timeGridDays: calendar.timeGridDays,
   allDayLayout: calendar.allDayLayout,
   timeGridSlots: calendar.timeGridSlots,
-  headerTitle: calendar.headerTitle,
+  headerTitle: resolvedHeaderTitle,
   formatTime: calendar.formatTime,
   formatTimeRange: calendar.formatTimeRange,
   getEventStyle: calendar.getEventStyle,
@@ -147,10 +173,101 @@ const ctx = {
   SLOT_HEIGHT: calendar.SLOT_HEIGHT
 };
 provide(eventCalendarContextKey, ctx);
+function setDate(date) {
+  emit("update:modelValue", asCalendarDate(date));
+}
+defineExpose({
+  next: ctx.goToNext,
+  prev: ctx.goToPrev,
+  today: ctx.goToToday,
+  setView: ctx.setView,
+  setDate,
+  view: ctx.view,
+  date: ctx.displayDate
+});
 </script>
 
 <template>
   <Primitive :as="props.as ?? 'div'" data-slot="root" :class="ui.root({ class: props.ui?.root })">
-    <slot v-bind="ctx" />
+    <!-- Compound mode: user provides #default and owns rendering -->
+    <slot v-if="slots.default" v-bind="ctx" />
+
+    <!-- Auto mode: render header + active view with slot forwarding -->
+    <template v-else>
+      <!-- Header -->
+      <slot
+        v-if="slots.header"
+        name="header"
+        :title="resolvedHeaderTitle"
+        :prev="ctx.goToPrev"
+        :next="ctx.goToNext"
+        :today="ctx.goToToday"
+        :current-date="ctx.displayDate.value"
+        :view="ctx.view.value"
+        :set-view="ctx.setView"
+        :views="resolvedViews" />
+      <EventCalendarHeader v-else>
+        <template v-if="slots['header-title']" #title="titleProps">
+          <slot name="header-title" v-bind="titleProps" />
+        </template>
+        <template v-if="slots['header-nav']" #nav="navProps">
+          <slot name="header-nav" v-bind="navProps" />
+        </template>
+        <template v-if="slots['header-view-switcher']" #view-switcher="vsProps">
+          <slot name="header-view-switcher" v-bind="vsProps" />
+        </template>
+      </EventCalendarHeader>
+
+      <!-- Month view -->
+      <EventCalendarMonthView v-if="ctx.view.value === 'month'">
+        <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>
+        <template v-if="slots.day" #day="dayProps">
+          <slot name="day" v-bind="dayProps" />
+        </template>
+        <template v-if="slots['more-events']" #more-events="moreProps">
+          <slot name="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 -->
+      <EventCalendarTimeGrid v-else-if="ctx.view.value === 'week' || ctx.view.value === 'day'">
+        <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>
+        <template v-if="slots['all-day']" #all-day="allDayProps">
+          <slot name="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 -->
+      <EventCalendarListView v-else-if="ctx.view.value === 'list'">
+        <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>
+      </EventCalendarListView>
+    </template>
   </Primitive>
 </template>

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

@@ -1,7 +1,7 @@
 import type { CalendarDate, DateValue } from "@internationalized/date";
 import type { AppConfig } from "@nuxt/schema";
 import type { ComponentConfig } from "nuxt-ui-elements";
-import type { CalendarEvent, CalendarView, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload, EventResizePayload, SelectPayload, EventCalendarContext } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay, 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">;
@@ -14,6 +14,8 @@ export interface EventCalendarProps {
     modelValue?: Date | string | DateValue;
     /** Calendar view mode @defaultValue 'month' */
     view?: CalendarView;
+    /** Which views are available and shown in the view switcher @defaultValue ['month', 'week', 'day', 'list'] */
+    views?: CalendarView[];
     /** Locale for day/month names @defaultValue 'en-US' */
     locale?: string;
     /** Day the week starts on (0=Sun, 1=Mon, … 6=Sat) @defaultValue 0 */
@@ -26,6 +28,8 @@ export interface EventCalendarProps {
     selectable?: boolean;
     /** Theme color for calendar chrome @defaultValue 'primary' */
     color?: EventCalendar["variants"]["color"];
+    /** Override header title. Pass a string for static text, or a function for dynamic formatting. */
+    headerTitle?: string | ((date: CalendarDate, view: CalendarView) => string);
     /** Month view options */
     monthOptions?: MonthViewOptions;
     /** Week view options */
@@ -60,11 +64,88 @@ export interface EventCalendarEmits {
     select: [payload: SelectPayload];
 }
 export interface EventCalendarSlots {
-    default: (props: EventCalendarContext) => any;
+    default?: (props: EventCalendarContext) => any;
+    /** Replace the entire header */
+    header?: (props: {
+        title: string;
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+        currentDate: CalendarDate;
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the header title element */
+    "header-title"?: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the header nav buttons */
+    "header-nav"?: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the header view switcher */
+    "header-view-switcher"?: (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Customize event rendering across all views */
+    event?: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+    /** Customize weekday header labels (month view) */
+    "day-header"?: (props: {
+        day: string;
+        index: number;
+    }) => any;
+    /** Customize day cell content (month view) */
+    day?: (props: {
+        day: CalendarDay;
+    }) => any;
+    /** Customize "+N more" indicator (month view) */
+    "more-events"?: (props: {
+        events: CalendarEvent[];
+        count: number;
+        day: CalendarDay;
+    }) => any;
+    /** Customize time labels (week/day view) */
+    "time-label"?: (props: {
+        hour: number;
+        label: string;
+    }) => any;
+    /** Customize all-day event area (week/day view) */
+    "all-day"?: (props: {
+        events: CalendarEvent[];
+        date: CalendarDate;
+    }) => any;
+    /** Customize date group headers (list view) */
+    "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;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {
+    next: () => void;
+    prev: () => void;
+    today: () => void;
+    setView: (v: CalendarView) => void;
+    setDate: (date: Date | string | DateValue) => void;
+    view: import("vue").ComputedRef<CalendarView>;
+    date: import("vue").ComputedRef<CalendarDate>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (payload: SelectPayload) => any;
     "update:modelValue": (value: CalendarDate) => any;
     "update:view": (value: CalendarView) => any;