ninegrid2 6.983.0 → 6.985.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,50 +121916,47 @@ 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;
 
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111");
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			this.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				this.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-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,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,50 +121912,47 @@ 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;
 
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111");
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			this.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				this.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-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,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,51 +21,48 @@ 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;
 
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111")
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			this.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				this.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-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.983.0",
+  "version": "6.985.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,51 +21,48 @@ 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;
 
-		this.style.display = 'grid';
-		this.style.width = '100%';
-		this.style.height = '100%';
-		this.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111")
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 불필요한 래퍼 없이 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			this.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				this.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-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);