@nu-grid/nuxt 0.1.1

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

@@ -0,0 +1,62 @@
+import type { TableData, TableProps, TableRow } from '@nuxt/ui';
+import type { Updater, VisibilityState } from '@tanstack/vue-table';
+import type { ComponentPublicInstance, Ref } from 'vue';
+import type { NuGridActionMenuOptions, NuGridColumn, NuGridEventEmitter, NuGridProps } from '../../types/index.js';
+import type { NuGridRowSelectionMode, NuGridStates, PinnableHeader, UseNuGridColumnsReturn } from '../../types/_internal/index.js';
+/**
+ * Shared logic for processing columns with default cell renderers
+ */
+export declare function useNuGridColumns<T extends TableData>(propsColumns: Ref<NuGridColumn<T>[] | undefined>, data: Ref<T[]>, rowSelectionMode?: Ref<NuGridRowSelectionMode<T>>, actionMenuOptions?: Ref<NuGridActionMenuOptions<T> | undefined | false>, columnVisibilityState?: Ref<VisibilityState>): UseNuGridColumnsReturn<T>;
+/**
+ * Helper function to update state values
+ */
+export declare function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void;
+/**
+ * Resolve value or function
+ */
+export declare function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined;
+/**
+ * Resolve style object from string or function
+ */
+export declare function resolveStyleObject<T>(prop: string | Record<string, string> | ((arg: T) => string | Record<string, string>) | undefined, arg?: T): Record<string, string>;
+/**
+ * Determine the effective pinning state for a header.
+ * For regular columns (colSpan <= 1), returns the column's pinning state.
+ * For column groups (colSpan > 1), returns the pinning state only if ALL leaf columns
+ * share the same pinning state. Returns false for mixed pinning.
+ *
+ * This should be used for BOTH the CSS class and the inline style to ensure consistency.
+ */
+export declare function getHeaderEffectivePinning(header: PinnableHeader): false | 'left' | 'right';
+/**
+ * Calculate pinning style for a header cell.
+ * Handles both regular columns (colSpan === 1) and column group headers (colSpan > 1).
+ *
+ * For column groups, the position is calculated based on the leaf headers:
+ * - Left-pinned groups: use the first leaf header's left position
+ * - Right-pinned groups: use the last leaf header's right position
+ */
+export declare function getHeaderPinningStyle(header: PinnableHeader, options?: {
+    zIndex?: number;
+    includeZIndex?: boolean;
+}): Record<string, string | number>;
+export declare function createRowReusableTemplate<T>(): import("@vueuse/core").ReusableTemplatePair<{
+    row: TableRow<T>;
+    style?: Record<string, string>;
+    dataIndex?: number;
+    measureRef?: (el: Element | ComponentPublicInstance | null) => void;
+}, Record<"default", undefined>>;
+/**
+ * Create table API instance with all features configured
+ */
+export declare function useNuGridApi<T extends TableData>(props: NuGridProps<T> | TableProps<T>, data: Ref<T[]>, columns: Ref<NuGridColumn<T>[]>, states: NuGridStates, rowSelectionMode?: Ref<NuGridRowSelectionMode<T>>, eventEmitter?: NuGridEventEmitter<T>): import("@tanstack/table-core").Table<T>;
+/**
+ * Check if table has footer columns
+ */
+export declare function useNuGridFooter<T extends TableData>(columns: Ref<NuGridColumn<T>[]>): {
+    hasFooter: import("vue").ComputedRef<boolean>;
+};
+/**
+ * Watch for data changes
+ */
+export declare function useNuGridDataWatch<T extends TableData>(props: NuGridProps<T>, data: Ref<T[]>): void;

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

@@ -0,0 +1,359 @@
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable
+} from "@tanstack/vue-table";
+import { createReusableTemplate, reactiveOmit } from "@vueuse/core";
+import { upperFirst } from "scule";
+import { computed, watch } from "vue";
+import { nuGridDefaults } from "../../config/_internal/index.js";
+import { nuGridCellTypeRegistry } from "../useNuGridCellTypeRegistry.js";
+import { useNuGridActionMenu } from "./useNuGridActionMenu.js";
+import { useNuGridRowSelection } from "./useNuGridRowSelection.js";
+export function useNuGridColumns(propsColumns, data, rowSelectionMode, actionMenuOptions, columnVisibilityState) {
+  const rowSelection = rowSelectionMode ? useNuGridRowSelection(rowSelectionMode, columnVisibilityState) : null;
+  const actionMenu = actionMenuOptions ? useNuGridActionMenu(actionMenuOptions, columnVisibilityState) : null;
+  const columns = computed(() => {
+    const cols = propsColumns.value ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({
+      accessorKey,
+      header: upperFirst(accessorKey)
+    }));
+    let processedCols = processColumns(cols);
+    if (rowSelection) {
+      processedCols = rowSelection.prependSelectionColumn(processedCols);
+    }
+    if (actionMenu) {
+      processedCols = actionMenu.appendActionMenuColumn(processedCols);
+    }
+    return processedCols;
+  });
+  const pluginCache = /* @__PURE__ */ new Map();
+  function processColumns(columns2) {
+    return columns2.map((column) => {
+      const col = { ...column };
+      if ("columns" in col && col.columns) {
+        col.columns = processColumns(col.columns);
+      }
+      const cellDataType = col.cellDataType;
+      if (cellDataType) {
+        let plugin = pluginCache.get(cellDataType);
+        if (plugin === void 0) {
+          plugin = nuGridCellTypeRegistry.get(cellDataType);
+          pluginCache.set(cellDataType, plugin);
+        }
+        if (plugin?.defaultColumnDef) {
+          Object.assign(col, plugin.defaultColumnDef, col);
+        }
+        if (!col.cell && plugin?.defaultCellRenderer) {
+          col.cell = ({ getValue, row, column: colColumn, table }) => {
+            const context = {
+              cell: { getValue, column: colColumn },
+              row,
+              getValue,
+              column: colColumn,
+              table
+            };
+            return plugin.defaultCellRenderer(context);
+          };
+        }
+        if (!col.cell && plugin?.formatter) {
+          col.cell = ({ getValue, row, column: colColumn, table }) => {
+            const rawValue = getValue();
+            const pluginContext = {
+              cell: { getValue: () => rawValue, column: colColumn },
+              row,
+              columnDef: colColumn.columnDef,
+              column: colColumn,
+              getValue: () => rawValue,
+              isFocused: false,
+              canEdit: true,
+              data: data.value,
+              tableApi: table,
+              startEditing: () => {
+              },
+              stopEditing: () => {
+              },
+              emitChange: () => {
+              }
+            };
+            const formattedValue = plugin.formatter(rawValue, pluginContext);
+            if (formattedValue === "" || formattedValue === null || formattedValue === void 0) {
+              return "\xA0";
+            }
+            return formattedValue;
+          };
+        }
+      }
+      if (!col.cell) {
+        col.cell = ({ getValue }) => {
+          const value = getValue();
+          if (value === "" || value === null || value === void 0) {
+            return "\xA0";
+          }
+          return String(value);
+        };
+      }
+      return col;
+    });
+  }
+  return { columns, rowSelection, actionMenu };
+}
+export function valueUpdater(updaterOrValue, ref) {
+  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
+}
+export function resolveValue(prop, arg) {
+  if (typeof prop === "function") {
+    return prop(arg);
+  }
+  return prop;
+}
+export function resolveStyleObject(prop, arg) {
+  const resolved = resolveValue(prop, arg);
+  if (!resolved) return {};
+  if (typeof resolved === "string") return {};
+  return resolved;
+}
+export function getHeaderEffectivePinning(header) {
+  const pinned = header.column.getIsPinned();
+  if (!pinned) {
+    return false;
+  }
+  if (header.colSpan <= 1) {
+    return pinned;
+  }
+  const leafHeaders = header.getLeafHeaders();
+  if (leafHeaders.length === 0) {
+    return false;
+  }
+  const allSamePinning = leafHeaders.every((leaf) => leaf.column.getIsPinned() === pinned);
+  if (!allSamePinning) {
+    return false;
+  }
+  return pinned;
+}
+export function getHeaderPinningStyle(header, options = {}) {
+  const { zIndex = 20, includeZIndex = true } = options;
+  const effectivePinned = getHeaderEffectivePinning(header);
+  if (!effectivePinned) {
+    return {};
+  }
+  const buildResult = (positionStyle) => {
+    if (includeZIndex && zIndex !== void 0) {
+      return { ...positionStyle, zIndex };
+    }
+    return positionStyle;
+  };
+  if (header.colSpan <= 1) {
+    if (effectivePinned === "left") {
+      return buildResult({ left: `${header.column.getStart("left")}px` });
+    }
+    if (effectivePinned === "right") {
+      return buildResult({ right: `${header.column.getAfter("right")}px` });
+    }
+    return {};
+  }
+  const leafHeaders = header.getLeafHeaders();
+  if (leafHeaders.length === 0) {
+    return {};
+  }
+  if (effectivePinned === "left") {
+    const firstLeaf = leafHeaders[0];
+    if (!firstLeaf) return {};
+    return buildResult({ left: `${firstLeaf.column.getStart("left")}px` });
+  }
+  if (effectivePinned === "right") {
+    const lastLeaf = leafHeaders[leafHeaders.length - 1];
+    if (!lastLeaf) return {};
+    return buildResult({ right: `${lastLeaf.column.getAfter("right")}px` });
+  }
+  return {};
+}
+export function createRowReusableTemplate() {
+  return createReusableTemplate({
+    inheritAttrs: false,
+    props: {
+      row: {
+        type: Object,
+        required: true
+      },
+      style: {
+        type: Object,
+        required: false
+      },
+      dataIndex: {
+        type: Number,
+        required: false
+      },
+      measureRef: {
+        type: Function,
+        required: false
+      }
+    }
+  });
+}
+export function useNuGridApi(props, data, columns, states, rowSelectionMode, eventEmitter) {
+  const meta = computed(() => props.meta ?? {});
+  const rowSelection = rowSelectionMode ? useNuGridRowSelection(rowSelectionMode) : null;
+  const filteredProps = reactiveOmit(
+    props,
+    "as",
+    "data",
+    "columns",
+    "virtualization",
+    "caption",
+    "sticky",
+    "loading",
+    "loadingColor",
+    "loadingAnimation",
+    "class",
+    "ui"
+  );
+  const tableApi = useVueTable({
+    ...filteredProps,
+    data,
+    columns: columns.value,
+    meta: meta.value,
+    // Use rowId prop for stable row identity (required for animations)
+    // Falls back to index if the specified field is not present
+    getRowId: (originalRow, index) => {
+      const rowIdProp = props.rowId ?? nuGridDefaults.rowId;
+      if (typeof rowIdProp === "function") {
+        return rowIdProp(originalRow);
+      }
+      const id = originalRow[rowIdProp];
+      return id !== void 0 ? String(id) : String(index);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    ...props.globalFilterOptions || {},
+    onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.globalFilterState),
+    ...props.columnFiltersOptions || {},
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnFiltersChange: (updaterOrValue) => {
+      valueUpdater(updaterOrValue, states.columnFiltersState);
+      if (eventEmitter?.filterChanged) {
+        eventEmitter.filterChanged({ columnFilters: states.columnFiltersState.value });
+      }
+    },
+    onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.columnOrderState),
+    ...props.visibilityOptions || {},
+    onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.columnVisibilityState),
+    ...props.columnPinningOptions || {},
+    onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.columnPinningState),
+    ...props.columnSizingOptions || {},
+    onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.columnSizingState),
+    onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.columnSizingInfoState),
+    columnResizeMode: props.columnSizingOptions?.columnResizeMode ?? "onChange",
+    ...props.rowSelectionOptions || {},
+    get enableMultiRowSelection() {
+      return rowSelection?.enableMultiRowSelection.value ?? true;
+    },
+    get enableRowSelection() {
+      return rowSelection?.enableRowSelection.value ?? true;
+    },
+    onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.rowSelectionState),
+    ...props.rowPinningOptions || {},
+    onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.rowPinningState),
+    ...props.sortingOptions || {},
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: (updaterOrValue) => {
+      valueUpdater(updaterOrValue, states.sortingState);
+      if (eventEmitter?.sortChanged) {
+        eventEmitter.sortChanged({ sorting: states.sortingState.value });
+      }
+    },
+    // Use Tanstack's default grouping utility, can be overridden by user's groupingOptions
+    getGroupedRowModel: getGroupedRowModel(),
+    ...props.groupingOptions || {},
+    onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.groupingState),
+    ...props.expandedOptions || {},
+    getExpandedRowModel: getExpandedRowModel(),
+    onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.expandedState),
+    ...props.paginationOptions || {},
+    // Conditionally include pagination row model when paging is enabled
+    ...(() => {
+      const pagingProp = props.paging;
+      const isPaginationEnabled = pagingProp === true || typeof pagingProp === "object" && pagingProp?.enabled !== false;
+      return isPaginationEnabled ? { getPaginationRowModel: getPaginationRowModel() } : {};
+    })(),
+    onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, states.paginationState),
+    ...props.facetedOptions || {},
+    state: {
+      get globalFilter() {
+        return states.globalFilterState.value;
+      },
+      get columnFilters() {
+        return states.columnFiltersState.value;
+      },
+      get columnOrder() {
+        return states.columnOrderState.value;
+      },
+      get columnVisibility() {
+        return states.columnVisibilityState.value;
+      },
+      get columnPinning() {
+        return states.columnPinningState.value;
+      },
+      get expanded() {
+        return states.expandedState.value;
+      },
+      get rowSelection() {
+        return states.rowSelectionState.value;
+      },
+      get sorting() {
+        return states.sortingState.value;
+      },
+      get grouping() {
+        return states.groupingState.value;
+      },
+      get rowPinning() {
+        return states.rowPinningState.value;
+      },
+      get columnSizing() {
+        return states.columnSizingState.value;
+      },
+      get columnSizingInfo() {
+        return states.columnSizingInfoState.value;
+      },
+      get pagination() {
+        return states.paginationState.value;
+      }
+    }
+  });
+  watch(columns, (newColumns) => {
+    tableApi.setOptions((prev) => ({
+      ...prev,
+      columns: newColumns
+    }));
+  });
+  return tableApi;
+}
+export function useNuGridFooter(columns) {
+  const hasFooter = computed(() => {
+    function hasFooterRecursive(columns2) {
+      for (const column of columns2) {
+        if ("footer" in column && column.footer != null) {
+          return true;
+        }
+        if ("columns" in column && hasFooterRecursive(column.columns)) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return hasFooterRecursive(columns.value);
+  });
+  return { hasFooter };
+}
+export function useNuGridDataWatch(props, data) {
+  watch(
+    () => props.data,
+    () => {
+      data.value = props.data ? [...props.data] : [];
+    },
+    props.watchOptions
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { TableData } from '@nuxt/ui';
+import type { Table } from '@tanstack/vue-table';
+import type { ComputedRef, MaybeRef, ShallowRef } from 'vue';
+import type { NuGridColumn } from '../../types/index.js';
+import type { ExcelExportOptions, GroupedExcelExportOptions } from '../../utils/excelExport.js';
+export interface UseNuGridExcelOptions<T = any> {
+    /**
+     * Reference to the NuGrid component
+     */
+    tableRef: ShallowRef<{
+        tableApi: Table<T>;
+    } | null | undefined>;
+    /**
+     * Column definitions for the grid
+     */
+    columns: MaybeRef<NuGridColumn<any>[]>;
+    /**
+     * Default export options
+     */
+    defaultOptions?: ExcelExportOptions;
+}
+export interface UseNuGridExcelReturn {
+    /**
+     * Export the grid data to an Excel file
+     */
+    exportExcel: (options?: ExcelExportOptions) => Promise<void>;
+    /**
+     * Export grouped grid data to an Excel file with group headers
+     */
+    exportGroupedExcel: (options?: GroupedExcelExportOptions) => Promise<void>;
+    /**
+     * Whether export is available (table API exists)
+     */
+    canExport: ComputedRef<boolean>;
+}
+/**
+ * Composable for exporting NuGrid data to Excel
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const table = useTemplateRef('table')
+ * const columns = ref([...])
+ *
+ * const { exportExcel, canExport } = useNuGridExcel({
+ *   tableRef: table,
+ *   columns,
+ *   defaultOptions: { filename: 'my-export' }
+ * })
+ * </script>
+ *
+ * <template>
+ *   <UButton @click="exportExcel()" :disabled="!canExport">
+ *     Export to Excel
+ *   </UButton>
+ *   <NuGrid ref="table" :columns="columns" :data="data" />
+ * </template>
+ * ```
+ */
+export declare function useNuGridExcel<T extends TableData>(options: UseNuGridExcelOptions<T>): UseNuGridExcelReturn;

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

@@ -0,0 +1,35 @@
+import { defu } from "defu";
+const getExcelExport = () => import("../../utils/excelExport.js");
+export function useNuGridExcel(options) {
+  const { tableRef, columns, defaultOptions = {} } = options;
+  const canExport = computed(() => {
+    return !!tableRef.value?.tableApi;
+  });
+  const exportExcel = async (exportOptions = {}) => {
+    const tableApi = tableRef.value?.tableApi;
+    if (!tableApi) {
+      console.warn("Cannot export: table API not available");
+      return;
+    }
+    const resolvedColumns = unref(columns);
+    const mergedOptions = defu(exportOptions, defaultOptions);
+    const { exportToExcel } = await getExcelExport();
+    await exportToExcel(tableApi, resolvedColumns, mergedOptions);
+  };
+  const exportGroupedExcel = async (exportOptions = {}) => {
+    const tableApi = tableRef.value?.tableApi;
+    if (!tableApi) {
+      console.warn("Cannot export: table API not available");
+      return;
+    }
+    const resolvedColumns = unref(columns);
+    const mergedOptions = defu(exportOptions, defaultOptions);
+    const { exportGroupedToExcel } = await getExcelExport();
+    await exportGroupedToExcel(tableApi, resolvedColumns, mergedOptions);
+  };
+  return {
+    exportExcel,
+    exportGroupedExcel,
+    canExport
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { TableData } from '@nuxt/ui';
+import type { Row, Table } from '@tanstack/vue-table';
+import type { Primitive } from 'reka-ui';
+import type { Ref } from 'vue';
+import type { NuGridEventEmitter, NuGridProps } from '../../types/index.js';
+import type { NuGridEditingCell, NuGridFocus, NuGridInteractionRouter, NuGridVirtualizer } from '../../types/_internal/index.js';
+/**
+ * Cell and row focus management with keyboard navigation
+ */
+export declare function useNuGridFocus<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>, rows: Ref<Row<T>[]>, navigableRows: Ref<Row<T>[]> | null | undefined, tableRef: Ref<HTMLDivElement | null>, rootRef: Ref<InstanceType<typeof Primitive> | null | undefined> | null, virtualizedStickyHeight?: Ref<number>, virtualizer?: Ref<NuGridVirtualizer> | false, editingCell?: Ref<NuGridEditingCell | null>, interactionRouter?: NuGridInteractionRouter<T>, eventEmitter?: NuGridEventEmitter<T>, focusedRowIdModel?: Ref<string | null>): NuGridFocus<T>;
+/**
+ * Initialize focus on first cell when data loads (for keyboard navigation)
+ * Should be called after creating the focus composable
+ */
+export declare function useNuGridFocusInit<T extends TableData>(props: NuGridProps<T>, focusFns: NuGridFocus<T>, rows: Ref<Row<T>[]>): void;