@iyulab/components 0.1.4 → 0.1.6

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/dialog/index.js

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

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

@@ -1,25 +1,25 @@
 import { nothing } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
- * Divider 컴포넌트는 엘리먼트 사이에 드래그 가능한 구분선을 표시합니다.
+ * Divider 컴포넌트는 엘리먼트 사이에 움직임이 가능한 구분선을 제공합니다.
  */
 export declare class Divider extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 마지막 마우스 위치를 저장합니다. */
-    private position;
-    /** 드래그 중인지 여부를 나타냅니다. */
-    dragging: boolean;
-    /** 드래그 가능 여부를 설정합니다. */
-    draggable: boolean;
+    /** 마지막 마우스 포인터 위치를 저장합니다. */
+    private prevPointerPosition;
+    /** 분할선이 움직이는지 여부를 나타냅니다. */
+    moving: boolean;
     /** 분할 방향을 설정합니다. */
     orientation: 'horizontal' | 'vertical';
+    /** 분할선을 움직일 수 있는지 여부를 설정합니다. */
+    movable: boolean;
     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.dragging = false;
-    this.draggable = false;
+    /** 마지막 마우스 포인터 위치를 저장합니다. */
+    this.prevPointerPosition = 0;
+    this.moving = false;
     this.orientation = "horizontal";
+    this.movable = false;
     /** 마우스 다운 이벤트 핸들러 */
-    this.handleMouseDown = (e) => {
+    this.handleMousedown = (e) => {
       e.preventDefault();
-      this.dragging = true;
-      this.position = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      this.emit("u-dragstart");
-      document.addEventListener("mousemove", this.handleMouseMove);
-      document.addEventListener("mouseup", this.handleMouseUp);
+      this.moving = true;
+      this.prevPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this.emit("u-movestart");
+      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) => {
-      if (!this.dragging) return;
+    this.handleMousemove = (e) => {
+      if (!this.moving) return;
       e.preventDefault();
-      const position = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const delta = position - this.position;
-      this.emit("u-drag", { delta });
-      this.position = position;
+      const currentPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPointerPosition - this.prevPointerPosition;
+      this.emit("u-move", { delta });
+      this.prevPointerPosition = currentPointerPosition;
     };
     /** 마우스 업 이벤트 핸들러 */
-    this.handleMouseUp = (_) => {
-      if (!this.dragging) return;
-      this.dragging = false;
-      this.emit("u-dragend");
-      document.removeEventListener("mousemove", this.handleMouseMove);
-      document.removeEventListener("mouseup", 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.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.draggable) {
+    if (this.movable) {
       return html`
-        <div class="handler" 
-          ?dragging=${this.dragging}
+        <div class="handler" part="handler"
+          ?moving=${this.moving}
           orientation=${this.orientation}
-          @mousedown=${this.handleMouseDown}
+          @mousedown=${this.handleMousedown}
         ></div>
       `;
     } else {
@@ -78,12 +78,12 @@ class Divider extends BaseElement {
 }
 __decorateClass([
   state()
-], Divider.prototype, "dragging");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Divider.prototype, "draggable");
+], Divider.prototype, "moving");
 __decorateClass([
   property({ type: String, reflect: true })
 ], Divider.prototype, "orientation");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Divider.prototype, "movable");
 
 export { Divider };

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

@@ -2,24 +2,22 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    position: relative;
-    display: block;
-    flex-shrink: 0;
-    background-color: var(--u-neutral-200, #e5e7eb);
-
     --divider-size: 2px;
     --handler-size: 4px;
     --handler-color: var(--u-blue-500, #3b82f6);
   }
+
+  :host {
+    position: relative;
+    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 {
@@ -37,6 +35,7 @@ const styles = css`
     transform: translateX(-50%);
     width: var(--handler-size, 4px);
     height: 100%;
+    cursor: col-resize;
   }
   .handler[orientation="vertical"] {
     left: 0;
@@ -45,8 +44,9 @@ const styles = css`
     transform: translateY(-50%);
     width: 100%;
     height: var(--handler-size, 4px);
+    cursor: row-resize;
   }
-  .handler[dragging],
+  .handler[moving],
   .handler:hover {
     opacity: 1;
   }

package/dist/components/divider/index.js

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

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/form/Form.d.ts

@@ -15,7 +15,9 @@ export declare class Form extends BaseElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 폼 내의 모든 입력 요소를 검증합니다. */
+    /**
+     * 폼 내의 모든 입력 요소를 검증합니다.
+     */
     validate(): boolean;
     /** 입력 요소의 변경 이벤트를 처리합니다. */
     private handleChange;