ninegrid2 6.1109.0 → 6.1110.0

package/dist/bundle.cjs.js

@@ -121966,6 +121966,16 @@ class NxLayout2 extends HTMLElement {
 		this.#render();
 	}
 
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.#originalChildren && oldValue !== newValue) {
+			this.#render();
+		}
+	}
+
+	static get observedAttributes() {
+		return ['columns'];
+	}
+
 	#render() {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
@@ -121978,13 +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.gap = "4px";		// 2 only
-		//this.style.height = '100%';
-		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+		this.style.gap = "4px";
 
 		let childIndex = 0;
 
@@ -121994,27 +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.gap = "4px";		// 2 only
-			rowWrapper.style.textAlign = "left";		// 2 only
-			//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++;
 				}
-
 			}
-
 			this.appendChild(rowWrapper);
-
-
 		}
 	}
 }

package/dist/bundle.esm.js

@@ -121962,6 +121962,16 @@ class NxLayout2 extends HTMLElement {
 		this.#render();
 	}
 
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.#originalChildren && oldValue !== newValue) {
+			this.#render();
+		}
+	}
+
+	static get observedAttributes() {
+		return ['columns'];
+	}
+
 	#render() {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
@@ -121974,13 +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.gap = "4px";		// 2 only
-		//this.style.height = '100%';
-		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+		this.style.gap = "4px";
 
 		let childIndex = 0;
 
@@ -121990,27 +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.gap = "4px";		// 2 only
-			rowWrapper.style.textAlign = "left";		// 2 only
-			//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++;
 				}
-
 			}
-
 			this.appendChild(rowWrapper);
-
-
 		}
 	}
 }

package/dist/nx/nxLayout2.js

@@ -13,6 +13,16 @@ class NxLayout2 extends HTMLElement {
 		this.#render();
 	}
 
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.#originalChildren && oldValue !== newValue) {
+			this.#render();
+		}
+	}
+
+	static get observedAttributes() {
+		return ['columns'];
+	}
+
 	#render() {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
@@ -25,16 +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.gap = "4px";		// 2 only
-		//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];
@@ -42,27 +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.gap = "4px";		// 2 only
-			rowWrapper.style.textAlign = "left";		// 2 only
-			//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++;
 				}
-
 			}
-
 			this.appendChild(rowWrapper);
-
-
 		}
 	}
 }

package/package.json

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

package/src/nx/nxLayout2.js

@@ -13,6 +13,16 @@ class NxLayout2 extends HTMLElement {
 		this.#render();
 	}
 
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.#originalChildren && oldValue !== newValue) {
+			this.#render();
+		}
+	}
+
+	static get observedAttributes() {
+		return ['columns'];
+	}
+
 	#render() {
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
@@ -25,16 +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.gap = "4px";		// 2 only
-		//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];
@@ -42,27 +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.gap = "4px";		// 2 only
-			rowWrapper.style.textAlign = "left";		// 2 only
-			//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++;
 				}
-
 			}
-
 			this.appendChild(rowWrapper);
-
-
 		}
 	}
 }