@iyulab/components 0.1.0

package/dist/components/context-menu/ContextMenu.js

@@ -0,0 +1,142 @@
+import { html as l } from "lit";
+import { property as n } from "lit/decorators.js";
+import { offset as m, shift as u, flip as d, autoPlacement as p, computePosition as g } from "@floating-ui/dom";
+import { getParentElement as f } from "../../internals/node-helpers.js";
+import { BaseElement as v } from "../BaseElement.js";
+import { MenuItem as C } from "../menu-item/MenuItem.js";
+import { styles as y } from "./ContextMenu.styles.js";
+var b = Object.defineProperty, o = (h, t, s, a) => {
+  for (var e = void 0, i = h.length - 1, c; i >= 0; i--)
+    (c = h[i]) && (e = c(t, s, e) || e);
+  return e && b(t, s, e), e;
+};
+class r extends v {
+  constructor() {
+    super(...arguments), this.mouseX = 0, this.mouseY = 0, this.open = !1, this.hoist = !0, this.distance = 2, this.show = async (t, s) => {
+      t !== void 0 && (this.mouseX = t), s !== void 0 && (this.mouseY = s), await this.updateComplete;
+      const a = {
+        getBoundingClientRect: () => ({
+          width: 0,
+          height: 0,
+          x: this.mouseX,
+          y: this.mouseY,
+          top: this.mouseY,
+          left: this.mouseX,
+          right: this.mouseX,
+          bottom: this.mouseY
+        })
+      }, e = [
+        m({ mainAxis: this.distance }),
+        u({ padding: 8 }),
+        d()
+      ];
+      this.placement || e.push(p({ allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"] }));
+      const i = await g(a, this, {
+        placement: this.placement || "bottom-start",
+        middleware: e,
+        strategy: this.hoist ? "fixed" : "absolute"
+      });
+      Object.assign(this.style, {
+        left: `${i.x}px`,
+        top: `${i.y}px`,
+        transformOrigin: this.getTransformOrigin(i.placement)
+      }), await this.updateComplete, requestAnimationFrame(() => {
+        this.open = !0, this.emit("u-show");
+      });
+    }, this.hide = async () => {
+      await this.updateComplete, requestAnimationFrame(() => {
+        this.open = !1, this.emit("u-hide");
+      });
+    }, this.handleContextMenu = (t) => {
+      t.preventDefault(), t.stopPropagation(), this.show(t.clientX, t.clientY);
+    }, this.handleDocumentClick = (t) => {
+      this.open && !this.contains(t.target) && this.hide();
+    }, this.handleDocumentContextMenu = (t) => {
+      this.open && !this.trigger?.contains(t.target) && this.hide();
+    }, this.handleSlotChange = () => {
+      this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 })?.forEach((a) => {
+        a.addEventListener("u-select", () => {
+          this.hide();
+        });
+      });
+    };
+  }
+  static {
+    this.styles = [super.styles, y];
+  }
+  static {
+    this.dependencies = {
+      "u-menu-item": C
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.trigger ||= f(this), this.setAttribute("role", "menu");
+  }
+  disconnectedCallback() {
+    this.detachTrigger(this.trigger), super.disconnectedCallback();
+  }
+  updated(t) {
+    if (super.updated(t), t.has("trigger") && this.trigger) {
+      const s = t.get("trigger");
+      this.detachTrigger(s), this.attachTrigger(this.trigger);
+    }
+  }
+  render() {
+    return l`
+      <div class="container">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  /**
+   * 메뉴가 나타날 위치에 따라 transform-origin 값을 반환합니다.
+   */
+  getTransformOrigin(t) {
+    switch (t) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        return "center bottom";
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        return "center top";
+      case "left":
+      case "left-start":
+      case "left-end":
+        return "right center";
+      case "right":
+      case "right-start":
+      case "right-end":
+        return "left center";
+      default:
+        return "top left";
+    }
+  }
+  /** 대상 엘리먼트에 컨텍스트 메뉴 이벤트를 바인딩 합니다. */
+  attachTrigger(t) {
+    t && (t.addEventListener("contextmenu", this.handleContextMenu), document.addEventListener("click", this.handleDocumentClick), document.addEventListener("contextmenu", this.handleDocumentContextMenu));
+  }
+  /** 대상 엘리먼트에 바인딩된 컨텍스트 메뉴 이벤트를 제거합니다. */
+  detachTrigger(t) {
+    t && (t.removeEventListener("contextmenu", this.handleContextMenu), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("contextmenu", this.handleDocumentContextMenu));
+  }
+}
+o([
+  n({ attribute: !1 })
+], r.prototype, "trigger");
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "open");
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "hoist");
+o([
+  n({ type: String })
+], r.prototype, "placement");
+o([
+  n({ type: Number })
+], r.prototype, "distance");
+export {
+  r as ContextMenu
+};

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

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

package/dist/components/context-menu/ContextMenu.styles.js

@@ -0,0 +1,40 @@
+import { css as o } from "lit";
+const e = o`
+  :host {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    display: block;
+    width: max-content;
+    min-width: 180px;
+    
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.95);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+  :host([open]) {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+  :host([hoist]) {
+    position: fixed;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    border: 1px solid var(--u-border-color, #ddd);
+    border-radius: 8px;
+    background-color: var(--u-bg-color, #fff);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+  }
+`;
+export {
+  e as styles
+};

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

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

package/dist/components/copy-button/CopyButton.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * 복사 버튼 컴포넌트입니다.
+ */
+export declare class CopyButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 버튼의 테두리 유무를 설정합니다. 기본값은 true로, 테두리가 없습니다. */
+    borderless: boolean;
+    /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
+    disabled: boolean;
+    /** 버튼의 복사 상태를 설정합니다. 복사가 완료되면 true로 변경됩니다. */
+    copied: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/copy-button/CopyButton.styles.d.ts

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

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

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

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Dialog 컴포넌트는 모달 대화상자를 제공합니다.
+ * 오버레이와 함께 화면 중앙에 표시되며, 헤더, 본문, 푸터 영역을 슬롯으로 제공합니다.
+ */
+export declare class Dialog extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    overlayEl: HTMLDivElement;
+    /** 다이얼로그가 열려있는지 여부 */
+    open: boolean;
+    /** 오버레이 클릭 시 닫기 활성화 여부 */
+    closeOnOverlayClick: boolean;
+    /** ESC 키로 닫기 활성화 여부 */
+    closeOnEscape: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 다이얼로그를 표시합니다 */
+    show: () => Promise<void>;
+    /** 다이얼로그를 숨깁니다 */
+    hide: () => Promise<void>;
+    /** 오버레이 클릭 핸들러 */
+    private handleOverlayClick;
+    /** 키보드 이벤트 핸들러 */
+    private handleKeyDown;
+    private updateOpenState;
+}

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,66 @@
+import { html as p } from "lit";
+import { query as d, property as a } from "lit/decorators.js";
+import { BaseElement as h } from "../BaseElement.js";
+import { styles as c } from "./Dialog.styles.js";
+var y = Object.defineProperty, s = (i, e, n, u) => {
+  for (var t = void 0, l = i.length - 1, r; l >= 0; l--)
+    (r = i[l]) && (t = r(e, n, t) || t);
+  return t && y(e, n, t), t;
+};
+class o extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.closeOnOverlayClick = !0, this.closeOnEscape = !0, this.show = async () => {
+      this.open = !0, await this.updateComplete;
+    }, this.hide = async () => {
+      await this.updateComplete, this.open = !1;
+    }, this.handleOverlayClick = (e) => {
+      this.closeOnOverlayClick && e.target === this.overlayEl && this.hide();
+    }, this.handleKeyDown = (e) => {
+      this.closeOnEscape && e.key === "Escape" && this.open && (e.preventDefault(), this.hide());
+    };
+  }
+  static {
+    this.styles = [super.styles, c];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && this.updateOpenState(this.open);
+  }
+  render() {
+    return p`
+      <div class="overlay" part="overlay"
+        ?hidden=${!this.open}
+        @click=${this.handleOverlayClick}>
+        <div class="panel" part="panel">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  updateOpenState(e) {
+    e ? (document.body.style.overflow = "hidden", this.emit("u-show")) : (document.body.style.overflow = "", this.emit("u-hide"));
+  }
+}
+s([
+  d(".overlay")
+], o.prototype, "overlayEl");
+s([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+s([
+  a({ type: Boolean })
+], o.prototype, "closeOnOverlayClick");
+s([
+  a({ type: Boolean })
+], o.prototype, "closeOnEscape");
+export {
+  o as Dialog
+};

package/dist/components/dialog/Dialog.styles.d.ts

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

package/dist/components/dialog/Dialog.styles.js

@@ -0,0 +1,32 @@
+import { css as o } from "lit";
+const r = o`
+  :host {
+    display: inline-block;
+  }
+
+  .overlay {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--u-overlay-bg-color);
+  }
+
+  .panel {
+    display: block;
+    background: var(--u-panel-bg-color);
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+    max-width: 90vw;
+    max-height: 90vh;
+    overflow: hidden;
+  }
+`;
+export {
+  r as styles
+};

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

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

package/dist/components/form/Form.d.ts

@@ -0,0 +1,22 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Form 컴포넌트는 여러 입력 요소를 그룹화하고 관리하는 폼 컨테이너입니다.
+ * 폼 내의 입력 요소들의 값 변경을 감지하고, 포함 및 제외 규칙에 따라 폼 컨텍스트에 데이터를 자동으로 업데이트합니다.
+ */
+export declare class Form extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 포함할 입력 요소의 name 속성 목록입니다. */
+    includes: string[];
+    /** 제외할 입력 요소의 name 속성 목록입니다. */
+    excludes: string[];
+    /** 폼의 컨텍스트 데이터를 설정합니다. */
+    context?: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 폼 내의 모든 입력 요소를 검증합니다. */
+    validate(): boolean;
+    /** 입력 요소의 변경 이벤트를 처리합니다. */
+    private handleChange;
+}

package/dist/components/form/Form.js

@@ -0,0 +1,53 @@
+import { html as u } from "lit";
+import { property as i } from "lit/decorators.js";
+import { arrayAttributeConverter as d } from "../../internals/attribute-converters.js";
+import { BaseElement as p } from "../BaseElement.js";
+import { Input as h } from "../input/Input.js";
+import { styles as f } from "./Form.styles.js";
+var m = Object.defineProperty, a = (t, n, r, s) => {
+  for (var e = void 0, o = t.length - 1, c; o >= 0; o--)
+    (c = t[o]) && (e = c(n, r, e) || e);
+  return e && m(n, r, e), e;
+};
+class l extends p {
+  constructor() {
+    super(...arguments), this.includes = [], this.excludes = [], this.handleChange = (n) => {
+      const r = n.target, s = r.name, e = r.value;
+      s && this.includes.includes(s) && (this.excludes.includes(s) || this.context && typeof this.context == "object" && (this.context[s] = e));
+    };
+  }
+  static {
+    this.styles = [super.styles, f];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("change", this.handleChange);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("change", this.handleChange), super.disconnectedCallback();
+  }
+  render() {
+    return u`
+      <slot></slot>
+    `;
+  }
+  /** 폼 내의 모든 입력 요소를 검증합니다. */
+  validate() {
+    const r = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).filter((e) => e instanceof h) || [];
+    return Array.from(r).every((e) => e.validate());
+  }
+}
+a([
+  i({ type: Array, converter: d((t) => t) })
+], l.prototype, "includes");
+a([
+  i({ type: Array, converter: d((t) => t) })
+], l.prototype, "excludes");
+a([
+  i({ type: Object, attribute: !1 })
+], l.prototype, "context");
+export {
+  l as Form
+};

package/dist/components/form/Form.styles.d.ts

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

package/dist/components/form/Form.styles.js

@@ -0,0 +1,18 @@
+import { css as t } from "lit";
+const e = t`
+  :host {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    font-size: 14px;
+  }
+
+  :host * {
+    width: 100%;
+  }
+`;
+export {
+  e as styles
+};

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

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

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,35 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * 아이콘 컴포넌트입니다. SVG 아이콘을 이름으로 불러와서 렌더링합니다.
+ */
+export declare class Icon extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /**
+     * 아이콘을 외부에서 불러올 때 사용되는 기본 경로를 설정합니다.
+     * @default '/assets/icons/'
+     */
+    static remoteBaseUrl: string;
+    /**
+     * 아이콘을 외부에서 로드할때 사용하는 설정입니다.
+     * @see {@link Icon.remoteBaseUrl}에서 외부 기본 경로를 설정할 수 있습니다.
+     * @default false
+     */
+    remote: boolean;
+    /**
+     * 사용할 아이콘의 이름을 지정합니다.
+     * @description 외부에서 불러오는 SVG 아이콘인 경우, 이름은 파일명(확장자 제외)이어야 합니다.
+     */
+    name?: string;
+    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/until.js').UntilDirective>;
+    /**
+     * 아이콘의 HTML 콘텐츠를 가져옵니다.
+     * 외부 아이콘 경로를 사용하거나, 내부 레지스트리에서 아이콘을 찾습니다.
+     * @param name 아이콘 이름
+     */
+    private load;
+    /**
+     * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
+     */
+    private validate;
+}

package/dist/components/icon/Icon.js

@@ -0,0 +1,63 @@
+import { nothing as n } from "lit";
+import { property as l } from "lit/decorators.js";
+import { unsafeHTML as c } from "lit/directives/unsafe-html.js";
+import { until as u } from "lit/directives/until.js";
+import { BaseElement as d } from "../BaseElement.js";
+import { icons as h } from "../../internals/icons.js";
+import { styles as v } from "./Icon.styles.js";
+var y = Object.defineProperty, p = (m, e, s, r) => {
+  for (var t = void 0, i = m.length - 1, f; i >= 0; i--)
+    (f = m[i]) && (t = f(e, s, t) || t);
+  return t && y(e, s, t), t;
+};
+const a = class o extends d {
+  constructor() {
+    super(...arguments), this.remote = !1;
+  }
+  static {
+    this.styles = [super.styles, v];
+  }
+  static {
+    this.dependencies = {};
+  }
+  static {
+    this.remoteBaseUrl = "/assets/icons/";
+  }
+  render() {
+    return this.name ? u(this.load(this.name).then((e) => this.validate(e) ? c(e) : n), n) : n;
+  }
+  /**
+   * 아이콘의 HTML 콘텐츠를 가져옵니다.
+   * 외부 아이콘 경로를 사용하거나, 내부 레지스트리에서 아이콘을 찾습니다.
+   * @param name 아이콘 이름
+   */
+  async load(e) {
+    if (this.remote) {
+      const s = o.remoteBaseUrl.endsWith("/") ? `${o.remoteBaseUrl}${e}.svg` : `${o.remoteBaseUrl}/${e}.svg`;
+      try {
+        const r = await fetch(s);
+        return r.ok ? (await r.text())?.trim() : void 0;
+      } catch (r) {
+        console.error(r);
+        return;
+      }
+    } else
+      return h.get(e)?.trim();
+  }
+  /**
+   * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
+   */
+  validate(e) {
+    return !(!e || !e.endsWith("</svg>"));
+  }
+};
+p([
+  l({ type: Boolean })
+], a.prototype, "remote");
+p([
+  l({ type: String })
+], a.prototype, "name");
+let w = a;
+export {
+  w as Icon
+};

package/dist/components/icon/Icon.styles.d.ts

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

package/dist/components/icon/Icon.styles.js

@@ -0,0 +1,17 @@
+import { css as o } from "lit";
+const e = o`
+  :host {
+    display: inline-flex;
+    font-size: inherit;
+    color: var(--u-icon-color, currentColor);
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
+`;
+export {
+  e as styles
+};

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

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

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * IconButton 컴포넌트는 아이콘만 표시하는 버튼입니다.
+ */
+export declare class IconButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 경계선이 없는 버튼 스타일을 적용합니다. */
+    borderless: boolean;
+    /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
+    disabled: boolean;
+    /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
+    loading: boolean;
+    /** 아이콘을 외부에서 불러와야 하는지 여부를 설정합니다. */
+    remote: boolean;
+    /** 아이콘의 이름을 지정합니다. */
+    name?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,51 @@
+import { html as n } from "lit";
+import { property as t } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { BaseElement as d } from "../BaseElement.js";
+import { Spinner as f } from "../spinner/Spinner.js";
+import { Icon as u } from "../icon/Icon.js";
+import { styles as c } from "./IconButton.styles.js";
+var y = Object.defineProperty, r = (s, p, l, h) => {
+  for (var e = void 0, i = s.length - 1, a; i >= 0; i--)
+    (a = s[i]) && (e = a(p, l, e) || e);
+  return e && y(p, l, e), e;
+};
+class o extends d {
+  constructor() {
+    super(...arguments), this.borderless = !1, this.disabled = !1, this.loading = !1, this.remote = !1;
+  }
+  static {
+    this.styles = [super.styles, c];
+  }
+  static {
+    this.dependencies = {
+      "u-spinner": f,
+      "u-icon": u
+    };
+  }
+  render() {
+    return n`
+      <button part="base" ?disabled=${this.disabled || this.loading}>
+        ${this.loading ? n`<u-spinner></u-spinner>` : n`<u-icon ?remote=${this.remote} name=${m(this.name)}></u-icon>`}
+      </button>
+    `;
+  }
+}
+r([
+  t({ type: Boolean, reflect: !0 })
+], o.prototype, "borderless");
+r([
+  t({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+r([
+  t({ type: Boolean, reflect: !0 })
+], o.prototype, "loading");
+r([
+  t({ type: Boolean })
+], o.prototype, "remote");
+r([
+  t({ type: String })
+], o.prototype, "name");
+export {
+  o as IconButton
+};

package/dist/components/icon-button/IconButton.styles.d.ts

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