@pageboard/html 0.14.4 → 0.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/fieldset-list.js

@@ -37,8 +37,10 @@ class HTMLElementFieldsetList extends Page.Element {
 	fill(values, scope) {
 		if (scope.$write || this.prefix == null) return;
 		// unflatten array-values
+		const vars = [];
 		for (const [key, val] of Object.entries(values)) {
 			if (!this.#prefixed(key)) continue;
+			vars.push(key);
 			if (Array.isArray(val)) {
 				for (let i = 0; i < val.length; i++) {
 					values[key + '.' + i] = val[i];
@@ -49,6 +51,7 @@ class HTMLElementFieldsetList extends Page.Element {
 		const list = this.#listFromValues({ ...values });
 		if (this.#initialSize == null) this.#initialSize = list.length;
 		this.#resize(list.length, scope);
+		return vars;
 	}
 
 	reset() {

package/ui/form.js

@@ -31,6 +31,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			if (action == "toggle") {
 				action = val ? "enable" : "disable";
 			}
+			const isQuery = ctx.expr.path[0] == "$query" && ctx.expr.path.length == 1;
 
 			state.finish(() => {
 				if (action == "enable") {
@@ -41,7 +42,10 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 					if (val == null) {
 						form.reset?.();
 					} else if (typeof val == "object") {
-						form.fill?.(this.linearizeValues(val), state.scope);
+						const vars = form.fill?.(this.linearizeValues(val), state.scope) ?? [];
+						if (isQuery) {
+							for (const name of vars) state.vars[name] = true;
+						}
 						form.save?.();
 					}
 				}
@@ -222,14 +226,15 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	}
 	fill(query, scope) {
 		// fieldset-list are not custom inputs yet
+		const vars = [];
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
-			node.fill?.(query, scope);
+			if (node.fill) vars.push(...node.fill(query, scope));
 		}
-		const vars = [];
+
 		for (const elem of this.elements) {
 			const name = elem.name;
 			if (!name) continue;
-			if (name in query && !vars.includes(name)) vars.push(name);
+			if (name in query) vars.push(name);
 			const val = query[name];
 			if (val === undefined) {
 				elem.reset?.();
@@ -338,32 +343,32 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	}
 	async postMethod(e, state) {
 		const form = this;
-		if (e.type != "submit" && form.elements.find(item => item.type == "submit")) return;
-		
-		form.classList.add('loading');
-
-		await Promise.all(
-			Array.from(form.elements)
-				.filter(node => Boolean(node.presubmit) && !node.disabled)
-				.map(input => input.presubmit(state))
-		);
-
-		const request = form.read(true);
-		form.disable();
-
-		const res = await state.fetch(form.method, Page.format({
-			pathname: form.getAttribute('action'),
-			query: state.query
-		}), request).catch(err => err);
+		if (e.type != "submit" && form.elements.find(item => item.type == "submit")) {
+			return;
+		}
 
 		const scope = state.scope.copy();
+		scope.$request = form.read(true);
+		try {
+			const prelist = Array.from(form.elements)
+				.filter(node => Boolean(node.presubmit) && !node.disabled);
+			form.disable();
+			for (const node of prelist) {
+				await node.presubmit(state);
+			}
+			form.classList.add('loading');
+			scope.$response = await state.fetch(form.method, Page.format({
+				pathname: form.getAttribute('action'),
+				query: state.query
+			}), scope.$request);
+		} catch (err) {
+			scope.$response = err;
+		}
+		const res = scope.$response;
 		if (res?.grants) state.scope.$grants = res.grants;
-		scope.$request = request;
-
-		scope.$response = res;
 		scope.$status = res.status;
-		form.enable();
 
+		form.enable();
 		form.classList.remove('loading');
 
 		// messages shown inside form, no navigation

package/ui/input-file.js

@@ -99,10 +99,20 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 
 		xhr.addEventListener('load', () => {
 			track(100);
+			let obj;
 			try {
-				pass(JSON.parse(xhr.responseText));
-			} catch (ex) {
-				fail(ex);
+				obj = JSON.parse(xhr.responseText);
+			} catch {
+				obj = { type: 'error', data: { message: xhr.responseText } };
+			}
+			if (obj.type == "error") {
+				obj.statusText = obj.data?.message ?? '';
+			}
+			obj.status = xhr.status;
+			if (xhr.status < 200 || xhr.status >= 400) {
+				fail(obj);
+			} else {
+				pass(obj);
 			}
 		});
 
@@ -110,7 +120,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 			if (xhr.status == 0) return fail("Connection error");
 			const msg = xhr.statusText || "Connection error";
 			const err = new Error(msg);
-			err.statusCode = xhr.status;
+			err.status = xhr.status;
 			fail(err);
 		});
 		try {