@updog/data-editor-wc 0.1.18 → 0.1.19

package/README.md

@@ -45,7 +45,6 @@ How you wire the element into a framework (Angular's `CUSTOM_ELEMENTS_SCHEMA`, V
 <script type="module">
   import "@updog/data-editor-wc";
   import "@updog/data-editor-wc/styles.css";
-  import { required, email } from "@updog/data-editor-wc";
 
   const editor = document.getElementById("editor");
 
@@ -53,9 +52,26 @@ How you wire the element into a framework (Angular's `CUSTOM_ELEMENTS_SCHEMA`, V
     apiKey: "your-license-key",
     primaryKey: "id",
     columns: [
-      { id: "name", title: "Full Name", size: 200, validate: required("Name is required") },
-      { id: "email", title: "Email", size: 250, validate: [required("Email is required"), email("Invalid email")] },
-      { id: "role", title: "Role", editor: { type: "select", options: ["Admin", "Editor", "Viewer"] } },
+      {
+        id: "name",
+        title: "Full Name",
+        size: 200,
+        validators: [{ type: "required", message: "Name is required" }],
+      },
+      {
+        id: "email",
+        title: "Email",
+        size: 250,
+        validators: [
+          { type: "required", message: "Email is required" },
+          { type: "email", message: "Invalid email" },
+        ],
+      },
+      {
+        id: "role",
+        title: "Role",
+        editor: { type: "select", options: ["Admin", "Editor", "Viewer"] },
+      },
     ],
     loadData: async (onChunk) => {
       const res = await fetch("/api/employees");
@@ -190,16 +206,17 @@ editor.addEventListener("close", () => editor.hide());
 ## Column Configuration
 
 ```js
-import { required, email } from "@updog/data-editor-wc";
-
 editor.columns = [
   {
     id: "email",
     title: "Email",
     size: 260,
 
-    // One validator, or an array. Each returns `{ level: "error", message }` or null.
-    validate: [required("Email is required"), email("Enter a valid email")],
+    // Declarative validators. See "Built-in Validators" for the full list.
+    validators: [
+      { type: "required", message: "Email is required" },
+      { type: "email", message: "Enter a valid email" },
+    ],
 
     // Flag duplicates in this column as errors.
     unique: true,
@@ -231,36 +248,42 @@ editor.columns = [
 
 ## Built-in Validators
 
-Validators are factory functions — call each one with the error message you want displayed.
+Validators are declarative objects passed in the `validators` array on each column. The SDK ships a TS interpreter for the client; Updog Scale ships a matching Go interpreter for server mode. Both runtimes are pinned to the same fixture set, so a column definition produces identical pass/fail results regardless of where it runs.
 
-```js
-import {
-  required,
-  numeric,
-  email,
-  date,
-  oneOf,
-  endDateAfterStart,
-} from "@updog/data-editor-wc";
+| `type` | Fields | Behavior |
+|---|---|---|
+| `"required"` | `message?` | Value must be non-empty. |
+| `"email"` | `message?` | Value must look like an email address. |
+| `"numeric"` | `message?` | Value must parse as a number. Commas are stripped before parsing. |
+| `"regex"` | `pattern`, `flags?`, `message?` | Value must match the regular expression. Empty values are skipped. |
+| `"range"` | `min?`, `max?`, `message?` | Value must be numerically within `[min, max]`. Either bound is optional. |
+| `"oneOf"` | `values: string[]`, `message?` | Value must be one of the listed strings. |
+| `"date"` | `format?: "YYYY-MM-DD" \| "DD/MM/YYYY"`, `message?` | Value must parse as a date in the given format. When `format` is omitted, either format is accepted. |
 
+```js
 editor.columns = [
-  { id: "name", title: "Name", validate: required("Required") },
-  { id: "email", title: "Email", validate: [required("Required"), email("Invalid email")] },
-  { id: "salary", title: "Salary", validate: numeric("Must be a number") },
-  { id: "status", title: "Status", validate: oneOf(["active", "inactive"], "Invalid status") },
+  { id: "name", title: "Name", validators: [{ type: "required", message: "Required" }] },
+  {
+    id: "email",
+    title: "Email",
+    validators: [
+      { type: "required", message: "Required" },
+      { type: "email", message: "Invalid email" },
+    ],
+  },
+  { id: "salary", title: "Salary", validators: [{ type: "numeric", message: "Must be a number" }] },
+  {
+    id: "status",
+    title: "Status",
+    validators: [{ type: "oneOf", values: ["active", "inactive"], message: "Invalid status" }],
+  },
   {
     id: "startDate",
     title: "Start",
-    validate: date("Use YYYY-MM-DD or DD/MM/YYYY"),
+    validators: [{ type: "date", format: "YYYY-MM-DD", message: "Use YYYY-MM-DD" }],
     editor: { type: "date" },
     dependentFields: ["endDate"],
   },
-  {
-    id: "endDate",
-    title: "End",
-    validate: [date("Invalid date"), endDateAfterStart("startDate", "End must be on or after start")],
-    editor: { type: "date" },
-  },
 ];
 ```
 
@@ -268,16 +291,32 @@ A `ValidationError` with `level: "error"` flags the cell in the grid but does **
 
 ### Custom validators
 
-A validator is `(value, row) => ValidationError | null`. The only `level` is `"error"`.
+For cross-field checks or anything not covered by the built-ins, wrap a `(value, row) => ValidationError | null` function in `{ type: "function", fn }`. Function validators are client-mode only — they're dropped (with a one-time warning) when the SDK serializes the schema for server mode. Use `dependentFields` on the column to trigger re-validation when another column changes.
 
 ```js
-const mustContainAt = (value) => {
-  if (!value) return null;
-  if (!String(value).includes("@")) return { level: "error", message: "Must contain @" };
+const endAfterStart = (value, row) => {
+  if (!value || !row.startDate) return null;
+  if (String(value) < String(row.startDate)) {
+    return { level: "error", message: "End must be on or after start" };
+  }
   return null;
 };
+
+editor.columns = [
+  {
+    id: "endDate",
+    title: "End",
+    editor: { type: "date" },
+    validators: [
+      { type: "date", message: "Invalid date" },
+      { type: "function", fn: endAfterStart },
+    ],
+  },
+];
 ```
 
+The only `level` is `"error"`. Return `null` to indicate the value is valid.
+
 ## Data Loading
 
 `loadData` is called once when the editor opens. Call `onChunk` one or more times to stream rows. The grid renders each chunk without blocking.

package/index.d.ts

@@ -1427,18 +1427,20 @@ type UpdogEditorProps = Omit<Props, "onClose" | "className"> & {
     /** Close the editor modal. Same as setting `editor.open = false`. */
     hide(): void;
 };
+/**
+ * The `<updog-editor>` custom element. A full-screen modal spreadsheet editor.
+ *
+ * Supports CSV/XLSX import, cell validation, undo/redo, find & replace, and exporting.
+ * Works in any framework (Angular, Vue, vanilla JS) — no React needed.
+ *
+ * @see {@link UpdogEditorProps} for all available properties.
+ */
+interface UpdogEditorElement extends HTMLElement, UpdogEditorProps {
+}
 declare global {
-    /**
-     * The `<updog-editor>` custom element. A full-screen modal spreadsheet editor.
-     *
-     * Supports CSV/XLSX import, cell validation, undo/redo, find & replace, and exporting.
-     * Works in any framework (Angular, Vue, vanilla JS) — no React needed.
-     *
-     * @see {@link UpdogEditorProps} for all available properties.
-     */
-    interface UpdogEditorElement extends HTMLElement, UpdogEditorProps {
-    }
     interface HTMLElementTagNameMap {
         "updog-editor": UpdogEditorElement;
     }
 }
+
+export type { UpdogEditorElement, UpdogEditorProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Client-side CSV importer and spreadsheet editor SDK as a Web Component. Drop into Vue, Angular, Svelte, or vanilla JS. Import CSV, Excel, JSON; edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",