@pageboard/html 0.11.14 → 0.11.16

package/package.json

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

package/ui/fieldset-list.js

@@ -214,18 +214,17 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		const form = this.closest('form');
 		const values = form.read(true);
 		const list = this.#listFromValues(values);
-		const prefix = this.#prefix;
-		if (!this.#walk) this.#walk = new WalkIndex(this, (node) => {
-			if (node.name?.startsWith(prefix)) {
-				const index = Number(node.name.substring(prefix.length).split('.').shift());
-				if (Number.isInteger(index) || index >= 0 || index < list.length) {
-					return index;
-				}
-			}
-			return null;
+
+		if (!this.#walk) this.#walk = new WalkIndex(this, node => {
+			const { index } = this.#parseName(node.name);
+			if (index >= 0 && index < list.length) return index;
+			else return null;
 		});
 		let index;
 
+		const fileInputs = this.querySelectorAll('[name][type="file"]')
+			.map(n => n.cloneNode(true));
+
 		switch (action) {
 			case "add":
 				list.splice((this.#walk.findBefore(btn) ?? -1) + 1, 0, this.#model);
@@ -248,6 +247,26 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		}
 		this.#listToValues(values, list);
 		form.fill(values, state.scope);
+		const liveFileInputs = this.querySelectorAll('[name][type="file"]');
+		for (const node of fileInputs) {
+			const { value } = node;
+			const { sub } = this.#parseName(node.name);
+			const live = liveFileInputs.find(node => node.value == value);
+			if (!live) continue;
+			if (this.#parseName(live.name).sub === sub) {
+				node.name = live.name;
+				live.replaceWith(node);
+			}
+		}
+	}
+
+	#parseName(name) {
+		const prefix = this.prefix;
+		if (!name?.startsWith(prefix)) return { index: -1 };
+		const parts = name.substring(prefix.length).split('.');
+		const index = Number(parts.shift());
+		if (!Number.isInteger(index)) return { index: -1 };
+		return { index, sub: parts.join('.') };
 	}
 
 	get ownTpl() {

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 || !this.form) 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() {
@@ -266,7 +227,7 @@ class HTMLCustomFormElement extends HTMLFormElement {
 
 		form.classList.add('loading');
 
-		const data = { $query	};
+		const data = { $query };
 		return Promise.all(Array.from(form.elements).filter((node) => {
 			return Boolean(node.presubmit);
 		}).map((input) => {
@@ -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;
 };