ninegrid2 6.1326.0 → 6.1328.0

package/dist/bundle.cjs.js

@@ -28701,6 +28701,11 @@ class NxLayout2 extends HTMLElement {
 
 	#originalChildren;
 
+	static get observedAttributes() {
+		// rows-height를 감시 대상에 추가
+		return ['columns', 'rows-height'];
+	}
+
 	constructor() {
 		super();
 	}
@@ -28711,16 +28716,29 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (this.#originalChildren && oldValue !== newValue) {
-			this.#render();
+		if (oldValue !== newValue) {
+			if (name === 'rows-height') {
+				// 속성이 변경되면 즉시 CSS 변수에 적용
+				this.#applyRowsHeight(newValue);
+			}
+			if (this.#originalChildren) {
+				this.#render();
+			}
 		}
 	}
 
-	static get observedAttributes() {
-		return ['columns'];
+	#applyRowsHeight(value) {
+		if (value) {
+			// 콤마 제거 및 *를 1fr로 변환하는 편의 기능 추가
+			const template = value.replace(/,/g, " ").replace(/\*/g, "1fr");
+			this.style.setProperty('--rows-template', template);
+		}
 	}
 
 	#render() {
+
+		this.#applyRowsHeight(this.getAttribute('rows-height'));
+
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 
@@ -28829,6 +28847,7 @@ class nxPanel extends nxDiv {
 	#init = () => {
 		const caption = this.getAttribute("caption");
 		const columns = this.getAttribute("columns") || "";
+		const rowsHeight = this.getAttribute("rows-height")?.replace(/,/g, " ") || "";
 
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
@@ -28841,7 +28860,7 @@ class nxPanel extends nxDiv {
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">
-				<nx-layout2 columns="${columns}">
+				<nx-layout2 columns="${columns}" rows-height="${rowsHeight}">
 					${this.originContents}
 				</nx-layout2>
 			</div>
@@ -55280,15 +55299,30 @@ class nxEditor extends nxDiv {
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/dist/bundle.esm.js

@@ -28697,6 +28697,11 @@ class NxLayout2 extends HTMLElement {
 
 	#originalChildren;
 
+	static get observedAttributes() {
+		// rows-height를 감시 대상에 추가
+		return ['columns', 'rows-height'];
+	}
+
 	constructor() {
 		super();
 	}
@@ -28707,16 +28712,29 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (this.#originalChildren && oldValue !== newValue) {
-			this.#render();
+		if (oldValue !== newValue) {
+			if (name === 'rows-height') {
+				// 속성이 변경되면 즉시 CSS 변수에 적용
+				this.#applyRowsHeight(newValue);
+			}
+			if (this.#originalChildren) {
+				this.#render();
+			}
 		}
 	}
 
-	static get observedAttributes() {
-		return ['columns'];
+	#applyRowsHeight(value) {
+		if (value) {
+			// 콤마 제거 및 *를 1fr로 변환하는 편의 기능 추가
+			const template = value.replace(/,/g, " ").replace(/\*/g, "1fr");
+			this.style.setProperty('--rows-template', template);
+		}
 	}
 
 	#render() {
+
+		this.#applyRowsHeight(this.getAttribute('rows-height'));
+
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 
@@ -28825,6 +28843,7 @@ class nxPanel extends nxDiv {
 	#init = () => {
 		const caption = this.getAttribute("caption");
 		const columns = this.getAttribute("columns") || "";
+		const rowsHeight = this.getAttribute("rows-height")?.replace(/,/g, " ") || "";
 
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
@@ -28837,7 +28856,7 @@ class nxPanel extends nxDiv {
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">
-				<nx-layout2 columns="${columns}">
+				<nx-layout2 columns="${columns}" rows-height="${rowsHeight}">
 					${this.originContents}
 				</nx-layout2>
 			</div>
@@ -55276,15 +55295,30 @@ class nxEditor extends nxDiv {
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/dist/nx/nxEditor.js

@@ -111,15 +111,30 @@ class nxEditor extends nxDiv {
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/dist/nx/nxLayout2.js

@@ -4,6 +4,11 @@ class NxLayout2 extends HTMLElement {
 
 	#originalChildren;
 
+	static get observedAttributes() {
+		// rows-height를 감시 대상에 추가
+		return ['columns', 'rows-height'];
+	}
+
 	constructor() {
 		super();
 	}
@@ -14,16 +19,29 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (this.#originalChildren && oldValue !== newValue) {
-			this.#render();
+		if (oldValue !== newValue) {
+			if (name === 'rows-height') {
+				// 속성이 변경되면 즉시 CSS 변수에 적용
+				this.#applyRowsHeight(newValue);
+			}
+			if (this.#originalChildren) {
+				this.#render();
+			}
 		}
 	}
 
-	static get observedAttributes() {
-		return ['columns'];
+	#applyRowsHeight(value) {
+		if (value) {
+			// 콤마 제거 및 *를 1fr로 변환하는 편의 기능 추가
+			const template = value.replace(/,/g, " ").replace(/\*/g, "1fr");
+			this.style.setProperty('--rows-template', template);
+		}
 	}
 
 	#render() {
+
+		this.#applyRowsHeight(this.getAttribute('rows-height'));
+
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 

package/dist/nx/nxPanel.js

@@ -14,6 +14,7 @@ class nxPanel extends nxDiv {
 	#init = () => {
 		const caption = this.getAttribute("caption");
 		const columns = this.getAttribute("columns") || "";
+		const rowsHeight = this.getAttribute("rows-height")?.replace(/,/g, " ") || "";
 
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
@@ -26,7 +27,7 @@ class nxPanel extends nxDiv {
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">
-				<nx-layout2 columns="${columns}">
+				<nx-layout2 columns="${columns}" rows-height="${rowsHeight}">
 					${this.originContents}
 				</nx-layout2>
 			</div>

package/package.json

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

package/src/nx/nxEditor.js

@@ -111,15 +111,30 @@ class nxEditor extends nxDiv {
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Image.configure({ inline: true, allowBase64: true }),
 			],
-			content: this.originContents || '',
+			content: this.#tempValue || '',
 			onUpdate: ({ editor }) => {
 				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
-			}
+			},
+			onSelectionUpdate: ({ editor }) => {
+				this.#updateMenuState(editor);
+			},
 		});
 
 		this.#bindEvents();
 	}
 
+	#updateMenuState(editor) {
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			if (editor.isActive(btn.dataset.cmd)) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			if (editor.isActive({ textAlign: btn.dataset.align })) btn.classList.add('is-active');
+			else btn.classList.remove('is-active');
+		});
+	}
+
 	#bindEvents() {
 		const editor = this.#editor;
 

package/src/nx/nxLayout2.js

@@ -4,6 +4,11 @@ class NxLayout2 extends HTMLElement {
 
 	#originalChildren;
 
+	static get observedAttributes() {
+		// rows-height를 감시 대상에 추가
+		return ['columns', 'rows-height'];
+	}
+
 	constructor() {
 		super();
 	}
@@ -14,16 +19,29 @@ class NxLayout2 extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		if (this.#originalChildren && oldValue !== newValue) {
-			this.#render();
+		if (oldValue !== newValue) {
+			if (name === 'rows-height') {
+				// 속성이 변경되면 즉시 CSS 변수에 적용
+				this.#applyRowsHeight(newValue);
+			}
+			if (this.#originalChildren) {
+				this.#render();
+			}
 		}
 	}
 
-	static get observedAttributes() {
-		return ['columns'];
+	#applyRowsHeight(value) {
+		if (value) {
+			// 콤마 제거 및 *를 1fr로 변환하는 편의 기능 추가
+			const template = value.replace(/,/g, " ").replace(/\*/g, "1fr");
+			this.style.setProperty('--rows-template', template);
+		}
 	}
 
 	#render() {
+
+		this.#applyRowsHeight(this.getAttribute('rows-height'));
+
 		const children = this.#originalChildren;
 		if (!children || children.length === 0) return;
 

package/src/nx/nxPanel.js

@@ -14,6 +14,7 @@ class nxPanel extends nxDiv {
 	#init = () => {
 		const caption = this.getAttribute("caption");
 		const columns = this.getAttribute("columns") || "";
+		const rowsHeight = this.getAttribute("rows-height")?.replace(/,/g, " ") || "";
 
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
@@ -26,7 +27,7 @@ class nxPanel extends nxDiv {
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">
-				<nx-layout2 columns="${columns}">
+				<nx-layout2 columns="${columns}" rows-height="${rowsHeight}">
 					${this.originContents}
 				</nx-layout2>
 			</div>