nuxt-ui-elements-pro 0.1.10 → 0.1.11

package/dist/runtime/composables/useGanttChart.js

@@ -0,0 +1,224 @@
+import { today, getLocalTimeZone } from "@internationalized/date";
+import { asCalendarDate } from "#std/date";
+import { computed, ref, watch } from "vue";
+import {
+  computeGanttLayout,
+  buildTaskTree,
+  flattenVisibleTasks,
+  computeTimelineBounds,
+  getAllGroupIds,
+  dateToPixel as dateToPixelUtil,
+  pixelToDate as pixelToDateUtil,
+  DEFAULT_ZOOM_PRESETS
+} from "../utils/gantt-chart.js";
+export function useGanttChart(options) {
+  const displayDate = computed(() => {
+    const mv = options.modelValue();
+    if (mv) return asCalendarDate(mv);
+    return today(getLocalTimeZone());
+  });
+  const zoomLevel = computed(() => options.zoomLevel());
+  const zoomLevels = computed(() => options.zoomLevels());
+  const rowHeight = computed(() => options.rowHeight());
+  const normalizedTasks = computed(() => {
+    return options.tasks().map((task) => ({
+      id: task.id,
+      title: task.title,
+      start: asCalendarDate(task.start),
+      end: asCalendarDate(task.end),
+      parentId: task.parentId ?? null,
+      color: task.color ?? "primary",
+      progress: Math.max(0, Math.min(100, task.progress ?? 0)),
+      milestone: task.milestone ?? false,
+      draggable: task.draggable ?? true,
+      resizable: task.resizable ?? true,
+      metadata: task.metadata ?? {},
+      original: task
+    }));
+  });
+  const normalizedDependencies = computed(() => {
+    return options.dependencies().map((dep) => ({
+      ...dep,
+      type: dep.type ?? "finish-to-start"
+    }));
+  });
+  const taskTree = computed(() => {
+    return buildTaskTree(normalizedTasks.value);
+  });
+  const expandedIds = ref(/* @__PURE__ */ new Set());
+  let initialized = false;
+  watch(taskTree, (tree) => {
+    if (!initialized && tree.length > 0) {
+      const propsExpanded = options.expanded();
+      if (propsExpanded) {
+        expandedIds.value = new Set(propsExpanded);
+      } else {
+        expandedIds.value = getAllGroupIds(tree);
+      }
+      initialized = true;
+    }
+  }, { immediate: true });
+  watch(() => options.expanded(), (ids) => {
+    if (ids) {
+      expandedIds.value = new Set(ids);
+    }
+  });
+  function toggleExpand(id) {
+    const newSet = new Set(expandedIds.value);
+    if (newSet.has(id)) {
+      newSet.delete(id);
+    } else {
+      newSet.add(id);
+    }
+    expandedIds.value = newSet;
+    options.onUpdateExpanded(Array.from(newSet));
+  }
+  function expandAll() {
+    expandedIds.value = getAllGroupIds(taskTree.value);
+    options.onUpdateExpanded(Array.from(expandedIds.value));
+  }
+  function collapseAll() {
+    expandedIds.value = /* @__PURE__ */ new Set();
+    options.onUpdateExpanded([]);
+  }
+  function isExpanded(id) {
+    return expandedIds.value.has(id);
+  }
+  const flatVisible = computed(() => {
+    return flattenVisibleTasks(taskTree.value, expandedIds.value);
+  });
+  const timelineBounds = computed(() => {
+    return computeTimelineBounds(normalizedTasks.value, zoomLevel.value);
+  });
+  const timelineStart = computed(() => timelineBounds.value.start);
+  const timelineEnd = computed(() => timelineBounds.value.end);
+  const unitWidth = computed(() => {
+    return DEFAULT_ZOOM_PRESETS[zoomLevel.value].unitWidth;
+  });
+  const layout = computed(() => {
+    return computeGanttLayout(
+      normalizedTasks.value,
+      normalizedDependencies.value,
+      expandedIds.value,
+      zoomLevel.value,
+      unitWidth.value,
+      rowHeight.value,
+      options.locale()
+    );
+  });
+  const headerTitle = computed(() => {
+    const start = timelineStart.value;
+    const end = timelineEnd.value;
+    const locale = options.locale();
+    const startDate = new Date(start.year, start.month - 1, start.day);
+    const endDate = new Date(end.year, end.month - 1, end.day);
+    if (start.year === end.year && start.month === end.month) {
+      return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(startDate);
+    }
+    if (start.year === end.year) {
+      const startStr2 = new Intl.DateTimeFormat(locale, { month: "short" }).format(startDate);
+      const endStr2 = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric" }).format(endDate);
+      return `${startStr2} \u2013 ${endStr2}`;
+    }
+    const startStr = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric" }).format(startDate);
+    const endStr = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric" }).format(endDate);
+    return `${startStr} \u2013 ${endStr}`;
+  });
+  function goToPrev() {
+    const amount = getNavigationAmount(zoomLevel.value);
+    const newDate = displayDate.value.subtract(amount);
+    options.onUpdateModelValue(newDate);
+  }
+  function goToNext() {
+    const amount = getNavigationAmount(zoomLevel.value);
+    const newDate = displayDate.value.add(amount);
+    options.onUpdateModelValue(newDate);
+  }
+  function goToToday() {
+    options.onUpdateModelValue(today(getLocalTimeZone()));
+  }
+  function setZoomLevel(level) {
+    options.onUpdateZoomLevel(level);
+  }
+  const bodyEl = ref(null);
+  function scrollToDate(date) {
+    if (!bodyEl.value) return;
+    const px = dateToPixel(date);
+    bodyEl.value.scrollLeft = Math.max(0, px - bodyEl.value.clientWidth / 2);
+  }
+  function scrollToTask(taskId) {
+    if (!bodyEl.value) return;
+    const bars = layout.value.taskBars;
+    const bar = bars.find((b) => b.task.id === taskId);
+    if (!bar) return;
+    const rh = rowHeight.value;
+    const top = bar.rowIndex * rh;
+    const el = bodyEl.value;
+    if (top < el.scrollTop || top + rh > el.scrollTop + el.clientHeight) {
+      el.scrollTop = top - el.clientHeight / 2 + rh / 2;
+    }
+    if (bar.leftPx < el.scrollLeft || bar.leftPx + bar.widthPx > el.scrollLeft + el.clientWidth) {
+      el.scrollLeft = bar.leftPx - 40;
+    }
+  }
+  function dateToPixel(date) {
+    return dateToPixelUtil(date, timelineStart.value, zoomLevel.value, unitWidth.value);
+  }
+  function pixelToDate(px) {
+    return pixelToDateUtil(px, timelineStart.value, zoomLevel.value, unitWidth.value);
+  }
+  function getTaskStyle(task) {
+    const cssVar = task.color === "neutral" ? "var(--ui-bg-inverted)" : `var(--ui-${task.color})`;
+    return {
+      "--task-color": cssVar
+    };
+  }
+  return {
+    displayDate,
+    zoomLevel,
+    zoomLevels,
+    rowHeight,
+    normalizedTasks,
+    normalizedDependencies,
+    taskTree,
+    expandedIds,
+    flatVisible,
+    timelineStart,
+    timelineEnd,
+    layout,
+    headerTitle,
+    unitWidth,
+    // Scroll container
+    bodyEl,
+    // Navigation
+    goToPrev,
+    goToNext,
+    goToToday,
+    setZoomLevel,
+    scrollToDate,
+    scrollToTask,
+    // Expand/collapse
+    toggleExpand,
+    expandAll,
+    collapseAll,
+    isExpanded,
+    // Helpers
+    dateToPixel,
+    pixelToDate,
+    getTaskStyle
+  };
+}
+function getNavigationAmount(zoomLevel) {
+  switch (zoomLevel) {
+    case "day":
+      return { days: 1 };
+    case "week":
+      return { weeks: 1 };
+    case "month":
+      return { months: 1 };
+    case "quarter":
+      return { months: 3 };
+    case "year":
+      return { months: 12 };
+  }
+}

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

@@ -0,0 +1,3 @@
+import type { GanttChartContext } from "../types/gantt-chart.js";
+export declare const ganttChartContextKey: import("vue").InjectionKey<GanttChartContext>;
+export declare const useGanttChartContext: () => GanttChartContext;

package/dist/runtime/composables/useGanttChartContext.js

@@ -0,0 +1,4 @@
+import { createComponentContext } from "../utils/createComponentContext.js";
+const { key, useContext } = createComponentContext("GanttChart");
+export const ganttChartContextKey = key;
+export const useGanttChartContext = useContext;

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

@@ -0,0 +1,28 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { ComputedRef } from "vue";
+import type { GanttTaskBar, GanttTaskDropPayload, GanttZoomLevel } from "../types/gantt-chart.js";
+export interface UseGanttChartDragDropOptions {
+    editable: () => boolean;
+    layout: ComputedRef<{
+        taskBars: GanttTaskBar[];
+    }>;
+    zoomLevel: ComputedRef<GanttZoomLevel>;
+    unitWidth: ComputedRef<number>;
+    dateToPixel: (date: CalendarDate) => number;
+    pixelToDate: (px: number) => CalendarDate;
+    onTaskDrop: (payload: GanttTaskDropPayload) => void;
+}
+export declare function useGanttChartDragDrop(options: UseGanttChartDragDropOptions): {
+    draggedTaskId: import("vue").Ref<string | number | null, string | number | null>;
+    dragPreview: import("vue").Ref<{
+        leftPx: number;
+        widthPx: number;
+    } | null, {
+        leftPx: number;
+        widthPx: number;
+    } | {
+        leftPx: number;
+        widthPx: number;
+    } | null>;
+    onDragStart: (bar: GanttTaskBar, e: PointerEvent) => void;
+};

package/dist/runtime/composables/useGanttChartDragDrop.js

@@ -0,0 +1,68 @@
+import { onUnmounted, ref } from "vue";
+import { snapToGrid } from "../utils/gantt-chart.js";
+export function useGanttChartDragDrop(options) {
+  const { editable, dateToPixel, pixelToDate, onTaskDrop } = options;
+  const draggedTaskId = ref(null);
+  const dragPreview = ref(null);
+  let activeBar = null;
+  let pointerStartX = 0;
+  let originalLeftPx = 0;
+  function onPointerMove(e) {
+    if (!activeBar) return;
+    const deltaX = e.clientX - pointerStartX;
+    const rawLeft = originalLeftPx + deltaX;
+    const snappedLeft = snapToGrid(rawLeft, options.zoomLevel.value, options.unitWidth.value);
+    dragPreview.value = {
+      leftPx: snappedLeft,
+      widthPx: activeBar.widthPx
+    };
+  }
+  function onPointerUp(_e) {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+    if (!activeBar || !dragPreview.value) {
+      cleanup();
+      return;
+    }
+    if (dragPreview.value.leftPx === originalLeftPx) {
+      cleanup();
+      return;
+    }
+    const newStart = pixelToDate(dragPreview.value.leftPx);
+    const newEnd = pixelToDate(dragPreview.value.leftPx + dragPreview.value.widthPx).subtract({ days: 1 });
+    onTaskDrop({
+      task: activeBar.task.original,
+      oldStart: activeBar.task.start,
+      oldEnd: activeBar.task.end,
+      newStart,
+      newEnd
+    });
+    cleanup();
+  }
+  function onDragStart(bar, e) {
+    if (!editable() || !bar.task.draggable || bar.isMilestone) return;
+    e.preventDefault();
+    e.stopPropagation();
+    draggedTaskId.value = bar.task.id;
+    activeBar = bar;
+    pointerStartX = e.clientX;
+    originalLeftPx = bar.leftPx;
+    dragPreview.value = { leftPx: bar.leftPx, widthPx: bar.widthPx };
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+  }
+  function cleanup() {
+    draggedTaskId.value = null;
+    dragPreview.value = null;
+    activeBar = null;
+  }
+  onUnmounted(() => {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+  });
+  return {
+    draggedTaskId,
+    dragPreview,
+    onDragStart
+  };
+}

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

@@ -0,0 +1,14 @@
+import type { ComputedRef } from "vue";
+import type { GanttTaskBar } from "../types/gantt-chart.js";
+export interface UseGanttChartKeyboardOptions {
+    flatVisibleTasks: ComputedRef<GanttTaskBar[]>;
+    expandedIds: {
+        value: Set<string | number>;
+    };
+    toggleExpand: (id: string | number) => void;
+    scrollToTask: (id: string | number) => void;
+}
+export declare function useGanttChartKeyboard(options: UseGanttChartKeyboardOptions): {
+    focusedTaskId: import("vue").Ref<string | number | null, string | number | null>;
+    onKeydown: (e: KeyboardEvent) => void;
+};

package/dist/runtime/composables/useGanttChartKeyboard.js

@@ -0,0 +1,92 @@
+import { ref } from "vue";
+export function useGanttChartKeyboard(options) {
+  const { flatVisibleTasks, toggleExpand, scrollToTask } = options;
+  const focusedTaskId = ref(null);
+  function getCurrentIndex() {
+    if (focusedTaskId.value === null) return -1;
+    return flatVisibleTasks.value.findIndex((bar) => bar.task.id === focusedTaskId.value);
+  }
+  function focusTask(id) {
+    focusedTaskId.value = id;
+    scrollToTask(id);
+  }
+  function onKeydown(e) {
+    const bars = flatVisibleTasks.value;
+    if (bars.length === 0) return;
+    const currentIdx = getCurrentIndex();
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextIdx = currentIdx < bars.length - 1 ? currentIdx + 1 : 0;
+        focusTask(bars[nextIdx].task.id);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prevIdx = currentIdx > 0 ? currentIdx - 1 : bars.length - 1;
+        focusTask(bars[prevIdx].task.id);
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (currentIdx >= 0) {
+          const bar = bars[currentIdx];
+          if (bar.isGroup && !bar.isExpanded) {
+            toggleExpand(bar.task.id);
+          } else if (bar.isGroup && bar.isExpanded && currentIdx < bars.length - 1) {
+            focusTask(bars[currentIdx + 1].task.id);
+          }
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (currentIdx >= 0) {
+          const bar = bars[currentIdx];
+          if (bar.isGroup && bar.isExpanded) {
+            toggleExpand(bar.task.id);
+          } else if (bar.depth > 0) {
+            const parentBar = bars.find(
+              (b) => b.task.id === bar.task.parentId && b.isGroup
+            );
+            if (parentBar) {
+              focusTask(parentBar.task.id);
+            }
+          }
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        if (currentIdx >= 0) {
+          const bar = bars[currentIdx];
+          if (bar.isGroup) {
+            toggleExpand(bar.task.id);
+          }
+        }
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        if (bars.length > 0) {
+          focusTask(bars[0].task.id);
+        }
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        if (bars.length > 0) {
+          focusTask(bars[bars.length - 1].task.id);
+        }
+        break;
+      }
+      default:
+        return;
+    }
+  }
+  return {
+    focusedTaskId,
+    onKeydown
+  };
+}

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

@@ -0,0 +1,26 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { ComputedRef } from "vue";
+import type { GanttTaskBar, GanttTaskResizePayload, GanttZoomLevel } from "../types/gantt-chart.js";
+export interface UseGanttChartResizeOptions {
+    editable: () => boolean;
+    zoomLevel: ComputedRef<GanttZoomLevel>;
+    unitWidth: ComputedRef<number>;
+    dateToPixel: (date: CalendarDate) => number;
+    pixelToDate: (px: number) => CalendarDate;
+    onTaskResize: (payload: GanttTaskResizePayload) => void;
+}
+export declare function useGanttChartResize(options: UseGanttChartResizeOptions): {
+    resizingTaskId: import("vue").Ref<string | number | null, string | number | null>;
+    resizeEdge: import("vue").Ref<"start" | "end" | null, "start" | "end" | null>;
+    resizePreview: import("vue").Ref<{
+        leftPx: number;
+        widthPx: number;
+    } | null, {
+        leftPx: number;
+        widthPx: number;
+    } | {
+        leftPx: number;
+        widthPx: number;
+    } | null>;
+    onResizePointerDown: (bar: GanttTaskBar, edge: "start" | "end", e: PointerEvent) => void;
+};

package/dist/runtime/composables/useGanttChartResize.js

@@ -0,0 +1,89 @@
+import { onUnmounted, ref } from "vue";
+import { snapToGrid } from "../utils/gantt-chart.js";
+export function useGanttChartResize(options) {
+  const { editable, dateToPixel, pixelToDate, onTaskResize } = options;
+  const resizingTaskId = ref(null);
+  const resizeEdge = ref(null);
+  const resizePreview = ref(null);
+  let activeBar = null;
+  let pointerStartX = 0;
+  let originalLeftPx = 0;
+  let originalWidthPx = 0;
+  function onPointerMove(e) {
+    if (!activeBar) return;
+    const deltaX = e.clientX - pointerStartX;
+    const minWidth = options.unitWidth.value / 2;
+    if (resizeEdge.value === "end") {
+      const rawWidth = originalWidthPx + deltaX;
+      const snappedRight = snapToGrid(originalLeftPx + rawWidth, options.zoomLevel.value, options.unitWidth.value);
+      const newWidth = Math.max(minWidth, snappedRight - originalLeftPx);
+      resizePreview.value = {
+        leftPx: originalLeftPx,
+        widthPx: newWidth
+      };
+    } else {
+      const rawLeft = originalLeftPx + deltaX;
+      const snappedLeft = snapToGrid(rawLeft, options.zoomLevel.value, options.unitWidth.value);
+      const rightEdge = originalLeftPx + originalWidthPx;
+      const newWidth = Math.max(minWidth, rightEdge - snappedLeft);
+      resizePreview.value = {
+        leftPx: rightEdge - newWidth,
+        widthPx: newWidth
+      };
+    }
+  }
+  function onPointerUp(_e) {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+    if (!activeBar || !resizePreview.value) {
+      cleanup();
+      return;
+    }
+    if (resizePreview.value.leftPx === originalLeftPx && resizePreview.value.widthPx === originalWidthPx) {
+      cleanup();
+      return;
+    }
+    const edge = resizeEdge.value;
+    const newStart = pixelToDate(resizePreview.value.leftPx);
+    const newEnd = pixelToDate(resizePreview.value.leftPx + resizePreview.value.widthPx).subtract({ days: 1 });
+    onTaskResize({
+      task: activeBar.task.original,
+      oldStart: activeBar.task.start,
+      oldEnd: activeBar.task.end,
+      newStart,
+      newEnd,
+      edge
+    });
+    cleanup();
+  }
+  function onResizePointerDown(bar, edge, e) {
+    if (!editable() || !bar.task.resizable || bar.isMilestone) return;
+    e.preventDefault();
+    e.stopPropagation();
+    resizingTaskId.value = bar.task.id;
+    resizeEdge.value = edge;
+    activeBar = bar;
+    pointerStartX = e.clientX;
+    originalLeftPx = bar.leftPx;
+    originalWidthPx = bar.widthPx;
+    resizePreview.value = { leftPx: bar.leftPx, widthPx: bar.widthPx };
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+  }
+  function cleanup() {
+    resizingTaskId.value = null;
+    resizeEdge.value = null;
+    resizePreview.value = null;
+    activeBar = null;
+  }
+  onUnmounted(() => {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+  });
+  return {
+    resizingTaskId,
+    resizeEdge,
+    resizePreview,
+    onResizePointerDown
+  };
+}

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

@@ -1,8 +1,3 @@
-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;
+export declare const orgChartContextKey: import("vue").InjectionKey<OrgChartContext>;
+export declare const useOrgChartContext: () => OrgChartContext;

package/dist/runtime/composables/useOrgChartContext.js

@@ -1,11 +1,4 @@
-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;
-}
+import { createComponentContext } from "../utils/createComponentContext.js";
+const { key, useContext } = createComponentContext("OrgChart");
+export const orgChartContextKey = key;
+export const useOrgChartContext = useContext;

package/dist/runtime/index.d.ts

@@ -2,3 +2,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";
+export { computeGanttLayout, buildTaskTree, computeGroupSpans, flattenVisibleTasks, dateToPixel, pixelToDate, DEFAULT_ZOOM_PRESETS, DEFAULT_ROW_HEIGHT } from "./utils/gantt-chart.js";

package/dist/runtime/index.js

@@ -1,3 +1,4 @@
 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";
+export { computeGanttLayout, buildTaskTree, computeGroupSpans, flattenVisibleTasks, dateToPixel, pixelToDate, DEFAULT_ZOOM_PRESETS, DEFAULT_ROW_HEIGHT } from "./utils/gantt-chart.js";

package/dist/runtime/server/api/_feedback.post.d.ts

@@ -0,0 +1,3 @@
+import type { FeedbackSubmitResult } from "../../types/feedback-widget.js";
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<FeedbackSubmitResult>>;
+export default _default;