@iyulab/components 0.1.0

package/dist/components/BaseElement.js

@@ -0,0 +1,49 @@
+import { LitElement as c } from "lit";
+import { styles as i } from "./BaseElement.styles.js";
+class a extends c {
+  static {
+    this.styles = i;
+  }
+  static {
+    this.dependencies = {};
+  }
+  constructor() {
+    super(), Object.entries(this.constructor.dependencies).forEach(([e, t]) => {
+      t.define(e);
+    });
+  }
+  /**
+   * 커스텀 엘리먼트를 정의합니다.
+   * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
+   * @param name - 커스텀 엘리먼트의 이름
+   * @param options - 엘리먼트 정의 옵션
+   */
+  static define(e, t = {}) {
+    if (!customElements.get(e))
+      try {
+        customElements.define(e, this, t);
+      } catch (s) {
+        console.warn(`Failed to register component "${e}":`, s);
+      }
+  }
+  /**
+   * 커스텀 이벤트를 디스패치합니다.
+   * @param name - 이벤트 이름
+   * @param value - 이벤트의 detail에 포함될 데이터
+   * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
+   * @returns 이벤트가 성공적으로 디스패치되었는지 여부
+   */
+  emit(e, t, s) {
+    const n = new CustomEvent(e, {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !1,
+      detail: t,
+      ...s
+    });
+    return this.dispatchEvent(n);
+  }
+}
+export {
+  a as BaseElement
+};

package/dist/components/BaseElement.styles.d.ts

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

package/dist/components/BaseElement.styles.js

@@ -0,0 +1,29 @@
+import { css as r } from "lit";
+const t = r`
+  :host {
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+    color: var(--u-text-color, inherit);
+    font-family: var(--u-font-base, inherit);
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+    overflow-wrap: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .scrollable {
+    scrollbar-width: thin;
+    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+    scrollbar-gutter: stable;
+  }
+`;
+export {
+  t as styles
+};

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,36 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+export type AlertType = "error" | "warning" | "info" | "success" | "notice";
+/**
+ * 사용자에게 메시지를 표시하는 Alert 컴포넌트입니다.
+ * 자동 닫힘 타이머, 접기/펼치기 기능 등을 제공합니다.
+ */
+export declare class Alert extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    private timeoutId?;
+    /** 표시 여부 */
+    open: boolean;
+    /** 상태 (warning, error, info, success, notice) */
+    type: AlertType;
+    /** 타이틀 라벨 */
+    label?: string;
+    /** 본문 내용 */
+    content?: string;
+    /** 본문 최소 행 수 */
+    minRows: number;
+    /** 본문 최대 행 수 */
+    maxRows: number;
+    /** 자동 닫힘 타이머 (밀리초 단위, 0일 경우 자동 닫힘 없음) */
+    duration: number;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** Alert를 표시합니다. */
+    show(): Promise<void>;
+    /** Alert를 숨깁니다. */
+    hide(): Promise<void>;
+    /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
+    private getIcon;
+    /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
+    private updateOpenState;
+}

package/dist/components/alert/Alert.js

@@ -0,0 +1,107 @@
+import { html as p } from "lit";
+import { property as e } from "lit/decorators.js";
+import { BaseElement as c } from "../BaseElement.js";
+import { Icon as h } from "../icon/Icon.js";
+import { styles as m } from "./Alert.styles.js";
+var u = Object.defineProperty, i = (r, t, a, d) => {
+  for (var o = void 0, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (o = l(t, a, o) || o);
+  return o && u(t, a, o), o;
+};
+class s extends c {
+  constructor() {
+    super(...arguments), this.open = !1, this.type = "info", this.minRows = 1, this.maxRows = 3, this.duration = 0;
+  }
+  static {
+    this.styles = [super.styles, m];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": h
+    };
+  }
+  updated(t) {
+    super.updated(t), t.has("minRows") && this.minRows < this.maxRows && this.minRows > 0 && this.style.setProperty("--min-content-rows", `${this.minRows}`), t.has("maxRows") && this.maxRows > this.minRows && this.maxRows > 0 && this.style.setProperty("--max-content-rows", `${this.maxRows}`), t.has("open") && this.updateOpenState(this.open);
+  }
+  render() {
+    return p`
+      <div class="container">
+        <div class="header">
+          <u-icon class="icon" 
+            name=${this.getIcon(this.type)}
+          ></u-icon>
+          <div class="title">
+            ${this.label || this.type.toUpperCase()}
+          </div>
+          <u-icon class="close-btn" 
+            name="x-lg" 
+            @click=${this.hide}
+          ></u-icon>
+        </div>
+        <div class="content scrollable">
+          ${this.content || p`<slot></slot>`}
+        </div>
+        <div class="footer"></div>
+      </div>
+    `;
+  }
+  /** Alert를 표시합니다. */
+  async show() {
+    await this.updateComplete, requestAnimationFrame(() => {
+      this.open = !0;
+    });
+  }
+  /** Alert를 숨깁니다. */
+  async hide() {
+    await this.updateComplete, requestAnimationFrame(() => {
+      this.open = !1;
+    });
+  }
+  /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
+  getIcon(t) {
+    switch (t) {
+      case "error":
+        return "exclamation-circle-fill";
+      case "warning":
+        return "exclamation-triangle-fill";
+      case "info":
+        return "info-circle-fill";
+      case "success":
+        return "check-circle-fill";
+      case "notice":
+        return "bell-fill";
+      default:
+        return "bell-fill";
+    }
+  }
+  /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
+  updateOpenState(t) {
+    t ? (this.duration && this.duration > 0 && (this.timeoutId = window.setTimeout(() => {
+      this.hide();
+    }, this.duration)), this.emit("u-show")) : (clearTimeout(this.timeoutId), this.emit("u-hide"));
+  }
+}
+i([
+  e({ type: Boolean, reflect: !0 })
+], s.prototype, "open");
+i([
+  e({ type: String, reflect: !0 })
+], s.prototype, "type");
+i([
+  e({ type: String })
+], s.prototype, "label");
+i([
+  e({ type: String })
+], s.prototype, "content");
+i([
+  e({ type: Number })
+], s.prototype, "minRows");
+i([
+  e({ type: Number })
+], s.prototype, "maxRows");
+i([
+  e({ type: Number })
+], s.prototype, "duration");
+export {
+  s as Alert
+};

package/dist/components/alert/Alert.styles.d.ts

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

package/dist/components/alert/Alert.styles.js

@@ -0,0 +1,114 @@
+import { css as r } from "lit";
+const e = r`
+  :host {
+    display: block;
+    min-width: 300px;
+    max-width: 500px;
+    
+    background-color: var(--alert-bg-color);
+    border: 1px solid var(--alert-border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--u-shadow-medium), 0 2px 4px var(--u-shadow-weak);
+    
+    opacity: 0;
+    transform: scale(0.8);
+    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+    pointer-events: none;
+
+    --min-content-rows: 1;
+    --max-content-rows: 3;
+    
+    --alert-icon-color: var(--u-neutral-700);
+    --alert-bg-color: var(--u-neutral-100);
+    --alert-border-color: var(--u-neutral-300);
+  }
+  :host([open]) {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+  
+  :host([type="error"]) {
+    --alert-icon-color: var(--u-red-700);
+    --alert-bg-color: var(--u-red-0);
+    --alert-border-color: var(--u-red-100);
+  }
+  :host([type="warning"]) {
+    --alert-icon-color: var(--u-yellow-700);
+    --alert-bg-color: var(--u-yellow-0);
+    --alert-border-color: var(--u-yellow-100);
+  }
+  :host([type="info"]) {
+    --alert-icon-color: var(--u-blue-700);
+    --alert-bg-color: var(--u-blue-0);
+    --alert-border-color: var(--u-blue-100);
+  }
+  :host([type="success"]) {
+    --alert-icon-color: var(--u-green-700);
+    --alert-bg-color: var(--u-green-0);
+    --alert-border-color: var(--u-green-100);
+  }
+  :host([type="notice"]) {
+    --alert-icon-color: var(--u-neutral-700);
+    --alert-bg-color: var(--u-neutral-100);
+    --alert-border-color: var(--u-neutral-300);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px 8px 12px;
+    overflow: hidden;
+  }
+
+  .header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 4px;
+    user-select: none;
+  }
+  .header .icon {
+    flex-shrink: 0;
+    font-size: 20px;
+    color: var(--alert-icon-color);
+    filter: drop-shadow(0 1px 2px var(--u-shadow-weak));
+  }
+  .header .title {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  .header .close-btn {
+    flex-shrink: 0;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  .header .close-btn:hover {
+    color: var(--u-icon-color-hover);
+  }
+  .header .close-btn:active {
+    color: var(--u-icon-color-active);
+    transform: scale(0.9);
+  }
+
+  .content {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--u-soft-text-color);
+    line-height: 1.6;
+    min-height: calc(1.6em * var(--min-content-rows));
+    max-height: calc(1.6em * var(--max-content-rows));
+    overflow-y: auto;
+  }
+
+  .footer {
+    display: none;
+  }
+`;
+export {
+  e as styles
+};

package/dist/components/alert/index.d.ts

@@ -0,0 +1,7 @@
+import { Alert } from './Alert.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-alert': Alert;
+    }
+}
+export { Alert };

package/dist/components/button/Button.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Button 컴포넌트는 클릭 가능한 버튼을 나타내며, 로딩 상태와 툴팁 기능을 지원합니다.
+ * @slot - 버튼 내부에 표시할 콘텐츠를 삽입합니다.
+ * @slot prefix - 버튼의 접두사로 표시할 콘텐츠를 삽입합니다.
+ * @slot suffix - 버튼의 접미사로 표시할 콘텐츠를 삽입합니다.
+ */
+export declare class Button extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
+    disabled: boolean;
+    /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
+    loading: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/button/Button.js

@@ -0,0 +1,45 @@
+import { html as p } from "lit";
+import { property as n } from "lit/decorators.js";
+import { BaseElement as d } from "../BaseElement.js";
+import { Spinner as f } from "../spinner/Spinner.js";
+import { styles as u } from "./Button.styles.js";
+var m = Object.defineProperty, l = (t, r, o, h) => {
+  for (var e = void 0, s = t.length - 1, i; s >= 0; s--)
+    (i = t[s]) && (e = i(r, o, e) || e);
+  return e && m(r, o, e), e;
+};
+class a extends d {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.loading = !1;
+  }
+  static {
+    this.styles = [super.styles, u];
+  }
+  static {
+    this.dependencies = {
+      "u-spinner": f
+    };
+  }
+  render() {
+    return p`
+      <button part="base" ?disabled=${this.disabled || this.loading}>
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </button>
+      
+      <div class="overlay" ?hidden=${!this.loading}>
+        <u-spinner></u-spinner>
+      </div>
+    `;
+  }
+}
+l([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled");
+l([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "loading");
+export {
+  a as Button
+};

package/dist/components/button/Button.styles.d.ts

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

package/dist/components/button/Button.styles.js

@@ -0,0 +1,89 @@
+import { css as o } from "lit";
+const t = o`
+  :host {
+    position: relative;
+    display: inline-flex;
+    
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    padding: 0.5em 1em;
+    background-color: var(--u-bg-color);
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+
+    transition: all 0.2s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host([loading]),
+  :host([disabled]) {
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    color: var(--u-text-color-disabled);
+  }
+  :host(:hover) {
+    color: var(--u-text-color-hover);
+    background-color: var(--u-bg-color-hover);
+    border-color: var(--u-border-color-strong);
+  }
+  :host(:active) {
+    color: var(--u-text-color-active);
+    background-color: var(--u-bg-color-active);
+    transform: translateY(1px);
+  }
+
+  button {
+    all: unset;
+    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  button:focus-visible {
+    outline: 2px solid var(--u-blue-500, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  slot {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  slot[name="prefix"],
+  slot[name="suffix"] {
+    flex: 0 0 auto;
+  }
+  /* 슬롯에 내용이 있을 때만 gap 적용 */
+  slot[name="prefix"]:not(:empty) {
+    margin-right: 0.5em;
+  }
+  slot[name="suffix"]:not(:empty) {
+    margin-left: 0.5em;
+  }
+
+  .overlay {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: inherit;
+    font-size: inherit;
+    border-radius: inherit;
+    background-color: inherit;
+  }
+`;
+export {
+  t as styles
+};

package/dist/components/button/index.d.ts

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

package/dist/components/context-menu/ContextMenu.d.ts

@@ -0,0 +1,48 @@
+import { PropertyValues } from 'lit';
+import { Placement } from '@floating-ui/dom';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * ContextMenu 컴포넌트는 마우스 오른쪽 버튼 클릭으로 표시되는 컨텍스트 메뉴입니다.
+ * MenuItem 컴포넌트를 자식으로 포함하여 메뉴를 구성합니다.
+ */
+export declare class ContextMenu extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 마우스 클릭 위치 */
+    private mouseX;
+    private mouseY;
+    /** 컨텍스트 메뉴가 연결될 대상 엘리먼트입니다. 지정하지 않으면 부모 엘리먼트가 대상이 됩니다. */
+    trigger?: HTMLElement;
+    /** 현재 메뉴가 열려있는지 여부입니다. */
+    open: boolean;
+    /** 'fixed' 위치에서 포지션을 계산할지 여부를 설정합니다. 기본값은 true입니다. */
+    hoist: boolean;
+    /** 메뉴가 나타날 위치를 설정합니다. */
+    placement?: Placement;
+    /** 메뉴의 위치에서 마우스 포인터까지의 거리를 픽셀단위로 설정합니다. 기본값은 2입니다. */
+    distance: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 컨텍스트 메뉴를 표시합니다. */
+    show: (x?: number, y?: number) => Promise<void>;
+    /** 컨텍스트 메뉴를 숨깁니다. */
+    hide: () => Promise<void>;
+    /**
+     * 메뉴가 나타날 위치에 따라 transform-origin 값을 반환합니다.
+     */
+    private getTransformOrigin;
+    /** 대상 엘리먼트에 컨텍스트 메뉴 이벤트를 바인딩 합니다. */
+    private attachTrigger;
+    /** 대상 엘리먼트에 바인딩된 컨텍스트 메뉴 이벤트를 제거합니다. */
+    private detachTrigger;
+    /** 컨텍스트 메뉴 이벤트를 처리합니다. */
+    private handleContextMenu;
+    /** 문서 클릭 이벤트를 처리합니다. */
+    private handleDocumentClick;
+    /** 문서 컨텍스트 메뉴 이벤트를 처리합니다. */
+    private handleDocumentContextMenu;
+    /** 슬롯 변경 이벤트를 처리합니다. */
+    private handleSlotChange;
+}