@pageboard/html 0.11.14 → 0.11.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.14",
+  "version": "0.11.15",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui/fieldset.js

@@ -8,9 +8,10 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 		this.init?.();
 	}
 
-	#update() {
-		if (this.isContentEditable || !this.options.name) return;
-		const val = this.form?.read(true)?.[this.options.name];
+	fill(query) {
+		if (this.isContentEditable || !this.options?.name) return;
+		if (!query) query = this.form.read(true);
+		const val = query[this.options.name];
 		const disabled = this.disabled = this.hidden = val != this.options.value;
 		for (const node of this.querySelectorAll('[name]')) {
 			node.disabled = disabled;
@@ -19,8 +20,8 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 
 	patch(state) {
 		// before/after form#fill
-		this.#update();
-		state.finish(() => this.#update());
+		this.fill();
+		state.finish(() => this.fill());
 	}
 	setup() {
 		this.form?.addEventListener('change', this);
@@ -30,7 +31,7 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 	}
 	handleEvent(e) {
 		if (e.type == "change") {
-			this.#update();
+			this.fill();
 		}
 	}
 }

package/ui/form.js

@@ -123,54 +123,15 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			if (!name) continue;
 			if (name in query && !vars.includes(name)) vars.push(name);
 			const val = query[name];
-			const str = ((v) => {
-				if (v == null) {
-					return "";
-				} else if (Array.isArray(v)) {
-					if (["radio", "checkbox", "select-multiple"].includes(elem.type)) {
-						return v;
-					} else {
-						return v.shift();
-					}
-				} else if (typeof v == "object") {
-					return v;
-				} else {
-					return v.toString();
-				}
-			})(val);
-			switch (elem.type) {
-				case 'submit':
-					break;
-				case 'radio':
-				case 'checkbox':
-					if (Array.isArray(val) && val.length == 0 && elem.value == "") {
-						elem.checked = true;
-					} else {
-						elem.checked = (Array.isArray(val) ? val : [str]).some((str) => {
-							return str.toString() == elem.value;
-						});
-					}
-					break;
-				case 'select-multiple':
-					elem.fill(str);
-					break;
-				case 'textarea':
-					elem.innerText = str;
-					break;
-				case 'hidden':
-					if (val !== undefined) elem.value = str;
-					break;
-				case 'button':
-					break;
-				default:
-					if (elem.fill) {
-						elem.fill(str);
-					} else {
-						elem.value = str;
-					}
-					break;
+			if (val === undefined) {
+				elem.reset?.();
+			} else {
+				elem.fill?.(val);
 			}
 		}
+		for (const node of this.querySelectorAll('fieldset[is="element-fieldset"]')) {
+			node.fill(query);
+		}
 		return vars;
 	}
 	save() {
@@ -356,12 +317,11 @@ Page.ready(() => {
 	VirtualHTMLElement.define(`element-form`, HTMLCustomFormElement, 'form');
 });
 
-
-HTMLSelectElement.prototype.fill = function (values) {
-	if (!Array.isArray(values)) values = [values];
+HTMLSelectElement.prototype.fill = function (val) {
+	if (!Array.isArray(val)) val = [val];
 	for (let i = 0; i < this.options.length; i++) {
 		const opt = this.options[i];
-		opt.selected = values.indexOf(opt.value) > -1;
+		opt.selected = val.indexOf(opt.value) > -1;
 	}
 };
 HTMLSelectElement.prototype.reset = function () {
@@ -371,12 +331,24 @@ HTMLSelectElement.prototype.reset = function () {
 HTMLInputElement.prototype.fill = function (val) {
 	if (val == null) val = "";
 	if (this.type == "radio" || this.type == "checkbox") {
-		this.checked = val;
-	} else if (this.type == "file") {
-		if (val == '' || val == null) this.removeAttribute('value');
-		else this.setAttribute('value', val);
+		if (Array.isArray(val) && val.length == 0 && this.value == "") {
+			this.checked = true;
+		} else {
+			this.checked = (Array.isArray(val) ? val : [val]).some(str => {
+				return str.toString() == this.value;
+			});
+		}
 	} else {
-		this.value = val;
+		if (Array.isArray(val)) {
+			console.warn("Avoid fill(array) on scalar input", this, val);
+			val = val.shift();
+		}
+		if (this.type == "file") {
+			if (val === '') this.removeAttribute('value');
+			else this.setAttribute('value', val);
+		} else {
+			this.value = val;
+		}
 	}
 };
 
@@ -398,6 +370,10 @@ HTMLInputElement.prototype.save = function () {
 	}
 };
 
+HTMLTextAreaElement.prototype.fill = function (val) {
+	this.value = val == null ? '' : val;
+};
+
 HTMLTextAreaElement.prototype.reset = function () {
 	this.value = this.defaultValue;
 };