ninegrid2 6.1113.0 → 6.1115.0

package/dist/bundle.cjs.js

@@ -121962,7 +121962,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children);
+		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
 		this.#render();
 	}
 
@@ -121980,6 +121980,7 @@ class NxLayout2 extends HTMLElement {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
@@ -121987,43 +121988,36 @@ class NxLayout2 extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		// 메인 컨테이너를 Flexbox로 설정
 		this.style.display = 'flex';
-		this.style.flexDirection = 'column';
+		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		this.style.gap = "4px";
-
-		// ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
-		// this.style.height = '100%';
+		//this.style.height = '100%';
+		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
+			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flexDirection = 'row';
-
-			// ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
-			rowWrapper.style.flex = "0 0 auto";
+			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
 			rowWrapper.style.width = '100%';
-			rowWrapper.style.gap = "4px";
-			rowWrapper.style.flexWrap = "wrap";
-			rowWrapper.style.textAlign = "left";
-			rowWrapper.style.minWidth = '0';
-			rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.minWidth = '0';
+			//rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					const panelFlexBasis = 100 / numColumns;
-					panel.style.flex = `1 1 ${panelFlexBasis}%`;
-					panel.style.minWidth = '0';
-					panel.style.minHeight = '0';
+					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
 			}
+
 			this.appendChild(rowWrapper);
 		}
 	}

package/dist/bundle.esm.js

@@ -121958,7 +121958,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children);
+		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
 		this.#render();
 	}
 
@@ -121976,6 +121976,7 @@ class NxLayout2 extends HTMLElement {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
@@ -121983,43 +121984,36 @@ class NxLayout2 extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		// 메인 컨테이너를 Flexbox로 설정
 		this.style.display = 'flex';
-		this.style.flexDirection = 'column';
+		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		this.style.gap = "4px";
-
-		// ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
-		// this.style.height = '100%';
+		//this.style.height = '100%';
+		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
+			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flexDirection = 'row';
-
-			// ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
-			rowWrapper.style.flex = "0 0 auto";
+			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
 			rowWrapper.style.width = '100%';
-			rowWrapper.style.gap = "4px";
-			rowWrapper.style.flexWrap = "wrap";
-			rowWrapper.style.textAlign = "left";
-			rowWrapper.style.minWidth = '0';
-			rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.minWidth = '0';
+			//rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					const panelFlexBasis = 100 / numColumns;
-					panel.style.flex = `1 1 ${panelFlexBasis}%`;
-					panel.style.minWidth = '0';
-					panel.style.minHeight = '0';
+					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
 			}
+
 			this.appendChild(rowWrapper);
 		}
 	}

package/dist/nx/nxLayout2.js

@@ -9,7 +9,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children);
+		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
 		this.#render();
 	}
 
@@ -27,6 +27,7 @@ class NxLayout2 extends HTMLElement {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
@@ -34,43 +35,37 @@ class NxLayout2 extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		// 메인 컨테이너를 Flexbox로 설정
 		this.style.display = 'flex';
-		this.style.flexDirection = 'column';
+		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		this.style.gap = "4px";
-
-		// ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
-		// this.style.height = '100%';
+		//this.style.height = '100%';
+		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;
+		const flexBasis = 100 / numRows; // 각 행의 기본 높이 비율
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
+			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flexDirection = 'row';
-
-			// ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
-			rowWrapper.style.flex = "0 0 auto";
+			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
 			rowWrapper.style.width = '100%';
-			rowWrapper.style.gap = "4px";
-			rowWrapper.style.flexWrap = "wrap";
-			rowWrapper.style.textAlign = "left";
-			rowWrapper.style.minWidth = '0';
-			rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.minWidth = '0';
+			//rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					const panelFlexBasis = 100 / numColumns;
-					panel.style.flex = `1 1 ${panelFlexBasis}%`;
-					panel.style.minWidth = '0';
-					panel.style.minHeight = '0';
+					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
 			}
+
 			this.appendChild(rowWrapper);
 		}
 	}

package/package.json

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

package/src/nx/nxLayout2.js

@@ -9,7 +9,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children);
+		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
 		this.#render();
 	}
 
@@ -27,6 +27,7 @@ class NxLayout2 extends HTMLElement {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
@@ -34,43 +35,37 @@ class NxLayout2 extends HTMLElement {
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
+		// 메인 컨테이너를 Flexbox로 설정
 		this.style.display = 'flex';
-		this.style.flexDirection = 'column';
+		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		this.style.gap = "4px";
-
-		// ⭐⭐ 부모 컨테이너의 높이를 제거하여 내용물에 따라 늘어나게 함 ⭐⭐
-		// this.style.height = '100%';
+		//this.style.height = '100%';
+		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;
+		const flexBasis = 100 / numRows; // 각 행의 기본 높이 비율
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
 
+			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flexDirection = 'row';
-
-			// ⭐⭐ flex 속성을 0 0 auto로 변경하여 내용물 높이만큼만 차지하게 함 ⭐⭐
-			rowWrapper.style.flex = "0 0 auto";
+			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
 			rowWrapper.style.width = '100%';
-			rowWrapper.style.gap = "4px";
-			rowWrapper.style.flexWrap = "wrap";
-			rowWrapper.style.textAlign = "left";
-			rowWrapper.style.minWidth = '0';
-			rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.minWidth = '0';
+			//rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					const panelFlexBasis = 100 / numColumns;
-					panel.style.flex = `1 1 ${panelFlexBasis}%`;
-					panel.style.minWidth = '0';
-					panel.style.minHeight = '0';
+					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
 			}
+
 			this.appendChild(rowWrapper);
 		}
 	}