@iyulab/data-components 0.1.7 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.1.8] - 2026-03-08
+### Added
+- USimpleSheet: `format` 속성 — Intl.NumberFormatOptions(통화, 퍼센트 등) 또는 콜백 함수로 표시 포맷 지정
+- USimpleSheet: 셀 값 기반 자동 텍스트 정렬 (숫자 우측, 문자 좌측)
+
 ## [0.1.7] - 2026-03-08
 ### Added
 - USimpleSheet: `compute` 콜백을 통한 열 단위 자동 계산 기능

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

@@ -15,6 +15,8 @@ export interface SheetColumn {
     strict?: boolean;
     /** 자동 계산 함수. 설정 시 해당 열은 자동 readonly. 열 순서(좌→우), 행 순서(위→아래)로 계산. */
     compute?: (rowIndex: number, data: string[][]) => string;
+    /** 표시 포맷. Intl.NumberFormatOptions(숫자) 또는 커스텀 콜백. 원본 데이터는 유지. */
+    format?: Intl.NumberFormatOptions | ((value: string, rowIndex: number) => string);
 }
 /**
  * USimpleSheet - 심플 스프레드시트 컴포넌트
@@ -123,6 +125,9 @@ export declare class USimpleSheet extends UElement {
     private _getCellFromEvent;
     private _isColReadonly;
     private _isColComputed;
+    private _isNumeric;
+    /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+    private _formatValue;
     /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
     private _recompute;
     private _getColOptions;
@@ -146,6 +151,15 @@ export declare class USimpleSheet extends UElement {
         minCol: number;
         maxCol: number;
     } | null;
+    /** 선택 영역을 프로그래밍 방식으로 설정 */
+    setSelection(range: {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    }): void;
+    /** 전체 셀 선택 */
+    selectAll(): void;
     /** Undo 가능 여부 */
     get canUndo(): boolean;
     /** Redo 가능 여부 */

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

@@ -624,13 +624,16 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     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" : "",
       isColReadonly ? "cell-readonly" : "",
-      isComputed ? "cell-computed" : ""
+      isComputed ? "cell-computed" : "",
+      isNumeric ? "cell-numeric" : ""
     ].filter(Boolean).join(" ");
     const hasOptions = isEditing && this._getColOptions(r, c) !== null;
     const showDropdown = isEditing && this._dropdownItems.length > 0;
@@ -664,7 +667,7 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
               <div class="dropdown-empty">일치하는 항목 없음</div>
             </div>
           ` : ""}
-        ` : value}
+        ` : this._formatValue(value, c, r)}
       </td>
     `;
   }
@@ -871,6 +874,25 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
   _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;
@@ -945,6 +967,26 @@ const _USimpleSheet = class _USimpleSheet extends UElement {
     if (!this._sel) return null;
     return normalizeRange(this._sel);
   }
+  /** 선택 영역을 프로그래밍 방식으로 설정 */
+  setSelection(range) {
+    const minRow = Math.max(0, Math.min(range.minRow, this._rowCount - 1));
+    const maxRow = Math.max(0, Math.min(range.maxRow, this._rowCount - 1));
+    const minCol = Math.max(0, Math.min(range.minCol, this._colCount - 1));
+    const maxCol = Math.max(0, Math.min(range.maxCol, this._colCount - 1));
+    this._sel = {
+      anchor: { row: minRow, col: minCol },
+      focus: { row: maxRow, col: maxCol }
+    };
+    this.requestUpdate();
+  }
+  /** 전체 셀 선택 */
+  selectAll() {
+    this._sel = {
+      anchor: { row: 0, col: 0 },
+      focus: { row: this._rowCount - 1, col: this._colCount - 1 }
+    };
+    this.requestUpdate();
+  }
   /** Undo 가능 여부 */
   get canUndo() {
     return this._historyIndex > 0;

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

@@ -240,6 +240,11 @@ const styles = css`
     font-style: italic;
   }
 
+  /* Numeric cell (right-aligned like Excel) */
+  .cell.cell-numeric {
+    text-align: right;
+  }
+
   /* Readonly column/cell */
   .cell.cell-readonly {
     background: var(--u-neutral-50, #f8fafc);

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

@@ -0,0 +1,70 @@
+import { LitElement, TemplateResult } from 'lit';
+import { ColumnDef } from './types.js';
+export declare class URichTable extends LitElement {
+    static styles: import('lit').CSSResult;
+    columns: ColumnDef[];
+    data: Record<string, unknown>[];
+    totalCount: number;
+    pageSize: number;
+    currentPage: number;
+    loading: boolean;
+    emptyMessage: string;
+    selectable: boolean;
+    editable: boolean;
+    addable: boolean;
+    filterable: boolean;
+    expandable: boolean;
+    detailRenderer?: (row: Record<string, unknown>) => TemplateResult;
+    private selectedIds;
+    private focusedCell;
+    private editingCell;
+    private editValue;
+    private expandedIds;
+    private sort;
+    private filters;
+    private validationErrors;
+    private rowErrors;
+    revertRow(_rowId: string): void;
+    setRowError(rowId: string, message: string): void;
+    clearRowError(rowId: string): void;
+    getSelectedRows(): Record<string, unknown>[];
+    render(): TemplateResult;
+    private _renderToolbar;
+    private _renderHeader;
+    private _renderFilterRow;
+    private _renderBody;
+    private _renderCell;
+    private _renderCellContent;
+    private _renderNewRow;
+    private _renderPagination;
+    private _onSelectAll;
+    private _onRowSelect;
+    private _lastSelectedIndex;
+    private _onShiftSelect;
+    private _onSortClick;
+    private _onFilterChange;
+    private _onCellClick;
+    private _onCellDblClick;
+    private _onEditKeyDown;
+    private _onCellEditConfirm;
+    private _onExpandToggle;
+    private _onAddRowClick;
+    private _onNewRowFocus;
+    private _onNewRowKeyDown;
+    private _onRowMenu;
+    private _onPageChange;
+    private _onPageSizeChange;
+    private _colSpan;
+    private _getOptionLabel;
+    private _getPageNumbers;
+    private _moveToNextEditableCell;
+    private _fireSelectionChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onGlobalKeyDown;
+    private _handleCopy;
+    private _handlePaste;
+    private _moveFocus;
+    private _selectAll;
+    static define(tagName?: string): void;
+}