ninegrid2 6.431.0 → 6.433.0

package/dist/ai/aiMessage.js

@@ -87,6 +87,66 @@ class aiMessage extends HTMLElement
 		});
 	}
 
+	initialize2 = (info, data) => {
+		this.#data = data;
+
+		setTimeout(() => {
+			this.#init2();
+		});
+	}
+
+	#init2 = () => {
+
+		const rowCount = Number(this.getAttribute("row-count"));
+		if (rowCount < 1) {
+			this.shadowRoot.querySelector(".grid").style.display = "none";
+			this.shadowRoot.querySelector(".chat-menu").style.display = "none";
+			return;
+		}
+
+		let colgroup = "";
+		let thead = "";
+		let tbody = "";
+		for (let o of info) {
+			colgroup += `<col background-color="#888"/>`;
+			thead += `<th>${o.desc}</th>`;
+			tbody += `<td data-bind="${o.name}"></td>`;
+		}
+
+		const html = `
+			<nine-grid class="ai" display-row-count="${rowCount > 5 ? 5 : rowCount}" show-title-bar="false" show-menu-icon="false" show-status-bar="false" select-type="row" auto-fit-col="true" show-title-bar="true" show-menu-icon="true" show-status-bar="true" enable-fixed-col="true" row-resizable="false" col-movable="true">
+				<table>
+					<caption>Sheet1</caption>
+					<colgroup>
+						<col background-color="#888"/>
+						${colgroup}
+					</colgroup>
+					<thead>
+						<tr>
+							<th>No.</th>
+							${thead}
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th><ng-row-indicator/></th>
+							${tbody}
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+		`;
+
+		this.shadowRoot.querySelector(".grid").innerHTML = html;
+		
+		setTimeout(() => {
+			const grd = this.shadowRoot.querySelector("nine-grid");
+			grd.data.source = this.#data;
+
+			//this.scrollIntoView({ behavior: "smooth", block: "end" });
+		});
+	};
+
 	#init = () => {
 
 		const rowCount = Number(this.getAttribute("row-count"));
@@ -272,6 +332,47 @@ class aiChat extends HTMLElement
 			el.scrollIntoView({ behavior: "smooth", block: "end" });
 		}, 200);
 	};
+
+	add2 = (sender, message, info, data) => {
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		//console.log(data);
+
+		let el;
+		switch (sender) {
+			case "me":
+				el = document.createElement("nx-ai-my-message");
+				el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ing":
+				el = document.createElement("nx-ai-ing-message");
+				//el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ai":
+				this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+					el.remove();
+				});
+
+				el = document.createElement("nx-ai-message");
+				el.setAttribute("message", message);
+				el.setAttribute("row-count", data ? data.length : 0);
+				//el.data = data;
+				el.initialize(data);
+				target.appendChild(el);
+				break;
+
+			default:
+				break;
+		}
+
+		setTimeout(() => {
+			el.scrollIntoView({ behavior: "smooth", block: "end" });
+		}, 200);
+	};
 }
 
 customElements.define("nx-ai-message", aiMessage);

package/dist/bundle.cjs.js

@@ -14865,24 +14865,24 @@ class ngColumns
 		return this.#owner.activeTmpl.querySelectorAll("[data-bind]").length;
 	}
 
-	#element2Info = (el) => {
-		if (!el) return null;
+	info = (v) => {
 
-		const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
+		const element2Info = (el) => {
 
-		return {
-			"name": el.dataset.bind,
-			"type": (el.dataset.type || "string").toLocaleLowerCase(),
-			"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
-		};
-	};
+			if (!el) return null;
 
-	info = (v) => {
-		return this.#element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`));
-	}
+			const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
 
-	infos = () => {
-		return Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => this.#element2Info(el));
+			return {
+				"name": el.dataset.bind,
+				"type": (el.dataset.type || "string").toLocaleLowerCase(),
+				"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
+			};
+		};
+
+		return v ?
+			element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`)) :
+			Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => element2Info(el));
 	}
 	
 	
@@ -27503,6 +27503,66 @@ class aiMessage extends HTMLElement
 		});
 	}
 
+	initialize2 = (info, data) => {
+		this.#data = data;
+
+		setTimeout(() => {
+			this.#init2();
+		});
+	}
+
+	#init2 = () => {
+
+		const rowCount = Number(this.getAttribute("row-count"));
+		if (rowCount < 1) {
+			this.shadowRoot.querySelector(".grid").style.display = "none";
+			this.shadowRoot.querySelector(".chat-menu").style.display = "none";
+			return;
+		}
+
+		let colgroup = "";
+		let thead = "";
+		let tbody = "";
+		for (let o of info) {
+			colgroup += `<col background-color="#888"/>`;
+			thead += `<th>${o.desc}</th>`;
+			tbody += `<td data-bind="${o.name}"></td>`;
+		}
+
+		const html = `
+			<nine-grid class="ai" display-row-count="${rowCount > 5 ? 5 : rowCount}" show-title-bar="false" show-menu-icon="false" show-status-bar="false" select-type="row" auto-fit-col="true" show-title-bar="true" show-menu-icon="true" show-status-bar="true" enable-fixed-col="true" row-resizable="false" col-movable="true">
+				<table>
+					<caption>Sheet1</caption>
+					<colgroup>
+						<col background-color="#888"/>
+						${colgroup}
+					</colgroup>
+					<thead>
+						<tr>
+							<th>No.</th>
+							${thead}
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th><ng-row-indicator/></th>
+							${tbody}
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+		`;
+
+		this.shadowRoot.querySelector(".grid").innerHTML = html;
+		
+		setTimeout(() => {
+			const grd = this.shadowRoot.querySelector("nine-grid");
+			grd.data.source = this.#data;
+
+			//this.scrollIntoView({ behavior: "smooth", block: "end" });
+		});
+	};
+
 	#init = () => {
 
 		const rowCount = Number(this.getAttribute("row-count"));
@@ -27685,6 +27745,44 @@ class aiChat extends HTMLElement
 			el.scrollIntoView({ behavior: "smooth", block: "end" });
 		}, 200);
 	};
+
+	add2 = (sender, message, info, data) => {
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		//console.log(data);
+
+		let el;
+		switch (sender) {
+			case "me":
+				el = document.createElement("nx-ai-my-message");
+				el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ing":
+				el = document.createElement("nx-ai-ing-message");
+				//el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ai":
+				this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+					el.remove();
+				});
+
+				el = document.createElement("nx-ai-message");
+				el.setAttribute("message", message);
+				el.setAttribute("row-count", data ? data.length : 0);
+				//el.data = data;
+				el.initialize(data);
+				target.appendChild(el);
+				break;
+		}
+
+		setTimeout(() => {
+			el.scrollIntoView({ behavior: "smooth", block: "end" });
+		}, 200);
+	};
 }
 
 customElements.define("nx-ai-message", aiMessage);

package/dist/bundle.esm.js

@@ -14863,24 +14863,24 @@ class ngColumns
 		return this.#owner.activeTmpl.querySelectorAll("[data-bind]").length;
 	}
 
-	#element2Info = (el) => {
-		if (!el) return null;
+	info = (v) => {
 
-		const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
+		const element2Info = (el) => {
 
-		return {
-			"name": el.dataset.bind,
-			"type": (el.dataset.type || "string").toLocaleLowerCase(),
-			"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
-		};
-	};
+			if (!el) return null;
 
-	info = (v) => {
-		return this.#element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`));
-	}
+			const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
 
-	infos = () => {
-		return Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => this.#element2Info(el));
+			return {
+				"name": el.dataset.bind,
+				"type": (el.dataset.type || "string").toLocaleLowerCase(),
+				"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
+			};
+		};
+
+		return v ?
+			element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`)) :
+			Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => element2Info(el));
 	}
 	
 	
@@ -27501,6 +27501,66 @@ class aiMessage extends HTMLElement
 		});
 	}
 
+	initialize2 = (info, data) => {
+		this.#data = data;
+
+		setTimeout(() => {
+			this.#init2();
+		});
+	}
+
+	#init2 = () => {
+
+		const rowCount = Number(this.getAttribute("row-count"));
+		if (rowCount < 1) {
+			this.shadowRoot.querySelector(".grid").style.display = "none";
+			this.shadowRoot.querySelector(".chat-menu").style.display = "none";
+			return;
+		}
+
+		let colgroup = "";
+		let thead = "";
+		let tbody = "";
+		for (let o of info) {
+			colgroup += `<col background-color="#888"/>`;
+			thead += `<th>${o.desc}</th>`;
+			tbody += `<td data-bind="${o.name}"></td>`;
+		}
+
+		const html = `
+			<nine-grid class="ai" display-row-count="${rowCount > 5 ? 5 : rowCount}" show-title-bar="false" show-menu-icon="false" show-status-bar="false" select-type="row" auto-fit-col="true" show-title-bar="true" show-menu-icon="true" show-status-bar="true" enable-fixed-col="true" row-resizable="false" col-movable="true">
+				<table>
+					<caption>Sheet1</caption>
+					<colgroup>
+						<col background-color="#888"/>
+						${colgroup}
+					</colgroup>
+					<thead>
+						<tr>
+							<th>No.</th>
+							${thead}
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th><ng-row-indicator/></th>
+							${tbody}
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+		`;
+
+		this.shadowRoot.querySelector(".grid").innerHTML = html;
+		
+		setTimeout(() => {
+			const grd = this.shadowRoot.querySelector("nine-grid");
+			grd.data.source = this.#data;
+
+			//this.scrollIntoView({ behavior: "smooth", block: "end" });
+		});
+	};
+
 	#init = () => {
 
 		const rowCount = Number(this.getAttribute("row-count"));
@@ -27683,6 +27743,44 @@ class aiChat extends HTMLElement
 			el.scrollIntoView({ behavior: "smooth", block: "end" });
 		}, 200);
 	};
+
+	add2 = (sender, message, info, data) => {
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		//console.log(data);
+
+		let el;
+		switch (sender) {
+			case "me":
+				el = document.createElement("nx-ai-my-message");
+				el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ing":
+				el = document.createElement("nx-ai-ing-message");
+				//el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ai":
+				this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+					el.remove();
+				});
+
+				el = document.createElement("nx-ai-message");
+				el.setAttribute("message", message);
+				el.setAttribute("row-count", data ? data.length : 0);
+				//el.data = data;
+				el.initialize(data);
+				target.appendChild(el);
+				break;
+		}
+
+		setTimeout(() => {
+			el.scrollIntoView({ behavior: "smooth", block: "end" });
+		}, 200);
+	};
 }
 
 customElements.define("nx-ai-message", aiMessage);

package/dist/etc/ngColumns.js

@@ -12,24 +12,24 @@ export class ngColumns
 		return this.#owner.activeTmpl.querySelectorAll("[data-bind]").length;
 	}
 
-	#element2Info = (el) => {
-		if (!el) return null;
+	info = (v) => {
 
-		const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
+		const element2Info = (el) => {
 
-		return {
-			"name": el.dataset.bind,
-			"type": (el.dataset.type || "string").toLocaleLowerCase(),
-			"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
-		};
-	};
+			if (!el) return null;
 
-	info = (v) => {
-		return this.#element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`));
-	}
+			const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
+
+			return {
+				"name": el.dataset.bind,
+				"type": (el.dataset.type || "string").toLocaleLowerCase(),
+				"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
+			};
+		}
 
-	infos = () => {
-		return Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => this.#element2Info(el));
+		return v ?
+			element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`)) :
+			Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => element2Info(el));
 	}
 	
 	

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.431.0",
+  "version": "6.433.0",
   "main": "dist/index.js",
   "exports": {
     "import": "./dist/index.js",

package/src/ai/aiMessage.js

@@ -87,6 +87,66 @@ class aiMessage extends HTMLElement
 		});
 	}
 
+	initialize2 = (info, data) => {
+		this.#data = data;
+
+		setTimeout(() => {
+			this.#init2();
+		});
+	}
+
+	#init2 = () => {
+
+		const rowCount = Number(this.getAttribute("row-count"));
+		if (rowCount < 1) {
+			this.shadowRoot.querySelector(".grid").style.display = "none";
+			this.shadowRoot.querySelector(".chat-menu").style.display = "none";
+			return;
+		}
+
+		let colgroup = "";
+		let thead = "";
+		let tbody = "";
+		for (let o of info) {
+			colgroup += `<col background-color="#888"/>`;
+			thead += `<th>${o.desc}</th>`;
+			tbody += `<td data-bind="${o.name}"></td>`;
+		}
+
+		const html = `
+			<nine-grid class="ai" display-row-count="${rowCount > 5 ? 5 : rowCount}" show-title-bar="false" show-menu-icon="false" show-status-bar="false" select-type="row" auto-fit-col="true" show-title-bar="true" show-menu-icon="true" show-status-bar="true" enable-fixed-col="true" row-resizable="false" col-movable="true">
+				<table>
+					<caption>Sheet1</caption>
+					<colgroup>
+						<col background-color="#888"/>
+						${colgroup}
+					</colgroup>
+					<thead>
+						<tr>
+							<th>No.</th>
+							${thead}
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th><ng-row-indicator/></th>
+							${tbody}
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+		`;
+
+		this.shadowRoot.querySelector(".grid").innerHTML = html;
+		
+		setTimeout(() => {
+			const grd = this.shadowRoot.querySelector("nine-grid");
+			grd.data.source = this.#data;
+
+			//this.scrollIntoView({ behavior: "smooth", block: "end" });
+		});
+	};
+
 	#init = () => {
 
 		const rowCount = Number(this.getAttribute("row-count"));
@@ -272,6 +332,47 @@ class aiChat extends HTMLElement
 			el.scrollIntoView({ behavior: "smooth", block: "end" });
 		}, 200);
 	};
+
+	add2 = (sender, message, info, data) => {
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		//console.log(data);
+
+		let el;
+		switch (sender) {
+			case "me":
+				el = document.createElement("nx-ai-my-message");
+				el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ing":
+				el = document.createElement("nx-ai-ing-message");
+				//el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ai":
+				this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+					el.remove();
+				});
+
+				el = document.createElement("nx-ai-message");
+				el.setAttribute("message", message);
+				el.setAttribute("row-count", data ? data.length : 0);
+				//el.data = data;
+				el.initialize(data);
+				target.appendChild(el);
+				break;
+
+			default:
+				break;
+		}
+
+		setTimeout(() => {
+			el.scrollIntoView({ behavior: "smooth", block: "end" });
+		}, 200);
+	};
 }
 
 customElements.define("nx-ai-message", aiMessage);

package/src/etc/ngColumns.js

@@ -12,24 +12,24 @@ export class ngColumns
 		return this.#owner.activeTmpl.querySelectorAll("[data-bind]").length;
 	}
 
-	#element2Info = (el) => {
-		if (!el) return null;
+	info = (v) => {
 
-		const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
+		const element2Info = (el) => {
 
-		return {
-			"name": el.dataset.bind,
-			"type": (el.dataset.type || "string").toLocaleLowerCase(),
-			"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
-		};
-	};
+			if (!el) return null;
 
-	info = (v) => {
-		return this.#element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`));
-	}
+			const ths = this.#owner.body.querySelectorAll(`thead [data-col="${el.dataset.col}"]`);
+
+			return {
+				"name": el.dataset.bind,
+				"type": (el.dataset.type || "string").toLocaleLowerCase(),
+				"desc": ths.length > 0 ? ths[ths.length - 1].getAttribute("title") : null,
+			};
+		}
 
-	infos = () => {
-		return Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => this.#element2Info(el));
+		return v ?
+			element2Info(this.#owner.activeTmpl.querySelector(`[data-bind="${v}"]`)) :
+			Array.from(this.#owner.activeTmpl.querySelectorAll("[data-bind]")).map(el => element2Info(el));
 	}