@iyulab/data-components 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -1,4 +1,17 @@
 # Changelog
 
-## [Unreleased]
+## [0.1.8] - 2026-03-08
+### Added
+- USimpleSheet: `format` 속성 — Intl.NumberFormatOptions(통화, 퍼센트 등) 또는 콜백 함수로 표시 포맷 지정
+- USimpleSheet: 셀 값 기반 자동 텍스트 정렬 (숫자 우측, 문자 좌측)
+
+## [0.1.7] - 2026-03-08
+### Added
+- USimpleSheet: `compute` 콜백을 통한 열 단위 자동 계산 기능
+  - 가로(같은 행) 및 세로(행 간) 계산 모두 지원
+  - compute 열 자동 readonly 및 시각적 구분 (이탤릭 + 파란 배경)
+  - 에러 발생 시 빈 문자열 표시
+  - 붙여넣기/Fill 시 compute 열 건너뛰기
+
+## [0.1.6]
 - Initial library version release

package/README.md

@@ -4,7 +4,7 @@
 
 **[Live Demo](https://iyulab.github.io/node-data-components/)**
 
-- **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit)
+- **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit, compute 자동 계산 지원)
 - **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
 - **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
 
@@ -44,6 +44,25 @@ npm install @iyulab/data-components
 ></u-simple-sheet>
 ```
 
+자동 계산 열 (compute):
+
+```html
+<u-simple-sheet
+  .columns=${[
+    { key: 'item',  label: '품목', width: 150 },
+    { key: 'qty',   label: '수량', width: 80 },
+    { key: 'price', label: '단가', width: 100 },
+    { key: 'total', label: '합계', width: 100,
+      compute: (r, data) => {
+        const qty = Number(data[r][1]) || 0;
+        const price = Number(data[r][2]) || 0;
+        return String(qty * price);
+      }
+    },
+  ]}
+></u-simple-sheet>
+```
+
 ### UDataView
 
 ```html

package/dist/components/simple-sheet/USimpleSheet.component.d.ts

@@ -13,6 +13,10 @@ export interface SheetColumn {
     options?: string[] | ((row: number, col: number) => string[]);
     /** true이면 목록에 있는 값만 입력 가능 (기본: false = 자유 입력 허용) */
     strict?: boolean;
+    /** 자동 계산 함수. 설정 시 해당 열은 자동 readonly. 열 순서(좌→우), 행 순서(위→아래)로 계산. */
+    compute?: (rowIndex: number, data: string[][]) => string;
+    /** 표시 포맷. Intl.NumberFormatOptions(숫자) 또는 커스텀 콜백. 원본 데이터는 유지. */
+    format?: Intl.NumberFormatOptions | ((value: string, rowIndex: number) => string);
 }
 /**
  * USimpleSheet - 심플 스프레드시트 컴포넌트
@@ -120,6 +124,12 @@ export declare class USimpleSheet extends UElement {
     private _scrollCellIntoView;
     private _getCellFromEvent;
     private _isColReadonly;
+    private _isColComputed;
+    private _isNumeric;
+    /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+    private _formatValue;
+    /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
+    private _recompute;
     private _getColOptions;
     private _filterOptions;
     private _emitChange;

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

@@ -477,6 +477,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       newData.push(row);
     }
     this._data = newData;
+    this._recompute();
     this._history = [this._data.map((r) => [...r])];
     this._historyIndex = 0;
     const prevWidths = this._colWidths;
@@ -510,6 +511,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     if (this._historyIndex <= 0) return;
     this._historyIndex--;
     this._data = this._history[this._historyIndex].map((r) => [...r]);
+    this._recompute();
     this._emitChange();
     this.requestUpdate();
   }
@@ -517,6 +519,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     if (this._historyIndex >= this._history.length - 1) return;
     this._historyIndex++;
     this._data = this._history[this._historyIndex].map((r) => [...r]);
+    this._recompute();
     this._emitChange();
     this.requestUpdate();
   }
@@ -619,11 +622,18 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     const isSelected = this._inSel(r, c);
     const isAnchor = this._isAnchor(r, c);
     const value = this._data[r]?.[c] ?? "";
+    const isColReadonly = this._isColReadonly(c);
+    const isComputed = this._isColComputed(c);
+    const hasIntlFormat = this.columns?.[c]?.format && typeof this.columns[c].format !== "function";
+    const isNumeric = hasIntlFormat || this._isNumeric(value);
     const classes = [
       "cell",
       isSelected ? "selected" : "",
       isAnchor ? "anchor" : "",
-      isEditing ? "editing" : ""
+      isEditing ? "editing" : "",
+      isColReadonly ? "cell-readonly" : "",
+      isComputed ? "cell-computed" : "",
+      isNumeric ? "cell-numeric" : ""
     ].filter(Boolean).join(" ");
     const hasOptions = isEditing && this._getColOptions(r, c) !== null;
     const showDropdown = isEditing && this._dropdownItems.length > 0;
@@ -657,7 +667,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
               <div class="dropdown-empty">일치하는 항목 없음</div>
             </div>
           ` : ""}
-        ` : value}
+        ` : this._formatValue(value, c, r)}
       </td>
     `;
   }
@@ -694,12 +704,13 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       for (let ci = 0; ci < pasteRows[ri].length; ci++) {
         const r = anchor.row + ri;
         const c = anchor.col + ci;
-        if (r < newData.length && c < (newData[r]?.length ?? 0)) {
+        if (r < newData.length && c < (newData[r]?.length ?? 0) && !this._isColComputed(c)) {
           newData[r][c] = pasteRows[ri][ci];
         }
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -722,6 +733,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -741,6 +753,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -802,6 +815,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     this._dropdownItems = [];
     this._dropdownIndex = -1;
     if (this._editVal !== prevVal) {
+      this._recompute();
       this._pushHistory();
       this._emitChange();
     }
@@ -825,6 +839,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -854,7 +869,44 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     return { row, col };
   }
   _isColReadonly(col) {
-    return this.columns?.[col]?.readonly ?? false;
+    return (this.columns?.[col]?.readonly ?? false) || this._isColComputed(col);
+  }
+  _isColComputed(col) {
+    return typeof this.columns?.[col]?.compute === "function";
+  }
+  _isNumeric(value) {
+    if (!value || !value.trim()) return false;
+    return !isNaN(Number(value.replace(/,/g, "")));
+  }
+  /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+  _formatValue(value, col, row) {
+    const fmt = this.columns?.[col]?.format;
+    if (!fmt || !value) return value;
+    try {
+      if (typeof fmt === "function") {
+        return fmt(value, row);
+      }
+      const num = Number(value.replace(/,/g, ""));
+      if (isNaN(num)) return value;
+      return new Intl.NumberFormat("ko-KR", fmt).format(num);
+    } catch {
+      return value;
+    }
+  }
+  /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
+  _recompute() {
+    if (!this.columns?.some((c) => c.compute)) return;
+    for (let c = 0; c < this._colCount; c++) {
+      const fn = this.columns?.[c]?.compute;
+      if (!fn) continue;
+      for (let r = 0; r < this._rowCount; r++) {
+        try {
+          this._data[r][c] = fn(r, this._data);
+        } catch {
+          this._data[r][c] = "";
+        }
+      }
+    }
   }
   _getColOptions(row, col) {
     const colDef = this.columns?.[col];
@@ -904,6 +956,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       const newData = this._data.map((r) => [...r]);
       newData[row][col] = value;
       this._data = newData;
+      this._recompute();
       this._pushHistory();
       this._emitChange();
       this.requestUpdate();

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

@@ -240,7 +240,43 @@ const styles = css`
     font-style: italic;
   }
 
-  /* Readonly mode */
+  /* Numeric cell (right-aligned like Excel) */
+  .cell.cell-numeric {
+    text-align: right;
+  }
+
+  /* Readonly column/cell */
+  .cell.cell-readonly {
+    background: var(--u-neutral-50, #f8fafc);
+    color: var(--u-txt-color-weak, #64748b);
+    cursor: default;
+  }
+
+  .cell.cell-readonly.selected {
+    background: var(--u-neutral-100, #f1f5f9);
+  }
+
+  .cell.cell-readonly.anchor {
+    background: var(--u-neutral-50, #f8fafc);
+  }
+
+  /* Computed column/cell */
+  .cell.cell-computed {
+    background: var(--u-blue-50, #eff6ff);
+    color: var(--u-txt-color, #0f172a);
+    font-style: italic;
+    cursor: default;
+  }
+
+  .cell.cell-computed.selected {
+    background: var(--u-blue-100, #dbeafe);
+  }
+
+  .cell.cell-computed.anchor {
+    background: var(--u-blue-50, #eff6ff);
+  }
+
+  /* Readonly mode (whole sheet) */
   :host([readonly]) .cell {
     cursor: default;
   }
@@ -297,6 +333,32 @@ const styles = css`
     border-bottom-color: var(--u-border-color-weak, #2A2A2A);
   }
 
+  :host-context([theme="dark"]) .cell.cell-readonly {
+    background: var(--u-neutral-100, #1E1E1E);
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .cell.cell-readonly.selected {
+    background: var(--u-neutral-200, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) .cell.cell-readonly.anchor {
+    background: var(--u-neutral-100, #1E1E1E);
+  }
+
+  :host-context([theme="dark"]) .cell.cell-computed {
+    background: var(--u-blue-100, #1e3a5f);
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .cell.cell-computed.selected {
+    background: var(--u-blue-200, #2a4a6f);
+  }
+
+  :host-context([theme="dark"]) .cell.cell-computed.anchor {
+    background: var(--u-blue-100, #1e3a5f);
+  }
+
   :host-context([theme="dark"]) .cell.selected {
     background: var(--u-blue-0, #0a1e3d);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "keywords": [
     "iyulab",
     "web-components",