@iyulab/data-components 0.1.4 → 0.1.7

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 # Changelog
 
-## [Unreleased]
+## [0.1.7] - 2026-03-08
+### Added
+- USimpleSheet: `compute` 콜백을 통한 열 단위 자동 계산 기능
+  - 가로(같은 행) 및 세로(행 간) 계산 모두 지원
+  - compute 열 자동 readonly 및 시각적 구분 (이탤릭 + 파란 배경)
+  - 에러 발생 시 빈 문자열 표시
+  - 붙여넣기/Fill 시 compute 열 건너뛰기
+
+## [0.1.6]
 - Initial library version release

package/README.md

@@ -2,7 +2,9 @@
 
 데이터 표시 및 입력을 위한 웹 컴포넌트 라이브러리.
 
-- **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit)
+**[Live Demo](https://iyulab.github.io/node-data-components/)**
+
+- **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit, compute 자동 계산 지원)
 - **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
 - **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
 
@@ -42,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

@@ -9,6 +9,12 @@ export interface SheetColumn {
     width?: number;
     /** 읽기 전용 열 */
     readonly?: boolean;
+    /** 선택 가능한 옵션 목록 (정적 배열 또는 동적 콜백) */
+    options?: string[] | ((row: number, col: number) => string[]);
+    /** true이면 목록에 있는 값만 입력 가능 (기본: false = 자유 입력 허용) */
+    strict?: boolean;
+    /** 자동 계산 함수. 설정 시 해당 열은 자동 readonly. 열 순서(좌→우), 행 순서(위→아래)로 계산. */
+    compute?: (rowIndex: number, data: string[][]) => string;
 }
 /**
  * USimpleSheet - 심플 스프레드시트 컴포넌트
@@ -44,6 +50,9 @@ export declare class USimpleSheet extends UElement {
     private _editing;
     private _editVal;
     private _replaceOnEdit;
+    private _dropdownItems;
+    private _dropdownIndex;
+    private _isDropdownClick;
     private _data;
     private _colWidths;
     private _isMouseSelecting;
@@ -79,6 +88,7 @@ export declare class USimpleSheet extends UElement {
     private _onInputChange;
     private _onInputKeyDown;
     private _onInputBlur;
+    private _onDropdownItemMouseDown;
     private _onTableMouseDown;
     private _onTableMouseOver;
     private _onTableDblClick;
@@ -112,6 +122,11 @@ export declare class USimpleSheet extends UElement {
     private _scrollCellIntoView;
     private _getCellFromEvent;
     private _isColReadonly;
+    private _isColComputed;
+    /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
+    private _recompute;
+    private _getColOptions;
+    private _filterOptions;
     private _emitChange;
     /** 현재 데이터를 2D 배열로 반환 */
     getData(): string[][];

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

@@ -32,6 +32,9 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     this._editing = null;
     this._editVal = "";
     this._replaceOnEdit = false;
+    this._dropdownItems = [];
+    this._dropdownIndex = -1;
+    this._isDropdownClick = false;
     // @state() 없음 — 직접 requestUpdate() 호출
     this._data = [];
     this._colWidths = [];
@@ -180,6 +183,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
         return;
       }
       if (!this.readonly && !this._isColReadonly(anchor.col) && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
         this._startEdit(anchor.row, anchor.col, e.key);
       }
     };
@@ -188,14 +192,46 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     // ──────────────────────────────────────────
     this._onInputChange = (e) => {
       this._editVal = e.target.value;
+      if (this._editing) {
+        const options = this._getColOptions(this._editing.row, this._editing.col);
+        if (options) {
+          const filtered = this._filterOptions(options, this._editVal);
+          this._dropdownItems = filtered;
+          this._dropdownIndex = filtered.length > 0 ? 0 : -1;
+        }
+      }
     };
     this._onInputKeyDown = (e) => {
       e.stopPropagation();
+      const hasDropdown = this._dropdownItems.length > 0;
       if (e.key === "Escape") {
         e.preventDefault();
         this._cancelEdit();
         return;
       }
+      if (hasDropdown && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+        e.preventDefault();
+        const len = this._dropdownItems.length;
+        if (e.key === "ArrowDown") {
+          this._dropdownIndex = (this._dropdownIndex + 1) % len;
+        } else {
+          this._dropdownIndex = (this._dropdownIndex - 1 + len) % len;
+        }
+        this.updateComplete.then(() => {
+          const dropdown = this.renderRoot.querySelector(".cell-dropdown");
+          const highlighted = this.renderRoot.querySelector(".dropdown-item.highlighted");
+          if (dropdown && highlighted) {
+            const dRect = dropdown.getBoundingClientRect();
+            const hRect = highlighted.getBoundingClientRect();
+            if (hRect.bottom > dRect.bottom) dropdown.scrollTop += hRect.bottom - dRect.bottom;
+            else if (hRect.top < dRect.top) dropdown.scrollTop -= dRect.top - hRect.top;
+          }
+        });
+        return;
+      }
+      if (hasDropdown && this._dropdownIndex >= 0 && (e.key === "Enter" || e.key === "Tab")) {
+        this._editVal = this._dropdownItems[this._dropdownIndex];
+      }
       if (e.key === "Enter") {
         e.preventDefault();
         const pos = this._editing;
@@ -248,10 +284,20 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     };
     this._onInputBlur = () => {
+      if (this._isDropdownClick) {
+        this._isDropdownClick = false;
+        return;
+      }
       if (this._editing) {
         this._commitEdit();
       }
     };
+    this._onDropdownItemMouseDown = (e, value) => {
+      e.preventDefault();
+      this._isDropdownClick = true;
+      this._editVal = value;
+      this._commitEdit();
+    };
     // ──────────────────────────────────────────
     // 마우스 이벤트
     // ──────────────────────────────────────────
@@ -431,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;
@@ -464,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();
   }
@@ -471,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();
   }
@@ -573,12 +622,20 @@ 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 classes = [
       "cell",
       isSelected ? "selected" : "",
       isAnchor ? "anchor" : "",
-      isEditing ? "editing" : ""
+      isEditing ? "editing" : "",
+      isColReadonly ? "cell-readonly" : "",
+      isComputed ? "cell-computed" : ""
     ].filter(Boolean).join(" ");
+    const hasOptions = isEditing && this._getColOptions(r, c) !== null;
+    const showDropdown = isEditing && this._dropdownItems.length > 0;
+    const isStrict = this.columns?.[c]?.strict ?? false;
+    const noMatch = isEditing && hasOptions && this._dropdownItems.length === 0 && this._editVal !== "";
     return html`
       <td
         class=${classes}
@@ -593,6 +650,20 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
             @keydown=${this._onInputKeyDown}
             @blur=${this._onInputBlur}
           />
+          ${showDropdown ? html`
+            <div class="cell-dropdown">
+              ${this._dropdownItems.map((item, i) => html`
+                <div
+                  class="dropdown-item ${i === this._dropdownIndex ? "highlighted" : ""}"
+                  @mousedown=${(e) => this._onDropdownItemMouseDown(e, item)}
+                >${item}</div>
+              `)}
+            </div>
+          ` : noMatch && isStrict ? html`
+            <div class="cell-dropdown">
+              <div class="dropdown-empty">일치하는 항목 없음</div>
+            </div>
+          ` : ""}
         ` : value}
       </td>
     `;
@@ -630,12 +701,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();
@@ -658,6 +730,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -677,6 +750,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -692,6 +766,15 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     this._editVal = typedChar !== void 0 ? typedChar : this._data[row]?.[col] ?? "";
     this._editing = { row, col };
     this._select(row, col);
+    const options = this._getColOptions(row, col);
+    if (options) {
+      const filtered = this._filterOptions(options, this._editVal);
+      this._dropdownItems = filtered;
+      this._dropdownIndex = filtered.length > 0 ? 0 : -1;
+    } else {
+      this._dropdownItems = [];
+      this._dropdownIndex = -1;
+    }
     this.updateComplete.then(() => {
       const input = this.renderRoot.querySelector(".cell-input");
       if (input) {
@@ -708,12 +791,28 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
   _commitEdit() {
     if (!this._editing) return;
     const { row, col } = this._editing;
+    const colDef = this.columns?.[col];
+    if (colDef?.strict && colDef?.options && this._editVal !== "") {
+      const allOptions = this._getColOptions(row, col) ?? [];
+      if (!allOptions.includes(this._editVal)) {
+        this._editing = null;
+        this._dropdownItems = [];
+        this._dropdownIndex = -1;
+        this._isDropdownClick = false;
+        this.requestUpdate();
+        this._containerEl?.focus();
+        return;
+      }
+    }
     const prevVal = this._data[row]?.[col] ?? "";
     const newData = this._data.map((r) => [...r]);
     newData[row][col] = this._editVal;
     this._data = newData;
     this._editing = null;
+    this._dropdownItems = [];
+    this._dropdownIndex = -1;
     if (this._editVal !== prevVal) {
+      this._recompute();
       this._pushHistory();
       this._emitChange();
     }
@@ -722,6 +821,8 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
   }
   _cancelEdit() {
     this._editing = null;
+    this._dropdownItems = [];
+    this._dropdownIndex = -1;
     this.requestUpdate();
     this._containerEl?.focus();
   }
@@ -735,6 +836,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       }
     }
     this._data = newData;
+    this._recompute();
     this._pushHistory();
     this._emitChange();
     this.requestUpdate();
@@ -764,7 +866,35 @@ 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";
+  }
+  /** 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];
+    if (!colDef?.options) return null;
+    return typeof colDef.options === "function" ? colDef.options(row, col) : colDef.options;
+  }
+  _filterOptions(options, query) {
+    if (!query) return options;
+    const lower = query.toLowerCase();
+    return options.filter((o) => o.toLowerCase().includes(lower));
   }
   _emitChange() {
     this.emit("change", { data: this._data });
@@ -804,6 +934,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();
@@ -850,6 +981,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], _USimpleSheet.prototype, "_replaceOnEdit");
+__decorateClass([
+  state()
+], _USimpleSheet.prototype, "_dropdownItems");
+__decorateClass([
+  state()
+], _USimpleSheet.prototype, "_dropdownIndex");
 let USimpleSheet = _USimpleSheet;
 
 export { USimpleSheet };

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

@@ -197,7 +197,81 @@ const styles = css`
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
 
-  /* Readonly mode */
+  /* Dropdown overlay */
+  .cell-dropdown {
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    width: calc(100% + 2px);
+    min-width: 120px;
+    max-height: 200px;
+    overflow-y: auto;
+    background: var(--u-bg-color, #fff);
+    border: 1px solid var(--u-border-color, #e2e8f0);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    z-index: 20;
+  }
+
+  .dropdown-item {
+    padding: 4px 8px;
+    font-size: 13px;
+    color: var(--u-txt-color, #0f172a);
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dropdown-item:hover {
+    background: var(--u-neutral-100, #f1f5f9);
+  }
+
+  .dropdown-item.highlighted {
+    background: var(--u-blue-50, #eff6ff);
+    color: var(--u-blue-800, #1e40af);
+  }
+
+  .dropdown-empty {
+    padding: 6px 8px;
+    font-size: 12px;
+    color: var(--u-txt-color-weak, #64748b);
+    font-style: italic;
+  }
+
+  /* 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;
   }
@@ -254,6 +328,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);
   }
@@ -273,6 +373,29 @@ const styles = css`
     outline-color: var(--u-blue-500, #6ba3e3);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   }
+
+  :host-context([theme="dark"]) .cell-dropdown {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  }
+
+  :host-context([theme="dark"]) .dropdown-item {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .dropdown-item:hover {
+    background: var(--u-neutral-100, #1E1E1E);
+  }
+
+  :host-context([theme="dark"]) .dropdown-item.highlighted {
+    background: var(--u-blue-100, #1e3a5f);
+    color: var(--u-blue-800, #c2deff);
+  }
+
+  :host-context([theme="dark"]) .dropdown-empty {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
 `;
 
 export { styles };

package/package.json

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