@iyulab/components 0.1.5 → 0.1.7

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

package/dist/components/dialog/Dialog.js

@@ -1,6 +1,7 @@
-import { html } from 'lit';
+import { nothing, html } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
+import { IconButton } from '../icon-button/IconButton.js';
 import { styles } from './Dialog.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -15,30 +16,52 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Dialog extends BaseElement {
   constructor() {
     super(...arguments);
+    this.modal = true;
     this.open = false;
-    this.closeOnOverlayClick = true;
-    this.closeOnEscape = true;
+    this.closable = true;
+    this.heading = "";
     /** 다이얼로그를 표시합니다 */
     this.show = async () => {
-      this.open = true;
       await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = true;
+      });
     };
     /** 다이얼로그를 숨깁니다 */
     this.hide = async () => {
       await this.updateComplete;
-      this.open = false;
+      requestAnimationFrame(() => {
+        this.open = false;
+      });
     };
     /** 오버레이 클릭 핸들러 */
-    this.handleOverlayClick = (e) => {
-      if (this.closeOnOverlayClick && e.target === this.overlayEl) {
-        this.hide();
+    this.handleBackdropClick = (e) => {
+      if (e.target === this) {
+        if (this.closable) {
+          this.hide();
+        } else {
+          this.shake();
+        }
       }
     };
     /** 키보드 이벤트 핸들러 */
-    this.handleKeyDown = (e) => {
-      if (this.closeOnEscape && e.key === "Escape" && this.open) {
+    this.handleKeydown = (e) => {
+      if (e.key === "Escape" && this.open) {
         e.preventDefault();
-        this.hide();
+        if (this.closable) {
+          this.hide();
+        } else {
+          this.shake();
+        }
+      }
+    };
+    /** 포커스 트랩 핸들러 */
+    this.handleFocusin = (e) => {
+      if (!this.modal || !this.open) return;
+      const target = e.target;
+      if (!this.contains(target)) {
+        e.preventDefault();
+        this.dialogEl.focus();
       }
     };
   }
@@ -46,14 +69,17 @@ class Dialog extends BaseElement {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {};
+    this.dependencies = {
+      "u-icon-button": IconButton
+    };
   }
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener("keydown", this.handleKeyDown);
+    this.addEventListener("click", this.handleBackdropClick);
   }
   disconnectedCallback() {
-    window.removeEventListener("keydown", this.handleKeyDown);
+    window.removeEventListener("keydown", this.handleKeydown);
+    window.removeEventListener("focusin", this.handleFocusin);
     super.disconnectedCallback();
   }
   updated(changedProperties) {
@@ -61,39 +87,74 @@ class Dialog extends BaseElement {
     if (changedProperties.has("open")) {
       this.updateOpenState(this.open);
     }
+    if (changedProperties.has("modal")) {
+      this.updateModalState(this.modal);
+    }
   }
   render() {
     return html`
-      <div class="overlay" part="overlay"
-        ?hidden=${!this.open}
-        @click=${this.handleOverlayClick}>
-        <div class="panel" part="panel">
-          <slot></slot>
-        </div>
+      <div class="dialog scrollable" part="base" tabindex="-1">
+        
+        ${this.heading ? html`
+            <div class="header" part="header">
+              <span class="title" part="title">
+                ${this.heading}
+              </span>
+              <u-icon-button class="close-btn" part="close-btn"
+                lib="internal" 
+                name="x-lg"
+                borderless
+                @click=${() => this.hide()}
+              ></u-icon-button>
+            </div>` : nothing}
+
+        <slot></slot>
+      
       </div>
     `;
   }
+  /** 패널을 흔드는 애니메이션을 재생합니다 */
+  shake() {
+    this.dialogEl.classList.add("shake");
+    setTimeout(() => {
+      this.dialogEl.classList.remove("shake");
+    }, 500);
+  }
   updateOpenState(open) {
     if (open) {
-      document.body.style.overflow = "hidden";
       this.emit("u-show");
+      document.body.style.overflow = this.modal ? "hidden" : "";
     } else {
-      document.body.style.overflow = "";
       this.emit("u-hide");
+      document.body.style.overflow = "";
+    }
+  }
+  updateModalState(modal) {
+    if (modal) {
+      window.addEventListener("keydown", this.handleKeydown);
+      window.addEventListener("focusin", this.handleFocusin);
+      document.body.style.overflow = this.open ? "hidden" : "";
+    } else {
+      window.removeEventListener("keydown", this.handleKeydown);
+      window.removeEventListener("focusin", this.handleFocusin);
+      document.body.style.overflow = "";
     }
   }
 }
 __decorateClass([
-  query(".overlay")
-], Dialog.prototype, "overlayEl");
+  query(".dialog")
+], Dialog.prototype, "dialogEl");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dialog.prototype, "modal");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Dialog.prototype, "open");
 __decorateClass([
   property({ type: Boolean })
-], Dialog.prototype, "closeOnOverlayClick");
+], Dialog.prototype, "closable");
 __decorateClass([
-  property({ type: Boolean })
-], Dialog.prototype, "closeOnEscape");
+  property({ type: String })
+], Dialog.prototype, "heading");
 
 export { Dialog };

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

@@ -2,30 +2,79 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: inline-block;
-  }
-
-  .overlay {
     position: fixed;
     z-index: 9999;
     top: 0;
+    bottom: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: transparent;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  :host([open]) {
+    visibility: visible;
+    pointer-events: auto;
+  }
+  :host([modal]) {
     background: var(--u-overlay-bg-color);
   }
 
-  .panel {
+  .dialog {
+    position: relative;
     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;
+    padding: 20px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    background: var(--u-panel-bg-color);
+    overflow: auto;
+  }
+  .dialog.shake {
+    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+  .header .title {
+    line-height: 1.2;
+    font-weight: 600;
+  }
+
+  /* 페이드 인 및 스케일 업 애니메이션 */
+  @keyframes fadeout {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  /* 진동 애니메이션 */
+  @keyframes shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+      transform: translateX(-8px);
+    }
+    20%, 40%, 60%, 80% {
+      transform: translateX(8px);
+    }
   }
 `;
 

package/dist/components/divider/Divider.d.ts

@@ -6,8 +6,8 @@ import { BaseElement } from '../BaseElement.js';
 export declare class Divider extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 마지막 마우스 위치를 저장합니다. */
-    private position;
+    /** 마지막 마우스 포인터 위치를 저장합니다. */
+    private prevPointerPosition;
     /** 분할선이 움직이는지 여부를 나타냅니다. */
     moving: boolean;
     /** 분할 방향을 설정합니다. */
@@ -17,9 +17,9 @@ export declare class Divider extends BaseElement {
     disconnectedCallback(): void;
     render(): typeof nothing | import('lit-html').TemplateResult<1>;
     /** 마우스 다운 이벤트 핸들러 */
-    private handleMouseDown;
+    private handleMousedown;
     /** 마우스 무브 이벤트 핸들러 */
-    private handleMouseMove;
+    private handleMousemove;
     /** 마우스 업 이벤트 핸들러 */
-    private handleMouseUp;
+    private handleMouseup;
 }

package/dist/components/divider/Divider.js

@@ -15,38 +15,38 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Divider extends BaseElement {
   constructor() {
     super(...arguments);
-    /** 마지막 마우스 위치를 저장합니다. */
-    this.position = 0;
+    /** 마지막 마우스 포인터 위치를 저장합니다. */
+    this.prevPointerPosition = 0;
     this.moving = false;
     this.orientation = "horizontal";
     this.movable = false;
     /** 마우스 다운 이벤트 핸들러 */
-    this.handleMouseDown = (e) => {
+    this.handleMousedown = (e) => {
       e.preventDefault();
       this.moving = true;
-      this.position = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this.prevPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
       this.emit("u-movestart");
-      document.addEventListener("mousemove", this.handleMouseMove);
-      document.addEventListener("mouseup", this.handleMouseUp);
+      document.addEventListener("mousemove", this.handleMousemove);
+      document.addEventListener("mouseup", this.handleMouseup);
       document.body.style.userSelect = "none";
       document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
     };
     /** 마우스 무브 이벤트 핸들러 */
-    this.handleMouseMove = (e) => {
+    this.handleMousemove = (e) => {
       if (!this.moving) return;
       e.preventDefault();
-      const position = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const delta = position - this.position;
+      const currentPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPointerPosition - this.prevPointerPosition;
       this.emit("u-move", { delta });
-      this.position = position;
+      this.prevPointerPosition = currentPointerPosition;
     };
     /** 마우스 업 이벤트 핸들러 */
-    this.handleMouseUp = (_) => {
+    this.handleMouseup = (_) => {
       if (!this.moving) return;
       this.moving = false;
       this.emit("u-moveend");
-      document.removeEventListener("mousemove", this.handleMouseMove);
-      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.removeEventListener("mousemove", this.handleMousemove);
+      document.removeEventListener("mouseup", this.handleMouseup);
       document.body.style.userSelect = "";
       document.body.style.cursor = "";
     };
@@ -59,16 +59,16 @@ class Divider extends BaseElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.removeEventListener("mousemove", this.handleMouseMove);
-    document.removeEventListener("mouseup", this.handleMouseUp);
+    document.removeEventListener("mousemove", this.handleMousemove);
+    document.removeEventListener("mouseup", this.handleMouseup);
   }
   render() {
     if (this.movable) {
       return html`
-        <div class="handler" 
+        <div class="handler" part="handler"
           ?moving=${this.moving}
           orientation=${this.orientation}
-          @mousedown=${this.handleMouseDown}
+          @mousedown=${this.handleMousedown}
         ></div>
       `;
     } else {

package/dist/components/divider/Divider.styles.js

@@ -9,19 +9,15 @@ const styles = css`
 
   :host {
     position: relative;
-    display: block;
-    flex-shrink: 0;
     background-color: var(--u-neutral-200, #e5e7eb);
   }
   :host([orientation="horizontal"]) {
     width: var(--divider-size, 2px);
-    height: 100%;
-    cursor: col-resize;
+    min-height: 0px;
   }
   :host([orientation="vertical"]) {
-    width: 100%;
+    min-width: 0px;
     height: var(--divider-size, 2px);
-    cursor: row-resize;
   }
 
   .handler {
@@ -39,6 +35,7 @@ const styles = css`
     transform: translateX(-50%);
     width: var(--handler-size, 4px);
     height: 100%;
+    cursor: col-resize;
   }
   .handler[orientation="vertical"] {
     left: 0;
@@ -47,6 +44,7 @@ const styles = css`
     transform: translateY(-50%);
     width: 100%;
     height: var(--handler-size, 4px);
+    cursor: row-resize;
   }
   .handler[moving],
   .handler:hover {

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+import { FloatingElement } from '../FloatingElement.js';
+export declare class DropdownMenu extends FloatingElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    closeOnSelect: boolean;
+    closeOnCheck: boolean;
+    private onDocPointerDown;
+    private onWindowBlur;
+    private get menu();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    show: () => Promise<void>;
+    hide: () => Promise<void>;
+    private attachAnchor;
+    private detachAnchor;
+    private onTriggerPointerDown;
+    private onTriggerKeydown;
+    private onSelect;
+    private onCheck;
+    private onRequestClose;
+    private attachDismiss;
+    private detachDismiss;
+}

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,135 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { FloatingElement } from '../FloatingElement.js';
+import { Menu } from '../menu/Menu.js';
+import { MenuItem } from '../menu-item/MenuItem.js';
+import { styles } from './DropdownMenu.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 DropdownMenu extends FloatingElement {
+  constructor() {
+    super(...arguments);
+    this.closeOnSelect = true;
+    this.closeOnCheck = false;
+    this.onDocPointerDown = (e) => {
+      if (!this.visible) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      if (this.anchor && path.includes(this.anchor)) return;
+      this.hide();
+    };
+    this.onWindowBlur = () => {
+      if (this.visible) this.hide();
+    };
+    this.show = async () => {
+      this.menu && (this.menu.open = true);
+      await super.show();
+      await this.menu?.focusFirstItem?.();
+    };
+    this.hide = async () => {
+      await super.hide();
+      this.menu && (this.menu.open = false);
+      this.querySelectorAll("u-menu-item").forEach((i) => i.closeSubmenu?.());
+    };
+    this.onTriggerPointerDown = async (e) => {
+      if (e.button !== 0) return;
+      if (this.visible) await this.hide();
+      else await this.show();
+    };
+    this.onTriggerKeydown = async (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!this.visible) await this.show();
+      }
+    };
+    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 {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-menu": Menu,
+      "u-menu-item": MenuItem
+    };
+  }
+  get menu() {
+    return this.querySelector("u-menu");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.placement ||= "bottom-start";
+    this.distance ||= 6;
+    this.addEventListener("u-select", this.onSelect);
+    this.addEventListener("u-check", this.onCheck);
+    this.addEventListener("u-request-close", this.onRequestClose);
+  }
+  disconnectedCallback() {
+    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(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();
+      if (this.anchor) {
+        this.anchor.setAttribute("aria-expanded", this.visible ? "true" : "false");
+      }
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  attachAnchor(target) {
+    if (!target) return;
+    target.setAttribute("aria-haspopup", "menu");
+    target.addEventListener("pointerdown", this.onTriggerPointerDown);
+    target.addEventListener("keydown", this.onTriggerKeydown);
+  }
+  detachAnchor(target) {
+    if (!target) return;
+    target.removeEventListener("pointerdown", this.onTriggerPointerDown);
+    target.removeEventListener("keydown", this.onTriggerKeydown);
+  }
+  attachDismiss() {
+    document.addEventListener("pointerdown", this.onDocPointerDown, true);
+    window.addEventListener("blur", this.onWindowBlur);
+  }
+  detachDismiss() {
+    document.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    window.removeEventListener("blur", this.onWindowBlur);
+  }
+}
+__decorateClass([
+  property({ type: Boolean })
+], DropdownMenu.prototype, "closeOnSelect");
+__decorateClass([
+  property({ type: Boolean })
+], DropdownMenu.prototype, "closeOnCheck");
+
+export { DropdownMenu };

package/dist/components/dropdown-menu/DropdownMenu.styles.d.ts

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

package/dist/components/dropdown-menu/DropdownMenu.styles.js

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    opacity: 0;
+    transform: scale(0.98);
+    transition: opacity 0.12s ease, transform 0.12s ease;
+  }
+  :host([visible]) {
+    opacity: 1;        /* FloatingElement의 0.8을 덮어씀 */
+    transform: scale(1);
+  }
+`;
+
+export { styles };

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

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

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

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

package/dist/components/icon/Icon.js

@@ -28,6 +28,7 @@ class Icon extends BaseElement {
   }
   render() {
     if (!this.name) return nothing;
+    console.log(this.library, this.name, "icon render");
     return until(icons.resolve(this.library, this.name).then((html) => {
       return this.validate(html) ? unsafeHTML(html) : nothing;
     }), nothing);

package/dist/components/index.d.ts

@@ -4,11 +4,13 @@ export * from './context-menu';
 export * from './copy-button';
 export * from './dialog';
 export * from './divider';
+export * from './dropdown-menu';
 export * from './form';
 export * from './icon';
 export * from './icon-button';
 export * from './input';
 export * from './menu';
+export * from './menu-item';
 export * from './progress-bar';
 export * from './progress-ring';
 export * from './spinner';