@iyulab/flex-table 0.50.3 → 0.51.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.51.0] - 2026-10-06
+
+### Fixed
+
+- **A data-source failure the server said nothing about is described in the table's language.** With no message in
+  the response, `SourceError.message` was a fixed English `Request failed (<status>)`; with no response at all it was
+  the transport's exception text, which differs by browser (`Failed to fetch`, `NetworkError when attempting to fetch
+  resource.`). Both rendered in English in any locale, and telling them from a server sentence meant matching the
+  string's shape. They now come from `flexTableLocale` — `requestFailed` (`{status}` parameter) and `networkFailed`
+  (en and ko built in, others via `register`). A server sentence still wins.
+
+### Added
+
+- `SourceError.cause` — on a failure with no response, the exception the transport threw (for diagnostics).
+
+## [0.50.4] - 2026-10-06
+
+### Fixed
+
+- **`useODataSource` reports `loading: true` from the first render** until the first response settles. The first
+  render used to return `loading: false` with no rows before the request went out, so a screen that shows an empty
+  state on `!loading && totalCount === 0` flashed "no results" for a frame on every mount. Mounting with
+  `enabled: false` already reported `loading: true`; both paths now follow one rule.
+
 ## [0.50.3] - 2026-10-06
 
 ### Documentation

package/README.md

@@ -815,7 +815,7 @@ The hook returns:
 | Field | Description |
 |---|---|
 | `data` / `totalCount` | Current page rows and the server's total (`@odata.count`). When the server pages its response (`@odata.nextLink`, e.g. a page size smaller than `pageSize`), the hook follows the link until the page is filled; a link outside the request's origin, or one that returns to a page already read, is reported through `error` instead of showing a short page |
-| `loading` | A request is in flight |
+| `loading` | A request is in flight, or none has answered yet (true from the first render until the first response settles, and while `enabled: false`) |
 | `error` | The last failed request, or `null`: `{ message, status?, code?, details?, body? }`. **Render `error.message`** — a failed request otherwise leaves the grid silently empty. Branch on `status` (HTTP), `code` (the server's rejection code, OData `error.code`) and `details` (OData `error.details`); `body` is the parsed response (or its text). A failure with no response — a network error, or a `@odata.nextLink` the hook refused — has a `message` only |
 | `page` / `setPage` | Zero-based page index |
 | `sortCriteria` / `onSortChange` | Bind `onSortChange` to the table's `sort-change` event |

package/dist/core/source-error.d.ts

@@ -13,7 +13,10 @@ export interface SourceErrorDetail {
  * 엿보는 것 말고는 길이 없다.
  */
 export interface SourceError {
-    /** 보여 줄 문장 — 서버가 준 메시지가 있으면 그것, 없으면 `Request failed (<status>)`. */
+    /**
+     * 보여 줄 문장 — 서버가 준 메시지가 있으면 그것. 없으면 이 패키지가 채우는 문장이고 로케일(`flexTableLocale`)을
+     * 따른다: 응답은 있었으면 `requestFailed`(`Request failed ({status})`), 응답이 없었으면 `networkFailed`.
+     */
     message: string;
     /** HTTP 상태. 응답이 없던 실패(네트워크 오류 · `@odata.nextLink` 검사)에는 없다. */
     status?: number;
@@ -23,6 +26,8 @@ export interface SourceError {
     details?: SourceErrorDetail[];
     /** 응답 본문 — JSON 이면 파싱한 값, 아니면 텍스트. 비어 있으면 없다. */
     body?: unknown;
+    /** 응답이 없던 실패에서 전송(`fetcher`)이 던진 예외 — 진단용. 화면에는 `message` 를 그린다. */
+    cause?: unknown;
 }
 /** 실패 응답을 `SourceError` 로 읽는다. 본문을 읽을 수 없어도 상태와 기본 문장은 남긴다. */
 export declare function readFailedResponse(res: Response): Promise<SourceError>;
@@ -31,5 +36,7 @@ export declare class SourceRequestError extends Error {
     readonly failure: SourceError;
     constructor(failure: SourceError);
 }
+/** 전송이 응답 없이 던진 실패(네트워크 · 오프라인)를 `SourceError` 로 — 브라우저마다 다른 예외 문구 대신 로케일 문장. */
+export declare function networkFailure(cause: unknown): SourceRequestError;
 /** 잡힌 예외를 `SourceError` 로 — 응답이 있던 실패는 그 구조 그대로, 나머지는 메시지만. */
 export declare function toSourceError(err: unknown): SourceError;

package/dist/{flex-table-Hx-xTm0e.js → flex-table-CEmUq0Rp.js}

@@ -1159,7 +1159,9 @@ O.register("en", {
 	notANumber: "Enter a number",
 	notADate: "Enter a date as YYYY-MM-DD",
 	notADateTime: "Enter a date and time as YYYY-MM-DD HH:mm",
-	notInList: "Value must be from the existing list"
+	notInList: "Value must be from the existing list",
+	requestFailed: "Request failed ({status})",
+	networkFailed: "Could not reach the server."
 }), O.register("ko", {
 	showHiddenColumns: "숨긴 열 보기",
 	columnMenu: "열 메뉴",
@@ -1227,7 +1229,9 @@ O.register("en", {
 	notANumber: "숫자를 입력하세요",
 	notADate: "날짜를 YYYY-MM-DD 로 입력하세요",
 	notADateTime: "날짜와 시간을 YYYY-MM-DD HH:mm 으로 입력하세요",
-	notInList: "목록에 있는 값이어야 합니다"
+	notInList: "목록에 있는 값이어야 합니다",
+	requestFailed: "요청이 실패했습니다 ({status})",
+	networkFailed: "서버에 연결하지 못했습니다."
 });
 var k = (e, t) => O.text(e, t);
 //#endregion
@@ -4624,4 +4628,4 @@ function $(e) {
 	}
 }
 //#endregion
-export { A as a, j as i, W as n, O as o, B as r, T as s, Q as t };
+export { A as a, T as c, j as i, W as n, O as o, B as r, k as s, Q as t };

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-Hx-xTm0e.js";
-export { o as FlexTable, e as RowSelectionState, t as UndoStack, n as effectiveAlign, i as exportData, r as flexTableLocale, a as renderCell };
+import { a as e, c as t, i as n, n as r, o as i, r as a, t as o } from "./flex-table-CEmUq0Rp.js";
+export { o as FlexTable, e as RowSelectionState, n as UndoStack, r as effectiveAlign, a as exportData, i as flexTableLocale, t as renderCell };

package/dist/locale.d.ts

@@ -25,7 +25,7 @@
  *   (아이콘 자리의 글리프)는 어느 로케일에서도 같은 것을 뜻하며, 번역하면 오히려 읽히지 않는다.
  *   그 판단은 «번역하지 않기로 한 것»이지 «빠뜨린 것»이 아니다.
  */
-export type FlexTableMessageKey = 'showHiddenColumns' | 'columnMenu' | 'cellActions' | 'noColumnsDefined' | 'addCommentPlaceholder' | 'cancel' | 'save' | 'clear' | 'blankCells' | 'emptyOnly' | 'nonEmptyOnly' | 'blankAll' | 'all' | 'contains' | 'startsWith' | 'endsWith' | 'wildcard' | 'searchPlaceholder' | 'valuePlaceholder' | 'fromPlaceholder' | 'toPlaceholder' | 'findPlaceholder' | 'findPrevious' | 'findNext' | 'matchCase' | 'wholeCell' | 'closeFind' | 'findNoResults' | 'replaceWithPlaceholder' | 'replace' | 'replaceAll' | 'findInput' | 'replaceInput' | 'filterFor' | 'filterMatchMode' | 'filterText' | 'conditionOperator' | 'conditionValue' | 'conditionJoin' | 'sortAscending' | 'sortDescending' | 'filter' | 'clearFilter' | 'hideColumn' | 'showColumn' | 'autoFitWidth' | 'wider' | 'narrower' | 'columnMenuFor' | 'columnMenuRegion' | 'copy' | 'insertRowAbove' | 'insertRowBelow' | 'deleteRow' | 'selectRow' | 'selectAllRows' | 'filterByThisValue' | 'addComment' | 'editComment' | 'deleteComment' | 'booleanTrue' | 'booleanFalse' | 'dropFileToImport' | 'notANumber' | 'notADate' | 'notADateTime' | 'notInList';
+export type FlexTableMessageKey = 'showHiddenColumns' | 'columnMenu' | 'cellActions' | 'noColumnsDefined' | 'addCommentPlaceholder' | 'cancel' | 'save' | 'clear' | 'blankCells' | 'emptyOnly' | 'nonEmptyOnly' | 'blankAll' | 'all' | 'contains' | 'startsWith' | 'endsWith' | 'wildcard' | 'searchPlaceholder' | 'valuePlaceholder' | 'fromPlaceholder' | 'toPlaceholder' | 'findPlaceholder' | 'findPrevious' | 'findNext' | 'matchCase' | 'wholeCell' | 'closeFind' | 'findNoResults' | 'replaceWithPlaceholder' | 'replace' | 'replaceAll' | 'findInput' | 'replaceInput' | 'filterFor' | 'filterMatchMode' | 'filterText' | 'conditionOperator' | 'conditionValue' | 'conditionJoin' | 'sortAscending' | 'sortDescending' | 'filter' | 'clearFilter' | 'hideColumn' | 'showColumn' | 'autoFitWidth' | 'wider' | 'narrower' | 'columnMenuFor' | 'columnMenuRegion' | 'copy' | 'insertRowAbove' | 'insertRowBelow' | 'deleteRow' | 'selectRow' | 'selectAllRows' | 'filterByThisValue' | 'addComment' | 'editComment' | 'deleteComment' | 'booleanTrue' | 'booleanFalse' | 'dropFileToImport' | 'notANumber' | 'notADate' | 'notADateTime' | 'notInList' | 'requestFailed' | 'networkFailed';
 /** 이 패키지의 chrome 문자열 묶음. 소비자가 `register()` 로 언어를 더하거나 문구를 덮을 수 있다. */
 export declare const flexTableLocale: import("@iyulab/components/dist/utilities/Locale.js").LocaleNamespace<FlexTableMessageKey>;
 /** 짧은 조회 별칭 — 렌더 코드가 읽히게 유지한다. */

package/dist/odata/types.d.ts

@@ -43,6 +43,10 @@ export interface UseODataSourceOptions {
 export interface UseODataSourceResult<T> {
     data: T[];
     totalCount: number;
+    /**
+     * 조회 중이거나 아직 한 번도 답을 받지 않았으면 `true` — 첫 렌더부터 첫 응답(성공·실패)이 정착할 때까지,
+     * 그리고 `enabled: false` 인 동안. 그래서 `!loading && totalCount === 0` 이 곧 «결과 없음» 이다.
+     */
     loading: boolean;
     /**
      * 마지막 요청의 실패, 없으면 `null`. 화면에는 `error.message` 를 그린다. «어떤 실패인가» 는

package/dist/react.js

@@ -1,26 +1,26 @@
-import { t as e } from "./flex-table-Hx-xTm0e.js";
-import { i as t, t as n } from "./query-Dw4iO0ir.js";
-import { t as r } from "./view-DiLr-TdY.js";
-import i, { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
-import { createComponent as u } from "@lit/react";
+import { s as e, t } from "./flex-table-CEmUq0Rp.js";
+import { i as n, t as r } from "./query-Dw4iO0ir.js";
+import { t as i } from "./view-DiLr-TdY.js";
+import a, { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { createComponent as d } from "@lit/react";
 //#region src/core/source-error.ts
-async function d(e) {
-	let t = await e.text().catch(() => ""), n = {
-		message: `Request failed (${e.status})`,
-		status: e.status
+async function f(t) {
+	let n = await t.text().catch(() => ""), r = {
+		message: e("requestFailed", { status: t.status }),
+		status: t.status
 	};
-	if (!t) return n;
-	let r = t;
+	if (!n) return r;
+	let i = n;
 	try {
-		r = JSON.parse(t);
+		i = JSON.parse(n);
 	} catch {}
-	if (n.body = r, !r || typeof r != "object") return n;
-	let i = r, a = i.error && typeof i.error == "object" ? i.error : i;
-	typeof a.message == "string" && a.message ? n.message = a.message : typeof i.message == "string" && i.message && (n.message = i.message), typeof a.code == "string" && a.code && (n.code = a.code);
-	let o = f(a.details);
-	return o && (n.details = o), n;
+	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 s = p(o.details);
+	return s && (r.details = s), r;
 }
-function f(e) {
+function p(e) {
 	if (!Array.isArray(e)) return;
 	let t = e.filter((e) => {
 		if (!e || typeof e != "object") return !1;
@@ -29,56 +29,67 @@ function f(e) {
 	});
 	return t.length > 0 ? t : void 0;
 }
-var p = class extends Error {
+var m = class extends Error {
 	constructor(e) {
 		super(e.message), this.name = "SourceRequestError", this.failure = e;
 	}
 };
-function m(e) {
-	return e instanceof p ? e.failure : e instanceof Error ? { message: e.message } : { message: String(e) };
+function h(t) {
+	return new m({
+		message: e("networkFailed"),
+		cause: t
+	});
+}
+function g(e) {
+	return e instanceof m ? e.failure : e instanceof Error ? { message: e.message } : { message: String(e) };
 }
 //#endregion
 //#region src/odata/use-odata-source.ts
-function h(e, r = {}) {
-	let { pageSize: i = 20, defaultOrderBy: s, initialPage: u = 0, initialSearch: f = "", initialSort: h, fixedFilter: g, baseUrl: _, fetcher: v = fetch, onUnauthorized: y, enabled: b = !0 } = r, x = g ? JSON.stringify(g) : "", [S, C] = l([]), [w, T] = l(0), [E, D] = l(!1), [O, k] = l(null), A = t({
-		defaultOrderBy: s,
-		initialPage: u,
-		initialSearch: f,
-		initialSort: h
-	}), [j, M] = l(A.page), [N, P] = l(A.sortCriteria), [F, I] = l(A.search), [L, R] = l(0), [z, B] = l(x);
-	x !== z && (B(x), M(0));
-	let V = c(null), H = a(() => {
-		R((e) => e + 1);
-	}, []), U = a((e) => {
-		I(e), M(0);
-	}, []), W = a((e) => {
+function _(e, t = {}) {
+	let { pageSize: i = 20, defaultOrderBy: a, initialPage: c = 0, initialSearch: d = "", initialSort: p, fixedFilter: _, baseUrl: v, fetcher: y = fetch, onUnauthorized: b, enabled: x = !0 } = t, S = _ ? JSON.stringify(_) : "", [C, w] = u([]), [T, E] = u(0), [D, O] = u(!0), [k, A] = u(null), j = n({
+		defaultOrderBy: a,
+		initialPage: c,
+		initialSearch: d,
+		initialSort: p
+	}), [M, N] = u(j.page), [P, F] = u(j.sortCriteria), [I, L] = u(j.search), [R, z] = u(0), [B, V] = u(S);
+	S !== B && (V(S), N(0));
+	let H = l(null), U = o(() => {
+		z((e) => e + 1);
+	}, []), W = o((e) => {
+		L(e), N(0);
+	}, []), G = o((e) => {
 		let t = e.detail?.criteria;
-		t && (P(t), M(0));
+		t && (F(t), N(0));
 	}, []);
-	return o(() => {
-		if (V.current?.abort(), !b) return;
+	return s(() => {
+		if (H.current?.abort(), !x) return;
 		let t = new AbortController();
-		V.current = t, D(!0), k(null);
-		let r = n({
-			page: j,
+		H.current = t, O(!0), A(null);
+		let n = r({
+			page: M,
 			pageSize: i,
-			sortCriteria: N,
-			defaultOrderBy: s,
-			search: F,
-			fixedFilter: g
-		}), a = `${_ ?? window.location.origin}${e}${r}`, o = async (e) => {
-			let n = await v(e, { signal: t.signal });
-			if (!n.ok) throw n.status === 401 && y && y(n), new p(await d(n));
+			sortCriteria: P,
+			defaultOrderBy: a,
+			search: I,
+			fixedFilter: _
+		}), o = `${v ?? window.location.origin}${e}${n}`, s = async (e) => {
+			let n;
+			try {
+				n = await y(e, { signal: t.signal });
+			} catch (e) {
+				throw e?.name === "AbortError" ? e : h(e);
+			}
+			if (!n.ok) throw n.status === 401 && b && b(n), new m(await f(n));
 			return n.json();
 		};
 		return (async () => {
-			let e = await o(a), t = [...e.value ?? e], n = new URL(a).origin, r = /* @__PURE__ */ new Set([a]), s = a, c = e["@odata.nextLink"];
+			let e = await s(o), t = [...e.value ?? e], n = new URL(o).origin, r = /* @__PURE__ */ new Set([o]), a = o, c = e["@odata.nextLink"];
 			for (; typeof c == "string" && c && t.length < i;) {
-				let e = new URL(c, s);
+				let e = new URL(c, a);
 				if (e.origin !== n) throw Error(`OData nextLink points outside the source origin (${e.origin})`);
-				if (s = e.toString(), r.has(s)) throw Error(`OData nextLink repeats an already-read page (${s})`);
-				r.add(s);
-				let i = await o(s);
+				if (a = e.toString(), r.has(a)) throw Error(`OData nextLink repeats an already-read page (${a})`);
+				r.add(a);
+				let i = await s(a);
 				t.push(...i.value ?? []), c = i["@odata.nextLink"];
 			}
 			return {
@@ -88,57 +99,57 @@ function h(e, r = {}) {
 		})().then(({ count: e, rows: n }) => {
 			if (t.signal.aborted) return;
 			let r = e ?? 0;
-			C(n), T(r), k(null);
+			w(n), E(r), A(null);
 			let a = r === 0 ? 0 : Math.ceil(r / i) - 1;
-			j > a && M(a);
+			M > a && N(a);
 		}).catch((e) => {
-			t.signal.aborted || e.name !== "AbortError" && (k(m(e)), C([]), T(0));
+			t.signal.aborted || e.name !== "AbortError" && (A(g(e)), w([]), E(0));
 		}).finally(() => {
-			t.signal.aborted || D(!1);
+			t.signal.aborted || O(!1);
 		}), () => t.abort();
 	}, [
-		b,
+		x,
 		e,
-		j,
+		M,
 		i,
-		N,
-		F,
-		x,
-		s,
-		L,
-		_
+		P,
+		I,
+		S,
+		a,
+		R,
+		v
 	]), {
-		data: S,
-		totalCount: w,
-		loading: E || !b,
-		error: O,
-		page: j,
-		setPage: M,
-		sortCriteria: N,
-		onSortChange: W,
-		search: F,
-		setSearch: U,
-		refresh: H
+		data: C,
+		totalCount: T,
+		loading: D || !x,
+		error: k,
+		page: M,
+		setPage: N,
+		sortCriteria: P,
+		onSortChange: G,
+		search: I,
+		setSearch: W,
+		refresh: U
 	};
 }
 //#endregion
 //#region src/array/use-array-source.ts
-function g(e, n = {}) {
-	let { pageSize: i = 20, defaultOrderBy: o, initialPage: c = 0, initialSearch: u = "", initialSort: d, columns: f, searchFields: p } = n, m = t({
-		defaultOrderBy: o,
-		initialPage: c,
-		initialSearch: u,
+function v(e, t = {}) {
+	let { pageSize: r = 20, defaultOrderBy: a, initialPage: s = 0, initialSearch: l = "", initialSort: d, columns: f, searchFields: p } = t, m = n({
+		defaultOrderBy: a,
+		initialPage: s,
+		initialSearch: l,
 		initialSort: d
-	}), [h, g] = l(m.page), [_, v] = l(m.sortCriteria), [y, b] = l(m.search), x = a((e) => {
+	}), [h, g] = u(m.page), [_, v] = u(m.sortCriteria), [y, b] = u(m.search), x = o((e) => {
 		b(e), g(0);
-	}, []), S = a((e) => {
+	}, []), S = o((e) => {
 		let t = e.detail?.criteria;
 		t && (v(t), g(0));
-	}, []), C = a(() => {}, []), { data: w, totalCount: T } = s(() => r(e, {
+	}, []), C = o(() => {}, []), { data: w, totalCount: T } = c(() => i(e, {
 		search: y,
 		sortCriteria: _,
 		page: h,
-		pageSize: i,
+		pageSize: r,
 		columns: f,
 		searchFields: p
 	}), [
@@ -146,10 +157,10 @@ function g(e, n = {}) {
 		y,
 		_,
 		h,
-		i,
+		r,
 		f,
 		p
-	]), E = T === 0 ? 0 : Math.ceil(T / i) - 1;
+	]), E = T === 0 ? 0 : Math.ceil(T / r) - 1;
 	return h > E && g(E), {
 		data: w,
 		totalCount: T,
@@ -164,10 +175,10 @@ function g(e, n = {}) {
 		refresh: C
 	};
 }
-var _ = u({
+var y = d({
 	tagName: "flex-table",
-	elementClass: e,
-	react: i,
+	elementClass: t,
+	react: a,
 	events: {
 		onCellSelect: "cell-select",
 		onCellEditCommit: "cell-edit-commit",
@@ -203,4 +214,4 @@ var _ = u({
 	}
 });
 //#endregion
-export { _ as FlexTableReact, g as useArraySource, h as useODataSource };
+export { y as FlexTableReact, v as useArraySource, _ as useODataSource };

package/package.json

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

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

@@ -110,8 +110,8 @@ function Orders() {
 | Field | Notes |
 |---|---|
 | `data`, `totalCount` | Current page and `@odata.count`; `@odata.nextLink` is followed to fill a page |
-| `loading` | Request in flight |
-| `error` | `SourceError \| null` — `{ message, status?, code?, details?, body? }`; render `error.message`, branch on `status` / `code` (OData `error.code`) |
+| `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`) |
 | `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) |