@iyulab/data-components 0.1.0 → 0.1.2

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

@@ -1,9 +1,8 @@
 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 { 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;
@@ -15,287 +14,213 @@ var __decorateClass = (decorators, target, key, kind) => {
   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 {
+class UDataView extends UElement {
   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();
+    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-button": UIconButton,
-      "u-skeleton": USkeleton
+      "u-icon": UIcon,
+      "u-button": UButton
     };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    setTimeout(() => {
-      this.loading = false;
-      this.requestUpdate();
-    }, 2e3);
+  render() {
+    return html`
+      <div class="data-view">
+        ${this.renderToolbar()}
+        ${this.renderContent()}
+      </div>
+    `;
   }
-  handleImageError(item) {
-    this.imageLoadErrors.add(item[this.imageField]);
-    this.requestUpdate();
+  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>
+    `;
   }
-  renderTable() {
-    const columns = this.columns || this.getDefaultColumns();
+  renderViewButton(mode, icon, label) {
     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>
+      <u-button
+        ?active=${this.mode === mode}
+        @click=${() => this.switchMode(mode)}
+        title=${label}
+      >
+        <u-icon lib="bootstrap" name=${icon}></u-icon>
+      </u-button>
     `;
   }
-  getDefaultColumns() {
-    if (this.data && this.data.length > 0) {
-      return Object.keys(this.data[0]).filter((key) => key !== this.imageField).map((key) => ({ name: key }));
+  renderContent() {
+    if (!this.items?.length) {
+      return html`<div class="empty">No data available</div>`;
     }
-    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())}`;
+    switch (this.mode) {
+      case "grid":
+        return this.renderGrid();
+      case "list":
+        return this.renderList();
+      case "table":
+        return this.renderTable();
     }
-    return value;
   }
-  defaultRenderFields(item) {
-    const columns = this.columns || this.getDefaultColumns();
+  renderGrid() {
     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 class="grid" style="--min-width: ${this.gridMinWidth}; --gap: ${this.gap};">
+        ${this.items.map((item, index) => this.renderGridItem(item, index))}
       </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>
-      `;
-    }
+  renderList() {
+    return html`
+      <div class="list" style="--gap: ${this.gap};">
+        ${this.items.map((item, index) => this.renderListItem(item, index))}
+      </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";
+  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>
+    `;
   }
-  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 };
+  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>
+    `;
   }
-  render() {
+  renderListItem(item, index) {
+    const content = this.renderCard ? this.renderCard(item, index) : this.renderDefaultCard(item);
     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 
+        class="card list-card ${this.selectedIndex === index ? "selected" : ""}"
+        @click=${() => this.selectItem(index)}
+      >
+        ${content}
       </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)}
+  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>
-          `
-    );
-  }
-  setLayout(newLayout) {
-    this.currentLayout = newLayout;
-    this.requestUpdate();
+          `;
+    })}
+      </div>
+    `;
   }
-  handleItemClick(item) {
-    this.selectedItem = item;
-    if (this.onItemSelect) {
-      this.onItemSelect(item);
+  getCellContent(item, column, index) {
+    if (this.renderCell) {
+      return this.renderCell(item, column, index);
     }
-    this.requestUpdate();
+    return this.formatValue(item[column.key]);
   }
-  handleItemDoubleClick(item) {
-    if (this.onItemDoubleClick) {
-      this.onItemDoubleClick(item);
+  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, "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");
+], UDataView.prototype, "items");
 __decorateClass([
   property({ type: String })
-], UDataView.prototype, "minItemWidth");
+], UDataView.prototype, "mode");
 __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");
+  property({ type: String })
+], UDataView.prototype, "gridMinWidth");
 __decorateClass([
-  state()
-], UDataView.prototype, "currentLayout");
+  property({ type: String })
+], UDataView.prototype, "gap");
 __decorateClass([
-  state()
-], UDataView.prototype, "loading");
+  property({ attribute: false })
+], UDataView.prototype, "renderCard");
 __decorateClass([
-  state()
-], UDataView.prototype, "imageLoadErrors");
+  property({ attribute: false })
+], UDataView.prototype, "renderCell");
 __decorateClass([
   state()
-], UDataView.prototype, "randomColors");
+], UDataView.prototype, "selectedIndex");
 
 export { UDataView };

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

@@ -5,4 +5,4 @@ declare global {
     }
 }
 export { UDataView };
-export type { DataViewColumnDefinition } from './UDataView.component.js';
+export type { Column, ViewMode } from './UDataView.component.js';