@nu-grid/nuxt 0.1.1

package/dist/runtime/utils/excelExport.js

@@ -0,0 +1,297 @@
+import writeXlsxFile from "write-excel-file";
+function getCellValue(row, column) {
+  const key = column.accessorKey || column.id;
+  if (!key) return void 0;
+  if (key.includes(".")) {
+    return key.split(".").reduce((obj, k) => obj?.[k], row);
+  }
+  return row[key];
+}
+function formatCellForExcel(value, cellDataType) {
+  if (value === null || value === void 0) {
+    return { value: "", type: String };
+  }
+  switch (cellDataType) {
+    case "date":
+      if (typeof value === "string") {
+        const date = new Date(value);
+        if (!Number.isNaN(date.getTime())) {
+          return { value: date, type: Date, format: "yyyy-mm-dd" };
+        }
+      }
+      return { value: String(value), type: String };
+    case "boolean":
+      return { value: value ? "Yes" : "No", type: String };
+    case "currency":
+      if (typeof value === "number") {
+        return { value, type: Number, format: "$#,##0.00" };
+      }
+      return { value: String(value), type: String };
+    case "number":
+      if (typeof value === "number") {
+        return { value, type: Number };
+      }
+      if (typeof value === "string") {
+        const num = Number.parseFloat(value);
+        if (!Number.isNaN(num)) {
+          return { value: num, type: Number };
+        }
+      }
+      return { value: String(value), type: String };
+    case "lookup":
+      if (typeof value === "object" && value !== null) {
+        const label = value.label || value.value;
+        return { value: String(label ?? value), type: String };
+      }
+      return { value: String(value), type: String };
+    default:
+      if (typeof value === "object") {
+        return { value: JSON.stringify(value), type: String };
+      }
+      return { value: String(value), type: String };
+  }
+}
+function getDisplayWidth(value, cellDataType) {
+  if (value === null || value === void 0 || value === "") {
+    return 0;
+  }
+  switch (cellDataType) {
+    case "date":
+      return 10;
+    // yyyy-mm-dd
+    case "currency":
+      if (typeof value === "number") {
+        const formatted = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD"
+        }).format(value);
+        return formatted.length;
+      }
+      return String(value).length;
+    case "number":
+      return String(value).length;
+    case "boolean":
+      return 3;
+    // "Yes" or "No"
+    default:
+      return String(value).length;
+  }
+}
+function calculateColumnWidth(header, values, cellDataType) {
+  const headerLength = header.length;
+  const maxValueLength = values.reduce((max, val) => {
+    const displayLen = getDisplayWidth(val, cellDataType);
+    return Math.max(max, displayLen);
+  }, 0);
+  const isTextType = !cellDataType || cellDataType === "text" || cellDataType === "textarea";
+  const multiplier = isTextType ? 1.2 : 1;
+  const maxWidth = isTextType ? 80 : 50;
+  const baseWidth = Math.max(headerLength, maxValueLength);
+  return Math.min(Math.ceil(baseWidth * multiplier) + 2, maxWidth);
+}
+function getColumnInfo(tableColumn, columnDefinitions) {
+  const colId = tableColumn.id;
+  const colDef = tableColumn.columnDef;
+  const cellDataType = colDef.cellDataType;
+  if (cellDataType === "selection" || cellDataType === "action-menu") {
+    return null;
+  }
+  const originalCol = columnDefinitions.find(
+    (c) => c.accessorKey === colId || c.id === colId
+  );
+  let header = colId;
+  if (typeof colDef.header === "string") {
+    header = colDef.header;
+  } else if (originalCol && typeof originalCol.header === "string") {
+    header = originalCol.header;
+  }
+  return {
+    id: colId,
+    header,
+    accessorKey: colDef.accessorKey || colId,
+    cellDataType: originalCol?.cellDataType || cellDataType
+  };
+}
+export async function exportToExcel(tableApi, columns, options = {}) {
+  const {
+    filename = "export",
+    sheetName = "Sheet1",
+    includeHeaders = true,
+    visibleColumnsOnly = true,
+    columnWidths = {}
+  } = options;
+  const tableColumns = visibleColumnsOnly ? tableApi.getVisibleLeafColumns() : tableApi.getAllLeafColumns();
+  const exportColumns = [];
+  for (const tableCol of tableColumns) {
+    const colInfo = getColumnInfo(tableCol, columns);
+    if (colInfo) {
+      exportColumns.push(colInfo);
+    }
+  }
+  const rows = tableApi.getSortedRowModel().rows.map((r) => r.original);
+  const data = [];
+  if (includeHeaders) {
+    const headerRow = exportColumns.map((col) => ({
+      value: col.header,
+      type: String,
+      fontWeight: "bold"
+    }));
+    data.push(headerRow);
+  }
+  for (const row of rows) {
+    const rowData = exportColumns.map((col) => {
+      const rawValue = getCellValue(row, col);
+      return formatCellForExcel(rawValue, col.cellDataType);
+    });
+    data.push(rowData);
+  }
+  const columnWidthsArray = exportColumns.map((col) => {
+    if (columnWidths[col.id]) {
+      return { width: columnWidths[col.id] };
+    }
+    const columnValues = rows.map((row) => getCellValue(row, col));
+    const width = calculateColumnWidth(col.header, columnValues, col.cellDataType);
+    return { width };
+  });
+  await writeXlsxFile(data, {
+    columns: columnWidthsArray,
+    fileName: `${filename}.xlsx`,
+    sheet: sheetName
+  });
+}
+function processGroupedRows(rows, exportColumns, options, depth = 0) {
+  const result = [];
+  for (const row of rows) {
+    if (row.getIsGrouped?.()) {
+      if (options.includeGroupHeaders) {
+        const groupColumnId = row.groupingColumnId;
+        const groupValue = row.getGroupingValue?.(groupColumnId);
+        const count = row.subRows?.length ?? 0;
+        let headerText = options.groupHeaderFormat.replace("{groupName}", groupColumnId).replace("{groupValue}", String(groupValue ?? "Unknown")).replace("{count}", String(count));
+        if (depth > 0) {
+          headerText = " ".repeat(options.groupIndent * depth) + headerText;
+        }
+        const groupRow = exportColumns.map((_, index) => {
+          if (index === 0) {
+            return {
+              value: headerText,
+              type: String,
+              fontWeight: "bold",
+              backgroundColor: "#E8E8E8"
+            };
+          }
+          return {
+            value: "",
+            type: String,
+            backgroundColor: "#E8E8E8"
+          };
+        });
+        result.push(groupRow);
+      }
+      if (row.subRows && row.subRows.length > 0) {
+        const subRowsData = processGroupedRows(row.subRows, exportColumns, options, depth + 1);
+        result.push(...subRowsData);
+      }
+    } else {
+      const indent = options.includeGroupHeaders && depth > 0 ? " ".repeat(options.groupIndent * depth) : "";
+      const rowData = exportColumns.map((col, index) => {
+        const rawValue = getCellValue(row.original, col);
+        const cell = formatCellForExcel(rawValue, col.cellDataType);
+        if (index === 0 && indent && cell && typeof cell.value === "string") {
+          return { ...cell, value: indent + cell.value };
+        }
+        return cell;
+      });
+      result.push(rowData);
+    }
+  }
+  return result;
+}
+export async function exportGroupedToExcel(tableApi, columns, options = {}) {
+  const {
+    filename = "export",
+    sheetName = "Sheet1",
+    includeHeaders = true,
+    visibleColumnsOnly = true,
+    columnWidths = {},
+    includeGroupHeaders = true,
+    groupIndent = 2,
+    groupHeaderFormat = "{groupName}: {groupValue} ({count})"
+  } = options;
+  const tableColumns = visibleColumnsOnly ? tableApi.getVisibleLeafColumns() : tableApi.getAllLeafColumns();
+  const exportColumns = [];
+  for (const tableCol of tableColumns) {
+    const colInfo = getColumnInfo(tableCol, columns);
+    if (colInfo) {
+      exportColumns.push(colInfo);
+    }
+  }
+  const data = [];
+  if (includeHeaders) {
+    const headerRow = exportColumns.map((col) => ({
+      value: col.header,
+      type: String,
+      fontWeight: "bold"
+    }));
+    data.push(headerRow);
+  }
+  const rowModel = tableApi.getRowModel();
+  const groupedData = processGroupedRows(
+    rowModel.rows,
+    exportColumns,
+    { includeGroupHeaders, groupIndent, groupHeaderFormat },
+    0
+  );
+  data.push(...groupedData);
+  const allRows = tableApi.getSortedRowModel().rows.map((r) => r.original);
+  const columnWidthsArray = exportColumns.map((col) => {
+    if (columnWidths[col.id]) {
+      return { width: columnWidths[col.id] };
+    }
+    const columnValues = allRows.map((row) => getCellValue(row, col));
+    const width = calculateColumnWidth(col.header, columnValues, col.cellDataType);
+    return { width };
+  });
+  await writeXlsxFile(data, {
+    columns: columnWidthsArray,
+    fileName: `${filename}.xlsx`,
+    sheet: sheetName
+  });
+}
+export async function exportDataToExcel(data, columns, options = {}) {
+  const {
+    filename = "export",
+    sheetName = "Sheet1",
+    includeHeaders = true,
+    columnWidths = {}
+  } = options;
+  const excelData = [];
+  if (includeHeaders) {
+    const headerRow = columns.map((col) => ({
+      value: col.header,
+      type: String,
+      fontWeight: "bold"
+    }));
+    excelData.push(headerRow);
+  }
+  for (const row of data) {
+    const rowData = columns.map((col) => {
+      const rawValue = row[col.key];
+      return formatCellForExcel(rawValue, col.cellDataType);
+    });
+    excelData.push(rowData);
+  }
+  const columnWidthsArray = columns.map((col) => {
+    if (columnWidths[col.key]) {
+      return { width: columnWidths[col.key] };
+    }
+    const columnValues = data.map((row) => row[col.key]);
+    const width = calculateColumnWidth(col.header, columnValues, col.cellDataType);
+    return { width };
+  });
+  await writeXlsxFile(excelData, {
+    columns: columnWidthsArray,
+    fileName: `${filename}.xlsx`,
+    sheet: sheetName
+  });
+}

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './columnHelper.js';
+export * from './standardSchema.js';

package/dist/runtime/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./columnHelper.js";
+export * from "./standardSchema.js";

package/dist/runtime/utils/standardSchema.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Standard Schema v1 utilities for NuGrid validation
+ * @see https://standardschema.dev
+ */
+import type { NuGridValidationResult } from '../types/cells.js';
+export type { NuGridValidationResult };
+/**
+ * Standard Schema v1 interfaces
+ */
+export interface StandardSchemaV1<Input = unknown, Output = Input> {
+    readonly '~standard': StandardSchemaV1Props<Input, Output>;
+}
+export interface StandardSchemaV1Props<Input = unknown, Output = Input> {
+    readonly version: 1;
+    readonly vendor: string;
+    readonly validate: (value: unknown, options?: StandardSchemaV1Options | undefined) => StandardSchemaV1Result<Output> | Promise<StandardSchemaV1Result<Output>>;
+    readonly types?: {
+        readonly input: Input;
+        readonly output: Output;
+    };
+}
+export interface StandardSchemaV1Options {
+    /** Explicit support for additional vendor-specific parameters, if needed. */
+    readonly libraryOptions?: Record<string, unknown> | undefined;
+}
+export type StandardSchemaV1Result<Output> = StandardSchemaV1SuccessResult<Output> | StandardSchemaV1FailureResult;
+export interface StandardSchemaV1SuccessResult<Output> {
+    readonly value: Output;
+    readonly issues?: undefined;
+}
+export interface StandardSchemaV1FailureResult {
+    readonly issues: ReadonlyArray<StandardSchemaV1Issue>;
+}
+export interface StandardSchemaV1Issue {
+    readonly message: string;
+    readonly path?: ReadonlyArray<PropertyKey | StandardSchemaV1PathSegment> | undefined;
+}
+export interface StandardSchemaV1PathSegment {
+    readonly key: PropertyKey;
+}
+/**
+ * Type inference helpers
+ */
+export type InferInput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['input'];
+export type InferOutput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['output'];
+/**
+ * Split a path string like "foo.bar.baz" or "foo[0].bar" into segments
+ */
+export declare function splitPath(path: string): (string | number)[];
+/**
+ * Get a value at a path from an object
+ */
+export declare function getValueAtPath(obj: any, path: (string | number)[]): any;
+/**
+ * Set a value at a path in an object, returning a new object
+ */
+export declare function setValueAtPath<T extends Record<string, any>>(obj: T, path: (string | number)[], value: any): T;
+/**
+ * Check if a schema is a Standard Schema v1
+ */
+export declare function isStandardSchema(schema: unknown): schema is StandardSchemaV1;
+/**
+ * Validate a value against a Standard Schema
+ * Returns a normalized result suitable for NuGrid
+ * Supports both sync and async schema validation
+ */
+export declare function validateStandardValue<T>(schema: StandardSchemaV1<T>, value: unknown): NuGridValidationResult | Promise<NuGridValidationResult>;
+/**
+ * Validate a single field value against a schema
+ * This validates the entire row with the candidate value and filters to field-specific errors
+ * Supports both sync and async schema validation
+ */
+export declare function validateFieldValue<T>(schema: StandardSchemaV1<T>, fieldPath: (string | number)[], value: unknown, fullRowData?: Record<string, any>): NuGridValidationResult | Promise<NuGridValidationResult>;
+/**
+ * Format validation issues into a user-friendly message
+ */
+export declare function formatStandardSchemaIssues(issues: StandardSchemaV1Issue[]): string;

package/dist/runtime/utils/standardSchema.js

@@ -0,0 +1,141 @@
+export function splitPath(path) {
+  if (!path) return [];
+  const segments = [];
+  let current = "";
+  let i = 0;
+  while (i < path.length) {
+    const char = path[i];
+    if (char === ".") {
+      if (current) {
+        segments.push(current);
+        current = "";
+      }
+      i++;
+    } else if (char === "[") {
+      if (current) {
+        segments.push(current);
+        current = "";
+      }
+      i++;
+      let bracketContent = "";
+      while (i < path.length && path[i] !== "]") {
+        bracketContent += path[i];
+        i++;
+      }
+      if (i < path.length) i++;
+      const numIndex = Number.parseInt(bracketContent, 10);
+      if (!Number.isNaN(numIndex) && String(numIndex) === bracketContent) {
+        segments.push(numIndex);
+      } else {
+        segments.push(bracketContent.replace(/^['"]|['"]$/g, ""));
+      }
+    } else {
+      current += char;
+      i++;
+    }
+  }
+  if (current) {
+    segments.push(current);
+  }
+  return segments;
+}
+export function getValueAtPath(obj, path) {
+  let current = obj;
+  for (const segment of path) {
+    if (current == null) return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+export function setValueAtPath(obj, path, value) {
+  if (path.length === 0) return value;
+  const result = Array.isArray(obj) ? [...obj] : { ...obj };
+  let current = result;
+  const lastIndex = path.length - 1;
+  for (let i = 0; i < lastIndex; i++) {
+    const segment = path[i];
+    const nextSegment = path[i + 1];
+    if (current[segment] == null) {
+      current[segment] = typeof nextSegment === "number" ? [] : {};
+    } else {
+      current[segment] = Array.isArray(current[segment]) ? [...current[segment]] : { ...current[segment] };
+    }
+    current = current[segment];
+  }
+  const lastSegment = path[lastIndex];
+  current[lastSegment] = value;
+  return result;
+}
+export function isStandardSchema(schema) {
+  return schema != null && typeof schema === "object" && "~standard" in schema && typeof schema["~standard"]?.validate === "function";
+}
+function toNuGridResult(result) {
+  if (result.issues && result.issues.length > 0) {
+    return {
+      valid: false,
+      message: result.issues[0]?.message || "Validation failed",
+      issues: result.issues
+    };
+  }
+  return { valid: true };
+}
+export function validateStandardValue(schema, value) {
+  try {
+    const result = schema["~standard"].validate(value);
+    if (result instanceof Promise) {
+      return result.then(toNuGridResult).catch((error) => ({
+        valid: false,
+        message: error instanceof Error ? error.message : "Validation error"
+      }));
+    }
+    return toNuGridResult(result);
+  } catch (error) {
+    return {
+      valid: false,
+      message: error instanceof Error ? error.message : "Validation error"
+    };
+  }
+}
+function filterIssuesForField(issues, fieldPath) {
+  const fieldPathStr = fieldPath.join(".");
+  return issues.filter((issue) => {
+    if (!issue.path || issue.path.length === 0) return false;
+    const issuePath = issue.path.map((p) => typeof p === "object" && "key" in p ? p.key : p).join(".");
+    return issuePath === fieldPathStr || issuePath.startsWith(`${fieldPathStr}.`);
+  });
+}
+function processFieldValidationResult(result, fieldPath) {
+  if (!result.valid && result.issues) {
+    const relevantIssues = filterIssuesForField(result.issues, fieldPath);
+    if (relevantIssues.length > 0) {
+      return {
+        valid: false,
+        message: relevantIssues[0]?.message || "Validation failed",
+        issues: relevantIssues
+      };
+    }
+    return { valid: true };
+  }
+  return result;
+}
+export function validateFieldValue(schema, fieldPath, value, fullRowData) {
+  if (fullRowData) {
+    const candidateRow = setValueAtPath(fullRowData, fieldPath, value);
+    const result = validateStandardValue(schema, candidateRow);
+    if (result instanceof Promise) {
+      return result.then((r) => processFieldValidationResult(r, fieldPath));
+    }
+    return processFieldValidationResult(result, fieldPath);
+  }
+  return validateStandardValue(schema, value);
+}
+export function formatStandardSchemaIssues(issues) {
+  if (!issues || issues.length === 0) return "Validation failed";
+  return issues.map((issue) => {
+    if (issue.path && issue.path.length > 0) {
+      const pathStr = issue.path.map((p) => typeof p === "object" && "key" in p ? p.key : p).join(".");
+      return `${pathStr}: ${issue.message}`;
+    }
+    return issue.message;
+  }).join("; ");
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@nu-grid/nuxt",
+  "type": "module",
+  "version": "0.1.1",
+  "packageManager": "pnpm@10.21.0",
+  "description": "A powerful data grid component for Nuxt with virtualization, cell editing, and TanStack Table integration",
+  "license": "MIT",
+  "homepage": "https://www.nu-grid.dev",
+  "repository": "https://github.com/nu-grid/nu-grid-nuxt",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs",
+      "style": "./src/runtime/index.css"
+    },
+    "./types": {
+      "types": "./dist/runtime/types/index.d.ts",
+      "import": "./dist/runtime/types/index.js"
+    },
+    "./themes": {
+      "types": "./dist/runtime/themes/index.d.ts",
+      "import": "./dist/runtime/themes/index.js"
+    },
+    "./cells": {
+      "types": "./dist/runtime/types/cells.d.ts",
+      "import": "./dist/runtime/types/cells.js"
+    }
+  },
+  "style": "./src/runtime/index.css",
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ],
+      "types": [
+        "./dist/runtime/types/index.d.ts"
+      ],
+      "themes": [
+        "./dist/runtime/themes/index.d.ts"
+      ],
+      "cells": [
+        "./dist/runtime/types/cells.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm run dev:prepare && pnpm run prepack",
+    "prepack": "nuxt-module-build build",
+    "dev": "pnpm run dev:prepare && nuxi dev playgrounds/nuxt",
+    "dev:build": "nuxi build playgrounds/nuxt",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playgrounds/nuxt",
+    "docs": "nuxt dev docs --uiDev",
+    "docs:build": "nuxt build docs",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write .",
+    "docs:sync-defaults": "tsx scripts/sync-default-docs.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:types": "vue-tsc --noEmit && cd playgrounds/nuxt && vue-tsc --noEmit",
+    "typecheck": "nuxi typecheck",
+    "typecheck:playground": "nuxi typecheck playgrounds/nuxt",
+    "typecheck:tests": "vue-tsc --noEmit -p tsconfig.test.json --skipLibCheck 2>&1 | grep -E 'test/.*\\.ts'",
+    "netlify-build": "pnpm run dev:prepare && pnpm run prepack && pnpm run docs:build",
+    "clean": "rm -rf node_modules dist .nuxt .output coverage playgrounds/nuxt/.nuxt playgrounds/nuxt/.output playgrounds/nuxt/node_modules docs/.nuxt docs/.output docs/node_modules"
+  },
+  "peerDependencies": {
+    "@nuxt/ui": "^4.0.0",
+    "@vueuse/nuxt": "^13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "write-excel-file": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@nuxt/kit": "catalog:",
+    "@tanstack/vue-table": "catalog:",
+    "defu": "catalog:",
+    "tailwind-scrollbar": "catalog:"
+  },
+  "optionalDependencies": {
+    "write-excel-file": "^2.3.10"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "catalog:",
+    "@nuxt/devtools": "catalog:",
+    "@nuxt/eslint": "catalog:",
+    "@nuxt/module-builder": "catalog:",
+    "@nuxt/schema": "catalog:",
+    "@nuxt/test-utils": "catalog:",
+    "@nuxt/ui": "catalog:",
+    "@playwright/test": "catalog:",
+    "@types/node": "catalog:",
+    "@vitest/ui": "catalog:",
+    "@vue/test-utils": "catalog:",
+    "@vueuse/nuxt": "catalog:",
+    "eslint": "catalog:",
+    "eslint-config-prettier": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
+    "happy-dom": "catalog:",
+    "nuxt": "catalog:",
+    "prettier": "catalog:",
+    "prettier-plugin-classnames": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:",
+    "vue-tsc": "catalog:"
+  }
+}