@inandu-solutions/grid-vue 0.0.0-stage → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { default as InanduGrid } from './components/InanduGrid.vue';
+export type { InanduGridCellRangeSelection } from './components/types';
+export { useInanduGrid } from './composables/useInanduGrid';
+export { useInanduGridServer, buildInanduGridQuery } from './composables/useInanduGridServer';
+export type { InanduGridServerOptions, InanduGridServerResult, InanduGridQueryOptions, } from './composables/useInanduGridServer';
+export type { InanduGridServerQuery, InanduGridApi, InanduGridCellPaste, InanduGridColumn, InanduGridGroup, InanduGridRowSave, InanduGridSort, UseInanduGridOptions, InanduCellRenderContext, InanduHeaderRenderContext, InanduEditRenderContext, } from './composables/useInanduGrid';
+export type { InanduColumnType, InanduColumnStickySide, InanduColumnAggregate, InanduGridRow, InanduGridColumnFilterValue, ColumnConfig, NumberFormatter, TreeVisibleRow, } from './core';
+export { compareCellValues, formatCellValue, matchesColumnFilter, computeGroupAggregates, AGGREGATE_SYMBOLS } from './core';
+export { en, es, fr, it, zh, INANDU_GRID_TRANSLATIONS } from './core';
+export { createTranslator, interpolate } from './utils/translate';
+export type { InanduGridMessageKey } from './utils/translate';
+export { exportCsv, exportExcel, exportPdf, printTable, buildCsv, buildExcelXml } from './utils/exporters';
+export { measureColumnContentWidth } from './utils/measureColumn';

package/dist/style.css

@@ -0,0 +1,358 @@
+/**
+ * Optional default styling for <InanduGrid>. Every selector below targets a className the
+ * component already renders (see InanduGrid.vue) — nothing here is required for the grid to
+ * function; skip this file entirely and bring your own CSS if you'd rather start from a blank
+ * table. Import once, anywhere in your app:
+ *
+ *   import '@inandu-solutions/grid-vue/style.css';
+ *
+ * Colors/spacing are CSS custom properties on .inandu-grid-vue, so overriding the look is just
+ * redeclaring them on your own selector — no !important, no rebuilding the package.
+ */
+
+.inandu-grid-vue {
+  --ig-accent: #1a8fae;
+  --ig-accent-ink: #ffffff;
+  --ig-ink: #1b1f24;
+  --ig-muted: #5c6470;
+  --ig-border: #e2e5e9;
+  --ig-header-bg: #f6f7f8;
+  --ig-row-bg: #ffffff;
+  --ig-row-alt-bg: #fafbfc;
+  --ig-row-hover-bg: #eef6f8;
+  --ig-row-selected-bg: #e3f2f6;
+  --ig-focus-ring: #1a8fae;
+  --ig-danger: #c0392b;
+  --ig-radius: 6px;
+  --ig-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  font-family: var(--ig-font);
+  color: var(--ig-ink);
+  font-size: 0.92rem;
+}
+
+.inandu-grid-vue * {
+  box-sizing: border-box;
+}
+
+.inandu-grid-vue button {
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--ig-ink);
+  background: #fff;
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+  padding: 0.35rem 0.7rem;
+  cursor: pointer;
+}
+
+.inandu-grid-vue button:hover:not(:disabled) {
+  border-color: var(--ig-accent);
+  color: var(--ig-accent);
+}
+
+.inandu-grid-vue button:disabled {
+  color: var(--ig-muted);
+  cursor: default;
+  opacity: 0.6;
+}
+
+.inandu-grid-vue input[type='text'],
+.inandu-grid-vue input[type='number'],
+.inandu-grid-vue input[type='date'],
+.inandu-grid-vue select {
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--ig-ink);
+  background: #fff;
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+  padding: 0.3rem 0.5rem;
+}
+
+.inandu-grid-vue input:focus-visible,
+.inandu-grid-vue select:focus-visible,
+.inandu-grid-vue button:focus-visible {
+  outline: 2px solid var(--ig-focus-ring);
+  outline-offset: 1px;
+}
+
+/* ── search + toolbar ────────────────────────────────────────────────── */
+
+.inandu-grid-search {
+  margin-bottom: 0.6rem;
+}
+
+.inandu-grid-search input {
+  width: 100%;
+  max-width: 320px;
+}
+
+.inandu-grid-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.6rem;
+}
+
+.inandu-grid-column-toggle {
+  position: relative;
+}
+
+.inandu-grid-column-toggle summary {
+  list-style: none;
+  font-size: 0.85rem;
+  color: var(--ig-ink);
+  background: #fff;
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+  padding: 0.35rem 0.7rem;
+  cursor: pointer;
+}
+
+.inandu-grid-column-toggle summary::-webkit-details-marker {
+  display: none;
+}
+
+.inandu-grid-column-toggle[open] summary {
+  border-color: var(--ig-accent);
+  color: var(--ig-accent);
+}
+
+.inandu-grid-column-toggle ul {
+  position: absolute;
+  z-index: 20;
+  list-style: none;
+  margin: 0.25rem 0 0;
+  padding: 0.4rem;
+  min-width: 12rem;
+  background: #fff;
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+  box-shadow: 0 8px 24px -12px rgba(27, 31, 36, 0.3);
+}
+
+.inandu-grid-column-toggle li {
+  padding: 0.2rem 0.3rem;
+}
+
+.inandu-grid-column-toggle label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+}
+
+.inandu-grid-group-by {
+  margin-bottom: 0.6rem;
+  color: var(--ig-muted);
+  font-size: 0.85rem;
+}
+
+/* ── the table itself ────────────────────────────────────────────────── */
+
+.inandu-grid-viewport {
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+}
+
+.inandu-grid {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+  overflow: hidden;
+}
+
+.inandu-grid th,
+.inandu-grid td {
+  padding: 0.5rem 0.65rem;
+  border-bottom: 1px solid var(--ig-border);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.inandu-grid thead th {
+  background: var(--ig-header-bg);
+  font-weight: 600;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.inandu-grid thead th.inandu-drag-over {
+  background: var(--ig-row-selected-bg);
+  box-shadow: inset 2px 0 0 var(--ig-accent);
+}
+
+.inandu-grid-sort-priority {
+  margin-inline-start: 0.15rem;
+  font-size: 0.65rem;
+  color: var(--ig-accent);
+}
+
+.inandu-grid-resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.inandu-grid-resize-handle:hover {
+  background: var(--ig-accent);
+  opacity: 0.35;
+}
+
+.inandu-grid-filter-row th {
+  background: var(--ig-row-alt-bg);
+  padding: 0.35rem 0.5rem;
+  cursor: default;
+}
+
+.inandu-grid-filter-row input,
+.inandu-grid-filter-row select {
+  width: 100%;
+}
+
+.inandu-grid-filter-range {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.inandu-grid-filter-range input {
+  min-width: 0;
+}
+
+.inandu-grid tbody tr {
+  background: var(--ig-row-bg);
+}
+
+.inandu-grid tbody tr:nth-child(even) {
+  background: var(--ig-row-alt-bg);
+}
+
+.inandu-grid tbody tr:hover {
+  background: var(--ig-row-hover-bg);
+}
+
+.inandu-grid tbody tr[aria-selected='true'] {
+  background: var(--ig-row-selected-bg);
+}
+
+.inandu-grid-totals-row td {
+  font-weight: 600;
+  border-top: 2px solid var(--ig-border);
+  background: var(--ig-header-bg);
+}
+
+/* ── row actions / drag / detail ─────────────────────────────────────── */
+
+.inandu-grid-row-actions {
+  white-space: nowrap;
+  text-align: right;
+}
+
+.inandu-grid-row-actions button {
+  margin-inline-start: 0.3rem;
+}
+
+.inandu-grid-row-drag-handle,
+.inandu-grid-detail-toggle {
+  background: none;
+  border: none;
+  padding: 0.1rem 0.3rem;
+  cursor: grab;
+  color: var(--ig-muted);
+}
+
+.inandu-grid-detail-toggle {
+  cursor: pointer;
+}
+
+.inandu-grid-detail-row td {
+  background: var(--ig-row-alt-bg);
+  padding: 0.75rem 1rem;
+}
+
+.inandu-grid-new-row td {
+  background: var(--ig-row-selected-bg);
+}
+
+/* ── grouping ────────────────────────────────────────────────────────── */
+
+.inandu-grid-group-row td {
+  background: var(--ig-header-bg);
+  font-weight: 600;
+}
+
+.inandu-grid-group-aggregates {
+  margin-inline-start: 0.6rem;
+  font-weight: 400;
+  color: var(--ig-muted);
+  font-size: 0.85rem;
+}
+
+/* ── tree data ───────────────────────────────────────────────────────── */
+
+.inandu-grid-tree-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.inandu-grid-tree-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  width: 1.1rem;
+  cursor: pointer;
+  color: var(--ig-muted);
+}
+
+.inandu-grid-tree-toggle-spacer {
+  display: inline-block;
+  width: 1.1rem;
+}
+
+/* ── inline editing ──────────────────────────────────────────────────── */
+
+.inandu-grid-edit-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.inandu-grid-edit-cell input,
+.inandu-grid-edit-cell select {
+  width: 100%;
+}
+
+.inandu-grid-field-error {
+  font-size: 0.75rem;
+  color: var(--ig-danger);
+}
+
+/* ── cell range selection ────────────────────────────────────────────── */
+
+.inandu-cell-range-selected {
+  background: color-mix(in srgb, var(--ig-accent) 16%, transparent);
+  outline: 1px solid var(--ig-accent);
+  outline-offset: -1px;
+}
+
+/* ── pagination ──────────────────────────────────────────────────────── */
+
+.inandu-grid-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 0.6rem;
+  color: var(--ig-muted);
+  font-size: 0.85rem;
+}

package/dist/utils/exporters.d.ts

@@ -0,0 +1,29 @@
+import { InanduGridRow } from '../core';
+import { InanduGridColumn } from '../composables/useInanduGrid';
+/**
+ * Ported from grid-angular's `exportCsv()` — same column/row source, same formatted-value rule,
+ * same UTF-8 BOM (so Excel opens accented text as UTF-8 instead of Latin-1).
+ */
+export declare function buildCsv(rows: InanduGridRow[], columns: InanduGridColumn[], locale: string): string;
+export declare function exportCsv(rows: InanduGridRow[], columns: InanduGridColumn[], locale: string, filenameBase?: string): void;
+/**
+ * Ported from grid-angular's `exportExcel()` — dependency-free SpreadsheetML XML that Excel 2003+,
+ * LibreOffice and Google Sheets all open natively. A numeric column stays genuinely numeric-typed
+ * in the sheet; everything else is a formatted string. A real binary `.xlsx` is a grid-pro feature.
+ */
+export declare function buildExcelXml(rows: InanduGridRow[], columns: InanduGridColumn[], locale: string): string;
+export declare function exportExcel(rows: InanduGridRow[], columns: InanduGridColumn[], locale: string, filenameBase?: string): void;
+/**
+ * Ported from grid-angular's `exportPdf()` — one simple table drawn with jsPDF's low-level
+ * text/line primitives (not the `autotable` plugin), single-line cells truncated with an ellipsis,
+ * header redrawn on every new page. Columns split the page width evenly (grid-angular instead
+ * weights by each column's live pixel width — not meaningful yet here, no column-resize feature).
+ * `jspdf` is dynamically imported so a grid that never exports to PDF never pays to load it.
+ */
+/**
+ * Ported from grid-angular's `printTable()` — opens a new tab with a plain, print-styled `<table>`
+ * of `rows` and triggers the browser's print dialog on it, rather than printing the live page
+ * (which would include the toolbar, pager, and any surrounding app chrome).
+ */
+export declare function printTable(rows: InanduGridRow[], columns: InanduGridColumn[], locale: string, title?: string): void;
+export declare function exportPdf(rows: InanduGridRow[], columns: InanduGridColumn[], locale: string, filenameBase?: string): Promise<void>;

package/dist/utils/measureColumn.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Widest rendered value in a column (its header and every currently-rendered data cell), measured
+ * against that column's own computed font, plus the cell's horizontal padding. Reads only what's
+ * in the DOM right now — one page, or the virtual window — so it's O(visible rows). Returns `0` if
+ * the column has no rendered cell to measure. Ported verbatim from grid-angular's
+ * `measureColumnContentWidth()` (`onResizeHandleDblClick`'s autosize).
+ *
+ * Genuinely needs a real layout engine to return anything meaningful — `offsetWidth`/
+ * `getComputedStyle` are always `0`/defaults in jsdom, so this can't be *end-to-end* verified in a
+ * unit test the way the rest of the port is. What test coverage there is stubs `offsetWidth`
+ * itself and checks the surrounding logic (which cells get measured, the padding/reserved-space
+ * math, the `0` "nothing to measure" case) — the measurement call itself is trusted to work in a
+ * real browser, same as any other `getBoundingClientRect()`-dependent code would be.
+ */
+export declare function measureColumnContentWidth(host: HTMLElement, field: string, headerText: string): number;

package/dist/utils/translate.d.ts

@@ -0,0 +1,10 @@
+import { en } from '../core';
+export type InanduGridMessageKey = keyof typeof en;
+/** Replaces `{{name}}` tokens in `template` with `params[name]`, same mini-syntax the built-in dictionaries use (ngx-translate's, on the Angular side). Leaves an unmatched token as-is. */
+export declare function interpolate(template: string, params?: Record<string, string | number>): string;
+/**
+ * Resolves `lang` (a full BCP-47 tag like `'en-US'` or just `'en'`) to one of the built-in
+ * dictionaries by primary subtag, falling back to English for an unrecognized one — same fallback
+ * behavior `INANDU_GRID_TRANSLATIONS` documents for the Angular side.
+ */
+export declare function createTranslator(lang: string): (key: InanduGridMessageKey, params?: Record<string, string | number>) => string;

package/package.json

@@ -1,6 +1,92 @@
-{
-  "name": "@inandu-solutions/grid-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@inandu-solutions/grid-vue",
+  "version": "0.2.0",
+  "description": "Standalone Vue 3 data grid: sorting, free-text and per-column filtering, grouping, pagination, CSV/Excel (.xls)/PDF export and print, i18n (5 languages) and theming, with a deliberately small dependency footprint. The Vue port of @inandu-solutions/grid-angular.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "vue-grid",
+    "vue-datagrid",
+    "vue-table",
+    "vue-component",
+    "composable",
+    "data-grid",
+    "datagrid",
+    "grid",
+    "table",
+    "data-table",
+    "virtual-scroll",
+    "pagination",
+    "grouping",
+    "inline-editing",
+    "csv-export",
+    "excel-export",
+    "i18n",
+    "headless"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Inandu SAS",
+    "url": "https://www.inandu.com/"
+  },
+  "homepage": "https://github.com/inandusolutions/inandu-grid-vue#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inandusolutions/inandu-grid-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/inandusolutions/inandu-grid-vue/issues"
+  },
+  "type": "module",
+  "main": "./dist/inandu-grid-vue.cjs",
+  "module": "./dist/inandu-grid-vue.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/inandu-grid-vue.js",
+      "require": "./dist/inandu-grid-vue.cjs"
+    },
+    "./style.css": {
+      "default": "./dist/style.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+    "npm": ">=10.0.0"
+  },
+  "scripts": {
+    "build": "vite build && node -e \"require('fs').copyFileSync('src/styles/inandu-grid.css','dist/style.css')\"",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "jspdf": "^4.2.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/test-utils": "^2.5.1",
+    "jsdom": "^30.1.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.3.3",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.3",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.12"
+  }
+}