ninegrid2 6.1258.0 → 6.1260.0

package/dist/bundle.cjs.js

@@ -121961,18 +121961,10 @@ class nxDiv extends HTMLElement {
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		/**
-		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
-		if (this.shadowRoot) {
-			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
-			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
-			if (this.tagName.toLowerCase() === 'nx-div') {
-				this.shadowRoot.innerHTML = this.originContents;
-			}
-			this.innerHTML = "";
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
 		}
-		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
-			*/
 	};
 }
 
@@ -122269,6 +122261,8 @@ class nxButtons extends nxDiv {
 	};
 
 	#init = () => {
+		const target = this.shadowRoot || this;
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -122279,7 +122273,24 @@ class nxButtons extends nxDiv {
 			${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		target.appendChild(htmlTmpl.content.cloneNode(true));
+
+		target.addEventListener('click', (e) => {
+			const btn = e.target.closest('button');
+			if (!btn) return;
+
+			const actionName = btn.getAttribute('on-click') || btn.getAttribute('onClick') || btn.getAttribute('onclick');
+			if (actionName) {
+				// 1. 먼저 엘리먼트 자체(this)에 해당 이름의 함수가 있는지 확인
+				if (typeof this[actionName] === 'function') {
+					this[actionName](e);
+				}
+				// 2. 없으면 전역 window에서 확인
+				else if (typeof window[actionName] === 'function') {
+					window[actionName](e);
+				}
+			}
+		});
 	}
 }
 

package/dist/bundle.esm.js

@@ -121957,18 +121957,10 @@ class nxDiv extends HTMLElement {
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		/**
-		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
-		if (this.shadowRoot) {
-			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
-			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
-			if (this.tagName.toLowerCase() === 'nx-div') {
-				this.shadowRoot.innerHTML = this.originContents;
-			}
-			this.innerHTML = "";
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
 		}
-		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
-			*/
 	};
 }
 
@@ -122265,6 +122257,8 @@ class nxButtons extends nxDiv {
 	};
 
 	#init = () => {
+		const target = this.shadowRoot || this;
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -122275,7 +122269,24 @@ class nxButtons extends nxDiv {
 			${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		target.appendChild(htmlTmpl.content.cloneNode(true));
+
+		target.addEventListener('click', (e) => {
+			const btn = e.target.closest('button');
+			if (!btn) return;
+
+			const actionName = btn.getAttribute('on-click') || btn.getAttribute('onClick') || btn.getAttribute('onclick');
+			if (actionName) {
+				// 1. 먼저 엘리먼트 자체(this)에 해당 이름의 함수가 있는지 확인
+				if (typeof this[actionName] === 'function') {
+					this[actionName](e);
+				}
+				// 2. 없으면 전역 window에서 확인
+				else if (typeof window[actionName] === 'function') {
+					window[actionName](e);
+				}
+			}
+		});
 	}
 }
 

package/dist/nx/_nxDiv.js

@@ -123,17 +123,9 @@ export class nxDiv extends HTMLElement {
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		/**
-		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
-		if (this.shadowRoot) {
-			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
-			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
-			if (this.tagName.toLowerCase() === 'nx-div') {
-				this.shadowRoot.innerHTML = this.originContents;
-			}
-			this.innerHTML = "";
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
 		}
-		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
-			*/
 	};
 }

package/dist/nx/nxButtons.js

@@ -12,6 +12,8 @@ class nxButtons extends nxDiv {
 	};
 
 	#init = () => {
+		const target = this.shadowRoot || this;
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -22,7 +24,24 @@ class nxButtons extends nxDiv {
 			${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		target.appendChild(htmlTmpl.content.cloneNode(true));
+
+		target.addEventListener('click', (e) => {
+			const btn = e.target.closest('button');
+			if (!btn) return;
+
+			const actionName = btn.getAttribute('on-click') || btn.getAttribute('onClick') || btn.getAttribute('onclick');
+			if (actionName) {
+				// 1. 먼저 엘리먼트 자체(this)에 해당 이름의 함수가 있는지 확인
+				if (typeof this[actionName] === 'function') {
+					this[actionName](e);
+				}
+				// 2. 없으면 전역 window에서 확인
+				else if (typeof window[actionName] === 'function') {
+					window[actionName](e);
+				}
+			}
+		});
 	}
 }
 

package/package.json

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

package/src/nx/_nxDiv.js

@@ -123,17 +123,9 @@ export class nxDiv extends HTMLElement {
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		/**
-		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
-		if (this.shadowRoot) {
-			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
-			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
-			if (this.tagName.toLowerCase() === 'nx-div') {
-				this.shadowRoot.innerHTML = this.originContents;
-			}
-			this.innerHTML = "";
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
 		}
-		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
-			*/
 	};
 }

package/src/nx/nxButtons.js

@@ -12,6 +12,8 @@ class nxButtons extends nxDiv {
 	};
 
 	#init = () => {
+		const target = this.shadowRoot || this;
+
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -22,7 +24,24 @@ class nxButtons extends nxDiv {
 			${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		target.appendChild(htmlTmpl.content.cloneNode(true));
+
+		target.addEventListener('click', (e) => {
+			const btn = e.target.closest('button');
+			if (!btn) return;
+
+			const actionName = btn.getAttribute('on-click') || btn.getAttribute('onClick') || btn.getAttribute('onclick');
+			if (actionName) {
+				// 1. 먼저 엘리먼트 자체(this)에 해당 이름의 함수가 있는지 확인
+				if (typeof this[actionName] === 'function') {
+					this[actionName](e);
+				}
+				// 2. 없으면 전역 window에서 확인
+				else if (typeof window[actionName] === 'function') {
+					window[actionName](e);
+				}
+			}
+		});
 	}
 }