ninegrid2 6.985.0 → 6.986.0

package/dist/bundle.cjs.js

@@ -121896,17 +121896,13 @@ class nxTitle extends HTMLElement {
 customElements.define("nx-title", nxTitle);
 
 class NxLayout extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
 	connectedCallback() {
 		this.#render();
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue !== newValue) {
+		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
 			this.#render();
 		}
 	}
@@ -121916,47 +121912,50 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		const children = Array.from(this.children);
+		if (children.length === 0) return;
+
+		// 기존 자식 노드를 안전하게 제거
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
+
+		console.log("22222");
+
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log("111");
+		this.style.display = 'grid';
+		this.style.width = '100%';
+		this.style.height = '100%';
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
-		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
-		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
-		let slotIndex = 0;
+		let childIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowTemplate = '';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
-				// <slot>에 이름을 부여하여 특정 요소를 투영
-				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
-				slotIndex++;
-				if (col < numColumns - 1) {
-					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
+				if (children[childIndex]) {
+					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					rowWrapper.appendChild(children[childIndex]);
+					childIndex++;
 				}
 			}
 
-			template += `
-             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
-                 ${rowTemplate}
-             </div>
-           `;
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
-				template += `<nx-splitter direction="vertical"></nx-splitter>`;
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
 			}
 		}
-
-		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
-		this.shadowRoot.innerHTML = template;
-
-		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
-		const children = Array.from(this.children);
-		for (let i = 0; i < children.length; i++) {
-			children[i].slot = `slot-${i}`;
-		}
 	}
 }
 

package/dist/bundle.esm.js

@@ -121892,17 +121892,13 @@ class nxTitle extends HTMLElement {
 customElements.define("nx-title", nxTitle);
 
 class NxLayout extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
 	connectedCallback() {
 		this.#render();
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue !== newValue) {
+		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
 			this.#render();
 		}
 	}
@@ -121912,47 +121908,50 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		const children = Array.from(this.children);
+		if (children.length === 0) return;
+
+		// 기존 자식 노드를 안전하게 제거
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
+
+		console.log("22222");
+
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log("111");
+		this.style.display = 'grid';
+		this.style.width = '100%';
+		this.style.height = '100%';
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
-		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
-		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
-		let slotIndex = 0;
+		let childIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowTemplate = '';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
-				// <slot>에 이름을 부여하여 특정 요소를 투영
-				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
-				slotIndex++;
-				if (col < numColumns - 1) {
-					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
+				if (children[childIndex]) {
+					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					rowWrapper.appendChild(children[childIndex]);
+					childIndex++;
 				}
 			}
 
-			template += `
-             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
-                 ${rowTemplate}
-             </div>
-           `;
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
-				template += `<nx-splitter direction="vertical"></nx-splitter>`;
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
 			}
 		}
-
-		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
-		this.shadowRoot.innerHTML = template;
-
-		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
-		const children = Array.from(this.children);
-		for (let i = 0; i < children.length; i++) {
-			children[i].slot = `slot-${i}`;
-		}
 	}
 }
 

package/dist/nx/nxLayout.js

@@ -1,17 +1,13 @@
 import ninegrid from "../index.js";
 
 class NxLayout extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
 	connectedCallback() {
 		this.#render();
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue !== newValue) {
+		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
 			this.#render();
 		}
 	}
@@ -21,48 +17,51 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		const children = Array.from(this.children);
+		if (children.length === 0) return;
+
+		// 기존 자식 노드를 안전하게 제거
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
+
+		console.log("22222")
+
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log("111")
+		this.style.display = 'grid';
+		this.style.width = '100%';
+		this.style.height = '100%';
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
-		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
-		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
-		let slotIndex = 0;
+		let childIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowTemplate = '';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
-				// <slot>에 이름을 부여하여 특정 요소를 투영
-				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
-				slotIndex++;
-				if (col < numColumns - 1) {
-					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
+				if (children[childIndex]) {
+					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					rowWrapper.appendChild(children[childIndex]);
+					childIndex++;
 				}
 			}
 
-			template += `
-             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
-                 ${rowTemplate}
-             </div>
-           `;
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
-				template += `<nx-splitter direction="vertical"></nx-splitter>`;
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
 			}
 		}
-
-		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
-		this.shadowRoot.innerHTML = template;
-
-		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
-		const children = Array.from(this.children);
-		for (let i = 0; i < children.length; i++) {
-			children[i].slot = `slot-${i}`;
-		}
 	}
 }
 
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);

package/package.json

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

package/src/nx/nxLayout.js

@@ -1,17 +1,13 @@
 import ninegrid from "../index.js";
 
 class NxLayout extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
 	connectedCallback() {
 		this.#render();
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue !== newValue) {
+		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
+		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
 			this.#render();
 		}
 	}
@@ -21,48 +17,51 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		const children = Array.from(this.children);
+		if (children.length === 0) return;
+
+		// 기존 자식 노드를 안전하게 제거
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
+
+		console.log("22222")
+
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		console.log("111")
+		this.style.display = 'grid';
+		this.style.width = '100%';
+		this.style.height = '100%';
+		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
-		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
-		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
-		let slotIndex = 0;
+		let childIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			let rowTemplate = '';
+			const rowWrapper = document.createElement('div');
+			rowWrapper.style.display = 'grid';
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
+			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
-				// <slot>에 이름을 부여하여 특정 요소를 투영
-				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
-				slotIndex++;
-				if (col < numColumns - 1) {
-					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
+				if (children[childIndex]) {
+					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
+					rowWrapper.appendChild(children[childIndex]);
+					childIndex++;
 				}
 			}
 
-			template += `
-             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
-                 ${rowTemplate}
-             </div>
-           `;
+			this.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
-				template += `<nx-splitter direction="vertical"></nx-splitter>`;
+				const splitter = document.createElement('nx-splitter');
+				splitter.setAttribute('direction', 'vertical');
+				this.appendChild(splitter);
 			}
 		}
-
-		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
-		this.shadowRoot.innerHTML = template;
-
-		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
-		const children = Array.from(this.children);
-		for (let i = 0; i < children.length; i++) {
-			children[i].slot = `slot-${i}`;
-		}
 	}
 }
 
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);