@nu-grid/nuxt 0.1.1

package/dist/runtime/composables/_internal/useNuGridAnimation.d.ts

@@ -0,0 +1,33 @@
+import type { TableData } from '@nuxt/ui';
+import type { Row } from '@tanstack/vue-table';
+import type { ComputedRef, Ref } from 'vue';
+import type { NuGridProps } from '../../types/index.js';
+import type { NuGridAnimationContext } from '../../types/_internal/index.js';
+interface NuGridAnimationOptions<T extends TableData> {
+    /** Root element ref for finding row elements */
+    rootRef: Ref<HTMLElement | null>;
+    /** Rows that trigger animation when order changes (sorted/filtered output from TanStack) */
+    rows: ComputedRef<Row<T>[]>;
+    /** Animation class from theme (overrides preset if provided) */
+    animationClass?: ComputedRef<string>;
+}
+/**
+ * Composable for NuGrid row animations
+ *
+ * Provides:
+ * - Animation configuration from props
+ * - Row animation execution (refresh effect on reorder)
+ * - Accessibility support (prefers-reduced-motion)
+ * - Animation presets and customization
+ *
+ * Animations are triggered by:
+ * - Sorting changes
+ * - Filtering changes
+ * - Row additions/removals
+ *
+ * @param props - NuGrid props
+ * @param options - Animation options (rootRef, rows)
+ * @returns Animation context with computed values
+ */
+export declare function useNuGridAnimation<T extends TableData = TableData>(props: NuGridProps<T>, options?: NuGridAnimationOptions<T>): NuGridAnimationContext;
+export {};

package/dist/runtime/composables/_internal/useNuGridAnimation.js

@@ -0,0 +1,178 @@
+import { usePreferredReducedMotion } from "@vueuse/core";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { usePropWithDefault } from "../../config/_internal/index.js";
+const presetClasses = {
+  refresh: "animate-nugrid-refresh",
+  fade: "animate-nugrid-fade",
+  slide: "animate-nugrid-slide",
+  scale: "animate-nugrid-scale"
+};
+export function useNuGridAnimation(props, options) {
+  const enabledProp = usePropWithDefault(props, "animation", "enabled");
+  const presetProp = usePropWithDefault(props, "animation", "preset");
+  const durationProp = usePropWithDefault(props, "animation", "duration");
+  const easingProp = usePropWithDefault(props, "animation", "easing");
+  const staggerProp = usePropWithDefault(props, "animation", "stagger");
+  const maxStaggerProp = usePropWithDefault(props, "animation", "maxStagger");
+  const preferredMotion = usePreferredReducedMotion();
+  const prefersReducedMotion = computed(() => preferredMotion.value === "reduce");
+  const isMounted = ref(false);
+  let mountTimer;
+  onMounted(() => {
+    mountTimer = setTimeout(() => {
+      isMounted.value = true;
+    }, 250);
+  });
+  onBeforeUnmount(() => {
+    if (mountTimer) {
+      clearTimeout(mountTimer);
+      mountTimer = void 0;
+    }
+  });
+  const enabled = computed(() => {
+    if (!isMounted.value) return false;
+    if (prefersReducedMotion.value) return false;
+    if (props.animation === false) return false;
+    return enabledProp.value;
+  });
+  const duration = computed(() => durationProp.value);
+  const easing = computed(() => easingProp.value);
+  const stagger = computed(() => staggerProp.value);
+  const maxStagger = computed(() => maxStaggerProp.value);
+  const presetExplicit = computed(() => {
+    const anim = props.animation;
+    if (!anim || typeof anim !== "object") return false;
+    return Object.prototype.hasOwnProperty.call(anim, "preset");
+  });
+  const animationClass = computed(() => {
+    if (options?.animationClass?.value && !presetExplicit.value) {
+      return options.animationClass.value;
+    }
+    return presetClasses[presetProp.value] ?? presetClasses.refresh;
+  });
+  let currentAnimationId = 0;
+  const isAnimating = ref(false);
+  let cleanupTimer = null;
+  let activeAnimationListeners = [];
+  let previousRowIds = [];
+  function cancelAnimation() {
+    currentAnimationId++;
+    if (cleanupTimer) {
+      clearTimeout(cleanupTimer);
+      cleanupTimer = null;
+    }
+    if (activeAnimationListeners.length) {
+      activeAnimationListeners.forEach(
+        ({ el, handler }) => el.removeEventListener("animationend", handler)
+      );
+      activeAnimationListeners = [];
+    }
+    if (options?.rootRef.value) {
+      const rowElements = options.rootRef.value.querySelectorAll("[data-row-id]");
+      rowElements.forEach((el) => {
+        const htmlEl = el;
+        htmlEl.classList.remove(animationClass.value);
+        htmlEl.style.animationDelay = "";
+      });
+    }
+    isAnimating.value = false;
+  }
+  async function animateReorder() {
+    if (!enabled.value || !options?.rootRef.value) return;
+    if (isAnimating.value) {
+      cancelAnimation();
+    }
+    const root = options.rootRef.value;
+    const cssClass = animationClass.value;
+    const animationId = ++currentAnimationId;
+    isAnimating.value = true;
+    await nextTick();
+    if (animationId !== currentAnimationId) return;
+    const rowElements = Array.from(root.querySelectorAll("[data-row-id]"));
+    if (!rowElements.length) {
+      isAnimating.value = false;
+      return;
+    }
+    const staggerMs = stagger.value;
+    const maxStaggerMs = maxStagger.value;
+    const cleanupElement = (el) => {
+      el.classList.remove(cssClass);
+      el.style.animationDelay = "";
+    };
+    const schedule = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (fn) => setTimeout(fn, 16);
+    activeAnimationListeners = [];
+    schedule(() => {
+      if (animationId !== currentAnimationId) return;
+      const total = rowElements.length;
+      let finished = 0;
+      const handleDone = () => {
+        finished++;
+        if (finished >= total) {
+          if (cleanupTimer) {
+            clearTimeout(cleanupTimer);
+            cleanupTimer = null;
+          }
+          activeAnimationListeners = [];
+          isAnimating.value = false;
+        }
+      };
+      rowElements.forEach((el, index) => {
+        const delay = Math.min(index * staggerMs, maxStaggerMs);
+        const handler = () => {
+          if (animationId !== currentAnimationId) return;
+          cleanupElement(el);
+          handleDone();
+        };
+        activeAnimationListeners.push({ el, handler });
+        el.addEventListener("animationend", handler, { once: true });
+        el.style.animationDelay = `${delay}ms`;
+        el.classList.add(cssClass);
+      });
+      cleanupTimer = setTimeout(
+        () => {
+          if (animationId !== currentAnimationId) return;
+          if (activeAnimationListeners.length) {
+            activeAnimationListeners.forEach(
+              ({ el, handler }) => el.removeEventListener("animationend", handler)
+            );
+            activeAnimationListeners = [];
+          }
+          rowElements.forEach(cleanupElement);
+          isAnimating.value = false;
+        },
+        duration.value + maxStaggerMs + 50
+      );
+    });
+  }
+  if (options) {
+    watch(
+      () => options.rows.value.map((row) => row.id),
+      (newIds) => {
+        if (!isMounted.value) {
+          previousRowIds = [...newIds];
+          return;
+        }
+        let hasChanged = newIds.length !== previousRowIds.length;
+        if (!hasChanged) {
+          for (let i = 0; i < newIds.length; i++) {
+            if (newIds[i] !== previousRowIds[i]) {
+              hasChanged = true;
+              break;
+            }
+          }
+        }
+        previousRowIds = [...newIds];
+        if (hasChanged) {
+          animateReorder();
+        }
+      },
+      { immediate: true }
+    );
+  }
+  return {
+    enabled,
+    duration,
+    easing,
+    animateReorder
+  };
+}

package/dist/runtime/composables/_internal/useNuGridAutosize.d.ts

@@ -0,0 +1,14 @@
+import type { TableData } from '@nuxt/ui';
+import type { Table } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+import type { NuGridProps } from '../../types/index.js';
+/**
+ * Autosize functionality for tables similar to AG Grid
+ * Supports two modes:
+ * - fitCell: Auto-size columns to fit cell contents
+ * - fitGrid: Auto-size columns to fit cell contents and scale up to fill grid width
+ */
+export declare function useNuGridAutosize<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>, tableRef: Ref<HTMLElement | null>): {
+    autoSizeColumns: (mode?: "fitCell" | "fitGrid") => void;
+    autoSizeColumn: (columnId: string) => void;
+};

package/dist/runtime/composables/_internal/useNuGridAutosize.js

@@ -0,0 +1,161 @@
+import { useDebounceFn } from "@vueuse/core";
+import { nextTick, watch } from "vue";
+import { usePropWithDefault } from "../../config/_internal/index.js";
+export function useNuGridAutosize(props, tableApi, tableRef) {
+  function measureSingleColumnWidth(columnId, measureDiv) {
+    let maxWidth = 0;
+    const column = tableApi.getColumn(columnId);
+    if (!column) return 150;
+    const headerGroups = tableApi.getHeaderGroups();
+    headerGroups.forEach((headerGroup) => {
+      const header = headerGroup.headers.find((h) => h.column.id === columnId);
+      if (header) {
+        let headerText = "";
+        if (typeof header.column.columnDef.header === "string") {
+          headerText = header.column.columnDef.header;
+        } else if (header.column.id) {
+          headerText = header.column.id;
+        }
+        if (headerText) {
+          measureDiv.textContent = headerText;
+          const width = measureDiv.offsetWidth + 64;
+          maxWidth = Math.max(maxWidth, width);
+        }
+      }
+    });
+    const rows = tableApi.getRowModel().rows;
+    const sampleSize = Math.min(rows.length, 100);
+    for (let i = 0; i < sampleSize; i++) {
+      const row = rows[i];
+      if (!row) continue;
+      const cell = row.getVisibleCells().find((c) => c.column.id === columnId);
+      if (cell) {
+        const value = cell.getValue();
+        let cellText = "";
+        if (value !== null && value !== void 0) {
+          cellText = String(value);
+        }
+        if (cellText) {
+          measureDiv.textContent = cellText;
+          const width = measureDiv.offsetWidth + 48;
+          maxWidth = Math.max(maxWidth, width);
+        }
+      }
+    }
+    return maxWidth || 150;
+  }
+  function measureAllColumnsContentWidth(columnIds) {
+    if (!tableRef.value) return {};
+    const measureDiv = document.createElement("div");
+    measureDiv.style.cssText = "position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap;";
+    document.body.appendChild(measureDiv);
+    const widths = {};
+    try {
+      for (const columnId of columnIds) {
+        widths[columnId] = measureSingleColumnWidth(columnId, measureDiv);
+      }
+    } finally {
+      document.body.removeChild(measureDiv);
+    }
+    return widths;
+  }
+  function measureColumnContentWidth(columnId, _columnIndex) {
+    if (!tableRef.value) return 0;
+    const measureDiv = document.createElement("div");
+    measureDiv.style.cssText = "position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap;";
+    document.body.appendChild(measureDiv);
+    try {
+      return measureSingleColumnWidth(columnId, measureDiv);
+    } finally {
+      document.body.removeChild(measureDiv);
+    }
+  }
+  const autoSize = usePropWithDefault(props, "layout", "autoSize");
+  function autoSizeColumns(mode) {
+    const effectiveMode = mode || autoSize.value;
+    if (!effectiveMode || !tableRef.value) return;
+    const visibleColumns = tableApi.getVisibleLeafColumns();
+    const skipColumns = props.skipAutoSizeColumns || [];
+    const newSizing = {};
+    const columnsToMeasure = visibleColumns.filter((column) => !skipColumns.includes(column.id)).map((column) => column.id);
+    const measuredWidths = measureAllColumnsContentWidth(columnsToMeasure);
+    const columnWidths = visibleColumns.map((column) => {
+      if (skipColumns.includes(column.id)) {
+        return { id: column.id, width: column.getSize(), skip: true };
+      }
+      const minSize = column.columnDef.minSize ?? 20;
+      const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+      const measuredWidth = measuredWidths[column.id] || 150;
+      const constrainedWidth = Math.max(minSize, Math.min(measuredWidth, maxSize));
+      return { id: column.id, width: constrainedWidth, skip: false };
+    });
+    const totalContentWidth = columnWidths.reduce((sum, col) => sum + col.width, 0);
+    if (effectiveMode === "fitGrid" && tableRef.value) {
+      const containerWidth = tableRef.value.offsetWidth;
+      if (totalContentWidth < containerWidth && totalContentWidth > 0) {
+        const scaleFactor = containerWidth / totalContentWidth;
+        columnWidths.forEach((col) => {
+          if (!col.skip) {
+            const column = tableApi.getColumn(col.id);
+            if (column) {
+              const scaledWidth = col.width * scaleFactor;
+              const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+              newSizing[col.id] = Math.min(scaledWidth, maxSize);
+            }
+          }
+        });
+      } else {
+        columnWidths.forEach((col) => {
+          if (!col.skip) {
+            newSizing[col.id] = col.width;
+          }
+        });
+      }
+    } else {
+      columnWidths.forEach((col) => {
+        if (!col.skip) {
+          newSizing[col.id] = col.width;
+        }
+      });
+    }
+    if (Object.keys(newSizing).length > 0) {
+      tableApi.setColumnSizing((old) => ({
+        ...old,
+        ...newSizing
+      }));
+    }
+  }
+  function autoSizeColumn(columnId) {
+    const column = tableApi.getColumn(columnId);
+    if (!column) return;
+    const skipColumns = props.skipAutoSizeColumns || [];
+    if (skipColumns.includes(columnId)) return;
+    const visibleColumns = tableApi.getVisibleLeafColumns();
+    const columnIndex = visibleColumns.findIndex((col) => col.id === columnId);
+    if (columnIndex === -1) return;
+    const minSize = column.columnDef.minSize ?? 20;
+    const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+    const measuredWidth = measureColumnContentWidth(columnId, columnIndex);
+    const constrainedWidth = Math.max(minSize, Math.min(measuredWidth, maxSize));
+    tableApi.setColumnSizing((old) => ({
+      ...old,
+      [columnId]: constrainedWidth
+    }));
+  }
+  const debouncedAutosize = useDebounceFn(() => {
+    autoSizeColumns();
+  }, 100);
+  watch(
+    [() => props.data, autoSize],
+    () => {
+      if (autoSize.value) {
+        nextTick(debouncedAutosize);
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  return {
+    autoSizeColumns,
+    autoSizeColumn
+  };
+}

package/dist/runtime/composables/_internal/useNuGridCellEditing.d.ts

@@ -0,0 +1,15 @@
+import type { TableData } from '@nuxt/ui';
+import type { Column, Row, Table } from '@tanstack/vue-table';
+import type { ComponentPublicInstance, Ref } from 'vue';
+import type { NuGridEventEmitter, NuGridProps } from '../../types/index.js';
+import type { NuGridAddRowContext, NuGridCellEditing, NuGridEditingCell, NuGridFocus, NuGridInteractionRouter } from '../../types/_internal/index.js';
+export declare const defaultValidationIcon: string;
+/**
+ * Cell editing management with inline editing support
+ */
+export declare function useNuGridCellEditing<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>, data: Ref<T[]>, rows: Ref<Row<T>[]>, tableRef: Ref<HTMLElement | null>, rootRef: Ref<HTMLElement | ComponentPublicInstance | null | undefined>, focusFns: NuGridFocus<T>, interactionRouter: NuGridInteractionRouter<T> | undefined, emit: (payload: {
+    row: Row<T>;
+    column: Column<T, any>;
+    oldValue: any;
+    newValue: any;
+}) => void, navigableRows?: Ref<Row<T>[]> | null, externalEditingCell?: Ref<NuGridEditingCell | null>, addRowContext?: NuGridAddRowContext<T> | null, eventEmitter?: NuGridEventEmitter<T>): NuGridCellEditing<T>;