ninegrid2 6.1253.0 → 6.1256.0

package/dist/bundle.cjs.js

@@ -121841,12 +121841,13 @@ customElements.define("nx-title", nxTitle);
 class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
 
 	constructor() {
 		super();
-		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
-		const useShadow = this.getAttribute("use-shadow") !== "false";
+		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
+		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
+		const useShadow = this.getAttribute("use-shadow") === "true";
 
 		if (useShadow) {
 			this.attachShadow({ mode: 'open' });
@@ -121865,16 +121866,16 @@ class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
-	#getElements() {
-		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
-	}
-
-	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	// 자식에서 접근 가능한 root getter
 	get root() {
 		return this.#root;
 	}
 
+	// root에 따라 엘리먼트 탐색
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -121914,9 +121915,8 @@ class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					const isChecked = (String(el.value) === String(value));
-					if (el.checked !== isChecked) bChanged = true;
-					el.checked = isChecked;
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -121926,7 +121926,6 @@ class nxDiv extends HTMLElement {
 				el.textContent = value;
 			}
 		});
-
 		if (bChanged) this.#changed(bChanged);
 	};
 
@@ -121955,25 +121954,20 @@ class nxDiv extends HTMLElement {
 			}
 		}
 
-		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
-		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
-			return; // 이미 내용이 있으면 중복 실행 방지
-		}
+		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
+		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
 
-		// 3. HTML 내용 처리
+		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
 
+		// 4. Shadow DOM 사용 시에만 비우고 옮기기
 		if (this.shadowRoot) {
-			// Shadow DOM 모드일 때
-			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
-			// 기본 뼈대만 잡아야 합니다.
-			if (this.shadowRoot.innerHTML === "") {
+			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
+			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-
-			// 중요: React가 다시 자식을 채우지 않도록 비우되,
-			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
-			this.innerHTML = "";
+			this.innerHTML = ""; // Light DOM 비움
 		}
 	};
 }

package/dist/bundle.esm.js

@@ -121837,12 +121837,13 @@ customElements.define("nx-title", nxTitle);
 class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
 
 	constructor() {
 		super();
-		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
-		const useShadow = this.getAttribute("use-shadow") !== "false";
+		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
+		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
+		const useShadow = this.getAttribute("use-shadow") === "true";
 
 		if (useShadow) {
 			this.attachShadow({ mode: 'open' });
@@ -121861,16 +121862,16 @@ class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
-	#getElements() {
-		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
-	}
-
-	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	// 자식에서 접근 가능한 root getter
 	get root() {
 		return this.#root;
 	}
 
+	// root에 따라 엘리먼트 탐색
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -121910,9 +121911,8 @@ class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					const isChecked = (String(el.value) === String(value));
-					if (el.checked !== isChecked) bChanged = true;
-					el.checked = isChecked;
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -121922,7 +121922,6 @@ class nxDiv extends HTMLElement {
 				el.textContent = value;
 			}
 		});
-
 		if (bChanged) this.#changed(bChanged);
 	};
 
@@ -121951,25 +121950,20 @@ class nxDiv extends HTMLElement {
 			}
 		}
 
-		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
-		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
-			return; // 이미 내용이 있으면 중복 실행 방지
-		}
+		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
+		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
 
-		// 3. HTML 내용 처리
+		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
 
+		// 4. Shadow DOM 사용 시에만 비우고 옮기기
 		if (this.shadowRoot) {
-			// Shadow DOM 모드일 때
-			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
-			// 기본 뼈대만 잡아야 합니다.
-			if (this.shadowRoot.innerHTML === "") {
+			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
+			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-
-			// 중요: React가 다시 자식을 채우지 않도록 비우되,
-			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
-			this.innerHTML = "";
+			this.innerHTML = ""; // Light DOM 비움
 		}
 	};
 }

package/dist/nx/_nxDiv.js

@@ -3,12 +3,13 @@ import ninegrid from "../index.js";
 export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
 
 	constructor() {
 		super();
-		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
-		const useShadow = this.getAttribute("use-shadow") !== "false";
+		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
+		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
+		const useShadow = this.getAttribute("use-shadow") === "true";
 
 		if (useShadow) {
 			this.attachShadow({ mode: 'open' });
@@ -27,16 +28,16 @@ export class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
-	#getElements() {
-		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
-	}
-
-	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	// 자식에서 접근 가능한 root getter
 	get root() {
 		return this.#root;
 	}
 
+	// root에 따라 엘리먼트 탐색
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -76,9 +77,8 @@ export class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					const isChecked = (String(el.value) === String(value));
-					if (el.checked !== isChecked) bChanged = true;
-					el.checked = isChecked;
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -88,7 +88,6 @@ export class nxDiv extends HTMLElement {
 				el.textContent = value;
 			}
 		});
-
 		if (bChanged) this.#changed(bChanged);
 	};
 
@@ -117,25 +116,20 @@ export class nxDiv extends HTMLElement {
 			}
 		}
 
-		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
-		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
-			return; // 이미 내용이 있으면 중복 실행 방지
-		}
+		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
+		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
 
-		// 3. HTML 내용 처리
+		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
 
+		// 4. Shadow DOM 사용 시에만 비우고 옮기기
 		if (this.shadowRoot) {
-			// Shadow DOM 모드일 때
-			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
-			// 기본 뼈대만 잡아야 합니다.
-			if (this.shadowRoot.innerHTML === "") {
+			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
+			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-
-			// 중요: React가 다시 자식을 채우지 않도록 비우되,
-			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
-			this.innerHTML = "";
+			this.innerHTML = ""; // Light DOM 비움
 		}
 	};
 }

package/package.json

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

package/src/nx/_nxDiv.js

@@ -3,12 +3,13 @@ import ninegrid from "../index.js";
 export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
 
 	constructor() {
 		super();
-		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
-		const useShadow = this.getAttribute("use-shadow") !== "false";
+		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
+		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
+		const useShadow = this.getAttribute("use-shadow") === "true";
 
 		if (useShadow) {
 			this.attachShadow({ mode: 'open' });
@@ -27,16 +28,16 @@ export class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
-	#getElements() {
-		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
-	}
-
-	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	// 자식에서 접근 가능한 root getter
 	get root() {
 		return this.#root;
 	}
 
+	// root에 따라 엘리먼트 탐색
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -76,9 +77,8 @@ export class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					const isChecked = (String(el.value) === String(value));
-					if (el.checked !== isChecked) bChanged = true;
-					el.checked = isChecked;
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -88,7 +88,6 @@ export class nxDiv extends HTMLElement {
 				el.textContent = value;
 			}
 		});
-
 		if (bChanged) this.#changed(bChanged);
 	};
 
@@ -117,25 +116,20 @@ export class nxDiv extends HTMLElement {
 			}
 		}
 
-		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
-		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
-			return; // 이미 내용이 있으면 중복 실행 방지
-		}
+		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
+		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
 
-		// 3. HTML 내용 처리
+		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
 
+		// 4. Shadow DOM 사용 시에만 비우고 옮기기
 		if (this.shadowRoot) {
-			// Shadow DOM 모드일 때
-			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
-			// 기본 뼈대만 잡아야 합니다.
-			if (this.shadowRoot.innerHTML === "") {
+			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
+			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-
-			// 중요: React가 다시 자식을 채우지 않도록 비우되,
-			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
-			this.innerHTML = "";
+			this.innerHTML = ""; // Light DOM 비움
 		}
 	};
 }