@ninebone/util 0.9.185 → 0.9.188

package/dist/css/nine-util.css

@@ -49,3 +49,15 @@
 	}
 }
 
+:host(nine-popup) {
+	display: none; position: fixed; top:0; left:0; width:100vw; height:100vh; z-index: 9999;
+	&.open {
+		display: block;
+	}
+	.popup-dimmed { position:absolute; 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: 400px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
+	.popup-header { padding: 15px; border-bottom: 1px solid #eee; font-weight: bold; }
+	.popup-body { padding: 20px; min-height: 150px; }
+}
+
+

package/dist/nine-util.js

@@ -9,7 +9,9 @@ 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;
+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;
+import React from "react";
+import { createRoot } from "react-dom/client";
 const listeners = /* @__PURE__ */ new Set();
 const _initialConfig = {
   ux: { nativeOverride: false, theme: "light" },
@@ -1185,12 +1187,13 @@ class UxSplitter extends HTMLElement {
       this.classList.add(__privateGet(this, _mode));
       const contents = this.innerHTML.trim();
       const gripTmpl = contents === "" ? `<div class="grip"></div>` : `<div class="grip"></div><div class="inner-container">${contents}</div><div class="grip"></div>`;
+      const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-util.css";` : "";
       this.innerHTML = "";
       const htmlTmpl = document.createElement("template");
       htmlTmpl.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.185"}/dist/css/nine-util.css";
-				${this.cssPath ? `@import "${this.cssPath}";` : ""}
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.188"}/dist/css/nine-util.css";
+				${customImport}
 			</style>
 			${gripTmpl}
         `;
@@ -1530,6 +1533,29 @@ class NineUtil {
     __publicField(this, "formatDate", (v, fmt) => {
       return dayjs(v).format(fmt);
     });
+    /**
+     * 🔮 2. 함수 호출형 만능 동적 팝업 엔진
+     * @param {React.Component} ContentComponent - 팝업 내부에 띄울 리액트 컴포넌트 알맹이
+     * @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) => {
+        if (typeof onCloseCallback === "function") {
+          onCloseCallback(resultData);
+        }
+        setTimeout(() => {
+          root.unmount();
+          $popupWrapper.remove();
+        }, 300);
+      };
+      root.render(React.createElement(ContentComponent, props));
+      setTimeout(() => $popupWrapper.open(), 0);
+    });
     /**
      * 🎯 2. Shadow DOM 경계를 무력화하고 깊이 상관없이 모든 요소를 수집하는 만능 쿼리
      * @param {string} selector - 찾고자 하는 CSS 선택자 (예: 'input[name]')
@@ -1582,6 +1608,82 @@ class NineUtil {
   }
 }
 Object.assign(nine$1, new NineUtil());
+class NinePopup extends HTMLElement {
+  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");
+  }
+  close(callbackData = null) {
+    this.classList.remove("open");
+    if (typeof __privateGet(this, _onCloseCallback) === "function") {
+      __privateGet(this, _onCloseCallback).call(this, callbackData);
+    }
+  }
+  // 🔒 만능 동적 팝업 엔진(NineUtil) 전용 입구 개방
+  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);
+  }
+  $dimmed.appendChild($content);
+  this.shadowRoot.appendChild($dimmed);
+};
+if (!customElements.get("nine-popup")) customElements.define("nine-popup", NinePopup);
 nine$1.safe = safe;
 nine$1.api = api;
 nine$1.trace = trace$2;