@svgrid/grid 1.0.2 → 1.1.0

package/dist/cell-render.js

@@ -0,0 +1,246 @@
+// cell-render handlers extracted from the controller. Imperative event handlers
+// reading/writing controller state via the `ctx` handle; the reactive core
+// ($state/$derived/$effect) stays in the controller.
+import { normalizeEditorOptions, } from "./index";
+import "./sv-grid-scrollbar";
+import { formatNumericWithConfig, getDateFormatter, resolveDatePattern, } from "./cell-formatting";
+import { resolveCellFormat, } from "./conditional-formatting";
+import { resolveClassList, getOptionLabel, asDate, } from "./SvGrid.helpers";
+import { getPinnedCellValue, } from "./cell-values";
+export function createCellRender(ctx) {
+    function cellConditionalFormat(row, column, value) {
+        const formats = ctx.props.conditionalFormats;
+        if (!formats?.length)
+            return null;
+        return resolveCellFormat(value, row.original, column.id, formats, ctx.conditionalColumnStats.get(column.id) ?? null);
+    }
+    /** Compute the consumer-supplied row class for one rendered row. */
+    function computeRowClass(row, rowIndex) {
+        if (!ctx.props.rowClass)
+            return "";
+        return resolveClassList(ctx.props.rowClass({ row: row.original, rowIndex }));
+    }
+    /** Compute the consumer-supplied cell class for one rendered cell. */
+    function computeCellClass(row, column) {
+        const raw = column.columnDef.cellClass;
+        if (raw == null)
+            return "";
+        if (typeof raw === "string" || Array.isArray(raw)) {
+            return resolveClassList(raw);
+        }
+        if (typeof raw === "function") {
+            // Build a minimal CellContext - the only fields the wrapper-side
+            // cellClass author needs are `row` and `column`. Callers can read
+            // `ctx.row.original` and `ctx.column.id` exactly like in a `cell`
+            // renderer. The other fields are stubbed for compatibility.
+            const cellCtx = {
+                row,
+                column,
+                cell: undefined,
+                table: undefined,
+                getValue: () => row.getCellValueByColumnId(column.id),
+            };
+            return resolveClassList(raw(cellCtx));
+        }
+        return "";
+    }
+    /**
+     * Resolve the per-cell tooltip. Column-level `tooltip` field can be a
+     * plain string (rendered as `title=`) or a `(ctx) => string` callback
+     * for value-dependent text. Returning empty / nullish means no
+     * tooltip - the renderer omits the `title=` attribute entirely.
+     */
+    function computeCellTooltip(row, column) {
+        const raw = column.columnDef.tooltip;
+        if (raw == null)
+            return null;
+        if (typeof raw === "string")
+            return raw || null;
+        if (typeof raw === "function") {
+            const ctx = {
+                row,
+                column,
+                cell: undefined,
+                table: undefined,
+                getValue: () => row.getCellValueByColumnId(column.id),
+            };
+            const out = raw(ctx);
+            return out ? String(out) : null;
+        }
+        return null;
+    }
+    /**
+     * Resolve a per-cell note (a longer comment / annotation). Notes
+     * come from the grid's `notes` prop - a `{ [rowId]: { [columnId]: string } }`
+     * map - so the consumer keeps note storage. Returning non-empty
+     * paints a corner indicator AND becomes the cell's tooltip text.
+     */
+    function computeCellNote(row, column) {
+        // Internal overlay (from the comment editor) wins over props.notes so
+        // edits show immediately even when `notes` is controlled. An empty
+        // overlay entry means "removed".
+        const ov = ctx.noteOverrides?.[row.id]?.[column.id];
+        if (ov !== undefined)
+            return ov.trim() ? ov : null;
+        const map = ctx.props.notes;
+        if (!map)
+            return null;
+        const byCol = map[row.id];
+        if (!byCol)
+            return null;
+        const v = byCol[column.id];
+        return v && v.trim() ? v : null;
+    }
+    function getColumnEditorOptions(column, row) {
+        const def = column.columnDef.editorOptions;
+        if (typeof def === "function") {
+            // Dynamic per-row: must be re-evaluated because the row's other
+            // cells may have just changed (cascade).
+            if (!row?.original)
+                return [];
+            return normalizeEditorOptions(def(row.original));
+        }
+        const id = column.id;
+        if (!ctx.editorOptionsCache[id] ||
+            ctx.editorOptionsCache[id + "__src"] !== def) {
+            ctx.editorOptionsCache[id] = normalizeEditorOptions(def);
+            ctx.editorOptionsCache[id + "__src"] = def;
+        }
+        return ctx.editorOptionsCache[id];
+    }
+    /** Joined display string for list/chips cells. */
+    function formatListCellValue(column, value, row) {
+        const options = getColumnEditorOptions(column, row);
+        const sep = column.columnDef.editorSeparator ?? ", ";
+        if (Array.isArray(value)) {
+            return value.map((v) => getOptionLabel(options, v)).join(sep);
+        }
+        if (value == null || value === "")
+            return "";
+        return getOptionLabel(options, value);
+    }
+    function formatCellValue(column, value, row) {
+        const formatter = column.columnDef.formatter;
+        if (typeof formatter === "function") {
+            const formatted = formatter({ value, row, column, table: ctx.grid });
+            return String(formatted ?? "");
+        }
+        // Password columns: mask the stored value with bullets when the cell
+        // is in read-only mode. The editor still receives the real string.
+        if (column.columnDef.editorType === "password") {
+            const s = String(value ?? "");
+            return s.length > 0 ? "•".repeat(Math.min(s.length, 12)) : "";
+        }
+        const formatConfig = column.columnDef.format;
+        if (!formatConfig)
+            return String(value ?? "");
+        if (formatConfig.type === "number" ||
+            formatConfig.type === "currency" ||
+            formatConfig.type === "percent") {
+            return formatNumericWithConfig(value, {
+                type: formatConfig.type,
+                locales: formatConfig.locales,
+                currency: formatConfig.type === "currency"
+                    ? (formatConfig.currency ?? "USD")
+                    : undefined,
+                valueIsPercentPoints: formatConfig.type === "percent"
+                    ? formatConfig.valueIsPercentPoints
+                    : undefined,
+                options: formatConfig.options,
+            });
+        }
+        if (formatConfig.type === "date" || formatConfig.type === "datetime") {
+            const parsedDate = asDate(value);
+            if (parsedDate) {
+                const preset = resolveDatePattern(formatConfig.pattern, formatConfig.type);
+                const merged = preset || formatConfig.options
+                    ? { ...preset, ...formatConfig.options }
+                    : formatConfig.type === "date"
+                        ? { year: "numeric", month: "2-digit", day: "2-digit" }
+                        : {
+                            year: "numeric",
+                            month: "2-digit",
+                            day: "2-digit",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                        };
+                return getDateFormatter(formatConfig.locales, merged).format(parsedDate);
+            }
+        }
+        return String(value ?? "");
+    }
+    /**
+     * Format a cell value for a PINNED row. Same surface as
+     * `formatCellValue` but doesn't depend on Row<TData>. Custom
+     * `formatter` callbacks are invoked with a `row` of `null` (their
+     * type allows it; most don't read it).
+     */
+    function formatPinnedValue(column, value) {
+        const def = column.columnDef;
+        const formatter = def.formatter;
+        if (typeof formatter === "function") {
+            return String(formatter({ value, row: null, column, table: ctx.grid }) ?? "");
+        }
+        if (def.editorType === "password") {
+            const s = String(value ?? "");
+            return s.length > 0 ? "•".repeat(Math.min(s.length, 12)) : "";
+        }
+        const formatConfig = def.format;
+        if (!formatConfig)
+            return String(value ?? "");
+        if (formatConfig.type === "number" ||
+            formatConfig.type === "currency" ||
+            formatConfig.type === "percent") {
+            return formatNumericWithConfig(value, {
+                type: formatConfig.type,
+                locales: formatConfig.locales,
+                currency: formatConfig.type === "currency"
+                    ? (formatConfig.currency ?? "USD")
+                    : undefined,
+                valueIsPercentPoints: formatConfig.type === "percent"
+                    ? formatConfig.valueIsPercentPoints
+                    : undefined,
+                options: formatConfig.options,
+            });
+        }
+        if (formatConfig.type === "date" || formatConfig.type === "datetime") {
+            const parsedDate = asDate(value);
+            if (parsedDate) {
+                const preset = resolveDatePattern(formatConfig.pattern, formatConfig.type);
+                const merged = preset || formatConfig.options
+                    ? { ...preset, ...formatConfig.options }
+                    : formatConfig.type === "date"
+                        ? { year: "numeric", month: "2-digit", day: "2-digit" }
+                        : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" };
+                return getDateFormatter(formatConfig.locales, merged).format(parsedDate);
+            }
+        }
+        return String(value ?? "");
+    }
+    /**
+     * Resolve `cellClass` for a pinned row. We synthesise a minimal
+     * context `{ getValue, value, row: null, column }`; cell-class
+     * callbacks that read only the value (the common case) work
+     * unchanged.
+     */
+    function computePinnedCellClass(rowData, column) {
+        const cellClass = column.columnDef.cellClass;
+        if (typeof cellClass !== "function")
+            return "";
+        const value = getPinnedCellValue(rowData, column);
+        const out = cellClass({ getValue: () => value, value, row: null, column });
+        return out ? String(out) : "";
+    }
+    return {
+        cellConditionalFormat,
+        computeRowClass,
+        computeCellClass,
+        computeCellTooltip,
+        computeCellNote,
+        getColumnEditorOptions,
+        formatListCellValue,
+        formatCellValue,
+        formatPinnedValue,
+        computePinnedCellClass,
+    };
+}

package/dist/cell-values.d.ts

@@ -0,0 +1,28 @@
+import type { Column, ColumnDef, Row, RowData, TableFeatures } from "./index";
+export declare function getColumnBaseValue<TData extends RowData>(row: Row<TData>, column: Column<TData>): unknown;
+export declare function isGroupRow<TData extends RowData>(row: Row<TData>): boolean;
+export declare function toolPanelHeaderLabel<TData extends RowData>(column: Column<TData>): string;
+/** Apply the column's `format` config to a raw numeric summary value
+ *  (sum / avg / etc.). Mirrors the currency/number/percent branches in
+ *  `formatCellValue` so a totaled salary column shows "$1,234,567" in
+ *  the footer instead of "1234567". Per-row `formatter` functions are
+ *  intentionally NOT invoked here - they may close over row state. */
+export declare function formatSummaryNumeric<TData extends RowData>(column: Column<TData>, value: number): string;
+/**
+ * Effective horizontal alignment for a column. Honors the explicit
+ * `align` prop on the ColumnDef; otherwise picks a sensible default
+ * based on `editorType`:
+ *   number / date / datetime → 'right'
+ *   checkbox                 → 'center'
+ *   everything else          → 'left'
+ */
+export declare function getColumnAlign<TData extends RowData>(column: Column<TData>): "left" | "center" | "right";
+/**
+ * Read a cell value from a PINNED row. Pinned rows aren't bound to a
+ * TanStack Row<TData>, so we resolve the value directly off the raw
+ * TData via `accessorFn` or `field`. Mirrors `getColumnBaseValue`'s
+ * lookup path minus the Row indirection.
+ */
+export declare function getPinnedCellValue<TData extends RowData>(rowData: TData, column: Column<TData>): unknown;
+export declare function getColumnAccessorValue<TData extends RowData>(rowData: TData, column: Column<TData>): unknown;
+export declare function columnDefMatchesId<TFeatures extends TableFeatures, TData extends RowData>(def: ColumnDef<TFeatures, TData>, columnId: string): boolean;

package/dist/cell-values.js

@@ -0,0 +1,89 @@
+import { formatNumericWithConfig } from "./cell-formatting";
+export function getColumnBaseValue(row, column) {
+    const def = column.columnDef;
+    if (def.accessorFn)
+        return def.accessorFn(row.original);
+    if (def.field)
+        return row.original[def.field];
+    return row.getCellValueByColumnId(column.id);
+}
+export function isGroupRow(row) {
+    return typeof row.getCanExpand === "function" && row.getCanExpand();
+}
+export function toolPanelHeaderLabel(column) {
+    const h = column.columnDef.header;
+    return typeof h === "string" ? h : column.id;
+}
+/** Apply the column's `format` config to a raw numeric summary value
+ *  (sum / avg / etc.). Mirrors the currency/number/percent branches in
+ *  `formatCellValue` so a totaled salary column shows "$1,234,567" in
+ *  the footer instead of "1234567". Per-row `formatter` functions are
+ *  intentionally NOT invoked here - they may close over row state. */
+export function formatSummaryNumeric(column, value) {
+    const formatConfig = column.columnDef.format;
+    if (formatConfig &&
+        (formatConfig.type === "number" ||
+            formatConfig.type === "currency" ||
+            formatConfig.type === "percent")) {
+        return formatNumericWithConfig(value, {
+            type: formatConfig.type,
+            locales: formatConfig.locales,
+            currency: formatConfig.type === "currency"
+                ? (formatConfig.currency ?? "USD")
+                : undefined,
+            valueIsPercentPoints: formatConfig.type === "percent"
+                ? formatConfig.valueIsPercentPoints
+                : undefined,
+            options: formatConfig.options,
+        });
+    }
+    return String(value);
+}
+/**
+ * Effective horizontal alignment for a column. Honors the explicit
+ * `align` prop on the ColumnDef; otherwise picks a sensible default
+ * based on `editorType`:
+ *   number / date / datetime → 'right'
+ *   checkbox                 → 'center'
+ *   everything else          → 'left'
+ */
+export function getColumnAlign(column) {
+    const explicit = column.columnDef.align;
+    if (explicit)
+        return explicit;
+    const editorType = column.columnDef.editorType;
+    if (editorType === "number" ||
+        editorType === "date" ||
+        editorType === "datetime") {
+        return "right";
+    }
+    if (editorType === "checkbox")
+        return "center";
+    return "left";
+}
+/**
+ * Read a cell value from a PINNED row. Pinned rows aren't bound to a
+ * TanStack Row<TData>, so we resolve the value directly off the raw
+ * TData via `accessorFn` or `field`. Mirrors `getColumnBaseValue`'s
+ * lookup path minus the Row indirection.
+ */
+export function getPinnedCellValue(rowData, column) {
+    const def = column.columnDef;
+    if (def.accessorFn)
+        return def.accessorFn(rowData);
+    const field = def.field;
+    if (!field)
+        return undefined;
+    return rowData[field];
+}
+export function getColumnAccessorValue(rowData, column) {
+    const def = column.columnDef;
+    if (def.accessorFn)
+        return def.accessorFn(rowData);
+    if (def.field)
+        return rowData[def.field];
+    return undefined;
+}
+export function columnDefMatchesId(def, columnId) {
+    return (def.id ?? def.field ?? null) === columnId;
+}