@iyulab/chat-components 0.3.0 → 0.5.0

package/dist/components/views/UChartView.d.ts

@@ -0,0 +1,39 @@
+import { nothing, PropertyValues } from 'lit';
+import { ChartType, ChartData, ChartOptions } from 'chart.js/auto';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * Chart.js를 사용하여 다양한 차트를 렌더링하는 뷰 컴포넌트입니다.
+ */
+export declare class UChartView extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 차트 유형 (bar, line, pie 등) */
+    type?: ChartType;
+    /** 차트 데이터 */
+    data?: ChartData;
+    /** 차트 옵션 */
+    options?: ChartOptions;
+    private canvas?;
+    private viewport?;
+    /** 차트 생성 에러 메시지 */
+    private error;
+    private chartjs;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    /** Chart.js로 차트 생성 */
+    private createChart;
+    /** 기존 차트 인스턴스 제거 */
+    private destroyChart;
+    /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
+    private applyTheme;
+    private handleDownloadPNG;
+    private handleDownloadJSON;
+    private handleFullscreen;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-chart-view": UChartView;
+    }
+}

package/dist/components/views/UChartView.js

@@ -0,0 +1,167 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UChartView.styles.js";
+import { html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/views/UChartView.ts
+var _ref, _ref2;
+/** chart.js lazy load */
+var ChartCtor;
+async function loadChartJS() {
+	if (!ChartCtor) ChartCtor = (await import("chart.js/auto")).Chart;
+	return ChartCtor;
+}
+var UChartView = class UChartView extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.error = null;
+		this.chartjs = null;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.observer = new MutationObserver(() => {
+			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 ([
+			"data",
+			"type",
+			"options"
+		].some((k) => changedProperties.has(k))) 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="bootstrap" name="download"></u-icon>
+          </u-button>
+          <u-button title="JSON Download" @click=${this.handleDownloadJSON}>
+            JSON
+            <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
+          </u-button>
+          <u-button title="Full Screen" @click=${this.handleFullscreen}>
+            <u-icon lib="bootstrap" 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="bootstrap" name="exclamation-triangle-fill"></u-icon>
+          <span>${this.error}</span>
+        </div>
+      </div>
+    `;
+	}
+	/** Chart.js로 차트 생성 */
+	async createChart() {
+		if (!this.canvas) return;
+		if (!this.type || !this.data) return;
+		this.destroyChart();
+		this.error = null;
+		let Chart;
+		try {
+			Chart = await loadChartJS();
+		} catch {
+			this.error = "chart.js를 로드할 수 없습니다. chart.js 패키지가 설치되어 있는지 확인하세요.";
+			return;
+		}
+		const ctx = this.canvas.getContext("2d");
+		if (!ctx) {
+			this.error = "Canvas 2D context를 가져올 수 없습니다.";
+			return;
+		}
+		try {
+			this.applyTheme(Chart);
+			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(Chart) {
+		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-${Date.now()}.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-${Date.now()}.json`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+	handleFullscreen() {
+		const target = this.viewport ?? this;
+		if (document.fullscreenElement) document.exitFullscreen();
+		else target.requestFullscreen?.();
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UChartView.prototype, "type", void 0);
+__decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UChartView.prototype, "data", void 0);
+__decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UChartView.prototype, "options", void 0);
+__decorate([query("canvas"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLCanvasElement !== "undefined" && HTMLCanvasElement) === "function" ? _ref : Object)], UChartView.prototype, "canvas", void 0);
+__decorate([query(".viewport"), __decorateMetadata("design:type", typeof (_ref2 = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref2 : Object)], UChartView.prototype, "viewport", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UChartView.prototype, "error", void 0);
+UChartView = __decorate([customElement("u-chart-view")], UChartView);
+//#endregion
+export { UChartView };

package/dist/components/views/UChartView.styles.js

@@ -0,0 +1,86 @@
+import { css } from "lit";
+//#region src/components/views/UChartView.styles.ts
+var 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;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/views/UImagesView.d.ts

@@ -0,0 +1,33 @@
+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 UImagesView extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 이미지 슬라이드 배열 */
+    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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-images-view": UImagesView;
+    }
+}

package/dist/components/views/UImagesView.js

@@ -0,0 +1,144 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UImagesView.styles.js";
+import { html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { repeat } from "lit/directives/repeat.js";
+import "@iyulab/components/dist/components/carousel/UCarousel.js";
+//#region src/components/views/UImagesView.ts
+var UImagesView = class UImagesView extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		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];
+	}
+	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>
+    `;
+	}
+};
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UImagesView.prototype, "items", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UImagesView.prototype, "index", void 0);
+UImagesView = __decorate([customElement("u-images-view")], UImagesView);
+//#endregion
+export { UImagesView };

package/dist/components/views/UImagesView.styles.d.ts

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

package/dist/components/views/UImagesView.styles.js

@@ -0,0 +1,219 @@
+import { css } from "lit";
+//#region src/components/views/UImagesView.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    margin: 0.75em 0;
+  }
+
+  .slide {
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+    cursor: pointer;
+    aspect-ratio: 4 / 3;
+  }
+  .slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+    transition: transform 0.3s ease, filter 0.3s ease;
+  }
+  .slide:hover img {
+    transform: scale(1.05);
+    filter: brightness(0.92);
+  }
+
+  .caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px 10px 8px;
+    color: white;
+    font-size: 0.8em;
+    line-height: 1.3;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
+  }
+
+  /* ─── 라이트박스 UI ─── */
+
+  /* 루트 오버레이: flex column 전체 화면 */
+  .lb-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.92);
+    animation: overlay-fadeIn 0.2s ease;
+  }
+
+  /* 상단 헤더: 카운터(중앙) + 닫기(우측) */
+  .lb-header {
+    height: 56px;
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .lb-counter {
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.875em;
+    font-variant-numeric: tabular-nums;
+    background: rgba(0, 0, 0, 0.35);
+    padding: 3px 12px;
+    border-radius: 20px;
+    backdrop-filter: blur(4px);
+  }
+
+  .lb-close {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 12px;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .lb-close:hover  { 
+    background: rgba(255, 255, 255, 0.18); 
+  }
+  .lb-close:active { 
+    background: rgba(255, 255, 255, 0.28); 
+  }
+
+  .lb-close u-icon {
+    color: white;
+    font-size: 1.25em;
+  }
+
+  /* 중앙 본문: 뷰포트 + 이전/다음 버튼(absolute 오버레이) */
+  .lb-body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .lb-viewport {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .lb-track {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
+    will-change: transform;
+  }
+
+  .lb-slide {
+    flex: 0 0 70vw;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.5;
+    transform: scale(0.9);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+  }
+  .lb-slide[active] {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .lb-slide img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 6px;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  .lb-nav {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    width: 80px;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.25s;
+  }
+  .lb-nav.prev {
+    left: 0;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent);
+  }
+  .lb-nav.next {
+    right: 0;
+    background: linear-gradient(to left, rgba(0, 0, 0, 0.28), transparent);
+  }
+  .lb-nav.prev:hover {
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
+  }
+  .lb-nav.next:hover {
+    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
+  }
+
+  .lb-nav u-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5em;
+    padding: 12px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15);
+    transition: background 0.2s, transform 0.15s;
+  }
+  .lb-nav:hover u-icon {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  /* 하단 푸터: 캡션 */
+  .lb-footer {
+    position: relative;
+    flex-shrink: 0;
+    padding: 24px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
+  }
+
+  .lb-caption {
+    margin: 0;
+    color: white;
+    font-size: 1.05em;
+    line-height: 1.5;
+    text-align: center;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  @keyframes overlay-fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+`;
+//#endregion
+export { styles };