ninegrid2 6.1240.0 → 6.1241.0

package/dist/bundle.cjs.js

@@ -122244,6 +122244,43 @@ class nxPanel extends nxDiv {
 
 customElements.define("nx-panel", nxPanel);
 
+class nxPanel2 extends nxDiv2 {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const columns = this.getAttribute("columns") || "";
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+			<div class="head ${caption ? '' : 'hide'}">
+				<div class="caption"><span>${caption}</span></div>
+			</div>
+			<div class="body">
+				<nx-layout2 columns="${columns}">
+					${this.originContents}
+				</nx-layout2>
+			</div>
+        `;
+
+		this.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel2", nxPanel2);
+
 class nxButtons extends nxDiv {
 
 	constructor() {

package/dist/bundle.esm.js

@@ -122240,6 +122240,43 @@ class nxPanel extends nxDiv {
 
 customElements.define("nx-panel", nxPanel);
 
+class nxPanel2 extends nxDiv2 {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const columns = this.getAttribute("columns") || "";
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+			<div class="head ${caption ? '' : 'hide'}">
+				<div class="caption"><span>${caption}</span></div>
+			</div>
+			<div class="body">
+				<nx-layout2 columns="${columns}">
+					${this.originContents}
+				</nx-layout2>
+			</div>
+        `;
+
+		this.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel2", nxPanel2);
+
 class nxButtons extends nxDiv {
 
 	constructor() {

package/dist/index.js

@@ -110,6 +110,7 @@ import "./nx/nxTitle2.js";
 import "./nx/nxLayout.js";
 import "./nx/nxLayout2.js";
 import "./nx/nxPanel.js";
+import "./nx/nxPanel2.js";
 import "./nx/nxButtons.js";
 import "./nx/nxModal.js";
 

package/dist/nx/_nxDiv2.js

@@ -0,0 +1,125 @@
+import ninegrid from "../index.js";
+
+export class nxDiv2 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).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) => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).forEach(el => {
+			console.log("------", el);
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		let bChanged = false;
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).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") {
+					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;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
+			}
+		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	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 = () => {
+
+		//console.log(this);
+		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
+
+		/**
+		 * 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 제거
+	};
+}

package/dist/nx/nxPanel2.js

@@ -0,0 +1,39 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
+
+class nxPanel2 extends nxDiv2 {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const columns = this.getAttribute("columns") || "";
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+			<div class="head ${caption ? '' : 'hide'}">
+				<div class="caption"><span>${caption}</span></div>
+			</div>
+			<div class="body">
+				<nx-layout2 columns="${columns}">
+					${this.originContents}
+				</nx-layout2>
+			</div>
+        `;
+
+		this.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel2", nxPanel2);

package/package.json

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

package/src/index.js

@@ -110,6 +110,7 @@ import "./nx/nxTitle2.js";
 import "./nx/nxLayout.js";
 import "./nx/nxLayout2.js";
 import "./nx/nxPanel.js";
+import "./nx/nxPanel2.js";
 import "./nx/nxButtons.js";
 import "./nx/nxModal.js";
 

package/src/nx/_nxDiv2.js

@@ -0,0 +1,125 @@
+import ninegrid from "../index.js";
+
+export class nxDiv2 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).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) => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).forEach(el => {
+			console.log("------", el);
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		let bChanged = false;
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).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") {
+					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;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
+			}
+		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	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 = () => {
+
+		//console.log(this);
+		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
+
+		/**
+		 * 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 제거
+	};
+}

package/src/nx/nxPanel2.js

@@ -0,0 +1,39 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
+
+class nxPanel2 extends nxDiv2 {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const columns = this.getAttribute("columns") || "";
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+			<div class="head ${caption ? '' : 'hide'}">
+				<div class="caption"><span>${caption}</span></div>
+			</div>
+			<div class="body">
+				<nx-layout2 columns="${columns}">
+					${this.originContents}
+				</nx-layout2>
+			</div>
+        `;
+
+		this.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel2", nxPanel2);