nuxt-ui-elements-pro 0.1.5 → 0.1.7

package/dist/runtime/composables/useEventCalendarResize.js

@@ -0,0 +1,87 @@
+import { toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+import { onUnmounted, ref } from "vue";
+export function useEventCalendarResize(options) {
+  const { editable, normalizedEvents, gridConfig, slotHeight, onEventResize, onResizeStart, onResizeEnd } = options;
+  const resizingEventId = ref(null);
+  const resizePreviewHeightPx = ref(null);
+  let activeEvent = null;
+  let originalHeightPx = 0;
+  function onPointerMove(e) {
+    if (!activeEvent) return;
+    const config = gridConfig();
+    const deltaY = e.clientY - pointerStartY;
+    const rawHeight = originalHeightPx + deltaY;
+    const snappedHeight = Math.round(rawHeight / slotHeight) * slotHeight;
+    const minHeightPx = 15 / config.slotDuration * slotHeight;
+    const maxDurationMinutes = config.endHour * 60 - activeEvent.startMinutes;
+    const maxHeightPx = maxDurationMinutes / config.slotDuration * slotHeight;
+    resizePreviewHeightPx.value = Math.max(minHeightPx, Math.min(snappedHeight, maxHeightPx));
+  }
+  function onPointerUp(_e) {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+    if (activeEvent) {
+      const event2 = normalizedEvents.value.find((ev) => ev.id === activeEvent.id);
+      if (event2) {
+        onResizeEnd({ event: event2.original });
+      }
+    }
+    if (!activeEvent || resizePreviewHeightPx.value == null) {
+      cleanup();
+      return;
+    }
+    if (resizePreviewHeightPx.value === originalHeightPx) {
+      cleanup();
+      return;
+    }
+    const config = gridConfig();
+    const newDurationMinutes = resizePreviewHeightPx.value / slotHeight * config.slotDuration;
+    const newEndMinutes = activeEvent.startMinutes + newDurationMinutes;
+    const newEndHour = Math.floor(newEndMinutes / 60);
+    const newEndMinute = Math.round(newEndMinutes % 60);
+    const startDate = toCalendarDate(activeEvent.start);
+    const newEnd = toCalendarDateTime(startDate).set({ hour: newEndHour, minute: newEndMinute });
+    const event = normalizedEvents.value.find((ev) => ev.id === activeEvent.id);
+    if (event) {
+      onEventResize({
+        event: event.original,
+        oldStart: event.start,
+        oldEnd: event.end,
+        newStart: event.start,
+        newEnd
+      });
+    }
+    cleanup();
+  }
+  let pointerStartY = 0;
+  function onResizePointerDown(event, e) {
+    if (!editable() || !event.resizable) return;
+    e.preventDefault();
+    e.stopPropagation();
+    resizingEventId.value = event.id;
+    activeEvent = event;
+    originalHeightPx = event.heightPx;
+    resizePreviewHeightPx.value = event.heightPx;
+    pointerStartY = e.clientY;
+    const normalized = normalizedEvents.value.find((ev) => ev.id === event.id);
+    if (normalized) {
+      onResizeStart({ event: normalized.original });
+    }
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+  }
+  function cleanup() {
+    resizingEventId.value = null;
+    resizePreviewHeightPx.value = null;
+    activeEvent = null;
+  }
+  onUnmounted(() => {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+  });
+  return {
+    resizingEventId,
+    resizePreviewHeightPx,
+    onResizePointerDown
+  };
+}

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

@@ -0,0 +1,21 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { CalendarView, SelectPayload } from "../types/event-calendar.js";
+export interface UseEventCalendarSelectOptions {
+    selectable: () => boolean;
+    view: () => CalendarView;
+    slotDuration: () => number;
+    startHour: () => number;
+    endHour: () => number;
+    onSelect: (payload: SelectPayload) => void;
+}
+export declare function useEventCalendarSelect(options: UseEventCalendarSelectOptions): {
+    isSelecting: import("vue").Ref<boolean, boolean>;
+    preventNextClick: import("vue").Ref<boolean, boolean>;
+    isSlotInSelection: (date: CalendarDate, hour: number, minute: number) => boolean;
+    isDateInSelection: (date: CalendarDate) => boolean;
+    onSlotPointerDown: (date: CalendarDate, hour: number, minute: number, e: PointerEvent) => void;
+    onSlotPointerMove: (date: CalendarDate, hour: number, minute: number) => void;
+    onDayCellPointerDown: (date: CalendarDate, e: PointerEvent) => void;
+    onDayCellPointerMove: (date: CalendarDate) => void;
+    onSelectionPointerUp: () => void;
+};

package/dist/runtime/composables/useEventCalendarSelect.js

@@ -0,0 +1,119 @@
+import { toCalendarDateTime } from "@internationalized/date";
+import { ref, shallowRef } from "vue";
+export function useEventCalendarSelect(options) {
+  const { selectable, slotDuration, onSelect } = options;
+  const isSelecting = ref(false);
+  const selectionAnchor = shallowRef(null);
+  const selectionEnd = shallowRef(null);
+  const preventNextClick = ref(false);
+  const didMove = ref(false);
+  function isEventTarget(e) {
+    const el = e.target;
+    if (!el) return false;
+    return !!el.closest("[data-slot='timeEvent'], [data-slot='eventChip']");
+  }
+  function toMinutes(point) {
+    return (point.hour ?? 0) * 60 + (point.minute ?? 0);
+  }
+  function clearState() {
+    isSelecting.value = false;
+    selectionAnchor.value = null;
+    selectionEnd.value = null;
+    didMove.value = false;
+  }
+  function onSlotPointerDown(date, hour, minute, e) {
+    if (!selectable() || e.button !== 0 || isEventTarget(e)) return;
+    selectionAnchor.value = { date, hour, minute };
+    selectionEnd.value = { date, hour, minute };
+    isSelecting.value = true;
+    didMove.value = false;
+  }
+  function onSlotPointerMove(date, hour, minute) {
+    if (!isSelecting.value || !selectionAnchor.value) return;
+    if (date.toString() !== selectionAnchor.value.date.toString()) return;
+    selectionEnd.value = { date, hour, minute };
+    didMove.value = true;
+  }
+  function onDayCellPointerDown(date, e) {
+    if (!selectable() || e.button !== 0 || isEventTarget(e)) return;
+    selectionAnchor.value = { date };
+    selectionEnd.value = { date };
+    isSelecting.value = true;
+    didMove.value = false;
+  }
+  function onDayCellPointerMove(date) {
+    if (!isSelecting.value || !selectionAnchor.value) return;
+    selectionEnd.value = { date };
+    didMove.value = true;
+  }
+  function onSelectionPointerUp() {
+    if (!isSelecting.value || !selectionAnchor.value || !selectionEnd.value) {
+      clearState();
+      return;
+    }
+    const anchor = selectionAnchor.value;
+    const end = selectionEnd.value;
+    const isTimeGrid = anchor.hour !== void 0;
+    if (isTimeGrid) {
+      const anchorMinutes = toMinutes(anchor);
+      const endMinutes = toMinutes(end);
+      const duration = slotDuration();
+      let startMinutes;
+      let finalEndMinutes;
+      if (anchorMinutes <= endMinutes) {
+        startMinutes = anchorMinutes;
+        finalEndMinutes = endMinutes + duration;
+      } else {
+        startMinutes = endMinutes;
+        finalEndMinutes = anchorMinutes + duration;
+      }
+      const startDt = toCalendarDateTime(anchor.date).set({
+        hour: Math.floor(startMinutes / 60),
+        minute: startMinutes % 60
+      });
+      const endDt = toCalendarDateTime(anchor.date).set({
+        hour: Math.floor(finalEndMinutes / 60),
+        minute: finalEndMinutes % 60
+      });
+      onSelect({ start: startDt, end: endDt, allDay: false });
+    } else {
+      const cmp = anchor.date.compare(end.date);
+      const startDate = cmp <= 0 ? anchor.date : end.date;
+      const endDate = cmp <= 0 ? end.date : anchor.date;
+      onSelect({ start: startDate, end: endDate, allDay: true });
+    }
+    if (didMove.value) {
+      preventNextClick.value = true;
+    }
+    clearState();
+  }
+  function isSlotInSelection(date, hour, minute) {
+    if (!isSelecting.value || !selectionAnchor.value || !selectionEnd.value) return false;
+    if (selectionAnchor.value.hour === void 0) return false;
+    if (date.toString() !== selectionAnchor.value.date.toString()) return false;
+    const anchorMin = toMinutes(selectionAnchor.value);
+    const endMin = toMinutes(selectionEnd.value);
+    const slotMin = hour * 60 + minute;
+    const lo = Math.min(anchorMin, endMin);
+    const hi = Math.max(anchorMin, endMin);
+    return slotMin >= lo && slotMin <= hi;
+  }
+  function isDateInSelection(date) {
+    if (!isSelecting.value || !selectionAnchor.value || !selectionEnd.value) return false;
+    if (selectionAnchor.value.hour !== void 0) return false;
+    const anchorCmp = date.compare(selectionAnchor.value.date);
+    const endCmp = date.compare(selectionEnd.value.date);
+    return anchorCmp >= 0 && endCmp <= 0 || anchorCmp <= 0 && endCmp >= 0;
+  }
+  return {
+    isSelecting,
+    preventNextClick,
+    isSlotInSelection,
+    isDateInSelection,
+    onSlotPointerDown,
+    onSlotPointerMove,
+    onDayCellPointerDown,
+    onDayCellPointerMove,
+    onSelectionPointerUp
+  };
+}

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

@@ -0,0 +1,42 @@
+import type { OrgChartNode, OrgChartTreeNode, OrgChartConnection, OrgChartDirection, OrgChartConnectorStyle, OrgChartSelectionMode, OrgChartLayout, ResolvedLayoutConfig } from "../types/org-chart.js";
+export interface UseOrgChartOptions {
+    nodes: () => OrgChartNode[];
+    connections: () => OrgChartConnection[];
+    direction: () => OrgChartDirection;
+    connectorStyle: () => OrgChartConnectorStyle;
+    selectionMode: () => OrgChartSelectionMode;
+    layoutConfig: () => ResolvedLayoutConfig;
+    expanded: () => (string | number)[] | undefined;
+    selected: () => (string | number)[] | undefined;
+    onUpdateExpanded: (ids: (string | number)[]) => void;
+    onUpdateSelected: (ids: (string | number)[]) => void;
+    onNodeClick: (node: OrgChartNode) => void;
+    onNodeExpand: (payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }) => void;
+    onNodeSelect: (payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }) => void;
+}
+export declare function useOrgChart(options: UseOrgChartOptions): {
+    tree: import("vue").ComputedRef<OrgChartTreeNode | null>;
+    nodeMap: import("vue").ComputedRef<Map<string | number, OrgChartTreeNode>>;
+    layout: import("vue").ComputedRef<OrgChartLayout>;
+    flatVisibleNodes: import("vue").ComputedRef<OrgChartTreeNode[]>;
+    expandedIds: import("vue").Ref<Set<string | number> & Omit<Set<string | number>, keyof Set<any>>, Set<string | number> | (Set<string | number> & Omit<Set<string | number>, keyof Set<any>>)>;
+    selectedIds: import("vue").Ref<Set<string | number> & Omit<Set<string | number>, keyof Set<any>>, Set<string | number> | (Set<string | number> & Omit<Set<string | number>, keyof Set<any>>)>;
+    toggleExpand: (id: string | number) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    selectNode: (id: string | number) => void;
+    deselectNode: (id: string | number) => void;
+    isExpanded: (id: string | number) => boolean;
+    isSelected: (id: string | number) => boolean;
+    getDescendantCount: (id: string | number) => number;
+    getNode: (id: string | number) => OrgChartTreeNode | undefined;
+    getChildren: (id: string | number) => OrgChartTreeNode[];
+    getAncestors: (id: string | number) => OrgChartTreeNode[];
+    handleNodeClick: (treeNode: OrgChartTreeNode, _e: Event) => void;
+};

package/dist/runtime/composables/useOrgChart.js

@@ -0,0 +1,154 @@
+import { computed, ref, watch } from "vue";
+import {
+  buildTree,
+  buildNodeMap,
+  computeFullLayout,
+  flattenVisibleTree,
+  getAllNodeIds,
+  getAncestors as getAncestorsUtil
+} from "../utils/org-chart.js";
+export function useOrgChart(options) {
+  const tree = computed(() => buildTree(options.nodes()));
+  const nodeMap = computed(() => {
+    if (!tree.value) return /* @__PURE__ */ new Map();
+    return buildNodeMap(tree.value);
+  });
+  const expandedIds = ref(/* @__PURE__ */ new Set());
+  watch(tree, (t) => {
+    if (!t) return;
+    const externalExpanded = options.expanded();
+    if (externalExpanded !== void 0) {
+      expandedIds.value = new Set(externalExpanded);
+    } else {
+      expandedIds.value = getAllNodeIds(t);
+    }
+  }, { immediate: true });
+  watch(() => options.expanded(), (ext) => {
+    if (ext !== void 0) {
+      expandedIds.value = new Set(ext);
+    }
+  });
+  function emitExpanded() {
+    options.onUpdateExpanded([...expandedIds.value]);
+  }
+  function toggleExpand(id) {
+    const next = new Set(expandedIds.value);
+    const node = nodeMap.value.get(id);
+    if (!node || node.children.length === 0) return;
+    const wasExpanded = next.has(id);
+    if (wasExpanded) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    expandedIds.value = next;
+    emitExpanded();
+    if (node) {
+      options.onNodeExpand({ node: node.data, expanded: !wasExpanded });
+    }
+  }
+  function expandAll() {
+    if (!tree.value) return;
+    expandedIds.value = getAllNodeIds(tree.value);
+    emitExpanded();
+  }
+  function collapseAll() {
+    if (!tree.value) return;
+    expandedIds.value = /* @__PURE__ */ new Set([tree.value.data.id]);
+    emitExpanded();
+  }
+  const selectedIds = ref(/* @__PURE__ */ new Set());
+  watch(() => options.selected(), (ext) => {
+    if (ext !== void 0) {
+      selectedIds.value = new Set(ext);
+    }
+  }, { immediate: true });
+  function emitSelected() {
+    options.onUpdateSelected([...selectedIds.value]);
+  }
+  function selectNode(id) {
+    const mode = options.selectionMode();
+    if (mode === "none") return;
+    const node = nodeMap.value.get(id);
+    if (!node) return;
+    const next = new Set(mode === "single" ? [] : [...selectedIds.value]);
+    const wasSelected = selectedIds.value.has(id);
+    if (wasSelected) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    selectedIds.value = next;
+    emitSelected();
+    options.onNodeSelect({ node: node.data, selected: !wasSelected });
+  }
+  function deselectNode(id) {
+    const next = new Set(selectedIds.value);
+    next.delete(id);
+    selectedIds.value = next;
+    emitSelected();
+  }
+  const layout = computed(() => {
+    if (!tree.value) {
+      return { nodes: [], connectors: [], connectionPaths: [], width: 0, height: 0 };
+    }
+    return computeFullLayout(
+      tree.value,
+      options.layoutConfig(),
+      options.direction(),
+      options.connectorStyle(),
+      expandedIds.value,
+      options.connections()
+    );
+  });
+  const flatVisibleNodes = computed(() => {
+    if (!tree.value) return [];
+    return flattenVisibleTree(tree.value, expandedIds.value);
+  });
+  function isExpanded(id) {
+    return expandedIds.value.has(id);
+  }
+  function isSelected(id) {
+    return selectedIds.value.has(id);
+  }
+  function getDescendantCount(id) {
+    const node = nodeMap.value.get(id);
+    return node ? node.descendantCount : 0;
+  }
+  function getNode(id) {
+    return nodeMap.value.get(id);
+  }
+  function getChildren(id) {
+    const node = nodeMap.value.get(id);
+    return node ? node.children : [];
+  }
+  function getAncestors(id) {
+    return getAncestorsUtil(id, nodeMap.value);
+  }
+  function handleNodeClick(treeNode, _e) {
+    options.onNodeClick(treeNode.data);
+    if (options.selectionMode() !== "none") {
+      selectNode(treeNode.data.id);
+    }
+  }
+  return {
+    tree,
+    nodeMap,
+    layout,
+    flatVisibleNodes,
+    expandedIds,
+    selectedIds,
+    toggleExpand,
+    expandAll,
+    collapseAll,
+    selectNode,
+    deselectNode,
+    isExpanded,
+    isSelected,
+    getDescendantCount,
+    getNode,
+    getChildren,
+    getAncestors,
+    handleNodeClick
+  };
+}

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

@@ -0,0 +1,8 @@
+import type { InjectionKey } from "vue";
+import type { OrgChartContext } from "../types/org-chart.js";
+export declare const orgChartContextKey: InjectionKey<OrgChartContext>;
+/**
+ * Inject the OrgChart context in a sub-component.
+ * Throws if called outside an <UEOrgChart> root.
+ */
+export declare function useOrgChartContext(): OrgChartContext;

package/dist/runtime/composables/useOrgChartContext.js

@@ -0,0 +1,11 @@
+import { inject } from "vue";
+export const orgChartContextKey = Symbol("nuxt-ui-elements-pro.org-chart");
+export function useOrgChartContext() {
+  const ctx = inject(orgChartContextKey);
+  if (!ctx) {
+    throw new Error(
+      "[OrgChart] useOrgChartContext() was called outside of an <UEOrgChart> root. Sub-components must be used as children of <UEOrgChart>."
+    );
+  }
+  return ctx;
+}

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

@@ -0,0 +1,20 @@
+import type { ComputedRef } from "vue";
+import type { OrgChartNode, OrgChartTreeNode } from "../types/org-chart.js";
+export interface UseOrgChartDragDropOptions {
+    draggable: () => boolean;
+    nodeMap: ComputedRef<Map<string | number, OrgChartTreeNode>>;
+    onNodeDrop: (payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }) => void;
+}
+export declare function useOrgChartDragDrop(options: UseOrgChartDragDropOptions): {
+    draggedNodeId: import("vue").Ref<string | number | null, string | number | null>;
+    dropTargetId: import("vue").Ref<string | number | null, string | number | null>;
+    onDragStart: (nodeId: string | number, e: DragEvent) => void;
+    onDragOver: (nodeId: string | number, e: DragEvent) => void;
+    onDragLeave: (_e: DragEvent) => void;
+    onDrop: (nodeId: string | number, e: DragEvent) => void;
+    onDragEnd: (_e: DragEvent) => void;
+};

package/dist/runtime/composables/useOrgChartDragDrop.js

@@ -0,0 +1,67 @@
+import { ref } from "vue";
+import { getDescendants } from "../utils/org-chart.js";
+export function useOrgChartDragDrop(options) {
+  const draggedNodeId = ref(null);
+  const dropTargetId = ref(null);
+  function onDragStart(nodeId, e) {
+    if (!options.draggable()) return;
+    const node = options.nodeMap.value.get(nodeId);
+    if (!node) return;
+    if (!node.parent) {
+      e.preventDefault();
+      return;
+    }
+    draggedNodeId.value = nodeId;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", String(nodeId));
+    }
+  }
+  function onDragOver(nodeId, e) {
+    if (!options.draggable() || draggedNodeId.value === null) return;
+    if (nodeId === draggedNodeId.value) return;
+    const draggedNode = options.nodeMap.value.get(draggedNodeId.value);
+    if (draggedNode) {
+      const descendants = getDescendants(draggedNode);
+      if (descendants.some((d) => d.data.id === nodeId)) return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = "move";
+    }
+    dropTargetId.value = nodeId;
+  }
+  function onDragLeave(_e) {
+    dropTargetId.value = null;
+  }
+  function onDrop(nodeId, e) {
+    if (!options.draggable() || draggedNodeId.value === null) return;
+    e.preventDefault();
+    const draggedNode = options.nodeMap.value.get(draggedNodeId.value);
+    if (!draggedNode) return;
+    if (nodeId === draggedNodeId.value) return;
+    const descendants = getDescendants(draggedNode);
+    if (descendants.some((d) => d.data.id === nodeId)) return;
+    const oldParentId = draggedNode.data.parentId;
+    options.onNodeDrop({
+      node: draggedNode.data,
+      oldParentId,
+      newParentId: nodeId
+    });
+    draggedNodeId.value = null;
+    dropTargetId.value = null;
+  }
+  function onDragEnd(_e) {
+    draggedNodeId.value = null;
+    dropTargetId.value = null;
+  }
+  return {
+    draggedNodeId,
+    dropTargetId,
+    onDragStart,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDragEnd
+  };
+}

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

@@ -0,0 +1,16 @@
+import type { ComputedRef, Ref } from "vue";
+import type { OrgChartTreeNode, OrgChartSelectionMode } from "../types/org-chart.js";
+export interface UseOrgChartKeyboardOptions {
+    flatVisibleNodes: ComputedRef<OrgChartTreeNode[]>;
+    nodeMap: ComputedRef<Map<string | number, OrgChartTreeNode>>;
+    expandedIds: Ref<Set<string | number>>;
+    selectionMode: () => OrgChartSelectionMode;
+    toggleExpand: (id: string | number) => void;
+    selectNode: (id: string | number) => void;
+    scrollToNode: (id: string | number) => void;
+}
+export declare function useOrgChartKeyboard(options: UseOrgChartKeyboardOptions): {
+    focusedId: Ref<string | number | null, string | number | null>;
+    isFocused: (id: string | number) => boolean;
+    onKeydown: (e: KeyboardEvent) => void;
+};

package/dist/runtime/composables/useOrgChartKeyboard.js

@@ -0,0 +1,101 @@
+import { ref } from "vue";
+export function useOrgChartKeyboard(options) {
+  const focusedId = ref(null);
+  function isFocused(id) {
+    return focusedId.value === id;
+  }
+  function focusNode(id) {
+    focusedId.value = id;
+    options.scrollToNode(id);
+  }
+  function onKeydown(e) {
+    const nodes = options.flatVisibleNodes.value;
+    if (nodes.length === 0) return;
+    if (focusedId.value === null) {
+      focusNode(nodes[0].data.id);
+      return;
+    }
+    const currentIndex = nodes.findIndex((n) => n.data.id === focusedId.value);
+    if (currentIndex === -1) {
+      focusNode(nodes[0].data.id);
+      return;
+    }
+    const current = nodes[currentIndex];
+    switch (e.key) {
+      case "ArrowUp": {
+        e.preventDefault();
+        if (current.parent) {
+          focusNode(current.parent.data.id);
+        }
+        break;
+      }
+      case "ArrowDown": {
+        e.preventDefault();
+        if (current.children.length > 0 && options.expandedIds.value.has(current.data.id)) {
+          focusNode(current.children[0].data.id);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (current.children.length > 0 && options.expandedIds.value.has(current.data.id)) {
+          options.toggleExpand(current.data.id);
+        } else if (current.parent) {
+          focusNode(current.parent.data.id);
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (current.children.length > 0) {
+          if (!options.expandedIds.value.has(current.data.id)) {
+            options.toggleExpand(current.data.id);
+          } else {
+            focusNode(current.children[0].data.id);
+          }
+        }
+        break;
+      }
+      case "Enter": {
+        e.preventDefault();
+        if (current.children.length > 0) {
+          options.toggleExpand(current.data.id);
+        }
+        break;
+      }
+      case " ": {
+        e.preventDefault();
+        if (options.selectionMode() !== "none") {
+          options.selectNode(current.data.id);
+        }
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        focusNode(nodes[0].data.id);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        focusNode(nodes[nodes.length - 1].data.id);
+        break;
+      }
+      case "*": {
+        e.preventDefault();
+        if (current.parent) {
+          for (const sibling of current.parent.children) {
+            if (sibling.children.length > 0 && !options.expandedIds.value.has(sibling.data.id)) {
+              options.toggleExpand(sibling.data.id);
+            }
+          }
+        }
+        break;
+      }
+    }
+  }
+  return {
+    focusedId,
+    isFocused,
+    onKeydown
+  };
+}

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

@@ -0,0 +1,16 @@
+import type { ComputedRef, Ref } from "vue";
+import type { OrgChartNode, OrgChartTreeNode } from "../types/org-chart.js";
+export interface UseOrgChartSearchOptions {
+    searchQuery: () => string;
+    nodes: () => OrgChartNode[];
+    nodeMap: ComputedRef<Map<string | number, OrgChartTreeNode>>;
+    expandedIds: Ref<Set<string | number>>;
+    onUpdateExpanded: (ids: (string | number)[]) => void;
+}
+export declare function useOrgChartSearch(options: UseOrgChartSearchOptions): {
+    matchedIds: ComputedRef<Set<string | number>>;
+    isSearchActive: ComputedRef<boolean>;
+    isMatched: (id: string | number) => boolean;
+    isDimmed: (id: string | number) => boolean;
+    checkAndExpand: () => void;
+};