@iyulab/data-components 0.1.3 → 0.1.6

package/README.md

@@ -2,6 +2,8 @@
 
 데이터 표시 및 입력을 위한 웹 컴포넌트 라이브러리.
 
+**[Live Demo](https://iyulab.github.io/node-data-components/)**
+
 - **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit)
 - **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
 - **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)

package/dist/components/data-view/UDataView.styles.js

@@ -175,6 +175,85 @@ const styles = css`
     color: var(--u-txt-color-weak);
     font-size: 1rem;
   }
+
+  /* ── Dark mode ──
+     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
+     제공되지 않으면 자체 dark fallback 값을 적용한다. */
+
+  :host-context([theme="dark"]) .toolbar {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .view-toggles u-button[active] {
+    background: var(--u-blue-600, #87B8F5);
+    color: var(--u-neutral-0, #000000);
+  }
+
+  :host-context([theme="dark"]) .info {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .card {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .card:hover {
+    border-color: var(--u-blue-600, #87B8F5);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.25));
+  }
+
+  :host-context([theme="dark"]) .card.selected {
+    border-color: var(--u-blue-600, #87B8F5);
+    background: var(--u-bg-color-active, #3D3D3D);
+    box-shadow: 0 0 0 3px var(--u-blue-200, #2B4F7E);
+  }
+
+  :host-context([theme="dark"]) .card-field .label {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .card-field .value {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .table-wrapper {
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) table {
+    background: var(--u-bg-color, #121212);
+  }
+
+  :host-context([theme="dark"]) thead {
+    background: var(--u-neutral-50, #0A0A0A);
+  }
+
+  :host-context([theme="dark"]) th {
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) tbody tr:hover {
+    background: var(--u-bg-color-hover, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) tbody tr.selected {
+    background: var(--u-bg-color-active, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) tbody tr:not(:last-child) {
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) td {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .empty {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
 `;
 
 export { styles };

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

@@ -9,6 +9,10 @@ export interface SheetColumn {
     width?: number;
     /** 읽기 전용 열 */
     readonly?: boolean;
+    /** 선택 가능한 옵션 목록 (정적 배열 또는 동적 콜백) */
+    options?: string[] | ((row: number, col: number) => string[]);
+    /** true이면 목록에 있는 값만 입력 가능 (기본: false = 자유 입력 허용) */
+    strict?: boolean;
 }
 /**
  * USimpleSheet - 심플 스프레드시트 컴포넌트
@@ -44,6 +48,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 +86,7 @@ export declare class USimpleSheet extends UElement {
     private _onInputChange;
     private _onInputKeyDown;
     private _onInputBlur;
+    private _onDropdownItemMouseDown;
     private _onTableMouseDown;
     private _onTableMouseOver;
     private _onTableDblClick;
@@ -112,6 +120,8 @@ export declare class USimpleSheet extends UElement {
     private _scrollCellIntoView;
     private _getCellFromEvent;
     private _isColReadonly;
+    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();
+    };
     // ──────────────────────────────────────────
     // 마우스 이벤트
     // ──────────────────────────────────────────
@@ -579,6 +625,10 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
       isAnchor ? "anchor" : "",
       isEditing ? "editing" : ""
     ].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 +643,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>
     `;
@@ -692,6 +756,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,11 +781,26 @@ 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._pushHistory();
       this._emitChange();
@@ -722,6 +810,8 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
   }
   _cancelEdit() {
     this._editing = null;
+    this._dropdownItems = [];
+    this._dropdownIndex = -1;
     this.requestUpdate();
     this._containerEl?.focus();
   }
@@ -766,6 +856,16 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
   _isColReadonly(col) {
     return this.columns?.[col]?.readonly ?? false;
   }
+  _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 });
   }
@@ -850,6 +950,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,36 +197,112 @@ const styles = css`
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
 
+  /* 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 mode */
   :host([readonly]) .cell {
     cursor: default;
   }
 
   /* ── Dark mode ──
-     헤더/셀 배경·텍스트는 CSS 변수(--u-neutral-*, --u-txt-color 등)가
-     테마에 따라 자동 처리되므로 선택 상태와 포커스 효과만 재정의한다. */
+     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
+     제공되지 않으면 자체 dark fallback 값을 적용한다. */
+
+  :host-context([theme="dark"]) .sheet-container {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
 
   :host-context([theme="dark"]) .sheet-container:focus-within {
     border-color: var(--u-blue-500, #6ba3e3);
     box-shadow: 0 0 0 2px var(--u-blue-100, #1e3a5f);
   }
 
+  :host-context([theme="dark"]) .corner {
+    background: var(--u-neutral-100, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .corner:hover {
+    background: var(--u-neutral-200, #1E1E1E);
+  }
+
+  :host-context([theme="dark"]) .col-header {
+    background: var(--u-neutral-100, #121212);
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
   :host-context([theme="dark"]) .col-header.col-selected {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
+  :host-context([theme="dark"]) .row-num {
+    background: var(--u-neutral-50, #0A0A0A);
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-right-color: var(--u-border-color, #3D3D3D);
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
   :host-context([theme="dark"]) .row-num.row-selected {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
+  :host-context([theme="dark"]) .cell {
+    color: var(--u-txt-color, #D4D4D4);
+    border-right-color: var(--u-border-color-weak, #2A2A2A);
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
   :host-context([theme="dark"]) .cell.selected {
     background: var(--u-blue-0, #0a1e3d);
   }
 
   :host-context([theme="dark"]) .cell.anchor {
-    background: var(--u-bg-color);
+    background: var(--u-bg-color, #121212);
     outline-color: var(--u-blue-500, #6ba3e3);
   }
 
@@ -235,11 +311,34 @@ const styles = css`
   }
 
   :host-context([theme="dark"]) .cell-input {
-    background: var(--u-bg-color);
-    color: var(--u-txt-color);
+    background: var(--u-bg-color, #121212);
+    color: var(--u-txt-color, #D4D4D4);
     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.3",
+  "version": "0.1.6",
   "keywords": [
     "iyulab",
     "web-components",