@updog/data-editor-wc 0.1.17 → 0.1.19

package/LICENSE

@@ -232,8 +232,10 @@ Sections 5, 8, 11, 12, and 14 survive termination of this License.
 --------------------------------------------------------------------------------
 
 This License shall be governed by and construed in accordance with the laws of
-the United Arab Emirates. Any disputes arising under this License shall be
-subject to the exclusive jurisdiction of the courts of the United Arab Emirates.
+the Dubai International Financial Centre (DIFC), as applied by the DIFC Courts.
+Any dispute arising out of or in connection with this License, including any
+question regarding its existence, validity, or termination, shall be subject to
+the exclusive jurisdiction of the courts of the DIFC.
 
 --------------------------------------------------------------------------------
 15. EXPORT COMPLIANCE

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/index.js

@@ -39027,17 +39027,27 @@ var dN = ({ source: e }) => {
 		})]
 	})
 }), xN = ({ filtersResetKey: e }) => {
-	let { store: t, scrollToGridTop: n } = Bd(), { t: r } = k(), { filteredErrorCount: i, errorMessageCounts: a } = nl(t), [o, s] = (0, _.useState)(() => new Set(t.getFilters().errorMessageFilters ?? []));
+	let { store: t, scrollToGridTop: n } = Bd(), { t: r } = k(), { filteredErrorCount: i, errorMessageCounts: a } = nl(t), [o, s] = (0, _.useState)(() => new Set(t.getFilters().errorMessageFilters ?? [])), [c, l] = (0, _.useState)(!1);
 	(0, _.useEffect)(() => {
-		s(new Set(t.getFilters().errorMessageFilters ?? []));
+		s(new Set(t.getFilters().errorMessageFilters ?? [])), l(!1);
 	}, [e, t]);
-	let c = Object.keys(a), l = c.length > 0 && c.every((e) => o.has(e)), u = c.some((e) => o.has(e)) && !l, d = (0, _.useCallback)((e) => {
-		s(e ? new Set(c) : /* @__PURE__ */ new Set()), n(), t.setFilters({ errorMessageFilters: e ? c : [] });
+	let u = Object.keys(a), d = u.length > 0;
+	(0, _.useEffect)(() => {
+		!c || !d || (s(new Set(u)), t.setFilters({ errorMessageFilters: u }), l(!1));
 	}, [
 		c,
+		d,
+		u,
+		t
+	]);
+	let f = d && u.every((e) => o.has(e)), p = u.some((e) => o.has(e)), m = d ? f : c, h = d && p && !f, g = (0, _.useCallback)((e) => {
+		l(e), d && (s(e ? new Set(u) : /* @__PURE__ */ new Set()), n(), t.setFilters({ errorMessageFilters: e ? u : [] }));
+	}, [
+		d,
+		u,
 		n,
 		t
-	]), f = (0, _.useCallback)((e, r) => {
+	]), v = (0, _.useCallback)((e, r) => {
 		s((i) => {
 			let a = new Set(i);
 			return r ? a.add(e) : a.delete(e), t.setFilters({ errorMessageFilters: [...a] }), n(), a;
@@ -39049,9 +39059,9 @@ var dN = ({ source: e }) => {
 			trigger: ({ toggle: e, isOpen: t }) => {
 				let n = r(t ? "dataEditor.filters.showLess" : "dataEditor.filters.showMore");
 				return /* @__PURE__ */ (0, E.jsx)(Tt, {
-					checked: l,
-					indeterminate: u,
-					onChange: d,
+					checked: m,
+					indeterminate: h,
+					onChange: g,
 					checkboxPosition: "start",
 					children: /* @__PURE__ */ (0, E.jsxs)("div", {
 						className: "updog__error-filter-section__checkbox-label",
@@ -39060,7 +39070,7 @@ var dN = ({ source: e }) => {
 								className: "updog__error-filter-section__truncated",
 								children: r("dataEditor.filters.rowsWithErrors")
 							}),
-							c.length > 0 && /* @__PURE__ */ (0, E.jsx)(Ps, {
+							u.length > 0 && /* @__PURE__ */ (0, E.jsx)(Ps, {
 								content: n,
 								children: /* @__PURE__ */ (0, E.jsx)(nt, {
 									variant: "ghost",
@@ -39083,13 +39093,13 @@ var dN = ({ source: e }) => {
 					})
 				});
 			},
-			content: c.length > 0 && /* @__PURE__ */ (0, E.jsx)("div", {
+			content: u.length > 0 && /* @__PURE__ */ (0, E.jsx)("div", {
 				className: "updog__error-filter-section__children",
-				children: c.map((e) => /* @__PURE__ */ (0, E.jsx)(bN, {
+				children: u.map((e) => /* @__PURE__ */ (0, E.jsx)(bN, {
 					message: e,
 					count: a[e] ?? 0,
 					checked: o.has(e),
-					onChange: f
+					onChange: v
 				}, e))
 			})
 		})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.17",
+  "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",