@pageboard/html 0.14.22 → 0.14.24

package/elements/form.js

@@ -192,6 +192,6 @@ exports.api_form = {
 	scripts: [ // for asynchronous submits and automatic triggers
 		'../ui/form.js'
 	],
-	polyfills: ['fetch']
+	polyfills: ['fetch', 'FormDataSubmitter']
 };
 

package/elements/navigation.js

@@ -56,7 +56,7 @@ exports.breadcrumb = {
 	group: "block",
 	html: `<nav class="ui breadcrumb">
 		<div class="divider"></div>
-		<a href="[$links.up|nth:-1|at:a::1|repeat:link]" class="section">[link.title]</a>
+		<a href="[$links.up|nth:-1|at:a::1|repeat:link|.url]" class="section">[link.title]</a>
 		<div class="divider"></div>
 		<div class="active section">[$page.content.title|fail:div::1]</div>
 	</nav>`,

package/package.json

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

package/ui/fieldset-list.js

@@ -4,7 +4,7 @@ class HTMLElementFieldsetList extends Page.Element {
 	#prefix;
 	#model;
 
-	fill(values) {
+	fill(values = {}) {
 		if (this.isContentEditable || this.prefix == null) return;
 		const vars = [];
 		for (const [key, val] of Object.entries(values)) {
@@ -25,6 +25,12 @@ class HTMLElementFieldsetList extends Page.Element {
 		this.#resize();
 		return vars;
 	}
+	patch(state) {
+		// initialize
+		if (this.ownView.children.length == 0) {
+			this.#resize();
+		}
+	}
 
 	reset() {
 		this.#list = this.#defaultList?.slice();
@@ -142,7 +148,7 @@ class HTMLElementFieldsetList extends Page.Element {
 		);
 		const min = Number(this.dataset.min) || 0;
 		const max = Number(this.dataset.max) || Infinity;
-		let list = this.#list;
+		let list = this.#list ??= [];
 		const placeholder = list.length == 0 && min == 0;
 		if (list.length == 0) {
 			list = [{...this.#model, $i: min == 0 ? -1 : 0}];
@@ -164,28 +170,28 @@ class HTMLElementFieldsetList extends Page.Element {
 			}
 		});
 
-		const view = this.ownView;
-		view.textContent = '';
-		view.appendChild(tpl);
-
 		if (placeholder) {
-			for (const node of view.querySelectorAll(`[name^="${this.#prefixStr}"]`)) {
+			for (const node of tpl.querySelectorAll(`[name^="${this.#prefixStr}"]`)) {
 				node.disabled = true;
 			}
 		}
 
-		view.querySelectorAll(this.#selector('up')).forEach((node, i) => {
+		tpl.querySelectorAll(this.#selector('up')).forEach((node, i) => {
 			node.disabled = i == 0;
 		});
-		view.querySelectorAll(this.#selector('down')).forEach((node, i, arr) => {
+		tpl.querySelectorAll(this.#selector('down')).forEach((node, i, arr) => {
 			node.disabled = i == arr.length - 1;
 		});
-		view.querySelectorAll(this.#selector('del')).forEach((node) => {
-			node.disabled = this.#list.length <= min;
+		tpl.querySelectorAll(this.#selector('del')).forEach((node) => {
+			node.disabled = list.length <= min;
 		});
-		view.querySelectorAll(this.#selector('add')).forEach((node) => {
-			node.disabled = this.#list.length >= max;
+		tpl.querySelectorAll(this.#selector('add')).forEach((node) => {
+			node.disabled = list.length >= max;
 		});
+
+		const view = this.ownView;
+		view.textContent = '';
+		view.appendChild(tpl);
 	}
 
 	#parts(key) {

package/ui/fieldset.js

@@ -13,8 +13,23 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 
 	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 { name } = this.options;
+		if (!query) {
+			query = {};
+			for (const node of this.form.querySelectorAll(
+				`[name="${name}"]`
+			)) {
+				if (node.type == "checkbox") {
+					throw new Error("Unsupported checkbox in fiedset condition: " + this.options.name);
+				}
+				if (node.type == "radio") {
+					if (node.checked) query[name] = node.value;
+				} else {
+					query[name] = node.value;
+				}
+			}
+		}
+		const val = query[name];
 		const disabled = this.disabled = this.hidden = !this.#compare(val);
 		for (const node of this.querySelectorAll('[name]')) {
 			node.disabled = disabled;
@@ -22,13 +37,12 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 	}
 
 	patch(state) {
-		// before/after form#fill
-		this.fill(null);
-		state.finish(() => this.fill(null));
+		// initialize
+		this.fill();
 	}
 	handleAllChange(e, state) {
 		if (this.form?.contains(e.target)) {
-			this.fill(null);
+			this.fill();
 		}
 	}
 }

package/ui/form.js

@@ -112,8 +112,8 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			state.dispatch(this, 'submit');
 		});
 	}
-	read(withDefaults = false) {
-		const fd = new FormData(this);
+	read(withDefaults = false, submitter) {
+		const fd = new FormData(this, submitter);
 		const query = {};
 		fd.forEach((val, key) => {
 			if (val == "") val = null;
@@ -182,12 +182,6 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 					}
 			}
 		}
-		// FIXME use e.submitter polyfill when available
-		// https://github.com/Financial-Times/polyfill-library/issues/1111
-		const btn = document.activeElement;
-		if (btn && btn.type == "submit" && btn.name && btn.value) {
-			query[btn.name] = btn.value;
-		}
 		return query;
 	}
 	fill(query) {
@@ -295,7 +289,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	getMethod(e, state) {
 		const redirect = this.getAttribute('action');
 		const loc = Page.parse(redirect);
-		Object.assign(loc.query, this.read(false));
+		Object.assign(loc.query, this.read(false, e.submitter));
 		if (loc.samePathname(state)) {
 			loc.query = { ...state.query, ...loc.query };
 		}