ninegrid2 6.1173.0 → 6.1175.0

package/dist/bundle.cjs.js

@@ -121803,6 +121803,125 @@ class nxTitle extends HTMLElement {
 
 customElements.define("nx-title", nxTitle);
 
+class nxDiv extends HTMLElement
+{
+	originContents;
+	#isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			return true;
+		}
+
+		return false;
+	}
+
+	getData = () => {
+		const jsonData = {};
+
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
+
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
+
+			// 중복 name을 대비한 배열 처리
+			if (jsonData[key]) {
+				if (!Array.isArray(jsonData[key])) {
+					jsonData[key] = [jsonData[key]];
+				}
+				jsonData[key].push(value);
+			} else {
+				jsonData[key] = value;
+			}
+		});
+
+		return jsonData;
+	};
+
+	setData = (jsonData) => {
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key || !jsonData.hasOwnProperty(key)) return;
+
+			const value = jsonData[key];
+
+			// 폼 요소에만 데이터를 설정합니다.
+			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+				if (el.type === "checkbox" || el.type === "radio") {
+					el.checked = (el.value === String(value));
+				} else {
+					el.value = value;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				el.textContent = value;
+			}
+		});
+	};
+
+	#init = () => {
+
+		/**
+		 * css style 적용
+		 */
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+	};
+}
+
+class nxTitle2 extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";
+				${ninegrid.getCustomPath(this,"nxTitle2.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title2", nxTitle2);
+
 class NxLayout extends HTMLElement {
 
 	#originalChildren;
@@ -122005,94 +122124,6 @@ class NxLayout2 extends HTMLElement {
 
 customElements.define('nx-layout2', NxLayout2);
 
-class nxDiv extends HTMLElement
-{
-	originContents;
-	#isInitialized = false;
-
-	constructor () {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-	
-	connectedCallback() {
-		if (!this.#isInitialized) {
-			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
-			return true;
-		}
-
-		return false;
-	}
-
-	getData = () => {
-		const jsonData = {};
-
-		this.shadowRoot.querySelectorAll("input, textarea, select, [id], [name]").forEach(el => {
-			const key = el.id || el.name; // id가 있으면 우선, 없으면 name 사용
-			if (!key) return; // id도 name도 없으면 건너뛰기
-
-			const value = (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT")
-				? el.value
-				: el.textContent.trim();
-
-			// 중복 키를 대비한 배열 처리
-			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) {
-					jsonData[key] = [jsonData[key]];
-				}
-				jsonData[key].push(value);
-			} else {
-				jsonData[key] = value;
-			}
-		});
-
-		return jsonData;
-	};
-
-	setData = (jsonData) => {
-		if (!jsonData || typeof jsonData !== 'object') {
-			console.error("setData: Invalid data provided. Expected an object.");
-			return;
-		}
-
-		this.shadowRoot.querySelectorAll("input[name], textarea[name], select[name]").forEach(el => {
-			const key = el.name;
-			if (!key || !jsonData.hasOwnProperty(key)) return;
-
-			const value = jsonData[key];
-
-			// 폼 요소에만 데이터를 설정합니다.
-			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
-				if (el.type === "checkbox" || el.type === "radio") {
-					el.checked = (el.value === String(value));
-				} else {
-					el.value = value;
-				}
-			} else {
-				// 폼 요소가 아닌 경우, textContent를 사용합니다.
-				el.textContent = value;
-			}
-		});
-	};
-
-	#init = () => {
-
-		/**
-		 * css style 적용
-		 */
-		for (const attr of this.attributes) {
-			if (attr.name.startsWith("css-")) {
-				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
-				this.style.setProperty(attr.name.substring(4), attr.value);
-			}
-		}
-
-		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-	};
-}
-
 class nxPanel extends nxDiv {
 
 	constructor() {

package/dist/bundle.esm.js

@@ -121799,6 +121799,125 @@ class nxTitle extends HTMLElement {
 
 customElements.define("nx-title", nxTitle);
 
+class nxDiv extends HTMLElement
+{
+	originContents;
+	#isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			return true;
+		}
+
+		return false;
+	}
+
+	getData = () => {
+		const jsonData = {};
+
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
+
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
+
+			// 중복 name을 대비한 배열 처리
+			if (jsonData[key]) {
+				if (!Array.isArray(jsonData[key])) {
+					jsonData[key] = [jsonData[key]];
+				}
+				jsonData[key].push(value);
+			} else {
+				jsonData[key] = value;
+			}
+		});
+
+		return jsonData;
+	};
+
+	setData = (jsonData) => {
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key || !jsonData.hasOwnProperty(key)) return;
+
+			const value = jsonData[key];
+
+			// 폼 요소에만 데이터를 설정합니다.
+			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+				if (el.type === "checkbox" || el.type === "radio") {
+					el.checked = (el.value === String(value));
+				} else {
+					el.value = value;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				el.textContent = value;
+			}
+		});
+	};
+
+	#init = () => {
+
+		/**
+		 * css style 적용
+		 */
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+	};
+}
+
+class nxTitle2 extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";
+				${ninegrid.getCustomPath(this,"nxTitle2.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title2", nxTitle2);
+
 class NxLayout extends HTMLElement {
 
 	#originalChildren;
@@ -122001,94 +122120,6 @@ class NxLayout2 extends HTMLElement {
 
 customElements.define('nx-layout2', NxLayout2);
 
-class nxDiv extends HTMLElement
-{
-	originContents;
-	#isInitialized = false;
-
-	constructor () {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-	
-	connectedCallback() {
-		if (!this.#isInitialized) {
-			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
-			return true;
-		}
-
-		return false;
-	}
-
-	getData = () => {
-		const jsonData = {};
-
-		this.shadowRoot.querySelectorAll("input, textarea, select, [id], [name]").forEach(el => {
-			const key = el.id || el.name; // id가 있으면 우선, 없으면 name 사용
-			if (!key) return; // id도 name도 없으면 건너뛰기
-
-			const value = (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT")
-				? el.value
-				: el.textContent.trim();
-
-			// 중복 키를 대비한 배열 처리
-			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) {
-					jsonData[key] = [jsonData[key]];
-				}
-				jsonData[key].push(value);
-			} else {
-				jsonData[key] = value;
-			}
-		});
-
-		return jsonData;
-	};
-
-	setData = (jsonData) => {
-		if (!jsonData || typeof jsonData !== 'object') {
-			console.error("setData: Invalid data provided. Expected an object.");
-			return;
-		}
-
-		this.shadowRoot.querySelectorAll("input[name], textarea[name], select[name]").forEach(el => {
-			const key = el.name;
-			if (!key || !jsonData.hasOwnProperty(key)) return;
-
-			const value = jsonData[key];
-
-			// 폼 요소에만 데이터를 설정합니다.
-			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
-				if (el.type === "checkbox" || el.type === "radio") {
-					el.checked = (el.value === String(value));
-				} else {
-					el.value = value;
-				}
-			} else {
-				// 폼 요소가 아닌 경우, textContent를 사용합니다.
-				el.textContent = value;
-			}
-		});
-	};
-
-	#init = () => {
-
-		/**
-		 * css style 적용
-		 */
-		for (const attr of this.attributes) {
-			if (attr.name.startsWith("css-")) {
-				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
-				this.style.setProperty(attr.name.substring(4), attr.value);
-			}
-		}
-
-		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-	};
-}
-
 class nxPanel extends nxDiv {
 
 	constructor() {

package/dist/index.js

@@ -106,6 +106,7 @@ import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";
 import "./nx/nxTitle.js";
+import "./nx/nxTitle2.js";
 import "./nx/nxLayout.js";
 import "./nx/nxLayout2.js";
 import "./nx/nxPanel.js";

package/dist/nx/_nxDiv.js

@@ -23,15 +23,19 @@ export class nxDiv extends HTMLElement
 	getData = () => {
 		const jsonData = {};
 
-		this.shadowRoot.querySelectorAll("input, textarea, select, [id], [name]").forEach(el => {
-			const key = el.id || el.name; // id가 있으면 우선, 없으면 name 사용
-			if (!key) return; // id도 name도 없으면 건너뛰기
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
 
-			const value = (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT")
-				? el.value
-				: el.textContent.trim();
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
 
-			// 중복 키를 대비한 배열 처리
+			// 중복 name을 대비한 배열 처리
 			if (jsonData[key]) {
 				if (!Array.isArray(jsonData[key])) {
 					jsonData[key] = [jsonData[key]];
@@ -51,7 +55,7 @@ export class nxDiv extends HTMLElement
 			return;
 		}
 
-		this.shadowRoot.querySelectorAll("input[name], textarea[name], select[name]").forEach(el => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 

package/dist/nx/nxTitle2.js

@@ -0,0 +1,29 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
+
+class nxTitle2 extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";
+				${ninegrid.getCustomPath(this,"nxTitle2.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title2", nxTitle2);

package/package.json

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

package/src/index.js

@@ -106,6 +106,7 @@ import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";
 import "./nx/nxTitle.js";
+import "./nx/nxTitle2.js";
 import "./nx/nxLayout.js";
 import "./nx/nxLayout2.js";
 import "./nx/nxPanel.js";

package/src/nx/_nxDiv.js

@@ -23,15 +23,19 @@ export class nxDiv extends HTMLElement
 	getData = () => {
 		const jsonData = {};
 
-		this.shadowRoot.querySelectorAll("input, textarea, select, [id], [name]").forEach(el => {
-			const key = el.id || el.name; // id가 있으면 우선, 없으면 name 사용
-			if (!key) return; // id도 name도 없으면 건너뛰기
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
 
-			const value = (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT")
-				? el.value
-				: el.textContent.trim();
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
 
-			// 중복 키를 대비한 배열 처리
+			// 중복 name을 대비한 배열 처리
 			if (jsonData[key]) {
 				if (!Array.isArray(jsonData[key])) {
 					jsonData[key] = [jsonData[key]];
@@ -51,7 +55,7 @@ export class nxDiv extends HTMLElement
 			return;
 		}
 
-		this.shadowRoot.querySelectorAll("input[name], textarea[name], select[name]").forEach(el => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 

package/src/nx/nxTitle2.js

@@ -0,0 +1,29 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
+
+class nxTitle2 extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";
+				${ninegrid.getCustomPath(this,"nxTitle2.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title2", nxTitle2);