ninegrid2 6.996.0 → 6.997.0

package/dist/bundle.cjs.js

@@ -121897,7 +121897,19 @@ customElements.define("nx-title", nxTitle);
 
 class NxLayout extends HTMLElement {
 
+	#originalChildren;
+
+	constructor() {
+		super();
+		// constructor에서 원본 자식 요소를 저장합니다.
+		// 이때는 아직 DOM에 추가되기 전이므로 children은 비어있습니다.
+		// connectedCallback에서 다시 가져오는 방식이 더 안정적입니다.
+	}
+
 	connectedCallback() {
+		// 컴포넌트가 DOM에 추가된 후, 원본 자식 요소들을 저장합니다.
+		// filter를 사용하여 nx-splitter를 제외합니다.
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -121926,7 +121938,6 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		// 메인 컨테이너의 CSS Grid 템플릿 설정
 		let gridRows = '';
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
@@ -121939,37 +121950,45 @@ class NxLayout extends HTMLElement {
 		this.style.width = '100%';
 		this.style.height = '100%';
 		this.style.gridTemplateRows = gridRows.trim();
-		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
-		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
-			// 각 행의 패널과 가로 스플리터를 직접 배치
-			for (let col = 0; col < numColumns; col++) {
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.height = '100%';
 
-				console.log(numColumns, childIndex, children[childIndex]);
+			let columnTemplate = '';
+			for (let i = 0; i < numColumns; i++) {
+				columnTemplate += '1fr ';
+				if (i < numColumns - 1) {
+					columnTemplate += '8px ';
+				}
+			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 
+			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.gridRow = `${gridRowOffset}`;
-					panel.style.gridColumn = `${col * 2 + 1}`;
-					this.appendChild(panel);
+					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					splitter.style.gridRow = `${gridRowOffset}`;
-					splitter.style.gridColumn = `${col * 2 + 2}`;
-					this.appendChild(splitter);
+					rowWrapper.appendChild(splitter);
 				}
 			}
 
-			gridRowOffset += 2; // 다음 행으로 이동
+			this.appendChild(rowWrapper);
+
+			if (row < numRows - 1) {
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
+			}
 		}
 	}
 }

package/dist/bundle.esm.js

@@ -121893,7 +121893,19 @@ customElements.define("nx-title", nxTitle);
 
 class NxLayout extends HTMLElement {
 
+	#originalChildren;
+
+	constructor() {
+		super();
+		// constructor에서 원본 자식 요소를 저장합니다.
+		// 이때는 아직 DOM에 추가되기 전이므로 children은 비어있습니다.
+		// connectedCallback에서 다시 가져오는 방식이 더 안정적입니다.
+	}
+
 	connectedCallback() {
+		// 컴포넌트가 DOM에 추가된 후, 원본 자식 요소들을 저장합니다.
+		// filter를 사용하여 nx-splitter를 제외합니다.
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -121922,7 +121934,6 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		// 메인 컨테이너의 CSS Grid 템플릿 설정
 		let gridRows = '';
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
@@ -121935,37 +121946,45 @@ class NxLayout extends HTMLElement {
 		this.style.width = '100%';
 		this.style.height = '100%';
 		this.style.gridTemplateRows = gridRows.trim();
-		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
-		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
-			// 각 행의 패널과 가로 스플리터를 직접 배치
-			for (let col = 0; col < numColumns; col++) {
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.height = '100%';
 
-				console.log(numColumns, childIndex, children[childIndex]);
+			let columnTemplate = '';
+			for (let i = 0; i < numColumns; i++) {
+				columnTemplate += '1fr ';
+				if (i < numColumns - 1) {
+					columnTemplate += '8px ';
+				}
+			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 
+			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.gridRow = `${gridRowOffset}`;
-					panel.style.gridColumn = `${col * 2 + 1}`;
-					this.appendChild(panel);
+					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					splitter.style.gridRow = `${gridRowOffset}`;
-					splitter.style.gridColumn = `${col * 2 + 2}`;
-					this.appendChild(splitter);
+					rowWrapper.appendChild(splitter);
 				}
 			}
 
-			gridRowOffset += 2; // 다음 행으로 이동
+			this.appendChild(rowWrapper);
+
+			if (row < numRows - 1) {
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
+			}
 		}
 	}
 }

package/dist/nx/nxLayout.js

@@ -2,7 +2,19 @@ import ninegrid from "../index.js";
 
 class NxLayout extends HTMLElement {
 
+	#originalChildren;
+
+	constructor() {
+		super();
+		// constructor에서 원본 자식 요소를 저장합니다.
+		// 이때는 아직 DOM에 추가되기 전이므로 children은 비어있습니다.
+		// connectedCallback에서 다시 가져오는 방식이 더 안정적입니다.
+	}
+
 	connectedCallback() {
+		// 컴포넌트가 DOM에 추가된 후, 원본 자식 요소들을 저장합니다.
+		// filter를 사용하여 nx-splitter를 제외합니다.
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -31,7 +43,6 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		// 메인 컨테이너의 CSS Grid 템플릿 설정
 		let gridRows = '';
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
@@ -44,46 +55,45 @@ class NxLayout extends HTMLElement {
 		this.style.width = '100%';
 		this.style.height = '100%';
 		this.style.gridTemplateRows = gridRows.trim();
-		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
-		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
-			// 가로 스플리터와 패널을 위한 그리드 템플릿을 생성
-			let gridColumns = '';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.height = '100%';
+
+			let columnTemplate = '';
 			for (let i = 0; i < numColumns; i++) {
-				gridColumns += '1fr ';
+				columnTemplate += '1fr ';
 				if (i < numColumns - 1) {
-					gridColumns += '8px '; // 가로 스플리터 너비
+					columnTemplate += '8px ';
 				}
 			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 
-			// 각 행의 패널과 가로 스플리터를 직접 배치
 			for (let col = 0; col < numColumns; col++) {
-
-				console.log(numColumns, childIndex, children[childIndex]);
-
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.gridRow = `${gridRowOffset}`;
-					panel.style.gridColumn = `${col * 2 + 1}`;
-					this.appendChild(panel);
+					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					splitter.style.gridRow = `${gridRowOffset}`;
-					splitter.style.gridColumn = `${col * 2 + 2}`;
-					this.appendChild(splitter);
+					rowWrapper.appendChild(splitter);
 				}
 			}
 
-			gridRowOffset += 2; // 다음 행으로 이동
+			this.appendChild(rowWrapper);
+
+			if (row < numRows - 1) {
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
+			}
 		}
 	}
 }

package/package.json

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

package/src/nx/nxLayout.js

@@ -2,7 +2,19 @@ import ninegrid from "../index.js";
 
 class NxLayout extends HTMLElement {
 
+	#originalChildren;
+
+	constructor() {
+		super();
+		// constructor에서 원본 자식 요소를 저장합니다.
+		// 이때는 아직 DOM에 추가되기 전이므로 children은 비어있습니다.
+		// connectedCallback에서 다시 가져오는 방식이 더 안정적입니다.
+	}
+
 	connectedCallback() {
+		// 컴포넌트가 DOM에 추가된 후, 원본 자식 요소들을 저장합니다.
+		// filter를 사용하여 nx-splitter를 제외합니다.
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -31,7 +43,6 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		// 메인 컨테이너의 CSS Grid 템플릿 설정
 		let gridRows = '';
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
@@ -44,46 +55,45 @@ class NxLayout extends HTMLElement {
 		this.style.width = '100%';
 		this.style.height = '100%';
 		this.style.gridTemplateRows = gridRows.trim();
-		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
-		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
-			// 가로 스플리터와 패널을 위한 그리드 템플릿을 생성
-			let gridColumns = '';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.height = '100%';
+
+			let columnTemplate = '';
 			for (let i = 0; i < numColumns; i++) {
-				gridColumns += '1fr ';
+				columnTemplate += '1fr ';
 				if (i < numColumns - 1) {
-					gridColumns += '8px '; // 가로 스플리터 너비
+					columnTemplate += '8px ';
 				}
 			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 
-			// 각 행의 패널과 가로 스플리터를 직접 배치
 			for (let col = 0; col < numColumns; col++) {
-
-				console.log(numColumns, childIndex, children[childIndex]);
-
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.gridRow = `${gridRowOffset}`;
-					panel.style.gridColumn = `${col * 2 + 1}`;
-					this.appendChild(panel);
+					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					splitter.style.gridRow = `${gridRowOffset}`;
-					splitter.style.gridColumn = `${col * 2 + 2}`;
-					this.appendChild(splitter);
+					rowWrapper.appendChild(splitter);
 				}
 			}
 
-			gridRowOffset += 2; // 다음 행으로 이동
+			this.appendChild(rowWrapper);
+
+			if (row < numRows - 1) {
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
+			}
 		}
 	}
 }