ninegrid2 6.1108.0 → 6.1110.0

package/dist/bundle.cjs.js

@@ -121909,7 +121909,7 @@ class NxLayout extends HTMLElement {
 		this.style.display = 'flex';
 		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		//this.style.height = '100%';
+		this.style.height = '100%';
 		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;
@@ -121962,7 +121962,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -121988,12 +121988,11 @@ 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'; // 'flex-direction' 대신 CamelCase 사용
+		this.style.flexDirection = 'column';
 		this.style.width = '100%';
-		//this.style.height = '100%';
-		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+		this.style.gap = "4px";
 
 		let childIndex = 0;
 
@@ -122003,33 +122002,27 @@ class NxLayout2 extends HTMLElement {
 			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
+			rowWrapper.style.flexDirection = 'row';
+			rowWrapper.style.flex = "1 1 0";
 			rowWrapper.style.width = '100%';
-			//rowWrapper.style.minWidth = '0';
-			//rowWrapper.style.minHeight = '0';
-			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
+			rowWrapper.style.gap = "4px";
+			// ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
+			rowWrapper.style.flexWrap = "wrap";
+			rowWrapper.style.textAlign = "left";
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
+					// ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
+					const panelFlexBasis = 100 / numColumns;
+					panel.style.flex = `1 1 ${panelFlexBasis}%`;
+					panel.style.minWidth = '0';
+					panel.style.minHeight = '0';
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.classList.add("h");
-					rowWrapper.appendChild(splitter);
-				}
 			}
-
 			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.classList.add("v");
-				this.appendChild(splitter);
-			}
 		}
 	}
 }

package/dist/bundle.esm.js

@@ -121905,7 +121905,7 @@ class NxLayout extends HTMLElement {
 		this.style.display = 'flex';
 		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		//this.style.height = '100%';
+		this.style.height = '100%';
 		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;
@@ -121958,7 +121958,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -121984,12 +121984,11 @@ 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'; // 'flex-direction' 대신 CamelCase 사용
+		this.style.flexDirection = 'column';
 		this.style.width = '100%';
-		//this.style.height = '100%';
-		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+		this.style.gap = "4px";
 
 		let childIndex = 0;
 
@@ -121999,33 +121998,27 @@ class NxLayout2 extends HTMLElement {
 			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
+			rowWrapper.style.flexDirection = 'row';
+			rowWrapper.style.flex = "1 1 0";
 			rowWrapper.style.width = '100%';
-			//rowWrapper.style.minWidth = '0';
-			//rowWrapper.style.minHeight = '0';
-			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
+			rowWrapper.style.gap = "4px";
+			// ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
+			rowWrapper.style.flexWrap = "wrap";
+			rowWrapper.style.textAlign = "left";
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
+					// ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
+					const panelFlexBasis = 100 / numColumns;
+					panel.style.flex = `1 1 ${panelFlexBasis}%`;
+					panel.style.minWidth = '0';
+					panel.style.minHeight = '0';
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.classList.add("h");
-					rowWrapper.appendChild(splitter);
-				}
 			}
-
 			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.classList.add("v");
-				this.appendChild(splitter);
-			}
 		}
 	}
 }

package/dist/nx/nxLayout.js

@@ -39,7 +39,7 @@ class NxLayout extends HTMLElement {
 		this.style.display = 'flex';
 		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		//this.style.height = '100%';
+		this.style.height = '100%';
 		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;

package/dist/nx/nxLayout2.js

@@ -9,7 +9,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -35,15 +35,14 @@ 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'; // 'flex-direction' 대신 CamelCase 사용
+		this.style.flexDirection = 'column';
 		this.style.width = '100%';
-		//this.style.height = '100%';
-		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+		this.style.gap = "4px";
 
 		let childIndex = 0;
-		const flexBasis = 100 / numRows; // 각 행의 기본 높이 비율
+		const flexBasis = 100 / numRows;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
@@ -51,33 +50,27 @@ class NxLayout2 extends HTMLElement {
 			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
+			rowWrapper.style.flexDirection = 'row';
+			rowWrapper.style.flex = "1 1 0";
 			rowWrapper.style.width = '100%';
-			//rowWrapper.style.minWidth = '0';
-			//rowWrapper.style.minHeight = '0';
-			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
+			rowWrapper.style.gap = "4px";
+			// ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
+			rowWrapper.style.flexWrap = "wrap";
+			rowWrapper.style.textAlign = "left";
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
+					// ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
+					const panelFlexBasis = 100 / numColumns;
+					panel.style.flex = `1 1 ${panelFlexBasis}%`;
+					panel.style.minWidth = '0';
+					panel.style.minHeight = '0';
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.classList.add("h");
-					rowWrapper.appendChild(splitter);
-				}
 			}
-
 			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.classList.add("v");
-				this.appendChild(splitter);
-			}
 		}
 	}
 }

package/package.json

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

package/src/nx/nxLayout.js

@@ -39,7 +39,7 @@ class NxLayout extends HTMLElement {
 		this.style.display = 'flex';
 		this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
 		this.style.width = '100%';
-		//this.style.height = '100%';
+		this.style.height = '100%';
 		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
 
 		let childIndex = 0;

package/src/nx/nxLayout2.js

@@ -9,7 +9,7 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
+		this.#originalChildren = Array.from(this.children);
 		this.#render();
 	}
 
@@ -35,15 +35,14 @@ 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'; // 'flex-direction' 대신 CamelCase 사용
+		this.style.flexDirection = 'column';
 		this.style.width = '100%';
-		//this.style.height = '100%';
-		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+		this.style.gap = "4px";
 
 		let childIndex = 0;
-		const flexBasis = 100 / numRows; // 각 행의 기본 높이 비율
+		const flexBasis = 100 / numRows;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
@@ -51,33 +50,27 @@ class NxLayout2 extends HTMLElement {
 			// 행 래퍼 생성
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'flex';
-			rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
+			rowWrapper.style.flexDirection = 'row';
+			rowWrapper.style.flex = "1 1 0";
 			rowWrapper.style.width = '100%';
-			//rowWrapper.style.minWidth = '0';
-			//rowWrapper.style.minHeight = '0';
-			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
+			rowWrapper.style.gap = "4px";
+			// ⭐⭐ rowWrapper에 flex-wrap: wrap 적용 ⭐⭐
+			rowWrapper.style.flexWrap = "wrap";
+			rowWrapper.style.textAlign = "left";
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
 					const panel = children[childIndex];
-					panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
+					// ⭐⭐ 패널의 flex-basis를 설정하여 반응형 크기 조절 ⭐⭐
+					const panelFlexBasis = 100 / numColumns;
+					panel.style.flex = `1 1 ${panelFlexBasis}%`;
+					panel.style.minWidth = '0';
+					panel.style.minHeight = '0';
 					rowWrapper.appendChild(panel);
 					childIndex++;
 				}
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.classList.add("h");
-					rowWrapper.appendChild(splitter);
-				}
 			}
-
 			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.classList.add("v");
-				this.appendChild(splitter);
-			}
 		}
 	}
 }