@updog/data-editor-wc 0.1.31 → 0.1.33

package/README.md

@@ -1,6 +1,6 @@
-# @updog/data-editor-wc
+# CSV Importer & Spreadsheet Editor Web Component
 
-Client-side CSV importer and spreadsheet editor SDK, shipped as a Web Component for Vue, Angular, Svelte, and vanilla JS. Your users import files, match columns to your schema, fix errors, and submit clean data. Edits happen inline, in the browser, at 1M+ rows.
+> `@updog/data-editor-wc`: client-side CSV importer and spreadsheet editor SDK, shipped as a Web Component for Vue, Angular, Svelte, and vanilla JS. Your users import files, match columns to your schema, fix errors, and submit clean data. Edits happen inline, in the browser, at 1M+ rows.
 
 ## What is @updog/data-editor-wc
 
@@ -169,13 +169,13 @@ In inline mode, `show()` / `hide()` and the `open` attribute don't apply. The `c
 | `readonly` | `boolean` | No | `false` | Hide all editing UI. |
 | `enableDeleteRow` | `"all"` \| `"new"` \| `false` | No | `false` | Row deletion policy. |
 | `enableAddRow` | `boolean` | No | `true` | Show the "Add row" button. |
+| `enableAddSource` | `boolean` | No | `true` | Show the "Add data source" button. |
 | `enableCreateColumn` | `boolean` | No | `true` | Allow creating columns for unmatched CSV headers during import. |
-| `importFormats` | `DataEditorFormat[]` | No | all | Allowed import formats. `[]` disables import. |
-| `exportFormats` | `DataEditorFormat[]` | No | all | Allowed export formats. `[]` disables export. |
+| `importFormats` | `DataEditorFormat[] \| false` | No | all | Allowed import formats. `false` or `[]` disables import. |
+| `exportFormats` | `DataEditorFormat[] \| false` | No | all | Allowed export formats. `false` or `[]` disables export. |
 | `remoteSources` | `RemoteSource[]` | No | — | Custom import buttons (Google Sheets, S3, etc.) rendered on the upload step. |
 | `rowHeight` | `number` | No | `34` | Row height in pixels. |
 | `headerHeight` | `number` | No | `36` | Header height in pixels. |
-| `server` | `DataEditorServer` | No | — | Server-delegated mode: SDK renders, your backend handles queries and mutations. |
 | `chat` | `DataEditorChat` | No | — | Bring-your-own AI chat panel. |
 | `onColumnMatch` | `(headers, columns) => ...` | No | — | Override import column matching. |
 | `onValueMatch` | `(valuesToMatch) => ...` | No | — | Override import value matching for `select` columns. |
@@ -236,6 +236,9 @@ editor.columns = [
     // Sidebar filter control.
     filter: { type: "select" },
 
+    // Allow pinning this column to the leading edge via the header menu. Default true.
+    pinnable: true,
+
     // Lock cells in this column. `"default"` locks only default-source rows.
     locked: "default",
   },
@@ -248,7 +251,7 @@ editor.columns = [
 
 ## Built-in Validators
 
-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.
+Validators are declarative objects passed in the `validators` array on each column. They run on every edit, entirely in the browser.
 
 | `type` | Fields | Behavior |
 |---|---|---|
@@ -291,7 +294,7 @@ A `ValidationError` with `level: "error"` flags the cell in the grid but does **
 
 ### Custom validators
 
-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.
+For cross-field checks or anything not covered by the built-ins, wrap a `(value, row) => ValidationError | null` function in `{ type: "function", fn }`. Use `dependentFields` on the column to trigger re-validation when another column changes.
 
 ```js
 const endAfterStart = (value, row) => {

package/index.d.ts

@@ -130,6 +130,7 @@ declare var export_default = {
     },
     footer: {
       submit: "Submit",
+      submitBlockedByErrors: "Fix errors before submitting",
       import: "Import",
       next: "Next",
       cancel: "Cancel",
@@ -1217,6 +1218,11 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
      * @default true
      */
     enableAddSource?: boolean;
+    /**
+     * Disable submit while any row has a validation error.
+     * @default false
+     */
+    blockSubmitOnError?: boolean;
     /**
      * Which file formats the user can import. `undefined` allows all formats,
      * `false` disables import entirely.

package/index.js

@@ -8112,6 +8112,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		},
 		footer: {
 			submit: "Submit",
+			submitBlockedByErrors: "Fix errors before submitting",
 			import: "Import",
 			next: "Next",
 			cancel: "Cancel",
@@ -22058,71 +22059,72 @@ function Xd(e, t, n, r) {
 }
 //#endregion
 //#region src/context/useViewModel.tsx
-function Zd({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete: i, variant: a, showUploader: o, setShowUploader: s, storeRef: c, enableDeleteRow: l, enableAddRow: u, enableAddSource: d, importFormats: f, exportFormats: p, rowHeight: m, headerHeight: h, readonly: g, enableCreateColumn: v, onColumnMatch: y, onValueMatch: b, synonyms: x, sampleData: S, chat: C, remoteSources: w, onError: T, errorHandler: E }) {
-	let { t: D } = k(), O = r ? "server" : "client", A = Vd(O, r, D("dataEditor.dataSources.existingData"), E ?? new dl(T));
-	A.setSchemaColumns(e);
-	let { addDynamicColumns: j, removeDynamicColumn: M, updateColumn: N } = Gd(A), P = (0, _.useCallback)((e) => {
-		A.setDynamicColumns(e);
-	}, [A]), F = (0, _.useSyncExternalStore)(A.subscribe, A.getEffectiveColumns), { navigateToCell: I, navigateByIndex: L, navigateToCellRef: R, resetScrollRef: z, scrollToGridTop: B } = Kd(A), { validator: V, validatorRef: H, findReplace: U } = Xd(A, F, r?.findAndReplace, L), { search: ee, setSearch: te, matchCase: ne, setMatchCase: re, matchEntireCell: ie, setMatchEntireCell: ae, searchMode: oe, setSearchMode: se, filterColumns: ce, setFilterColumns: le, filtersResetKey: ue, resetFilters: de } = Jd(A, U, I, B);
-	Wd(A, H, n, O);
-	let { onVisibleRangeChange: fe } = Yd(A, O), { portalRef: pe } = qd(), [me, he] = (0, _.useState)(null);
-	return (0, _.useEffect)(() => (c && (c.current = A), () => {
+function Zd({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete: i, variant: a, showUploader: o, setShowUploader: s, storeRef: c, enableDeleteRow: l, enableAddRow: u, enableAddSource: d, blockSubmitOnError: f, importFormats: p, exportFormats: m, rowHeight: h, headerHeight: g, readonly: v, enableCreateColumn: y, onColumnMatch: b, onValueMatch: x, synonyms: S, sampleData: C, chat: w, remoteSources: T, onError: E, errorHandler: D }) {
+	let { t: O } = k(), A = r ? "server" : "client", j = Vd(A, r, O("dataEditor.dataSources.existingData"), D ?? new dl(E));
+	j.setSchemaColumns(e);
+	let { addDynamicColumns: M, removeDynamicColumn: N, updateColumn: P } = Gd(j), F = (0, _.useCallback)((e) => {
+		j.setDynamicColumns(e);
+	}, [j]), I = (0, _.useSyncExternalStore)(j.subscribe, j.getEffectiveColumns), { navigateToCell: L, navigateByIndex: R, navigateToCellRef: z, resetScrollRef: B, scrollToGridTop: V } = Kd(j), { validator: H, validatorRef: U, findReplace: ee } = Xd(j, I, r?.findAndReplace, R), { search: te, setSearch: ne, matchCase: re, setMatchCase: ie, matchEntireCell: ae, setMatchEntireCell: oe, searchMode: se, setSearchMode: ce, filterColumns: le, setFilterColumns: ue, filtersResetKey: de, resetFilters: fe } = Jd(j, ee, L, V);
+	Wd(j, U, n, A);
+	let { onVisibleRangeChange: pe } = Yd(j, A), { portalRef: me } = qd(), [he, ge] = (0, _.useState)(null);
+	return (0, _.useEffect)(() => (c && (c.current = j), () => {
 		c && (c.current = null);
-	}), [A, c]), (0, _.useEffect)(() => {
-		t && A.setPrimaryKey(t);
-	}, [A, t]), {
-		mode: O,
+	}), [j, c]), (0, _.useEffect)(() => {
+		t && j.setPrimaryKey(t);
+	}, [j, t]), {
+		mode: A,
 		scaleClient: r,
-		columns: F,
+		columns: I,
 		primaryKey: t,
 		enableDeleteRow: l ?? !1,
 		enableAddRow: u ?? !0,
 		enableAddSource: d ?? !0,
-		importFormats: f ?? pl,
-		exportFormats: p ?? pl,
-		rowHeight: m ?? 34,
-		headerHeight: h ?? 36,
-		store: A,
-		validator: V,
-		findReplace: U,
+		blockSubmitOnError: f ?? !1,
+		importFormats: p ?? pl,
+		exportFormats: m ?? pl,
+		rowHeight: h ?? 34,
+		headerHeight: g ?? 36,
+		store: j,
+		validator: H,
+		findReplace: ee,
 		onComplete: i,
 		showUploader: o,
 		setShowUploader: s,
 		variant: a ?? "editor",
-		search: ee,
-		setSearch: te,
-		matchCase: ne,
-		setMatchCase: re,
-		matchEntireCell: ie,
-		setMatchEntireCell: ae,
-		searchMode: oe,
-		setSearchMode: se,
-		filterColumns: ce,
-		setFilterColumns: le,
-		navigateToCell: I,
-		navigateToCellRef: R,
-		resetScrollRef: z,
-		scrollToGridTop: B,
-		portalRef: pe,
-		readonly: g ?? !1,
-		filtersResetKey: ue,
-		resetFilters: de,
+		search: te,
+		setSearch: ne,
+		matchCase: re,
+		setMatchCase: ie,
+		matchEntireCell: ae,
+		setMatchEntireCell: oe,
+		searchMode: se,
+		setSearchMode: ce,
+		filterColumns: le,
+		setFilterColumns: ue,
+		navigateToCell: L,
+		navigateToCellRef: z,
+		resetScrollRef: B,
+		scrollToGridTop: V,
+		portalRef: me,
+		readonly: v ?? !1,
+		filtersResetKey: de,
+		resetFilters: fe,
 		originalColumns: e,
-		dynamicColumns: A.getDynamicColumns(),
-		setDynamicColumns: P,
-		addDynamicColumns: j,
-		removeDynamicColumn: M,
-		updateColumn: N,
-		gridClipboard: me,
-		setGridClipboard: he,
-		enableCreateColumn: v ?? !0,
-		onColumnMatch: y,
-		onValueMatch: b,
-		synonyms: x,
-		sampleData: S,
-		onVisibleRangeChange: fe,
-		chat: C,
-		remoteSources: w ?? []
+		dynamicColumns: j.getDynamicColumns(),
+		setDynamicColumns: F,
+		addDynamicColumns: M,
+		removeDynamicColumn: N,
+		updateColumn: P,
+		gridClipboard: he,
+		setGridClipboard: ge,
+		enableCreateColumn: y ?? !0,
+		onColumnMatch: b,
+		onValueMatch: x,
+		synonyms: S,
+		sampleData: C,
+		onVisibleRangeChange: pe,
+		chat: w,
+		remoteSources: T ?? []
 	};
 }
 //#endregion
@@ -25615,74 +25617,74 @@ var qv = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
 		})
 	});
 }, Yv = () => {
-	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = ef(), { t: o, rtl: s } = k(), { canUndo: c, canRedo: l, undo: u, redo: d } = xl(e, a), { dirtyRowCount: f, deletedRowCount: p, isLoading: m, sources: h, phase: g } = fl(e), v = f > 0 || p > 0, y = m || h.some((e) => e.isLoading), b = g === "processing", [x, S] = (0, _.useState)(!1), { value: C, setTrue: w, setFalse: T } = ul(!1), [D, O] = (0, _.useState)(!1), A = (0, _.useCallback)(async () => {
+	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a, blockSubmitOnError: o } = ef(), { t: s, rtl: c } = k(), { canUndo: l, canRedo: u, undo: d, redo: f } = xl(e, a), { dirtyRowCount: p, deletedRowCount: m, errorCount: h, isLoading: g, sources: v, phase: y } = fl(e), b = p > 0 || m > 0, x = g || v.some((e) => e.isLoading), S = y === "processing", C = o && h > 0, [w, T] = (0, _.useState)(!1), { value: D, setTrue: O, setFalse: A } = ul(!1), [j, M] = (0, _.useState)(!1), N = (0, _.useCallback)(async () => {
 		if (!n) return;
 		let t = e.getResultBySource();
-		O(!0);
+		M(!0);
 		try {
-			await n(t), e.clear(), T();
+			await n(t), e.clear(), A();
 		} catch {} finally {
-			O(!1);
+			M(!1);
 		}
 	}, [
 		e,
 		n,
-		T
-	]), j = o("dataEditor.footer.export"), M = o("dataEditor.footer.exportAll"), N = o("dataEditor.footer.exportFiltered"), P = o("dataEditor.footer.csvFormat"), F = o("dataEditor.footer.excelFormat"), I = o("dataEditor.footer.jsonFormat"), L = o("dataEditor.footer.tsvFormat"), R = o("dataEditor.footer.xmlFormat"), z = (0, _.useMemo)(() => [
+		A
+	]), P = s("dataEditor.footer.export"), F = s("dataEditor.footer.exportAll"), I = s("dataEditor.footer.exportFiltered"), L = s("dataEditor.footer.csvFormat"), R = s("dataEditor.footer.excelFormat"), z = s("dataEditor.footer.jsonFormat"), B = s("dataEditor.footer.tsvFormat"), V = s("dataEditor.footer.xmlFormat"), H = (0, _.useMemo)(() => [
 		{
 			menuId: "csv",
 			format: "csv",
-			text: P
+			text: L
 		},
 		{
 			menuId: "tsv",
 			format: "tsv",
-			text: L
+			text: B
 		},
 		{
 			menuId: "excel",
 			format: "xlsx",
-			text: F
+			text: R
 		},
 		{
 			menuId: "json",
 			format: "json",
-			text: I
+			text: z
 		},
 		{
 			menuId: "xml",
 			format: "xml",
-			text: R
+			text: V
 		}
 	], [
-		P,
 		L,
-		F,
-		I,
-		R
-	]), B = r !== !1 && (!e.isServer() || e.hasServerExport), V = (0, _.useMemo)(() => {
-		let e = r === !1 ? [] : z.filter((e) => r.includes(e.format));
+		B,
+		R,
+		z,
+		V
+	]), U = r !== !1 && (!e.isServer() || e.hasServerExport), ee = (0, _.useMemo)(() => {
+		let e = r === !1 ? [] : H.filter((e) => r.includes(e.format));
 		return [{
 			id: "export-all",
-			text: M,
+			text: F,
 			options: e.map((e) => ({
 				id: `all-${e.menuId}`,
 				text: e.text
 			}))
 		}, {
 			id: "export-filtered",
-			text: N,
+			text: I,
 			options: e.map((e) => ({
 				id: `filtered-${e.menuId}`,
 				text: e.text
 			}))
 		}];
 	}, [
-		M,
-		N,
-		z,
+		F,
+		I,
+		H,
 		r
-	]), H = (0, _.useCallback)((n) => {
+	]), te = (0, _.useCallback)((n) => {
 		let [r, i] = n.split("-"), a = {
 			csv: "csv",
 			tsv: "tsv",
@@ -25690,70 +25692,75 @@ var qv = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
 			json: "json",
 			xml: "xml"
 		};
-		S(!0), (e.isServer() ? e.serverExport(a[i], r === "all", s) : Kv({
+		T(!0), (e.isServer() ? e.serverExport(a[i], r === "all", c) : Kv({
 			store: e,
 			columns: t,
 			format: a[i],
 			scope: r,
-			rtl: s
-		})).finally(() => S(!1));
+			rtl: c
+		})).finally(() => T(!1));
 	}, [
 		e,
 		t,
-		s
-	]), U = o("dataEditor.footer.submit");
+		c
+	]), ne = s("dataEditor.footer.submit"), re = !b || S || j || C;
 	return /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [/* @__PURE__ */ (0, E.jsxs)("footer", {
 		className: "updog__data-editor-footer",
 		children: [/* @__PURE__ */ (0, E.jsx)(Jv, {}), /* @__PURE__ */ (0, E.jsxs)("div", {
 			className: "updog__data-editor-footer__actions",
 			children: [
 				!i && /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [/* @__PURE__ */ (0, E.jsx)(Rs, {
-					content: o("dataEditor.undoRedo.undo"),
+					content: s("dataEditor.undoRedo.undo"),
 					children: /* @__PURE__ */ (0, E.jsx)(at, {
 						variant: "ghost",
 						color: "neutral",
-						disabled: !c || b,
-						onClick: u,
-						"aria-label": o("dataEditor.undoRedo.undo"),
+						disabled: !l || S,
+						onClick: d,
+						"aria-label": s("dataEditor.undoRedo.undo"),
 						children: /* @__PURE__ */ (0, E.jsx)(Be, { className: "rtl-mirror" })
 					})
 				}), /* @__PURE__ */ (0, E.jsx)(Rs, {
-					content: o("dataEditor.undoRedo.redo"),
+					content: s("dataEditor.undoRedo.redo"),
 					children: /* @__PURE__ */ (0, E.jsx)(at, {
 						variant: "ghost",
 						color: "neutral",
-						disabled: !l || b,
-						onClick: d,
-						"aria-label": o("dataEditor.undoRedo.redo"),
+						disabled: !u || S,
+						onClick: f,
+						"aria-label": s("dataEditor.undoRedo.redo"),
 						children: /* @__PURE__ */ (0, E.jsx)(ke, { className: "rtl-mirror" })
 					})
 				})] }),
-				B && /* @__PURE__ */ (0, E.jsx)(cc, {
-					options: V,
-					onSelect: H,
+				U && /* @__PURE__ */ (0, E.jsx)(cc, {
+					options: ee,
+					onSelect: te,
 					placement: "top-end",
 					children: /* @__PURE__ */ (0, E.jsx)(rt, {
 						variant: "outlined",
 						color: "neutral",
-						loading: x,
-						disabled: y || b,
+						loading: w,
+						disabled: x || S,
 						spinnerPosition: "end",
 						endIcon: /* @__PURE__ */ (0, E.jsx)(ie, {}),
-						children: j
+						children: P
 					})
 				}),
-				!i && /* @__PURE__ */ (0, E.jsx)(rt, {
-					disabled: !v || b || D,
-					onClick: w,
-					children: U
+				!i && /* @__PURE__ */ (0, E.jsx)(Rs, {
+					disabled: !C,
+					content: s("dataEditor.footer.submitBlockedByErrors"),
+					placement: "top-end",
+					children: /* @__PURE__ */ (0, E.jsx)(rt, {
+						disabled: re,
+						onClick: O,
+						children: ne
+					})
 				})
 			]
 		})]
 	}), /* @__PURE__ */ (0, E.jsx)(qv, {
-		open: C,
-		onClose: T,
-		onConfirm: A,
-		loading: D
+		open: D,
+		onClose: A,
+		onConfirm: N,
+		loading: j
 	})] });
 }, Xv = ({ initialValues: e, existingNames: t, onClose: n, onSubmit: r }) => {
 	let { t: i } = k(), a = e.id !== void 0, o = (0, _.useMemo)(() => {
@@ -52064,6 +52071,7 @@ function oV(e) {
 		enableDeleteRow: e.enableDeleteRow,
 		enableAddRow: e.enableAddRow,
 		enableAddSource: e.enableAddSource,
+		blockSubmitOnError: e.blockSubmitOnError,
 		importFormats: e.importFormats,
 		exportFormats: e.exportFormats,
 		readonly: e.readonly,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "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",
@@ -32,8 +32,11 @@
   "keywords": [
     "csv-importer",
     "csv-import",
+    "importer",
     "data-import",
     "data-import-sdk",
+    "column-mapping",
+    "spreadsheet",
     "spreadsheet-editor",
     "web-component",
     "custom-element",
@@ -43,7 +46,11 @@
     "client-side",
     "data-editor",
     "csv",
-    "xlsx"
+    "xlsx",
+    "excel",
+    "flatfile-alternative",
+    "dromo-alternative",
+    "usecsv-alternative"
   ],
   "publishConfig": {
     "access": "public",