@iyulab/data-components 0.1.8 → 0.3.1

package/dist/components/u-rich-table/styles.js

@@ -0,0 +1,433 @@
+import { css } from "lit";
+//#region src/components/u-rich-table/styles.ts
+var richTableStyles = css`
+  :host {
+    display: block;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .toolbar .selection-info {
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  .toolbar .search-input {
+    padding: 4px 10px;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font-size: 12px;
+    outline: none;
+  }
+
+  .toolbar .search-input:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+
+  .toolbar .btn {
+    padding: 4px 10px;
+    border: none;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    color: white;
+  }
+
+  .toolbar .btn-primary { background: #3b82f6; }
+  .toolbar .btn-primary:hover { background: #2563eb; }
+  .toolbar .btn-success { background: #10b981; }
+  .toolbar .btn-success:hover { background: #059669; }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead th {
+    padding: 8px;
+    background: #f1f5f9;
+    font-weight: 600;
+    text-align: left;
+    border-bottom: 2px solid #e2e8f0;
+    user-select: none;
+    position: relative;
+  }
+
+  thead th.sortable {
+    cursor: pointer;
+  }
+
+  thead th.sortable:hover {
+    background: #e2e8f0;
+  }
+
+  .sort-indicator {
+    font-size: 10px;
+    color: #94a3b8;
+    margin-left: 4px;
+  }
+
+  .filter-row td {
+    padding: 4px;
+    background: #fefce8;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .filter-row input,
+  .filter-row select {
+    width: 100%;
+    padding: 2px 6px;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    font-size: 11px;
+    outline: none;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  tbody tr:hover {
+    background: #f8fafc;
+  }
+
+  tbody tr.selected {
+    background: #eff6ff;
+  }
+
+  tbody tr.focused td.focused-cell {
+    outline: 2px solid #3b82f6;
+    outline-offset: -2px;
+  }
+
+  tbody tr.editing {
+    background: #fefce8;
+    outline: 2px solid #eab308;
+  }
+
+  tbody tr.error {
+    background: #fef2f2;
+  }
+
+  tbody td {
+    padding: 8px;
+  }
+
+  tbody td .cell-edit-input {
+    width: 100%;
+    padding: 4px 6px;
+    border: 1px solid #3b82f6;
+    border-radius: 3px;
+    font-size: 13px;
+    outline: none;
+  }
+
+  tbody td .cell-edit-input.invalid {
+    border-color: #ef4444;
+  }
+
+  .validation-error {
+    font-size: 10px;
+    color: #ef4444;
+    margin-top: 2px;
+  }
+
+  .checkbox-cell {
+    width: 40px;
+    text-align: center;
+  }
+
+  .expand-cell {
+    width: 30px;
+    text-align: center;
+    cursor: pointer;
+    color: #94a3b8;
+  }
+
+  .expand-cell:hover {
+    color: #3b82f6;
+  }
+
+  .actions-cell {
+    width: 60px;
+    text-align: center;
+  }
+
+  .new-row td {
+    padding: 4px 8px;
+    background: #f0fdf4;
+    opacity: 0.8;
+  }
+
+  .new-row input {
+    width: 100%;
+    padding: 4px 6px;
+    border: 1px dashed #86efac;
+    border-radius: 3px;
+    background: transparent;
+    font-size: 12px;
+    color: #6b7280;
+    outline: none;
+  }
+
+  .new-row input:focus {
+    border-color: #10b981;
+    background: white;
+    opacity: 1;
+  }
+
+  .detail-row td {
+    padding: 8px 8px 8px 70px;
+    background: #f8fafc;
+    border-bottom: 2px solid #e2e8f0;
+  }
+
+  .badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-top: 1px solid #e2e8f0;
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  .pagination .page-buttons {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .pagination button {
+    padding: 2px 8px;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    background: white;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .pagination button.active {
+    background: #3b82f6;
+    color: white;
+    border-color: #3b82f6;
+  }
+
+  .pagination select {
+    padding: 2px 4px;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    font-size: 11px;
+    margin-left: 8px;
+  }
+
+  .loading-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: #6b7280;
+  }
+
+  .empty-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: #9ca3af;
+  }
+
+  /* ── Dark mode ──
+     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
+     제공되지 않으면 자체 dark fallback 값을 적용한다. */
+
+  :host-context([theme="dark"]) {
+    border-color: var(--u-border-color, #3D3D3D);
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .toolbar {
+    background: var(--u-neutral-200, #1E1E1E);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .toolbar .selection-info {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .toolbar .search-input {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-input-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .toolbar .search-input:focus {
+    border-color: var(--u-blue-500, #6ba3e3);
+    box-shadow: 0 0 0 2px rgba(107, 163, 227, 0.2);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-primary {
+    background: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-primary:hover {
+    background: var(--u-blue-600, #87B8F5);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-success {
+    background: var(--u-green-500, #66B584);
+  }
+
+  :host-context([theme="dark"]) .toolbar .btn-success:hover {
+    background: var(--u-green-600, #81D19D);
+  }
+
+  :host-context([theme="dark"]) thead th {
+    background: var(--u-neutral-200, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) thead th.sortable:hover {
+    background: var(--u-neutral-300, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) .sort-indicator {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .filter-row td {
+    background: var(--u-yellow-0, #2E2200);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .filter-row input,
+  :host-context([theme="dark"]) .filter-row select {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-input-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) tbody tr {
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) tbody tr:hover {
+    background: var(--u-neutral-200, #1E1E1E);
+  }
+
+  :host-context([theme="dark"]) tbody tr.selected {
+    background: var(--u-blue-0, #0a1e3d);
+  }
+
+  :host-context([theme="dark"]) tbody tr.focused td.focused-cell {
+    outline-color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) tbody tr.editing {
+    background: var(--u-yellow-0, #2E2200);
+    outline-color: var(--u-yellow-500, #D4A712);
+  }
+
+  :host-context([theme="dark"]) tbody tr.error {
+    background: var(--u-red-0, #2E0A0A);
+  }
+
+  :host-context([theme="dark"]) tbody td .cell-edit-input {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) tbody td .cell-edit-input.invalid {
+    border-color: var(--u-red-500, #D66060);
+  }
+
+  :host-context([theme="dark"]) .validation-error {
+    color: var(--u-red-500, #D66060);
+  }
+
+  :host-context([theme="dark"]) .expand-cell {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .expand-cell:hover {
+    color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) .new-row td {
+    background: var(--u-green-0, #0D2818);
+  }
+
+  :host-context([theme="dark"]) .new-row input {
+    border-color: var(--u-green-500, #66B584);
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .new-row input:focus {
+    border-color: var(--u-green-600, #81D19D);
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .detail-row td {
+    background: var(--u-neutral-200, #1E1E1E);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .pagination {
+    background: var(--u-neutral-200, #1E1E1E);
+    border-top-color: var(--u-border-color, #3D3D3D);
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .pagination button {
+    background: var(--u-neutral-300, #2A2A2A);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .pagination button.active {
+    background: var(--u-blue-500, #6ba3e3);
+    color: var(--u-neutral-1000, #FFFFFF);
+    border-color: var(--u-blue-500, #6ba3e3);
+  }
+
+  :host-context([theme="dark"]) .pagination select {
+    background: var(--u-input-bg-color, #1E1E1E);
+    color: var(--u-txt-color, #D4D4D4);
+    border-color: var(--u-input-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .loading-overlay {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .empty-message {
+    color: var(--u-txt-color-disabled, #525252);
+  }
+`;
+//#endregion
+export { richTableStyles };

package/dist/components/u-rich-table/types.d.ts

@@ -0,0 +1,67 @@
+export interface ColumnDef {
+    key: string;
+    label: string;
+    width?: string;
+    sortable?: boolean;
+    editable?: boolean;
+    required?: boolean;
+    type?: 'text' | 'number' | 'date' | 'select' | 'badge';
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    badgeColors?: Record<string, string>;
+    render?: (value: unknown, row: Record<string, unknown>) => string | HTMLElement;
+    align?: 'left' | 'center' | 'right';
+    filterable?: boolean;
+    filterType?: 'text' | 'select';
+    validator?: (value: unknown, row: Record<string, unknown>) => string | null;
+    clipboardParse?: (text: string) => unknown;
+    clipboardFormat?: (value: unknown) => string;
+}
+export interface CellPosition {
+    rowIndex: number;
+    colIndex: number;
+}
+export interface SortState {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+export interface FilterState {
+    [field: string]: string;
+}
+export interface RichTableEventMap {
+    'selection-change': CustomEvent<{
+        selectedRows: Record<string, unknown>[];
+    }>;
+    'row-create': CustomEvent<{
+        row: Record<string, unknown>;
+    }>;
+    'row-update': CustomEvent<{
+        row: Record<string, unknown>;
+        field: string;
+        value: unknown;
+        oldValue: unknown;
+    }>;
+    'row-delete': CustomEvent<{
+        row: Record<string, unknown>;
+    }>;
+    'row-expand': CustomEvent<{
+        row: Record<string, unknown>;
+        expanded: boolean;
+    }>;
+    'sort-change': CustomEvent<{
+        field: string;
+        direction: 'asc' | 'desc' | null;
+    }>;
+    'filter-change': CustomEvent<{
+        filters: FilterState;
+    }>;
+    'page-change': CustomEvent<{
+        page: number;
+        pageSize: number;
+    }>;
+    'paste': CustomEvent<{
+        rows: Record<string, unknown>[];
+    }>;
+}

package/dist/components/u-rich-table/utils/clipboard.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDef } from '../types.js';
+/**
+ * 탭/줄바꿈 구분 텍스트(TSV)를 파싱하여 행 배열로 반환
+ */
+export declare function parseTSV(text: string, columns: ColumnDef[]): Record<string, unknown>[];
+/**
+ * 행 배열을 탭/줄바꿈 구분 텍스트(TSV)로 변환
+ */
+export declare function toTSV(rows: Record<string, unknown>[], columns: ColumnDef[]): string;

package/dist/components/u-rich-table/utils/clipboard.js

@@ -0,0 +1,31 @@
+//#region src/components/u-rich-table/utils/clipboard.ts
+/**
+* 탭/줄바꿈 구분 텍스트(TSV)를 파싱하여 행 배열로 반환
+*/
+function parseTSV(text, columns) {
+	return text.trim().split("\n").map((line) => {
+		const cells = line.split("	");
+		const row = {};
+		columns.forEach((col, i) => {
+			if (i < cells.length) {
+				const raw = cells[i].trim();
+				if (col.clipboardParse) row[col.key] = col.clipboardParse(raw);
+				else if (col.type === "number") row[col.key] = Number(raw.replace(/,/g, "")) || 0;
+				else row[col.key] = raw;
+			}
+		});
+		return row;
+	});
+}
+/**
+* 행 배열을 탭/줄바꿈 구분 텍스트(TSV)로 변환
+*/
+function toTSV(rows, columns) {
+	return `${columns.map((c) => c.label).join("	")}\n${rows.map((row) => columns.map((col) => {
+		const value = row[col.key];
+		if (col.clipboardFormat) return col.clipboardFormat(value);
+		return String(value ?? "");
+	}).join("	")).join("\n")}`;
+}
+//#endregion
+export { parseTSV, toTSV };

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { UDataGrid } from './components/data-grid/UDataGrid';
 export type { UDataGridColumn, UDataGridProps } from './components/data-grid/UDataGrid.types';
 export * from './components/data-view/UDataView';
 export * from './components/simple-sheet/USimpleSheet';
+export * from './components/u-rich-table/URichTable';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { UDataGrid } from './components/data-grid/UDataGrid.js';
-import './components/data-view/UDataView.js';
-import './components/simple-sheet/USimpleSheet.js';
-export { UDataView } from './components/data-view/UDataView.component.js';
-export { USimpleSheet } from './components/simple-sheet/USimpleSheet.component.js';
+import { UDataGrid } from "./components/data-grid/UDataGrid.js";
+import { UDataView } from "./components/data-view/UDataView.js";
+import { USimpleSheet } from "./components/simple-sheet/USimpleSheet.js";
+import { URichTable } from "./components/u-rich-table/URichTable.js";
+export { UDataGrid, UDataView, URichTable, USimpleSheet };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.1.8",
+  "version": "0.3.1",
   "keywords": [
     "iyulab",
     "web-components",
@@ -27,26 +27,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./dist/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*"
-    },
-    "./init": {
-      "types": "./dist/init.d.ts",
-      "import": "./dist/init.js"
-    },
-    "./simple-sheet": {
-      "types": "./dist/components/simple-sheet/USimpleSheet.d.ts",
-      "import": "./dist/components/simple-sheet/USimpleSheet.js"
-    },
-    "./data-view": {
-      "types": "./dist/components/data-view/UDataView.d.ts",
-      "import": "./dist/components/data-view/UDataView.js"
-    },
-    "./data-grid": {
-      "types": "./dist/components/data-grid/UDataGrid.d.ts",
-      "import": "./dist/components/data-grid/UDataGrid.js"
-    }
+    "./dist/*": "./dist/*",
+    "./init": "./dist/init.js",
+    "./simple-sheet": "./dist/components/simple-sheet/USimpleSheet.js",
+    "./data-view": "./dist/components/data-view/UDataView.js",
+    "./data-grid": "./dist/components/data-grid/UDataGrid.js",
+    "./u-rich-table": "./dist/components/u-rich-table/URichTable.js"
   },
   "sideEffects": [
     "./dist/utilities/shadowDomProtection.js",
@@ -54,6 +40,7 @@
     "./dist/components/data-grid/UDataGrid.js",
     "./dist/components/data-view/UDataView.js",
     "./dist/components/simple-sheet/USimpleSheet.js",
+    "./dist/components/u-rich-table/URichTable.js",
     "./dist/init.js"
   ],
   "scripts": {
@@ -61,27 +48,27 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.4.0",
-    "devextreme": "^25.2.4",
-    "devextreme-react": "^25.2.4",
+    "@iyulab/components": "^1.0.0",
+    "devextreme": "^25.2.5",
+    "devextreme-react": "^25.2.5",
     "lit": "^3.3.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.3",
-    "@lit/react": "^1.0.8",
-    "@types/node": "^25.3.2",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "eslint": "^9.39.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.3.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
+    "glob": "^13.0.6",
+    "globals": "^17.4.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.2",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4"
   }
 }

package/dist/components/data-view/UDataView.component.d.ts

@@ -1,47 +0,0 @@
-import { TemplateResult } from 'lit';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-export type ViewMode = 'grid' | 'list' | 'table';
-export interface Column {
-    key: string;
-    label?: string;
-    width?: string;
-}
-/**
- * Data View Component
- * 데이터를 3가지 레이아웃(grid, list, table)으로 표시하는 컴포넌트
- */
-export declare class UDataView extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 표시할 데이터 배열 */
-    items: any[];
-    /** 현재 뷰 모드 */
-    mode: ViewMode;
-    /** 표시할 컬럼 설정 (미지정시 자동 감지) */
-    columns?: Column[];
-    /** 그리드 모드 최소 폭 */
-    gridMinWidth: string;
-    /** 아이템 간격 */
-    gap: string;
-    /** 커스텀 렌더 함수 (grid/list 카드용) */
-    renderCard?: (item: any, index: number) => TemplateResult;
-    /** 커스텀 셀 렌더 함수 (table용) */
-    renderCell?: (item: any, column: Column, index: number) => TemplateResult | string;
-    private selectedIndex;
-    render(): TemplateResult<1>;
-    private renderToolbar;
-    private renderViewButton;
-    private renderContent;
-    private renderGrid;
-    private renderList;
-    private renderTable;
-    private renderGridItem;
-    private renderListItem;
-    private renderDefaultCard;
-    private getCellContent;
-    private getColumns;
-    private formatLabel;
-    private formatValue;
-    private switchMode;
-    private selectItem;
-}