ninegrid2 6.765.0 → 6.767.0

package/dist/bundle.cjs.js

@@ -119422,76 +119422,6 @@ class nxDialog extends HTMLElement
 
 customElements.define("nx-dialog", nxDialog);
 
-class nxDiv extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	getJsonData = () => {
-		const parent = this.shadowRoot.querySelector(".search-content");
-		const elements = parent.querySelectorAll("[id]");
-		const jsonData = {};
-
-		elements.forEach(element => {
-			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
-				jsonData[element.id] = element.value;
-			} else {
-				jsonData[element.id] = element.textContent.trim();
-			}
-		});
-
-		return jsonData;
-	};
-
-	getSearchOptions = () => {
-
-	};
-
-	#init = () => {
-		const contents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
-				${ninegrid.getCustomPath(this,"nxDiv.css")}
-				
-				:host {
-				}
-			</style>
-            
-            <div class="search-container">
-                <span class="toggle-icon"></span>
-                <div class="search-content">${contents}</div>
-            </div>
-        `;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		this.#setupToggle();
-	}
-
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
-
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
-		});
-	}
-}
-
-customElements.define("nx-div", nxDiv);
-
 class nxI18nExt extends HTMLElement
 {
 	#enableHtml;
@@ -120848,6 +120778,141 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
+class nxDiv extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	getJsonData = () => {
+		const parent = this.shadowRoot.querySelector(".search-content");
+		const elements = parent.querySelectorAll("[id]");
+		const jsonData = {};
+
+		elements.forEach(element => {
+			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
+				jsonData[element.id] = element.value;
+			} else {
+				jsonData[element.id] = element.textContent.trim();
+			}
+		});
+
+		return jsonData;
+	};
+
+	getSearchOptions = () => {
+
+	};
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
+				${ninegrid.getCustomPath(this,"nxDiv.css")}
+			</style>
+            
+            <div class="search-container">
+                <span class="toggle-icon"></span>
+                <div class="search-content">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.#setupToggle();
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-div", nxDiv);
+
+class nxCollapse extends HTMLElement {
+	#target;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		const targetSelector = this.getAttribute("target");
+		this.#target = ninegrid.querySelector(targetSelector);
+		//if (!this.#target) return;
+
+		this.#init();
+	}
+
+	#init = () => {
+		this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxCollapse.css";
+				${ninegrid.getCustomPath(this,"nxCollapse.css")}
+			</style>
+            
+            <div class="button">🔽 펼치기</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		if (this.#target && this.#target) {
+			const collapseBtn = document.createElement("button");
+			collapseBtn.textContent = "📥 접기";
+			collapseBtn.className = "collapse-toggle";
+			collapseBtn.style.marginBottom = "8px";
+
+			this.#target.insertBefore(collapseBtn, this.#target.firstChild);
+
+			// collapse 시 target 숨기고 복원 버튼 등장
+			collapseBtn.addEventListener("click", () => {
+				this.#target.style.display = "none";
+				this.style.display = "inline-block";
+			});
+		}
+
+		// 복원 시 target 보이고 복원 버튼 사라짐
+		this.addEventListener("click", () => {
+			this.#target.style.display = "";
+			this.style.display = "none";
+		});
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-collapse", nxCollapse);
+
 class nxTab extends HTMLElement {
     constructor() {
         super();
@@ -120859,9 +120924,7 @@ class nxTab extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxTab.css")}
 			</style>
 
-            <div class="tabs">
-                <button></button>
-            </div>
+            <div class="tabs"></div>
             <div class="tab-pages"></div>
         `;
         
@@ -121181,57 +121244,34 @@ class nxSplitter extends HTMLElement {
 
 	#prepareLayout = () => {
 
-
-
 		const isHorizontal = this.#mode === "h";
-		isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
 		const currentTotal = this.#getSiblingSizeSum();
-
-
-		const parentSize = isHorizontal
+		const nextTotal = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-
-		console.log(currentTotal, parentSize);
-
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		//const totalPanelSize = siblingSize;
 
 		// 현재 비율 계산
-		const prevRatio = currentTotal ? prevSize / currentTotal : 0.5;
-		//const prevRatio = parentSize ? prevSize / parentSize : 0.5;
-		//const nextRatio = 1 - prevRatio;
-
-		// currentTotal : parentSize = prevSize : x
-		// 새로운 available 크기
-		//const available = parentSize - splitterSize;
-
-		const newPrevSize = parentSize * prevSize / currentTotal;
-		//const newNextSize = (prevSize + nextSize) - newPrevSize;
-		const newNextSize = parentSize * nextSize / currentTotal;
-
-
+		const newPrevSize = nextTotal * prevSize / currentTotal;
+		const newNextSize = nextTotal * nextSize / currentTotal;
 
-		console.log(newPrevSize, newNextSize, prevRatio);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			//this.style.width = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.width = `${newNextSize}px`;
 			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			//this.style.height = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.height = `${newNextSize}px`;

package/dist/bundle.esm.js

@@ -119418,76 +119418,6 @@ class nxDialog extends HTMLElement
 
 customElements.define("nx-dialog", nxDialog);
 
-class nxDiv extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	getJsonData = () => {
-		const parent = this.shadowRoot.querySelector(".search-content");
-		const elements = parent.querySelectorAll("[id]");
-		const jsonData = {};
-
-		elements.forEach(element => {
-			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
-				jsonData[element.id] = element.value;
-			} else {
-				jsonData[element.id] = element.textContent.trim();
-			}
-		});
-
-		return jsonData;
-	};
-
-	getSearchOptions = () => {
-
-	};
-
-	#init = () => {
-		const contents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
-				${ninegrid.getCustomPath(this,"nxDiv.css")}
-				
-				:host {
-				}
-			</style>
-            
-            <div class="search-container">
-                <span class="toggle-icon"></span>
-                <div class="search-content">${contents}</div>
-            </div>
-        `;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		this.#setupToggle();
-	}
-
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
-
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
-		});
-	}
-}
-
-customElements.define("nx-div", nxDiv);
-
 class nxI18nExt extends HTMLElement
 {
 	#enableHtml;
@@ -120844,6 +120774,141 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
+class nxDiv extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	getJsonData = () => {
+		const parent = this.shadowRoot.querySelector(".search-content");
+		const elements = parent.querySelectorAll("[id]");
+		const jsonData = {};
+
+		elements.forEach(element => {
+			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
+				jsonData[element.id] = element.value;
+			} else {
+				jsonData[element.id] = element.textContent.trim();
+			}
+		});
+
+		return jsonData;
+	};
+
+	getSearchOptions = () => {
+
+	};
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
+				${ninegrid.getCustomPath(this,"nxDiv.css")}
+			</style>
+            
+            <div class="search-container">
+                <span class="toggle-icon"></span>
+                <div class="search-content">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.#setupToggle();
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-div", nxDiv);
+
+class nxCollapse extends HTMLElement {
+	#target;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		const targetSelector = this.getAttribute("target");
+		this.#target = ninegrid.querySelector(targetSelector);
+		//if (!this.#target) return;
+
+		this.#init();
+	}
+
+	#init = () => {
+		this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxCollapse.css";
+				${ninegrid.getCustomPath(this,"nxCollapse.css")}
+			</style>
+            
+            <div class="button">🔽 펼치기</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		if (this.#target && this.#target) {
+			const collapseBtn = document.createElement("button");
+			collapseBtn.textContent = "📥 접기";
+			collapseBtn.className = "collapse-toggle";
+			collapseBtn.style.marginBottom = "8px";
+
+			this.#target.insertBefore(collapseBtn, this.#target.firstChild);
+
+			// collapse 시 target 숨기고 복원 버튼 등장
+			collapseBtn.addEventListener("click", () => {
+				this.#target.style.display = "none";
+				this.style.display = "inline-block";
+			});
+		}
+
+		// 복원 시 target 보이고 복원 버튼 사라짐
+		this.addEventListener("click", () => {
+			this.#target.style.display = "";
+			this.style.display = "none";
+		});
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-collapse", nxCollapse);
+
 class nxTab extends HTMLElement {
     constructor() {
         super();
@@ -120855,9 +120920,7 @@ class nxTab extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxTab.css")}
 			</style>
 
-            <div class="tabs">
-                <button></button>
-            </div>
+            <div class="tabs"></div>
             <div class="tab-pages"></div>
         `;
         
@@ -121177,57 +121240,34 @@ class nxSplitter extends HTMLElement {
 
 	#prepareLayout = () => {
 
-
-
 		const isHorizontal = this.#mode === "h";
-		isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
 		const currentTotal = this.#getSiblingSizeSum();
-
-
-		const parentSize = isHorizontal
+		const nextTotal = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-
-		console.log(currentTotal, parentSize);
-
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		//const totalPanelSize = siblingSize;
 
 		// 현재 비율 계산
-		const prevRatio = currentTotal ? prevSize / currentTotal : 0.5;
-		//const prevRatio = parentSize ? prevSize / parentSize : 0.5;
-		//const nextRatio = 1 - prevRatio;
-
-		// currentTotal : parentSize = prevSize : x
-		// 새로운 available 크기
-		//const available = parentSize - splitterSize;
-
-		const newPrevSize = parentSize * prevSize / currentTotal;
-		//const newNextSize = (prevSize + nextSize) - newPrevSize;
-		const newNextSize = parentSize * nextSize / currentTotal;
-
-
+		const newPrevSize = nextTotal * prevSize / currentTotal;
+		const newNextSize = nextTotal * nextSize / currentTotal;
 
-		console.log(newPrevSize, newNextSize, prevRatio);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			//this.style.width = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.width = `${newNextSize}px`;
 			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			//this.style.height = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.height = `${newNextSize}px`;

package/dist/index.js

@@ -88,7 +88,6 @@ import "./etc/ngView.js";
 import { NineGridContainer } from "./etc/ninegridContainer.js";
 import "./etc/nxConfirm.js";
 import "./etc/nxDialog.js";
-import "./etc/nxDiv.js";
 import "./etc/nxI18nExt.js";
 import "./etc/nxSidebar.js";
 import "./etc/nxSideMenu.js";
@@ -100,6 +99,8 @@ import "./etc/nxTopMenu.js";
 import "./utils/ngFiltering.js";
 import "./utils/ngPrototype.js";
 
+import "./nx/nxDiv.js";
+import "./nx/nxCollapse.js";
 import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";

package/dist/nx/nxCollapse.js

@@ -0,0 +1,69 @@
+import ninegrid from "../index.js";
+
+class nxCollapse extends HTMLElement {
+	#target;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		const targetSelector = this.getAttribute("target");
+		this.#target = ninegrid.querySelector(targetSelector);
+		//if (!this.#target) return;
+
+		this.#init();
+	}
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxCollapse.css";
+				${ninegrid.getCustomPath(this,"nxCollapse.css")}
+			</style>
+            
+            <div class="button">🔽 펼치기</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		if (this.#target && this.#target) {
+			const collapseBtn = document.createElement("button");
+			collapseBtn.textContent = "📥 접기";
+			collapseBtn.className = "collapse-toggle";
+			collapseBtn.style.marginBottom = "8px";
+
+			this.#target.insertBefore(collapseBtn, this.#target.firstChild);
+
+			// collapse 시 target 숨기고 복원 버튼 등장
+			collapseBtn.addEventListener("click", () => {
+				this.#target.style.display = "none";
+				this.style.display = "inline-block";
+			});
+		}
+
+		// 복원 시 target 보이고 복원 버튼 사라짐
+		this.addEventListener("click", () => {
+			this.#target.style.display = "";
+			this.style.display = "none";
+		});
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-collapse", nxCollapse);

package/{src/etc → dist/nx}/nxDiv.js

@@ -40,9 +40,6 @@ class nxDiv extends HTMLElement {
 			<style>
 				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
 				${ninegrid.getCustomPath(this,"nxDiv.css")}
-				
-				:host {
-				}
 			</style>
             
             <div class="search-container">

package/dist/nx/nxSplitter.js

@@ -194,57 +194,34 @@ class nxSplitter extends HTMLElement {
 
 	#prepareLayout = () => {
 
-
-
 		const isHorizontal = this.#mode === "h";
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
 		const currentTotal = this.#getSiblingSizeSum();
-
-
-		const parentSize = isHorizontal
+		const nextTotal = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-
-		console.log(currentTotal, parentSize);
-
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		//const totalPanelSize = siblingSize;
 
 		// 현재 비율 계산
-		const prevRatio = currentTotal ? prevSize / currentTotal : 0.5;
-		//const prevRatio = parentSize ? prevSize / parentSize : 0.5;
-		//const nextRatio = 1 - prevRatio;
-
-		// currentTotal : parentSize = prevSize : x
-		// 새로운 available 크기
-		//const available = parentSize - splitterSize;
-
-		const newPrevSize = parentSize * prevSize / currentTotal;
-		//const newNextSize = (prevSize + nextSize) - newPrevSize;
-		const newNextSize = parentSize * nextSize / currentTotal;
-
-
+		const newPrevSize = nextTotal * prevSize / currentTotal;
+		const newNextSize = nextTotal * nextSize / currentTotal;
 
-		console.log(newPrevSize, newNextSize, prevRatio);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			//this.style.width = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.width = `${newNextSize}px`;
 			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			//this.style.height = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.height = `${newNextSize}px`;

package/dist/nx/nxTab.js

@@ -11,9 +11,7 @@ class nxTab extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxTab.css")}
 			</style>
 
-            <div class="tabs">
-                <button></button>
-            </div>
+            <div class="tabs"></div>
             <div class="tab-pages"></div>
         `;
         

package/package.json

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

package/src/index.js

@@ -88,7 +88,6 @@ import "./etc/ngView.js";
 import { NineGridContainer } from "./etc/ninegridContainer.js";
 import "./etc/nxConfirm.js";
 import "./etc/nxDialog.js";
-import "./etc/nxDiv.js";
 import "./etc/nxI18nExt.js";
 import "./etc/nxSidebar.js";
 import "./etc/nxSideMenu.js";
@@ -100,6 +99,8 @@ import "./etc/nxTopMenu.js";
 import "./utils/ngFiltering.js";
 import "./utils/ngPrototype.js";
 
+import "./nx/nxDiv.js";
+import "./nx/nxCollapse.js";
 import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";

package/src/nx/nxCollapse.js

@@ -0,0 +1,69 @@
+import ninegrid from "../index.js";
+
+class nxCollapse extends HTMLElement {
+	#target;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		const targetSelector = this.getAttribute("target");
+		this.#target = ninegrid.querySelector(targetSelector);
+		//if (!this.#target) return;
+
+		this.#init();
+	}
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxCollapse.css";
+				${ninegrid.getCustomPath(this,"nxCollapse.css")}
+			</style>
+            
+            <div class="button">🔽 펼치기</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		if (this.#target && this.#target) {
+			const collapseBtn = document.createElement("button");
+			collapseBtn.textContent = "📥 접기";
+			collapseBtn.className = "collapse-toggle";
+			collapseBtn.style.marginBottom = "8px";
+
+			this.#target.insertBefore(collapseBtn, this.#target.firstChild);
+
+			// collapse 시 target 숨기고 복원 버튼 등장
+			collapseBtn.addEventListener("click", () => {
+				this.#target.style.display = "none";
+				this.style.display = "inline-block";
+			});
+		}
+
+		// 복원 시 target 보이고 복원 버튼 사라짐
+		this.addEventListener("click", () => {
+			this.#target.style.display = "";
+			this.style.display = "none";
+		});
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-collapse", nxCollapse);

package/src/nx/nxDiv.js

@@ -0,0 +1,68 @@
+import ninegrid from "../index.js";
+
+class nxDiv extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	getJsonData = () => {
+		const parent = this.shadowRoot.querySelector(".search-content");
+		const elements = parent.querySelectorAll("[id]");
+		const jsonData = {};
+
+		elements.forEach(element => {
+			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
+				jsonData[element.id] = element.value;
+			} else {
+				jsonData[element.id] = element.textContent.trim();
+			}
+		});
+
+		return jsonData;
+	};
+
+	getSearchOptions = () => {
+
+	};
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
+				${ninegrid.getCustomPath(this,"nxDiv.css")}
+			</style>
+            
+            <div class="search-container">
+                <span class="toggle-icon"></span>
+                <div class="search-content">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.#setupToggle();
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-div", nxDiv);

package/src/nx/nxSplitter.js

@@ -194,57 +194,34 @@ class nxSplitter extends HTMLElement {
 
 	#prepareLayout = () => {
 
-
-
 		const isHorizontal = this.#mode === "h";
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
 		const currentTotal = this.#getSiblingSizeSum();
-
-
-		const parentSize = isHorizontal
+		const nextTotal = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-
-		console.log(currentTotal, parentSize);
-
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		//const totalPanelSize = siblingSize;
 
 		// 현재 비율 계산
-		const prevRatio = currentTotal ? prevSize / currentTotal : 0.5;
-		//const prevRatio = parentSize ? prevSize / parentSize : 0.5;
-		//const nextRatio = 1 - prevRatio;
-
-		// currentTotal : parentSize = prevSize : x
-		// 새로운 available 크기
-		//const available = parentSize - splitterSize;
-
-		const newPrevSize = parentSize * prevSize / currentTotal;
-		//const newNextSize = (prevSize + nextSize) - newPrevSize;
-		const newNextSize = parentSize * nextSize / currentTotal;
-
-
+		const newPrevSize = nextTotal * prevSize / currentTotal;
+		const newNextSize = nextTotal * nextSize / currentTotal;
 
-		console.log(newPrevSize, newNextSize, prevRatio);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			//this.style.width = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.width = `${newNextSize}px`;
 			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			//this.style.height = `${splitterSize}px`;
 
 			if (this.#isLastSplitter()) {
 				next.style.height = `${newNextSize}px`;

package/src/nx/nxTab.js

@@ -11,9 +11,7 @@ class nxTab extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxTab.css")}
 			</style>
 
-            <div class="tabs">
-                <button></button>
-            </div>
+            <div class="tabs"></div>
             <div class="tab-pages"></div>
         `;