@iyulab/data-components 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-# Changelog
-
-## [Unreleased]
+# Changelog
+
+## [Unreleased]
 - Initial library version release

package/README.md

@@ -1,89 +1,89 @@
-# @iyulab/data-components
-
-데이터 표시 및 입력을 위한 웹 컴포넌트 라이브러리.
-
-- **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit)
-- **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
-- **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
-
-## Installation
-
-```bash
-npm install @iyulab/data-components
-```
-
-## Quick Start
-
-### USimpleSheet
-
-```html
-<u-simple-sheet
-  style="height: 300px;"
-  .rows=${20}
-  .cols=${8}
-  @change=${(e) => console.log(e.detail.data)}
-></u-simple-sheet>
-```
-
-컬럼 정의 + 초기 데이터:
-
-```html
-<u-simple-sheet
-  style="height: 400px;"
-  .columns=${[
-    { key: 'name',  label: '이름',   width: 150 },
-    { key: 'email', label: '이메일', width: 220 },
-  ]}
-  .data=${[
-    ['홍길동', 'hong@example.com'],
-    ['김철수', 'kim@example.com'],
-  ]}
-  @change=${(e) => console.log(e.target.getDataAsObjects())}
-></u-simple-sheet>
-```
-
-### UDataView
-
-```html
-<u-data-view
-  .items=${myData}
-  mode="grid"
-  @select=${(e) => console.log(e.detail)}
-></u-data-view>
-```
-
-### UDataGrid (React)
-
-```tsx
-import { UDataGrid } from '@iyulab/data-components';
-
-<UDataGrid
-  dataSourceUrl="https://api.example.com/odata/products"
-  keyField="id"
-  columns={[
-    { dataField: 'name',  caption: '상품명' },
-    { dataField: 'price', caption: '가격', dataType: 'number' },
-  ]}
-/>
-```
-
-## Documentation
-
-- [USimpleSheet](./docs/USimpleSheet.md)
-- [UDataView](./docs/UDataView.md)
-- [UDataGrid](./docs/UDataGrid.md)
-
-## Theming
-
-`@iyulab/components`의 테마 시스템을 사용합니다. 라이트/다크 모드 자동 지원.
-
-```typescript
-import { Theme } from '@iyulab/components';
-
-Theme.init({ default: 'system' });
-Theme.set('dark'); // 'light' | 'dark' | 'system'
-```
-
-## License
-
-MIT
+# @iyulab/data-components
+
+데이터 표시 및 입력을 위한 웹 컴포넌트 라이브러리.
+
+- **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit)
+- **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
+- **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
+
+## Installation
+
+```bash
+npm install @iyulab/data-components
+```
+
+## Quick Start
+
+### USimpleSheet
+
+```html
+<u-simple-sheet
+  style="height: 300px;"
+  .rows=${20}
+  .cols=${8}
+  @change=${(e) => console.log(e.detail.data)}
+></u-simple-sheet>
+```
+
+컬럼 정의 + 초기 데이터:
+
+```html
+<u-simple-sheet
+  style="height: 400px;"
+  .columns=${[
+    { key: 'name',  label: '이름',   width: 150 },
+    { key: 'email', label: '이메일', width: 220 },
+  ]}
+  .data=${[
+    ['홍길동', 'hong@example.com'],
+    ['김철수', 'kim@example.com'],
+  ]}
+  @change=${(e) => console.log(e.target.getDataAsObjects())}
+></u-simple-sheet>
+```
+
+### UDataView
+
+```html
+<u-data-view
+  .items=${myData}
+  mode="grid"
+  @select=${(e) => console.log(e.detail)}
+></u-data-view>
+```
+
+### UDataGrid (React)
+
+```tsx
+import { UDataGrid } from '@iyulab/data-components';
+
+<UDataGrid
+  dataSourceUrl="https://api.example.com/odata/products"
+  keyField="id"
+  columns={[
+    { dataField: 'name',  caption: '상품명' },
+    { dataField: 'price', caption: '가격', dataType: 'number' },
+  ]}
+/>
+```
+
+## Documentation
+
+- [USimpleSheet](./docs/USimpleSheet.md)
+- [UDataView](./docs/UDataView.md)
+- [UDataGrid](./docs/UDataGrid.md)
+
+## Theming
+
+`@iyulab/components`의 테마 시스템을 사용합니다. 라이트/다크 모드 자동 지원.
+
+```typescript
+import { Theme } from '@iyulab/components';
+
+Theme.init({ default: 'system' });
+Theme.set('dark'); // 'light' | 'dark' | 'system'
+```
+
+## License
+
+MIT

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

@@ -1,2 +1,2 @@
 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, beforeSend }: UDataGridProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -22,6 +22,7 @@ function UDataGrid({
   onDataLoaded,
   onDataLoadError,
   onExporting,
+  onRowClick,
   beforeSend
 }) {
   const defaultBeforeSend = (operation, ajaxOptions) => {
@@ -39,7 +40,7 @@ function UDataGrid({
         ajaxOptions.crossDomain = true;
         ajaxOptions.headers["Access-Control-Allow-Origin"] = "*";
       }
-      console.log(`U DataGrid ${operation} 요청:`, {
+      console.log(`U-DataGrid ${operation} 요청:`, {
         url: ajaxOptions.url,
         headers: ajaxOptions.headers,
         method: ajaxOptions.type || "GET"
@@ -49,7 +50,7 @@ function UDataGrid({
     }
   };
   const defaultOnLoadError = (error) => {
-    console.error("U DataGrid 데이터 로딩 오류:", error);
+    console.error("U-DataGrid 데이터 로딩 오류:", error);
     let errorMessage = "데이터를 불러오는 중 오류가 발생했습니다.";
     try {
       if (error && typeof error === "object") {
@@ -81,10 +82,10 @@ function UDataGrid({
         key: keyField,
         beforeSend: beforeSend || defaultBeforeSend,
         onLoading: () => {
-          console.log("U DataGrid 데이터 로딩 시작...");
+          console.log("U-DataGrid 데이터 로딩 시작...");
         },
         onLoaded: (data) => {
-          console.log("U DataGrid 데이터 로딩 완료:", data);
+          console.log("U-DataGrid 데이터 로딩 완료:", data);
           onDataLoaded?.(data);
         },
         onLoadError: onDataLoadError || defaultOnLoadError
@@ -125,6 +126,7 @@ function UDataGrid({
       columnResizingMode: "widget",
       remoteOperations: true,
       onExporting: handleExporting,
+      onRowClick,
       children: [
         /* @__PURE__ */ jsx(LoadPanel, { enabled: true }),
         /* @__PURE__ */ jsx(Selection, { mode: "multiple" }),

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

@@ -35,5 +35,8 @@ export interface UDataGridProps {
     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,58 +1,47 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-export interface DataViewColumnDefinition {
-    name: string;
-    display?: string;
+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 BaseElement {
+export declare class UDataView extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 표시할 데이터 배열을 지정합니다. */
-    data: any[];
-    /** 데이터 뷰의 레이아웃을 지정합니다. ('list', 'grid' 또는 'table') */
-    layout: "list" | "grid" | "table";
-    /** 각 아이템을 렌더링하는 함수를 지정합니다. */
-    renderItem?: (item: any) => HTMLElement;
-    /** 각 아이템의 이미지를 렌더링하는 함수를 지정합니다. */
-    renderImage?: (item: any) => HTMLElement;
-    /** 각 아이템의 필드를 렌더링하는 함수를 지정합니다. */
-    renderFields?: (item: any) => HTMLElement;
-    /** 페이지당 표시할 아이템 수를 지정합니다. */
-    itemsPerPage?: number;
-    /** 아이템의 이미지 필드 이름을 지정합니다. */
-    imageField: string;
-    /** 아이템 간 마진을 지정합니다. */
-    itemMargin: string;
-    /** 그리드 레이아웃에서 아이템의 최소 너비를 지정합니다. */
-    minItemWidth: string;
-    /** 표시할 열 정보를 지정합니다. 지정하지 않으면 이미지를 제외한 모든 필드가 표시됩니다. */
-    columns?: DataViewColumnDefinition[];
-    /** 아이템 선택 시 호출되는 콜백 함수를 지정합니다. */
-    onItemSelect?: (item: any) => void;
-    /** 아이템 더블 클릭 시 호출되는 콜백 함수를 지정합니다. */
-    onItemDoubleClick?: (item: any) => void;
-    private selectedItem;
-    private currentLayout;
-    private loading;
-    private imageLoadErrors;
-    private randomColors;
-    connectedCallback(): void;
-    private handleImageError;
+    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 getDefaultColumns;
-    private getDisplayName;
-    private toPascalCase;
+    private renderGridItem;
+    private renderListItem;
+    private renderDefaultCard;
+    private getCellContent;
+    private getColumns;
+    private formatLabel;
     private formatValue;
-    private defaultRenderFields;
-    private getRandomColor;
-    private defaultRenderImage;
-    private getContrastColor;
-    private hexToRgb;
-    protected render(): import('lit').TemplateResult<1>;
-    private renderItems;
-    protected setLayout(newLayout: "list" | "grid" | "table"): void;
-    private handleItemClick;
-    private handleItemDoubleClick;
+    private switchMode;
+    private selectItem;
 }