@ninebone/util 0.9.184 → 0.9.187

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, _root, _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.184"}/dist/css/nine-util.css";
-				${this.cssPath ? `@import "${this.cssPath}";` : ""}
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.187"}/dist/css/nine-util.css";
+				${customImport}
 			</style>
 			${gripTmpl}
         `;
@@ -1526,13 +1529,155 @@ var dayjs_minExports = requireDayjs_min();
 const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
 class NineUtil {
   constructor() {
-    // static 필드는 클래스 자체에 저장됨
+    // 📅 1. 날짜 포맷 헬퍼 (인스턴스 메서드)
     __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]')
+     * @param {HTMLElement|ShadowRoot|Document} root - 탐색 시작점
+     * @returns {HTMLElement[]} 매칭된 자바스크립트 DOM 엘리먼트 배열
+     */
+    __publicField(this, "querySelectorAll", (selector, root = document) => {
+      const results = [];
+      const search = (node) => {
+        var _a2;
+        if (!node) return;
+        if (node.shadowRoot) {
+          search(node.shadowRoot);
+        }
+        (_a2 = node.querySelectorAll) == null ? void 0 : _a2.call(node, selector).forEach((elem) => {
+          if (!results.includes(elem)) {
+            results.push(elem);
+          }
+        });
+        const children = node.children ? Array.from(node.children) : [];
+        children.forEach((child) => {
+          search(child);
+        });
+      };
+      search(root);
+      return results;
+    });
+    /**
+     * 🎯 3. Shadow DOM 경계를 뚫고 가장 먼저 매칭되는 단 하나의 요소를 반환 (조기 종료 최적화)
+     * @param {string} selector - 찾고자 하는 CSS 선택자
+     * @param {HTMLElement|ShadowRoot|Document} root - 탐색 시작점
+     * @returns {HTMLElement|null} 매칭된 엘리먼트 객체 또는 null
+     */
+    __publicField(this, "querySelector", (selector, root = document) => {
+      var _a2;
+      if (!root) return null;
+      let found = (_a2 = root.querySelector) == null ? void 0 : _a2.call(root, selector);
+      if (found) return found;
+      if (root.shadowRoot) {
+        found = this.querySelector(selector, root.shadowRoot);
+        if (found) return found;
+      }
+      const children = root.children ? Array.from(root.children) : [];
+      for (const child of children) {
+        found = this.querySelector(selector, child);
+        if (found) return found;
+      }
+      return null;
+    });
   }
 }
 Object.assign(nine$1, new NineUtil());
+class NinePopup extends HTMLElement {
+  // 🔒 Shadow DOM 루트를 담을 주머니
+  constructor() {
+    super();
+    __privateAdd(this, _NinePopup_instances);
+    __privateAdd(this, _onCloseCallback, null);
+    __privateAdd(this, _isInitialized, false);
+    __privateAdd(this, _root);
+  }
+  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" });
+    }
+    __privateSet(this, _root, this.shadowRoot);
+    __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)이 Shadow DOM 내부의 바디 공간을 찾을 수 있도록 통로 개방
+  get popupBody() {
+    var _a2;
+    return ((_a2 = __privateGet(this, _root)) == null ? void 0 : _a2.querySelector(".popup-body")) || null;
+  }
+}
+_onCloseCallback = new WeakMap();
+_isInitialized = new WeakMap();
+_root = new WeakMap();
+_NinePopup_instances = new WeakSet();
+renderStructure_fn = function() {
+  if (__privateGet(this, _root).querySelector(".popup-dimmed")) return;
+  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";
+  const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-util.css";` : "";
+  $content.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"0.9.187"}/dist/css/nine-util.css";
+				${customImport}
+			</style>
+			
+			<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);
+  __privateGet(this, _root).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;