@nu-grid/nuxt 0.1.1

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

@@ -0,0 +1,243 @@
+import { useCookie } from "#imports";
+import { StorageSerializers, useStorage } from "@vueuse/core";
+import { nextTick, onMounted, watch } from "vue";
+export function useNuGridStatePersistence(states, enabled, storageId, onStateChanged, eventEmitter) {
+  const emitStateChanged = (state) => {
+    if (eventEmitter?.stateChanged) {
+      eventEmitter.stateChanged(state);
+    }
+    onStateChanged?.(state);
+  };
+  if (!enabled || !storageId) {
+    return {
+      getState: () => ({}),
+      setState: (_snapshot) => {
+      }
+    };
+  }
+  const storageKey = enabled && storageId ? `nugrid-state-${storageId}` : null;
+  const cookieStateRef = storageKey ? useCookie(storageKey, {
+    default: () => null,
+    sameSite: "lax",
+    path: "/"
+  }) : null;
+  const initialPersistedState = cookieStateRef?.value ?? null;
+  let storedState = null;
+  if (import.meta.client && storageKey) {
+    storedState = useStorage(storageKey, null, localStorage, {
+      serializer: StorageSerializers.object
+    });
+    if (storedState && initialPersistedState && storedState.value === null) {
+      storedState.value = initialPersistedState;
+    }
+  }
+  let isRestoring = false;
+  let watchersActive = false;
+  let initialActivationComplete = false;
+  if (initialPersistedState) {
+    applyStateSnapshot(initialPersistedState);
+    emitStateChanged(initialPersistedState);
+  }
+  if (import.meta.client && storedState) {
+    onMounted(() => {
+      const hasCookie = cookieStateRef?.value && Object.keys(cookieStateRef.value).length > 0;
+      const hasStored = storedState?.value && Object.keys(storedState.value ?? {}).length > 0;
+      if (!hasCookie && hasStored) {
+        const snapshot = storedState.value;
+        isRestoring = true;
+        applyStateSnapshot(snapshot);
+        if (cookieStateRef) {
+          cookieStateRef.value = snapshot;
+        }
+        emitStateChanged(getState());
+        nextTick(() => {
+          isRestoring = false;
+        });
+      }
+    });
+  }
+  function getState() {
+    const snapshot = {};
+    if (states.globalFilterState.value) {
+      snapshot.globalFilter = states.globalFilterState.value;
+    }
+    if (hasArray(states.columnFiltersState.value)) {
+      snapshot.columnFilters = states.columnFiltersState.value;
+    }
+    if (hasArray(states.columnOrderState.value)) {
+      snapshot.columnOrder = states.columnOrderState.value;
+    }
+    if (hasKeys(states.columnVisibilityState.value)) {
+      snapshot.columnVisibility = states.columnVisibilityState.value;
+    }
+    if (hasKeys(states.columnPinningState.value)) {
+      snapshot.columnPinning = states.columnPinningState.value;
+    }
+    if (hasKeys(states.columnSizingState.value)) {
+      snapshot.columnSizing = states.columnSizingState.value;
+    }
+    if (hasKeys(states.columnSizingInfoState.value)) {
+      snapshot.columnSizingInfo = states.columnSizingInfoState.value;
+    }
+    if (hasKeys(states.rowSelectionState.value)) {
+      snapshot.rowSelection = states.rowSelectionState.value;
+    }
+    if (hasRowPinning(states.rowPinningState.value)) {
+      snapshot.rowPinning = states.rowPinningState.value;
+    }
+    if (hasArray(states.sortingState.value)) {
+      snapshot.sorting = states.sortingState.value;
+    }
+    if (hasArray(states.groupingState.value)) {
+      snapshot.grouping = states.groupingState.value;
+    }
+    if (hasExpanded(states.expandedState.value)) {
+      snapshot.expanded = states.expandedState.value;
+    }
+    if (hasKeys(states.paginationState.value)) {
+      snapshot.pagination = states.paginationState.value;
+    }
+    return snapshot;
+  }
+  function hasArray(value) {
+    return Array.isArray(value) && value.length > 0;
+  }
+  function hasKeys(value) {
+    return !!value && Object.keys(value).length > 0;
+  }
+  function hasRowPinning(value) {
+    return !!value && ((value.top?.length ?? 0) > 0 || (value.bottom?.length ?? 0) > 0);
+  }
+  function hasExpanded(value) {
+    if (value === void 0 || value === null) return false;
+    if (value === true) return true;
+    return Object.keys(value).length > 0;
+  }
+  function applyStateSnapshot(snapshot) {
+    if (snapshot.globalFilter !== void 0) {
+      states.globalFilterState.value = snapshot.globalFilter;
+    }
+    if (snapshot.columnFilters !== void 0) {
+      states.columnFiltersState.value = snapshot.columnFilters;
+    }
+    if (snapshot.columnOrder !== void 0) {
+      states.columnOrderState.value = snapshot.columnOrder;
+    }
+    if (snapshot.columnVisibility !== void 0) {
+      states.columnVisibilityState.value = snapshot.columnVisibility;
+    }
+    if (snapshot.columnPinning !== void 0) {
+      states.columnPinningState.value = snapshot.columnPinning;
+    }
+    if (snapshot.columnSizing !== void 0) {
+      states.columnSizingState.value = snapshot.columnSizing;
+    }
+    if (snapshot.columnSizingInfo !== void 0) {
+      states.columnSizingInfoState.value = snapshot.columnSizingInfo;
+    }
+    if (snapshot.rowSelection !== void 0) {
+      states.rowSelectionState.value = snapshot.rowSelection;
+    }
+    if (snapshot.rowPinning !== void 0) {
+      states.rowPinningState.value = snapshot.rowPinning;
+    }
+    if (snapshot.sorting !== void 0) {
+      states.sortingState.value = snapshot.sorting;
+    }
+    if (snapshot.grouping !== void 0) {
+      states.groupingState.value = snapshot.grouping;
+    }
+    if (snapshot.expanded !== void 0) {
+      states.expandedState.value = snapshot.expanded;
+    }
+    if (snapshot.pagination !== void 0) {
+      states.paginationState.value = snapshot.pagination;
+    }
+  }
+  function setState(snapshot) {
+    try {
+      isRestoring = true;
+      applyStateSnapshot(snapshot);
+      emitStateChanged(getState());
+      nextTick(() => {
+        isRestoring = false;
+      });
+    } catch (error) {
+      console.warn("[NuGrid State] Failed to set state:", error);
+      isRestoring = false;
+    }
+  }
+  function saveState() {
+    if (isRestoring) {
+      return;
+    }
+    if (!watchersActive) {
+      return;
+    }
+    if (!storedState) {
+      return;
+    }
+    if (!initialActivationComplete) {
+      return;
+    }
+    try {
+      const snapshot = getState();
+      const hasState = Object.keys(snapshot).length > 0;
+      if (hasState) {
+        storedState.value = snapshot;
+        if (cookieStateRef) {
+          cookieStateRef.value = snapshot;
+        }
+      } else {
+        storedState.value = null;
+        if (cookieStateRef) {
+          cookieStateRef.value = null;
+        }
+      }
+      emitStateChanged(snapshot);
+    } catch (error) {
+      console.warn("[NuGrid State] Failed to save state:", error);
+    }
+  }
+  if (import.meta.client) {
+    const watchedRefs = [
+      states.globalFilterState,
+      states.columnFiltersState,
+      states.columnOrderState,
+      states.columnVisibilityState,
+      states.columnPinningState,
+      states.columnSizingState,
+      states.columnSizingInfoState,
+      states.rowSelectionState,
+      states.rowPinningState,
+      states.sortingState,
+      states.groupingState,
+      states.expandedState,
+      states.paginationState
+    ];
+    for (const ref of watchedRefs) {
+      watch(
+        () => ref.value,
+        () => saveState(),
+        { deep: true }
+      );
+    }
+  }
+  if (storageKey && storedState) {
+    if (import.meta.client) {
+      nextTick(() => {
+        watchersActive = true;
+        setTimeout(() => {
+          initialActivationComplete = true;
+        }, 100);
+      });
+    }
+  } else if (import.meta.client) {
+    watchersActive = true;
+    initialActivationComplete = true;
+  }
+  return {
+    getState,
+    setState
+  };
+}

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

@@ -0,0 +1,41 @@
+import type { TableData } from '@nuxt/ui';
+import type { Table } from '@tanstack/vue-table';
+import type { ComputedRef, Ref } from 'vue';
+import type { NuGridProps } from '../../types/index.js';
+import type { NuGridHoverHandler, NuGridPointerHandler } from '../../types/_internal/index.js';
+import type { NuGridColumn } from '../../types/column.js';
+interface TooltipRouterInterface {
+    registerHoverHandler: (handler: NuGridHoverHandler) => () => void;
+    registerGlobalPointerHandler: (handler: NuGridPointerHandler) => () => void;
+}
+export interface TooltipState {
+    text: string;
+    x: number;
+    y: number;
+}
+/**
+ * Lightweight shared tooltip for NuGrid
+ * Uses the interaction router for all mouse events
+ * Works for cells, headers, and any element with truncated text
+ */
+export declare function useNuGridTooltip(): {
+    tooltipState: Ref<{
+        text: string;
+        x: number;
+        y: number;
+    } | null, TooltipState | {
+        text: string;
+        x: number;
+        y: number;
+    } | null>;
+};
+interface TooltipHandlerOptions<T extends TableData = TableData> {
+    tableApi?: Ref<Table<T> | undefined>;
+    columns?: ComputedRef<NuGridColumn<T>[] | undefined>;
+}
+/**
+ * Register tooltip hover handling with the interaction router
+ * Call this once from NuGrid.vue
+ */
+export declare function useNuGridTooltipHandler<T extends TableData = TableData>(props: NuGridProps<T>, interactionRouter: TooltipRouterInterface, handlerOptions?: TooltipHandlerOptions<T>): void;
+export {};

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

@@ -0,0 +1,304 @@
+import { onUnmounted, ref } from "vue";
+import { usePropWithDefault } from "../../config/_internal/index.js";
+const tooltipState = ref(null);
+let showTimeout = null;
+let hideTimeout = null;
+let currentHoveredCell = null;
+let lastMouseX = 0;
+let lastMouseY = 0;
+export function useNuGridTooltip() {
+  return {
+    tooltipState
+  };
+}
+export function useNuGridTooltipHandler(props, interactionRouter, handlerOptions) {
+  const truncatedOnly = usePropWithDefault(props, "tooltip", "truncatedOnly");
+  const showDelay = usePropWithDefault(props, "tooltip", "showDelay");
+  const hideDelay = usePropWithDefault(props, "tooltip", "hideDelay");
+  const mouseFollow = usePropWithDefault(props, "tooltip", "mouseFollow");
+  const getOptions = () => {
+    if (props.tooltip === false) return null;
+    return {
+      truncatedOnly: truncatedOnly.value,
+      showDelay: showDelay.value,
+      hideDelay: hideDelay.value,
+      mouseFollow: mouseFollow.value
+    };
+  };
+  const getColumnDef = (columnId) => {
+    const cols = handlerOptions?.columns?.value;
+    if (!cols) return void 0;
+    return cols.find((col) => {
+      const colId = col.accessorKey || col.id;
+      return colId === columnId;
+    });
+  };
+  const getRowData = (rowId) => {
+    const tableApi = handlerOptions?.tableApi?.value;
+    if (!tableApi) return void 0;
+    const rows = tableApi.getRowModel().rows;
+    const row = rows.find((r) => r.id === rowId);
+    return row?.original;
+  };
+  function scheduleShowTooltip(text) {
+    const opts = getOptions();
+    if (!opts) return;
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      hideTimeout = null;
+    }
+    if (showTimeout) {
+      clearTimeout(showTimeout);
+      showTimeout = null;
+    }
+    if (tooltipState.value) {
+      tooltipState.value = {
+        text,
+        x: lastMouseX,
+        y: lastMouseY
+      };
+      return;
+    }
+    showTimeout = setTimeout(() => {
+      tooltipState.value = {
+        text,
+        x: lastMouseX,
+        y: lastMouseY
+      };
+      showTimeout = null;
+    }, opts.showDelay);
+  }
+  function hideTooltip() {
+    const opts = getOptions();
+    if (!opts) {
+      hideTooltipImmediate();
+      return;
+    }
+    if (showTimeout) {
+      clearTimeout(showTimeout);
+      showTimeout = null;
+    }
+    currentHoveredCell = null;
+    hideTimeout = setTimeout(() => {
+      tooltipState.value = null;
+    }, opts.hideDelay);
+  }
+  function hideTooltipImmediate() {
+    if (showTimeout) {
+      clearTimeout(showTimeout);
+      showTimeout = null;
+    }
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      hideTimeout = null;
+    }
+    tooltipState.value = null;
+    currentHoveredCell = null;
+  }
+  function findCellElement(target) {
+    let el = target;
+    while (el) {
+      if (el.hasAttribute("data-editing")) {
+        return null;
+      }
+      if (el.hasAttribute("data-column-id") && el.hasAttribute("data-cell-index")) {
+        return el;
+      }
+      if (el.hasAttribute("data-nugrid") || el.tagName === "BODY") {
+        break;
+      }
+      el = el.parentElement;
+    }
+    return null;
+  }
+  function findHeaderElement(target) {
+    let el = target;
+    while (el) {
+      if (el.hasAttribute("data-column-id") && !el.hasAttribute("data-cell-index")) {
+        if (!el.closest("[data-row-id]")) {
+          return el;
+        }
+      }
+      if (el.hasAttribute("data-nugrid") || el.tagName === "BODY") {
+        break;
+      }
+      el = el.parentElement;
+    }
+    return null;
+  }
+  function findTruncatableContent(cell) {
+    return cell.querySelector(".truncate");
+  }
+  function isTruncated(element) {
+    return element.scrollWidth > element.clientWidth;
+  }
+  function getTooltipText(element) {
+    const text = element.textContent?.trim();
+    return text || null;
+  }
+  function getCellTooltipText(cell) {
+    const columnId = cell.getAttribute("data-column-id");
+    if (!columnId) return { text: null, forceShow: false };
+    const columnDef = getColumnDef(columnId);
+    if (columnDef?.tooltipValue) {
+      const rowElement = cell.closest("[data-row-id]");
+      const rowId = rowElement?.getAttribute("data-row-id");
+      if (rowId) {
+        const rowData = getRowData(rowId);
+        if (rowData) {
+          try {
+            const text = columnDef.tooltipValue(rowData);
+            if (text) {
+              return { text, forceShow: true };
+            }
+          } catch {
+          }
+        }
+      }
+    }
+    if (columnDef?.tooltipField) {
+      const rowElement = cell.closest("[data-row-id]");
+      const rowId = rowElement?.getAttribute("data-row-id");
+      if (rowId) {
+        const rowData = getRowData(rowId);
+        if (rowData) {
+          const fieldValue = rowData[columnDef.tooltipField];
+          if (fieldValue != null) {
+            return { text: String(fieldValue), forceShow: true };
+          }
+        }
+      }
+    }
+    const truncatableContent = findTruncatableContent(cell);
+    if (truncatableContent) {
+      return { text: getTooltipText(truncatableContent), forceShow: false };
+    }
+    return { text: null, forceShow: false };
+  }
+  function getHeaderTooltipText(header) {
+    const columnId = header.getAttribute("data-column-id");
+    if (!columnId) return { text: null, forceShow: false };
+    const columnDef = getColumnDef(columnId);
+    if (columnDef?.tooltipHeaderValue) {
+      try {
+        const text = columnDef.tooltipHeaderValue();
+        if (text) {
+          return { text, forceShow: true };
+        }
+      } catch {
+      }
+    }
+    if (columnDef?.tooltipHeader) {
+      const truncatableContent2 = findTruncatableContent(header);
+      if (truncatableContent2) {
+        const text2 = getTooltipText(truncatableContent2);
+        if (text2) {
+          return { text: text2, forceShow: false };
+        }
+      }
+      const text = header.textContent?.trim();
+      if (text) {
+        return { text, forceShow: false };
+      }
+    }
+    const truncatableContent = findTruncatableContent(header);
+    if (truncatableContent) {
+      return { text: getTooltipText(truncatableContent), forceShow: false };
+    }
+    return { text: null, forceShow: false };
+  }
+  function handleHover(context) {
+    const opts = getOptions();
+    if (!opts) return;
+    const { target, type, event } = context;
+    lastMouseX = event.clientX;
+    lastMouseY = event.clientY;
+    if (type === "move") {
+      if (opts.mouseFollow && tooltipState.value) {
+        tooltipState.value = {
+          ...tooltipState.value,
+          x: lastMouseX,
+          y: lastMouseY
+        };
+      }
+      return;
+    }
+    if (type === "leave") {
+      const relatedTarget = event.relatedTarget;
+      if (!relatedTarget) {
+        hideTooltip();
+        return;
+      }
+      const newCell = findCellElement(relatedTarget);
+      const newHeader = findHeaderElement(relatedTarget);
+      if (!newCell && !newHeader) {
+        hideTooltip();
+      } else if (newCell && newCell !== currentHoveredCell) {
+        hideTooltip();
+      } else if (newHeader && newHeader !== currentHoveredCell) {
+        hideTooltip();
+      }
+      return;
+    }
+    const header = findHeaderElement(target);
+    if (header && header !== currentHoveredCell) {
+      currentHoveredCell = header;
+      const { text, forceShow } = getHeaderTooltipText(header);
+      if (text) {
+        const truncatableContent = findTruncatableContent(header);
+        const shouldShow = forceShow || truncatableContent && (!opts.truncatedOnly || isTruncated(truncatableContent));
+        if (shouldShow) {
+          scheduleShowTooltip(text);
+        } else if (tooltipState.value) {
+          hideTooltip();
+        }
+      } else if (tooltipState.value) {
+        hideTooltip();
+      }
+      return;
+    }
+    const cell = findCellElement(target);
+    if (cell && cell !== currentHoveredCell) {
+      currentHoveredCell = cell;
+      const { text, forceShow } = getCellTooltipText(cell);
+      if (text) {
+        const truncatableContent = findTruncatableContent(cell);
+        const shouldShow = forceShow || truncatableContent && (!opts.truncatedOnly || isTruncated(truncatableContent));
+        if (shouldShow) {
+          scheduleShowTooltip(text);
+        } else if (tooltipState.value) {
+          hideTooltip();
+        }
+      } else if (tooltipState.value) {
+        hideTooltip();
+      }
+    } else if (!cell && !header && currentHoveredCell) {
+      hideTooltip();
+    }
+  }
+  const unregisterHover = interactionRouter.registerHoverHandler({
+    id: "nugrid-tooltip",
+    priority: 100,
+    // Low priority - run after other handlers
+    handle: handleHover
+  });
+  const unregisterPointer = interactionRouter.registerGlobalPointerHandler({
+    id: "nugrid-tooltip-pointer",
+    priority: 100,
+    handle: () => {
+      hideTooltipImmediate();
+    }
+  });
+  onUnmounted(() => {
+    unregisterHover();
+    unregisterPointer();
+    if (showTimeout) {
+      clearTimeout(showTimeout);
+    }
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+    tooltipState.value = null;
+    currentHoveredCell = null;
+  });
+}