@iyulab/chat-components 0.3.0 → 0.4.0

package/dist/components/widgets/UChartWidget.component.js

@@ -0,0 +1,180 @@
+import { nothing, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { Chart } from 'chart.js/auto';
+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 './UChartWidget.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 UChartWidget extends UElement {
+  constructor() {
+    super(...arguments);
+    this.error = null;
+    this.chartjs = null;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observer = new MutationObserver(() => {
+      this.applyTheme();
+      this.createChart();
+    });
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["theme"]
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    this.destroyChart();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("data") || changedProperties.has("type") || changedProperties.has("options")) {
+      this.createChart();
+    }
+  }
+  render() {
+    if (!this.data) return nothing;
+    return html`
+      <div class="toolbar">
+        <div class="toolbar-left"></div>
+        <div class="toolbar-right">
+          <u-button title="PNG Download" @click=${this.handleDownloadPNG}>
+            PNG
+            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
+          </u-button>
+          <u-button title="JSON Download" @click=${this.handleDownloadJSON}>
+            JSON
+            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
+          </u-button>
+          <u-button title="Full Screen" @click=${this.handleFullscreen}>
+            <u-icon lib="internal" name="box-arrow-up-right"></u-icon>
+          </u-button>
+        </div>
+      </div>
+      <div class="viewport">
+        <canvas></canvas>
+        <div class="error-overlay" ?hidden=${!this.error}>
+          <u-icon lib="internal" name="exclamation-triangle-fill"></u-icon>
+          <span>${this.error}</span>
+        </div>
+      </div>
+    `;
+  }
+  /** Chart.js로 차트 생성 */
+  createChart() {
+    if (!this.canvas) return;
+    if (!this.type || !this.data) return;
+    this.destroyChart();
+    this.error = null;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      this.error = "Canvas 2D context를 가져올 수 없습니다.";
+      return;
+    }
+    try {
+      this.applyTheme();
+      this.chartjs = new Chart(ctx, {
+        type: this.type,
+        data: this.data,
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          ...this.options
+        }
+      });
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+    }
+  }
+  /** 기존 차트 인스턴스 제거 */
+  destroyChart() {
+    if (this.chartjs) {
+      this.chartjs.destroy();
+      this.chartjs = null;
+    }
+  }
+  /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
+  applyTheme() {
+    const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
+    const textColor = css("--u-txt-color");
+    const weakColor = css("--u-txt-color-weak");
+    const borderColor = css("--u-border-color");
+    const bgColor = css("--u-bg-color");
+    Chart.defaults.color = textColor;
+    Chart.defaults.borderColor = borderColor;
+    Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
+    Chart.defaults.plugins.tooltip.titleColor = textColor;
+    Chart.defaults.plugins.tooltip.bodyColor = weakColor;
+    Chart.defaults.plugins.tooltip.borderColor = borderColor;
+    Chart.defaults.plugins.tooltip.borderWidth = 1;
+    Chart.defaults.scale.ticks.color = weakColor;
+    Chart.defaults.scale.grid.color = borderColor;
+  }
+  handleDownloadPNG() {
+    if (!this.chartjs) return;
+    const url = this.chartjs.toBase64Image("image/png", 1);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "chart-image.png";
+    a.click();
+  }
+  handleDownloadJSON() {
+    if (!this.data) return;
+    const json = JSON.stringify(this.data, null, 2);
+    const blob = new Blob([json], { type: "application/json;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "chart-data.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  handleFullscreen() {
+    const target = this.viewport ?? this;
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      target.requestFullscreen?.();
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], UChartWidget.prototype, "type");
+__decorateClass([
+  property({ type: Object })
+], UChartWidget.prototype, "data");
+__decorateClass([
+  property({ type: Object })
+], UChartWidget.prototype, "options");
+__decorateClass([
+  query("canvas")
+], UChartWidget.prototype, "canvas");
+__decorateClass([
+  query(".viewport")
+], UChartWidget.prototype, "viewport");
+__decorateClass([
+  state()
+], UChartWidget.prototype, "error");
+
+export { UChartWidget };

package/dist/components/widgets/UChartWidget.d.ts

@@ -0,0 +1,7 @@
+import { UChartWidget } from './UChartWidget.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-chart-widget": UChartWidget;
+    }
+}
+export { UChartWidget };

package/dist/components/widgets/UChartWidget.js

@@ -0,0 +1,5 @@
+import { UChartWidget } from './UChartWidget.component.js';
+
+UChartWidget.define("u-chart-widget");
+
+export { UChartWidget };

package/dist/components/widgets/UChartWidget.styles.d.ts

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

package/dist/components/widgets/UChartWidget.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    margin: 0.75em auto;
+    display: block;
+    width: 100%;
+    background: var(--u-bg-color);
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background-color: var(--u-neutral-100);
+    border-bottom: 1px solid var(--u-border-color);
+    gap: 8px;
+  }
+
+  .toolbar-left {
+    flex: 1;
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .toolbar-right u-button {
+    font-size: 12px;
+  }
+  .toolbar-right u-button[title="Full Screen"] {
+    font-size: 15px;
+  }
+
+  .viewport {
+    position: relative;
+    padding: 1em;
+  }
+
+  .viewport:fullscreen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--u-bg-color);
+    padding: 2em;
+  }
+  .viewport:fullscreen canvas {
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+
+  canvas {
+    width: 100% !important;
+    min-height: 60px;
+  }
+
+  .error-overlay {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    background: var(--u-red-0);
+    border: 1px solid var(--u-red-200);
+    border-radius: 6px;
+    color: var(--u-red-800);
+    font-size: 12px;
+    pointer-events: none;
+  }
+
+  .error-overlay u-icon {
+    color: var(--u-red-600);
+    flex-shrink: 0;
+  }
+`;
+
+export { styles };

package/dist/components/widgets/UImagesWidget.component.d.ts

@@ -0,0 +1,30 @@
+import { nothing } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+export interface ImageSlide {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+/**
+ * 이미지 갤러리 위젯 컴포넌트
+ * u-carousel 기반 가로 슬라이드 + 슬라이딩 라이트박스
+ */
+export declare class UImagesWidget extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 이미지 슬라이드 배열 */
+    items: ImageSlide[];
+    /** 라이트박스에서 현재 열려있는 이미지 인덱스, null이면 라이트박스 닫힘 */
+    private index;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    private renderLightbox;
+    open: (i: number) => void;
+    close: () => void;
+    prev: () => void;
+    next: () => void;
+    private handlePrevClick;
+    private handleNextClick;
+    private handleKeyDown;
+}

package/dist/components/widgets/UImagesWidget.component.js

@@ -0,0 +1,164 @@
+import { nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { UCarousel } from '@iyulab/components/dist/components/carousel/UCarousel.component.js';
+import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { styles } from './UImagesWidget.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 UImagesWidget extends UElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.index = null;
+    this.open = (i) => {
+      this.index = i;
+    };
+    this.close = () => {
+      this.index = null;
+    };
+    this.prev = () => {
+      if (this.index !== null && this.index > 0) {
+        this.index--;
+      }
+    };
+    this.next = () => {
+      if (this.index !== null && this.index < this.items.length - 1) {
+        this.index++;
+      }
+    };
+    this.handlePrevClick = (e) => {
+      e.stopPropagation();
+      this.prev();
+    };
+    this.handleNextClick = (e) => {
+      e.stopPropagation();
+      this.next();
+    };
+    this.handleKeyDown = (e) => {
+      if (this.index === null) return;
+      if (e.key === "Escape") this.close();
+      else if (e.key === "ArrowLeft") this.prev();
+      else if (e.key === "ArrowRight") this.next();
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-carousel": UCarousel,
+      "u-icon": UIcon
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    super.disconnectedCallback();
+  }
+  render() {
+    if (!this.items?.length) return nothing;
+    const count = this.items.length;
+    return html`
+      <u-carousel
+        .loop=${false}
+        .navigation=${false}
+        .pagination=${true}
+        .draggable=${true}
+        .slidesPerView=${Math.min(count, 3)}
+        .gap=${8}
+      >
+        ${repeat(this.items, (item, i) => html`
+          <div class="slide" 
+            @click=${() => this.open(i)}>
+            <img 
+              src=${item.src} 
+              alt=${item.alt || ""} 
+              loading="lazy" 
+            />
+            <div class="caption"
+              ?hidden=${!item.caption}>
+              ${item.caption}
+            </div>
+          </div>
+        `)}
+      </u-carousel>
+
+      ${this.renderLightbox()}
+    `;
+  }
+  renderLightbox() {
+    const idx = this.index;
+    if (idx === null) return nothing;
+    if (idx < 0 || idx >= this.items.length) return nothing;
+    const item = this.items[idx];
+    if (!item) return nothing;
+    const total = this.items.length;
+    const translateX = `calc(15vw - ${idx} * (70vw + 16px))`;
+    return html`
+      <div class="lb-overlay">
+
+        <!-- 상단: 카운터(중앙) + 닫기 버튼(우측) -->
+        <header class="lb-header">
+          <div class="lb-counter" ?hidden=${total <= 1}>
+            ${idx + 1} / ${total}
+          </div>
+          <button class="lb-close" @click=${this.close}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </button>
+        </header>
+
+        <!-- 중앙: 뷰포트 + 이전/다음 버튼(absolute 오버레이) -->
+        <div class="lb-body">
+          <div class="lb-viewport">
+            <div class="lb-track" style="transform:translateX(${translateX})">
+              ${repeat(this.items, (img, i) => html`
+                <div class="lb-slide" ?active=${i === idx}>
+                  <img src=${img.src} alt=${img.alt || ""} />
+                </div>
+              `)}
+            </div>
+          </div>
+
+          <button class="lb-nav prev"
+            ?hidden=${idx <= 0}
+            @click=${this.handlePrevClick}>
+            <u-icon lib="internal" name="chevron-left"></u-icon>
+          </button>
+
+          <button class="lb-nav next"
+            ?hidden=${idx >= total - 1}
+            @click=${this.handleNextClick}>
+            <u-icon lib="internal" name="chevron-right"></u-icon>
+          </button>
+        </div>
+
+        <!-- 하단: 캡션 -->
+        <footer class="lb-footer" ?hidden=${!item.caption}>
+          <p class="lb-caption">${item.caption}</p>
+        </footer>
+
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], UImagesWidget.prototype, "items");
+__decorateClass([
+  state()
+], UImagesWidget.prototype, "index");
+
+export { UImagesWidget };

package/dist/components/widgets/UImagesWidget.d.ts

@@ -0,0 +1,7 @@
+import { UImagesWidget } from './UImagesWidget.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-images-widget": UImagesWidget;
+    }
+}
+export { UImagesWidget };

package/dist/components/widgets/UImagesWidget.js

@@ -0,0 +1,5 @@
+import { UImagesWidget } from './UImagesWidget.component.js';
+
+UImagesWidget.define("u-images-widget");
+
+export { UImagesWidget };

package/dist/components/widgets/UImagesWidget.styles.d.ts

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