@ninebone/util 1.0.35 → 1.0.36

package/dist/nine-util.js

@@ -1313,7 +1313,7 @@ class UxSplitter extends HTMLElement {
       const htmlTmpl = document.createElement("template");
       htmlTmpl.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"1.0.35"}/dist/css/nine-util.css";
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"1.0.36"}/dist/css/nine-util.css";
 				${customImport}
 			</style>
 			${gripTmpl}
@@ -1732,6 +1732,44 @@ const TreeUtil = {
     return result;
   }
 };
+class NineSimplePopup extends HTMLElement {
+  static get tagName() {
+    return "nine-simple-popup";
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    const titleText = this.getAttribute("subject") || "Details";
+    this.innerHTML = `
+			<div class="ns-popup-overlay">
+				<div class="ns-popup-dialog">
+					<div class="ns-popup-header">
+						<span class="ns-popup-title">${titleText}</span>
+						<button class="ns-popup-close-btn">&times;</button>
+					</div>
+					<div class="ns-popup-body"></div>
+				</div>
+			</div>
+		`;
+    this.querySelector(".ns-popup-close-btn").onclick = () => this.close(null);
+    this.querySelector(".ns-popup-overlay").onclick = (e) => {
+      if (e.target.classList.contains("ns-popup-overlay")) {
+        this.close(null);
+      }
+    };
+  }
+  close(returnValue = null) {
+    this.dispatchEvent(new CustomEvent("closed", { detail: returnValue }));
+    this.remove();
+  }
+  get popupBody() {
+    return this.querySelector(".ns-popup-body") || null;
+  }
+}
+if (!customElements.get("nine-simple-popup")) {
+  customElements.define("nine-simple-popup", NineSimplePopup);
+}
 class NineUtil {
   constructor() {
     // 📅 1. 날짜 포맷 헬퍼 (인스턴스 메서드)
@@ -1767,6 +1805,30 @@ class NineUtil {
         }, 0);
       });
     });
+    /**
+     * 🎯 Non-Shadow DOM 기반의 자유로운 팝업 오픈 메서드
+     */
+    __publicField(this, "simplePopup", (ContentComponent, param = {}, title = "Details") => {
+      document.querySelectorAll(NineSimplePopup.tagName).forEach((el) => el.remove());
+      const $popupWrapper = document.createElement(NineSimplePopup.tagName);
+      if (title) $popupWrapper.setAttribute("subject", title);
+      document.body.appendChild($popupWrapper);
+      return new Promise((resolve) => {
+        const $bodySpace = $popupWrapper.popupBody;
+        const root = createRoot($bodySpace);
+        $popupWrapper.addEventListener("closed", (e) => {
+          resolve(e.detail);
+          setTimeout(() => {
+            root.unmount();
+            $popupWrapper.remove();
+          }, 0);
+        });
+        root.render(React.createElement(ContentComponent, {
+          data: param,
+          onClose: (result) => $popupWrapper.close(result)
+        }));
+      });
+    });
     /**
      * 🎯 2. Shadow DOM 경계를 무력화하고 깊이 상관없이 모든 요소를 수집하는 만능 쿼리
      * @param {string} selector - 찾고자 하는 CSS 선택자 (예: 'input[name]')