@iyulab/data-components 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,7 +1,67 @@
 # Changelog
 
+## [0.12.0] - 2026-08-04
+
+### Fixed
+
+- 🔴**`u-rich-table` 의 전체선택이 다른 페이지의 선택을 조용히 파괴했다.** 서버 페이징
+  (`totalCount`/`currentPage`/`page-change`)에서 선택 상태는 페이지를 넘어 유지되는데,
+  전체선택 체크박스만 그 사실을 모르고 있었다:
+  - 체크 상태를 **«누적 선택 수 == 이 페이지 행 수»** 로 계산했다 ⇒ 1페이지를 전량 선택하고
+    2페이지로 넘어가면 **아무것도 고르지 않았는데 켜져 보였다.**
+  - 그 상태에서 체크박스를 끄면 선택 집합을 **통째로 비웠다** ⇒ 사용자에게는 *"이 페이지 해제"*
+    로 보이는 조작이 1페이지의 선택을 말없이 지웠다.
+  - 켜는 쪽도 합집합이 아니라 **치환**이었다 ⇒ 2페이지에서 전체선택하면 1페이지 선택분이 사라졌다.
+    `Ctrl`/`Cmd` + `A` 도 같은 경로였다.
+
+  ⇒ 전체선택/해제의 범위를 **현재 페이지**로 확정했다(합집합·차집합). 체크박스의 분자와 분모가
+  모두 현재 페이지 기준이 되어, 다른 페이지의 선택분이 이 페이지의 표시로 새지 않는다.
+
+  ⚠**단일 페이지 사용(`totalCount = 0`)에서는 동작이 종전과 완전히 같다** — 현재 페이지가
+  곧 전체이므로 합집합·차집합이 치환·전역소거와 일치한다.
+
+### Added
+
+- **선택 집합을 읽고 쓸 수 있다** — 종전에는 선택 상태가 `private` 이라 소비앱이 «해제»와
+  «다른 페이지에 있음»을 구분할 방법이 없었고, 그래서 추정할 수밖에 없었다.
+  - **`selectedRowIds`** *(getter)* — 페이지를 가로질러 누적된 **모든** 선택 식별자.
+    `getSelectedRows()` 는 현재 페이지의 행 객체만 주므로(갖고 있지 않은 행을 만들 수 없다)
+    *"여러 페이지에 걸쳐 고른 뒤 일괄 처리"* 에는 이쪽이 필요하다. **스냅샷**이라 돌려받은
+    집합을 고쳐도 내부 상태가 흔들리지 않는다.
+  - **`setSelection(ids)`** — 선택을 통째로 대체한다. 현재 페이지에 없는 식별자도 받는다.
+    ⚠**같은 집합이면 아무 일도 하지 않는다** — `selection-change` 를 받아 앱 상태를 갱신하고
+    다시 이것을 부르는 배선이 자연스러운데, 무조건 발생시키면 그 자리가 무한 루프가 된다.
+  - **`clearSelection()`** — 누적분까지 전부 비운다. 전체선택 체크박스가 «이 페이지» 범위가
+    되면서 전역 소거의 자리가 없어졌고, 일괄 처리 후 앱이 상태를 되돌리는 경로가 여기다.
+- **`selection-change` detail 에 `selectedIds: string[]` 추가** — `selectedRows`(현재 페이지)와
+  나란히 누적 식별자를 싣는다. 두 필드의 길이가 다른 것이 서버 페이징에서는 정상이다.
+- **`select-all` 이벤트** — 사용자가 전체선택 체크박스를 조작했다는 **의도**를 따로 알린다.
+  `selection-change` 만으로는 *"세 행을 골랐다"* 와 *"전체선택을 눌렀다"* 가 구분되지 않는데,
+  서버 페이징에서 후자는 앱이 *"조건에 맞는 N건 전부"* 를 제안할 자리다.
+  ⚠**`scope: 'page' | 'all'` 필드는 두지 않았다** — 이 컴포넌트는 `'all'` 을 낼 수 없다.
+  전역 전체선택은 식별자 목록이 아니라 **조회 조건**이라 컴포넌트가 표현할 수 있는 것이 아니고,
+  값이 하나뿐인 유니온은 라이브러리가 모르는 개념을 아는 척하는 필드가 된다.
+
+### Changed
+
+- **선택 건수 라벨이 두 숫자를 구분해 알린다** — 선택이 페이지를 가로지르면
+  `4 selected (1 on this page)` 처럼 누적과 이 페이지 몫을 함께 낸다. 한 페이지 안에 머무는
+  동안에는 종전대로 `3 selected` 다. 두 숫자가 다르다는 사실 자체가 사용자에게 보여야 한다.
+- **선택 건수·페이지 크기 문구가 로케일 레지스트리로 이주했다**(`selected` ·
+  `selectedAcrossPages` · `rowsPerPage`). `0.11.0` 의 이주가 중첩 템플릿 안의 두 건을
+  남겨 두어, 다른 문구가 전부 영어인 환경에서 이 둘만 한국어로 나왔다.
+
 ## [0.11.0] - 2026-08-04
 
+### Fixed
+
+- 🔴**`LICENSE` 파일이 없어 게시본에 MIT 원문이 빠져 있었다.** `package.json` 이
+  `"license": "MIT"` 를 선언하고 `files` 에 `LICENSE` 를 나열했지만 파일 자체가 없었다
+  ⇒ `0.10.0` 까지의 tarball 에 라이선스 원문이 들어 있지 않다. MIT 는 *"위 저작권 고지와
+  이 허가 고지를 모든 사본에 포함시켜야 한다"* 는 조건부 허가이므로, 원문 누락은 그 조건을
+  스스로 이행하지 못한 상태였다. ⚠`npm view … license` 가 `MIT` 를 보여 주는 것은
+  `package.json` 필드를 읽은 것이지 **원문이 배포됐다는 뜻이 아니다.**
+
 ### Changed
 
 - **`u-rich-table` 의 `_id` 부재 경고가 영어로 이주했다** — 개발자 대면 진단이므로 로케일

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 iyulab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/u-rich-table/URichTable.d.ts

@@ -40,6 +40,35 @@ export declare class URichTable extends LitElement {
     revertRow(_rowId: string): void;
     setRowError(rowId: string, message: string): void;
     clearRowError(rowId: string): void;
+    /**
+     * 선택된 행의 **식별자 집합** — 페이지를 가로질러 누적된 전부.
+     *
+     * `getSelectedRows()` 는 현재 페이지의 행 객체만 돌려주므로(갖고 있지 않은 행을 만들 수 없다)
+     * *"여러 페이지에 걸쳐 고른 뒤 일괄 처리"* 에는 이쪽이 필요하다.
+     *
+     * ⚠**스냅샷이다.** 내부 집합을 그대로 넘기면 `ReadonlySet` 이 타입 수준 약속일 뿐이라
+     * JS 소비자가 `add` 로 내부 상태를 **갱신 신호 없이** 망가뜨릴 수 있다. 복제 비용은
+     * 선택 크기에 비례하고 무시할 수준이다.
+     */
+    get selectedRowIds(): ReadonlySet<string>;
+    /**
+     * 선택을 **통째로 대체**한다 — 페이지를 가로지르는 누적분까지.
+     *
+     * 앱이 자기 상태를 정본으로 삼는 경우(외부 저장·복원, 필터 변경 시 정리)의 진입점이다.
+     * 현재 페이지에 없는 식별자를 넣어도 된다 — 그 페이지로 이동하면 선택된 것으로 렌더된다.
+     *
+     * ⚠**같은 집합이면 아무 일도 하지 않는다.** 앱이 `selection-change` 를 받아 자기 상태를
+     * 갱신하고 다시 이것을 부르는 것이 자연스러운 배선인데, 무조건 발생시키면 그 자리가
+     * **무한 루프**가 된다.
+     */
+    setSelection(ids: Iterable<string>): void;
+    /**
+     * 선택을 **전부** 비운다 — 페이지를 가로지르는 누적분까지.
+     *
+     * 전체선택 체크박스는 «이 페이지»만 다루므로 전역 소거의 자리가 없다. 일괄 처리를 끝낸 뒤
+     * 앱이 상태를 되돌리는 경로가 여기다. `selection-change` 를 발생시킨다.
+     */
+    clearSelection(): void;
     /**
      * 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
      *
@@ -52,8 +81,24 @@ export declare class URichTable extends LitElement {
     private _rowId;
     private _warnedMissingRowId;
     private _warnMissingRowId;
+    /**
+     * **현재 페이지의** 선택된 행. 서버 페이징에서 다른 페이지의 선택분은 여기 없다 —
+     * 이 컴포넌트가 갖고 있지 않은 행을 돌려줄 수는 없기 때문이다.
+     * 페이지를 가로지르는 선택 집합이 필요하면 {@link selectedRowIds} 를 쓴다.
+     */
     getSelectedRows(): Record<string, unknown>[];
+    /** 이 페이지 행들의 식별자. 전체선택/해제가 «이 페이지» 범위임을 정의하는 값이다. */
+    private _pageRowIds;
+    /** 현재 페이지에서 선택된 행 수 — 전체선택 체크박스의 «분자». */
+    private get _selectedOnPage();
     render(): TemplateResult;
+    /**
+     * ⚠**두 숫자를 섞지 않는다.** 체크박스는 «이 페이지»를 켜고 끄므로 그 상태도 페이지 기준이고,
+     * 라벨의 건수는 페이지를 가로지르는 **누적**이다. 종전에는 분자만 누적이고 분모가 페이지라
+     * 다른 페이지의 선택분이 이 페이지의 체크 상태로 새어 나왔다 — 페이지 1을 전량 선택하고
+     * 넘어가면 페이지 2에서 아무것도 고르지 않았는데 체크박스가 켜져 보였고, 그것을 끄면
+     * 페이지 1의 선택이 조용히 사라졌다.
+     */
     private _renderToolbar;
     private _renderHeader;
     private _renderFilterRow;
@@ -62,6 +107,23 @@ export declare class URichTable extends LitElement {
     private _renderCellContent;
     private _renderNewRow;
     private _renderPagination;
+    /**
+     * 전체선택 체크박스 — 범위는 **현재 페이지**다(합집합/차집합, 치환이 아니다).
+     * 종전에는 켤 때 `new Set(현재 페이지)` 로 **치환**하고 끌 때 `new Set()` 으로 **전역 소거**해서,
+     * 어느 쪽이든 다른 페이지의 선택분이 함께 날아갔다. 전역 소거가 필요하면 {@link clearSelection}.
+     *
+     * ## 왜 `select-all` 을 따로 내보내는가
+     *
+     * `selection-change` 만으로는 *"사용자가 세 행을 골랐다"* 와 *"사용자가 전체선택을 눌렀다"* 가
+     * 구분되지 않는다. 서버 페이징에서 그 구분은 앱에 필요하다 — 전체선택을 누른 순간이
+     * *"이 조건에 맞는 N건 전부"* 를 제안할 자리이기 때문이다.
+     *
+     * ⚠**`scope: 'page' | 'all'` 필드는 두지 않았다.** 이 컴포넌트는 `'all'` 을 **낼 수 없다** —
+     * 다른 페이지의 행을 갖고 있지 않고, 서버 페이징에서 «전역 전체선택»은 id 목록이 아니라
+     * **조회 조건**이라 컴포넌트가 표현할 수 있는 것이 아니다. 값이 하나뿐인 유니온은
+     * *"라이브러리가 모르는 개념을 아는 척하는"* 필드가 된다. ⇒ 컴포넌트는 **의도만** 알리고
+     * 전역 해석은 앱이 한다.
+     */
     private _onSelectAll;
     private _onRowSelect;
     private _lastSelectedIndex;
@@ -83,6 +145,12 @@ export declare class URichTable extends LitElement {
     private _getOptionLabel;
     private _getPageNumbers;
     private _moveToNextEditableCell;
+    /**
+     * ⚠**두 필드가 서로 다른 것을 센다.** `selectedRows` 는 **현재 페이지의 행 객체**이고
+     * `selectedIds` 는 페이지를 가로지르는 **누적 식별자**다. 서버 페이징에서 둘의 길이가
+     * 다른 것이 정상이며, 그 차이를 감출 방법은 없다 — 컴포넌트가 다른 페이지의 행을
+     * 갖고 있지 않기 때문이다.
+     */
     private _fireSelectionChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -90,6 +158,7 @@ export declare class URichTable extends LitElement {
     private _handleCopy;
     private _handlePaste;
     private _moveFocus;
+    /** `Ctrl`/`Cmd` + `A` — 전체선택 체크박스와 같은 범위(현재 페이지 합집합)여야 한다. */
     private _selectAll;
     static define(tagName?: string): void;
 }

package/dist/components/u-rich-table/URichTable.js

@@ -102,6 +102,44 @@ var URichTable = class URichTable extends LitElement {
 		this.rowErrors = next;
 	}
 	/**
+	* 선택된 행의 **식별자 집합** — 페이지를 가로질러 누적된 전부.
+	*
+	* `getSelectedRows()` 는 현재 페이지의 행 객체만 돌려주므로(갖고 있지 않은 행을 만들 수 없다)
+	* *"여러 페이지에 걸쳐 고른 뒤 일괄 처리"* 에는 이쪽이 필요하다.
+	*
+	* ⚠**스냅샷이다.** 내부 집합을 그대로 넘기면 `ReadonlySet` 이 타입 수준 약속일 뿐이라
+	* JS 소비자가 `add` 로 내부 상태를 **갱신 신호 없이** 망가뜨릴 수 있다. 복제 비용은
+	* 선택 크기에 비례하고 무시할 수준이다.
+	*/
+	get selectedRowIds() {
+		return new Set(this.selectedIds);
+	}
+	/**
+	* 선택을 **통째로 대체**한다 — 페이지를 가로지르는 누적분까지.
+	*
+	* 앱이 자기 상태를 정본으로 삼는 경우(외부 저장·복원, 필터 변경 시 정리)의 진입점이다.
+	* 현재 페이지에 없는 식별자를 넣어도 된다 — 그 페이지로 이동하면 선택된 것으로 렌더된다.
+	*
+	* ⚠**같은 집합이면 아무 일도 하지 않는다.** 앱이 `selection-change` 를 받아 자기 상태를
+	* 갱신하고 다시 이것을 부르는 것이 자연스러운 배선인데, 무조건 발생시키면 그 자리가
+	* **무한 루프**가 된다.
+	*/
+	setSelection(ids) {
+		const next = new Set(ids);
+		if (next.size === this.selectedIds.size && [...next].every((id) => this.selectedIds.has(id))) return;
+		this.selectedIds = next;
+		this._fireSelectionChange();
+	}
+	/**
+	* 선택을 **전부** 비운다 — 페이지를 가로지르는 누적분까지.
+	*
+	* 전체선택 체크박스는 «이 페이지»만 다루므로 전역 소거의 자리가 없다. 일괄 처리를 끝낸 뒤
+	* 앱이 상태를 되돌리는 경로가 여기다. `selection-change` 를 발생시킨다.
+	*/
+	clearSelection() {
+		this.setSelection([]);
+	}
+	/**
 	* 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
 	*
 	* ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
@@ -121,9 +159,22 @@ var URichTable = class URichTable extends LitElement {
 		this._warnedMissingRowId = true;
 		console.warn("[@iyulab/data-components] u-rich-table: rows have no `_id`, so selection is tracked by **position**. Re-sorting or re-paging the data moves the selection to a different row. Give every row a unique `_id`.");
 	}
+	/**
+	* **현재 페이지의** 선택된 행. 서버 페이징에서 다른 페이지의 선택분은 여기 없다 —
+	* 이 컴포넌트가 갖고 있지 않은 행을 돌려줄 수는 없기 때문이다.
+	* 페이지를 가로지르는 선택 집합이 필요하면 {@link selectedRowIds} 를 쓴다.
+	*/
 	getSelectedRows() {
 		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
 	}
+	/** 이 페이지 행들의 식별자. 전체선택/해제가 «이 페이지» 범위임을 정의하는 값이다. */
+	_pageRowIds() {
+		return this.data.map((row, i) => this._rowId(row, i));
+	}
+	/** 현재 페이지에서 선택된 행 수 — 전체선택 체크박스의 «분자». */
+	get _selectedOnPage() {
+		return this._pageRowIds().reduce((n, id) => n + (this.selectedIds.has(id) ? 1 : 0), 0);
+	}
 	render() {
 		return html`
       ${this._renderToolbar()}
@@ -138,19 +189,31 @@ var URichTable = class URichTable extends LitElement {
       ${this._renderPagination()}
     `;
 	}
+	/**
+	* ⚠**두 숫자를 섞지 않는다.** 체크박스는 «이 페이지»를 켜고 끄므로 그 상태도 페이지 기준이고,
+	* 라벨의 건수는 페이지를 가로지르는 **누적**이다. 종전에는 분자만 누적이고 분모가 페이지라
+	* 다른 페이지의 선택분이 이 페이지의 체크 상태로 새어 나왔다 — 페이지 1을 전량 선택하고
+	* 넘어가면 페이지 2에서 아무것도 고르지 않았는데 체크박스가 켜져 보였고, 그것을 끄면
+	* 페이지 1의 선택이 조용히 사라졌다.
+	*/
 	_renderToolbar() {
-		const selectedCount = this.selectedIds.size;
+		const total = this.selectedIds.size;
+		const onPage = this._selectedOnPage;
+		const crossesPages = total > onPage;
 		return html`
       <div class="toolbar">
         ${this.selectable ? html`
           <div class="selection-info">
             <input type="checkbox"
-              .checked=${selectedCount > 0 && selectedCount === this.data.length}
-              .indeterminate=${selectedCount > 0 && selectedCount < this.data.length}
+              .checked=${this.data.length > 0 && onPage === this.data.length}
+              .indeterminate=${onPage > 0 && onPage < this.data.length}
               @change=${this._onSelectAll} />
-            ${selectedCount > 0 ? html`<span>${selectedCount}건 선택됨</span>` : ""}
+            ${total > 0 ? html`<span>${crossesPages ? messages.text("selectedAcrossPages", {
+			count: total,
+			onPage
+		}) : messages.text("selected", { count: total })}</span>` : ""}
           </div>
-          ${selectedCount > 0 ? html`<slot name="bulk-actions"></slot>` : ""}
+          ${total > 0 ? html`<slot name="bulk-actions"></slot>` : ""}
         ` : ""}
         <div style="flex:1"></div>
         <slot name="toolbar-end"></slot>
@@ -332,16 +395,45 @@ var URichTable = class URichTable extends LitElement {
 			25,
 			50,
 			100
-		].map((s) => html`<option value=${s} ?selected=${s === this.pageSize}>${s}행</option>`)}
+		].map((s) => html`<option value=${s} ?selected=${s === this.pageSize}>${messages.text("rowsPerPage", { size: s })}</option>`)}
           </select>
         </div>
       </div>
     `;
 	}
+	/**
+	* 전체선택 체크박스 — 범위는 **현재 페이지**다(합집합/차집합, 치환이 아니다).
+	* 종전에는 켤 때 `new Set(현재 페이지)` 로 **치환**하고 끌 때 `new Set()` 으로 **전역 소거**해서,
+	* 어느 쪽이든 다른 페이지의 선택분이 함께 날아갔다. 전역 소거가 필요하면 {@link clearSelection}.
+	*
+	* ## 왜 `select-all` 을 따로 내보내는가
+	*
+	* `selection-change` 만으로는 *"사용자가 세 행을 골랐다"* 와 *"사용자가 전체선택을 눌렀다"* 가
+	* 구분되지 않는다. 서버 페이징에서 그 구분은 앱에 필요하다 — 전체선택을 누른 순간이
+	* *"이 조건에 맞는 N건 전부"* 를 제안할 자리이기 때문이다.
+	*
+	* ⚠**`scope: 'page' | 'all'` 필드는 두지 않았다.** 이 컴포넌트는 `'all'` 을 **낼 수 없다** —
+	* 다른 페이지의 행을 갖고 있지 않고, 서버 페이징에서 «전역 전체선택»은 id 목록이 아니라
+	* **조회 조건**이라 컴포넌트가 표현할 수 있는 것이 아니다. 값이 하나뿐인 유니온은
+	* *"라이브러리가 모르는 개념을 아는 척하는"* 필드가 된다. ⇒ 컴포넌트는 **의도만** 알리고
+	* 전역 해석은 앱이 한다.
+	*/
 	_onSelectAll(e) {
-		if (e.target.checked) this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
-		else this.selectedIds = /* @__PURE__ */ new Set();
+		const checked = e.target.checked;
+		const pageIds = this._pageRowIds();
+		const next = new Set(this.selectedIds);
+		for (const id of pageIds) if (checked) next.add(id);
+		else next.delete(id);
+		this.selectedIds = next;
 		this._fireSelectionChange();
+		this.dispatchEvent(new CustomEvent("select-all", {
+			detail: {
+				checked,
+				pageRowIds: pageIds
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	_onRowSelect(rowId) {
 		const next = new Set(this.selectedIds);
@@ -578,9 +670,18 @@ var URichTable = class URichTable extends LitElement {
 		const value = this.data[rowIndex]?.[this.columns[colIndex]?.key];
 		this._onCellDblClick(rowIndex, colIndex, value);
 	}
+	/**
+	* ⚠**두 필드가 서로 다른 것을 센다.** `selectedRows` 는 **현재 페이지의 행 객체**이고
+	* `selectedIds` 는 페이지를 가로지르는 **누적 식별자**다. 서버 페이징에서 둘의 길이가
+	* 다른 것이 정상이며, 그 차이를 감출 방법은 없다 — 컴포넌트가 다른 페이지의 행을
+	* 갖고 있지 않기 때문이다.
+	*/
 	_fireSelectionChange() {
 		this.dispatchEvent(new CustomEvent("selection-change", {
-			detail: { selectedRows: this.getSelectedRows() },
+			detail: {
+				selectedRows: this.getSelectedRows(),
+				selectedIds: [...this.selectedIds]
+			},
 			bubbles: true,
 			composed: true
 		}));
@@ -620,8 +721,11 @@ var URichTable = class URichTable extends LitElement {
 			colIndex: newCol
 		};
 	}
+	/** `Ctrl`/`Cmd` + `A` — 전체선택 체크박스와 같은 범위(현재 페이지 합집합)여야 한다. */
 	_selectAll() {
-		this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
+		const next = new Set(this.selectedIds);
+		for (const id of this._pageRowIds()) next.add(id);
+		this.selectedIds = next;
 		this._fireSelectionChange();
 	}
 	static define(tagName = "u-rich-table") {

package/dist/components/u-rich-table/types.d.ts

@@ -31,8 +31,24 @@ export interface FilterState {
     [field: string]: string;
 }
 export interface RichTableEventMap {
+    /**
+     * ⚠두 필드가 서로 다른 것을 센다 — `selectedRows` 는 **현재 페이지의 행 객체**,
+     * `selectedIds` 는 페이지를 가로지르는 **누적 식별자**다. 서버 페이징에서 길이가 다른 것이 정상이다.
+     */
     'selection-change': CustomEvent<{
         selectedRows: Record<string, unknown>[];
+        selectedIds: string[];
+    }>;
+    /**
+     * 사용자가 **전체선택 체크박스**를 조작했다. `selection-change` 와 함께 발생한다.
+     *
+     * 이 이벤트가 따로 있는 이유는 *"세 행을 골랐다"* 와 *"전체선택을 눌렀다"* 를 가르기 위해서다 —
+     * 서버 페이징에서 후자는 앱이 *"조건에 맞는 전체 N건"* 을 제안할 자리다.
+     * `pageRowIds` 는 이번 조작이 더하거나 뺀 **현재 페이지의** 식별자다.
+     */
+    'select-all': CustomEvent<{
+        checked: boolean;
+        pageRowIds: string[];
     }>;
     'row-create': CustomEvent<{
         row: Record<string, unknown>;

package/dist/react.d.ts

@@ -2,7 +2,6 @@ import { EventName } from '@lit/react';
 import { USimpleSheet } from './components/simple-sheet/USimpleSheet';
 import { UDataView } from './components/data-view/UDataView';
 import { URichTable } from './components/u-rich-table/URichTable';
-import { RichTableEventMap } from './components/u-rich-table/types';
 /** USimpleSheet React 래퍼 — `change` 이벤트는 `onChange`로 노출 */
 export declare const USimpleSheetReact: import('@lit/react').ReactWebComponent<USimpleSheet, {
     onChange: EventName<CustomEvent<{
@@ -13,15 +12,44 @@ export declare const USimpleSheetReact: import('@lit/react').ReactWebComponent<U
 export declare const UDataViewReact: import('@lit/react').ReactWebComponent<UDataView, {}>;
 /** URichTable React 래퍼 — RichTableEventMap의 모든 이벤트를 onXxx로 노출 */
 export declare const URichTableReact: import('@lit/react').ReactWebComponent<URichTable, {
-    onSelectionChange: EventName<RichTableEventMap["selection-change"]>;
-    onRowCreate: EventName<RichTableEventMap["row-create"]>;
-    onRowUpdate: EventName<RichTableEventMap["row-update"]>;
-    onRowDelete: EventName<RichTableEventMap["row-delete"]>;
-    onRowExpand: EventName<RichTableEventMap["row-expand"]>;
-    onSortChange: EventName<RichTableEventMap["sort-change"]>;
-    onFilterChange: EventName<RichTableEventMap["filter-change"]>;
-    onPageChange: EventName<RichTableEventMap["page-change"]>;
-    onPaste: EventName<RichTableEventMap["paste"]>;
+    readonly onSelectionChange: EventName<CustomEvent<{
+        selectedRows: Record<string, unknown>[];
+        selectedIds: string[];
+    }>>;
+    readonly onSelectAll: EventName<CustomEvent<{
+        checked: boolean;
+        pageRowIds: string[];
+    }>>;
+    readonly onRowCreate: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+    }>>;
+    readonly onRowUpdate: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+        field: string;
+        value: unknown;
+        oldValue: unknown;
+    }>>;
+    readonly onRowDelete: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+    }>>;
+    readonly onRowExpand: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+        expanded: boolean;
+    }>>;
+    readonly onSortChange: EventName<CustomEvent<{
+        field: string;
+        direction: "asc" | "desc" | null;
+    }>>;
+    readonly onFilterChange: EventName<CustomEvent<{
+        filters: import('./react').FilterState;
+    }>>;
+    readonly onPageChange: EventName<CustomEvent<{
+        page: number;
+        pageSize: number;
+    }>>;
+    readonly onPaste: EventName<CustomEvent<{
+        rows: Record<string, unknown>[];
+    }>>;
 }>;
 export { USimpleSheet, UDataView, URichTable };
 export type { SheetColumn } from './components/simple-sheet/USimpleSheet';

package/dist/react.js

@@ -34,6 +34,7 @@ var URichTableReact = createComponent({
 	react: React,
 	events: {
 		onSelectionChange: "selection-change",
+		onSelectAll: "select-all",
 		onRowCreate: "row-create",
 		onRowUpdate: "row-update",
 		onRowDelete: "row-delete",

package/dist/utilities/messages.d.ts

@@ -21,5 +21,5 @@
  * 딸려 온다**(`Locale.getValue('valueMissing')`). 같은 문장을 이 표에 복제하면 두 곳이
  * 갈라진다.
  */
-export type DataMessageKey = 'empty' | 'loading' | 'filterPlaceholder' | 'filterAll' | 'addRow' | 'pageInfo' | 'noMatch';
+export type DataMessageKey = 'empty' | 'loading' | 'filterPlaceholder' | 'filterAll' | 'addRow' | 'pageInfo' | 'noMatch' | 'selected' | 'selectedAcrossPages' | 'rowsPerPage';
 export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<DataMessageKey>;

package/dist/utilities/messages.js

@@ -8,7 +8,10 @@ messages.register("en", {
 	filterAll: "All",
 	addRow: "+ New row",
 	pageInfo: "Showing {start}-{end} of {total}",
-	noMatch: "No matching item"
+	noMatch: "No matching item",
+	selected: "{count} selected",
+	selectedAcrossPages: "{count} selected ({onPage} on this page)",
+	rowsPerPage: "{size} rows"
 });
 messages.register("ko", {
 	empty: "데이터가 없습니다",
@@ -17,7 +20,10 @@ messages.register("ko", {
 	filterAll: "전체",
 	addRow: "+ 새 행",
 	pageInfo: "전체 {total}건 중 {start}-{end} 표시",
-	noMatch: "일치하는 항목 없음"
+	noMatch: "일치하는 항목 없음",
+	selected: "{count}건 선택됨",
+	selectedAcrossPages: "{count}건 선택됨 (이 페이지 {onPage}건)",
+	rowsPerPage: "{size}행"
 });
 //#endregion
 export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -51,11 +51,12 @@
   ],
   "scripts": {
     "start": "vite",
-    "build": "eslint && vite build",
+    "build": "npm run typecheck && eslint && vite build",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "eslint src/",
-    "lint:fix": "eslint src/ --fix"
+    "lint:fix": "eslint src/ --fix",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@iyulab/components": "^1.23.0",