@iyulab/components 0.1.4 → 0.1.6

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

@@ -1,48 +1,29 @@
 import { PropertyValues } from 'lit';
-import { Placement } from '@floating-ui/dom';
 import { BaseElement } from '../BaseElement.js';
-/**
- * ContextMenu 컴포넌트는 마우스 오른쪽 버튼 클릭으로 표시되는 컨텍스트 메뉴입니다.
- * MenuItem 컴포넌트를 자식으로 포함하여 메뉴를 구성합니다.
- */
-export declare class ContextMenu extends BaseElement {
+import { FloatingElement } from '../FloatingElement.js';
+export declare class ContextMenu extends FloatingElement {
     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;
+    preventNative: boolean;
+    closeOnSelect: boolean;
+    closeOnCheck: boolean;
+    private get menu();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 컨텍스트 메뉴를 표시합니다. */
-    show: (x?: number, y?: number) => Promise<void>;
-    /** 컨텍스트 메뉴를 숨깁니다. */
+    /** 컨텍스트 메뉴는 Virtual anchor를 쓰므로 autoUpdate는 꺼버림 */
+    protected autoPosition(_enable: boolean): void;
+    private attachAnchor;
+    private detachAnchor;
+    private onContextMenu;
     hide: () => Promise<void>;
-    /**
-     * 메뉴가 나타날 위치에 따라 transform-origin 값을 반환합니다.
-     */
-    private getTransformOrigin;
-    /** 대상 엘리먼트에 컨텍스트 메뉴 이벤트를 바인딩 합니다. */
-    private attachTrigger;
-    /** 대상 엘리먼트에 바인딩된 컨텍스트 메뉴 이벤트를 제거합니다. */
-    private detachTrigger;
-    /** 컨텍스트 메뉴 이벤트를 처리합니다. */
-    private handleContextMenu;
-    /** 문서 클릭 이벤트를 처리합니다. */
-    private handleDocumentClick;
-    /** 문서 컨텍스트 메뉴 이벤트를 처리합니다. */
-    private handleDocumentContextMenu;
-    /** 슬롯 변경 이벤트를 처리합니다. */
-    private handleSlotChange;
+    private onDocPointerDown;
+    private onWindowBlur;
+    private onWindowScrollOrResize;
+    private attachDismiss;
+    private detachDismiss;
+    private onSelect;
+    private onCheck;
+    private onRequestClose;
 }

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

@@ -1,8 +1,7 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { offset, shift, flip, autoPlacement, computePosition } from '@floating-ui/dom';
-import { getParentElement } from '../../internals/node-helpers.js';
-import { BaseElement } from '../BaseElement.js';
+import { FloatingElement } from '../FloatingElement.js';
+import { Menu } from '../menu/Menu.js';
 import { MenuItem } from '../menu-item/MenuItem.js';
 import { styles } from './ContextMenu.styles.js';
 
@@ -15,91 +14,58 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ContextMenu extends BaseElement {
+class ContextMenu extends FloatingElement {
   constructor() {
     super(...arguments);
-    /** 마우스 클릭 위치 */
-    this.mouseX = 0;
-    this.mouseY = 0;
-    this.open = false;
-    this.hoist = true;
-    this.distance = 2;
-    /** 컨텍스트 메뉴를 표시합니다. */
-    this.show = async (x, y) => {
-      if (x !== void 0) this.mouseX = x;
-      if (y !== void 0) this.mouseY = y;
-      await this.updateComplete;
-      const virtualElement = {
+    this.preventNative = true;
+    this.closeOnSelect = true;
+    this.closeOnCheck = false;
+    this.onContextMenu = async (e) => {
+      if (this.preventNative) e.preventDefault();
+      this.menu && (this.menu.open = true);
+      const virtual = {
         getBoundingClientRect: () => ({
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY,
           width: 0,
           height: 0,
-          x: this.mouseX,
-          y: this.mouseY,
-          top: this.mouseY,
-          left: this.mouseX,
-          right: this.mouseX,
-          bottom: this.mouseY
+          toJSON() {
+            return {};
+          }
         })
       };
-      const middleware = [
-        offset({ mainAxis: this.distance }),
-        shift({ padding: 8 }),
-        flip()
-      ];
-      if (!this.placement) {
-        middleware.push(autoPlacement({ allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"] }));
-      }
-      const position = await computePosition(virtualElement, this, {
-        placement: this.placement || "bottom-start",
-        middleware,
-        strategy: this.hoist ? "fixed" : "absolute"
-      });
-      Object.assign(this.style, {
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        transformOrigin: this.getTransformOrigin(position.placement)
-      });
-      await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = true;
-        this.emit("u-show");
-      });
+      await super.show(virtual);
+      await this.menu?.focusFirstItem?.();
     };
-    /** 컨텍스트 메뉴를 숨깁니다. */
     this.hide = async () => {
-      await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = false;
-        this.emit("u-hide");
-      });
+      await super.hide();
+      this.menu && (this.menu.open = false);
+      this.querySelectorAll("u-menu-item").forEach((i) => i.closeSubmenu?.());
     };
-    /** 컨텍스트 메뉴 이벤트를 처리합니다. */
-    this.handleContextMenu = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.show(e.clientX, e.clientY);
+    this.onDocPointerDown = (e) => {
+      if (!this.visible) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      this.hide();
     };
-    /** 문서 클릭 이벤트를 처리합니다. */
-    this.handleDocumentClick = (e) => {
-      if (this.open && !this.contains(e.target)) {
-        this.hide();
-      }
+    this.onWindowBlur = () => {
+      if (this.visible) this.hide();
     };
-    /** 문서 컨텍스트 메뉴 이벤트를 처리합니다. */
-    this.handleDocumentContextMenu = (e) => {
-      if (this.open && !this.trigger?.contains(e.target)) {
-        this.hide();
-      }
+    this.onWindowScrollOrResize = () => {
+      if (this.visible) this.hide();
     };
-    /** 슬롯 변경 이벤트를 처리합니다. */
-    this.handleSlotChange = () => {
-      const slot = this.shadowRoot?.querySelector("slot");
-      const items = slot?.assignedElements({ flatten: true });
-      items?.forEach((item) => {
-        item.addEventListener("u-select", () => {
-          this.hide();
-        });
-      });
+    this.onSelect = async () => {
+      if (this.closeOnSelect) await this.hide();
+    };
+    this.onCheck = async () => {
+      if (this.closeOnCheck) await this.hide();
+    };
+    this.onRequestClose = async () => {
+      await this.hide();
     };
   }
   static {
@@ -107,87 +73,76 @@ class ContextMenu extends BaseElement {
   }
   static {
     this.dependencies = {
+      "u-menu": Menu,
       "u-menu-item": MenuItem
     };
   }
+  get menu() {
+    return this.querySelector("u-menu");
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.trigger ||= getParentElement(this);
-    this.setAttribute("role", "menu");
+    this.strategy = "fixed";
+    this.placement ||= "bottom-start";
+    this.distance ||= 4;
+    this.addEventListener("u-select", this.onSelect);
+    this.addEventListener("u-check", this.onCheck);
+    this.addEventListener("u-request-close", this.onRequestClose);
   }
   disconnectedCallback() {
-    this.detachTrigger(this.trigger);
+    this.detachAnchor(this.anchor);
+    this.detachDismiss();
+    this.removeEventListener("u-select", this.onSelect);
+    this.removeEventListener("u-check", this.onCheck);
+    this.removeEventListener("u-request-close", this.onRequestClose);
     super.disconnectedCallback();
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("trigger") && this.trigger) {
-      const oldTrigger = changedProperties.get("trigger");
-      this.detachTrigger(oldTrigger);
-      this.attachTrigger(this.trigger);
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("anchor")) {
+      this.detachAnchor(changed.get("anchor"));
+      this.attachAnchor(this.anchor);
+    }
+    if (changed.has("visible")) {
+      if (this.visible) this.attachDismiss();
+      else this.detachDismiss();
     }
   }
   render() {
-    return html`
-      <div class="container">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
+    return html`<slot></slot>`;
   }
-  /**
-   * 메뉴가 나타날 위치에 따라 transform-origin 값을 반환합니다.
-   */
-  getTransformOrigin(placement) {
-    switch (placement) {
-      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";
-    }
+  /** 컨텍스트 메뉴는 Virtual anchor를 쓰므로 autoUpdate는 꺼버림 */
+  autoPosition(_enable) {
   }
-  /** 대상 엘리먼트에 컨텍스트 메뉴 이벤트를 바인딩 합니다. */
-  attachTrigger(trigger) {
-    if (!trigger) return;
-    trigger.addEventListener("contextmenu", this.handleContextMenu);
-    document.addEventListener("click", this.handleDocumentClick);
-    document.addEventListener("contextmenu", this.handleDocumentContextMenu);
+  attachAnchor(target) {
+    if (!target) return;
+    target.addEventListener("contextmenu", this.onContextMenu);
   }
-  /** 대상 엘리먼트에 바인딩된 컨텍스트 메뉴 이벤트를 제거합니다. */
-  detachTrigger(trigger) {
-    if (!trigger) return;
-    trigger.removeEventListener("contextmenu", this.handleContextMenu);
-    document.removeEventListener("click", this.handleDocumentClick);
-    document.removeEventListener("contextmenu", this.handleDocumentContextMenu);
+  detachAnchor(target) {
+    if (!target) return;
+    target.removeEventListener("contextmenu", this.onContextMenu);
+  }
+  attachDismiss() {
+    document.addEventListener("pointerdown", this.onDocPointerDown, true);
+    window.addEventListener("blur", this.onWindowBlur);
+    window.addEventListener("scroll", this.onWindowScrollOrResize, true);
+    window.addEventListener("resize", this.onWindowScrollOrResize);
+  }
+  detachDismiss() {
+    document.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    window.removeEventListener("blur", this.onWindowBlur);
+    window.removeEventListener("scroll", this.onWindowScrollOrResize, true);
+    window.removeEventListener("resize", this.onWindowScrollOrResize);
   }
 }
 __decorateClass([
-  property({ attribute: false })
-], ContextMenu.prototype, "trigger");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], ContextMenu.prototype, "open");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], ContextMenu.prototype, "hoist");
+  property({ type: Boolean })
+], ContextMenu.prototype, "preventNative");
 __decorateClass([
-  property({ type: String })
-], ContextMenu.prototype, "placement");
+  property({ type: Boolean })
+], ContextMenu.prototype, "closeOnSelect");
 __decorateClass([
-  property({ type: Number })
-], ContextMenu.prototype, "distance");
+  property({ type: Boolean })
+], ContextMenu.prototype, "closeOnCheck");
 
 export { ContextMenu };

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

@@ -2,38 +2,13 @@ import { css } from 'lit';
 
 const styles = css`
   :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;
+    transform: scale(0.98);
+    transition: opacity 0.12s ease, transform 0.12s ease;
   }
-  :host([open]) {
+  :host([visible]) {
     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;
   }
 `;
 

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

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

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

@@ -0,0 +1,5 @@
+import { ContextMenu } from './ContextMenu.js';
+
+ContextMenu.define("u-context-menu");
+
+export { ContextMenu };

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

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

package/dist/components/copy-button/CopyButton.js

@@ -0,0 +1,69 @@
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { IconButton } from '../icon-button/IconButton.js';
+import { styles } from './CopyButton.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 CopyButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.copied = false;
+    this.borderless = false;
+    this.disabled = false;
+    this.value = "";
+    /** 복사 버튼 클릭 핸들러 */
+    this.handleButtonClick = async () => {
+      try {
+        await navigator.clipboard.writeText(this.value);
+        this.copied = true;
+        this.emit("u-copy", { value: this.value });
+        setTimeout(() => this.copied = false, 2e3);
+      } catch (error) {
+        console.error("Failed to copy text: ", error);
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon-button": IconButton
+    };
+  }
+  render() {
+    return html`
+      <u-icon-button part="base"
+        ?copied=${this.copied}
+        .borderless=${this.borderless}
+        .disabled=${this.disabled || this.copied}
+        .library=${"internal"}
+        .name=${this.copied ? "check-lg" : "copy"}
+        @click=${this.handleButtonClick}>
+      </u-icon-button>
+    `;
+  }
+}
+__decorateClass([
+  state()
+], CopyButton.prototype, "copied");
+__decorateClass([
+  property({ type: Boolean })
+], CopyButton.prototype, "borderless");
+__decorateClass([
+  property({ type: Boolean })
+], CopyButton.prototype, "disabled");
+__decorateClass([
+  property({ type: String })
+], CopyButton.prototype, "value");
+
+export { CopyButton };

package/dist/components/copy-button/CopyButton.styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: inline-block;
+    font-size: 16px;
+  }
+
+  u-icon-button {
+    font-size: inherit;
+  }
+  u-icon-button[copied] {
+    color: var(--u-green-600, #16a34a);
+  }
+`;
+
+export { styles };

package/dist/components/copy-button/index.js

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

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

@@ -7,13 +7,15 @@ import { BaseElement } from '../BaseElement.js';
 export declare class Dialog extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    overlayEl: HTMLDivElement;
+    dialogEl: HTMLDivElement;
+    /** 모달 모드 활성화 (배경 차단 및 포커스 트랩) */
+    modal: boolean;
     /** 다이얼로그가 열려있는지 여부 */
     open: boolean;
-    /** 오버레이 클릭 시 닫기 활성화 여부 */
-    closeOnOverlayClick: boolean;
-    /** ESC 키로 닫기 활성화 여부 */
-    closeOnEscape: boolean;
+    /** 이벤트에 의한 다이얼로그 닫기 허용 여부 */
+    closable: boolean;
+    /** 타이틀 텍스트 */
+    heading: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
@@ -22,9 +24,14 @@ export declare class Dialog extends BaseElement {
     show: () => Promise<void>;
     /** 다이얼로그를 숨깁니다 */
     hide: () => Promise<void>;
+    /** 패널을 흔드는 애니메이션을 재생합니다 */
+    private shake;
     /** 오버레이 클릭 핸들러 */
-    private handleOverlayClick;
+    private handleBackdropClick;
     /** 키보드 이벤트 핸들러 */
-    private handleKeyDown;
+    private handleKeydown;
+    /** 포커스 트랩 핸들러 */
+    private handleFocusin;
     private updateOpenState;
+    private updateModalState;
 }