Support dataset when creating elements

Allow dialog to show element and override buttons

web/scripts/ui.js

@@ -8,14 +8,18 @@ export function $el(tag, propsOrChildren, children) {
 		if (Array.isArray(propsOrChildren)) {
 			element.append(...propsOrChildren);
 		} else {
-			const parent = propsOrChildren.parent;
+			const { parent, $: cb, dataset, style } = propsOrChildren;
 			delete propsOrChildren.parent;
-			const cb = propsOrChildren.$;
 			delete propsOrChildren.$;
-
-			if (propsOrChildren.style) {
-				Object.assign(element.style, propsOrChildren.style);
+			delete propsOrChildren.dataset;
 			delete propsOrChildren.style;
+
+			if (style) {
+				Object.assign(element.style, style);
+			}
+
+			if (dataset) {
+				Object.assign(element.dataset, dataset);
 			}
 
 			Object.assign(element, propsOrChildren);
@@ -155,18 +159,21 @@ function dragElement(dragEl, settings) {
 	}
 }
 
-class ComfyDialog {
+export class ComfyDialog {
 	constructor() {
 		this.element = $el("div.comfy-modal", { parent: document.body }, [
-			$el("div.comfy-modal-content", [
-				$el("p", { $: (p) => (this.textElement = p) }),
+			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
+		]);
+	}
+
+	createButtons() {
+		return [
 			$el("button", {
 				type: "button",
 				textContent: "Close",
 				onclick: () => this.close(),
 			}),
-			]),
-		]);
+		];
 	}
 
 	close() {
@@ -174,7 +181,11 @@ class ComfyDialog {
 	}
 
 	show(html) {
+		if (typeof html === "string") {
 			this.textElement.innerHTML = html;
+		} else {
+			this.textElement.replaceChildren(html);
+		}
 		this.element.style.display = "flex";
 	}
 }