nuxt-ui-elements-pro 0.1.6 → 0.1.7

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;
+};

package/dist/runtime/composables/useOrgChartSearch.js

@@ -0,0 +1,62 @@
+import { computed } from "vue";
+import { getAncestors } from "../utils/org-chart.js";
+export function useOrgChartSearch(options) {
+  const matchedIds = computed(() => {
+    const query = options.searchQuery().trim().toLowerCase();
+    if (!query) return /* @__PURE__ */ new Set();
+    const ids = /* @__PURE__ */ new Set();
+    for (const node of options.nodes()) {
+      const name = node.name.toLowerCase();
+      const title = (node.title ?? "").toLowerCase();
+      if (name.includes(query) || title.includes(query)) {
+        ids.add(node.id);
+      }
+    }
+    return ids;
+  });
+  const visibleAncestorIds = computed(() => {
+    const query = options.searchQuery().trim();
+    if (!query) return /* @__PURE__ */ new Set();
+    const ids = /* @__PURE__ */ new Set();
+    const map = options.nodeMap.value;
+    for (const matchedId of matchedIds.value) {
+      const ancestors = getAncestors(matchedId, map);
+      for (const a of ancestors) {
+        ids.add(a.data.id);
+      }
+    }
+    return ids;
+  });
+  const isSearchActive = computed(() => options.searchQuery().trim().length > 0);
+  function expandToMatches() {
+    if (!isSearchActive.value || matchedIds.value.size === 0) return;
+    const next = new Set(options.expandedIds.value);
+    for (const id of visibleAncestorIds.value) {
+      next.add(id);
+    }
+    options.expandedIds.value = next;
+    options.onUpdateExpanded([...next]);
+  }
+  let lastQuery = "";
+  function checkAndExpand() {
+    const query = options.searchQuery().trim();
+    if (query !== lastQuery) {
+      lastQuery = query;
+      if (query) expandToMatches();
+    }
+  }
+  function isMatched(id) {
+    return matchedIds.value.has(id);
+  }
+  function isDimmed(id) {
+    if (!isSearchActive.value) return false;
+    return !matchedIds.value.has(id) && !visibleAncestorIds.value.has(id);
+  }
+  return {
+    matchedIds,
+    isSearchActive,
+    isMatched,
+    isDimmed,
+    checkAndExpand
+  };
+}

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

@@ -0,0 +1,26 @@
+import type { ComputedRef, Ref } from "vue";
+import type { OrgChartTreeNode, ResolvedZoomConfig, ResolvedLayoutConfig } from "../types/org-chart.js";
+export interface UseOrgChartZoomOptions {
+    config: () => ResolvedZoomConfig;
+    containerRef: Ref<HTMLElement | null>;
+    layoutWidth: ComputedRef<number>;
+    layoutHeight: ComputedRef<number>;
+    nodeMap: ComputedRef<Map<string | number, OrgChartTreeNode>>;
+    layoutConfig: () => ResolvedLayoutConfig;
+}
+export declare function useOrgChartZoom(options: UseOrgChartZoomOptions): {
+    scale: Ref<number, number>;
+    translateX: Ref<number, number>;
+    translateY: Ref<number, number>;
+    transformStyle: ComputedRef<{
+        transform: string;
+        transformOrigin: string;
+    }>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    fitToView: () => void;
+    scrollToNode: (id: string | number) => void;
+    onWheel: (e: WheelEvent) => void;
+    onPointerDown: (e: PointerEvent) => void;
+};

package/dist/runtime/composables/useOrgChartZoom.js

@@ -0,0 +1,101 @@
+import { computed, ref } from "vue";
+export function useOrgChartZoom(options) {
+  const scale = ref(options.config().initial);
+  const translateX = ref(0);
+  const translateY = ref(0);
+  let isPanning = false;
+  let panStartX = 0;
+  let panStartY = 0;
+  let panStartTX = 0;
+  let panStartTY = 0;
+  const transformStyle = computed(() => ({
+    transform: `scale(${scale.value}) translate(${translateX.value}px, ${translateY.value}px)`,
+    transformOrigin: "0 0"
+  }));
+  function clampScale(s) {
+    const cfg = options.config();
+    return Math.min(Math.max(s, cfg.min), cfg.max);
+  }
+  function zoomIn() {
+    scale.value = clampScale(scale.value + options.config().step);
+  }
+  function zoomOut() {
+    scale.value = clampScale(scale.value - options.config().step);
+  }
+  function zoomReset() {
+    scale.value = options.config().initial;
+    translateX.value = 0;
+    translateY.value = 0;
+  }
+  function fitToView() {
+    const container = options.containerRef.value?.parentElement;
+    if (!container) return;
+    const lw = options.layoutWidth.value;
+    const lh = options.layoutHeight.value;
+    if (lw === 0 || lh === 0) return;
+    const cw = container.clientWidth;
+    const ch = container.clientHeight;
+    const sx = cw / lw;
+    const sy = ch / lh;
+    const s = clampScale(Math.min(sx, sy) * 0.9);
+    scale.value = s;
+    translateX.value = (cw / s - lw) / 2;
+    translateY.value = (ch / s - lh) / 2;
+  }
+  function scrollToNode(id) {
+    const node = options.nodeMap.value.get(id);
+    const container = options.containerRef.value?.parentElement;
+    if (!node || !container) return;
+    const cfg = options.layoutConfig();
+    const nodeCenterX = node.x + cfg.nodeWidth / 2;
+    const nodeCenterY = node.y + cfg.nodeHeight / 2;
+    const cw = container.clientWidth;
+    const ch = container.clientHeight;
+    translateX.value = cw / scale.value / 2 - nodeCenterX;
+    translateY.value = ch / scale.value / 2 - nodeCenterY;
+  }
+  function onWheel(e) {
+    if (!options.config().enabled) return;
+    e.preventDefault();
+    let delta = e.deltaY;
+    if (e.deltaMode === 1) delta *= 40;
+    const zoomDelta = -delta * 1e-3;
+    scale.value = clampScale(scale.value + zoomDelta);
+  }
+  function onPointerDown(e) {
+    if (!options.config().enabled) return;
+    if (e.button !== 1 && !e.metaKey && !e.ctrlKey) return;
+    isPanning = true;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    panStartTX = translateX.value;
+    panStartTY = translateY.value;
+    const onMove = (ev) => {
+      if (!isPanning) return;
+      const dx = (ev.clientX - panStartX) / scale.value;
+      const dy = (ev.clientY - panStartY) / scale.value;
+      translateX.value = panStartTX + dx;
+      translateY.value = panStartTY + dy;
+    };
+    const onUp = () => {
+      isPanning = false;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }
+  return {
+    scale,
+    translateX,
+    translateY,
+    transformStyle,
+    zoomIn,
+    zoomOut,
+    zoomReset,
+    fitToView,
+    scrollToNode,
+    onWheel,
+    onPointerDown
+  };
+}

package/dist/runtime/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./types/index.js";
 export { expandRecurringEvents, expandRecurringEventsAsync, getVisibleRange } from "./utils/recurrence.js";
 export type { VisibleRange } from "./utils/recurrence.js";
+export { buildTree, computeLayout, computeFullLayout, computeConnectionPaths, flattenVisibleTree, buildNodeMap, getAllNodeIds, getAncestors, getDescendants } from "./utils/org-chart.js";

package/dist/runtime/index.js

@@ -1,2 +1,3 @@
 export * from "./types/index.js";
 export { expandRecurringEvents, expandRecurringEventsAsync, getVisibleRange } from "./utils/recurrence.js";
+export { buildTree, computeLayout, computeFullLayout, computeConnectionPaths, flattenVisibleTree, buildNodeMap, getAllNodeIds, getAncestors, getDescendants } from "./utils/org-chart.js";

package/dist/runtime/types/event-calendar.d.ts

@@ -192,6 +192,7 @@ export interface EventCalendarContext {
     editable: ComputedRef<boolean>;
     loading: ComputedRef<boolean>;
     color: ComputedRef<string>;
+    views: ComputedRef<CalendarView[]>;
     monthConfig: ComputedRef<{
         maxEvents: number;
         fixedWeeks: boolean;

package/dist/runtime/types/index.d.ts

@@ -1,6 +1,4 @@
 export * from "./event-calendar.js";
 export * from "../components/EventCalendar.vue.js";
-export * from "../components/EventCalendarHeader.vue.js";
-export * from "../components/EventCalendarMonthView.vue.js";
-export * from "../components/EventCalendarTimeGrid.vue.js";
-export * from "../components/EventCalendarListView.vue.js";
+export * from "./org-chart.js";
+export * from "../components/OrgChart.vue.js";

package/dist/runtime/types/index.js

@@ -1,6 +1,4 @@
 export * from "./event-calendar.js";
 export * from "../components/EventCalendar.vue";
-export * from "../components/EventCalendarHeader.vue";
-export * from "../components/EventCalendarMonthView.vue";
-export * from "../components/EventCalendarTimeGrid.vue";
-export * from "../components/EventCalendarListView.vue";
+export * from "./org-chart.js";
+export * from "../components/OrgChart.vue";