@iyulab/data-components 0.1.0

package/CHANGELOG.md

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

package/README.md

@@ -0,0 +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

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

@@ -0,0 +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;

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

@@ -0,0 +1,172 @@
+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,
+  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,
+      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

@@ -0,0 +1,39 @@
+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;
+    beforeSend?: (operation: string, ajaxOptions: any) => void;
+}

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

@@ -0,0 +1,58 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+export interface DataViewColumnDefinition {
+    name: string;
+    display?: string;
+}
+/**
+ * Data View Component
+ */
+export declare class UDataView extends BaseElement {
+    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;
+    private renderTable;
+    private getDefaultColumns;
+    private getDisplayName;
+    private toPascalCase;
+    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;
+}

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

@@ -0,0 +1,301 @@
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UIconButton } from '@iyulab/components/dist/components/icon-button/UIconButton.component.js';
+import { USkeleton } from '@iyulab/components/dist/components/skeleton/USkeleton.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;
+};
+const IMAGE_SIZE_LIST = 128;
+const IMAGE_SIZE_TABLE = 64;
+const IMAGE_SIZE_GRID = 128;
+class UDataView extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.layout = "grid";
+    this.imageField = "image";
+    this.itemMargin = "1rem";
+    this.minItemWidth = "250px";
+    this.selectedItem = null;
+    this.currentLayout = "grid";
+    this.loading = true;
+    this.imageLoadErrors = /* @__PURE__ */ new Set();
+    this.randomColors = /* @__PURE__ */ new Map();
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon-button": UIconButton,
+      "u-skeleton": USkeleton
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setTimeout(() => {
+      this.loading = false;
+      this.requestUpdate();
+    }, 2e3);
+  }
+  handleImageError(item) {
+    this.imageLoadErrors.add(item[this.imageField]);
+    this.requestUpdate();
+  }
+  renderTable() {
+    const columns = this.columns || this.getDefaultColumns();
+    return html`
+      <table class="default-table">
+        <thead>
+          <tr>
+            <th>Image</th>
+            ${columns.map((column) => html`<th>${this.getDisplayName(column)}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.loading ? Array(5).fill(0).map(() => html`
+                <tr>
+                  <td><u-skeleton effect="shimmer" width="64px" height="64px"></u-skeleton></td>
+                  ${columns.map(() => html`
+                    <td><u-skeleton effect="shimmer" width="80%" height="1em"></u-skeleton></td>
+                  `)}
+                </tr>
+              `) : this.data?.map((item) => html`
+                <tr class="default-item ${this.selectedItem === item ? "selected" : ""}"
+                    @click=${() => this.handleItemClick(item)}
+                    @dblclick=${() => this.handleItemDoubleClick(item)}>
+                  <td class="image-cell">
+                    ${this.defaultRenderImage(item, "table")}
+                  </td>
+                  ${columns.map((column) => html`<td>${this.formatValue(item[column.name])}</td>`)}
+                </tr>
+              `)}
+        </tbody>
+      </table>
+    `;
+  }
+  getDefaultColumns() {
+    if (this.data && this.data.length > 0) {
+      return Object.keys(this.data[0]).filter((key) => key !== this.imageField).map((key) => ({ name: key }));
+    }
+    return [];
+  }
+  getDisplayName(column) {
+    return column.display || this.toPascalCase(column.name);
+  }
+  toPascalCase(str) {
+    const words = str.split(/(?=[A-Z])|\s+|[-_]+/);
+    return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+  }
+  formatValue(value) {
+    if (value instanceof Date) {
+      const pad = (num) => num.toString().padStart(2, "0");
+      return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())} ${pad(value.getHours())}:${pad(value.getMinutes())}`;
+    }
+    return value;
+  }
+  defaultRenderFields(item) {
+    const columns = this.columns || this.getDefaultColumns();
+    return html`
+      <div class="default-fields">
+        ${columns.map((column) => html`
+          <div class="field">
+            ${this.loading ? html`
+                  <u-skeleton effect="shimmer" width="30%" height="1em" class="field-title"></u-skeleton>
+                  <u-skeleton effect="shimmer" width="60%" height="1em" class="field-value"></u-skeleton>
+                ` : html`
+                  <span class="field-title">${this.getDisplayName(column)}:</span>
+                  <span class="field-value">${this.formatValue(item[column.name])}</span>
+                `}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  getRandomColor(key) {
+    if (!this.randomColors.has(key)) {
+      const hue = Math.floor(Math.random() * 360);
+      const saturation = 70 + Math.floor(Math.random() * 30);
+      const lightness = 60 + Math.floor(Math.random() * 20);
+      this.randomColors.set(key, `hsl(${hue}, ${saturation}%, ${lightness}%)`);
+    }
+    return this.randomColors.get(key);
+  }
+  defaultRenderImage(item, viewType = "grid") {
+    if (this.loading) {
+      const skeletonSize = viewType === "table" ? `${IMAGE_SIZE_TABLE}px` : viewType === "list" ? `${IMAGE_SIZE_LIST}px` : `${IMAGE_SIZE_GRID}px`;
+      return html`<u-skeleton effect="shimmer" width=${skeletonSize} height=${skeletonSize} style="margin-bottom: 1em;"></u-skeleton>`;
+    }
+    const imageSrc = item[this.imageField];
+    const imageClass = `default-image ${viewType}-image`;
+    if (imageSrc && !this.imageLoadErrors.has(imageSrc)) {
+      return html`
+        <img 
+          src=${imageSrc} 
+          alt="Item image" 
+          class=${imageClass}
+          @error=${() => this.handleImageError(item)}
+          style=${viewType !== "grid" ? "" : "margin-bottom: 1em;"}
+        />
+      `;
+    } else {
+      const backgroundColor = this.getRandomColor(item.id || JSON.stringify(item));
+      const textColor = this.getContrastColor(backgroundColor);
+      const styles2 = {
+        backgroundColor,
+        color: textColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: viewType === "table" ? "1.5rem" : "2rem",
+        fontWeight: "bold",
+        width: viewType === "table" ? `${IMAGE_SIZE_TABLE}px` : viewType === "list" ? `${IMAGE_SIZE_LIST}px` : "100%",
+        height: viewType === "table" ? `${IMAGE_SIZE_TABLE}px` : viewType === "list" ? `${IMAGE_SIZE_LIST}px` : `${IMAGE_SIZE_GRID}px`
+      };
+      return html`
+        <div class=${`${imageClass} placeholder-image`} style=${styleMap(styles2)}>
+          ${item.name ? item.name.charAt(0).toUpperCase() : "N/A"}
+        </div>
+      `;
+    }
+  }
+  getContrastColor(backgroundColor) {
+    const rgb = this.hexToRgb(backgroundColor);
+    const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+    return brightness > 128 ? "#000000" : "#FFFFFF";
+  }
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : { r: 0, g: 0, b: 0 };
+  }
+  render() {
+    return html`
+      <div class="u-data-view-container">
+        <div class="layout-selector">
+          <u-icon-button lib="internal" name="grid"
+            @click=${() => this.setLayout("grid")}
+          ></u-icon-button>
+          <u-icon-button lib="internal" name="list-ul"
+            @click=${() => this.setLayout("list")}
+          ></u-icon-button>
+          <u-icon-button lib="internal" name="table"
+            @click=${() => this.setLayout("table")}
+          ></u-icon-button>
+        </div>
+        <div class="u-data-view ${this.currentLayout}" style="--item-margin: ${this.itemMargin}; --min-item-width: ${this.minItemWidth};">
+          ${this.currentLayout === "table" ? this.renderTable() : this.renderItems()}
+        </div>
+      </div>
+    `;
+  }
+  renderItems() {
+    if (this.loading) {
+      return Array(5).fill(0).map(() => html`
+        <div class="default-item" style="padding: 1em; border: 1px solid #eee; border-radius: 4px;">
+          <u-skeleton effect="shimmer" width="100%" height="${IMAGE_SIZE_GRID}px" style="margin-bottom: 1em;"></u-skeleton>
+          <div class="default-fields">
+            ${Array(3).fill(0).map(() => html`
+              <div class="field" style="margin-bottom: 0.5em;">
+                <u-skeleton effect="shimmer" width="30%" height="1em" style="margin-right: 0.5em;"></u-skeleton>
+                <u-skeleton effect="shimmer" width="60%" height="1em"></u-skeleton>
+              </div>
+            `)}
+          </div>
+        </div>
+      `);
+    }
+    return this.data?.map(
+      (item) => this.renderItem ? this.renderItem(item) : html`
+            <div class="default-item ${this.selectedItem === item ? "selected" : ""}"
+                 @click=${() => this.handleItemClick(item)}
+                 @dblclick=${() => this.handleItemDoubleClick(item)}>
+              ${this.renderImage ? this.renderImage(item) : this.defaultRenderImage(item, this.currentLayout)}
+              ${this.renderFields ? this.renderFields(item) : this.defaultRenderFields(item)}
+            </div>
+          `
+    );
+  }
+  setLayout(newLayout) {
+    this.currentLayout = newLayout;
+    this.requestUpdate();
+  }
+  handleItemClick(item) {
+    this.selectedItem = item;
+    if (this.onItemSelect) {
+      this.onItemSelect(item);
+    }
+    this.requestUpdate();
+  }
+  handleItemDoubleClick(item) {
+    if (this.onItemDoubleClick) {
+      this.onItemDoubleClick(item);
+    }
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], UDataView.prototype, "data");
+__decorateClass([
+  property({ type: String })
+], UDataView.prototype, "layout");
+__decorateClass([
+  property({ type: Object })
+], UDataView.prototype, "renderItem");
+__decorateClass([
+  property({ type: Object })
+], UDataView.prototype, "renderImage");
+__decorateClass([
+  property({ type: Object })
+], UDataView.prototype, "renderFields");
+__decorateClass([
+  property({ type: Number })
+], UDataView.prototype, "itemsPerPage");
+__decorateClass([
+  property({ type: String })
+], UDataView.prototype, "imageField");
+__decorateClass([
+  property({ type: String })
+], UDataView.prototype, "itemMargin");
+__decorateClass([
+  property({ type: String })
+], UDataView.prototype, "minItemWidth");
+__decorateClass([
+  property({ type: Array })
+], UDataView.prototype, "columns");
+__decorateClass([
+  property({ type: Object })
+], UDataView.prototype, "onItemSelect");
+__decorateClass([
+  property({ type: Object })
+], UDataView.prototype, "onItemDoubleClick");
+__decorateClass([
+  state()
+], UDataView.prototype, "selectedItem");
+__decorateClass([
+  state()
+], UDataView.prototype, "currentLayout");
+__decorateClass([
+  state()
+], UDataView.prototype, "loading");
+__decorateClass([
+  state()
+], UDataView.prototype, "imageLoadErrors");
+__decorateClass([
+  state()
+], UDataView.prototype, "randomColors");
+
+export { UDataView };

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

@@ -0,0 +1,8 @@
+import { UDataView } from './UDataView.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-data-view": UDataView;
+    }
+}
+export { UDataView };
+export type { DataViewColumnDefinition } from './UDataView.component.js';

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

@@ -0,0 +1,5 @@
+import { UDataView } from './UDataView.component.js';
+
+customElements.define("u-data-view", UDataView);
+
+export { UDataView };

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;