ninegrid2 6.976.0 → 6.978.0

package/dist/bundle.cjs.js

@@ -121902,7 +121902,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -121910,89 +121912,58 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
 		const children = Array.from(this.children);
+		if (children.length === 0) return;
 
-		if (children.length <= 0) return;
-
-		//this.innerHTML = '';
 		// 기존 자식 노드를 안전하게 제거합니다.
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
-
-
-
+		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
+		const numRows = columnsLayout.length;
 
+		console.log(columnsLayout);
 
-
-		// CSS Grid 컨테이너 스타일 설정
-		let gridColumns = '';
+		// CSS Grid 템플릿 설정
 		let gridRows = '';
-
-		for (let i = 0; i < numColumns; i++) {
-			gridColumns += '1fr ';
-			if (i < numColumns - 1) {
-				gridColumns += '8px '; // 스플리터 너비
-			}
-		}
-
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
 			if (i < numRows - 1) {
-				gridRows += '8px '; // 스플리터 높이
+				gridRows += '8px '; // 세로 스플리터 높이
 			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
-		// 자식 요소를 다시 추가하고 스플리터 삽입
-		const renderedLayout = [];
-		let childIndex = 0;
+		// 자식 요소와 스플리터 배치
+		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
-			for (let col = 0; col < numColumns; col++) {
-
-				console.log(row, col, childIndex);
+			const numColumns = columnsLayout[row];
+			let rowContent = document.createElement('div');
+			rowContent.style.display = 'grid';
+			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowContent.style.gap = '8px';
 
-				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
-					const childWrapper = document.createElement('div');
-					childWrapper.style.width = '100%';
-					childWrapper.style.height = '100%';
-					childWrapper.appendChild(children[childIndex]);
-					renderedLayout.push(childWrapper);
-					childIndex++;
-				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					renderedLayout.push(splitter);
+			for (let col = 0; col < numColumns; col++) {
+				if (children[renderedIndex]) {
+					rowContent.appendChild(children[renderedIndex]);
+					renderedIndex++;
 				}
 			}
+
+			this.appendChild(rowContent);
+
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `span ${numColumns * 2 - 1}`;
-				renderedLayout.push(splitter);
+				this.appendChild(splitter);
 			}
 		}
-
-		renderedLayout.forEach(el => this.appendChild(el));
 	}
 }
 

package/dist/bundle.esm.js

@@ -121898,7 +121898,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -121906,89 +121908,58 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
 		const children = Array.from(this.children);
+		if (children.length === 0) return;
 
-		if (children.length <= 0) return;
-
-		//this.innerHTML = '';
 		// 기존 자식 노드를 안전하게 제거합니다.
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
-
-
-
+		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
+		const numRows = columnsLayout.length;
 
+		console.log(columnsLayout);
 
-
-		// CSS Grid 컨테이너 스타일 설정
-		let gridColumns = '';
+		// CSS Grid 템플릿 설정
 		let gridRows = '';
-
-		for (let i = 0; i < numColumns; i++) {
-			gridColumns += '1fr ';
-			if (i < numColumns - 1) {
-				gridColumns += '8px '; // 스플리터 너비
-			}
-		}
-
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
 			if (i < numRows - 1) {
-				gridRows += '8px '; // 스플리터 높이
+				gridRows += '8px '; // 세로 스플리터 높이
 			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
-		// 자식 요소를 다시 추가하고 스플리터 삽입
-		const renderedLayout = [];
-		let childIndex = 0;
+		// 자식 요소와 스플리터 배치
+		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
-			for (let col = 0; col < numColumns; col++) {
-
-				console.log(row, col, childIndex);
+			const numColumns = columnsLayout[row];
+			let rowContent = document.createElement('div');
+			rowContent.style.display = 'grid';
+			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowContent.style.gap = '8px';
 
-				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
-					const childWrapper = document.createElement('div');
-					childWrapper.style.width = '100%';
-					childWrapper.style.height = '100%';
-					childWrapper.appendChild(children[childIndex]);
-					renderedLayout.push(childWrapper);
-					childIndex++;
-				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					renderedLayout.push(splitter);
+			for (let col = 0; col < numColumns; col++) {
+				if (children[renderedIndex]) {
+					rowContent.appendChild(children[renderedIndex]);
+					renderedIndex++;
 				}
 			}
+
+			this.appendChild(rowContent);
+
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `span ${numColumns * 2 - 1}`;
-				renderedLayout.push(splitter);
+				this.appendChild(splitter);
 			}
 		}
-
-		renderedLayout.forEach(el => this.appendChild(el));
 	}
 }
 

package/dist/nx/nxLayout.js

@@ -7,7 +7,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -15,89 +17,58 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
 		const children = Array.from(this.children);
+		if (children.length === 0) return;
 
-		if (children.length <= 0) return;
-
-		//this.innerHTML = '';
 		// 기존 자식 노드를 안전하게 제거합니다.
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
-
-
-
+		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
+		const numRows = columnsLayout.length;
 
+		console.log(columnsLayout);
 
-
-		// CSS Grid 컨테이너 스타일 설정
-		let gridColumns = '';
+		// CSS Grid 템플릿 설정
 		let gridRows = '';
-
-		for (let i = 0; i < numColumns; i++) {
-			gridColumns += '1fr ';
-			if (i < numColumns - 1) {
-				gridColumns += '8px '; // 스플리터 너비
-			}
-		}
-
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
 			if (i < numRows - 1) {
-				gridRows += '8px '; // 스플리터 높이
+				gridRows += '8px '; // 세로 스플리터 높이
 			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
-		// 자식 요소를 다시 추가하고 스플리터 삽입
-		const renderedLayout = [];
-		let childIndex = 0;
+		// 자식 요소와 스플리터 배치
+		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
-			for (let col = 0; col < numColumns; col++) {
-
-				console.log(row, col, childIndex);
+			const numColumns = columnsLayout[row];
+			let rowContent = document.createElement('div');
+			rowContent.style.display = 'grid';
+			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowContent.style.gap = '8px';
 
-				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
-					const childWrapper = document.createElement('div');
-					childWrapper.style.width = '100%';
-					childWrapper.style.height = '100%';
-					childWrapper.appendChild(children[childIndex]);
-					renderedLayout.push(childWrapper);
-					childIndex++;
-				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					renderedLayout.push(splitter);
+			for (let col = 0; col < numColumns; col++) {
+				if (children[renderedIndex]) {
+					rowContent.appendChild(children[renderedIndex]);
+					renderedIndex++;
 				}
 			}
+
+			this.appendChild(rowContent);
+
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `span ${numColumns * 2 - 1}`;
-				renderedLayout.push(splitter);
+				this.appendChild(splitter);
 			}
 		}
-
-		renderedLayout.forEach(el => this.appendChild(el));
 	}
 }
 

package/package.json

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

package/src/nx/nxLayout.js

@@ -7,7 +7,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -15,89 +17,58 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
 		const children = Array.from(this.children);
+		if (children.length === 0) return;
 
-		if (children.length <= 0) return;
-
-		//this.innerHTML = '';
 		// 기존 자식 노드를 안전하게 제거합니다.
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
-
-
-
+		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
+		const numRows = columnsLayout.length;
 
+		console.log(columnsLayout);
 
-
-		// CSS Grid 컨테이너 스타일 설정
-		let gridColumns = '';
+		// CSS Grid 템플릿 설정
 		let gridRows = '';
-
-		for (let i = 0; i < numColumns; i++) {
-			gridColumns += '1fr ';
-			if (i < numColumns - 1) {
-				gridColumns += '8px '; // 스플리터 너비
-			}
-		}
-
 		for (let i = 0; i < numRows; i++) {
 			gridRows += '1fr ';
 			if (i < numRows - 1) {
-				gridRows += '8px '; // 스플리터 높이
+				gridRows += '8px '; // 세로 스플리터 높이
 			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
-		// 자식 요소를 다시 추가하고 스플리터 삽입
-		const renderedLayout = [];
-		let childIndex = 0;
+		// 자식 요소와 스플리터 배치
+		let renderedIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
-			for (let col = 0; col < numColumns; col++) {
-
-				console.log(row, col, childIndex);
+			const numColumns = columnsLayout[row];
+			let rowContent = document.createElement('div');
+			rowContent.style.display = 'grid';
+			rowContent.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowContent.style.gap = '8px';
 
-				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
-					const childWrapper = document.createElement('div');
-					childWrapper.style.width = '100%';
-					childWrapper.style.height = '100%';
-					childWrapper.appendChild(children[childIndex]);
-					renderedLayout.push(childWrapper);
-					childIndex++;
-				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					renderedLayout.push(splitter);
+			for (let col = 0; col < numColumns; col++) {
+				if (children[renderedIndex]) {
+					rowContent.appendChild(children[renderedIndex]);
+					renderedIndex++;
 				}
 			}
+
+			this.appendChild(rowContent);
+
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `span ${numColumns * 2 - 1}`;
-				renderedLayout.push(splitter);
+				this.appendChild(splitter);
 			}
 		}
-
-		renderedLayout.forEach(el => this.appendChild(el));
 	}
 }