@iyulab/data-components 0.3.0 → 0.4.1

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

@@ -1,34 +1,31 @@
+//#region src/components/u-rich-table/utils/clipboard.ts
+/**
+* 탭/줄바꿈 구분 텍스트(TSV)를 파싱하여 행 배열로 반환
+*/
 function parseTSV(text, columns) {
-  const lines = text.trim().split("\n");
-  return lines.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;
-  });
+	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) {
-  const header = columns.map((c) => c.label).join("	");
-  const body = rows.map(
-    (row) => columns.map((col) => {
-      const value = row[col.key];
-      if (col.clipboardFormat) return col.clipboardFormat(value);
-      return String(value ?? "");
-    }).join("	")
-  ).join("\n");
-  return `${header}
-${body}`;
+	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

@@ -1,5 +1,3 @@
-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,7 +1,4 @@
-export { UDataGrid } from './components/data-grid/UDataGrid.js';
-import './components/data-view/UDataView.js';
-import './components/simple-sheet/USimpleSheet.js';
-import './components/u-rich-table/URichTable.js';
-export { UDataView } from './components/data-view/UDataView.component.js';
-export { URichTable } from './components/u-rich-table/URichTable.component.js';
-export { USimpleSheet } from './components/simple-sheet/USimpleSheet.component.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 { UDataView, URichTable, USimpleSheet };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "keywords": [
     "iyulab",
     "web-components",
@@ -27,35 +27,14 @@
       "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"
-    },
-    "./u-rich-table": {
-      "types": "./dist/components/u-rich-table/URichTable.d.ts",
-      "import": "./dist/components/u-rich-table/URichTable.js"
-    }
+    "./dist/*": "./dist/*",
+    "./init": "./dist/init.js",
+    "./simple-sheet": "./dist/components/simple-sheet/USimpleSheet.js",
+    "./data-view": "./dist/components/data-view/UDataView.js",
+    "./u-rich-table": "./dist/components/u-rich-table/URichTable.js"
   },
   "sideEffects": [
     "./dist/utilities/shadowDomProtection.js",
-    "./dist/utilities/devExtremeCssInjection.js",
-    "./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",
@@ -66,27 +45,18 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.4.0",
-    "devextreme": "^25.2.4",
-    "devextreme-react": "^25.2.4",
-    "lit": "^3.3.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "@iyulab/components": "^1.0.4",
+    "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.3",
-    "@lit/react": "^1.0.8",
-    "@types/node": "^25.3.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "eslint": "^9.39.3",
-    "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",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^25.6.0",
+    "eslint": "^9.39.4",
+    "glob": "^13.0.6",
+    "globals": "^17.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4"
   }
 }

package/dist/components/data-grid/UDataGrid.d.ts

@@ -1,2 +0,0 @@
-import { UDataGridProps } from './UDataGrid.types.js';
-export declare function UDataGrid({ dataSourceUrl, keyField, selectFields, columns, pageSize, showBorders, allowColumnReordering, allowColumnResizing, showGroupPanel, showSearchPanel, showFilterRow, showHeaderFilter, allowExport, exportFileName, isDevelopment, onDataLoaded, onDataLoadError, onExporting, onRowClick, beforeSend }: UDataGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-grid/UDataGrid.js

@@ -1,174 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import 'devextreme/data/odata/store';
-import DataGrid, { LoadPanel, Selection, FilterRow, HeaderFilter, SearchPanel, Grouping, GroupPanel, ColumnChooser, Paging, Export, Toolbar, Item, Column } from 'devextreme-react/data-grid';
-
-function UDataGrid({
-  dataSourceUrl,
-  keyField,
-  selectFields,
-  columns,
-  pageSize = 25,
-  showBorders = true,
-  allowColumnReordering = true,
-  allowColumnResizing = true,
-  showGroupPanel = true,
-  showSearchPanel = true,
-  showFilterRow = true,
-  showHeaderFilter = true,
-  allowExport = true,
-  exportFileName,
-  isDevelopment = false,
-  onDataLoaded,
-  onDataLoadError,
-  onExporting,
-  onRowClick,
-  beforeSend
-}) {
-  const defaultBeforeSend = (operation, ajaxOptions) => {
-    try {
-      if (!ajaxOptions) {
-        console.warn("ajaxOptions가 undefined입니다");
-        return;
-      }
-      if (!ajaxOptions.headers || typeof ajaxOptions.headers !== "object") {
-        ajaxOptions.headers = {};
-      }
-      ajaxOptions.headers["Accept"] = "application/json";
-      ajaxOptions.headers["Content-Type"] = "application/json";
-      if (isDevelopment) {
-        ajaxOptions.crossDomain = true;
-        ajaxOptions.headers["Access-Control-Allow-Origin"] = "*";
-      }
-      console.log(`U-DataGrid ${operation} 요청:`, {
-        url: ajaxOptions.url,
-        headers: ajaxOptions.headers,
-        method: ajaxOptions.type || "GET"
-      });
-    } catch (error) {
-      console.error("beforeSend 처리 중 오류:", error);
-    }
-  };
-  const defaultOnLoadError = (error) => {
-    console.error("U-DataGrid 데이터 로딩 오류:", error);
-    let errorMessage = "데이터를 불러오는 중 오류가 발생했습니다.";
-    try {
-      if (error && typeof error === "object") {
-        if (error.status === 404) {
-          errorMessage = "API 엔드포인트를 찾을 수 없습니다. 서버가 실행중인지 확인해주세요.";
-        } else if (error.status === 0) {
-          errorMessage = "CORS 오류 또는 네트워크 연결 문제입니다. 서버 설정을 확인해주세요.";
-        } else if (error.status >= 500) {
-          errorMessage = "서버 내부 오류입니다. 서버 로그를 확인해주세요.";
-        } else if (error.message) {
-          errorMessage = error.message;
-        } else if (typeof error === "string") {
-          errorMessage = error;
-        }
-      }
-    } catch (parseError) {
-      console.error("오류 메시지 파싱 중 문제:", parseError);
-    }
-    alert(`${errorMessage}
-
-요청 URL: ${dataSourceUrl}`);
-  };
-  const dataSource = useMemo(() => {
-    return {
-      store: {
-        type: "odata",
-        version: 4,
-        url: dataSourceUrl,
-        key: keyField,
-        beforeSend: beforeSend || defaultBeforeSend,
-        onLoading: () => {
-          console.log("U-DataGrid 데이터 로딩 시작...");
-        },
-        onLoaded: (data) => {
-          console.log("U-DataGrid 데이터 로딩 완료:", data);
-          onDataLoaded?.(data);
-        },
-        onLoadError: onDataLoadError || defaultOnLoadError
-      },
-      select: selectFields
-    };
-  }, [dataSourceUrl, keyField, selectFields, beforeSend, onDataLoaded, onDataLoadError]);
-  const handleExporting = (e) => {
-    if (exportFileName) {
-      e.fileName = exportFileName;
-    } else {
-      e.fileName = `DataGrid_Export_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
-    }
-    onExporting?.(e);
-  };
-  return /* @__PURE__ */ jsx("div", { style: {
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    contain: "layout style",
-    isolation: "isolate",
-    overflow: "hidden"
-  }, children: /* @__PURE__ */ jsxs(
-    DataGrid,
-    {
-      dataSource,
-      showBorders,
-      allowColumnReordering,
-      allowColumnResizing,
-      columnAutoWidth: false,
-      showColumnLines: true,
-      showRowLines: true,
-      rowAlternationEnabled: true,
-      hoverStateEnabled: true,
-      height: "100%",
-      width: "100%",
-      wordWrapEnabled: true,
-      columnResizingMode: "widget",
-      remoteOperations: true,
-      onExporting: handleExporting,
-      onRowClick,
-      children: [
-        /* @__PURE__ */ jsx(LoadPanel, { enabled: true }),
-        /* @__PURE__ */ jsx(Selection, { mode: "multiple" }),
-        showFilterRow && /* @__PURE__ */ jsx(FilterRow, { visible: true }),
-        showHeaderFilter && /* @__PURE__ */ jsx(HeaderFilter, { visible: true }),
-        showSearchPanel && /* @__PURE__ */ jsx(SearchPanel, { visible: true, placeholder: "검색..." }),
-        /* @__PURE__ */ jsx(Grouping, { autoExpandAll: false }),
-        showGroupPanel && /* @__PURE__ */ jsx(GroupPanel, { visible: true }),
-        /* @__PURE__ */ jsx(ColumnChooser, { enabled: true }),
-        /* @__PURE__ */ jsx(Paging, { defaultPageSize: pageSize }),
-        allowExport && /* @__PURE__ */ jsx(Export, { enabled: true }),
-        /* @__PURE__ */ jsxs(Toolbar, { children: [
-          showGroupPanel && /* @__PURE__ */ jsx(Item, { name: "groupPanel" }),
-          allowExport && /* @__PURE__ */ jsx(Item, { name: "exportButton" }),
-          /* @__PURE__ */ jsx(Item, { name: "columnChooserButton" }),
-          showSearchPanel && /* @__PURE__ */ jsx(Item, { name: "searchPanel" })
-        ] }),
-        columns.map((col, index) => /* @__PURE__ */ jsx(
-          Column,
-          {
-            dataField: col.dataField,
-            caption: col.caption,
-            width: col.width,
-            minWidth: col.minWidth,
-            dataType: col.dataType,
-            format: col.format,
-            alignment: col.alignment,
-            fixed: col.fixed,
-            fixedPosition: col.fixedPosition,
-            allowHiding: col.allowHiding,
-            allowSorting: col.allowSorting,
-            allowFiltering: col.allowFiltering,
-            allowGrouping: col.allowGrouping,
-            sortOrder: col.sortOrder,
-            cellRender: col.cellRender,
-            visible: col.visible
-          },
-          col.dataField || `column-${index}`
-        ))
-      ]
-    }
-  ) });
-}
-
-export { UDataGrid };

package/dist/components/data-grid/UDataGrid.types.d.ts

@@ -1,42 +0,0 @@
-export interface UDataGridColumn {
-    dataField?: string;
-    caption: string;
-    width?: number;
-    minWidth?: number;
-    dataType?: 'string' | 'number' | 'date' | 'datetime' | 'boolean';
-    format?: string;
-    alignment?: 'left' | 'center' | 'right';
-    fixed?: boolean;
-    fixedPosition?: 'left' | 'right';
-    allowHiding?: boolean;
-    allowSorting?: boolean;
-    allowFiltering?: boolean;
-    allowGrouping?: boolean;
-    sortOrder?: 'asc' | 'desc';
-    cellRender?: (cellData: any) => React.ReactNode;
-    visible?: boolean;
-}
-export interface UDataGridProps {
-    dataSourceUrl: string;
-    keyField: string;
-    selectFields?: string[];
-    columns: UDataGridColumn[];
-    pageSize?: number;
-    showBorders?: boolean;
-    allowColumnReordering?: boolean;
-    allowColumnResizing?: boolean;
-    showGroupPanel?: boolean;
-    showSearchPanel?: boolean;
-    showFilterRow?: boolean;
-    showHeaderFilter?: boolean;
-    allowExport?: boolean;
-    exportFileName?: string;
-    isDevelopment?: boolean;
-    onDataLoaded?: (data: any) => void;
-    onDataLoadError?: (error: any) => void;
-    onExporting?: (e: any) => void;
-    onRowClick?: (e: {
-        data: Record<string, unknown>;
-    }) => void;
-    beforeSend?: (operation: string, ajaxOptions: any) => void;
-}

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;
-}

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 };