@iyulab/data-components 0.7.0 → 0.8.0

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

@@ -9,6 +9,19 @@ export declare class URichTable extends LitElement {
     currentPage: number;
     loading: boolean;
     emptyMessage: string;
+    /** 로딩 표시 문구 */
+    loadingMessage: string;
+    /** 필터 입력 placeholder */
+    filterPlaceholder: string;
+    /** 필터 select 의 "전체" 항목 문구 */
+    filterAllLabel: string;
+    /** 새 행 추가 버튼 문구 */
+    addRowLabel: string;
+    /**
+     * 페이지 정보 문구. (전체, 시작, 끝) 을 받아 문자열을 만든다.
+     * 언어마다 어순이 달라 템플릿 문자열이 아니라 함수로 연다.
+     */
+    pageInfoFormatter: (total: number, start: number, end: number) => string;
     selectable: boolean;
     editable: boolean;
     addable: boolean;
@@ -27,6 +40,18 @@ export declare class URichTable extends LitElement {
     revertRow(_rowId: string): void;
     setRowError(rowId: string, message: string): void;
     clearRowError(rowId: string): void;
+    /**
+     * 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
+     *
+     * ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
+     * `_id` 가 `undefined` 가 되고, Set 은 그 하나만 담으므로 **한 행을 고르면 전부
+     * 골라진다.** 그래서 없을 때는 위치를 대신 쓴다 — 다만 위치 기반 식별은 데이터가
+     * 재정렬·재페이징되면 **선택이 다른 행으로 옮겨간다.** 정렬/필터/페이지가 소비자
+     * 책임인 컴포넌트이므로, 실제 사용에서는 `_id` 를 주는 것이 옳다.
+     */
+    private _rowId;
+    private _warnedMissingRowId;
+    private _warnMissingRowId;
     getSelectedRows(): Record<string, unknown>[];
     render(): TemplateResult;
     private _renderToolbar;

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

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+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 { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";
@@ -15,6 +15,11 @@ var URichTable = class URichTable extends LitElement {
 		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.selectable = false;
 		this.editable = false;
 		this.addable = false;
@@ -29,6 +34,7 @@ var URichTable = class URichTable extends LitElement {
 		this.filters = {};
 		this.validationErrors = /* @__PURE__ */ new Map();
 		this.rowErrors = /* @__PURE__ */ new Map();
+		this._warnedMissingRowId = false;
 		this._lastSelectedIndex = -1;
 		this._onGlobalKeyDown = (e) => {
 			if (e.ctrlKey || e.metaKey) {
@@ -65,7 +71,8 @@ var URichTable = class URichTable extends LitElement {
 				}
 				if (e.key === " " && this.selectable) {
 					e.preventDefault();
-					const rowId = this.data[this.focusedCell.rowIndex]?._id;
+					const r = this.data[this.focusedCell.rowIndex];
+					const rowId = r ? this._rowId(r, this.focusedCell.rowIndex) : void 0;
 					if (rowId) this._onRowSelect(rowId);
 				}
 				if (e.key === "Delete" && this.selectedIds.size > 0) for (const row of this.getSelectedRows()) this.dispatchEvent(new CustomEvent("row-delete", {
@@ -88,8 +95,28 @@ var URichTable = class URichTable extends LitElement {
 		next.delete(rowId);
 		this.rowErrors = next;
 	}
+	/**
+	* 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
+	*
+	* ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
+	* `_id` 가 `undefined` 가 되고, Set 은 그 하나만 담으므로 **한 행을 고르면 전부
+	* 골라진다.** 그래서 없을 때는 위치를 대신 쓴다 — 다만 위치 기반 식별은 데이터가
+	* 재정렬·재페이징되면 **선택이 다른 행으로 옮겨간다.** 정렬/필터/페이지가 소비자
+	* 책임인 컴포넌트이므로, 실제 사용에서는 `_id` 를 주는 것이 옳다.
+	*/
+	_rowId(row, index) {
+		const id = row._id;
+		if (id !== void 0 && id !== null) return String(id);
+		this._warnMissingRowId();
+		return `#${index}`;
+	}
+	_warnMissingRowId() {
+		if (this._warnedMissingRowId) return;
+		this._warnedMissingRowId = true;
+		console.warn("[@iyulab/data-components] u-rich-table: 행에 `_id` 가 없어 **위치**로 식별합니다. 데이터가 재정렬·재페이징되면 선택 상태가 다른 행으로 옮겨갑니다. 각 행에 고유한 `_id` 를 부여하세요.");
+	}
 	getSelectedRows() {
-		return this.data.filter((row) => this.selectedIds.has(row._id));
+		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
 	}
 	render() {
 		return html`
@@ -122,7 +149,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}>+ 새 행</button>
+          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel}</button>
         ` : ""}
       </div>
     `;
@@ -157,10 +184,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="">전체</option>
+                    <option value="">${this.filterAllLabel}</option>
                     ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
                   </select>` : html`<input
-                    placeholder="필터..."
+                    placeholder=${this.filterPlaceholder}
                     @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
           </td>
         `)}
@@ -169,10 +196,10 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_renderBody() {
-		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">로딩 중...</div></td></tr>`;
+		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>`;
 		return this.data.map((row, rowIdx) => {
-			const rowId = row._id;
+			const rowId = this._rowId(row, rowIdx);
 			const isSelected = this.selectedIds.has(rowId);
 			const isExpanded = this.expandedIds.has(rowId);
 			const hasError = this.rowErrors.has(rowId);
@@ -192,7 +219,7 @@ var URichTable = class URichTable extends LitElement {
           ` : ""}
           ${this.columns.map((col, colIdx) => this._renderCell(row, rowIdx, col, colIdx))}
           <td class="actions-cell">
-            <span style="cursor:pointer;color:#94a3b8" @click=${() => this._onRowMenu(row)}>⋯</span>
+            <span class="row-menu" @click=${() => this._onRowMenu(row)}>⋯</span>
           </td>
         </tr>
         ${isExpanded && this.detailRenderer ? html`
@@ -201,7 +228,7 @@ var URichTable = class URichTable extends LitElement {
           </tr>
         ` : ""}
         ${hasError ? html`
-          <tr><td colspan=${this._colSpan()} style="padding:2px 8px;background:#fef2f2;color:#ef4444;font-size:11px;">
+          <tr><td colspan=${this._colSpan()} class="row-error-cell">
             ${this.rowErrors.get(rowId)}
           </td></tr>
         ` : ""}
@@ -253,7 +280,10 @@ var URichTable = class URichTable extends LitElement {
 			}
 			return String(value ?? "");
 		}
-		if (col.type === "badge" && col.badgeColors) return html`<span class="badge" style="background:${col.badgeColors[String(value)] ?? "#f3f4f6"}">${this._getOptionLabel(col, value)}</span>`;
+		if (col.type === "badge" && col.badgeColors) {
+			const color = col.badgeColors[String(value)] ?? "#f3f4f6";
+			return html`<span class="badge" style="background:${color}">${this._getOptionLabel(col, value)}</span>`;
+		}
 		if (col.type === "select" && col.options) return this._getOptionLabel(col, value);
 		if (col.type === "number" && value != null) return Number(value).toLocaleString();
 		return String(value ?? "");
@@ -261,7 +291,7 @@ var URichTable = class URichTable extends LitElement {
 	_renderNewRow() {
 		return html`
       <tr class="new-row">
-        ${this.selectable ? html`<td class="checkbox-cell"><span style="color:#86efac">+</span></td>` : ""}
+        ${this.selectable ? html`<td class="checkbox-cell"><span class="new-row-marker">+</span></td>` : ""}
         ${this.expandable ? html`<td></td>` : ""}
         ${this.columns.map((col, colIdx) => html`
           <td>
@@ -284,7 +314,7 @@ var URichTable = class URichTable extends LitElement {
 		const end = Math.min(this.currentPage * this.pageSize, this.totalCount);
 		return html`
       <div class="pagination">
-        <span>전체 ${this.totalCount.toLocaleString()}건 중 ${start}-${end} 표시</span>
+        <span>${this.pageInfoFormatter(this.totalCount, start, end)}</span>
         <div class="page-buttons">
           <button ?disabled=${this.currentPage <= 1} @click=${() => this._onPageChange(this.currentPage - 1)}>◀</button>
           ${this._getPageNumbers(totalPages).map((p) => html`
@@ -303,7 +333,7 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_onSelectAll(e) {
-		if (e.target.checked) this.selectedIds = new Set(this.data.map((r) => r._id));
+		if (e.target.checked) this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
 		else this.selectedIds = /* @__PURE__ */ new Set();
 		this._fireSelectionChange();
 	}
@@ -319,7 +349,7 @@ var URichTable = class URichTable extends LitElement {
 		const start = Math.min(this._lastSelectedIndex, rowIdx);
 		const end = Math.max(this._lastSelectedIndex, rowIdx);
 		const next = new Set(this.selectedIds);
-		for (let i = start; i <= end; i++) next.add(this.data[i]._id);
+		for (let i = start; i <= end; i++) next.add(this._rowId(this.data[i], i));
 		this.selectedIds = next;
 		this._fireSelectionChange();
 	}
@@ -442,7 +472,7 @@ var URichTable = class URichTable extends LitElement {
 		this.expandedIds = next;
 		this.dispatchEvent(new CustomEvent("row-expand", {
 			detail: {
-				row: this.data.find((r) => r._id === rowId),
+				row: this.data.find((r, i) => this._rowId(r, i) === rowId),
 				expanded
 			},
 			bubbles: true,
@@ -585,7 +615,7 @@ var URichTable = class URichTable extends LitElement {
 		};
 	}
 	_selectAll() {
-		this.selectedIds = new Set(this.data.map((r) => r._id));
+		this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
 		this._fireSelectionChange();
 	}
 	static define(tagName = "u-rich-table") {
@@ -599,6 +629,11 @@ __decorate([property({ type: Number }), __decorateMetadata("design:type", Object
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], URichTable.prototype, "currentPage", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "loading", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "emptyMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "loadingMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "filterPlaceholder", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "filterAllLabel", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "addRowLabel", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Function)], URichTable.prototype, "pageInfoFormatter", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "selectable", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "editable", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "addable", void 0);