@iyulab/data-components 0.1.8 → 0.3.1

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

@@ -1,226 +0,0 @@
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
-import { styles } from './UDataView.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UDataView extends UElement {
-  constructor() {
-    super(...arguments);
-    this.items = [];
-    this.mode = "grid";
-    this.gridMinWidth = "200px";
-    this.gap = "1rem";
-    this.selectedIndex = null;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-button": UButton
-    };
-  }
-  render() {
-    return html`
-      <div class="data-view">
-        ${this.renderToolbar()}
-        ${this.renderContent()}
-      </div>
-    `;
-  }
-  renderToolbar() {
-    return html`
-      <div class="toolbar">
-        <div class="view-toggles">
-          ${this.renderViewButton("grid", "grid-3x3-gap", "Grid")}
-          ${this.renderViewButton("list", "list-ul", "List")}
-          ${this.renderViewButton("table", "table", "Table")}
-        </div>
-        <div class="info">
-          ${this.items.length} items
-        </div>
-      </div>
-    `;
-  }
-  renderViewButton(mode, icon, label) {
-    return html`
-      <u-button
-        ?active=${this.mode === mode}
-        @click=${() => this.switchMode(mode)}
-        title=${label}
-      >
-        <u-icon lib="bootstrap" name=${icon}></u-icon>
-      </u-button>
-    `;
-  }
-  renderContent() {
-    if (!this.items?.length) {
-      return html`<div class="empty">No data available</div>`;
-    }
-    switch (this.mode) {
-      case "grid":
-        return this.renderGrid();
-      case "list":
-        return this.renderList();
-      case "table":
-        return this.renderTable();
-    }
-  }
-  renderGrid() {
-    return html`
-      <div class="grid" style="--min-width: ${this.gridMinWidth}; --gap: ${this.gap};">
-        ${this.items.map((item, index) => this.renderGridItem(item, index))}
-      </div>
-    `;
-  }
-  renderList() {
-    return html`
-      <div class="list" style="--gap: ${this.gap};">
-        ${this.items.map((item, index) => this.renderListItem(item, index))}
-      </div>
-    `;
-  }
-  renderTable() {
-    const cols = this.getColumns();
-    return html`
-      <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              ${cols.map((col) => html`
-                <th style=${col.width ? `width: ${col.width}` : ""}>
-                  ${col.label || this.formatLabel(col.key)}
-                </th>
-              `)}
-            </tr>
-          </thead>
-          <tbody>
-            ${this.items.map((item, index) => html`
-              <tr 
-                class=${this.selectedIndex === index ? "selected" : ""}
-                @click=${() => this.selectItem(index)}
-              >
-                ${cols.map((col) => html`
-                  <td>${this.getCellContent(item, col, index)}</td>
-                `)}
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      </div>
-    `;
-  }
-  renderGridItem(item, index) {
-    const content = this.renderCard ? this.renderCard(item, index) : this.renderDefaultCard(item);
-    return html`
-      <div 
-        class="card ${this.selectedIndex === index ? "selected" : ""}"
-        @click=${() => this.selectItem(index)}
-      >
-        ${content}
-      </div>
-    `;
-  }
-  renderListItem(item, index) {
-    const content = this.renderCard ? this.renderCard(item, index) : this.renderDefaultCard(item);
-    return html`
-      <div 
-        class="card list-card ${this.selectedIndex === index ? "selected" : ""}"
-        @click=${() => this.selectItem(index)}
-      >
-        ${content}
-      </div>
-    `;
-  }
-  renderDefaultCard(item) {
-    const cols = this.getColumns();
-    return html`
-      <div class="card-content">
-        ${cols.slice(0, 5).map((col) => {
-      const value = item[col.key];
-      return html`
-            <div class="card-field">
-              <span class="label">${col.label || this.formatLabel(col.key)}:</span>
-              <span class="value">${this.formatValue(value)}</span>
-            </div>
-          `;
-    })}
-      </div>
-    `;
-  }
-  getCellContent(item, column, index) {
-    if (this.renderCell) {
-      return this.renderCell(item, column, index);
-    }
-    return this.formatValue(item[column.key]);
-  }
-  getColumns() {
-    if (this.columns?.length) {
-      return this.columns;
-    }
-    if (this.items.length > 0) {
-      const firstItem = this.items[0];
-      return Object.keys(firstItem).map((key) => ({ key }));
-    }
-    return [];
-  }
-  formatLabel(key) {
-    return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
-  }
-  formatValue(value) {
-    if (value == null) return "—";
-    if (typeof value === "boolean") return value ? "✓" : "✗";
-    if (value instanceof Date) return value.toLocaleString();
-    if (typeof value === "object") return JSON.stringify(value);
-    return String(value);
-  }
-  switchMode(mode) {
-    this.mode = mode;
-    this.emit("mode-change", { mode });
-  }
-  selectItem(index) {
-    this.selectedIndex = index;
-    this.emit("select", {
-      item: this.items[index],
-      index
-    });
-  }
-}
-__decorateClass([
-  property({ type: Array })
-], UDataView.prototype, "items");
-__decorateClass([
-  property({ type: String })
-], UDataView.prototype, "mode");
-__decorateClass([
-  property({ type: Array })
-], UDataView.prototype, "columns");
-__decorateClass([
-  property({ type: String })
-], UDataView.prototype, "gridMinWidth");
-__decorateClass([
-  property({ type: String })
-], UDataView.prototype, "gap");
-__decorateClass([
-  property({ attribute: false })
-], UDataView.prototype, "renderCard");
-__decorateClass([
-  property({ attribute: false })
-], UDataView.prototype, "renderCell");
-__decorateClass([
-  state()
-], UDataView.prototype, "selectedIndex");
-
-export { UDataView };

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

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