@nu-grid/nuxt 0.1.1

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

@@ -0,0 +1,441 @@
+import { ref } from "vue";
+function compareHandlers(a, b) {
+  if (a.priority !== b.priority) {
+    return a.priority - b.priority;
+  }
+  return a.id.localeCompare(b.id);
+}
+function insertHandler(handlers, newHandler) {
+  let left = 0;
+  let right = handlers.length;
+  while (left < right) {
+    const mid = Math.floor((left + right) / 2);
+    const comparison = compareHandlers(handlers[mid], newHandler);
+    if (comparison < 0) {
+      left = mid + 1;
+    } else {
+      right = mid;
+    }
+  }
+  handlers.splice(left, 0, newHandler);
+}
+function dispatchHandlers(handlers, context, debug = false) {
+  if (debug && handlers.length > 0) {
+    console.log(
+      `[Router] \u{1F4CB} Dispatching ${context.event.type} to ${handlers.length} handler(s):`,
+      handlers.map((h) => `${h.id}(p:${h.priority})`).join(", ")
+    );
+  }
+  for (const handler of handlers) {
+    if (handler.when && !handler.when(context)) {
+      if (debug) console.log(`[Router] \u23ED\uFE0F  Skipped: ${handler.id} (when returned false)`);
+      continue;
+    }
+    if (debug) console.log(`[Router] \u25B6\uFE0F  Executing: ${handler.id}`);
+    const result = handler.handle(context) || {};
+    if (result.preventDefault) {
+      context.event.preventDefault();
+      if (debug) console.log(`[Router] \u{1F6D1} ${handler.id} called preventDefault()`);
+    }
+    if (result.stopPropagation) {
+      context.event.stopPropagation();
+      if (debug) console.log(`[Router] \u{1F6D1} ${handler.id} called stopPropagation()`);
+    }
+    const shouldStop = Boolean(
+      result.stop || result.handled || context.event.defaultPrevented || context.event.cancelBubble
+    );
+    if (shouldStop) {
+      if (debug) {
+        const reason = result.stop ? "stop: true" : result.handled ? "handled: true" : context.event.defaultPrevented ? "defaultPrevented" : "cancelBubble";
+        console.log(`[Router] \u270B Claimed by: ${handler.id} (${reason})`);
+      }
+      return { handlerId: handler.id, stopped: true };
+    }
+  }
+  if (debug) console.log("[Router] \u2139\uFE0F  Event unclaimed - passed through all handlers");
+  return { handlerId: null, stopped: false };
+}
+export function useNuGridInteractionRouter(options = {}) {
+  const { debug = false, eventEmitter } = options;
+  const cellClickHandlers = ref([]);
+  const cellDoubleClickHandlers = ref([]);
+  const contextMenuHandlers = ref([]);
+  const wheelHandlers = ref([]);
+  const globalPointerHandlers = ref([]);
+  const hoverHandlers = ref([]);
+  const keyboardHandlers = ref([]);
+  const registeredIds = /* @__PURE__ */ new Set();
+  let removePointerListener = null;
+  let removeHoverListeners = null;
+  let removeKeyboardListener = null;
+  let removeKeyupListener = null;
+  let removeDocumentKeyboardListener = null;
+  const documentLevelHandlerIds = /* @__PURE__ */ new Set();
+  let keyboardConfig = null;
+  let gridRoot = null;
+  function registerCellClickHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(cellClickHandlers.value, handler);
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = cellClickHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        cellClickHandlers.value.splice(index, 1);
+      }
+    };
+  }
+  function routeCellClick(context) {
+    dispatchHandlers(cellClickHandlers.value, context, debug);
+    if (eventEmitter?.cellClicked) {
+      const { row, cell, event } = context;
+      eventEmitter.cellClicked({ row, column: cell.column, cell, value: cell.getValue(), event });
+    }
+    if (eventEmitter?.rowClicked) {
+      const { row, event } = context;
+      eventEmitter.rowClicked({ row, event });
+    }
+  }
+  function registerCellDoubleClickHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(cellDoubleClickHandlers.value, handler);
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = cellDoubleClickHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        cellDoubleClickHandlers.value.splice(index, 1);
+      }
+    };
+  }
+  function routeCellDoubleClick(context) {
+    dispatchHandlers(cellDoubleClickHandlers.value, context, debug);
+    if (eventEmitter?.cellDoubleClicked) {
+      const { row, cell, event } = context;
+      eventEmitter.cellDoubleClicked({
+        row,
+        column: cell.column,
+        cell,
+        value: cell.getValue(),
+        event
+      });
+    }
+    if (eventEmitter?.rowDoubleClicked) {
+      const { row, event } = context;
+      eventEmitter.rowDoubleClicked({ row, event });
+    }
+  }
+  function registerContextMenuHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(contextMenuHandlers.value, handler);
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = contextMenuHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        contextMenuHandlers.value.splice(index, 1);
+      }
+    };
+  }
+  function routeContextMenu(context) {
+    dispatchHandlers(contextMenuHandlers.value, context, debug);
+  }
+  function registerWheelHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(wheelHandlers.value, handler);
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = wheelHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        wheelHandlers.value.splice(index, 1);
+      }
+    };
+  }
+  function routeWheel(context) {
+    dispatchHandlers(wheelHandlers.value, context, debug);
+  }
+  function ensurePointerListener() {
+    if (removePointerListener || typeof document === "undefined") {
+      return;
+    }
+    const listener = (event) => {
+      if (!globalPointerHandlers.value.length) {
+        return;
+      }
+      dispatchHandlers(globalPointerHandlers.value, { event }, debug);
+    };
+    document.addEventListener("pointerdown", listener, true);
+    removePointerListener = () => {
+      document.removeEventListener("pointerdown", listener, true);
+      removePointerListener = null;
+    };
+  }
+  function registerGlobalPointerHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(globalPointerHandlers.value, handler);
+    ensurePointerListener();
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = globalPointerHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        globalPointerHandlers.value.splice(index, 1);
+      }
+      if (!globalPointerHandlers.value.length && removePointerListener) {
+        removePointerListener();
+      }
+    };
+  }
+  function handleMouseOver(event) {
+    if (!hoverHandlers.value.length) return;
+    const target = event.target;
+    dispatchHandlers(
+      hoverHandlers.value,
+      { event, target, type: "enter" },
+      debug
+    );
+  }
+  function handleMouseOut(event) {
+    if (!hoverHandlers.value.length) return;
+    const target = event.target;
+    dispatchHandlers(
+      hoverHandlers.value,
+      { event, target, type: "leave" },
+      debug
+    );
+  }
+  let pendingMoveEvent = null;
+  let moveRafId = null;
+  function handleMouseMove(event) {
+    if (!hoverHandlers.value.length) return;
+    pendingMoveEvent = event;
+    if (moveRafId === null) {
+      moveRafId = requestAnimationFrame(() => {
+        if (pendingMoveEvent) {
+          const target = pendingMoveEvent.target;
+          dispatchHandlers(
+            hoverHandlers.value,
+            { event: pendingMoveEvent, target, type: "move" },
+            debug
+          );
+          pendingMoveEvent = null;
+        }
+        moveRafId = null;
+      });
+    }
+  }
+  function ensureHoverListeners() {
+    if (removeHoverListeners || !gridRoot) return;
+    gridRoot.addEventListener("mouseover", handleMouseOver);
+    gridRoot.addEventListener("mouseout", handleMouseOut);
+    gridRoot.addEventListener("mousemove", handleMouseMove, { passive: true });
+    removeHoverListeners = () => {
+      if (gridRoot) {
+        gridRoot.removeEventListener("mouseover", handleMouseOver);
+        gridRoot.removeEventListener("mouseout", handleMouseOut);
+        gridRoot.removeEventListener("mousemove", handleMouseMove);
+      }
+      if (moveRafId !== null) {
+        cancelAnimationFrame(moveRafId);
+        moveRafId = null;
+      }
+      pendingMoveEvent = null;
+      removeHoverListeners = null;
+    };
+  }
+  function setGridRoot(el) {
+    if (removeHoverListeners) {
+      removeHoverListeners();
+    }
+    if (removeKeyboardListener) {
+      removeKeyboardListener();
+    }
+    if (removeDocumentKeyboardListener) {
+      removeDocumentKeyboardListener();
+    }
+    gridRoot = el;
+    if (gridRoot && hoverHandlers.value.length) {
+      ensureHoverListeners();
+    }
+    if (gridRoot && keyboardHandlers.value.length && keyboardConfig) {
+      ensureKeyboardListener();
+    }
+    if (gridRoot && documentLevelHandlerIds.size > 0 && keyboardConfig) {
+      ensureDocumentKeyboardListener();
+    }
+  }
+  function registerHoverHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(hoverHandlers.value, handler);
+    if (gridRoot) {
+      ensureHoverListeners();
+    }
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = hoverHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        hoverHandlers.value.splice(index, 1);
+      }
+      if (!hoverHandlers.value.length && removeHoverListeners) {
+        removeHoverListeners();
+      }
+    };
+  }
+  let cachedDocumentLevelHandlers = [];
+  function updateDocumentLevelHandlersCache() {
+    cachedDocumentLevelHandlers = keyboardHandlers.value.filter((h) => h.documentLevel);
+  }
+  function handleDocumentKeyDown(event) {
+    if (!keyboardConfig || cachedDocumentLevelHandlers.length === 0) {
+      return;
+    }
+    const context = keyboardConfig.buildContext(event);
+    if (!context) return;
+    dispatchHandlers(cachedDocumentLevelHandlers, context, debug);
+  }
+  function ensureDocumentKeyboardListener() {
+    if (removeDocumentKeyboardListener || !keyboardConfig || typeof document === "undefined") {
+      return;
+    }
+    const listener = handleDocumentKeyDown;
+    document.addEventListener("keydown", listener, true);
+    removeDocumentKeyboardListener = () => {
+      document.removeEventListener("keydown", listener, true);
+      removeDocumentKeyboardListener = null;
+    };
+  }
+  function registerKeyboardHandler(handler) {
+    if (registeredIds.has(handler.id)) {
+      throw new Error(`[Router] Handler with id "${handler.id}" already registered`);
+    }
+    registeredIds.add(handler.id);
+    insertHandler(keyboardHandlers.value, handler);
+    if (handler.documentLevel) {
+      documentLevelHandlerIds.add(handler.id);
+      updateDocumentLevelHandlersCache();
+      ensureDocumentKeyboardListener();
+    } else {
+      updateNonDocumentHandlersCache();
+    }
+    ensureKeyboardListener();
+    return () => {
+      registeredIds.delete(handler.id);
+      const index = keyboardHandlers.value.findIndex((item) => item.id === handler.id);
+      if (index !== -1) {
+        keyboardHandlers.value.splice(index, 1);
+      }
+      if (handler.documentLevel) {
+        documentLevelHandlerIds.delete(handler.id);
+        updateDocumentLevelHandlersCache();
+        if (documentLevelHandlerIds.size === 0 && removeDocumentKeyboardListener) {
+          removeDocumentKeyboardListener();
+        }
+      } else {
+        updateNonDocumentHandlersCache();
+      }
+      if (!keyboardHandlers.value.length && removeKeyboardListener) {
+        removeKeyboardListener();
+      }
+    };
+  }
+  function routeKeyboard(context) {
+    dispatchHandlers(keyboardHandlers.value, context, debug);
+  }
+  let cachedNonDocumentHandlers = [];
+  function updateNonDocumentHandlersCache() {
+    cachedNonDocumentHandlers = keyboardHandlers.value.filter((h) => !h.documentLevel);
+  }
+  function handleKeyDown(event) {
+    if (!keyboardConfig) {
+      return;
+    }
+    if (cachedNonDocumentHandlers.length === 0) {
+      return;
+    }
+    const context = keyboardConfig.buildContext(event);
+    if (!context) {
+      return;
+    }
+    dispatchHandlers(cachedNonDocumentHandlers, context, debug);
+  }
+  function ensureKeyboardListener() {
+    if (removeKeyboardListener || !keyboardConfig || !gridRoot) {
+      return;
+    }
+    const target = keyboardConfig.retainFocus ? document : gridRoot;
+    const listener = handleKeyDown;
+    target.addEventListener("keydown", listener, true);
+    removeKeyboardListener = () => {
+      target.removeEventListener("keydown", listener, true);
+      removeKeyboardListener = null;
+    };
+  }
+  function handleKeyUp(event) {
+    const context = keyboardConfig?.buildContext(event);
+    if (!context) {
+      return;
+    }
+    context.focusFns.onCellKeyUp(event);
+  }
+  function ensureKeyupListener() {
+    if (removeKeyupListener || !keyboardConfig || !gridRoot) {
+      return;
+    }
+    const target = keyboardConfig.retainFocus ? document : gridRoot;
+    const listener = handleKeyUp;
+    target.addEventListener("keyup", listener, true);
+    removeKeyupListener = () => {
+      target.removeEventListener("keyup", listener, true);
+      removeKeyupListener = null;
+    };
+  }
+  function setKeyboardConfig(config) {
+    if (removeKeyboardListener) {
+      removeKeyboardListener();
+    }
+    if (removeKeyupListener) {
+      removeKeyupListener();
+    }
+    if (removeDocumentKeyboardListener) {
+      removeDocumentKeyboardListener();
+    }
+    keyboardConfig = config;
+    if (keyboardConfig && gridRoot && keyboardHandlers.value.length) {
+      ensureKeyboardListener();
+      ensureKeyupListener();
+    }
+    if (keyboardConfig && documentLevelHandlerIds.size > 0) {
+      ensureDocumentKeyboardListener();
+    }
+  }
+  return {
+    registerCellClickHandler,
+    routeCellClick,
+    registerCellDoubleClickHandler,
+    routeCellDoubleClick,
+    registerContextMenuHandler,
+    routeContextMenu,
+    registerWheelHandler,
+    routeWheel,
+    registerGlobalPointerHandler,
+    registerHoverHandler,
+    registerKeyboardHandler,
+    routeKeyboard,
+    setKeyboardConfig,
+    setGridRoot
+  };
+}

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

@@ -0,0 +1,10 @@
+import type { TableData, TableRow } from '@nuxt/ui';
+import type { NuGridProps } from '../../types/index.js';
+/**
+ * Shared row interaction handlers
+ */
+export declare function useNuGridRowInteractions<T extends TableData>(props: NuGridProps<T>): {
+    onRowSelect: (e: Event, row: TableRow<T>) => void;
+    onRowHover: (e: Event, row: TableRow<T> | null) => void;
+    onRowContextmenu: (e: Event, row: TableRow<T>) => void;
+};

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

@@ -0,0 +1,36 @@
+export function useNuGridRowInteractions(props) {
+  function onRowSelect(e, row) {
+    if (!props.onSelect) {
+      return;
+    }
+    const target = e.target;
+    const isInteractive = target.closest("button") || target.closest("a");
+    if (isInteractive) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    props.onSelect(e, row);
+  }
+  function onRowHover(e, row) {
+    if (!props.onHover) {
+      return;
+    }
+    props.onHover(e, row);
+  }
+  function onRowContextmenu(e, row) {
+    if (!props.onContextmenu) {
+      return;
+    }
+    if (Array.isArray(props.onContextmenu)) {
+      props.onContextmenu.forEach((fn) => fn(e, row));
+    } else {
+      props.onContextmenu(e, row);
+    }
+  }
+  return {
+    onRowSelect,
+    onRowHover,
+    onRowContextmenu
+  };
+}

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

@@ -0,0 +1,54 @@
+import type { TableData } from '@nuxt/ui';
+import type { Row, Table } from '@tanstack/vue-table';
+import type { NuGridProps } from '../../types/index.js';
+/**
+ * Navigation result containing target row and column indices
+ */
+export interface NavigationTarget {
+    rowIndex: number;
+    columnIndex: number;
+}
+/**
+ * Predicate function to determine if a cell is a valid navigation target
+ * Parameters: (columnIndex, row) to match existing isColumnFocusable/isCellEditable signatures
+ */
+export type IsValidTargetFn<T> = (columnIndex: number, row: Row<T>) => boolean;
+/**
+ * Shared keyboard navigation logic for NuGrid
+ * Used by both focus and editing systems to navigate between cells
+ *
+ * @example
+ * ```typescript
+ * const nav = useNuGridKeyboardNavigation(props, tableApi)
+ *
+ * // Navigate with custom validity check
+ * const target = nav.navigateVertical('down', rowIndex, colIndex, rows, (row, col) => {
+ *   return isCellEditable(row, cells[col])
+ * })
+ * if (target) {
+ *   startEditing(rows[target.rowIndex], cells[target.columnIndex])
+ * }
+ * ```
+ */
+export declare function useNuGridKeyboardNavigation<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>): {
+    multiRowEnabled: import("vue").ComputedRef<boolean>;
+    multiRowCount: import("vue").ComputedRef<number>;
+    alignColumns: import("vue").ComputedRef<boolean>;
+    visibleColumns: import("vue").ComputedRef<import("@tanstack/table-core").Column<T, unknown>[]>;
+    getVisualRowForColumn: (columnIndex: number) => number;
+    getColumnsInVisualRow: (visualRow: number) => number[];
+    getNonPinnedColumnsInVisualRow: (visualRow: number) => number[];
+    findColumnInVisualRow: (currentColumnIndex: number, targetVisualRow: number, _row: Row<T>) => number;
+    findFirstInVisualRow: (visualRow: number, row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number | null;
+    findLastInVisualRow: (visualRow: number, row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number | null;
+    findNextInVisualRow: (startIndex: number, visualRow: number, row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number | null;
+    findPreviousInVisualRow: (startIndex: number, visualRow: number, row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number | null;
+    findFirstColumn: (row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number;
+    findLastColumn: (row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number;
+    findNextColumn: (currentIndex: number, row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number;
+    findPreviousColumn: (currentIndex: number, row: Row<T>, isValidTarget?: IsValidTargetFn<T>) => number;
+    navigateVertical: (direction: "up" | "down", currentRowIndex: number, currentColumnIndex: number, rows: Row<T>[], isValidTarget?: IsValidTargetFn<T>) => NavigationTarget | null;
+    navigateHorizontal: (direction: "left" | "right", currentRowIndex: number, currentColumnIndex: number, rows: Row<T>[], isValidTarget?: IsValidTargetFn<T>) => NavigationTarget | null;
+    navigateTab: (direction: "next" | "previous", currentRowIndex: number, currentColumnIndex: number, rows: Row<T>[], isValidTarget?: IsValidTargetFn<T>) => NavigationTarget | null;
+    navigateToEdge: (edge: "first" | "last", currentRowIndex: number, rows: Row<T>[], isValidTarget?: IsValidTargetFn<T>) => NavigationTarget | null;
+};