@pageboard/html 0.14.34 → 0.14.36

package/elements/inlines.js

@@ -102,22 +102,26 @@ exports.style = {
 				const: null,
 				title: 'Default',
 				icon: '<span class="icon">∅</span>'
+			}, {
+				const: 'tiny',
+				title: 'Tiny',
+				icon: '<span class="icon char" style="font-size:0.6em;margin-inline:0.6rem">aA</span>'
 			}, {
 				const: 'small',
 				title: 'Small',
-				icon: '<span class="icon char" style="font-size:0.6em">aA</span>'
+				icon: '<span class="icon char" style="font-size:0.8em;margin-inline:0.6rem">aA</span>'
 			}, {
 				const: 'base',
 				title: 'Base',
-				icon: '<span class="icon char" style="font-size:0.8em">aA</span>'
+				icon: '<span class="icon char" style="font-size:1em;margin-inline:0.6rem">aA</span>'
 			}, {
 				const: 'large',
 				title: 'Large',
-				icon: '<span class="icon char" style="font-size:1.2em">aA</span>'
+				icon: '<span class="icon char" style="font-size:1.2em;margin-inline:0.6rem">aA</span>'
 			}, {
 				const: 'extra',
 				title: 'Extra',
-				icon: '<span class="icon char" style="font-size:1.6em">aA</span>'
+				icon: '<span class="icon char" style="font-size:1.6em;margin-inline:0.6rem">aA</span>'
 			}]
 		},
 		transform: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.14.34",
+  "version": "0.14.36",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {},
   "devDependencies": {
     "nouislider": "^15.7.1",
-    "postinstall": "^0.8.0"
+    "postinstall": "^0.9.0"
   },
   "postinstall": {},
   "prepare": {

package/ui/fieldset-list.js

@@ -224,14 +224,28 @@ class HTMLElementFieldsetList extends Page.Element {
 		}
 	}
 
-	#findIndex(btn) {
+	#findIndex(btn, add) {
 		let node = btn;
 		const sel = `[name^="${this.#prefixStr}"]`;
 		while ((node = node.parentNode)) {
-			const input = Array.from(node.querySelectorAll(sel)).pop();
-			if (!input) continue;
+			const list = Array.from(node.querySelectorAll(sel));
+			if (!list.length) continue;
+			const first = list[0];
+			const last = list.pop();
+			let offset = 0;
+			let input;
+			if (btn.compareDocumentPosition(last) & Node.DOCUMENT_POSITION_PRECEDING) {
+				// after last
+				if (add) offset += 1;
+				input = last;
+			} else if (first.compareDocumentPosition(btn) & Node.DOCUMENT_POSITION_PRECEDING) {
+				input = first;
+			}
+
 			const { index } = this.#parseName(input.name);
-			if (index >= 0 && index < this.#list.length) return index;
+			if (index >= 0 && index < this.#list.length) {
+				return index + offset;
+			}
 		}
 	}
 
@@ -246,7 +260,7 @@ class HTMLElementFieldsetList extends Page.Element {
 
 		switch (action) {
 			case "add":
-				list.splice((this.#findIndex(btn) ?? 0), 0, { ...this.#model });
+				list.splice((this.#findIndex(btn, true) ?? 0), 0, { ...this.#model });
 				break;
 			case "del":
 				list.splice(this.#findIndex(btn) ?? 0, 1);

package/ui/form.js

@@ -82,10 +82,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				if (masked) toggles.push(submit);
 				state.vars.submit = true;
 			}
-			const vars = state.templatesQuery(this) || {};
-			for (const [key, val] of Object.entries(vars)) {
-				this.setAttribute('data-' + key, val);
-			}
+			const actionLoc = Page.parse(this.getAttribute('action'));
+			Object.assign(actionLoc.query, state.templatesQuery(this));
+			this.setAttribute('action', Page.format(actionLoc));
 			this.restore(state.scope);
 		} else {
 			for (const name of this.fill(state.query)) {
@@ -324,10 +323,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			scope.$request = form.read(true, e.submitter);
 			form.disable();
 			form.classList.add('loading');
-			scope.$response = await state.fetch(form.method, Page.format({
-				pathname: form.getAttribute('action'),
-				query: form.dataset // because patch populates data from parameters
-			}), scope.$request);
+			scope.$response = await state.fetch(
+				form.method, form.getAttribute('action'), scope.$request
+			);
 		} catch (err) {
 			scope.$response = err;
 		}

package/ui/inlines.css

@@ -37,6 +37,9 @@ span.blue {
 span.purple {
 	color: purple;
 }
+span.tiny {
+	font-size: 0.5715em;
+}
 span.small {
 	font-size: 0.8em;
 }

package/ui/layout.css

@@ -34,6 +34,17 @@
 	&.column {
 		flex-direction: column;
 		align-items:stretch;
+
+		& > img,
+		&.left > img {
+			align-self:flex-start;
+		}
+		&.hcenter >	img {
+			align-self:center;
+		}
+		&.right >	img {
+			align-self:flex-end;
+		}
 	}
 
 	&.top {
@@ -67,17 +78,7 @@
 		justify-content: flex-end;
 	}
 
-	&.column {
-		> img, &.left > img {
-			align-self:flex-start;
-		}
-		&.hcenter > img {
-			align-self:center;
-		}
-		&.right > img {
-			align-self:flex-end;
-		}
-	}
+
 
 	&.fullwidth {
 		width:100%;

package/ui/transition.js

@@ -26,11 +26,11 @@ const loader = new class {
 	update(state) {
 		document.documentElement.dataset.stage = state.stage;
 	}
-	setup(state) {
+	async setup(state) {
 		const tr = state.scope.transition;
+		await document.fonts?.ready;
+		document.body.hidden = false;
 		state.finish(async () => {
-			await document.fonts?.ready;
-			document.body.hidden = false;
 			if (tr?.ok) return tr.start();
 		});
 		tr?.end();