@iyulab/components 0.4.0 → 1.0.0

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

package/dist/utilities/Theme.js

@@ -1,144 +1,137 @@
-import * as dark from '../assets/styles/dark.css.js';
-import * as light from '../assets/styles/light.css.js';
-import { BrowserStorage } from './BrowserStorage.js';
-
-const styleSheetBundle = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
-
-
+import { BrowserStorage } from "./BrowserStorage.js";
+import dark_css_default from "../_virtual/_glob-assets_raw/dark.css.e8ac080d.js";
+import light_css_default from "../_virtual/_glob-assets_raw/light.css.637cb2f8.js";
+//#region src/utilities/Theme.ts
+/**
+* 스타일 시트 번들 로드, 내부 자산에서 CSS를 인라인으로 가져옵니다.
+* 빌드 시점에 정적 파일을 포함시키기 위해 vite의 `import.meta.glob`을 사용합니다.
+*/
+var internalStyleBundle = Object.entries(/* @__PURE__ */ Object.assign({
+	"../assets/styles/dark.css": dark_css_default,
+	"../assets/styles/light.css": light_css_default
 })).map(([path, module]) => {
-  const name = path.split("/").pop()?.replace(".css", "") || "";
-  return [name, module.default];
+	return [path.split("/").pop()?.replace(".css", "") || "", module];
 }).filter(([name]) => name !== "");
-class Theme {
-  static {
-    this.STORAGE_THEME_KEY = "theme";
-  }
-  static {
-    this.storage = null;
-  }
-  static {
-    this._isInitialized = false;
-  }
-  static {
-    this._isDebugMode = false;
-  }
-  /** 개별 인스턴스 생성을 방지합니다. */
-  constructor() {
-  }
-  static get isInitialized() {
-    return this._isInitialized;
-  }
-  static get isDebugMode() {
-    return this._isDebugMode;
-  }
-  /**
-   * 테마 유틸리티를 초기화합니다.
-   */
-  static async init(options) {
-    this._isDebugMode = options?.debug || false;
-    this.log("init called", { options });
-    if (options?.store) {
-      this.storage = new BrowserStorage(options.store);
-      this.log("store option provided, initializing BrowserStorage");
-    } else {
-      this.storage = null;
-      this.log("no store option provided, skipping BrowserStorage initialization");
-    }
-    const useBuiltIn = options?.useBuiltIn ?? true;
-    if (useBuiltIn) {
-      this.log("Import enabled: loading styles via internal assets");
-      for (let [name, module] of styleSheetBundle) {
-        const style = document.createElement("style");
-        style.setAttribute("data-name", name);
-        style.textContent = module;
-        if (document.head.querySelector(`style[data-name="${name}"]`)) {
-          this.log("style already present, skipping", name);
-          continue;
-        }
-        document.head.appendChild(style);
-        this.log("appended style to head", name);
-      }
-    } else {
-      const styleHead = document.head.querySelectorAll("style[data-name]");
-      styleHead.forEach((el) => el.remove());
-      this.log("Import disabled: removed internal styles from head");
-    }
-    let theme = options?.default ?? "system";
-    if (this.storage !== null) {
-      const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
-      if (savedTheme) {
-        theme = savedTheme;
-        this.log("loaded theme from storage", theme);
-      } else {
-        this.log("no saved theme in storage, using default", theme);
-      }
-    }
-    this.set(theme);
-    this._isInitialized = true;
-    this.log("theme initialized");
-  }
-  /**
-   * 현재 문서에 적용된 테마를 가져옵니다.
-   */
-  static get() {
-    const attr = document.documentElement.getAttribute("data-theme");
-    switch (attr) {
-      case "system":
-        return "system";
-      case "light":
-        return "light";
-      case "dark":
-        return "dark";
-      default:
-        return void 0;
-    }
-  }
-  /**
-   * 현재 문서에 적용할 테마를 설정합니다.
-   */
-  static set(theme) {
-    try {
-      const media = window.matchMedia("(prefers-color-scheme: dark)");
-      if (theme === "system") {
-        document.documentElement.setAttribute("data-theme", "system");
-        media.addEventListener("change", this.handleSystemThemeChanged);
-        this.handleSystemThemeChanged();
-        this.log("system theme applied (data-theme=system)");
-      } else if (theme === "dark") {
-        media.removeEventListener("change", this.handleSystemThemeChanged);
-        document.documentElement.setAttribute("data-theme", "dark");
-        document.documentElement.setAttribute("theme", "dark");
-        this.log("dark theme applied (data-theme=dark, theme=dark)");
-      } else if (theme === "light") {
-        media.removeEventListener("change", this.handleSystemThemeChanged);
-        document.documentElement.setAttribute("data-theme", "light");
-        document.documentElement.setAttribute("theme", "light");
-        this.log("light theme applied (data-theme=light, theme=light)");
-      } else {
-        throw new Error(`Invalid theme: ${theme}. Use 'light', 'dark', or 'system'.`);
-      }
-    } catch (e) {
-      this.log("Error applying theme:", e);
-    }
-    if (this.storage !== null) {
-      this.storage.set(this.STORAGE_THEME_KEY, theme);
-      this.log("saved theme to storage", theme);
-    }
-  }
-  static {
-    /** 시스템 테마 변경을 처리하는 메서드 */
-    this.handleSystemThemeChanged = (_) => {
-      if (document.documentElement.getAttribute("data-theme") === "system") {
-        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
-        this.log("system theme changed, applied", isDark ? "dark" : "light");
-      }
-    };
-  }
-  /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
-  static log(...args) {
-    if (this._isDebugMode) console.log("[theme]", ...args);
-  }
-}
-
+/**
+* 현재 문서에 테마를 적용하고 관리하는 유틸리티 전역 인스턴스입니다.
+*/
+var Theme = class {
+	static {
+		this.STORAGE_THEME_KEY = "theme";
+	}
+	static {
+		this.storage = null;
+	}
+	static {
+		this._isInitialized = false;
+	}
+	static {
+		this._isDebugMode = false;
+	}
+	/** 개별 인스턴스 생성을 방지합니다. */
+	constructor() {}
+	static get isInitialized() {
+		return this._isInitialized;
+	}
+	static get isDebugMode() {
+		return this._isDebugMode;
+	}
+	/**
+	* 테마 유틸리티를 초기화합니다.
+	*/
+	static async init(options) {
+		this._isDebugMode = options?.debug || false;
+		this.log("init called", { options });
+		if (options?.store) {
+			this.storage = new BrowserStorage(options.store);
+			this.log("store option provided, initializing BrowserStorage");
+		} else {
+			this.storage = null;
+			this.log("no store option provided, skipping BrowserStorage initialization");
+		}
+		if (options?.useBuiltIn ?? true) {
+			this.log("Import enabled: loading styles via internal assets");
+			for (let [name, module] of internalStyleBundle) {
+				const style = document.createElement("style");
+				style.setAttribute("data-name", name);
+				style.textContent = module;
+				if (document.head.querySelector(`style[data-name="${name}"]`)) {
+					this.log("style already present, skipping", name);
+					continue;
+				}
+				document.head.appendChild(style);
+				this.log("appended style to head", name);
+			}
+		} else {
+			document.head.querySelectorAll("style[data-name]").forEach((el) => el.remove());
+			this.log("Import disabled: removed internal styles from head");
+		}
+		let theme = options?.default ?? "system";
+		if (this.storage !== null) {
+			const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
+			if (savedTheme) {
+				theme = savedTheme;
+				this.log("loaded theme from storage", theme);
+			} else this.log("no saved theme in storage, using default", theme);
+		}
+		this.set(theme);
+		this._isInitialized = true;
+		this.log("theme initialized");
+	}
+	/**
+	* 현재 문서에 적용된 테마를 가져옵니다.
+	*/
+	static get() {
+		switch (document.documentElement.getAttribute("data-theme")) {
+			case "system": return "system";
+			case "light": return "light";
+			case "dark": return "dark";
+			default: return;
+		}
+	}
+	/**
+	* 현재 문서에 적용할 테마를 설정합니다.
+	*/
+	static set(theme) {
+		try {
+			const media = window.matchMedia("(prefers-color-scheme: dark)");
+			if (theme === "system") {
+				document.documentElement.setAttribute("data-theme", "system");
+				media.addEventListener("change", this.handleSystemThemeChanged);
+				this.handleSystemThemeChanged();
+				this.log("system theme applied (data-theme=system)");
+			} else if (theme === "dark") {
+				media.removeEventListener("change", this.handleSystemThemeChanged);
+				document.documentElement.setAttribute("data-theme", "dark");
+				document.documentElement.setAttribute("theme", "dark");
+				this.log("dark theme applied (data-theme=dark, theme=dark)");
+			} else if (theme === "light") {
+				media.removeEventListener("change", this.handleSystemThemeChanged);
+				document.documentElement.setAttribute("data-theme", "light");
+				document.documentElement.setAttribute("theme", "light");
+				this.log("light theme applied (data-theme=light, theme=light)");
+			} else throw new Error(`Invalid theme: ${theme}. Use 'light', 'dark', or 'system'.`);
+		} catch (e) {
+			this.log("Error applying theme:", e);
+		}
+		if (this.storage !== null) {
+			this.storage.set(this.STORAGE_THEME_KEY, theme);
+			this.log("saved theme to storage", theme);
+		}
+	}
+	static {
+		this.handleSystemThemeChanged = (_) => {
+			if (document.documentElement.getAttribute("data-theme") === "system") {
+				const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+				document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
+				this.log("system theme changed, applied", isDark ? "dark" : "light");
+			}
+		};
+	}
+	/** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
+	static log(...args) {
+		if (this._isDebugMode) console.log("[theme]", ...args);
+	}
+};
+//#endregion
 export { Theme };

package/dist/utilities/Toast.d.ts

@@ -0,0 +1,45 @@
+import { AlertVariant, AlertStatus } from '../components/alert/UAlert.js';
+/** 토스트 알림의 화면 위치 타입 */
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** 토스트 알림 옵션 */
+export interface ToastOptions {
+    /** 토스트를 표시할 대상 엘리먼트 (기본: document.body) */
+    target?: HTMLElement;
+    /** 형태 스타일 */
+    variant?: AlertVariant;
+    /** 알림 제목 */
+    title?: string;
+    /** 표시 화면 위치 */
+    position?: ToastPosition;
+    /** 알림 표시 시간 (밀리초 단위) */
+    duration?: number;
+    /** 닫기 버튼 표시 여부 */
+    closable?: boolean;
+}
+/**
+ * 토스트 알림 유틸리티 클래스입니다.
+ */
+export declare class Toast {
+    private static containers;
+    private static elements;
+    /** 개별 인스턴스 생성을 방지합니다. */
+    private constructor();
+    /** 기본 메시지 알림 */
+    static message(content: string, options?: ToastOptions): Promise<void>;
+    /** 일반 알림 */
+    static notice(content: string, options?: ToastOptions): Promise<void>;
+    /** 정보 알림 */
+    static info(content: string, options?: ToastOptions): Promise<void>;
+    /** 성공 알림 */
+    static success(content: string, options?: ToastOptions): Promise<void>;
+    /** 경고 알림 */
+    static warning(content: string, options?: ToastOptions): Promise<void>;
+    /** 에러 알림 */
+    static error(content: string, options?: ToastOptions): Promise<void>;
+    /** 토스트 알림을 생성합니다. */
+    static show(status?: AlertStatus, content?: string, options?: ToastOptions): Promise<void>;
+    /** 컨테이너 키를 생성합니다. */
+    private static getContainerKey;
+    /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+    private static getOrCreateContainer;
+}