@iyulab/flex-table 0.39.0 → 0.40.0

package/dist/odata/query.d.ts

@@ -0,0 +1,72 @@
+import type { SortCriteria } from '../core/sorting.js';
+/**
+ * 검색어를 OData `$search` 표현식으로 인코딩한다 (`red shirt` → `"red" AND "shirt"`).
+ *
+ * 토큰을 인용하는 이유: OData 4.0의 `searchWord`는 문자(Unicode L/Nl)만 허용해
+ * `2026`·`ZT-E2E-A` 같은 검색어가 거부된다. 4.01이 숫자·하이픈을 허용하도록 완화했으나
+ * Microsoft.OData 렉서는 아직 4.0 규칙이다(odata.net#2445). `searchPhrase`는 두 버전
+ * 모두에서 적법하므로 서버 버전과 무관하게 안전하다.
+ *
+ * 통째로가 아니라 토큰별로 감싸는 이유: 인용 없는 다중 단어는 암묵 AND로 파싱되므로
+ * (`searchAndExpr = RWS [ 'AND' RWS ] searchExpr`), 전체를 한 phrase로 감싸면 연속
+ * 문자열 매칭으로 의미가 바뀐다. 토큰별 인용은 기존 의미론을 그대로 보존한다.
+ *
+ * `"`는 phrase 안에 넣을 수 없고 이스케이프 규칙도 없어(`qchar-no-AMP-DQUOTE`) 제거한다.
+ *
+ * @returns `$search` 표현식, 또는 유효 토큰이 없으면 `undefined`
+ */
+export declare function buildSearchExpression(term: string): string | undefined;
+/** `resolveInitialState`가 읽는 옵션 — 두 소스 훅의 옵션 타입이 공통으로 갖는 부분. */
+export interface InitialSourceStateOptions {
+    defaultOrderBy?: string;
+    initialPage?: number;
+    initialSearch?: string;
+    initialSort?: SortCriteria[];
+}
+/**
+ * 옵션에서 `page`/`search`/`sortCriteria`의 **초기값**을 뽑는다.
+ *
+ * ★**두 훅이 이 함수 하나를 공유하는 것이 요점이다.** README가 *"same shape … so the same
+ * binding code works with either source"*를 계약으로 선언하는데, 초기값 해석을 양쪽에
+ * 복제하면 그 계약이 **문장으로만** 유지된다 — 이 리포가 반복 기록한 실패 형태다.
+ * 구현이 하나면 드리프트가 없다.
+ *
+ * ⚠**`initialSort`가 `defaultOrderBy`를 이긴다.** 둘은 같은 것을 서로 다른 표기로
+ * 말하고(`SortCriteria[]` ↔ `$orderby` 문자열), 더 구체적인 쪽을 우선한다.
+ * `initialSort`는 `onSortChange`가 주는 모양 그대로라 저장해 둔 정렬을 파싱 없이 되돌린다.
+ *
+ * ⚠**React가 useState 초기값을 첫 렌더에서만 읽는다는 사실이 계약의 일부다** — 이후의
+ * 옵션 변경은 무시되고, 이동은 `setPage`/`setSearch`로 한다. `defaultOrderBy`가 이미
+ * 그렇게 동작해 왔으므로 새 규칙이 아니다.
+ */
+export declare function resolveInitialState(options: InitialSourceStateOptions): {
+    page: number;
+    search: string;
+    sortCriteria: SortCriteria[];
+};
+/**
+ * `$orderby` 문자열을 정렬 기준 배열로 파싱한다 (`'a asc, b desc'`).
+ * 방향이 생략되거나 `desc`가 아니면 `asc`로 본다(OData 기본값).
+ */
+export declare function parseOrderBy(orderBy: string): SortCriteria[];
+/** `buildODataQuery` 가 읽는 표 상태 — `useODataSource` 가 요청마다 넘기는 것과 같은 모양. */
+export interface ODataQueryState {
+    /** 0부터 세는 페이지 번호. */
+    page: number;
+    pageSize: number;
+    sortCriteria?: SortCriteria[];
+    /** 정렬 기준이 비었을 때 쓰는 `$orderby` 문자열. */
+    defaultOrderBy?: string;
+    /** 사용자가 친 검색어(리터럴) — `buildSearchExpression` 으로 인코딩된다. */
+    search?: string;
+    /** odata-query 의 필터 객체(`{ IsActive: true }` 등). */
+    fixedFilter?: Record<string, unknown>;
+}
+/**
+ * 표 상태를 OData 쿼리 문자열(`?$top=…&$skip=…&$count=true…`)로 만든다.
+ *
+ * `useODataSource` 가 요청마다 하는 일 그대로다 — 훅 밖으로 꺼낸 이유는 `buildSearchExpression` 과
+ * 같다: React 없이 서버 페이징을 하는 소비자(Lit 앱의 표, 표가 아닌 목록)가 같은 쿼리를
+ * 재구현하지 않게. 정렬 기준이 있으면 그것이, 없으면 `defaultOrderBy` 가 `$orderby` 가 된다.
+ */
+export declare function buildODataQuery(state: ODataQueryState): string;

package/dist/odata/use-odata-source.d.ts

@@ -1,57 +1,6 @@
-import type { SortCriteria } from '../core/sorting.js';
 import type { UseODataSourceOptions, UseODataSourceResult } from './types.js';
-/**
- * 검색어를 OData `$search` 표현식으로 인코딩한다 (`red shirt` → `"red" AND "shirt"`).
- *
- * 토큰을 인용하는 이유: OData 4.0의 `searchWord`는 문자(Unicode L/Nl)만 허용해
- * `2026`·`ZT-E2E-A` 같은 검색어가 거부된다. 4.01이 숫자·하이픈을 허용하도록 완화했으나
- * Microsoft.OData 렉서는 아직 4.0 규칙이다(odata.net#2445). `searchPhrase`는 두 버전
- * 모두에서 적법하므로 서버 버전과 무관하게 안전하다.
- *
- * 통째로가 아니라 토큰별로 감싸는 이유: 인용 없는 다중 단어는 암묵 AND로 파싱되므로
- * (`searchAndExpr = RWS [ 'AND' RWS ] searchExpr`), 전체를 한 phrase로 감싸면 연속
- * 문자열 매칭으로 의미가 바뀐다. 토큰별 인용은 기존 의미론을 그대로 보존한다.
- *
- * `"`는 phrase 안에 넣을 수 없고 이스케이프 규칙도 없어(`qchar-no-AMP-DQUOTE`) 제거한다.
- *
- * @returns `$search` 표현식, 또는 유효 토큰이 없으면 `undefined`
- */
-export declare function buildSearchExpression(term: string): string | undefined;
-/** `resolveInitialState`가 읽는 옵션 — 두 소스 훅의 옵션 타입이 공통으로 갖는 부분. */
-export interface InitialSourceStateOptions {
-    defaultOrderBy?: string;
-    initialPage?: number;
-    initialSearch?: string;
-    initialSort?: SortCriteria[];
-}
-/**
- * 옵션에서 `page`/`search`/`sortCriteria`의 **초기값**을 뽑는다.
- *
- * ★**두 훅이 이 함수 하나를 공유하는 것이 요점이다.** README가 *"same shape … so the same
- * binding code works with either source"*를 계약으로 선언하는데, 초기값 해석을 양쪽에
- * 복제하면 그 계약이 **문장으로만** 유지된다 — 이 리포가 반복 기록한 실패 형태다.
- * 구현이 하나면 드리프트가 없다.
- *
- * ⚠**`initialSort`가 `defaultOrderBy`를 이긴다.** 둘은 같은 것을 서로 다른 표기로
- * 말하고(`SortCriteria[]` ↔ `$orderby` 문자열), 더 구체적인 쪽을 우선한다.
- * `initialSort`는 `onSortChange`가 주는 모양 그대로라 저장해 둔 정렬을 파싱 없이 되돌린다.
- *
- * ⚠**React가 useState 초기값을 첫 렌더에서만 읽는다는 사실이 계약의 일부다** — 이후의
- * 옵션 변경은 무시되고, 이동은 `setPage`/`setSearch`로 한다. `defaultOrderBy`가 이미
- * 그렇게 동작해 왔으므로 새 규칙이 아니다.
- */
-export declare function resolveInitialState(options: InitialSourceStateOptions): {
-    page: number;
-    search: string;
-    sortCriteria: SortCriteria[];
-};
 /**
  * OData v4 서버 사이드 데이터소스 React 훅.
  * flex-table의 dataMode="server"와 함께 사용한다.
  */
 export declare function useODataSource<T = Record<string, unknown>>(url: string, options?: UseODataSourceOptions): UseODataSourceResult<T>;
-/**
- * `$orderby` 문자열을 정렬 기준 배열로 파싱한다 (`'a asc, b desc'`).
- * 방향이 생략되거나 `desc`가 아니면 `asc`로 본다(OData 기본값).
- */
-export declare function parseOrderBy(orderBy: string): SortCriteria[];

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.d.ts

@@ -43,18 +43,22 @@ export type FlexTableReactProps<T = DataRow> = Omit<BaseProps, 'data' | 'columns
  * The underlying custom element (`FlexTable`) is a single registered class and cannot
  * itself be generic across instances — the DOM has no notion of `FlexTable<Order>` vs
  * `FlexTable<Consumer>`. `FlexTableReact<T>` performs one internal cast at this boundary
- * so consumers get end-to-end type safety (`data`, `columns`, `renderer`/`editor`/`validator`
+ * so consumers get end-to-end type safety (`data`, `columns`, `render`/`editor`/`validator`
  * callbacks) without casting at every call site.
  *
  * @example
  * ```tsx
  * const columns: ColumnDefinition<Order>[] = [
- *   { key: 'id', header: 'ID' },
- *   { key: 'total', header: 'Total', renderer: (v, row) => `${row.total} ${row.currency}` },
+ *   { key: 'id', label: 'ID' },
+ *   { key: 'total', label: 'Total', render: (v, row) => `${row.total} ${row.currency}` },
  * ];
  * <FlexTableReact<Order> data={orders} columns={columns} />
  * ```
  */
 export declare const FlexTableReact: <T = DataRow>(props: FlexTableReactProps<T> & React.RefAttributes<FlexTable>) => React.ReactElement | null;
 export type { FlexTable };
-export type { ColumnDefinition, DataRow, ColumnType, CellRenderer, CellEditor, CellValidator, ConditionalRule, SelectionMode, DataMode } from './models/types.js';
+export type { ColumnDefinition, DataRow, ColumnType, ColumnAlign, CellRenderer, CellEditor, CellValidator, ConditionalRule, SelectionMode, DataMode } from './models/types.js';
+export { useODataSource } from './odata/use-odata-source.js';
+export type { UseODataSourceOptions, UseODataSourceResult } from './odata/types.js';
+export { useArraySource } from './array/use-array-source.js';
+export type { UseArraySourceOptions, UseArraySourceResult } from './array/types.js';

package/dist/react.js

@@ -1,10 +1,146 @@
-import { t as e } from "./flex-table-JGaGcJTl.js";
-import t from "react";
-import { createComponent as n } from "@lit/react";
-var r = n({
+import { t as e } from "./flex-table-CDEu8YQE.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";
+//#region src/odata/use-odata-source.ts
+function d(e, r = {}) {
+	let { pageSize: i = 20, defaultOrderBy: s, initialPage: u = 0, initialSearch: d = "", initialSort: f, fixedFilter: p, baseUrl: m, fetcher: h = fetch, onUnauthorized: g, enabled: _ = !0 } = r, v = p ? JSON.stringify(p) : "", [y, b] = l([]), [x, S] = l(0), [C, w] = l(!1), [T, E] = l(null), D = t({
+		defaultOrderBy: s,
+		initialPage: u,
+		initialSearch: d,
+		initialSort: f
+	}), [O, k] = l(D.page), [A, j] = l(D.sortCriteria), [M, N] = l(D.search), [P, F] = l(0), [I, L] = l(v);
+	v !== I && (L(v), k(0));
+	let R = c(null), z = a(() => {
+		F((e) => e + 1);
+	}, []), B = a((e) => {
+		N(e), k(0);
+	}, []), V = a((e) => {
+		let t = e.detail?.criteria;
+		t && (j(t), k(0));
+	}, []);
+	return o(() => {
+		if (R.current?.abort(), !_) return;
+		let t = new AbortController();
+		R.current = t, w(!0), E(null);
+		let r = n({
+			page: O,
+			pageSize: i,
+			sortCriteria: A,
+			defaultOrderBy: s,
+			search: M,
+			fixedFilter: p
+		}), a = `${m ?? window.location.origin}${e}${r}`, o = async (e) => {
+			let n = await h(e, { signal: t.signal });
+			if (!n.ok) {
+				(n.status === 401 || n.status === 403) && g && g(n);
+				let e = await n.text().catch(() => ""), t = `Request failed (${n.status})`;
+				try {
+					let n = JSON.parse(e);
+					t = n?.error?.message ?? n?.message ?? t;
+				} catch {}
+				throw Error(t);
+			}
+			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"];
+			for (; typeof c == "string" && c && t.length < i;) {
+				let e = new URL(c, s);
+				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);
+				t.push(...i.value ?? []), c = i["@odata.nextLink"];
+			}
+			return {
+				count: e["@odata.count"],
+				rows: t
+			};
+		})().then(({ count: e, rows: n }) => {
+			if (t.signal.aborted) return;
+			let r = e ?? 0;
+			b(n), S(r), E(null);
+			let a = r === 0 ? 0 : Math.ceil(r / i) - 1;
+			O > a && k(a);
+		}).catch((e) => {
+			t.signal.aborted || e.name !== "AbortError" && (E(e.message), b([]), S(0));
+		}).finally(() => {
+			t.signal.aborted || w(!1);
+		}), () => t.abort();
+	}, [
+		_,
+		e,
+		O,
+		i,
+		A,
+		M,
+		v,
+		s,
+		P,
+		m
+	]), {
+		data: y,
+		totalCount: x,
+		loading: C || !_,
+		error: T,
+		page: O,
+		setPage: k,
+		sortCriteria: A,
+		onSortChange: V,
+		search: M,
+		setSearch: B,
+		refresh: z
+	};
+}
+//#endregion
+//#region src/array/use-array-source.ts
+function f(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,
+		initialSort: d
+	}), [h, g] = l(m.page), [_, v] = l(m.sortCriteria), [y, b] = l(m.search), x = a((e) => {
+		b(e), g(0);
+	}, []), S = a((e) => {
+		let t = e.detail?.criteria;
+		t && (v(t), g(0));
+	}, []), C = a(() => {}, []), { data: w, totalCount: T } = s(() => r(e, {
+		search: y,
+		sortCriteria: _,
+		page: h,
+		pageSize: i,
+		columns: f,
+		searchFields: p
+	}), [
+		e,
+		y,
+		_,
+		h,
+		i,
+		f,
+		p
+	]), E = T === 0 ? 0 : Math.ceil(T / i) - 1;
+	return h > E && g(E), {
+		data: w,
+		totalCount: T,
+		loading: !1,
+		error: null,
+		page: h,
+		setPage: g,
+		sortCriteria: _,
+		onSortChange: S,
+		search: y,
+		setSearch: x,
+		refresh: C
+	};
+}
+var p = u({
 	tagName: "flex-table",
 	elementClass: e,
-	react: t,
+	react: i,
 	events: {
 		onCellSelect: "cell-select",
 		onCellEditCommit: "cell-edit-commit",
@@ -33,4 +169,4 @@ var r = n({
 	}
 });
 //#endregion
-export { r as FlexTableReact };
+export { p as FlexTableReact, f as useArraySource, d as useODataSource };

package/dist/view-DiLr-TdY.js

@@ -0,0 +1,13 @@
+import { t as e } from "./sorting-CjfjRxwL.js";
+//#region src/array/view.ts
+function t(t, { search: n, sortCriteria: r, page: i, pageSize: a, columns: o, searchFields: s }) {
+	let c = n.trim().toLowerCase(), l = c ? t.filter((e) => (s ? s(e) : Object.values(e)).some((e) => e != null && String(e).toLowerCase().includes(c))) : t, u = l;
+	r.length > 0 && (u = e(l, r, o ?? []).map((e) => l[e]));
+	let d = u.length, f = d === 0 ? 0 : Math.ceil(d / a) - 1, p = Math.min(Math.max(i, 0), f) * a;
+	return {
+		data: u.slice(p, p + a),
+		totalCount: d
+	};
+}
+//#endregion
+export { t };

package/package.json

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

package/dist/use-odata-source-BiZrIEVV.js

@@ -1,118 +0,0 @@
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import i from "odata-query";
-//#region src/odata/use-odata-source.ts
-function a(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 o(e) {
-	let { defaultOrderBy: t, initialPage: n = 0, initialSearch: r = "", initialSort: i } = e;
-	return {
-		page: n,
-		search: r,
-		sortCriteria: i ?? (t ? c(t) : [])
-	};
-}
-function s(s, c = {}) {
-	let { pageSize: l = 20, defaultOrderBy: u, initialPage: d = 0, initialSearch: f = "", initialSort: p, fixedFilter: m, baseUrl: h, fetcher: g = fetch, onUnauthorized: _, enabled: v = !0 } = c, y = m ? JSON.stringify(m) : "", [b, x] = r([]), [S, C] = r(0), [w, T] = r(!1), [E, D] = r(null), O = o({
-		defaultOrderBy: u,
-		initialPage: d,
-		initialSearch: f,
-		initialSort: p
-	}), [k, A] = r(O.page), [j, M] = r(O.sortCriteria), [N, P] = r(O.search), [F, I] = r(0), [L, R] = r(y);
-	y !== L && (R(y), A(0));
-	let z = n(null), B = e(() => {
-		I((e) => e + 1);
-	}, []), V = e((e) => {
-		P(e), A(0);
-	}, []), H = e((e) => {
-		let t = e.detail?.criteria;
-		t && (M(t), A(0));
-	}, []);
-	return t(() => {
-		if (z.current?.abort(), !v) return;
-		let e = new AbortController();
-		z.current = e, T(!0), D(null);
-		let t = j.length > 0 ? j.map((e) => `${e.key} ${e.direction}`).join(", ") : u, n = {
-			top: l,
-			skip: k * l,
-			count: !0
-		};
-		if (t && (n.orderBy = t), m && (n.filter = m), N) {
-			let e = a(N);
-			e && (n.search = e);
-		}
-		let r = i(n), o = `${h ?? window.location.origin}${s}${r}`, c = async (t) => {
-			let n = await g(t, { signal: e.signal });
-			if (!n.ok) {
-				(n.status === 401 || n.status === 403) && _ && _(n);
-				let e = await n.text().catch(() => ""), t = `Request failed (${n.status})`;
-				try {
-					let n = JSON.parse(e);
-					t = n?.error?.message ?? n?.message ?? t;
-				} catch {}
-				throw Error(t);
-			}
-			return n.json();
-		};
-		return (async () => {
-			let e = await c(o), t = [...e.value ?? e], n = new URL(o).origin, r = /* @__PURE__ */ new Set([o]), i = o, a = e["@odata.nextLink"];
-			for (; typeof a == "string" && a && t.length < l;) {
-				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 c(i);
-				t.push(...o.value ?? []), a = o["@odata.nextLink"];
-			}
-			return {
-				count: e["@odata.count"],
-				rows: t
-			};
-		})().then(({ count: t, rows: n }) => {
-			if (e.signal.aborted) return;
-			let r = t ?? 0;
-			x(n), C(r), D(null);
-			let i = r === 0 ? 0 : Math.ceil(r / l) - 1;
-			k > i && A(i);
-		}).catch((t) => {
-			e.signal.aborted || t.name !== "AbortError" && (D(t.message), x([]), C(0));
-		}).finally(() => {
-			e.signal.aborted || T(!1);
-		}), () => e.abort();
-	}, [
-		v,
-		s,
-		k,
-		l,
-		j,
-		N,
-		y,
-		u,
-		F,
-		h
-	]), {
-		data: b,
-		totalCount: S,
-		loading: w || !v,
-		error: E,
-		page: k,
-		setPage: A,
-		sortCriteria: j,
-		onSortChange: H,
-		search: N,
-		setSearch: V,
-		refresh: B
-	};
-}
-function c(e) {
-	return e.split(",").map((e) => {
-		let t = e.trim().split(/\s+/);
-		return {
-			key: t[0],
-			direction: t[1]?.toLowerCase() === "desc" ? "desc" : "asc"
-		};
-	});
-}
-//#endregion
-export { s as i, c as n, o as r, a as t };