@pageboard/html 0.14.23 → 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.23",
+  "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}];
@@ -177,10 +183,10 @@ class HTMLElementFieldsetList extends Page.Element {
 			node.disabled = i == arr.length - 1;
 		});
 		tpl.querySelectorAll(this.#selector('del')).forEach((node) => {
-			node.disabled = this.#list.length <= min;
+			node.disabled = list.length <= min;
 		});
 		tpl.querySelectorAll(this.#selector('add')).forEach((node) => {
-			node.disabled = this.#list.length >= max;
+			node.disabled = list.length >= max;
 		});
 
 		const view = this.ownView;

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 };
 		}