nuxt-ui-elements-pro 0.1.5 → 0.1.7

package/dist/runtime/components/event-calendar/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/event-calendar/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/components/org-chart/OrgChartConnectors.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    connectors: import("../../types/org-chart.js").OrgChartConnector[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartConnectors.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useOrgChartContext } from "../../composables/useOrgChartContext";
+const ctx = useOrgChartContext();
+</script>
+
+<template>
+  <svg
+    data-slot="connectorLayer"
+    :class="ctx.ui.value.connectorLayer({ class: ctx.propUi.value?.connectorLayer })"
+    :width="ctx.layout.value.width"
+    :height="ctx.layout.value.height"
+    :viewBox="`0 0 ${ctx.layout.value.width} ${ctx.layout.value.height}`"
+    aria-hidden="true"
+  >
+    <!-- Hierarchical connectors -->
+    <slot :connectors="ctx.layout.value.connectors">
+      <path
+        v-for="connector in ctx.layout.value.connectors"
+        :key="`${connector.fromId}-${connector.toId}`"
+        data-slot="connector"
+        :d="connector.path"
+        :class="[
+  ctx.ui.value.connector({ class: ctx.propUi.value?.connector }),
+  ctx.animated.value ? 'transition-all duration-300 ease-in-out' : ''
+]"
+      />
+    </slot>
+  </svg>
+</template>

package/dist/runtime/components/org-chart/OrgChartConnectors.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    connectors: import("../../types/org-chart.js").OrgChartConnector[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartControls.d.vue.ts

@@ -0,0 +1,19 @@
+declare var __VLS_1: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    fitToView: () => void;
+    scale: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartControls.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useOrgChartContext } from "../../composables/useOrgChartContext";
+const ctx = useOrgChartContext();
+</script>
+
+<template>
+  <div
+    v-if="ctx.zoomConfig.value.enabled && ctx.zoomConfig.value.controls"
+    data-slot="zoomControls"
+    :class="ctx.ui.value.zoomControls({ class: ctx.propUi.value?.zoomControls })"
+  >
+    <slot
+      :zoom-in="ctx.zoomIn"
+      :zoom-out="ctx.zoomOut"
+      :zoom-reset="ctx.zoomReset"
+      :fit-to-view="ctx.fitToView"
+      :scale="ctx.scale.value"
+    >
+      <UButton icon="i-lucide-zoom-in" size="xs" color="neutral" variant="outline" square aria-label="Zoom in" @click="ctx.zoomIn" />
+      <UButton icon="i-lucide-zoom-out" size="xs" color="neutral" variant="outline" square aria-label="Zoom out" @click="ctx.zoomOut" />
+      <UButton icon="i-lucide-maximize" size="xs" color="neutral" variant="outline" square aria-label="Fit to view" @click="ctx.fitToView" />
+      <UButton icon="i-lucide-rotate-ccw" size="xs" color="neutral" variant="outline" square aria-label="Reset zoom" @click="ctx.zoomReset" />
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/org-chart/OrgChartControls.vue.d.ts

@@ -0,0 +1,19 @@
+declare var __VLS_1: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    fitToView: () => void;
+    scale: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartNode.d.vue.ts

@@ -0,0 +1,30 @@
+import type { OrgChartTreeNode } from "../../types/org-chart.js";
+export interface OrgChartNodeProps {
+    node: OrgChartTreeNode;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OrgChartNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OrgChartNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    avatar?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    label?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    description?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    'collapse-toggle'?: (props: {
+        expanded: boolean;
+        count: number;
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartNode.vue

@@ -0,0 +1,129 @@
+<script>
+import { computed } from "vue";
+import { useOrgChartContext } from "../../composables/useOrgChartContext";
+</script>
+
+<script setup>
+const props = defineProps({
+  node: { type: Object, required: true }
+});
+const ctx = useOrgChartContext();
+const isExpanded = computed(() => ctx.isExpanded(props.node.data.id));
+const isSelected = computed(() => ctx.isSelected(props.node.data.id));
+const isFocused = computed(() => ctx.isFocused(props.node.data.id));
+const isMatched = computed(() => ctx.isMatched(props.node.data.id));
+const isDimmed = computed(() => ctx.isDimmed(props.node.data.id));
+const isDragging = computed(() => ctx.draggedNodeId.value === props.node.data.id);
+const isDropTarget = computed(() => ctx.dropTargetId.value === props.node.data.id);
+const hasChildren = computed(() => props.node.children.length > 0);
+const nodeStyle = computed(() => {
+  const _layout = ctx.layout.value;
+  const cfg = ctx.layoutConfig.value;
+  return {
+    left: `${props.node.x}px`,
+    top: `${props.node.y}px`,
+    width: `${cfg.nodeWidth}px`,
+    height: `${cfg.nodeHeight}px`
+  };
+});
+const togglePosition = computed(() => {
+  const cfg = ctx.layoutConfig.value;
+  const dir = ctx.direction.value;
+  switch (dir) {
+    case "vertical":
+      return {
+        left: `${cfg.nodeWidth / 2 - 10}px`,
+        top: `${cfg.nodeHeight - 2}px`
+      };
+    case "bottom-up":
+      return {
+        left: `${cfg.nodeWidth / 2 - 10}px`,
+        top: "-8px"
+      };
+    case "horizontal":
+      return {
+        left: `${cfg.nodeWidth - 2}px`,
+        top: `${cfg.nodeHeight / 2 - 10}px`
+      };
+    case "right-to-left":
+      return {
+        left: "-8px",
+        top: `${cfg.nodeHeight / 2 - 10}px`
+      };
+    default:
+      return {
+        left: `${cfg.nodeWidth / 2 - 10}px`,
+        top: `${cfg.nodeHeight - 2}px`
+      };
+  }
+});
+const nodeColor = computed(() => props.node.data.color);
+function nodeClasses() {
+  const classes = [ctx.ui.value.node({ class: ctx.propUi.value?.node })];
+  if (ctx.animated.value) classes.push(ctx.ui.value.nodeAnimated({ class: ctx.propUi.value?.nodeAnimated }));
+  if (isSelected.value) classes.push(ctx.ui.value.nodeSelected({ class: ctx.propUi.value?.nodeSelected }));
+  if (isFocused.value) classes.push(ctx.ui.value.nodeFocused({ class: ctx.propUi.value?.nodeFocused }));
+  if (isMatched.value) classes.push(ctx.ui.value.nodeMatched({ class: ctx.propUi.value?.nodeMatched }));
+  if (isDimmed.value) classes.push(ctx.ui.value.nodeDimmed({ class: ctx.propUi.value?.nodeDimmed }));
+  if (isDragging.value) classes.push(ctx.ui.value.nodeDragging({ class: ctx.propUi.value?.nodeDragging }));
+  if (isDropTarget.value) classes.push(ctx.ui.value.nodeDropTarget({ class: ctx.propUi.value?.nodeDropTarget }));
+  return classes;
+}
+</script>
+
+<template>
+  <div
+    :data-slot="'node'"
+    :data-node-id="node.data.id"
+    role="treeitem"
+    :aria-expanded="hasChildren ? isExpanded : void 0"
+    :aria-selected="isSelected"
+    :aria-level="node.depth + 1"
+    :aria-setsize="node.siblingCount"
+    :aria-posinset="node.indexInSiblings + 1"
+    :aria-label="`${node.data.name}${node.data.title ? ', ' + node.data.title : ''}`"
+    :tabindex="isFocused ? 0 : -1"
+    :draggable="ctx.draggable.value && !!node.parent"
+    :style="[nodeStyle, nodeColor ? { '--node-color': nodeColor === 'neutral' ? 'var(--ui-bg-inverted)' : `var(--ui-${nodeColor})` } : void 0]"
+    :class="nodeClasses()"
+    @click="ctx.handleNodeClick(node, $event)"
+    @keydown="ctx.onKeydown"
+    @dragstart="ctx.onDragStart(node.data.id, $event)"
+    @dragover="ctx.onDragOver(node.data.id, $event)"
+    @dragleave="ctx.onDragLeave($event)"
+    @drop="ctx.onDrop(node.data.id, $event)"
+    @dragend="ctx.onDragEnd($event)"
+  >
+    <slot name="avatar" :node="node.data">
+      <img v-if="node.data.avatar" :src="node.data.avatar" :alt="node.data.name" :class="ctx.ui.value.nodeAvatar({ class: ctx.propUi.value?.nodeAvatar })" />
+      <div v-else-if="node.data.icon" :class="ctx.ui.value.nodeIcon({ class: ctx.propUi.value?.nodeIcon })">
+        <UIcon :name="node.data.icon" />
+      </div>
+    </slot>
+
+    <div :class="ctx.ui.value.nodeContent({ class: ctx.propUi.value?.nodeContent })">
+      <slot name="label" :node="node.data">
+        <span :class="ctx.ui.value.nodeName({ class: ctx.propUi.value?.nodeName })">{{ node.data.name }}</span>
+      </slot>
+      <slot name="description" :node="node.data">
+        <span v-if="node.data.title" :class="ctx.ui.value.nodeTitle({ class: ctx.propUi.value?.nodeTitle })">{{ node.data.title }}</span>
+      </slot>
+    </div>
+
+    <!-- Collapse toggle -->
+    <button
+      v-if="hasChildren"
+      :data-slot="'collapseToggle'"
+      :style="togglePosition"
+      :class="ctx.ui.value.collapseToggle({ class: ctx.propUi.value?.collapseToggle })"
+      :aria-label="isExpanded ? 'Collapse' : `Expand (${ctx.getDescendantCount(node.data.id)} members)`"
+      @click.stop="ctx.toggleExpand(node.data.id)"
+    >
+      <slot name="collapse-toggle" :expanded="isExpanded" :count="ctx.getDescendantCount(node.data.id)" :node="node.data">
+        <span :class="ctx.ui.value.descendantBadge({ class: ctx.propUi.value?.descendantBadge })">
+          {{ isExpanded ? "\u2212" : "+" }}
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>

package/dist/runtime/components/org-chart/OrgChartNode.vue.d.ts

@@ -0,0 +1,30 @@
+import type { OrgChartTreeNode } from "../../types/org-chart.js";
+export interface OrgChartNodeProps {
+    node: OrgChartTreeNode;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OrgChartNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OrgChartNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    avatar?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    label?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    description?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    'collapse-toggle'?: (props: {
+        expanded: boolean;
+        count: number;
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};