@iyulab/components 0.1.4 → 0.1.6

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.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/alert/Alert.d.ts

@@ -14,7 +14,7 @@ export declare class Alert extends BaseElement {
     /** 상태 (warning, error, info, success, notice) */
     type: AlertType;
     /** 타이틀 라벨 */
-    label?: string;
+    heading?: string;
     /** 본문 내용 */
     content?: string;
     /** 본문 최소 행 수 */
@@ -25,12 +25,16 @@ export declare class Alert extends BaseElement {
     duration: number;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** Alert를 표시합니다. */
+    /**
+     * Alert를 표시합니다.
+     */
     show(): Promise<void>;
-    /** Alert를 숨깁니다. */
+    /**
+     * Alert를 숨깁니다.
+     */
     hide(): Promise<void>;
     /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-    private getIcon;
+    private getIconName;
     /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
     private updateOpenState;
 }

package/dist/components/alert/Alert.js

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { Icon } from '../icon/Icon.js';
 import { styles } from './Alert.styles.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -44,34 +45,42 @@ class Alert extends BaseElement {
   }
   render() {
     return html`
-      <div class="container">
-        <div class="header">
-          <u-icon class="icon" 
-            name=${this.getIcon(this.type)}
+      <div class="container" part="base">
+        <div class="header" part="header">
+          <u-icon class="icon" part="icon"
+            .library=${"internal"}
+            .name=${this.getIconName(this.type)}
           ></u-icon>
-          <div class="title">
-            ${this.label || this.type.toUpperCase()}
+          <div class="title" part="title">
+            ${this.heading || this.type.toUpperCase()}
           </div>
-          <u-icon class="close-btn" 
-            name="x-lg" 
+          <u-icon class="close-btn" part="close-btn"
+            .library=${"internal"}
+            .name=${"x-lg"}
             @click=${this.hide}
           ></u-icon>
         </div>
-        <div class="content scrollable">
-          ${this.content || html`<slot></slot>`}
+        <div class="content scrollable" part="content">
+          ${this.content ? unsafeHTML(this.content) : html`<slot></slot>`}
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
         </div>
-        <div class="footer"></div>
       </div>
     `;
   }
-  /** Alert를 표시합니다. */
+  /**
+   * Alert를 표시합니다. 
+   */
   async show() {
     await this.updateComplete;
     requestAnimationFrame(() => {
       this.open = true;
     });
   }
-  /** Alert를 숨깁니다. */
+  /** 
+   * Alert를 숨깁니다. 
+   */
   async hide() {
     await this.updateComplete;
     requestAnimationFrame(() => {
@@ -79,7 +88,7 @@ class Alert extends BaseElement {
     });
   }
   /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-  getIcon(type) {
+  getIconName(type) {
     switch (type) {
       case "error":
         return "exclamation-circle-fill";
@@ -118,7 +127,7 @@ __decorateClass([
 ], Alert.prototype, "type");
 __decorateClass([
   property({ type: String })
-], Alert.prototype, "label");
+], Alert.prototype, "heading");
 __decorateClass([
   property({ type: String })
 ], Alert.prototype, "content");

package/dist/components/alert/Alert.styles.js

@@ -1,64 +1,60 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --icon-primary-color: var(--u-neutral-700);
+    --min-content-rows: 1;
+    --max-content-rows: 3;
+  }
+
   :host {
     display: block;
     min-width: 300px;
     max-width: 500px;
-    
-    background-color: var(--alert-bg-color);
-    border: 1px solid var(--alert-border-color);
+
     border-radius: 8px;
-    box-shadow: 0 4px 12px var(--u-shadow-medium), 0 2px 4px var(--u-shadow-weak);
+    box-shadow: 0 4px 12px var(--u-shadow-color-normal);
     
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
     pointer-events: none;
-
-    --min-content-rows: 1;
-    --max-content-rows: 3;
-    
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-bg-color: var(--u-neutral-100);
-    --alert-border-color: var(--u-neutral-300);
   }
   :host([open]) {
     opacity: 1;
     transform: scale(1);
     pointer-events: auto;
   }
-  
   :host([type="error"]) {
-    --alert-icon-color: var(--u-red-700);
-    --alert-bg-color: var(--u-red-0);
-    --alert-border-color: var(--u-red-100);
+    --icon-primary-color: var(--u-red-700);
+    border-color: var(--u-red-300);
+    background-color: var(--u-red-200);
   }
   :host([type="warning"]) {
-    --alert-icon-color: var(--u-yellow-700);
-    --alert-bg-color: var(--u-yellow-0);
-    --alert-border-color: var(--u-yellow-100);
+    --icon-primary-color: var(--u-yellow-700);
+    border-color: var(--u-yellow-300);
+    background-color: var(--u-yellow-200);
   }
   :host([type="info"]) {
-    --alert-icon-color: var(--u-blue-700);
-    --alert-bg-color: var(--u-blue-0);
-    --alert-border-color: var(--u-blue-100);
+    --icon-primary-color: var(--u-blue-700);
+    border-color: var(--u-blue-300);
+    background-color: var(--u-blue-200);
   }
   :host([type="success"]) {
-    --alert-icon-color: var(--u-green-700);
-    --alert-bg-color: var(--u-green-0);
-    --alert-border-color: var(--u-green-100);
+    --icon-primary-color: var(--u-green-700);
+    border-color: var(--u-green-300);
+    background-color: var(--u-green-200);
   }
   :host([type="notice"]) {
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-bg-color: var(--u-neutral-100);
-    --alert-border-color: var(--u-neutral-300);
+    --icon-primary-color: var(--u-neutral-700);
+    border-color: var(--u-neutral-300);
+    background-color: var(--u-neutral-200);
   }
 
   .container {
     display: flex;
     flex-direction: column;
-    padding: 8px 12px 8px 12px;
+    padding: 8px 12px;
     overflow: hidden;
   }
 
@@ -69,23 +65,21 @@ const styles = css`
     align-items: center;
     gap: 12px;
     margin-bottom: 4px;
+    font-size: 16px;
     user-select: none;
   }
   .header .icon {
     flex-shrink: 0;
-    font-size: 20px;
-    color: var(--alert-icon-color);
-    filter: drop-shadow(0 1px 2px var(--u-shadow-weak));
+    color: var(--icon-primary-color);
   }
   .header .title {
-    flex: 1;
-    font-size: 16px;
+    flex-grow: 1;
     font-weight: 600;
-    line-height: 1.4;
+    line-height: 2;
   }
   .header .close-btn {
     flex-shrink: 0;
-    font-size: 18px;
+    color: var(--u-icon-color);
     cursor: pointer;
   }
   .header .close-btn:hover {
@@ -98,16 +92,15 @@ const styles = css`
 
   .content {
     font-size: 14px;
-    font-weight: 400;
-    color: var(--u-soft-text-color);
-    line-height: 1.6;
+    font-weight: 300;
+    line-height: 1.5;
     min-height: calc(1.6em * var(--min-content-rows));
     max-height: calc(1.6em * var(--max-content-rows));
     overflow-y: auto;
   }
 
   .footer {
-    display: none;
+    display: inline-block;
   }
 `;
 

package/dist/components/alert/index.js

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

package/dist/components/button/Button.js

@@ -29,13 +29,15 @@ class Button extends BaseElement {
   }
   render() {
     return html`
-      <button part="base" ?disabled=${this.disabled || this.loading}>
+      <button part="base" 
+        ?disabled=${this.disabled || this.loading}>
         <slot name="prefix"></slot>
         <slot></slot>
         <slot name="suffix"></slot>
       </button>
       
-      <div class="overlay" ?hidden=${!this.loading}>
+      <div class="overlay" part="overlay"
+        ?hidden=${!this.loading}>
         <u-spinner></u-spinner>
       </div>
     `;

package/dist/components/button/Button.styles.js

@@ -9,31 +9,29 @@ const styles = css`
     font-weight: 500;
     line-height: 1.5;
     padding: 0.5em 1em;
-    background-color: var(--u-bg-color);
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
+    background-color: var(--u-bg-color);
 
     transition: all 0.2s ease;
+    overflow: hidden;
     user-select: none;
     cursor: pointer;
   }
-  :host([loading]),
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host([disabled]) {
-    color: var(--u-text-color-disabled);
-  }
   :host(:hover) {
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
     background-color: var(--u-bg-color-hover);
-    border-color: var(--u-border-color-strong);
   }
   :host(:active) {
-    color: var(--u-text-color-active);
+    color: var(--u-txt-color-active);
     background-color: var(--u-bg-color-active);
     transform: translateY(1px);
   }
+  :host([loading]),
+  :host([disabled]) {
+    color: var(--u-txt-color-disabled);
+    pointer-events: none;
+  }
 
   button {
     all: unset;
@@ -49,21 +47,16 @@ const styles = css`
   }
 
   slot {
-    flex: 1 1 auto;
+    flex: 1 0 auto;
     min-width: 0;
     display: inline-flex;
-    align-items: center;
     justify-content: center;
   }
-  slot[name="prefix"],
-  slot[name="suffix"] {
-    flex: 0 0 auto;
-  }
-  /* 슬롯에 내용이 있을 때만 gap 적용 */
-  slot[name="prefix"]:not(:empty) {
+  /* 슬롯에 내용이 있을 때 gap 적용 */
+  ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
   }
-  slot[name="suffix"]:not(:empty) {
+  ::slotted([slot="suffix"]) {
     margin-left: 0.5em;
   }
 

package/dist/components/button/index.js

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