ninegrid2 6.685.0 → 6.687.0

package/dist/bundle.cjs.js

@@ -121127,29 +121127,33 @@ class nxSplitter extends HTMLElement {
 		};
 
 
-		const onUp = e => {
+		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
 			const parentRect = parent.getBoundingClientRect();
-
-			// 현재 드래그 위치 계산 (부모 기준)
-			const position = (this.#mode === "h")
+			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const position = this.#mode === "h"
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			if (!prev || !next) return;
+
+			// 📌 리사이즈 적용: 사용자 의도에 따라 prev, next 모두 업데이트
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
-				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
-				//next.style.width = `100%`;
+				next.style.width = `${parentRect.width - position - splitterSize}px`;
 			} else {
 				prev.style.height = `${position}px`;
-				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
+				next.style.height = `${parentRect.height - position - splitterSize}px`;
 			}
 		};
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};
@@ -121187,6 +121191,15 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isLastSplitter = () => {
+			const parent = this.parentElement;
+			if (!parent) return false;
+
+			const allSplitters = [...parent.querySelectorAll("nx-splitter")];
+			return allSplitters.at(-1) === this;
+		};
+
+
 		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
@@ -121203,13 +121216,13 @@ class nxSplitter extends HTMLElement {
 			prev.style.width = `${eachSize}px`;
 
 			// ✔ 정확하게 마지막 splitter일 때만 next 조정
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.width = `${eachSize}px`;
 			}
 		} else {
 			prev.style.height = `${eachSize}px`;
 
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.height = `${eachSize}px`;
 			}
 		}

package/dist/bundle.esm.js

@@ -121123,29 +121123,33 @@ class nxSplitter extends HTMLElement {
 		};
 
 
-		const onUp = e => {
+		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
 			const parentRect = parent.getBoundingClientRect();
-
-			// 현재 드래그 위치 계산 (부모 기준)
-			const position = (this.#mode === "h")
+			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const position = this.#mode === "h"
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			if (!prev || !next) return;
+
+			// 📌 리사이즈 적용: 사용자 의도에 따라 prev, next 모두 업데이트
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
-				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
-				//next.style.width = `100%`;
+				next.style.width = `${parentRect.width - position - splitterSize}px`;
 			} else {
 				prev.style.height = `${position}px`;
-				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
+				next.style.height = `${parentRect.height - position - splitterSize}px`;
 			}
 		};
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};
@@ -121183,6 +121187,15 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isLastSplitter = () => {
+			const parent = this.parentElement;
+			if (!parent) return false;
+
+			const allSplitters = [...parent.querySelectorAll("nx-splitter")];
+			return allSplitters.at(-1) === this;
+		};
+
+
 		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
@@ -121199,13 +121212,13 @@ class nxSplitter extends HTMLElement {
 			prev.style.width = `${eachSize}px`;
 
 			// ✔ 정확하게 마지막 splitter일 때만 next 조정
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.width = `${eachSize}px`;
 			}
 		} else {
 			prev.style.height = `${eachSize}px`;
 
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.height = `${eachSize}px`;
 			}
 		}

package/dist/nx/nxSplitter.js

@@ -82,29 +82,33 @@ class nxSplitter extends HTMLElement {
 		};
 
 
-		const onUp = e => {
+		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
 			const parentRect = parent.getBoundingClientRect();
-
-			// 현재 드래그 위치 계산 (부모 기준)
-			const position = (this.#mode === "h")
+			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const position = this.#mode === "h"
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			if (!prev || !next) return;
+
+			// 📌 리사이즈 적용: 사용자 의도에 따라 prev, next 모두 업데이트
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
-				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
-				//next.style.width = `100%`;
+				next.style.width = `${parentRect.width - position - splitterSize}px`;
 			} else {
 				prev.style.height = `${position}px`;
-				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
+				next.style.height = `${parentRect.height - position - splitterSize}px`;
 			}
 		};
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};
@@ -142,6 +146,15 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isLastSplitter = () => {
+			const parent = this.parentElement;
+			if (!parent) return false;
+
+			const allSplitters = [...parent.querySelectorAll("nx-splitter")];
+			return allSplitters.at(-1) === this;
+		};
+
+
 		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
@@ -158,13 +171,13 @@ class nxSplitter extends HTMLElement {
 			prev.style.width = `${eachSize}px`;
 
 			// ✔ 정확하게 마지막 splitter일 때만 next 조정
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.width = `${eachSize}px`;
 			}
 		} else {
 			prev.style.height = `${eachSize}px`;
 
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.height = `${eachSize}px`;
 			}
 		}

package/package.json

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

package/src/nx/nxSplitter.js

@@ -82,29 +82,33 @@ class nxSplitter extends HTMLElement {
 		};
 
 
-		const onUp = e => {
+		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
 			const parentRect = parent.getBoundingClientRect();
-
-			// 현재 드래그 위치 계산 (부모 기준)
-			const position = (this.#mode === "h")
+			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const position = this.#mode === "h"
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			if (!prev || !next) return;
+
+			// 📌 리사이즈 적용: 사용자 의도에 따라 prev, next 모두 업데이트
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
-				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
-				//next.style.width = `100%`;
+				next.style.width = `${parentRect.width - position - splitterSize}px`;
 			} else {
 				prev.style.height = `${position}px`;
-				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
+				next.style.height = `${parentRect.height - position - splitterSize}px`;
 			}
 		};
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};
@@ -142,6 +146,15 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isLastSplitter = () => {
+			const parent = this.parentElement;
+			if (!parent) return false;
+
+			const allSplitters = [...parent.querySelectorAll("nx-splitter")];
+			return allSplitters.at(-1) === this;
+		};
+
+
 		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
@@ -158,13 +171,13 @@ class nxSplitter extends HTMLElement {
 			prev.style.width = `${eachSize}px`;
 
 			// ✔ 정확하게 마지막 splitter일 때만 next 조정
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.width = `${eachSize}px`;
 			}
 		} else {
 			prev.style.height = `${eachSize}px`;
 
-			if (this.#isLastSplitter()) {
+			if (isLastSplitter()) {
 				next.style.height = `${eachSize}px`;
 			}
 		}