@ninebone/util 0.9.190 → 0.9.192

package/dist/nine-util.js

@@ -1192,7 +1192,7 @@ class UxSplitter extends HTMLElement {
       const htmlTmpl = document.createElement("template");
       htmlTmpl.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.190"}/dist/css/nine-util.css";
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.192"}/dist/css/nine-util.css";
 				${customImport}
 			</style>
 			${gripTmpl}
@@ -1527,6 +1527,33 @@ function requireDayjs_min() {
 }
 var dayjs_minExports = requireDayjs_min();
 const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
+class NinePopup extends HTMLElement {
+  static get tagName() {
+    return "nine-popup";
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+			<nine-dialog>
+				<div class="popup-body"></div>
+			</nine-dialog>
+		`;
+  }
+  // 🔓 리액트 엔진이 꽂아 넣을 입구 포인터 개방
+  get popupBody() {
+    var _a2;
+    return ((_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("nine-dialog .popup-body")) || null;
+  }
+  // 🔓 리액트나 외부 유틸에서 직접 제어할 수 있는 제어 통로
+  get dialog() {
+    var _a2;
+    return ((_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("nine-dialog")) || null;
+  }
+}
+if (!customElements.get("nine-popup")) customElements.define("nine-popup", NinePopup);
 class NineUtil {
   constructor() {
     // 📅 1. 날짜 포맷 헬퍼 (인스턴스 메서드)
@@ -1542,31 +1569,31 @@ class NineUtil {
     __publicField(this, "popup", (ContentComponent, options = {}, onCloseCallback = null) => {
       const title = options.title || "Details";
       const componentProps = options.props || {};
-      NinePopup.open(
-        NinePopup,
-        null,
-        // message (일반 얼럿이 아니므로 패스)
-        title,
-        // 십자 드래그 바 헤더에 꽂힐 타이틀명
-        options,
-        // 추가 애니메이션 및 클래스 옵션
-        (el, msg, cfg) => el.render(cfg)
-        // 렌더링 타겟 배선
-      ).then((resultData) => {
-        if (typeof onCloseCallback === "function") {
-          onCloseCallback(resultData);
-        }
-      });
-      const $popupWrapper = document.querySelector(NinePopup.tagName);
-      if ($popupWrapper) {
+      document.querySelectorAll(NinePopup.tagName).forEach((el) => el.remove());
+      const $popupWrapper = document.createElement(NinePopup.tagName);
+      document.body.appendChild($popupWrapper);
+      return new Promise((resolve) => {
         const $bodySpace = $popupWrapper.popupBody;
+        const $dialogComp = $popupWrapper.dialog;
+        if ($dialogComp) $dialogComp.setAttribute("subject", title);
         const root = createRoot($bodySpace);
-        const dialogComp = $popupWrapper.shadowRoot.querySelector("nine-dialog");
-        dialogComp == null ? void 0 : dialogComp.addEventListener("closed", () => {
-          setTimeout(() => root.unmount(), 0);
+        $dialogComp == null ? void 0 : $dialogComp.addEventListener("closed", (e) => {
+          const resultData = e.detail;
+          if (typeof onCloseCallback === "function") onCloseCallback(resultData);
+          resolve(resultData);
+          setTimeout(() => {
+            root.unmount();
+            $popupWrapper.remove();
+          }, 0);
+        });
+        $popupWrapper.addEventListener("request-close", (e) => {
+          $dialogComp == null ? void 0 : $dialogComp.closeWithAnimation(e.detail);
         });
         root.render(React.createElement(ContentComponent, componentProps));
-      }
+        setTimeout(() => {
+          $dialogComp == null ? void 0 : $dialogComp.showModal();
+        }, 0);
+      });
     });
     /**
      * 🎯 2. Shadow DOM 경계를 무력화하고 깊이 상관없이 모든 요소를 수집하는 만능 쿼리
@@ -1620,50 +1647,6 @@ class NineUtil {
   }
 }
 Object.assign(nine$1, new NineUtil());
-let NinePopup$1 = class NinePopup2 extends BasePopup {
-  static get tagName() {
-    return "nine-popup";
-  }
-  constructor() {
-    super();
-  }
-  /**
-   * 뼈대 렌더링 함수 (BasePopup.open의 renderFn으로 바인딩될 녀석)
-   */
-  render(config2) {
-    this.shadowRoot.innerHTML = `
-			<style>
-				:host { display: block; }
-				/* 팝업 창 자체를 감싸는 오버레이 최소한의 방어선 */
-				nine-dialog::part(dialog) {
-					min-width: 500px;
-					max-width: 90%;
-				}
-			</style>
-			<nine-dialog>
-				<div class="popup-body">
-					</div>
-			</nine-dialog>
-		`;
-  }
-  /**
-   * 버튼 이벤트 바인딩 배선 (BasePopup.open의 내부 명세)
-   */
-  setupEvents(resolve, dialogComp) {
-    this.popupBody;
-    this.addEventListener("request-close", (e) => {
-      dialogComp.closeWithAnimation(e.detail);
-    });
-  }
-  // 🔒 만능 동적 팝업 엔진이 리액트 19 루트를 꽂을 입구 게터
-  get popupBody() {
-    var _a2;
-    return ((_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("nine-dialog .popup-body")) || null;
-  }
-};
-if (!customElements.get("nine-popup")) {
-  customElements.define("nine-popup", NinePopup$1);
-}
 nine$1.safe = safe;
 nine$1.api = api;
 nine$1.trace = trace$2;