@iyulab/data-components 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # Changelog
 
+## [0.11.0] - 2026-08-04
+
+### Changed
+
+- **`u-rich-table` 의 `_id` 부재 경고가 영어로 이주했다** — 개발자 대면 진단이므로 로케일
+  레지스트리에 넣지 않는다(사용자가 읽는 문자열이 아니다).
+
+- ⚠**표 문구가 «영어 기본 + 로케일 레지스트리»로 이주했다** — 기본값 7건이 한국어 리터럴이었다
+  (`u-rich-table` 6 · `u-simple-sheet` 1).
+
+  ```ts
+  import { Locale } from '@iyulab/components';
+  import { messages } from '@iyulab/data-components';
+
+  Locale.set('ko');                                  // 검증 메시지와 함께 전환된다
+  messages.register('ja', { empty: 'データなし' });   // 언어를 더하거나 문구를 덮는다
+  ```
+
+  ⚠**한국어 환경은 종전과 같은 문구를 본다**(내장 `ko` · `ko-KR` → `ko`).
+  ⚠**소비자가 준 값은 여전히 이긴다** — `emptyMessage` 등 프로퍼티 계약은 그대로다.
+
+  ★**기본값을 «비우고» 렌더에서 해석한다.** 프로퍼티 초기값에 문자열을 박으면 **생성 시점의
+  로케일에 고정**돼 나중에 `Locale.set()` 을 불러도 이미 만들어진 표는 따라오지 않는다.
+  ⚠**따라서 프로퍼티를 읽으면 기본 상태에서 `''` 가 나온다**(종전에는 한국어 리터럴).
+  화면 문구는 렌더 결과가 계약이다.
+
+  ★검증 메시지(`필수 항목입니다`)는 **`@iyulab/components` 의 키셋**을 쓴다
+  (`Locale.getValue('valueMissing')` · 14로케일). 같은 문장을 두 곳에 두지 않는다.
+
+### Requires
+
+- `@iyulab/components >= 1.23.0` (`Locale.namespace`).
+
+### Added
+
+- **`u-simple-sheet` 의 행 높이·여백·글자 크기를 소비자가 정할 수 있다** — 조절점 6종.
+
+  ```
+  --dc-row-height           24px   셀 height · line-height (둘 다)
+  --dc-cell-padding-block    0px   셀 · 편집 입력의 세로 여백 (행 높이에 가산)
+  --dc-cell-padding-inline   6px   〃 가로 여백
+  --dc-font-size            13px   본문 셀 · 편집 입력 · 드롭다운 항목
+  --dc-header-font-size     12px   열 머리
+  --dc-header-font-weight    600   〃
+  ```
+
+  종전에는 치수가 전부 리터럴이라, 한 화면에 표가 여럿일 때 **시트만 다른 높이로 남아도
+  맞출 방법이 없었다**(공개 API 에 치수 노브 0건 · `part` 0건). 0.10.0 이 연 색 축과 같은
+  자리이고, 색을 맞추고 나서야 높이 차이가 드러난 형태다.
+
+  ⚠**행 높이와 `line-height` 는 한 토큰이 정한다.** 따로 열면 소비자가 한쪽만 바꿔 글자가
+  세로로 어긋난다 — 그 묶임이 이 축의 유일한 제약이다.
+
+  ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다. 그래서
+  `:host` 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다(`:root` 는 닿지 않는다).
+
+  ⚠**기본 렌더는 변하지 않는다.** 선언하지 않으면 종전 값으로 그려진다.
+
+  ⚠**선언값과 읽히는 행 높이는 1.5px 다르다** — `border-collapse` 로 접힌 테두리가 사용값에
+  더해진다(`24px` 선언 → `25.5px` 로 읽힘). 32px 로 맞추려면 `30.5px` 를 선언한다.
+
+  `tests/browser/simple-sheet-density.browser.test.ts` 가 **실제 크로미움 계산값으로** 효력을
+  잰다 — 소스 대조는 «적혀 있음»만 증명하고, 문서 스코프 선언이 섀도의 `:host` 를 이기는지는
+  캐스케이드 문제라 계산값으로만 갈린다.
+
 ## [0.10.0] - 2026-08-03
 
 ### Added

package/README.md

@@ -190,6 +190,40 @@ u-rich-table { --dc-icon-color: #B0B0B0; }
 ⚠**`0.10.0` 은 조절점만 엽니다 — 기본 렌더는 변하지 않습니다.** 다섯 단이 전부
 `--u-txt-color-weak` 에서 파생되며, 다크 대응도 그 역할 토큰이 이미 갖고 있습니다.
 
+### 시트 밀도·타이포 조절 (`u-simple-sheet` · 0.11.0~)
+
+한 화면에 표가 여럿일 때 **행 높이를 서로 맞추기 위한** 조절점입니다. 색 축(위)과 같은
+이유로 열렸습니다 — 어느 높이가 옳은지는 소비자가 정할 일인데, 종전에는 치수가 전부
+리터럴이라 정할 방법이 없었습니다.
+
+| 토큰 | 기본값 | 무엇을 정하나 |
+|---|---|---|
+| `--dc-row-height` | `24px` | 셀 `height` 와 `line-height` **둘 다** |
+| `--dc-cell-padding-block` | `0px` | 셀·편집 입력의 세로 여백 (행 높이에 **가산**) |
+| `--dc-cell-padding-inline` | `6px` | 〃 가로 여백 |
+| `--dc-font-size` | `13px` | 본문 셀 · 편집 입력 · 드롭다운 항목 |
+| `--dc-header-font-size` | `12px` | 열 머리 |
+| `--dc-header-font-weight` | `600` | 〃 |
+
+```css
+/* ⚠요소 선택자로 겨눕니다 — :root 는 닿지 않습니다(아래 참조) */
+u-simple-sheet {
+  --dc-row-height: 30.5px;   /* 읽히는 행 높이 32px */
+}
+```
+
+⚠**`:root` 로는 닿지 않습니다.** 커스텀 프로퍼티 상속값은 섀도 루트의 `:host` 선언에
+집니다. 색 축과 달리 이 여섯은 `:host` 에 리터럴 기본값을 갖고 있으므로(역할 층에 치수
+축이 없어 파생할 곳이 없습니다) **요소 선택자**(`u-simple-sheet { … }`)로 선언하십시오.
+
+⚠**선언값과 «읽히는» 행 높이는 1.5px 다릅니다.** `border-collapse` 로 접힌 테두리가
+사용값에 더해집니다 — 기본 `24px` 선언이 `25.5px` 로 읽힙니다. 32px 로 맞추려면
+`30.5px` 를 선언하십시오. (같은 이유로 **빈 행은 데이터 행보다 1.5px 낮습니다** —
+`0.11.0` 이전부터 그랬고, 교정하면 기본 렌더가 바뀌므로 이 릴리스에서는 두었습니다.)
+
+⚠**`0.11.0` 도 조절점만 엽니다** — 선언하지 않으면 종전과 같은 값으로 그려집니다.
+이 여섯은 `u-simple-sheet` 전용입니다(`u-data-view`·`u-rich-table` 은 읽지 않습니다).
+
 ### 알려진 제약
 
 - **표면 높이를 뜻하는 토큰이 없습니다** — 배경 역할 토큰은 상호작용 상태 이름

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,6 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { messages } from "../../utilities/messages.js";
 import { styles } from "./USimpleSheet.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -25,7 +26,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
 		this.rows = 20;
 		this.cols = 10;
 		this.readonly = false;
-		this.noMatchMessage = "일치하는 항목 없음";
+		this.noMatchMessage = "";
 		this._sel = null;
 		this._editing = null;
 		this._editVal = "";
@@ -612,7 +613,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
             </div>
           ` : noMatch && isStrict ? html`
             <div class="cell-dropdown">
-              <div class="dropdown-empty">${this.noMatchMessage}</div>
+              <div class="dropdown-empty">${this.noMatchMessage || messages.text("noMatch")}</div>
             </div>
           ` : ""}
         ` : this._formatValue(value, c, r)}

package/dist/components/simple-sheet/USimpleSheet.styles.js

@@ -18,6 +18,25 @@ var baseStyles = css`
     --dc-header-color:   var(--u-txt-color-weak, #757575);   /* 열 머리 · 행 머리 */
     --dc-empty-color:    var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
     --dc-readonly-color: var(--u-txt-color-weak, #757575);   /* 읽기 전용 셀 */
+
+    /* ── 소비자 조절점 — 밀도·타이포 ──
+       ★색 축(위)과 같은 이유로 열었다. 한 제품 안에 표가 여럿일 때 «어느 높이가 옳은가»는
+       소비자가 정할 일인데, 이 컴포넌트는 치수가 전부 리터럴이라 정할 방법이 없었다.
+       ⚠**행 높이와 line-height 는 한 토큰이 정한다.** 따로 열면 소비자가 한쪽만 바꿔
+       글자가 세로로 어긋난다 — 그 묶임이 이 축의 유일한 제약이다.
+       ⚠**여백 축은 «가산»이다**: 실제 행 높이 = --dc-row-height + 2×--dc-cell-padding-block.
+       기본값이 0 이라 선언하지 않으면 종전과 같다.
+       ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다.
+       그래서 폴백이 아니라 :host 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다
+       (:host 선언은 상속값을 이기므로 :root 로는 닿지 않는다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다. */
+    --dc-row-height:          24px;   /* 셀 height · line-height (묶임) */
+    --dc-cell-padding-block:   0px;   /* 셀 · 편집 입력의 세로 여백 (가산) */
+    --dc-cell-padding-inline:  6px;   /* 〃 가로 여백 */
+    --dc-font-size:           13px;   /* 본문 셀 · 편집 입력 · 드롭다운 항목 */
+    --dc-header-font-size:    12px;   /* 열 머리 */
+    --dc-header-font-weight:   600;   /* 〃 */
+
     display: block;
     width: 100%;
     height: 400px;
@@ -78,8 +97,8 @@ var baseStyles = css`
     background: var(--u-neutral-100, #F5F5F5);
     padding: 4px 8px;
     text-align: center;
-    font-size: 12px;
-    font-weight: 600;
+    font-size: var(--dc-header-font-size);
+    font-weight: var(--dc-header-font-weight);
     color: var(--dc-header-color);
     border-right: 1px solid var(--u-border-color, #E0E0E0);
     border-bottom: 2px solid var(--u-border-color, #E0E0E0);
@@ -160,18 +179,20 @@ var baseStyles = css`
 
   /* Data cells */
   .cell {
-    padding: 0 6px;
+    padding: var(--dc-cell-padding-block) var(--dc-cell-padding-inline);
     border-right: 1px solid var(--u-border-color-weak, #EEEEEE);
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
-    font-size: 13px;
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     min-width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: cell;
-    height: 24px;
-    line-height: 24px;
+    /* ⚠height 는 «빈 셀»을 정한다 — 내용이 있는 셀의 높이는 line-height 가 만든다.
+       둘 중 하나만 배선하면 데이터 행과 빈 행의 높이가 갈린다(네거티브 컨트롤이 잡은 자리). */
+    height: var(--dc-row-height);
+    line-height: var(--dc-row-height);
     vertical-align: middle;
     position: relative;
     box-sizing: border-box;
@@ -206,8 +227,9 @@ var baseStyles = css`
     border: none;
     outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -1px;
-    padding: 0 6px;
-    font-size: 13px;
+    /* ⚠셀과 «같은 값»이어야 한다 — 어긋나면 편집 진입 순간 글자가 튄다. */
+    padding: var(--dc-cell-padding-block) var(--dc-cell-padding-inline);
+    font-size: var(--dc-font-size);
     font-family: inherit;
     color: var(--u-txt-color, #212121);
     background: var(--u-bg-color, #FFFFFF);
@@ -235,7 +257,8 @@ var baseStyles = css`
 
   .dropdown-item {
     padding: 4px 8px;
-    font-size: 13px;
+    /* 셀 값의 후보를 보이는 자리다 — 본문 글자 축을 따른다. */
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     cursor: pointer;
     white-space: nowrap;

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

@@ -1,9 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { messages } from "../../utilities/messages.js";
 import { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/components/u-rich-table/URichTable.ts
 var URichTable = class URichTable extends LitElement {
 	constructor(..._args) {
@@ -14,12 +16,16 @@ var URichTable = class URichTable extends LitElement {
 		this.pageSize = 25;
 		this.currentPage = 1;
 		this.loading = false;
-		this.emptyMessage = "데이터가 없습니다";
-		this.loadingMessage = "로딩 중...";
-		this.filterPlaceholder = "필터...";
-		this.filterAllLabel = "전체";
-		this.addRowLabel = "+ 새 행";
-		this.pageInfoFormatter = (total, start, end) => `전체 ${total.toLocaleString()}건 중 ${start}-${end} 표시`;
+		this.emptyMessage = "";
+		this.loadingMessage = "";
+		this.filterPlaceholder = "";
+		this.filterAllLabel = "";
+		this.addRowLabel = "";
+		this.pageInfoFormatter = (total, start, end) => messages.text("pageInfo", {
+			total: total.toLocaleString(),
+			start,
+			end
+		});
 		this.selectable = false;
 		this.editable = false;
 		this.addable = false;
@@ -113,7 +119,7 @@ var URichTable = class URichTable extends LitElement {
 	_warnMissingRowId() {
 		if (this._warnedMissingRowId) return;
 		this._warnedMissingRowId = true;
-		console.warn("[@iyulab/data-components] u-rich-table: 행에 `_id` 가 없어 **위치**로 식별합니다. 데이터가 재정렬·재페이징되면 선택 상태가 다른 행으로 옮겨갑니다. 각 행에 고유한 `_id` 를 부여하세요.");
+		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`.");
 	}
 	getSelectedRows() {
 		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
@@ -149,7 +155,7 @@ var URichTable = class URichTable extends LitElement {
         <div style="flex:1"></div>
         <slot name="toolbar-end"></slot>
         ${this.addable ? html`
-          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel}</button>
+          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel || messages.text("addRow")}</button>
         ` : ""}
       </div>
     `;
@@ -184,10 +190,10 @@ var URichTable = class URichTable extends LitElement {
         ${this.columns.map((col) => html`
           <td>
             ${col.filterable !== false ? col.filterType === "select" && col.options ? html`<select @change=${(e) => this._onFilterChange(col.key, e.target.value)}>
-                    <option value="">${this.filterAllLabel}</option>
+                    <option value="">${this.filterAllLabel || messages.text("filterAll")}</option>
                     ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
                   </select>` : html`<input
-                    placeholder=${this.filterPlaceholder}
+                    placeholder=${this.filterPlaceholder || messages.text("filterPlaceholder")}
                     @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
           </td>
         `)}
@@ -196,8 +202,8 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_renderBody() {
-		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage}</div></td></tr>`;
-		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage}</div></td></tr>`;
+		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage || messages.text("loading")}</div></td></tr>`;
+		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage || messages.text("empty")}</div></td></tr>`;
 		return this.data.map((row, rowIdx) => {
 			const rowId = this._rowId(row, rowIdx);
 			const isSelected = this.selectedIds.has(rowId);
@@ -438,7 +444,7 @@ var URichTable = class URichTable extends LitElement {
 		let newValue = this.editValue;
 		if (col.type === "number") newValue = Number(newValue);
 		if (col.required && !newValue && newValue !== 0) {
-			this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, "필수 항목입니다");
+			this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, Locale.getValue("valueMissing"));
 			return;
 		}
 		if (col.validator) {

package/dist/utilities/messages.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `@iyulab/data-components` 의 화면 문자열 — **영어 기본 + 로케일 레지스트리**.
+ *
+ * ## 왜 생겼나
+ *
+ * 표 컴포넌트의 기본 문구가 **한국어 리터럴**이었다(실측 7건). 소비자가 `emptyMessage` 등을
+ * 넘겨 덮을 수는 있었지만, **덮지 않으면 한국어가 나온다** — 로케일 표준(영어 기본 +
+ * 레지스트리)을 채택한 리포에서 그것은 미이주다.
+ *
+ * ## 기본값을 «비워» 두고 렌더에서 해석한다
+ *
+ * 프로퍼티 초기값으로 문자열을 박으면 **생성 시점의 로케일에 고정**된다 — `Locale.set()` 을
+ * 나중에 부르면 이미 만들어진 표는 따라오지 않는다. 그래서 기본값은 빈 문자열이고,
+ * 렌더가 `this.x || messages.text(...)` 로 해석한다.
+ *
+ * ⚠**소비자가 덮는 경로는 그대로다** — 값을 주면 그 값이 이긴다.
+ *
+ * ## 검증 메시지는 여기 두지 않는다
+ *
+ * `필수 항목입니다` 는 `@iyulab/components` 의 **검증 메시지 키셋에 이미 있고 14로케일이
+ * 딸려 온다**(`Locale.getValue('valueMissing')`). 같은 문장을 이 표에 복제하면 두 곳이
+ * 갈라진다.
+ */
+export type DataMessageKey = 'empty' | 'loading' | 'filterPlaceholder' | 'filterAll' | 'addRow' | 'pageInfo' | 'noMatch';
+export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<DataMessageKey>;

package/dist/utilities/messages.js

@@ -0,0 +1,23 @@
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
+//#region src/utilities/messages.ts
+var messages = Locale.namespace("@iyulab/data-components");
+messages.register("en", {
+	empty: "No data",
+	loading: "Loading…",
+	filterPlaceholder: "Filter…",
+	filterAll: "All",
+	addRow: "+ New row",
+	pageInfo: "Showing {start}-{end} of {total}",
+	noMatch: "No matching item"
+});
+messages.register("ko", {
+	empty: "데이터가 없습니다",
+	loading: "로딩 중...",
+	filterPlaceholder: "필터...",
+	filterAll: "전체",
+	addRow: "+ 새 행",
+	pageInfo: "전체 {total}건 중 {start}-{end} 표시",
+	noMatch: "일치하는 항목 없음"
+});
+//#endregion
+export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -58,7 +58,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.18.0",
+    "@iyulab/components": "^1.23.0",
     "lit": "^3.3.3"
   },
   "peerDependencies": {