ninegrid2 6.978.0 → 6.980.0

package/dist/bundle.cjs.js

@@ -121908,7 +121908,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		return ['columns', 'rows'];
+		return ['columns'];
 	}
 
 	#render() {
@@ -121923,51 +121923,50 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log(columnsLayout);
-
-		// CSS Grid 템플릿 설정
-		let gridRows = '';
-		for (let i = 0; i < numRows; i++) {
-			gridRows += '1fr ';
-			if (i < numRows - 1) {
-				gridRows += '8px '; // 세로 스플리터 높이
-			}
-		}
-
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateRows = `repeat(${numRows * 2 - 1}, 1fr)`;
+		this.style.gridAutoRows = `8px`;
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr) `;
 
-		// 자식 요소와 스플리터 배치
 		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowContent = document.createElement('div');
-			rowContent.style.display = 'grid';
-			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowContent.style.gap = '8px';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns * 2 - 1}, 1fr)`;
+			rowWrapper.style.gridAutoColumns = `8px`;
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[renderedIndex]) {
-					rowContent.appendChild(children[renderedIndex]);
+					rowWrapper.appendChild(children[renderedIndex]);
 					renderedIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					splitter.style.gridColumn = `${col * 2 + 2} / span 1`;
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
-			this.appendChild(rowContent);
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridRow = `${row * 2 + 2} / span 1`;
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}
 	}
 }
 
-// 커스텀 엘리먼트를 등록
 customElements.define('nx-layout', NxLayout);
 
 class aiSettings extends HTMLElement

package/dist/bundle.esm.js

@@ -121904,7 +121904,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		return ['columns', 'rows'];
+		return ['columns'];
 	}
 
 	#render() {
@@ -121919,51 +121919,50 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log(columnsLayout);
-
-		// CSS Grid 템플릿 설정
-		let gridRows = '';
-		for (let i = 0; i < numRows; i++) {
-			gridRows += '1fr ';
-			if (i < numRows - 1) {
-				gridRows += '8px '; // 세로 스플리터 높이
-			}
-		}
-
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateRows = `repeat(${numRows * 2 - 1}, 1fr)`;
+		this.style.gridAutoRows = `8px`;
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr) `;
 
-		// 자식 요소와 스플리터 배치
 		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowContent = document.createElement('div');
-			rowContent.style.display = 'grid';
-			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowContent.style.gap = '8px';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns * 2 - 1}, 1fr)`;
+			rowWrapper.style.gridAutoColumns = `8px`;
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[renderedIndex]) {
-					rowContent.appendChild(children[renderedIndex]);
+					rowWrapper.appendChild(children[renderedIndex]);
 					renderedIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					splitter.style.gridColumn = `${col * 2 + 2} / span 1`;
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
-			this.appendChild(rowContent);
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridRow = `${row * 2 + 2} / span 1`;
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}
 	}
 }
 
-// 커스텀 엘리먼트를 등록
 customElements.define('nx-layout', NxLayout);
 
 class aiSettings extends HTMLElement

package/dist/nx/nxLayout.js

@@ -13,7 +13,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		return ['columns', 'rows'];
+		return ['columns'];
 	}
 
 	#render() {
@@ -28,49 +28,48 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log(columnsLayout);
-
-		// CSS Grid 템플릿 설정
-		let gridRows = '';
-		for (let i = 0; i < numRows; i++) {
-			gridRows += '1fr ';
-			if (i < numRows - 1) {
-				gridRows += '8px '; // 세로 스플리터 높이
-			}
-		}
-
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateRows = `repeat(${numRows * 2 - 1}, 1fr)`;
+		this.style.gridAutoRows = `8px`;
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr) `;
 
-		// 자식 요소와 스플리터 배치
 		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowContent = document.createElement('div');
-			rowContent.style.display = 'grid';
-			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowContent.style.gap = '8px';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns * 2 - 1}, 1fr)`;
+			rowWrapper.style.gridAutoColumns = `8px`;
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[renderedIndex]) {
-					rowContent.appendChild(children[renderedIndex]);
+					rowWrapper.appendChild(children[renderedIndex]);
 					renderedIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					splitter.style.gridColumn = `${col * 2 + 2} / span 1`;
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
-			this.appendChild(rowContent);
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridRow = `${row * 2 + 2} / span 1`;
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}
 	}
 }
 
-// 커스텀 엘리먼트를 등록
 customElements.define('nx-layout', NxLayout);

package/package.json

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

package/src/nx/nxLayout.js

@@ -13,7 +13,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		return ['columns', 'rows'];
+		return ['columns'];
 	}
 
 	#render() {
@@ -28,49 +28,48 @@ class NxLayout extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log(columnsLayout);
-
-		// CSS Grid 템플릿 설정
-		let gridRows = '';
-		for (let i = 0; i < numRows; i++) {
-			gridRows += '1fr ';
-			if (i < numRows - 1) {
-				gridRows += '8px '; // 세로 스플리터 높이
-			}
-		}
-
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateRows = `repeat(${numRows * 2 - 1}, 1fr)`;
+		this.style.gridAutoRows = `8px`;
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr) `;
 
-		// 자식 요소와 스플리터 배치
 		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowContent = document.createElement('div');
-			rowContent.style.display = 'grid';
-			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowContent.style.gap = '8px';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns * 2 - 1}, 1fr)`;
+			rowWrapper.style.gridAutoColumns = `8px`;
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[renderedIndex]) {
-					rowContent.appendChild(children[renderedIndex]);
+					rowWrapper.appendChild(children[renderedIndex]);
 					renderedIndex++;
 				}
+
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					splitter.setAttribute('direction', 'horizontal');
+					splitter.style.gridColumn = `${col * 2 + 2} / span 1`;
+					rowWrapper.appendChild(splitter);
+				}
 			}
 
-			this.appendChild(rowContent);
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
+				splitter.style.gridRow = `${row * 2 + 2} / span 1`;
+				splitter.style.gridColumn = `1 / -1`;
 				this.appendChild(splitter);
 			}
 		}
 	}
 }
 
-// 커스텀 엘리먼트를 등록
 customElements.define('nx-layout', NxLayout);