nuxt-ui-elements-pro 0.1.5 → 0.1.7

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

@@ -0,0 +1,191 @@
+import type { AppConfig } from "@nuxt/schema";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { OrgChartNode, OrgChartTreeNode, OrgChartConnection, OrgChartConnectionPath, OrgChartDirection, OrgChartConnectorStyle, OrgChartSelectionMode, OrgChartLayoutConfig, OrgChartZoomConfig, OrgChartConnector, OrgChartContext } from "../types/org-chart.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/org-chart";
+type OrgChartTheme = ComponentConfig<typeof theme, AppConfig, "orgChart">;
+export interface OrgChartProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+    /** Flat array of org chart nodes */
+    nodes?: OrgChartNode[];
+    /** Non-hierarchical connections between nodes */
+    connections?: OrgChartConnection[];
+    /** Layout direction @defaultValue 'vertical' */
+    direction?: OrgChartDirection;
+    /** Connector style @defaultValue 'right-angle' */
+    connectorStyle?: OrgChartConnectorStyle;
+    /** Selection mode @defaultValue 'none' */
+    selectionMode?: OrgChartSelectionMode;
+    /** Compact mode with reduced spacing @defaultValue false */
+    compact?: boolean;
+    /** Theme color @defaultValue 'primary' */
+    color?: OrgChartTheme["variants"]["color"];
+    /** Two-way binding for expanded node IDs */
+    expanded?: (string | number)[];
+    /** Two-way binding for selected node IDs */
+    selected?: (string | number)[];
+    /** Search query to filter and highlight nodes */
+    searchQuery?: string;
+    /** Enable drag-and-drop rearrangement @defaultValue false */
+    draggable?: boolean;
+    /** Enable animations @defaultValue true */
+    animated?: boolean;
+    /** Layout configuration overrides */
+    layoutConfig?: OrgChartLayoutConfig;
+    /** Zoom/pan configuration */
+    zoomConfig?: OrgChartZoomConfig;
+    /** Slot class overrides */
+    ui?: OrgChartTheme["slots"];
+}
+export interface OrgChartEmits {
+    /** Fires when expanded node IDs change */
+    "update:expanded": [value: (string | number)[]];
+    /** Fires when selected node IDs change */
+    "update:selected": [value: (string | number)[]];
+    /** Fires when any node is clicked */
+    "node-click": [node: OrgChartNode];
+    /** Fires when a node is expanded or collapsed */
+    "node-expand": [payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }];
+    /** Fires when a node is selected or deselected */
+    "node-select": [payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }];
+    /** Fires when a node is dropped onto a new parent via drag-and-drop */
+    "node-drop": [payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }];
+    /** Fires when a non-hierarchical connection is clicked */
+    "connection-click": [connection: OrgChartConnection];
+}
+export interface OrgChartSlots {
+    /** Compound mode: full rendering control */
+    default?: (props: OrgChartContext) => any;
+    /** Custom node rendering (replaces entire node card content) */
+    node?: (props: {
+        node: OrgChartNode;
+        treeNode: OrgChartTreeNode;
+        selected: boolean;
+        expanded: boolean;
+        focused: boolean;
+        matched: boolean;
+        dimmed: boolean;
+    }) => any;
+    /** Custom avatar area */
+    avatar?: (props: {
+        node: OrgChartNode;
+    }) => any;
+    /** Custom label */
+    label?: (props: {
+        node: OrgChartNode;
+        highlight?: string;
+    }) => any;
+    /** Custom description / title */
+    description?: (props: {
+        node: OrgChartNode;
+        highlight?: string;
+    }) => any;
+    /** Custom connector rendering */
+    connector?: (props: {
+        connectors: OrgChartConnector[];
+    }) => any;
+    /** Custom non-hierarchical connection rendering */
+    connection?: (props: {
+        connections: OrgChartConnectionPath[];
+    }) => any;
+    /** Custom connection label */
+    "connection-label"?: (props: {
+        connection: OrgChartConnection;
+        x: number;
+        y: number;
+    }) => any;
+    /** Custom collapse toggle */
+    "collapse-toggle"?: (props: {
+        expanded: boolean;
+        count: number;
+        node: OrgChartNode;
+    }) => any;
+    /** Custom zoom controls */
+    "zoom-controls"?: (props: {
+        zoomIn: () => void;
+        zoomOut: () => void;
+        zoomReset: () => void;
+        fitToView: () => void;
+        scale: number;
+    }) => any;
+    /** Custom drop indicator */
+    "drop-indicator"?: (props: {
+        targetNode: OrgChartNode;
+    }) => any;
+    /** Empty state (no nodes) */
+    empty?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OrgChartProps, {
+    expandAll: () => void;
+    collapseAll: () => void;
+    toggleNode: (id: string | number) => void;
+    selectNode: (id: string | number) => void;
+    deselectNode: (id: string | number) => void;
+    scrollToNode: (id: string | number) => void;
+    fitToView: () => void;
+    getChildren: (id: string | number) => OrgChartTreeNode[];
+    getAncestors: (id: string | number) => OrgChartTreeNode[];
+    tree: import("vue").ComputedRef<OrgChartTreeNode | null>;
+    layout: import("vue").ComputedRef<import("../types/org-chart.js").OrgChartLayout>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: (string | number)[]) => any;
+    "update:selected": (value: (string | number)[]) => any;
+    "node-click": (node: OrgChartNode) => any;
+    "node-expand": (payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }) => any;
+    "node-select": (payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }) => any;
+    "node-drop": (payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }) => any;
+    "connection-click": (connection: OrgChartConnection) => any;
+}, string, import("vue").PublicProps, Readonly<OrgChartProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: (string | number)[]) => any) | undefined;
+    "onNode-click"?: ((node: OrgChartNode) => any) | undefined;
+    "onNode-expand"?: ((payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }) => any) | undefined;
+    "onNode-select"?: ((payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }) => any) | undefined;
+    "onNode-drop"?: ((payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }) => any) | undefined;
+    "onConnection-click"?: ((connection: OrgChartConnection) => any) | undefined;
+}>, {
+    draggable: boolean;
+    compact: boolean;
+    direction: OrgChartDirection;
+    connectorStyle: OrgChartConnectorStyle;
+    selectionMode: OrgChartSelectionMode;
+    animated: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, OrgChartSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+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;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the title element */
+    title: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the navigation buttons */
+    nav: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the view switcher */
+    "view-switcher": (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => 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/event-calendar/EventCalendarHeader.vue

@@ -0,0 +1,55 @@
+<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"
+      :views="ctx.views.value">
+      <slot name="title" :title="ctx.headerTitle.value" :date="ctx.displayDate.value" :view="ctx.view.value">
+        <span data-slot="headerTitle" :class="ctx.ui.value.headerTitle({ class: ctx.propUi.value?.headerTitle })" aria-live="polite" aria-atomic="true">
+          {{ ctx.headerTitle.value }}
+        </span>
+      </slot>
+
+      <div data-slot="headerActions" :class="ctx.ui.value.headerActions({ class: ctx.propUi.value?.headerActions })">
+        <slot name="view-switcher" :view="ctx.view.value" :set-view="ctx.setView" :views="ctx.views.value">
+          <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 ctx.views.value"
+              :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>
+        </slot>
+
+        <slot name="nav" :prev="ctx.goToPrev" :next="ctx.goToNext" :today="ctx.goToToday">
+          <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" />
+        </slot>
+      </div>
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,45 @@
+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;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the title element */
+    title: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the navigation buttons */
+    nav: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the view switcher */
+    "view-switcher": (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => 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/event-calendar/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/event-calendar/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/event-calendar/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/event-calendar/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;
+    };
+};