ninegrid2 6.987.0 → 6.989.0

package/dist/bundle.cjs.js

@@ -121915,20 +121915,24 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		// 기존 자식 노드를 안전하게 제거
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("22222");
+		console.log("11111");
 
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		let gridTemplate = '';
+		for (const numCols of columnsLayout) {
+			gridTemplate += `1fr `; // 행의 높이
+		}
+
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		this.style.gridTemplateRows = gridTemplate.trim();
 
 		let childIndex = 0;
 
@@ -121936,16 +121940,29 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+
+			let columnTemplate = '';
+			for (let i = 0; i < numColumns; i++) {
+				columnTemplate += '1fr ';
+				if (i < numColumns - 1) {
+					columnTemplate += '8px ';
+				}
+			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
 			this.appendChild(rowWrapper);
@@ -121953,6 +121970,7 @@ class NxLayout extends HTMLElement {
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}

package/dist/bundle.esm.js

@@ -121911,20 +121911,24 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		// 기존 자식 노드를 안전하게 제거
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("22222");
+		console.log("11111");
 
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		let gridTemplate = '';
+		for (const numCols of columnsLayout) {
+			gridTemplate += `1fr `; // 행의 높이
+		}
+
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		this.style.gridTemplateRows = gridTemplate.trim();
 
 		let childIndex = 0;
 
@@ -121932,16 +121936,29 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+
+			let columnTemplate = '';
+			for (let i = 0; i < numColumns; i++) {
+				columnTemplate += '1fr ';
+				if (i < numColumns - 1) {
+					columnTemplate += '8px ';
+				}
+			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
 			this.appendChild(rowWrapper);
@@ -121949,6 +121966,7 @@ class NxLayout extends HTMLElement {
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}

package/dist/nx/nxLayout.js

@@ -20,20 +20,24 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		// 기존 자식 노드를 안전하게 제거
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("22222")
+		console.log("11111")
 
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		let gridTemplate = '';
+		for (const numCols of columnsLayout) {
+			gridTemplate += `1fr `; // 행의 높이
+		}
+
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		this.style.gridTemplateRows = gridTemplate.trim();
 
 		let childIndex = 0;
 
@@ -41,16 +45,29 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+
+			let columnTemplate = '';
+			for (let i = 0; i < numColumns; i++) {
+				columnTemplate += '1fr ';
+				if (i < numColumns - 1) {
+					columnTemplate += '8px ';
+				}
+			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
 			this.appendChild(rowWrapper);
@@ -58,6 +75,7 @@ class NxLayout extends HTMLElement {
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}

package/package.json

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

package/src/nx/nxLayout.js

@@ -20,20 +20,24 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		// 기존 자식 노드를 안전하게 제거
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("22222")
+		console.log("11111")
 
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		let gridTemplate = '';
+		for (const numCols of columnsLayout) {
+			gridTemplate += `1fr `; // 행의 높이
+		}
+
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		this.style.gridTemplateRows = gridTemplate.trim();
 
 		let childIndex = 0;
 
@@ -41,16 +45,29 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+
+			let columnTemplate = '';
+			for (let i = 0; i < numColumns; i++) {
+				columnTemplate += '1fr ';
+				if (i < numColumns - 1) {
+					columnTemplate += '8px ';
+				}
+			}
+			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
 			this.appendChild(rowWrapper);
@@ -58,6 +75,7 @@ class NxLayout extends HTMLElement {
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}