@iyulab/flex-table 0.52.0 → 0.54.0

package/dist/source-CwbD-6ea.js

@@ -0,0 +1,247 @@
+import { n as e } from "./locale-B1SiVDS1.js";
+import t from "odata-query";
+//#region src/odata/query.ts
+function n(e) {
+	let t = e.split(/\s+/).map((e) => e.replace(/"/g, "")).filter((e) => e.length > 0);
+	if (t.length !== 0) return t.map((e) => `"${e}"`).join(" AND ");
+}
+function r(e) {
+	let { defaultOrderBy: t, initialPage: n = 0, initialSearch: r = "", initialSort: a } = e;
+	return {
+		page: n,
+		search: r,
+		sortCriteria: a ?? (t ? i(t) : [])
+	};
+}
+function i(e) {
+	return e.split(",").map((e) => {
+		let t = e.trim().split(/\s+/);
+		return {
+			key: t[0],
+			direction: t[1]?.toLowerCase() === "desc" ? "desc" : "asc"
+		};
+	});
+}
+function a(e) {
+	let { page: r, pageSize: i, sortCriteria: a = [], defaultOrderBy: o, search: s, fixedFilter: c } = e, l = a.length > 0 ? a.map((e) => `${e.key} ${e.direction}`).join(", ") : o, u = {
+		top: i,
+		skip: r * i,
+		count: !0
+	};
+	if (l && (u.orderBy = l), c && (u.filter = c), s) {
+		let e = n(s);
+		e && (u.search = e);
+	}
+	return t(u);
+}
+//#endregion
+//#region src/core/source-error.ts
+async function o(t) {
+	let n = await t.text().catch(() => ""), r = {
+		message: e("requestFailed", { status: t.status }),
+		status: t.status
+	};
+	if (!n) return r;
+	let i = n;
+	try {
+		i = JSON.parse(n);
+	} catch {}
+	if (r.body = i, !i || typeof i != "object") return r;
+	let a = i, o = a.error && typeof a.error == "object" ? a.error : a;
+	typeof o.message == "string" && o.message ? r.message = o.message : typeof a.message == "string" && a.message && (r.message = a.message), typeof o.code == "string" && o.code && (r.code = o.code);
+	let c = s(o.details);
+	return c && (r.details = c), r;
+}
+function s(e) {
+	if (!Array.isArray(e)) return;
+	let t = e.filter((e) => {
+		if (!e || typeof e != "object") return !1;
+		let t = e;
+		return typeof t.code == "string" && typeof t.message == "string";
+	});
+	return t.length > 0 ? t : void 0;
+}
+var c = class extends Error {
+	constructor(e) {
+		super(e.message), this.name = "SourceRequestError", this.failure = e;
+	}
+};
+function l(t) {
+	return new c({
+		message: e("networkFailed"),
+		cause: t
+	});
+}
+function u(e) {
+	return e instanceof c ? e.failure : e instanceof Error ? { message: e.message } : { message: String(e) };
+}
+//#endregion
+//#region src/odata/source.ts
+function d(e, t = {}) {
+	let n = e, i = t, s = f(t.fixedFilter), d = r({
+		defaultOrderBy: t.defaultOrderBy,
+		initialPage: t.initialPage ?? 0,
+		initialSearch: t.initialSearch ?? "",
+		initialSort: t.initialSort
+	}), p = {
+		data: [],
+		totalCount: 0,
+		loading: !0,
+		error: null,
+		page: d.page,
+		sortCriteria: d.sortCriteria,
+		search: d.search
+	}, m = x(), h = /* @__PURE__ */ new Set(), g = null, _ = !1, v = null;
+	function y() {
+		return i.enabled ?? !0;
+	}
+	function b() {
+		return i.pageSize ?? 20;
+	}
+	function x() {
+		return {
+			...p,
+			loading: p.loading || !y()
+		};
+	}
+	function S(e) {
+		p = {
+			...p,
+			...e
+		}, C();
+	}
+	function C() {
+		let e = x();
+		if (!Object.keys(e).every((t) => e[t] === m[t])) {
+			m = e;
+			for (let e of [...h]) e();
+		}
+	}
+	function w() {
+		return JSON.stringify([
+			n,
+			i.baseUrl,
+			b(),
+			i.defaultOrderBy,
+			s,
+			p.page,
+			p.sortCriteria,
+			p.search
+		]);
+	}
+	function T() {
+		_ || (_ = !0, queueMicrotask(() => {
+			_ = !1, E();
+		}));
+	}
+	function E() {
+		if (h.size === 0) return;
+		if (!y()) {
+			g?.abort(), g = null, v = null, C();
+			return;
+		}
+		let e = w();
+		e !== v && (v = e, D());
+	}
+	function D() {
+		g?.abort();
+		let e = new AbortController();
+		g = e;
+		let { page: t, sortCriteria: r, search: s } = p, d = b(), f = i.fetcher ?? fetch, m = i.onUnauthorized;
+		S({
+			loading: !0,
+			error: null
+		});
+		let h = a({
+			page: t,
+			pageSize: d,
+			sortCriteria: r,
+			defaultOrderBy: i.defaultOrderBy,
+			search: s,
+			fixedFilter: i.fixedFilter
+		}), _ = `${i.baseUrl ?? window.location.origin}${n}${h}`, v = async (t) => {
+			let n;
+			try {
+				n = await f(t, { signal: e.signal });
+			} catch (e) {
+				throw e?.name === "AbortError" ? e : l(e);
+			}
+			if (!n.ok) throw n.status === 401 && m && m(n), new c(await o(n));
+			return n.json();
+		};
+		(async () => {
+			let e = await v(_), t = [...e.value ?? e], n = new URL(_).origin, r = /* @__PURE__ */ new Set([_]), i = _, a = e["@odata.nextLink"];
+			for (; typeof a == "string" && a && t.length < d;) {
+				let e = new URL(a, i);
+				if (e.origin !== n) throw Error(`OData nextLink points outside the source origin (${e.origin})`);
+				if (i = e.toString(), r.has(i)) throw Error(`OData nextLink repeats an already-read page (${i})`);
+				r.add(i);
+				let o = await v(i);
+				t.push(...o.value ?? []), a = o["@odata.nextLink"];
+			}
+			return {
+				count: e["@odata.count"],
+				rows: t
+			};
+		})().then(({ count: n, rows: r }) => {
+			if (e.signal.aborted) return;
+			let i = n ?? 0, a = i === 0 ? 0 : Math.ceil(i / d) - 1;
+			t > a ? (S({
+				data: r,
+				totalCount: i,
+				error: null,
+				page: a
+			}), T()) : S({
+				data: r,
+				totalCount: i,
+				error: null
+			});
+		}).catch((t) => {
+			e.signal.aborted || t?.name !== "AbortError" && S({
+				error: u(t),
+				data: [],
+				totalCount: 0
+			});
+		}).finally(() => {
+			e.signal.aborted || S({ loading: !1 });
+		});
+	}
+	return {
+		getState: () => m,
+		subscribe(e) {
+			return h.add(e), h.size === 1 && T(), () => {
+				!h.delete(e) || h.size > 0 || (g?.abort(), g = null, v = null);
+			};
+		},
+		setPage(e) {
+			S({ page: e }), T();
+		},
+		setSort(e) {
+			S({
+				sortCriteria: e,
+				page: 0
+			}), T();
+		},
+		setSearch(e) {
+			S({
+				search: e,
+				page: 0
+			}), T();
+		},
+		refresh() {
+			y() && (v = null, T());
+		},
+		update(e, t = {}) {
+			let r = f(t.fixedFilter), a = r !== s;
+			n = e, i = t, s = r, a && (p = {
+				...p,
+				page: 0
+			}), C(), T();
+		}
+	};
+}
+function f(e) {
+	return e ? JSON.stringify(e) : "";
+}
+//#endregion
+export { r as a, i, a as n, n as r, d as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

package/skills/iyulab-flex-table/SKILL.md

@@ -27,7 +27,7 @@ npm install @lit/react react
 |---|---|
 | `@iyulab/flex-table` | Registers `<flex-table>`; exports `FlexTable`, types, `exportData`, `renderCell`, `flexTableLocale`, `RowSelectionState`, `UndoStack`, `effectiveAlign` |
 | `@iyulab/flex-table/react` | `FlexTableReact`, `useODataSource`, `useArraySource` |
-| `@iyulab/flex-table/odata` | Pure helpers, no React: `buildODataQuery`, `buildSearchExpression`, `parseOrderBy` |
+| `@iyulab/flex-table/odata` | No React: `createODataSource` (the source `useODataSource` adapts), `ODataSourceController` (Lit), `buildODataQuery`, `buildSearchExpression`, `parseOrderBy` |
 | `@iyulab/flex-table/array` | Pure helper, no React: `computeArrayView` |
 
 ## Quick start
@@ -126,8 +126,7 @@ Server paging from OData or an in-memory array uses the same binding — see `re
 - `--ft-row-height` is read once at first render; change row height later via `rowHeight` / `row-height`.
 - Styles for elements returned by `render` must be passed through the `stylesheets` property
   (constructable `CSSStyleSheet[]`); document CSS does not cross the shadow boundary.
-- `useODataSource` `fetcher` / `onUnauthorized` must be stable references (`useCallback`).
-- Always render `error.message` from `useODataSource`; a failed request otherwise leaves the grid empty. Branch on `error.status` / `error.code` rather than parsing the message.
+- Always show `error` from `useODataSource` — pass it to the table (`error={source.error}`); a failed request otherwise leaves the grid empty. Branch on `error.status` / `error.code` rather than parsing the message.
 
 ## References
 

package/skills/iyulab-flex-table/references/api.md

@@ -23,6 +23,7 @@ All names below are members of the `FlexTable` class (`<flex-table>`).
 | `footerData` | `footer-data` | `Record<string, string \| TemplateResult> \| null` | `null` | Summary row keyed by column key |
 | `emptyMessage` | `empty-message` | `string` | `'No data'` | |
 | `noMatchingMessage` | `no-matching-message` | `string` | `'No matching data'` | All rows hidden by filters |
+| `error` | — | `{ message: string } \| null` | `null` | Load failure shown as an alert instead of rows / empty state (a source's `error` as is) |
 | `loading` | `loading` | `boolean` | `false` | Loading overlay + `aria-busy` |
 | `importEnabled` | `import-enabled` | `boolean` | `false` | Drag-and-drop `.xlsx` / `.csv` import |
 | `clearUndoOnDataChange` | `clear-undo-on-data-change` | `boolean` | `false` | Replacing `data` clears undo history |

package/skills/iyulab-flex-table/references/react.md

@@ -63,22 +63,20 @@ Fetches paged, sorted, searched rows from an OData v4 endpoint. Bind the result
 server-mode table:
 
 ```tsx
-import { useCallback } from 'react';
 import { FlexTableReact, useODataSource } from '@iyulab/flex-table/react';
 
 function Orders() {
-  const fetcher = useCallback((input: string, init: RequestInit) => fetch(input, init), []);
-  const source = useODataSource<Order>('/api/orders', { pageSize: 20, fetcher });
+  const source = useODataSource<Order>('/api/orders', { pageSize: 20 });
 
   return (
     <>
       <input value={source.search} onChange={(e) => source.setSearch(e.target.value)} />
-      {source.error && <p role="alert">{source.error.message}</p>}
       <FlexTableReact<Order>
         dataMode="server"
         columns={columns}
         data={source.data}
         loading={source.loading}
+        error={source.error}
         onSortChange={source.onSortChange}
         clearSelectionOnDataChange
       />
@@ -101,8 +99,8 @@ function Orders() {
 | `initialSort` | — | `SortCriteria[]`; overrides `defaultOrderBy`; `[]` means no sort |
 | `fixedFilter` | — | odata-query filter object, always applied; value change resets to page 0 (compared by value) |
 | `baseUrl` | `window.location.origin` | For proxy/BFF setups |
-| `fetcher` | global `fetch` | `(input, init) => Promise<Response>`; keep stable |
-| `onUnauthorized` | — | `(response) => void` on 401 only (403 surfaces as `error`); keep stable |
+| `fetcher` | global `fetch` | `(input, init) => Promise<Response>`; read when each request starts |
+| `onUnauthorized` | — | `(response) => void` on 401 only (403 surfaces as `error`); read when each request starts |
 | `enabled` | `true` | While `false`: no request, `loading` stays `true`, `refresh()` is a no-op, in-flight request is cancelled |
 
 ### Result
@@ -111,7 +109,7 @@ function Orders() {
 |---|---|
 | `data`, `totalCount` | Current page and `@odata.count`; `@odata.nextLink` is followed to fill a page |
 | `loading` | Request in flight, or no answer yet (true from the first render until the first response settles, and while `enabled: false`) — so `!loading && totalCount === 0` means "no results" |
-| `error` | `SourceError \| null` — `{ message, status?, code?, details?, body?, cause? }`; render `error.message`, branch on `status` / `code` (OData `error.code`). `message` is the server's sentence when it sent one; otherwise this package's, in the `flexTableLocale` language — `requestFailed` (`Request failed ({status})`) when a response came back, `networkFailed` when none did (the transport's exception is in `cause`) |
+| `error` | `SourceError \| null` — `{ message, status?, code?, details?, body?, cause? }`; pass it to the table (`error`) or render `error.message`; branch on `status` / `code` (OData `error.code`). `message` is the server's sentence when it sent one; otherwise this package's, in the `flexTableLocale` language — `requestFailed` (`Request failed ({status})`) when a response came back, `networkFailed` when none did (the transport's exception is in `cause`) |
 | `page`, `setPage` | Zero-based |
 | `sortCriteria`, `onSortChange` | Pass `onSortChange` to the table's `sort-change` (resets to page 0) |
 | `search`, `setSearch` | Literal text (resets to page 0) |
@@ -159,6 +157,27 @@ Differences: `totalCount` is the count after search, `loading` is always `false`
 
 ## Without React
 
+`useODataSource` adapts a framework-neutral source with the same options and state:
+`createODataSource(url, options)` → `getState()` · `subscribe(listener)` (the first subscriber starts loading, the last
+unsubscribe cancels) · `setPage` · `setSort(criteria)` · `setSearch` · `refresh` · `update(url, options)`. Changes in one
+tick become one request. For Lit, `ODataSourceController` subscribes on connect, cancels on disconnect and re-renders
+the host:
+
+```ts
+import { ODataSourceController } from '@iyulab/flex-table/odata';
+
+class OrdersPage extends LitElement {
+  private orders = new ODataSourceController<Order>(this, '/api/orders', { pageSize: 20 });
+  render() {
+    const { data, loading, error } = this.orders.state;
+    return html`<flex-table data-mode="server" .data=${data} .loading=${loading} .error=${error}
+        @sort-change=${(e: CustomEvent) => this.orders.source.setSort(e.detail.criteria)}></flex-table>`;
+  }
+}
+```
+
+Pure helpers:
+
 ```ts
 import { buildODataQuery, buildSearchExpression, parseOrderBy } from '@iyulab/flex-table/odata';
 import { computeArrayView } from '@iyulab/flex-table/array';

package/dist/query-Dw4iO0ir.js

@@ -1,37 +0,0 @@
-import e from "odata-query";
-//#region src/odata/query.ts
-function t(e) {
-	let t = e.split(/\s+/).map((e) => e.replace(/"/g, "")).filter((e) => e.length > 0);
-	if (t.length !== 0) return t.map((e) => `"${e}"`).join(" AND ");
-}
-function n(e) {
-	let { defaultOrderBy: t, initialPage: n = 0, initialSearch: i = "", initialSort: a } = e;
-	return {
-		page: n,
-		search: i,
-		sortCriteria: a ?? (t ? r(t) : [])
-	};
-}
-function r(e) {
-	return e.split(",").map((e) => {
-		let t = e.trim().split(/\s+/);
-		return {
-			key: t[0],
-			direction: t[1]?.toLowerCase() === "desc" ? "desc" : "asc"
-		};
-	});
-}
-function i(n) {
-	let { page: r, pageSize: i, sortCriteria: a = [], defaultOrderBy: o, search: s, fixedFilter: c } = n, l = a.length > 0 ? a.map((e) => `${e.key} ${e.direction}`).join(", ") : o, u = {
-		top: i,
-		skip: r * i,
-		count: !0
-	};
-	if (l && (u.orderBy = l), c && (u.filter = c), s) {
-		let e = t(s);
-		e && (u.search = e);
-	}
-	return e(u);
-}
-//#endregion
-export { n as i, t as n, r, i as t };