@iyulab/chat-components 0.1.0 → 0.2.0

package/dist/components/buttons/UCopyButton.component.d.ts

@@ -1,4 +1,3 @@
-import { nothing } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 /**
  * 클릭 시 클립보드에 텍스트를 복사하는 버튼입니다. 복사 상태를 표시하기 위해 아이콘이 변경됩니다.
@@ -6,17 +5,13 @@ import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 export declare class UCopyButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 버튼의 모드를 설정합니다. 기본은 'symbol'입니다. */
-    mode: 'badge' | 'symbol';
     /** 클립보드 복사 상태를 나타내는 플래그입니다. */
     isCopied: boolean;
-    /** 복사할 텍스트를 설정합니다. */
-    value?: string;
     /** 클립보드 복사 후 재사용 대기 시간 (ms) */
     delay: number;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    /** 복사할 텍스트를 설정합니다. */
+    value?: string;
+    render(): import('lit-html').TemplateResult<1>;
     /**
      * 클립보드에 텍스트를 복사하는 메서드입니다.
      * 복사 후 재사용 대기 시간이 설정되어 있으면, 일정 시간 후에 복사 가능 상태로 되돌립니다.

package/dist/components/buttons/UCopyButton.component.js

@@ -1,7 +1,8 @@
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { styles } from './UCopyButton.styles.js';
 
@@ -17,7 +18,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UCopyButton extends BaseElement {
   constructor() {
     super(...arguments);
-    this.mode = "symbol";
     this.isCopied = false;
     this.delay = 1e3;
     /**
@@ -27,30 +27,16 @@ class UCopyButton extends BaseElement {
     this.copyToClipboard = async () => {
       if (!this.value) return;
       if (this.isCopied) return;
-      if (navigator.clipboard) {
-        await navigator.clipboard.writeText(this.value);
-      } else {
-        const area = document.createElement("textarea");
-        area.style.position = "fixed";
-        area.style.opacity = "0";
-        area.style.pointerEvents = "none";
-        area.value = this.value;
-        document.body.appendChild(area);
-        area.focus();
-        area.select();
-        try {
-          document.execCommand("copy");
-        } catch (err) {
-          console.error("Failed to copy: ", err);
-        } finally {
-          document.body.removeChild(area);
-        }
-      }
-      if (this.delay > 0) {
+      try {
+        await window.navigator.clipboard.writeText(this.value);
+        if (this.delay <= 0) return;
         this.isCopied = true;
         setTimeout(() => {
           this.isCopied = false;
         }, this.delay);
+      } catch (error) {
+        console.error("Failed to copy text to clipboard:", error);
+        this.isCopied = false;
       }
     };
   }
@@ -60,46 +46,36 @@ class UCopyButton extends BaseElement {
   static {
     this.dependencies = {
       "u-icon": UIcon,
+      "u-button": UButton,
       "u-tooltip": UTooltip
     };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.copyToClipboard);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("click", this.copyToClipboard);
-    super.disconnectedCallback();
-  }
   render() {
-    if (this.mode === "badge") {
-      return html`
-        <u-icon lib="internal" name=${this.isCopied ? "check-lg" : "copy"}></u-icon>
-        <span class="display">${this.isCopied ? "Copied!" : "Copy"}</span>
-      `;
-    } else if (this.mode === "symbol") {
-      return html`
-        <u-icon lib="internal" name=${this.isCopied ? "check-lg" : "copy"}></u-icon>
-        <u-tooltip for="u-icon" distance="6">
-          ${this.isCopied ? "Copied!" : "Copy"}
-        </u-tooltip>
-      `;
-    } else {
-      return nothing;
-    }
+    return html`
+      <u-button part="base" 
+        variant="borderless"
+        ?disabled=${this.isCopied}
+        @click=${this.copyToClipboard}>
+        <u-icon part="icon"
+          lib="internal"
+          name=${this.isCopied ? "check-lg" : "copy"}
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
   }
 }
 __decorateClass([
-  property({ type: String, reflect: true })
-], UCopyButton.prototype, "mode");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
+  state()
 ], UCopyButton.prototype, "isCopied");
-__decorateClass([
-  property({ type: String })
-], UCopyButton.prototype, "value");
 __decorateClass([
   property({ type: Number })
 ], UCopyButton.prototype, "delay");
+__decorateClass([
+  property({ type: String })
+], UCopyButton.prototype, "value");
 
 export { UCopyButton };

package/dist/components/buttons/UCopyButton.styles.js

@@ -1,46 +1,17 @@
 import { css } from 'lit';
 
 const styles = css`
-  :host {
-    position: relative;
-    padding: 8px;
-    border-radius: 8px;
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
-    cursor: pointer;
+  :host(:empty) u-tooltip {
+    display: none;
   }
-  :host(:hover) {
-    background-color: var(--u-neutral-100, #f3f4f6);
-  }
-  :host([isCopied]) {
-    pointer-events: none;
-    background-color: transparent;
-  }
-  :host([mode="symbol"]) {
-    display: inline-flex;
-  }
-  :host([mode="badge"]) {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  u-icon {
-    font-size: inherit;
-  }
-  u-icon[name="copy"] {
-    color: inherit;
-  }
-  u-icon[name="check"] {
-    color: var(--u-green-500);
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
   }
 
-  .display {
-    font-size: inherit;
-    color: inherit;
-    line-height: 1;
+  u-icon[name="check-lg"] {
+    color: var(--u-green-500);
   }
 `;
 

package/dist/components/buttons/UReportButton.component.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 메시지 신고 버튼 컴포넌트입니다.
+ */
+export declare class UReportButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/buttons/UReportButton.component.js

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UReportButton.styles.js';
+
+class UReportButton extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button part="base" 
+        variant="borderless">
+        <u-icon part="icon"
+          lib="internal"
+          name="flag"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+
+export { UReportButton };

package/dist/components/buttons/UReportButton.d.ts

@@ -0,0 +1,7 @@
+import { UReportButton } from './UReportButton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-report-button': UReportButton;
+    }
+}
+export { UReportButton };

package/dist/components/buttons/UReportButton.js

@@ -0,0 +1,5 @@
+import { UReportButton } from './UReportButton.component.js';
+
+UReportButton.define("u-report-button");
+
+export { UReportButton };

package/dist/components/buttons/UReportButton.styles.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+`;
+
+export { styles };

package/dist/components/buttons/URetryButton.component.d.ts

@@ -0,0 +1,11 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 메시지 재시도 버튼 컴포넌트입니다.
+ */
+export declare class URetryButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 재생성 중인지 여부 */
+    loading: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/buttons/URetryButton.component.js

@@ -0,0 +1,53 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './URetryButton.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 URetryButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button part="base" 
+        variant="borderless">
+        <u-icon part="icon"
+          lib="internal"
+          name="arrow-repeat"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], URetryButton.prototype, "loading");
+
+export { URetryButton };

package/dist/components/buttons/URetryButton.d.ts

@@ -0,0 +1,7 @@
+import { URetryButton } from './URetryButton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-retry-button': URetryButton;
+    }
+}
+export { URetryButton };

package/dist/components/buttons/URetryButton.js

@@ -0,0 +1,5 @@
+import { URetryButton } from './URetryButton.component.js';
+
+URetryButton.define("u-retry-button");
+
+export { URetryButton };

package/dist/components/buttons/URetryButton.styles.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+  :host([loading]) u-icon {
+    animation: spin 1s linear infinite;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { styles };

package/dist/components/buttons/UShareButton.component.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 메시지 공유하기 버튼 컴포넌트입니다.
+ */
+export declare class UShareButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/buttons/UShareButton.component.js

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UShareButton.styles.js';
+
+class UShareButton extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button part="base" 
+        variant="borderless">
+        <u-icon part="icon"
+          lib="internal"
+          name="share"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+
+export { UShareButton };

package/dist/components/buttons/UShareButton.d.ts

@@ -0,0 +1,7 @@
+import { UShareButton } from './UShareButton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-share-button': UShareButton;
+    }
+}
+export { UShareButton };

package/dist/components/buttons/UShareButton.js

@@ -0,0 +1,5 @@
+import { UShareButton } from './UShareButton.component.js';
+
+UShareButton.define("u-share-button");
+
+export { UShareButton };

package/dist/components/buttons/UShareButton.styles.d.ts

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

package/dist/components/buttons/UShareButton.styles.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+`;
+
+export { styles };

package/dist/components/buttons/UVoteButton.component.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/** 투표 상태 타입 */
+export type VoteValue = 'none' | 'up' | 'down';
+/**
+ * 투표 버튼 컴포넌트입니다.
+ */
+export declare class UVoteButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 현재 투표 상태 */
+    value: VoteValue;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleUpButtonClick;
+    private handleDownButtonClick;
+}

package/dist/components/buttons/UVoteButton.component.js

@@ -0,0 +1,70 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UVoteButton.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 UVoteButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.value = "none";
+    this.handleUpButtonClick = () => {
+      this.value = this.value === "up" ? "none" : "up";
+      this.emit("u-change", { value: this.value });
+    };
+    this.handleDownButtonClick = () => {
+      this.value = this.value === "down" ? "none" : "down";
+      this.emit("u-change", { value: this.value });
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button class="up-btn" part="up-btn"
+        variant="borderless"
+        @click=${this.handleUpButtonClick}>
+        <u-icon part="icon"
+          lib="internal"
+          name=${this.value === "up" ? "hand-thumbs-up-fill" : "hand-thumbs-up"}
+        ></u-icon>
+      </u-button>
+      <u-button class="down-btn" part="down-btn"
+        variant="borderless"
+        @click=${this.handleDownButtonClick}>
+        <u-icon part="icon"
+          lib="internal"
+          name=${this.value === "down" ? "hand-thumbs-down-fill" : "hand-thumbs-down"}
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], UVoteButton.prototype, "value");
+
+export { UVoteButton };

package/dist/components/buttons/UVoteButton.d.ts

@@ -0,0 +1,8 @@
+import { UVoteButton } from './UVoteButton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-vote-button': UVoteButton;
+    }
+}
+export { UVoteButton };
+export type { VoteValue } from './UVoteButton.component.js';

package/dist/components/buttons/UVoteButton.js

@@ -0,0 +1,5 @@
+import { UVoteButton } from './UVoteButton.component.js';
+
+UVoteButton.define("u-vote-button");
+
+export { UVoteButton };

package/dist/components/buttons/UVoteButton.styles.d.ts

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

package/dist/components/buttons/UVoteButton.styles.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+`;
+
+export { styles };

package/dist/components/loaders/UDotLoader.component.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 점 3개 로더 컴포넌트입니다.
+ */
+export declare class UDotLoader extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/loaders/UDotLoader.component.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { styles } from './UDotLoader.styles.js';
+
+class UDotLoader extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <circle class="d0" cx="4" cy="12" r="3" />
+        <circle class="d1" cx="12" cy="12" r="3" />
+        <circle class="d2" cx="20" cy="12" r="3" />
+      </svg>
+    `;
+  }
+}
+
+export { UDotLoader };

package/dist/components/loaders/UDotLoader.d.ts

@@ -0,0 +1,7 @@
+import { UDotLoader } from './UDotLoader.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-dot-loader': UDotLoader;
+    }
+}
+export { UDotLoader };

package/dist/components/loaders/UDotLoader.js

@@ -0,0 +1,5 @@
+import { UDotLoader } from './UDotLoader.component.js';
+
+UDotLoader.define("u-dot-loader");
+
+export { UDotLoader };

package/dist/components/loaders/UDotLoader.styles.d.ts

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