ninegrid2 6.982.0 → 6.984.0

package/dist/bundle.cjs.js

@@ -121896,13 +121896,17 @@ 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,27 +121916,24 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		while (this.firstChild) {
-			this.removeChild(this.firstChild);
+		console.log("333");
+		// Shadow Root의 모든 자식 노드 제거
+		while (this.shadowRoot.firstChild) {
+			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
 		}
 
-		console.log("11111");
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
-		}
-
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		const mainGrid = document.createElement('div');
+		mainGrid.style.display = 'grid';
+		mainGrid.style.width = '100%';
+		mainGrid.style.height = '100%';
+		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
 		let childIndex = 0;
 
@@ -121940,40 +121941,28 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-
-			let columnTemplate = '';
-			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
-				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
-				}
-			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
+					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
-				}
 			}
 
-			this.appendChild(rowWrapper);
+			mainGrid.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
+				mainGrid.appendChild(splitter);
 			}
 		}
+
+		this.shadowRoot.appendChild(mainGrid);
 	}
 }
 

package/dist/bundle.esm.js

@@ -121892,13 +121892,17 @@ 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();
 		}
 	}
@@ -121908,27 +121912,24 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		while (this.firstChild) {
-			this.removeChild(this.firstChild);
+		console.log("333");
+		// Shadow Root의 모든 자식 노드 제거
+		while (this.shadowRoot.firstChild) {
+			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
 		}
 
-		console.log("11111");
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
-		}
-
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		const mainGrid = document.createElement('div');
+		mainGrid.style.display = 'grid';
+		mainGrid.style.width = '100%';
+		mainGrid.style.height = '100%';
+		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
 		let childIndex = 0;
 
@@ -121936,40 +121937,28 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-
-			let columnTemplate = '';
-			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
-				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
-				}
-			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
+					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
-				}
 			}
 
-			this.appendChild(rowWrapper);
+			mainGrid.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
+				mainGrid.appendChild(splitter);
 			}
 		}
+
+		this.shadowRoot.appendChild(mainGrid);
 	}
 }
 

package/dist/nx/nxLayout.js

@@ -1,13 +1,17 @@
 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();
 		}
 	}
@@ -17,27 +21,24 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		while (this.firstChild) {
-			this.removeChild(this.firstChild);
+		console.log("333")
+		// Shadow Root의 모든 자식 노드 제거
+		while (this.shadowRoot.firstChild) {
+			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
 		}
 
-		console.log("11111")
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
-		}
-
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		const mainGrid = document.createElement('div');
+		mainGrid.style.display = 'grid';
+		mainGrid.style.width = '100%';
+		mainGrid.style.height = '100%';
+		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
 		let childIndex = 0;
 
@@ -45,41 +46,29 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-
-			let columnTemplate = '';
-			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
-				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
-				}
-			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
+					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
-				}
 			}
 
-			this.appendChild(rowWrapper);
+			mainGrid.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
+				mainGrid.appendChild(splitter);
 			}
 		}
+
+		this.shadowRoot.appendChild(mainGrid);
 	}
 }
 
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);

package/package.json

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

package/src/nx/nxLayout.js

@@ -1,13 +1,17 @@
 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();
 		}
 	}
@@ -17,27 +21,24 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
+		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
-		while (this.firstChild) {
-			this.removeChild(this.firstChild);
+		console.log("333")
+		// Shadow Root의 모든 자식 노드 제거
+		while (this.shadowRoot.firstChild) {
+			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
 		}
 
-		console.log("11111")
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
-		}
-
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		const mainGrid = document.createElement('div');
+		mainGrid.style.display = 'grid';
+		mainGrid.style.width = '100%';
+		mainGrid.style.height = '100%';
+		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
 
 		let childIndex = 0;
 
@@ -45,41 +46,29 @@ class NxLayout extends HTMLElement {
 			const numColumns = columnsLayout[row];
 			const rowWrapper = document.createElement('div');
 			rowWrapper.style.display = 'grid';
-
-			let columnTemplate = '';
-			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
-				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
-				}
-			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
+			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
+			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
 			rowWrapper.style.height = '100%';
 
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
+					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
 					rowWrapper.appendChild(children[childIndex]);
 					childIndex++;
 				}
-
-				if (col < numColumns - 1) {
-					const splitter = document.createElement('nx-splitter');
-					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
-				}
 			}
 
-			this.appendChild(rowWrapper);
+			mainGrid.appendChild(rowWrapper);
 
 			if (row < numRows - 1) {
 				const splitter = document.createElement('nx-splitter');
 				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
+				mainGrid.appendChild(splitter);
 			}
 		}
+
+		this.shadowRoot.appendChild(mainGrid);
 	}
 }
 
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);