@svgrid/grid 1.0.2 → 1.1.0

package/dist/SvGrid.helpers.d.ts

@@ -0,0 +1,35 @@
+import type { CellEditorType, CellEditorOption } from "./index";
+import type { ResolvedCellFormat } from "./conditional-formatting";
+export declare function cfTextStyle(cf: ResolvedCellFormat): string;
+export declare function fmtStat(n: number): string;
+export declare function getCellKey(rowId: string, columnId: string): string;
+/**
+ * Normalise the return value of a `cellClass` / `rowClass` callback
+ * (or a static `cellClass` field) into a single space-separated
+ * class string. Accepts: string, string[], Record<string, boolean>,
+ * null/undefined. Anything else returns ''.
+ */
+export declare function resolveClassList(value: string | ReadonlyArray<string> | Record<string, boolean> | undefined | null): string;
+export declare function toDateInputValue(value: unknown): string;
+export declare function toDateTimeLocalInputValue(value: unknown): string;
+export declare function getEditableInputValue(editorType: CellEditorType, value: unknown): string;
+export declare function getEditorInputType(editorType: CellEditorType): "number" | "date" | "text" | "time" | "password" | "color" | "datetime-local";
+/** Resolve a stored value to an array form (for list/chips multi-select). */
+export declare function toValueArray(value: unknown): Array<string | number>;
+/** Look up the display label for a given option value. */
+export declare function getOptionLabel(options: CellEditorOption[], value: unknown): string;
+/** Look up the configured `color` for a value (for colorful chips). */
+export declare function getOptionColor(options: CellEditorOption[], value: unknown): string | undefined;
+/** Build a theme-aware inline `style` string for a colorful chip. The
+ *  color value can be any CSS color (hex, rgb, hsl, oklch, named).
+ *  We tint the background and border via `color-mix` so the chip stays
+ *  readable on light AND dark themes, and use the color itself as the
+ *  text color for a soft-pill look (à la GitHub labels). */
+export declare function colorfulChipStyle(color: string | undefined): string;
+export declare function getEditorClass(editorType: CellEditorType): "sv-grid-cell-editor sv-grid-cell-editor-number" | "sv-grid-cell-editor sv-grid-cell-editor-date" | "sv-grid-cell-editor sv-grid-cell-editor-datetime" | "sv-grid-cell-editor sv-grid-cell-editor-color" | "sv-grid-cell-editor";
+export declare function asDate(value: unknown): Date | null;
+export declare function clampMenuX(x: number, width: number): number;
+export declare function cssEscape(s: string): string;
+export declare function rawToNumber(raw: unknown, isDate: boolean): number;
+export declare function formatFacetNumber(n: number): string;
+export declare function formatFacetDate(timestamp: number): string;

package/dist/SvGrid.helpers.js

@@ -0,0 +1,160 @@
+export function cfTextStyle(cf) {
+    let s = "";
+    if (cf.color)
+        s += `color:${cf.color};`;
+    if (cf.fontWeight != null)
+        s += `font-weight:${cf.fontWeight};`;
+    return s;
+}
+export function fmtStat(n) {
+    return Number.isInteger(n)
+        ? n.toLocaleString()
+        : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+export function getCellKey(rowId, columnId) {
+    return `${rowId}:${columnId}`;
+}
+/**
+ * Normalise the return value of a `cellClass` / `rowClass` callback
+ * (or a static `cellClass` field) into a single space-separated
+ * class string. Accepts: string, string[], Record<string, boolean>,
+ * null/undefined. Anything else returns ''.
+ */
+export function resolveClassList(value) {
+    if (!value)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (Array.isArray(value))
+        return value.filter(Boolean).join(" ");
+    if (typeof value === "object") {
+        const parts = [];
+        for (const [k, v] of Object.entries(value))
+            if (v)
+                parts.push(k);
+        return parts.join(" ");
+    }
+    return "";
+}
+export function toDateInputValue(value) {
+    if (value == null || value === "")
+        return "";
+    if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value))
+        return value;
+    const parsed = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(parsed.getTime()))
+        return "";
+    return parsed.toISOString().slice(0, 10);
+}
+export function toDateTimeLocalInputValue(value) {
+    if (value == null || value === "")
+        return "";
+    if (typeof value === "string" &&
+        /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value))
+        return value;
+    const parsed = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(parsed.getTime()))
+        return "";
+    return parsed.toISOString().slice(0, 16);
+}
+export function getEditableInputValue(editorType, value) {
+    if (editorType === "date")
+        return toDateInputValue(value);
+    if (editorType === "datetime")
+        return toDateTimeLocalInputValue(value);
+    return String(value ?? "");
+}
+export function getEditorInputType(editorType) {
+    if (editorType === "number")
+        return "number";
+    if (editorType === "date")
+        return "date";
+    if (editorType === "datetime")
+        return "datetime-local";
+    if (editorType === "time")
+        return "time";
+    if (editorType === "password")
+        return "password";
+    if (editorType === "color")
+        return "color";
+    return "text";
+}
+/** Resolve a stored value to an array form (for list/chips multi-select). */
+export function toValueArray(value) {
+    if (value == null || value === "")
+        return [];
+    if (Array.isArray(value)) {
+        return value.filter((v) => v != null && v !== "");
+    }
+    return [value];
+}
+/** Look up the display label for a given option value. */
+export function getOptionLabel(options, value) {
+    const match = options.find((o) => o.value === value || String(o.value) === String(value));
+    return match ? match.label : String(value ?? "");
+}
+/** Look up the configured `color` for a value (for colorful chips). */
+export function getOptionColor(options, value) {
+    const match = options.find((o) => o.value === value || String(o.value) === String(value));
+    return match?.color;
+}
+/** Build a theme-aware inline `style` string for a colorful chip. The
+ *  color value can be any CSS color (hex, rgb, hsl, oklch, named).
+ *  We tint the background and border via `color-mix` so the chip stays
+ *  readable on light AND dark themes, and use the color itself as the
+ *  text color for a soft-pill look (à la GitHub labels). */
+export function colorfulChipStyle(color) {
+    if (!color)
+        return "";
+    return (`background: color-mix(in srgb, ${color} 22%, transparent);` +
+        `border-color: color-mix(in srgb, ${color} 45%, transparent);` +
+        `color: color-mix(in srgb, ${color} 80%, var(--sg-fg, #0f172a));`);
+}
+export function getEditorClass(editorType) {
+    if (editorType === "number")
+        return "sv-grid-cell-editor sv-grid-cell-editor-number";
+    if (editorType === "date")
+        return "sv-grid-cell-editor sv-grid-cell-editor-date";
+    if (editorType === "datetime")
+        return "sv-grid-cell-editor sv-grid-cell-editor-datetime";
+    if (editorType === "color")
+        return "sv-grid-cell-editor sv-grid-cell-editor-color";
+    return "sv-grid-cell-editor";
+}
+export function asDate(value) {
+    if (value == null || value === "")
+        return null;
+    const parsed = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+export function clampMenuX(x, width) {
+    return Math.max(8, Math.min(x, window.innerWidth - width - 8));
+}
+export function cssEscape(s) {
+    return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(s) : s.replace(/"/g, '\\"');
+}
+export function rawToNumber(raw, isDate) {
+    if (raw == null || raw === "")
+        return Number.NaN;
+    if (isDate) {
+        const d = raw instanceof Date ? raw : new Date(String(raw));
+        const t = d.getTime();
+        return Number.isFinite(t) ? t : Number.NaN;
+    }
+    const n = typeof raw === "number" ? raw : Number(raw);
+    return Number.isFinite(n) ? n : Number.NaN;
+}
+export function formatFacetNumber(n) {
+    const abs = Math.abs(n);
+    const maxFractionDigits = abs >= 1000 ? 0 : abs >= 100 ? 1 : abs >= 1 ? 2 : 4;
+    return n.toLocaleString(undefined, {
+        maximumFractionDigits: maxFractionDigits,
+    });
+}
+export function formatFacetDate(timestamp) {
+    return new Date(timestamp).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+}