@iyulab/flex-table 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.55.0] - 2026-10-07
+
+### Added
+
+- **`createArraySource(rows, options)`** and **`ArraySourceController`** (`@iyulab/flex-table/array`) — the in-memory
+  source without React, with the members of `createODataSource` (`getState`, `subscribe`, `setPage`, `setSort`,
+  `setSearch`, `refresh`) plus `update(rows, options)`. A custom-element screen can now switch between a server and
+  an in-memory source the way a React screen switches between `useODataSource` and `useArraySource`.
+
 ## [0.54.0] - 2026-10-07
 
 ### Added

package/README.md

@@ -939,6 +939,19 @@ count after search (not a server-reported total), and `loading`/`error` are alwa
 `false`/`null` — there's no request to fail. `refresh` is a no-op kept only so a
 "refresh" button wired unconditionally against either hook doesn't need a branch.
 
+Without React, `createArraySource(rows, options)` (`@iyulab/flex-table/array`) is the same source with the same
+members as `createODataSource` — `getState()`, `subscribe()`, `setPage`, `setSort`, `setSearch`, `refresh` (no-op) —
+plus `update(rows, options)` when the rows change. `ArraySourceController` binds it to a Lit element:
+
+```ts
+import { ArraySourceController } from '@iyulab/flex-table/array';
+
+class PricesPanel extends LitElement {
+  private prices = new ArraySourceController(this, [], { pageSize: 20 });
+  set rows(rows: DataRow[]) { this.prices.source.update(rows, { pageSize: 20 }); }
+}
+```
+
 ## Development
 
 ```bash

package/dist/array/index.d.ts

@@ -1,2 +1,4 @@
 export { computeArrayView } from './view.js';
 export type { ComputeArrayViewOptions } from './view.js';
+export { createArraySource, ArraySourceController } from './source.js';
+export type { ArraySource, ArraySourceOptions } from './source.js';

package/dist/array/index.js

@@ -1,2 +1,71 @@
-import { t as e } from "../view-DiLr-TdY.js";
-export { e as computeArrayView };
+import { i as e } from "../query-Dw4iO0ir.js";
+import { t } from "../view-DiLr-TdY.js";
+//#region src/array/source.ts
+function n(n, r = {}) {
+	let i = n, a = r, o = e({
+		defaultOrderBy: r.defaultOrderBy,
+		initialPage: r.initialPage ?? 0,
+		initialSearch: r.initialSearch ?? "",
+		initialSort: r.initialSort
+	}), s = o.page, c = o.sortCriteria, l = o.search, u = f(), d = /* @__PURE__ */ new Set();
+	function f() {
+		let e = a.pageSize ?? 20, n = t(i, {
+			search: l,
+			sortCriteria: c,
+			page: s,
+			pageSize: e,
+			columns: a.columns,
+			searchFields: a.searchFields
+		}), r = n.totalCount === 0 ? 0 : Math.ceil(n.totalCount / e) - 1;
+		return s > r && (s = r), {
+			data: n.data,
+			totalCount: n.totalCount,
+			loading: !1,
+			error: null,
+			page: s,
+			sortCriteria: c,
+			search: l
+		};
+	}
+	function p() {
+		u = f();
+		for (let e of [...d]) e();
+	}
+	return {
+		getState: () => u,
+		subscribe(e) {
+			return d.add(e), () => {
+				d.delete(e);
+			};
+		},
+		setPage(e) {
+			s = e, p();
+		},
+		setSort(e) {
+			c = e, s = 0, p();
+		},
+		setSearch(e) {
+			l = e, s = 0, p();
+		},
+		refresh() {},
+		update(e, t = {}) {
+			i = e, a = t, p();
+		}
+	};
+}
+var r = class {
+	constructor(e, t, r = {}) {
+		this.host = e, this.source = n(t, r), e.addController(this);
+	}
+	get state() {
+		return this.source.getState();
+	}
+	hostConnected() {
+		this.unsubscribe ??= this.source.subscribe(() => this.host.requestUpdate());
+	}
+	hostDisconnected() {
+		this.unsubscribe?.(), this.unsubscribe = void 0;
+	}
+};
+//#endregion
+export { r as ArraySourceController, t as computeArrayView, n as createArraySource };

package/dist/array/source.d.ts

@@ -0,0 +1,43 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SortCriteria } from '../core/sorting.js';
+import type { DataRow } from '../models/types.js';
+import type { ODataSourceState } from '../odata/source.js';
+import type { UseArraySourceOptions } from './types.js';
+/** 메모리 소스의 설정 — `useArraySource` 의 옵션과 같다(`initial*` 은 만들 때만 읽는다). */
+export type ArraySourceOptions<T> = UseArraySourceOptions<T>;
+/** 메모리 소스 — `createODataSource` 와 같은 상태·조작 모양이라 같은 표 배선이 두 소스에서 돈다. */
+export interface ArraySource<T> {
+    /** 현재 상태(`loading` 은 늘 `false`, `error` 는 늘 `null`). 바뀌지 않았으면 같은 객체다. */
+    getState(): ODataSourceState<T>;
+    /** 상태가 바뀔 때마다 부른다. 해지 함수를 돌려준다. */
+    subscribe(listener: () => void): () => void;
+    /** 0-based 페이지로 옮긴다(범위를 넘으면 마지막 페이지). */
+    setPage(page: number): void;
+    /** 정렬을 바꾸고 첫 장으로 간다. */
+    setSort(criteria: SortCriteria[]): void;
+    /** 검색어를 바꾸고 첫 장으로 간다. */
+    setSearch(term: string): void;
+    /** 아무 일도 하지 않는다 — 다시 불러올 원격 상태가 없다(OData 소스와 같은 자리에 이어도 안전하다). */
+    refresh(): void;
+    /** 행이나 설정이 바뀌었다 — 다시 계산한다. 결과가 줄어 지금 페이지가 없어지면 마지막 페이지로 내려온다. */
+    update(data: T[], options?: ArraySourceOptions<T>): void;
+}
+/**
+ * 이미 메모리에 있는 행의 데이터 소스 — 검색·정렬·페이지 나누기를 로컬에서 한다(`computeArrayView`). React 없이 쓴다;
+ * React 는 `useArraySource`, Lit 은 `ArraySourceController`.
+ */
+export declare function createArraySource<T extends DataRow = DataRow>(data: T[], options?: ArraySourceOptions<T>): ArraySource<T>;
+/**
+ * Lit 어댑터 — 메모리 소스를 호스트에 묶는다. 상태가 바뀌면 호스트를 다시 그린다. 행이 바뀌면 `source.update(rows)`.
+ */
+export declare class ArraySourceController<T extends DataRow = DataRow> implements ReactiveController {
+    private readonly host;
+    /** 소스 — 조작(`setPage`·`setSort`·`setSearch`·`update`)은 이것으로 한다. */
+    readonly source: ArraySource<T>;
+    private unsubscribe?;
+    constructor(host: ReactiveControllerHost, data: T[], options?: ArraySourceOptions<T>);
+    /** 현재 상태. */
+    get state(): ODataSourceState<T>;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/dist/odata/index.js

@@ -1,4 +1,5 @@
-import { i as e, n as t, r as n, t as r } from "../source-CwbD-6ea.js";
+import { n as e, r as t, t as n } from "../query-Dw4iO0ir.js";
+import { t as r } from "../source-r2Pv6Pvo.js";
 //#region src/odata/controller.ts
 var i = class {
 	constructor(e, t, n = {}) {
@@ -15,4 +16,4 @@ var i = class {
 	}
 };
 //#endregion
-export { i as ODataSourceController, t as buildODataQuery, n as buildSearchExpression, r as createODataSource, e as parseOrderBy };
+export { i as ODataSourceController, n as buildODataQuery, e as buildSearchExpression, r as createODataSource, t as parseOrderBy };

package/dist/query-Dw4iO0ir.js

@@ -0,0 +1,37 @@
+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 };

package/dist/react.js

@@ -1,5 +1,6 @@
 import { t as e } from "./flex-table-DlvIBu4z.js";
-import { a as t, t as n } from "./source-CwbD-6ea.js";
+import { i as t } from "./query-Dw4iO0ir.js";
+import { t as n } from "./source-r2Pv6Pvo.js";
 import { t as r } from "./view-DiLr-TdY.js";
 import i, { useCallback as a, useEffect as o, useMemo as s, useState as c, useSyncExternalStore as l } from "react";
 import { createComponent as u } from "@lit/react";

package/dist/{source-CwbD-6ea.js → source-r2Pv6Pvo.js}

@@ -1,58 +1,23 @@
 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
+import { i as t, t as n } from "./query-Dw4iO0ir.js";
 //#region src/core/source-error.ts
-async function o(t) {
+async function r(t) {
 	let n = await t.text().catch(() => ""), r = {
 		message: e("requestFailed", { status: t.status }),
 		status: t.status
 	};
 	if (!n) return r;
-	let i = n;
+	let a = n;
 	try {
-		i = JSON.parse(n);
+		a = 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);
+	if (r.body = a, !a || typeof a != "object") return r;
+	let o = a, s = o.error && typeof o.error == "object" ? o.error : o;
+	typeof s.message == "string" && s.message ? r.message = s.message : typeof o.message == "string" && o.message && (r.message = o.message), typeof s.code == "string" && s.code && (r.code = s.code);
+	let c = i(s.details);
 	return c && (r.details = c), r;
 }
-function s(e) {
+function i(e) {
 	if (!Array.isArray(e)) return;
 	let t = e.filter((e) => {
 		if (!e || typeof e != "object") return !1;
@@ -61,42 +26,42 @@ function s(e) {
 	});
 	return t.length > 0 ? t : void 0;
 }
-var c = class extends Error {
+var a = class extends Error {
 	constructor(e) {
 		super(e.message), this.name = "SourceRequestError", this.failure = e;
 	}
 };
-function l(t) {
-	return new c({
+function o(t) {
+	return new a({
 		message: e("networkFailed"),
 		cause: t
 	});
 }
-function u(e) {
-	return e instanceof c ? e.failure : e instanceof Error ? { message: e.message } : { message: String(e) };
+function s(e) {
+	return e instanceof a ? 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
+function c(e, i = {}) {
+	let c = e, u = i, d = l(i.fixedFilter), f = t({
+		defaultOrderBy: i.defaultOrderBy,
+		initialPage: i.initialPage ?? 0,
+		initialSearch: i.initialSearch ?? "",
+		initialSort: i.initialSort
 	}), p = {
 		data: [],
 		totalCount: 0,
 		loading: !0,
 		error: null,
-		page: d.page,
-		sortCriteria: d.sortCriteria,
-		search: d.search
+		page: f.page,
+		sortCriteria: f.sortCriteria,
+		search: f.search
 	}, m = x(), h = /* @__PURE__ */ new Set(), g = null, _ = !1, v = null;
 	function y() {
-		return i.enabled ?? !0;
+		return u.enabled ?? !0;
 	}
 	function b() {
-		return i.pageSize ?? 20;
+		return u.pageSize ?? 20;
 	}
 	function x() {
 		return {
@@ -119,11 +84,11 @@ function d(e, t = {}) {
 	}
 	function w() {
 		return JSON.stringify([
-			n,
-			i.baseUrl,
+			c,
+			u.baseUrl,
 			b(),
-			i.defaultOrderBy,
-			s,
+			u.defaultOrderBy,
+			d,
 			p.page,
 			p.sortCriteria,
 			p.search
@@ -147,26 +112,26 @@ function d(e, t = {}) {
 		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;
+		let { page: t, sortCriteria: i, search: l } = p, d = b(), f = u.fetcher ?? fetch, m = u.onUnauthorized;
 		S({
 			loading: !0,
 			error: null
 		});
-		let h = a({
+		let h = n({
 			page: t,
 			pageSize: d,
-			sortCriteria: r,
-			defaultOrderBy: i.defaultOrderBy,
-			search: s,
-			fixedFilter: i.fixedFilter
-		}), _ = `${i.baseUrl ?? window.location.origin}${n}${h}`, v = async (t) => {
+			sortCriteria: i,
+			defaultOrderBy: u.defaultOrderBy,
+			search: l,
+			fixedFilter: u.fixedFilter
+		}), _ = `${u.baseUrl ?? window.location.origin}${c}${h}`, v = async (t) => {
 			let n;
 			try {
 				n = await f(t, { signal: e.signal });
 			} catch (e) {
-				throw e?.name === "AbortError" ? e : l(e);
+				throw e?.name === "AbortError" ? e : o(e);
 			}
-			if (!n.ok) throw n.status === 401 && m && m(n), new c(await o(n));
+			if (!n.ok) throw n.status === 401 && m && m(n), new a(await r(n));
 			return n.json();
 		};
 		(async () => {
@@ -198,7 +163,7 @@ function d(e, t = {}) {
 			});
 		}).catch((t) => {
 			e.signal.aborted || t?.name !== "AbortError" && S({
-				error: u(t),
+				error: s(t),
 				data: [],
 				totalCount: 0
 			});
@@ -232,16 +197,16 @@ function d(e, t = {}) {
 			y() && (v = null, T());
 		},
 		update(e, t = {}) {
-			let r = f(t.fixedFilter), a = r !== s;
-			n = e, i = t, s = r, a && (p = {
+			let n = l(t.fixedFilter), r = n !== d;
+			c = e, u = t, d = n, r && (p = {
 				...p,
 				page: 0
 			}), C(), T();
 		}
 	};
 }
-function f(e) {
+function l(e) {
 	return e ? JSON.stringify(e) : "";
 }
 //#endregion
-export { r as a, i, a as n, n as r, d as t };
+export { c as t };

package/package.json

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

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

@@ -28,7 +28,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` | No React: `createODataSource` (the source `useODataSource` adapts), `ODataSourceController` (Lit), `buildODataQuery`, `buildSearchExpression`, `parseOrderBy` |
-| `@iyulab/flex-table/array` | Pure helper, no React: `computeArrayView` |
+| `@iyulab/flex-table/array` | No React: `createArraySource` (same members as `createODataSource`, plus `update(rows)`), `ArraySourceController` (Lit), `computeArrayView` |
 
 ## Quick start
 

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

@@ -181,6 +181,7 @@ Pure helpers:
 ```ts
 import { buildODataQuery, buildSearchExpression, parseOrderBy } from '@iyulab/flex-table/odata';
 import { computeArrayView } from '@iyulab/flex-table/array';
+// createArraySource / ArraySourceController: the in-memory source with createODataSource's members + update(rows)
 
 buildSearchExpression('red shirt'); // '"red" AND "shirt"'  ('' → undefined)
 parseOrderBy('name desc');          // [{ key: 'name', direction: 'desc' }]