@iyulab/components 0.1.5 → 0.1.7

package/dist/components/FloatingElement.d.ts

@@ -0,0 +1,84 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { Placement, VirtualElement } from '@floating-ui/dom';
+import { BaseElement } from './BaseElement.js';
+/**
+ * FloatingElement는 팝오버, 툴팁 등 화면에 떠 있는 엘리먼트를 구현하기 위한 기본 클래스입니다.
+ * 이 클래스를 상속하여 커스텀 팝오버 컴포넌트를 만들 수 있습니다.
+ *
+ * 1. for, anchor 속성을 통해 연결될 대상 엘리먼트를 지정할 수 있습니다.
+ * 2. visible 속성을 통해 엘리먼트의 표시 여부를 제어할 수 있습니다.
+ * 3. strategy, placement, distance 속성을 통해 표시 위치 결정 방식을 설정할 수 있습니다.
+ * 4. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
+ */
+export declare class FloatingElement extends BaseElement {
+    /** 기본 스타일을 정의합니다. */
+    static styles: CSSResultGroup;
+    /** 종속된 컴포넌트를 정의합니다. */
+    static dependencies: Record<string, typeof BaseElement>;
+    private rafId;
+    private cleanup;
+    /**
+     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트를 사용합니다.
+     */
+    anchor?: HTMLElement;
+    /**
+     * 현재 엘리먼트가 보여지는지 여부입니다.
+     */
+    visible: boolean;
+    /**
+     * 현재 엘리먼트의 위치 결정 전략입니다.
+     *
+     * @remarks
+     * - `absolute`: 엘리먼트가 문서 흐름에 따라 배치됩니다.
+     * - `fixed`: 엘리먼트가 뷰포트에 고정되어 스크롤과 무관하게 위치합니다.
+     */
+    strategy: 'absolute' | 'fixed';
+    /**
+     * 앵커 엘리먼트를 찾기 위한 CSS 선택자입니다. querySelector를 사용하여 DOM에서 대상을 검색합니다.
+     *
+     * @example
+     * - `id`로 찾기: for="#target-id"
+     * - `class`로 찾기: for=".target-class"
+     * - `태그명`으로 찾기: for="target-tag-name"
+     * - `속성`으로 찾기: for="[data-role='target']"
+     */
+    for?: string;
+    /**
+     * 대상 엘리먼트로부터의 배치 위치입니다.
+     * 지정하지 않으면 `floating-ui`의 `autoPlacement`가 적용됩니다.
+     */
+    placement?: Placement;
+    /**
+     * 대상 엘리먼트로부터의 거리 (px) 입니다.
+     *
+     * @default 0
+     */
+    distance: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * 현재 엘리먼트를 표시합니다.
+     *
+     * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+     */
+    show(anchor?: Element | VirtualElement): Promise<void>;
+    /**
+     * 현재 엘리먼트를 숨깁니다.
+     */
+    hide(): Promise<void>;
+    /**
+     * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다.
+     *
+     * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
+     */
+    protected reposition(target: Element | VirtualElement): Promise<void>;
+    /**
+     * 자동 위치 업데이트를 설정하거나 해제합니다.
+     *
+     * @param enable - 자동 위치 업데이트 활성화 여부
+     */
+    protected autoPosition(enable: boolean): void;
+    /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
+    private scheduleVisible;
+}

package/dist/components/FloatingElement.js

@@ -0,0 +1,166 @@
+import { state, property } from 'lit/decorators.js';
+import { offset, shift, flip, autoPlacement, computePosition, autoUpdate } from '@floating-ui/dom';
+import { getParentElement, querySelectorFrom } from '../internals/node-helpers.js';
+import { BaseElement } from './BaseElement.js';
+import { styles } from './FloatingElement.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 FloatingElement extends BaseElement {
+  constructor() {
+    super(...arguments);
+    // 애니메이션 프레임 아이디
+    this.rafId = null;
+    // 자동 위치 업데이트 정리 함수
+    this.cleanup = null;
+    this.visible = false;
+    this.strategy = "absolute";
+    this.distance = 0;
+  }
+  static {
+    /** 기본 스타일을 정의합니다. */
+    this.styles = [super.styles, styles];
+  }
+  static {
+    /** 종속된 컴포넌트를 정의합니다. */
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.anchor ||= getParentElement(this);
+  }
+  disconnectedCallback() {
+    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+    this.autoPosition(false);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("for")) {
+      const founded = this.for ? querySelectorFrom(this, this.for) : void 0;
+      this.anchor = founded || void 0;
+    }
+  }
+  /** 
+   * 현재 엘리먼트를 표시합니다.
+   * 
+   * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+   */
+  async show(anchor) {
+    anchor ||= this.anchor;
+    if (!anchor) return;
+    await this.updateComplete;
+    await this.reposition(anchor);
+    this.autoPosition(true);
+    this.scheduleVisible(true);
+  }
+  /** 
+   * 현재 엘리먼트를 숨깁니다.
+   */
+  async hide() {
+    await this.updateComplete;
+    this.autoPosition(false);
+    this.scheduleVisible(false);
+  }
+  /** 
+   * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다. 
+   * 
+   * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
+   */
+  async reposition(target) {
+    const middleware = [
+      offset({ mainAxis: this.distance }),
+      shift(),
+      flip()
+    ];
+    if (!this.placement) {
+      middleware.push(autoPlacement());
+    }
+    const position = await computePosition(target, this, {
+      strategy: this.strategy,
+      placement: this.placement,
+      middleware
+    });
+    Object.assign(this.style, {
+      left: `${position.x}px`,
+      top: `${position.y}px`,
+      // placement 에 따라 transform-origin 값을 결정합니다.
+      transformOrigin: (() => {
+        switch (position.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 "center";
+        }
+      })()
+    });
+  }
+  /**
+   * 자동 위치 업데이트를 설정하거나 해제합니다.
+   * 
+   * @param enable - 자동 위치 업데이트 활성화 여부
+   */
+  autoPosition(enable) {
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
+    if (enable && this.anchor) {
+      this.cleanup = autoUpdate(this.anchor, this, () => {
+        this.reposition(this.anchor);
+      });
+    }
+  }
+  /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
+  scheduleVisible(visible) {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.rafId = requestAnimationFrame(() => {
+      this.visible = visible;
+      this.rafId = null;
+    });
+  }
+}
+__decorateClass([
+  state()
+], FloatingElement.prototype, "anchor");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FloatingElement.prototype, "visible");
+__decorateClass([
+  property({ type: String, reflect: true })
+], FloatingElement.prototype, "strategy");
+__decorateClass([
+  property({ type: String })
+], FloatingElement.prototype, "for");
+__decorateClass([
+  property({ type: String })
+], FloatingElement.prototype, "placement");
+__decorateClass([
+  property({ type: Number })
+], FloatingElement.prototype, "distance");
+
+export { FloatingElement };

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

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

package/dist/components/FloatingElement.styles.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: max-content;
+
+    opacity: 0;
+    pointer-events: none;
+  }
+  :host([strategy="absolute"]) {
+    position: absolute;
+  }
+  :host([strategy="fixed"]) {
+    position: fixed;
+  }
+  :host([visible]) {
+    opacity: 0.8;
+    pointer-events: auto;
+  }
+`;
+
+export { styles };

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;
   }
 `;