@iyulab/data-components 0.1.0 → 0.1.2

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

@@ -6,277 +6,174 @@ const styles = css`
     width: 100%;
   }
 
-  .u-data-view-container {
-    width: 100%;
+  .data-view {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+  }
+
+  /* Toolbar */
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background: var(--u-bg-color);
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
   }
 
-  .layout-selector {
+  .view-toggles {
     display: flex;
-    justify-content: flex-end;
-    margin-bottom: 1rem;
+    gap: 0.25rem;
+  }
 
-    u-icon-button {
-      margin-left: 0.5rem;
+  .view-toggles u-button[active] {
+    background: var(--u-blue-600);
+    color: var(--u-neutral-0);
+  }
 
-      &[current] {
-        color: var(--u-blue-600);
-      }
-    }
+  .info {
+    font-size: 0.875rem;
+    color: var(--u-txt-color-weak);
+    font-weight: 500;
   }
 
-  .u-data-view {
-    &.grid {
-      display: grid;
-      gap: var(--item-margin);
-      grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width), 1fr));
-    }
+  /* Grid Layout */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 200px), 1fr));
+    gap: var(--gap, 1rem);
+  }
 
-    &.list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--item-margin);
-    }
+  /* List Layout */
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, 1rem);
   }
 
-  .default-item {
-    background-color: #fff;
-    border: 1px solid #ccc;
+  /* Card Styles */
+  .card {
+    background: var(--u-bg-color);
+    border: 1px solid var(--u-border-color);
     border-radius: 8px;
-    padding: 1rem;
+    padding: 1.25rem;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.15s ease;
+  }
 
-    &:hover {
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    }
+  .card:hover {
+    border-color: var(--u-blue-600);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak);
+    transform: translateY(-2px);
+  }
 
-    &.selected {
-      border: 2px solid #007bff;
-      box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
-    }
+  .card.selected {
+    border-color: var(--u-blue-600);
+    background: var(--u-bg-color-active);
+    box-shadow: 0 0 0 3px var(--u-blue-200);
   }
 
-  .u-data-view.list .default-item {
+  .card-content {
     display: flex;
-    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.75rem;
   }
 
-  .u-data-view.list .default-item .default-image,
-  .u-data-view.list .default-item .placeholder-image {
-    width: 128px;
-    height: 128px;
-    min-width: 128px;
-    margin-right: 1rem;
-    margin-bottom: 0;
-    object-fit: cover;
+  .card-field {
+    display: flex;
+    gap: 0.5rem;
+    align-items: baseline;
   }
 
-  .u-data-view.list .default-item .default-fields {
-    flex: 1;
+  .card-field .label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--u-txt-color-weak);
+    min-width: 80px;
+    flex-shrink: 0;
   }
 
-  .default-image {
-    width: 100%;
-    height: 128px;
-    object-fit: cover;
-    margin-bottom: 1rem;
-    border-radius: 4px;
-
-    &.list-image {
-      width: 128px;
-      height: 128px;
-    }
-
-    &.table-image {
-      width: 64px;
-      height: 64px;
-      margin-bottom: 0;
-    }
-
-    &.placeholder-image {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 2rem;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
+  .card-field .value {
+    font-size: 0.9375rem;
+    color: var(--u-txt-color);
+    word-break: break-word;
   }
 
-  .default-fields {
-    .field {
-      margin-bottom: 0.5rem;
-      display: flex;
-      align-items: center;
-
-      .field-title {
-        color: var(--u-neutral-600);
-        margin-right: 0.5rem;
-        flex: 0 0 30%;
-      }
-
-      .field-value {
-        font-weight: bold;
-        flex: 1;
-      }
-    }
+  /* List Card Override */
+  .list-card .card-content {
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
-  .default-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-
-    th, td {
-      padding: 0.5em;
-      border: none;
-      border-bottom: 1px solid #eee;
-    }
-
-    th {
-      background-color: #f8f9fa;
-      font-weight: bold;
-      text-align: left;
-    }
-
-    .image-cell {
-      width: 64px;
-      height: 64px;
-      padding: 0;
-      position: relative;
-
-      img, .placeholder-image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .placeholder-image {
-        font-size: 1.5rem;
-      }
-    }
-
-    tr {
-      transition: all 0.3s ease;
-
-      &:hover {
-        background-color: rgba(0, 123, 255, 0.05);
-      }
-
-      &.selected {
-        background-color: rgba(0, 123, 255, 0.1);
-        box-shadow: 0 0 0 2px #007bff;
-        position: relative;
-        z-index: 1;
-
-        td:first-child {
-          border-top-left-radius: 8px;
-          border-bottom-left-radius: 8px;
-        }
+  .list-card .card-field {
+    flex: 1 1 calc(50% - 0.5rem);
+    min-width: 200px;
+  }
 
-        td:last-child {
-          border-top-right-radius: 8px;
-          border-bottom-right-radius: 8px;
-        }
-      }
-    }
+  /* Table */
+  .table-wrapper {
+    overflow-x: auto;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
   }
 
-  u-skeleton {
-    display: block;
+  table {
     width: 100%;
-    height: 1em;
-    background-color: #e0e0e0;
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-      animation: skeleton-loading 1.5s infinite;
-    }
+    border-collapse: collapse;
+    background: var(--u-bg-color);
   }
 
-  @keyframes skeleton-loading {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
+  thead {
+    background: var(--u-neutral-50);
+    position: sticky;
+    top: 0;
+    z-index: 10;
   }
 
-  .skeleton-item {
-    &.grid .skeleton-image,
-    &.list .skeleton-image {
-      width: 100%;
-      height: 128px;
-      margin-bottom: 1rem;
-    }
-
-    &.list {
-      display: flex;
-      align-items: flex-start;
-
-      .skeleton-image {
-        width: 128px;
-        height: 128px;
-        margin-right: 1rem;
-        margin-bottom: 0;
-      }
-
-      .skeleton-fields {
-        flex: 1;
-      }
-    }
-
-    .skeleton-field {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0.5rem;
+  th {
+    padding: 0.875rem 1rem;
+    text-align: left;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--u-txt-color-weak);
+    border-bottom: 2px solid var(--u-border-color);
+    white-space: nowrap;
+  }
 
-      .skeleton-label {
-        width: 30%;
-        height: 1em;
-        margin-right: 0.5rem;
-      }
+  tbody tr {
+    cursor: pointer;
+    transition: background 0.1s ease;
+  }
 
-      .skeleton-value {
-        width: 70%;
-        height: 1em;
-      }
-    }
+  tbody tr:hover {
+    background: var(--u-bg-color-hover);
   }
 
-  .skeleton-table {
-    width: 100%;
+  tbody tr.selected {
+    background: var(--u-bg-color-active);
+  }
 
-    .skeleton-row {
-      display: flex;
-      border-bottom: 1px solid #eee;
-      padding: 0.5em 0;
+  tbody tr:not(:last-child) {
+    border-bottom: 1px solid var(--u-border-color-weak);
+  }
 
-      .skeleton-cell {
-        flex: 1;
-        height: 1em;
-        margin-right: 0.5em;
+  td {
+    padding: 0.875rem 1rem;
+    font-size: 0.9375rem;
+    color: var(--u-txt-color);
+  }
 
-        &:first-child {
-          width: 64px;
-          height: 64px;
-          flex: none;
-        }
-      }
-    }
+  /* Empty State */
+  .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    color: var(--u-txt-color-weak);
+    font-size: 1rem;
   }
 `;
 

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

@@ -0,0 +1,138 @@
+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;
+}
+/**
+ * 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 _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 _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 _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;
+    /** Undo 가능 여부 */
+    get canUndo(): boolean;
+    /** Redo 가능 여부 */
+    get canRedo(): boolean;
+}