@iyulab/components 0.3.0 → 1.0.0

package/dist/utilities/BrowserStorage.js

@@ -1,87 +1,70 @@
-class BrowserStorage {
-  constructor(options) {
-    if (window === void 0) {
-      throw new Error("BrowserStorage can only be used in a browser environment.");
-    }
-    if (options.type === "cookie" && !("cookieStore" in window)) {
-      throw new Error("Cookies are not supported in this browser.");
-    }
-    this.options = options;
-  }
-  /** 키에 prefix를 붙인 실제 저장 키 */
-  buildKey(key) {
-    return `${this.options.prefix || ""}${key}`;
-  }
-  /**
-   * 값 저장
-   * @param key 키
-   * @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
-   */
-  async set(key, value) {
-    key = this.buildKey(key);
-    try {
-      if (this.options.type === "localStorage") {
-        window.localStorage.setItem(key, value);
-      } else if (this.options.type === "cookie") {
-        await window.cookieStore.set({
-          name: key,
-          value,
-          path: this.options.path,
-          domain: this.options.domain,
-          expires: this.options.expires,
-          sameSite: this.options.sameSite,
-          partitioned: this.options.partitioned
-        });
-      } else {
-        throw new Error(`Unsupported storage type`);
-      }
-    } catch (e) {
-      console.error("[BrowserStorage Error: set]", e);
-    }
-  }
-  /**
-   * 값 조회
-   * @param key 키
-   * @returns 값 (없으면 null)
-   */
-  async get(key) {
-    key = this.buildKey(key);
-    try {
-      if (this.options.type === "localStorage") {
-        return window.localStorage.getItem(key);
-      } else if (this.options.type === "cookie") {
-        const item = await window.cookieStore.get({
-          name: key
-        });
-        return item?.value || null;
-      } else {
-        throw new Error(`Unsupported storage type`);
-      }
-    } catch (e) {
-      console.error("[BrowserStorage Error: get]", e);
-      return null;
-    }
-  }
-  /** 
-   * 값 삭제
-   * @param key 키
-   */
-  async remove(key) {
-    key = this.buildKey(key);
-    try {
-      if (this.options.type === "localStorage") {
-        window.localStorage.removeItem(key);
-      } else if (this.options.type === "cookie") {
-        await window.cookieStore.delete({
-          name: key
-        });
-      } else {
-        throw new Error(`Unsupported storage type`);
-      }
-    } catch (e) {
-      console.error("[BrowserStorage Error: remove]", e);
-    }
-  }
-}
-
+//#region src/utilities/BrowserStorage.ts
+/**
+* 웹 브라우저가 제공하는 저장소 유틸리티 클래스
+*/
+var BrowserStorage = class {
+	constructor(options) {
+		if (window === void 0) throw new Error("BrowserStorage can only be used in a browser environment.");
+		if (options.type === "cookie" && !("cookieStore" in window)) throw new Error("Cookies are not supported in this browser.");
+		this.options = options;
+	}
+	/** 키에 prefix를 붙인 실제 저장 키 */
+	makeKey(key) {
+		return `${this.options.prefix || ""}${key}`;
+	}
+	/**
+	* 값 저장
+	* @param key 키
+	* @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
+	*/
+	async set(key, value) {
+		key = this.makeKey(key);
+		try {
+			if (this.options.type === "localStorage") window.localStorage.setItem(key, value);
+			else if (this.options.type === "cookie") await window.cookieStore.set({
+				name: key,
+				value,
+				path: this.options.path,
+				domain: this.options.domain,
+				expires: this.options.expires,
+				sameSite: this.options.sameSite,
+				partitioned: this.options.partitioned
+			});
+			else throw new Error(`Unsupported storage type`);
+		} catch (e) {
+			console.error("[BrowserStorage Error: set]", e);
+		}
+	}
+	/**
+	* 값 조회
+	* @param key 키
+	* @returns 값 (없으면 null)
+	*/
+	async get(key) {
+		key = this.makeKey(key);
+		try {
+			if (this.options.type === "localStorage") return window.localStorage.getItem(key);
+			else if (this.options.type === "cookie") return (await window.cookieStore.get({ name: key }))?.value || null;
+			else throw new Error(`Unsupported storage type`);
+		} catch (e) {
+			console.error("[BrowserStorage Error: get]", e);
+			return null;
+		}
+	}
+	/** 
+	* 값 삭제
+	* @param key 키
+	*/
+	async remove(key) {
+		key = this.makeKey(key);
+		try {
+			if (this.options.type === "localStorage") window.localStorage.removeItem(key);
+			else if (this.options.type === "cookie") await window.cookieStore.delete({ name: key });
+			else throw new Error(`Unsupported storage type`);
+		} catch (e) {
+			console.error("[BrowserStorage Error: remove]", e);
+		}
+	}
+};
+//#endregion
 export { BrowserStorage };

package/dist/utilities/Dialog.d.ts

@@ -0,0 +1,83 @@
+import { TemplateResult } from 'lit';
+import { DialogPlacement } from '../components/dialog/UDialog.js';
+import { ButtonVariant } from '../components/button/UButton.js';
+/** 공통 Dialog 옵션 */
+export interface DialogOptions {
+    /** 다이얼로그를 표시할 대상 엘리먼트, 지정 시 contained 모드로 동작 */
+    target?: HTMLElement;
+    /** 헤더 제목 */
+    title?: string;
+    /** 배치 위치 */
+    placement?: DialogPlacement;
+    /** 가장자리로부터의 간격 (px) */
+    offset?: number;
+    /** 모달 모드 여부 (기본: true) */
+    modal?: boolean;
+    /** 닫기 버튼 표시 여부 (기본: false) */
+    buttonClose?: boolean;
+    /** ESC 키로 닫기 허용 (기본: true) */
+    escapeClose?: boolean;
+    /** 백드롭 클릭으로 닫기 허용 (기본: true) */
+    backdropClose?: boolean;
+}
+/** Confirm Dialog 옵션 */
+export interface ConfirmDialogOptions extends DialogOptions {
+    /** 확인 버튼 텍스트 (기본: 'Confirm') */
+    confirmLabel?: string;
+    /** 취소 버튼 텍스트 (기본: 'Cancel') */
+    cancelLabel?: string;
+}
+/** Prompt Dialog 옵션 */
+export interface PromptDialogOptions extends ConfirmDialogOptions {
+    /** 입력 필드 type */
+    type?: string;
+    /** 입력 필드 기본값 */
+    defaultValue?: string;
+    /** 입력 필드 placeholder */
+    placeholder?: string;
+}
+/** Custom Dialog 옵션 */
+export interface CustomDialogOptions extends DialogOptions {
+    /** 본문 콘텐츠 (HTML 문자열 또는 TemplateResult) */
+    content: string | TemplateResult;
+    /** 액션 버튼 목록 */
+    actions?: DialogAction[];
+}
+/** Custom Dialog 버튼 정의 */
+export interface DialogAction {
+    /** 버튼 텍스트 */
+    label: string;
+    /** 반환될 값 */
+    value: string;
+    /** 버튼 스타일 */
+    variant?: ButtonVariant;
+}
+/**
+ * Dialog 유틸리티 클래스입니다.
+ * 프로그래밍 방식으로 alert, confirm, prompt 다이얼로그를 표시합니다.
+ */
+export declare class Dialog {
+    /** 개별 인스턴스 생성을 방지합니다. */
+    private constructor();
+    /**
+     * 알림 다이얼로그를 표시합니다.
+     */
+    static alert(message: string, options?: DialogOptions): Promise<void>;
+    /**
+     * 확인 다이얼로그를 표시합니다. (확인/취소 버튼)
+     * @returns 확인이면 true, 취소이면 false
+     */
+    static confirm(message: string, options?: ConfirmDialogOptions): Promise<boolean>;
+    /**
+     * 입력 다이얼로그를 표시합니다. (텍스트 입력 + 확인/취소)
+     * @returns 입력값 또는 취소 시 null
+     */
+    static prompt(message: string, options?: PromptDialogOptions): Promise<string | null>;
+    /**
+     * 커스텀 다이얼로그를 표시합니다.
+     * @returns 클릭된 액션의 value 또는 닫힌 경우 null
+     */
+    static show(options: CustomDialogOptions): Promise<string | null>;
+    /** 다이얼로그 엘리먼트를 생성하고 옵션을 적용합니다. */
+    private static createDialog;
+}

package/dist/utilities/Dialog.js

@@ -0,0 +1,141 @@
+import "../components/button/UButton.js";
+import { UDialog } from "../components/dialog/UDialog.js";
+import "../components/input/UInput.js";
+import { html, nothing, render } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+//#region src/utilities/Dialog.ts
+/**
+* Dialog 유틸리티 클래스입니다.
+* 프로그래밍 방식으로 alert, confirm, prompt 다이얼로그를 표시합니다.
+*/
+var Dialog = class {
+	/** 개별 인스턴스 생성을 방지합니다. */
+	constructor() {}
+	/**
+	* 알림 다이얼로그를 표시합니다.
+	*/
+	static async alert(message, options) {
+		await this.show({
+			...options,
+			content: message
+		});
+	}
+	/**
+	* 확인 다이얼로그를 표시합니다. (확인/취소 버튼)
+	* @returns 확인이면 true, 취소이면 false
+	*/
+	static async confirm(message, options) {
+		return await this.show({
+			...options,
+			content: message,
+			actions: [{
+				label: options?.cancelLabel || "Cancel",
+				value: "cancel",
+				variant: "outlined"
+			}, {
+				label: options?.confirmLabel || "Confirm",
+				value: "confirm"
+			}]
+		}) === "confirm";
+	}
+	/**
+	* 입력 다이얼로그를 표시합니다. (텍스트 입력 + 확인/취소)
+	* @returns 입력값 또는 취소 시 null
+	*/
+	static async prompt(message, options) {
+		let inputValue = options?.defaultValue || "";
+		return await this.show({
+			...options,
+			content: html`
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <div>${message}</div>
+          <u-input
+            type=${options?.type || "text"}
+            placeholder=${options?.placeholder || ""}
+            value=${inputValue}
+            @u-input=${(e) => {
+				inputValue = e.target.value || "";
+			}}
+            @keydown=${(e) => {
+				if (e.key === "Enter") {
+					const input = e.target;
+					inputValue = input.value || "";
+					const buttons = input.closest("u-dialog").querySelectorAll("u-button");
+					buttons[buttons.length - 1].click();
+				}
+			}}
+          ></u-input>
+        </div>
+      `,
+			actions: [{
+				label: options?.cancelLabel || "Cancel",
+				value: "cancel",
+				variant: "outlined"
+			}, {
+				label: options?.confirmLabel || "Confirm",
+				value: "confirm"
+			}]
+		}) === "confirm" ? inputValue : null;
+	}
+	/**
+	* 커스텀 다이얼로그를 표시합니다.
+	* @returns 클릭된 액션의 value 또는 닫힌 경우 null
+	*/
+	static show(options) {
+		return new Promise(async (resolve) => {
+			let closeValue = null;
+			const dialog = this.createDialog(options);
+			const content = typeof options.content === "string" ? unsafeHTML(options.content) : options.content;
+			const actions = options.actions && options.actions.length > 0 ? options.actions : null;
+			render(html`
+        <div style="min-width: 320px; font-size: 14px; line-height: 1.6;">
+          ${content}
+          ${actions ? html`
+            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
+              ${actions.map((action) => html`
+                <u-button
+                  variant=${action.variant || "solid"}
+                  @click=${() => {
+				closeValue = action.value;
+				dialog.hide();
+			}}
+                >${action.label}</u-button>
+              `)}
+            </div>
+          ` : nothing}
+        </div>
+      `, dialog);
+			(options.target || document.body).appendChild(dialog);
+			await dialog.updateComplete;
+			dialog.show();
+			dialog.addEventListener("u-hide", (e) => {
+				if (e.target !== dialog) return;
+				setTimeout(() => dialog.remove(), 300);
+				resolve(closeValue);
+			});
+		});
+	}
+	/** 다이얼로그 엘리먼트를 생성하고 옵션을 적용합니다. */
+	static createDialog(options) {
+		const dialog = new UDialog();
+		dialog.placement = options?.placement || "center";
+		dialog.closable = options?.buttonClose === true;
+		dialog.mode = options?.modal !== false ? "modal" : "non-modal";
+		if (options?.target) dialog.contained = true;
+		if (options?.offset != null) dialog.offset = options.offset;
+		const closeOn = [];
+		if (dialog.closable) closeOn.push("button");
+		if (options?.escapeClose !== false) closeOn.push("escape");
+		if (options?.backdropClose !== false) closeOn.push("backdrop");
+		dialog.closeOn = closeOn;
+		if (options?.title) {
+			const header = document.createElement("span");
+			header.slot = "header";
+			header.textContent = options.title;
+			dialog.prepend(header);
+		}
+		return dialog;
+	}
+};
+//#endregion
+export { Dialog };

package/dist/utilities/OverlayManager.d.ts

@@ -0,0 +1,37 @@
+import { FocusTrap } from 'focus-trap';
+/**
+ * OverlayManager는 열린 오버레이의 스택을 관리합니다.
+ *
+ * - 오버레이 스택 순서 관리 (z-index 자동 증가)
+ * - body scroll lock 참조 카운팅
+ * - topmost 판별 (ESC 키 처리용)
+ * - focus-trap trapStack 공유
+ */
+export declare class OverlayManager {
+    /** 열린 오버레이 스택 */
+    private static readonly stack;
+    /** z-index 카운터 */
+    private static zCounter;
+    /** body scroll lock 참조 카운트 */
+    private static lockCount;
+    /** scroll lock 이전 body overflow 값 */
+    private static savedOverflow;
+    /** focus-trap 공유 trapStack */
+    static readonly trapStack: FocusTrap[];
+    /** 현재 열린 오버레이 수 */
+    static get size(): number;
+    /** 가장 위에 있는 오버레이인지 확인 */
+    static isTopmost(overlay: HTMLElement): boolean;
+    /**
+     * 오버레이를 스택에 등록합니다.
+     * @param overlay 오버레이 엘리먼트
+     * @param lockBody true이면 body scroll lock
+     */
+    static add(overlay: HTMLElement, lockBody?: boolean): void;
+    /**
+     * 오버레이를 스택에서 제거합니다.
+     * @param overlay 오버레이 엘리먼트
+     * @param lockBody add 시 lockBody와 동일한 값
+     */
+    static remove(overlay: HTMLElement, lockBody?: boolean): void;
+}

package/dist/utilities/OverlayManager.js

@@ -0,0 +1,68 @@
+//#region src/utilities/OverlayManager.ts
+/**
+* OverlayManager는 열린 오버레이의 스택을 관리합니다.
+*
+* - 오버레이 스택 순서 관리 (z-index 자동 증가)
+* - body scroll lock 참조 카운팅
+* - topmost 판별 (ESC 키 처리용)
+* - focus-trap trapStack 공유
+*/
+var OverlayManager = class {
+	static {
+		this.stack = [];
+	}
+	static {
+		this.zCounter = 0;
+	}
+	static {
+		this.lockCount = 0;
+	}
+	static {
+		this.savedOverflow = "";
+	}
+	static {
+		this.trapStack = [];
+	}
+	/** 현재 열린 오버레이 수 */
+	static get size() {
+		return this.stack.length;
+	}
+	/** 가장 위에 있는 오버레이인지 확인 */
+	static isTopmost(overlay) {
+		return this.stack.length > 0 && this.stack[this.stack.length - 1] === overlay;
+	}
+	/**
+	* 오버레이를 스택에 등록합니다.
+	* @param overlay 오버레이 엘리먼트
+	* @param lockBody true이면 body scroll lock
+	*/
+	static add(overlay, lockBody = true) {
+		this.stack.push(overlay);
+		overlay.style.zIndex = String(9999 + ++this.zCounter);
+		if (lockBody) {
+			if (this.lockCount === 0) {
+				this.savedOverflow = document.body.style.overflow;
+				document.body.style.overflow = "hidden";
+			}
+			this.lockCount++;
+		}
+	}
+	/**
+	* 오버레이를 스택에서 제거합니다.
+	* @param overlay 오버레이 엘리먼트
+	* @param lockBody add 시 lockBody와 동일한 값
+	*/
+	static remove(overlay, lockBody = true) {
+		const idx = this.stack.indexOf(overlay);
+		if (idx !== -1) this.stack.splice(idx, 1);
+		if (lockBody && this.lockCount > 0) {
+			this.lockCount--;
+			if (this.lockCount === 0) {
+				document.body.style.overflow = this.savedOverflow;
+				this.savedOverflow = "";
+			}
+		}
+	}
+};
+//#endregion
+export { OverlayManager };