@iyulab/data-components 0.1.8 → 0.3.1

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/data-view/UDataView.styles.ts
+var styles = css`
   :host {
     display: block;
     width: 100%;
@@ -175,85 +175,6 @@ 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);
-  }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,8 +1,172 @@
-import { USimpleSheet } from './USimpleSheet.component.js';
+import { TemplateResult } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+export interface SheetColumn {
+    /** 데이터 키 (getDataAsObjects() 반환시 객체 키로 사용) */
+    key?: string;
+    /** 헤더 표시 레이블 */
+    label?: string;
+    /** 열 너비 (px) */
+    width?: number;
+    /** 읽기 전용 열 */
+    readonly?: boolean;
+    /** 선택 가능한 옵션 목록 (정적 배열 또는 동적 콜백) */
+    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 - 심플 스프레드시트 컴포넌트
+ *
+ * 편집 편의 기능:
+ * - Undo/Redo: Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z
+ * - Ctrl+Enter: 편집 확정 후 현재 셀 유지
+ * - Shift+Enter: 위로 이동
+ * - Home/End: 행 처음/끝 (Ctrl+Home/End: 시트 처음/끝)
+ * - Page Up/Down: 10행 단위 이동
+ * - Ctrl+A: 전체 선택
+ * - Tab 사이클: 마지막 열 → 다음 행 첫 열
+ * - Ctrl+D: Fill Down (선택 영역 첫 행 값 아래로 채우기)
+ * - Ctrl+R: Fill Right (선택 영역 첫 열 값 오른쪽으로 채우기)
+ * - 행/열 헤더 클릭: 전체 행/열 선택
+ * - 엑셀 호환 Ctrl+C/V (TSV), Delete/Backspace
+ * - 다중 셀 선택: Shift+클릭, Shift+Arrow, 마우스 드래그
+ * - columns 미설정시 A, B, C... 자동 헤더
+ */
+export declare class USimpleSheet extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 초기 데이터 (2D 문자열 배열) */
+    data: string[][];
+    /** 열 정의 (미설정시 A, B, C... 자동 헤더) */
+    columns?: SheetColumn[];
+    /** 초기 행 수 */
+    rows: number;
+    /** 초기 열 수 (columns 미설정시 사용) */
+    cols: number;
+    /** 읽기 전용 모드 */
+    readonly: boolean;
+    private _sel;
+    private _editing;
+    private _editVal;
+    private _replaceOnEdit;
+    private _dropdownItems;
+    private _dropdownIndex;
+    private _isDropdownClick;
+    private _data;
+    private _colWidths;
+    private _isMouseSelecting;
+    private _containerEl;
+    private _resizing;
+    private static readonly MIN_COL_WIDTH;
+    private static readonly DEFAULT_COL_WIDTH;
+    private _history;
+    private _historyIndex;
+    private static readonly HISTORY_LIMIT;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private _syncDataFromProps;
+    private _syncData;
+    private get _rowCount();
+    private get _colCount();
+    private _pushHistory;
+    private _undo;
+    private _redo;
+    /** 열 인덱스를 A, B, ..., Z, AA, AB, ... 형태로 변환 */
+    private _colLabel;
+    private _colWidthStyle;
+    private _inSel;
+    private _isAnchor;
+    private _isColSelected;
+    private _isRowSelected;
+    render(): TemplateResult<1>;
+    private _renderCell;
+    private _refContainer;
+    private _onContainerFocus;
+    private _onContainerKeyDown;
+    private _onInputChange;
+    private _onInputKeyDown;
+    private _onInputBlur;
+    private _onDropdownItemMouseDown;
+    private _onTableMouseDown;
+    private _onTableMouseOver;
+    private _onTableDblClick;
+    private _onDocMouseUp;
+    /** 열 너비 조절 시작 */
+    private _onResizeStart;
+    private _onResizeMove;
+    private _onResizeEnd;
+    /** 코너 클릭 → 전체 선택 */
+    private _onSelectAll;
+    /** 열 헤더 클릭 → 전체 열 선택 */
+    private _onColHeaderMouseDown;
+    /** 행 헤더 클릭 → 전체 행 선택 */
+    private _onRowHeaderMouseDown;
+    private _onCopy;
+    private _onPaste;
+    private _selectionToTSV;
+    private _pasteFromText;
+    /** Ctrl+D: 선택 영역 첫 행 값을 아래로 채우기 */
+    private _fillDown;
+    /** Ctrl+R: 선택 영역 첫 열 값을 오른쪽으로 채우기 */
+    private _fillRight;
+    /**
+     * @param typedChar - 타이핑으로 시작할 경우 첫 글자. 미제공시 기존 값 유지.
+     */
+    private _startEdit;
+    private _commitEdit;
+    private _cancelEdit;
+    private _clearSelection;
+    private _select;
+    private _scrollCellIntoView;
+    private _getCellFromEvent;
+    private _isColReadonly;
+    private _isColComputed;
+    private _isNumeric;
+    /** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+    private _formatValue;
+    /** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
+    private _recompute;
+    private _getColOptions;
+    private _filterOptions;
+    private _emitChange;
+    /** 현재 데이터를 2D 배열로 반환 */
+    getData(): string[][];
+    /**
+     * 정의된 columns의 key를 기준으로 객체 배열로 반환.
+     * columns 미설정시 A, B, C... 키를 사용.
+     */
+    getDataAsObjects(): Record<string, string>[];
+    /** 데이터를 직접 설정하고 재렌더링 */
+    setData(data: string[][]): void;
+    /** 특정 셀 값 설정 */
+    setCell(row: number, col: number, value: string): void;
+    /** 현재 선택 영역 반환 */
+    getSelection(): {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    } | null;
+    /** 선택 영역을 프로그래밍 방식으로 설정 */
+    setSelection(range: {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    }): void;
+    /** 전체 셀 선택 */
+    selectAll(): void;
+    /** Undo 가능 여부 */
+    get canUndo(): boolean;
+    /** Redo 가능 여부 */
+    get canRedo(): boolean;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-simple-sheet': USimpleSheet;
     }
 }
-export { USimpleSheet };
-export type { SheetColumn } from './USimpleSheet.component.js';