@nu-grid/nuxt 0.1.1

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

@@ -0,0 +1,463 @@
+import { useElementSize } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+export class NuGridScrollManager {
+  pendingScrollFrame = null;
+  pendingResolve = null;
+  isProcessing = false;
+  tableApi;
+  pinnedLeftWidth;
+  pinnedRightWidth;
+  visibleColumns;
+  cumulativeWidthsFromRight;
+  // Cache for sticky header detection to avoid expensive DOM queries
+  cachedTableElement = null;
+  cachedHeaderElement = null;
+  isHeaderSticky = false;
+  // Dimension cache - reuse container/header measurements during rapid scrolling
+  dimensionCache = {
+    containerRect: null,
+    stickyHeaderHeight: 0,
+    visibleTop: 0,
+    visibleBottom: 0,
+    visibleLeft: 0,
+    visibleRight: 0,
+    timestamp: 0
+  };
+  constructor(tableApi, pinnedLeftWidth, pinnedRightWidth, visibleColumns, cumulativeWidthsFromRight) {
+    this.tableApi = tableApi;
+    this.pinnedLeftWidth = pinnedLeftWidth;
+    this.pinnedRightWidth = pinnedRightWidth;
+    this.visibleColumns = visibleColumns;
+    this.cumulativeWidthsFromRight = cumulativeWidthsFromRight;
+  }
+  /**
+   * Cancel any pending scroll operation
+   */
+  cancelPending(clearProcessing = true) {
+    if (this.pendingScrollFrame !== null) {
+      cancelAnimationFrame(this.pendingScrollFrame);
+      this.pendingScrollFrame = null;
+    }
+    if (this.pendingResolve) {
+      this.pendingResolve();
+      this.pendingResolve = null;
+    }
+    if (clearProcessing) {
+      this.isProcessing = false;
+    }
+  }
+  /**
+   * Check if a scroll operation is currently being processed
+   */
+  get isProcessingScroll() {
+    return this.isProcessing;
+  }
+  /**
+   * Set the processing state
+   */
+  setProcessing(value) {
+    this.isProcessing = value;
+  }
+  /**
+   * Invalidate the sticky header cache
+   * Call this if the table structure changes (e.g., headers added/removed)
+   */
+  invalidateHeaderCache() {
+    this.cachedTableElement = null;
+    this.cachedHeaderElement = null;
+    this.isHeaderSticky = false;
+  }
+  /**
+   * Invalidate dimension cache
+   * Call this when container size might have changed
+   */
+  invalidateDimensionCache() {
+    this.dimensionCache.timestamp = 0;
+  }
+  /**
+   * Get or compute container dimensions with caching
+   * Cache is valid for 30000ms (30 seconds) - invalidated manually on keyup
+   */
+  getCachedDimensions(scrollContainer, tableElement, virtualizedStickyHeight) {
+    const now = Date.now();
+    const cacheAge = now - this.dimensionCache.timestamp;
+    if (cacheAge < 3e4 && this.dimensionCache.containerRect) {
+      return {
+        containerRect: this.dimensionCache.containerRect,
+        stickyHeaderHeight: this.dimensionCache.stickyHeaderHeight,
+        visibleTop: this.dimensionCache.visibleTop,
+        visibleBottom: this.dimensionCache.visibleBottom,
+        visibleLeft: this.dimensionCache.visibleLeft,
+        visibleRight: this.dimensionCache.visibleRight
+      };
+    }
+    const containerRect = scrollContainer.getBoundingClientRect();
+    let stickyHeaderHeight = 0;
+    const multiRowHeaders = tableElement?.querySelector(
+      '[data-multi-row-headers="true"][data-sticky-header]'
+    );
+    if (multiRowHeaders) {
+      stickyHeaderHeight = multiRowHeaders.offsetHeight;
+    } else {
+      stickyHeaderHeight = this.getStickyHeaderHeight(tableElement, virtualizedStickyHeight);
+    }
+    const visibleTop = containerRect.top + stickyHeaderHeight;
+    const hasSticky = stickyHeaderHeight > 0;
+    const visibleBottom = hasSticky ? containerRect.top + scrollContainer.clientHeight : containerRect.bottom;
+    const leftPinnedWidth = this.pinnedLeftWidth.value;
+    const rightPinnedWidth = this.pinnedRightWidth.value;
+    const visibleLeft = containerRect.left + leftPinnedWidth;
+    const visibleRight = containerRect.right - rightPinnedWidth;
+    this.dimensionCache = {
+      containerRect,
+      stickyHeaderHeight,
+      visibleTop,
+      visibleBottom,
+      visibleLeft,
+      visibleRight,
+      timestamp: now
+    };
+    return {
+      containerRect,
+      stickyHeaderHeight,
+      visibleTop,
+      visibleBottom,
+      visibleLeft,
+      visibleRight
+    };
+  }
+  /**
+   * Update cached sticky header information if table element changed
+   * This avoids expensive querySelector and getComputedStyle calls on every scroll
+   */
+  updateStickyHeaderCache(tableElement) {
+    if (tableElement !== this.cachedTableElement) {
+      this.cachedTableElement = tableElement;
+      this.cachedHeaderElement = tableElement?.querySelector("[data-sticky-header]") || null;
+    }
+    this.isHeaderSticky = this.cachedHeaderElement ? window.getComputedStyle(this.cachedHeaderElement).position === "sticky" : false;
+  }
+  /**
+   * Return the sticky header height, reusing cached lookups when possible
+   */
+  getStickyHeaderHeight(tableElement, virtualizedStickyHeight) {
+    if (typeof virtualizedStickyHeight === "number") {
+      return virtualizedStickyHeight;
+    }
+    this.updateStickyHeaderCache(tableElement);
+    if (this.isHeaderSticky) {
+      return this.cachedHeaderElement?.offsetHeight || 0;
+    }
+    return 0;
+  }
+  /**
+   * Scroll horizontally to the start/end of the scroll container
+   */
+  scrollToHorizontalEdge(scrollContainer, direction, behavior = "instant") {
+    this.cancelPending();
+    return new Promise((resolve) => {
+      this.pendingResolve = resolve;
+      this.pendingScrollFrame = requestAnimationFrame(() => {
+        this.pendingScrollFrame = null;
+        this.pendingResolve = null;
+        const maxScrollLeft = Math.max(0, scrollContainer.scrollWidth - scrollContainer.clientWidth);
+        let targetLeft = direction === "start" ? 0 : maxScrollLeft;
+        if (direction === "end") {
+          const rightPinnedWidth = this.pinnedRightWidth.value;
+          if (rightPinnedWidth > 0) {
+            targetLeft = Math.min(maxScrollLeft, targetLeft + rightPinnedWidth);
+          }
+        }
+        scrollContainer.scrollTo({ left: targetLeft, behavior });
+        resolve();
+      });
+    });
+  }
+  /**
+   * Scroll vertically to the top/bottom of the scroll container
+   */
+  scrollToVerticalEdge(scrollContainer, direction, behavior = "instant") {
+    this.cancelPending();
+    return new Promise((resolve) => {
+      this.pendingResolve = resolve;
+      this.pendingScrollFrame = requestAnimationFrame(() => {
+        this.pendingScrollFrame = null;
+        this.pendingResolve = null;
+        const maxScrollTop = Math.max(
+          0,
+          scrollContainer.scrollHeight - scrollContainer.clientHeight
+        );
+        const targetTop = direction === "start" ? 0 : maxScrollTop;
+        scrollContainer.scrollTo({ top: targetTop, behavior });
+        resolve();
+      });
+    });
+  }
+  /**
+   * Scroll to make a cell visible with performance optimizations
+   * Returns a promise that resolves when scrolling is complete
+   */
+  scrollToCell(options) {
+    const {
+      cellElement,
+      scrollContainer,
+      horizontalScrollContainer,
+      tableElement,
+      rowIndex,
+      columnIndex,
+      virtualizedStickyHeight,
+      behavior = "instant",
+      verticalPadding = 15,
+      includeHeadersAbove = false,
+      skipHorizontalScroll = false,
+      verticalOnly = false
+    } = options;
+    const hScrollContainer = horizontalScrollContainer ?? scrollContainer;
+    this.cancelPending(false);
+    return new Promise((resolve) => {
+      this.pendingResolve = resolve;
+      this.pendingScrollFrame = requestAnimationFrame(() => {
+        this.pendingScrollFrame = null;
+        this.pendingResolve = null;
+        const cellRect = cellElement.getBoundingClientRect();
+        let cellTop;
+        let cellBottom;
+        let cellLeft;
+        let cellRight;
+        let cellWidth;
+        let cellHeight;
+        if (verticalOnly) {
+          cellTop = cellRect.top;
+          cellBottom = cellRect.bottom;
+          cellHeight = cellRect.height;
+          cellLeft = 0;
+          cellRight = 0;
+          cellWidth = 0;
+        } else {
+          ;
+          ({
+            top: cellTop,
+            bottom: cellBottom,
+            left: cellLeft,
+            right: cellRight,
+            width: cellWidth,
+            height: cellHeight
+          } = cellRect);
+        }
+        const cachedDims = this.getCachedDimensions(
+          scrollContainer,
+          tableElement,
+          virtualizedStickyHeight
+        );
+        const { stickyHeaderHeight, visibleTop, visibleBottom, visibleLeft, visibleRight } = cachedDims;
+        const visibleHeight = visibleBottom - visibleTop;
+        let effectiveTop = cellTop;
+        let effectiveBottom = cellBottom;
+        let effectiveCellHeight = cellHeight;
+        if (!verticalOnly) {
+          const multiRowContainer = cellElement.closest('[data-multi-row="true"]') || cellElement.closest(".nugrid-multi-row-container");
+          if (multiRowContainer) {
+            const multiRowRect = multiRowContainer.getBoundingClientRect();
+            effectiveTop = multiRowRect.top;
+            effectiveBottom = multiRowRect.bottom;
+            effectiveCellHeight = multiRowRect.height;
+          }
+        }
+        let verticalScrollAdjustment = 0;
+        const effectiveVerticalPadding = stickyHeaderHeight > 0 ? 0 : verticalPadding;
+        if (rowIndex === 0 && scrollContainer.scrollTop > 0) {
+          verticalScrollAdjustment = -scrollContainer.scrollTop;
+        }
+        if (verticalScrollAdjustment === 0 && effectiveCellHeight <= visibleHeight) {
+          const scrollMargin = 2;
+          const isCutOffTop = effectiveTop < visibleTop - scrollMargin;
+          const isCutOffBottom = effectiveBottom > visibleBottom + scrollMargin;
+          if (isCutOffTop) {
+            let targetTop = effectiveTop - effectiveVerticalPadding;
+            if (includeHeadersAbove && !virtualizedStickyHeight) {
+              const rowElement = cellElement.closest("[data-row-id]");
+              if (rowElement) {
+                let sibling = rowElement.previousElementSibling;
+                const headersToReveal = [];
+                while (sibling) {
+                  const isColumnHeader = sibling.hasAttribute("data-sticky-header") || sibling.querySelector("[data-sticky-header]");
+                  const isGroupHeader = sibling.hasAttribute("data-group-header");
+                  if (isColumnHeader || isGroupHeader) {
+                    headersToReveal.unshift(sibling);
+                    sibling = sibling.previousElementSibling;
+                  } else if (sibling.hasAttribute("data-row-id")) {
+                    break;
+                  } else {
+                    sibling = sibling.previousElementSibling;
+                  }
+                }
+                if (headersToReveal.length > 0) {
+                  const topHeaderRect = headersToReveal[0].getBoundingClientRect();
+                  targetTop = Math.min(targetTop, topHeaderRect.top - 10);
+                }
+              }
+            }
+            verticalScrollAdjustment = targetTop - visibleTop;
+            if (includeHeadersAbove) {
+              const maxScrollPerAction = 150;
+              if (verticalScrollAdjustment < -maxScrollPerAction) {
+                verticalScrollAdjustment = -maxScrollPerAction;
+              }
+            }
+          } else if (isCutOffBottom) {
+            verticalScrollAdjustment = effectiveBottom - visibleBottom + effectiveVerticalPadding;
+            const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+            const currentScroll = scrollContainer.scrollTop;
+            const newScroll = currentScroll + verticalScrollAdjustment;
+            if (newScroll > maxScroll) {
+              verticalScrollAdjustment = maxScroll - currentScroll;
+            }
+          }
+        } else if (effectiveCellHeight > visibleHeight) {
+          if (effectiveTop < visibleTop) {
+            verticalScrollAdjustment = effectiveTop - visibleTop - effectiveVerticalPadding;
+          }
+        }
+        let horizontalScrollAdjustment = 0;
+        if (!skipHorizontalScroll && !verticalOnly) {
+          const isPinnedLeft = cellElement.getAttribute("data-pinned") === "left";
+          const isPinnedRight = cellElement.getAttribute("data-pinned") === "right";
+          const isPinned = isPinnedLeft || isPinnedRight;
+          if (!isPinned) {
+            const paddedVisibleLeft = visibleLeft + 10;
+            const paddedVisibleRight = visibleRight - 10;
+            const visibleWidth = paddedVisibleRight - paddedVisibleLeft;
+            if (cellWidth <= visibleWidth) {
+              if (cellLeft < paddedVisibleLeft) {
+                horizontalScrollAdjustment = cellLeft - paddedVisibleLeft - 4;
+              } else if (cellRight > paddedVisibleRight) {
+                const totalWidthToRight = this.cumulativeWidthsFromRight.value[columnIndex] || 0;
+                const rightPinnedWidth = this.pinnedRightWidth.value;
+                if (totalWidthToRight <= visibleWidth + rightPinnedWidth) {
+                  horizontalScrollAdjustment = cellRight - paddedVisibleRight + 40;
+                } else {
+                  horizontalScrollAdjustment = cellRight - paddedVisibleRight + 8;
+                }
+              }
+            } else {
+              if (cellLeft < paddedVisibleLeft) {
+                horizontalScrollAdjustment = cellLeft - paddedVisibleLeft - 4;
+              }
+            }
+          }
+        }
+        if (verticalScrollAdjustment !== 0) {
+          scrollContainer.scrollBy({
+            top: verticalScrollAdjustment,
+            behavior
+          });
+        }
+        if (horizontalScrollAdjustment !== 0) {
+          hScrollContainer.scrollBy({
+            left: horizontalScrollAdjustment,
+            behavior
+          });
+        }
+        resolve();
+      });
+    });
+  }
+}
+function findScrollContainer(element, axis) {
+  if (!element) return null;
+  const style = window.getComputedStyle(element);
+  if (axis === "vertical") {
+    const overflowY = style.overflowY;
+    const hasOverflow = overflowY === "auto" || overflowY === "scroll";
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    if (hasOverflow && hasScrollableContent) {
+      return element;
+    }
+  } else {
+    const overflowX = style.overflowX;
+    const hasOverflow = overflowX === "auto" || overflowX === "scroll";
+    const hasScrollableContent = element.scrollWidth > element.clientWidth;
+    if (hasOverflow && hasScrollableContent) {
+      return element;
+    }
+  }
+  return element;
+}
+export function useNuGridScroll(tableApi, rootRef) {
+  const pinnedLeftWidth = computed(() => {
+    return tableApi.getLeftLeafColumns().filter((col) => col.getIsPinned() === "left").reduce((sum, col) => sum + col.getSize(), 0);
+  });
+  const pinnedRightWidth = computed(() => {
+    return tableApi.getRightLeafColumns().filter((col) => col.getIsPinned() === "right").reduce((sum, col) => sum + col.getSize(), 0);
+  });
+  const visibleColumns = computed(() => {
+    return tableApi.getAllLeafColumns().filter((col) => col.getIsVisible());
+  });
+  const cumulativeWidthsFromRight = computed(() => {
+    const cols = visibleColumns.value;
+    const widths = Array.from({ length: cols.length });
+    let cumulative = 0;
+    for (let i = cols.length - 1; i >= 0; i--) {
+      const col = cols[i];
+      if (col) {
+        cumulative += col.getSize();
+      }
+      widths[i] = cumulative;
+    }
+    return widths;
+  });
+  const scrollManager = new NuGridScrollManager(
+    tableApi,
+    pinnedLeftWidth,
+    pinnedRightWidth,
+    visibleColumns,
+    cumulativeWidthsFromRight
+  );
+  const rootElement = computed(() => {
+    if (!rootRef?.value) {
+      return null;
+    }
+    return rootRef.value.$el ?? null;
+  });
+  const scrollContainerCache = ref({
+    vertical: null,
+    horizontal: null,
+    rootElement: null
+  });
+  function updateScrollContainerCache() {
+    const root = rootElement.value;
+    scrollContainerCache.value = {
+      vertical: findScrollContainer(root, "vertical"),
+      horizontal: findScrollContainer(root, "horizontal"),
+      rootElement: root
+    };
+  }
+  const verticalScrollContainer = computed(() => {
+    const root = rootElement.value;
+    if (scrollContainerCache.value.rootElement !== root) {
+      updateScrollContainerCache();
+    }
+    return scrollContainerCache.value.vertical;
+  });
+  const horizontalScrollContainer = computed(() => {
+    const root = rootElement.value;
+    if (scrollContainerCache.value.rootElement !== root) {
+      updateScrollContainerCache();
+    }
+    return scrollContainerCache.value.horizontal;
+  });
+  const { height: observedHeight } = useElementSize(rootElement, void 0, { box: "border-box" });
+  watch(observedHeight, () => {
+    updateScrollContainerCache();
+  });
+  return {
+    scrollManager,
+    pinnedLeftWidth,
+    pinnedRightWidth,
+    visibleColumns,
+    // Scroll containers
+    verticalScrollContainer,
+    horizontalScrollContainer,
+    updateScrollContainerCache
+  };
+}

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

@@ -0,0 +1,32 @@
+import type { Ref } from 'vue';
+export interface UseNuGridScrollStateOptions {
+    /** Reference to the scrollable container element */
+    containerRef: Ref<HTMLElement | null>;
+    /** Delay in ms after scrolling stops before considering scroll "settled" (default: 150) */
+    settleDelay?: number;
+}
+export interface UseNuGridScrollStateReturn {
+    /** Whether the user is currently scrolling */
+    isScrolling: Ref<boolean>;
+    /** Whether scrolling has settled (stopped for settleDelay ms) */
+    isSettled: Ref<boolean>;
+    /** Current scroll position */
+    scrollTop: Ref<number>;
+    /** Current scroll left position */
+    scrollLeft: Ref<number>;
+    /** Viewport height of the container */
+    viewportHeight: Ref<number>;
+    /** Total scrollable height */
+    scrollHeight: Ref<number>;
+}
+/**
+ * Composable for tracking NuGrid scroll state
+ *
+ * Provides reactive scroll state including:
+ * - Whether user is actively scrolling
+ * - Whether scrolling has "settled" (stopped for a configurable delay)
+ * - Current scroll positions and viewport dimensions
+ *
+ * Used by LazyCell to defer rendering expensive content during scroll
+ */
+export declare function useNuGridScrollState(options: UseNuGridScrollStateOptions): UseNuGridScrollStateReturn;

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

@@ -0,0 +1,60 @@
+import { computed, onUnmounted, ref, watch } from "vue";
+export function useNuGridScrollState(options) {
+  const { containerRef, settleDelay = 150 } = options;
+  const isScrolling = ref(false);
+  const isSettled = ref(true);
+  const scrollTop = ref(0);
+  const scrollLeft = ref(0);
+  const viewportHeight = ref(0);
+  const scrollHeight = ref(0);
+  let scrollTimeout = null;
+  const onScroll = () => {
+    const container = containerRef.value;
+    if (!container) return;
+    scrollTop.value = container.scrollTop;
+    scrollLeft.value = container.scrollLeft;
+    viewportHeight.value = container.clientHeight;
+    scrollHeight.value = container.scrollHeight;
+    isScrolling.value = true;
+    isSettled.value = false;
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    scrollTimeout = setTimeout(() => {
+      isScrolling.value = false;
+      isSettled.value = true;
+    }, settleDelay);
+  };
+  watch(
+    containerRef,
+    (container, oldContainer) => {
+      if (oldContainer && oldContainer !== container) {
+        oldContainer.removeEventListener("scroll", onScroll);
+      }
+      if (container) {
+        container.addEventListener("scroll", onScroll, { passive: true });
+        scrollTop.value = container.scrollTop;
+        scrollLeft.value = container.scrollLeft;
+        viewportHeight.value = container.clientHeight;
+        scrollHeight.value = container.scrollHeight;
+      }
+    },
+    { immediate: true }
+  );
+  onUnmounted(() => {
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    if (containerRef.value) {
+      containerRef.value.removeEventListener("scroll", onScroll);
+    }
+  });
+  return {
+    isScrolling,
+    isSettled,
+    scrollTop,
+    scrollLeft,
+    viewportHeight: computed(() => viewportHeight.value),
+    scrollHeight: computed(() => scrollHeight.value)
+  };
+}

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

@@ -0,0 +1,24 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Ref } from 'vue';
+import type { NuGridScrollbars } from '../../types/index.js';
+export interface UseNuGridScrollbarsOptions {
+    /** NuGrid props object */
+    props: Record<string, any>;
+    containerRef: Ref<HTMLElement | null>;
+    /** Theme scrollbar class from ui slot */
+    themeClass?: Ref<ClassValue | undefined>;
+}
+export interface UseNuGridScrollbarsReturn {
+    scrollbarClass: ComputedRef<string>;
+    scrollbarThemeClass: ComputedRef<string>;
+    scrollbarAttr: ComputedRef<NuGridScrollbars>;
+}
+/**
+ * Composable for handling NuGrid scrollbar styling modes
+ *
+ * Supports three modes:
+ * - 'native': Browser default scrollbar behavior
+ * - 'hover': Show styled scrollbar on hover
+ * - 'scroll': Show styled scrollbar when scrolling (macOS-like)
+ */
+export declare function useNuGridScrollbars(options: UseNuGridScrollbarsOptions): UseNuGridScrollbarsReturn;

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

@@ -0,0 +1,69 @@
+import { computed, onUnmounted, ref, watch } from "vue";
+import { usePropWithDefault } from "../../config/_internal/index.js";
+export function useNuGridScrollbars(options) {
+  const { props, containerRef } = options;
+  const resolvedMode = usePropWithDefault(props, "layout", "scrollbars");
+  const isScrolling = ref(false);
+  let scrollTimeout = null;
+  const HIDE_DELAY = 700;
+  const onScroll = () => {
+    if (resolvedMode.value !== "scroll") return;
+    isScrolling.value = true;
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    scrollTimeout = setTimeout(() => {
+      isScrolling.value = false;
+    }, HIDE_DELAY);
+  };
+  watch(
+    [containerRef, resolvedMode],
+    ([container, currentMode], [oldContainer]) => {
+      if (oldContainer && oldContainer !== container) {
+        oldContainer.removeEventListener("scroll", onScroll);
+      }
+      if (container && currentMode === "scroll") {
+        container.addEventListener("scroll", onScroll, { passive: true });
+      }
+    },
+    { immediate: true }
+  );
+  onUnmounted(() => {
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    if (containerRef.value) {
+      containerRef.value.removeEventListener("scroll", onScroll);
+    }
+  });
+  const scrollbarClass = computed(() => {
+    if (resolvedMode.value === "scroll" && isScrolling.value) {
+      return "is-scrolling";
+    }
+    return "";
+  });
+  const scrollbarAttr = computed(() => resolvedMode.value);
+  const scrollbarThemeClass = computed(() => {
+    const currentMode = resolvedMode.value;
+    if (currentMode === "hover") {
+      const themeValue = options.themeClass?.value;
+      if (!themeValue) return "";
+      if (typeof themeValue === "string") return themeValue;
+      if (Array.isArray(themeValue)) return themeValue.filter(Boolean).join(" ");
+      return "";
+    }
+    if (currentMode === "scroll") {
+      const base = "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-rounded";
+      if (isScrolling.value) {
+        return `${base} scrollbar-thumb-gray-400/50 dark:scrollbar-thumb-gray-500/50`;
+      }
+      return `${base} scrollbar-thumb-transparent`;
+    }
+    return "";
+  });
+  return {
+    scrollbarClass,
+    scrollbarThemeClass,
+    scrollbarAttr
+  };
+}

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

@@ -0,0 +1,27 @@
+import type { TableData } from '@nuxt/ui';
+import type { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { NuGridEventEmitter } from '../../types/index.js';
+import type { NuGridStates } from '../../types/_internal/index.js';
+export interface NuGridStateSnapshot {
+    globalFilter?: string;
+    columnFilters?: ColumnFiltersState;
+    columnOrder?: ColumnOrderState;
+    columnVisibility?: VisibilityState;
+    columnPinning?: ColumnPinningState;
+    columnSizing?: ColumnSizingState;
+    columnSizingInfo?: ColumnSizingInfoState;
+    rowSelection?: RowSelectionState;
+    rowPinning?: RowPinningState;
+    sorting?: SortingState;
+    grouping?: GroupingState;
+    expanded?: ExpandedState;
+    pagination?: PaginationState;
+}
+/**
+ * Composable for persisting and restoring NuGrid state to/from localStorage and cookies
+ * Handles all state initialization, restoration, and persistence logic
+ */
+export declare function useNuGridStatePersistence<T extends TableData = TableData>(states: NuGridStates, enabled: boolean, storageId: string | undefined, onStateChanged?: (state: NuGridStateSnapshot) => void, eventEmitter?: NuGridEventEmitter<T>): {
+    getState: () => {};
+    setState: (_snapshot: NuGridStateSnapshot) => void;
+};