@ninebone/util 0.9.188 → 0.9.190

package/dist/nine-util.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _name, _color, _Trace_instances, isTraceEnabled_fn, _a, _timer, _queue, _delay, _TaskDebouncer_instances, flush_fn, _request, _shift, _dialog, _init, _onMouseDown, _onTouchStart, _NineUxUtil_instances, prepare_fn, _mode, _detectMode, _startDrag, _init2, _prepareLayout, _onCloseCallback, _isInitialized, _NinePopup_instances, renderStructure_fn;
+var _name, _color, _Trace_instances, isTraceEnabled_fn, _a, _timer, _queue, _delay, _TaskDebouncer_instances, flush_fn, _request, _shift, _dialog, _init, _onMouseDown, _onTouchStart, _NineUxUtil_instances, prepare_fn, _mode, _detectMode, _startDrag, _init2, _prepareLayout;
 import React from "react";
 import { createRoot } from "react-dom/client";
 const listeners = /* @__PURE__ */ new Set();
@@ -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.188"}/dist/css/nine-util.css";
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.190"}/dist/css/nine-util.css";
 				${customImport}
 			</style>
 			${gripTmpl}
@@ -1539,22 +1539,34 @@ class NineUtil {
      * @param {Object} props - 팝업 알맹이에 넘겨줄 Props 데이터 (선택)
      * @param {Function} onCloseCallback - 팝업이 닫힐 때 데이터를 받아먹을 콜백 함수 (선택)
      */
-    __publicField(this, "popup", (ContentComponent, props = {}, onCloseCallback = null) => {
-      const $popupWrapper = document.createElement("nine-popup");
-      document.body.appendChild($popupWrapper);
-      const $bodySpace = $popupWrapper.popupBody || $popupWrapper;
-      const root = createRoot($bodySpace);
-      $popupWrapper.onclose = (resultData) => {
+    __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);
         }
-        setTimeout(() => {
-          root.unmount();
-          $popupWrapper.remove();
-        }, 300);
-      };
-      root.render(React.createElement(ContentComponent, props));
-      setTimeout(() => $popupWrapper.open(), 0);
+      });
+      const $popupWrapper = document.querySelector(NinePopup.tagName);
+      if ($popupWrapper) {
+        const $bodySpace = $popupWrapper.popupBody;
+        const root = createRoot($bodySpace);
+        const dialogComp = $popupWrapper.shadowRoot.querySelector("nine-dialog");
+        dialogComp == null ? void 0 : dialogComp.addEventListener("closed", () => {
+          setTimeout(() => root.unmount(), 0);
+        });
+        root.render(React.createElement(ContentComponent, componentProps));
+      }
     });
     /**
      * 🎯 2. Shadow DOM 경계를 무력화하고 깊이 상관없이 모든 요소를 수집하는 만능 쿼리
@@ -1608,82 +1620,50 @@ class NineUtil {
   }
 }
 Object.assign(nine$1, new NineUtil());
-class NinePopup extends HTMLElement {
+let NinePopup$1 = class NinePopup2 extends BasePopup {
+  static get tagName() {
+    return "nine-popup";
+  }
   constructor() {
     super();
-    __privateAdd(this, _NinePopup_instances);
-    __privateAdd(this, _onCloseCallback, null);
-    __privateAdd(this, _isInitialized, false);
-  }
-  get _onCloseCallback() {
-    return __privateGet(this, _onCloseCallback);
-  }
-  set onclose(callbackFunc) {
-    if (typeof callbackFunc === "function") __privateSet(this, _onCloseCallback, callbackFunc);
-  }
-  connectedCallback() {
-    if (__privateGet(this, _isInitialized)) return;
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-    }
-    __privateMethod(this, _NinePopup_instances, renderStructure_fn).call(this);
-    __privateSet(this, _isInitialized, true);
   }
-  open() {
-    this.classList.add("open");
+  /**
+   * 뼈대 렌더링 함수 (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>
+		`;
   }
-  close(callbackData = null) {
-    this.classList.remove("open");
-    if (typeof __privateGet(this, _onCloseCallback) === "function") {
-      __privateGet(this, _onCloseCallback).call(this, callbackData);
-    }
+  /**
+   * 버튼 이벤트 바인딩 배선 (BasePopup.open의 내부 명세)
+   */
+  setupEvents(resolve, dialogComp) {
+    this.popupBody;
+    this.addEventListener("request-close", (e) => {
+      dialogComp.closeWithAnimation(e.detail);
+    });
   }
-  // 🔒 만능 동적 팝업 엔진(NineUtil) 전용 입구 개방
+  // 🔒 만능 동적 팝업 엔진이 리액트 19 루트를 꽂을 입구 게터
   get popupBody() {
     var _a2;
-    return ((_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".popup-body")) || null;
-  }
-}
-_onCloseCallback = new WeakMap();
-_isInitialized = new WeakMap();
-_NinePopup_instances = new WeakSet();
-renderStructure_fn = function() {
-  if (this.shadowRoot.querySelector(".popup-dimmed")) return;
-  const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-util.css";` : "";
-  const $styleTmpl = document.createElement("template");
-  $styleTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.188"}/dist/css/nine-util.css";
-				${customImport}
-				
-				:host { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; }
-				:host(.open) { display: block; }
-				.popup-dimmed { position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; }
-				.popup-content { background: #fff; border-radius: 8px; min-width: 500px; max-width: 90%; box-shadow: 0 4px 15px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
-				.popup-header { padding: 15px 20px; border-bottom: 1px solid #eee; font-weight: bold; background: #f9f9f9; }
-				.popup-body { padding: 20px; min-height: 150px; overflow-y: auto; }
-			</style>
-		`;
-  this.shadowRoot.appendChild($styleTmpl.content.cloneNode(true));
-  const $dimmed = document.createElement("div");
-  $dimmed.className = "popup-dimmed";
-  $dimmed.addEventListener("click", (e) => {
-    if (e.target === $dimmed) this.close();
-  });
-  const $content = document.createElement("div");
-  $content.className = "popup-content";
-  $content.innerHTML = `
-			<div class="popup-header"></div>
-			<div class="popup-body"></div>
-		`;
-  const $bodySpace = $content.querySelector(".popup-body");
-  while (this.firstChild) {
-    $bodySpace.appendChild(this.firstChild);
+    return ((_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("nine-dialog .popup-body")) || null;
   }
-  $dimmed.appendChild($content);
-  this.shadowRoot.appendChild($dimmed);
 };
-if (!customElements.get("nine-popup")) customElements.define("nine-popup", NinePopup);
+if (!customElements.get("nine-popup")) {
+  customElements.define("nine-popup", NinePopup$1);
+}
 nine$1.safe = safe;
 nine$1.api = api;
 nine$1.trace = trace$2;