ninegrid2 6.1345.0 → 6.1346.0

package/dist/bundle.cjs.js

@@ -28568,7 +28568,7 @@ class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+		//this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
@@ -28878,7 +28878,7 @@ class nxPanel extends nxDiv {
 
 customElements.define("nx-panel", nxPanel);
 
-class nxButtons extends nxDiv2 {
+class nxButtons extends nxDiv {
 
 	constructor() {
 		super();

package/dist/bundle.esm.js

@@ -28564,7 +28564,7 @@ class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+		//this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
@@ -28874,7 +28874,7 @@ class nxPanel extends nxDiv {
 
 customElements.define("nx-panel", nxPanel);
 
-class nxButtons extends nxDiv2 {
+class nxButtons extends nxDiv {
 
 	constructor() {
 		super();

package/dist/nx/_nxDiv.js

@@ -135,7 +135,7 @@ export class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+		//this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {

package/dist/nx/nxButtons.js

@@ -1,7 +1,7 @@
 import ninegrid from "../index.js";
-import {nxDiv} from "./_nxDiv2.js";
+import {nxDiv} from "./_nxDiv.js";
 
-class nxButtons extends nxDiv2 {
+class nxButtons extends nxDiv {
 
 	constructor() {
 		super();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.1345.0",
+  "version": "6.1346.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/_nxDiv.js

@@ -135,7 +135,7 @@ export class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+		//this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {

package/src/nx/nxButtons.js

@@ -1,7 +1,7 @@
 import ninegrid from "../index.js";
-import {nxDiv} from "./_nxDiv2.js";
+import {nxDiv} from "./_nxDiv.js";
 
-class nxButtons extends nxDiv2 {
+class nxButtons extends nxDiv {
 
 	constructor() {
 		super();

package/src/nx/_nxDiv2.js

@@ -1,145 +0,0 @@
-import ninegrid from "../index.js";
-
-export class nxDiv2 extends HTMLElement {
-	originContents;
-	#isInitialized = false;
-	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
-
-	constructor() {
-		super();
-		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
-	}
-
-	connectedCallback() {
-		if (!this.#isInitialized) {
-			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
-			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
-			const useShadow = this.getAttribute("use-shadow") !== "false";
-
-			if (useShadow && !this.shadowRoot) {
-				this.attachShadow({ mode: 'open' });
-				this.#root = this.shadowRoot;
-			} else {
-				this.#root = this;
-			}
-
-			this.#init();
-			this.#isInitialized = true;
-			return true;
-		}
-		return false;
-	}
-
-	// 자식 클래스에서 접근 가능하도록 getter 제공
-	get root() {
-		return this.#root || this;
-	}
-
-	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
-	#getElements() {
-		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
-		return ninegrid.querySelectorAll("input[name], textarea[name], select[name], nx-editor[name]", this.#root);
-	}
-
-	getData = () => {
-		const jsonData = {};
-		this.#getElements().forEach(el => {
-			const key = el.name;
-			if (!key) return;
-
-			let value;
-			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
-				value = el.checked;
-			} else {
-				value = el.value;
-			}
-
-			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
-				jsonData[key].push(value);
-			} else {
-				jsonData[key] = value;
-			}
-		});
-		return jsonData;
-	};
-
-	setData = (jsonData) => {
-		this.#getElements().forEach(el => {
-			el.removeEventListener("input", this.#changeHandler);
-			el.addEventListener("input", this.#changeHandler);
-		});
-
-		if (!jsonData || typeof jsonData !== 'object') return;
-
-		let bChanged = false;
-		this.#getElements().forEach(el => {
-			const key = el.name;
-			//console.log(el.tagName, key, el.name);
-
-			if (!key || !jsonData.hasOwnProperty(key)) return;
-
-			const value = jsonData[key];
-
-			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
-
-			if (inputTags.includes(el.tagName)) {
-				if (el.type === "checkbox" || el.type === "radio") {
-					const isChecked = (String(el.value) === String(value));
-					if (el.checked !== isChecked) bChanged = true;
-					el.checked = isChecked;
-				} else {
-					if (el.value !== value) bChanged = true;
-					el.value = value;
-				}
-			} else {
-				if (el.textContent !== value) bChanged = true;
-				el.textContent = value;
-			}
-		});
-		if (bChanged) this.#changed(bChanged);
-	};
-
-	clearData = (bChanged) => {
-
-
-		this.#changed(false);
-	};
-
-	initData = (jsonData) => {
-		this.setData(jsonData);
-		this.#changed(false);
-	};
-
-	#changed = (v) => {
-		const parent = this.closest(".detail-wrapper");
-		if (parent) {
-			const el = parent.querySelector("nx-title2");
-			if (el) el.changed = v;
-		}
-	}
-
-	#changeHandler = (e) => {
-		this.#changed(true);
-	}
-
-	#init = () => {
-		/** CSS style 적용 */
-		for (const attr of this.attributes) {
-			if (attr.name.startsWith("css-")) {
-				this.style.setProperty(attr.name.substring(4), attr.value);
-			}
-		}
-
-		//console.log("=========");
-		//console.log(this.innerHTML.trim());
-
-		this.originContents = this.innerHTML.trim();
-		//this.innerHTML = ""; // 기존 내부 HTML 제거
-
-		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
-		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
-			this.shadowRoot.innerHTML = this.originContents;
-		}
-	};
-}