@pageboard/html 0.12.8 → 0.12.10

package/elements/embed.js

@@ -40,7 +40,7 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed data-url="[url]" data-query="[query|as:query]" id="[id]">
+	html: `<element-embed data-src="[url]" data-query="[query|as:query]" id="[id]">
 		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
 		<iframe loading="lazy" allowfullscreen frameborder="0" scrolling="no"></iframe>
 	</element-embed>`,

package/elements/inputs.js

@@ -323,8 +323,8 @@ exports.input_checkbox = {
 		<div class="ui [toggle] checkbox">
 			<input type="checkbox" required="[required]" disabled="[disabled]"
 				name="[name]" value="[value]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
+				id="for-[name][value|pre:-]" />
+			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [
@@ -370,8 +370,8 @@ exports.input_radio = {
 		<div class="ui radio checkbox">
 			<input type="radio" disabled="[disabled]"
 				name="[name]" value="[value|or:]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
+				id="for-[name][value|pre:-]" />
+			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [

package/package.json

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

package/ui/embed.js

@@ -1,6 +1,6 @@
 class HTMLElementEmbed extends Page.Element {
 	static defaults = {
-		url: null,
+		src: null,
 		query: null,
 		hash: null
 	};
@@ -14,14 +14,11 @@ class HTMLElementEmbed extends Page.Element {
 		return this.querySelector('iframe')?.src ?? "about:blank";
 	}
 	patch(state) {
-		const meta = state.scope.$hrefs?.[this.options.url];
-		if (meta) {
-			this.title = meta.title;
-			this.setAttribute('data-src', meta.source);
-			this.style.paddingBottom = `calc(${meta.height} / ${meta.width} * 100%)`;
-		} else {
-			console.warn("Missing href", this.options.url);
-		}
+		const { src } = this.options;
+		if (!src) return;
+		const { width, height, source } = state.scope.$hrefs?.[src] ?? {};
+		if (source) this.dataset.source = source;
+		if (width && height) this.style.paddingBottom = `calc(${height} / ${width} * 100%)`;
 	}
 	consent(state) {
 		const consent = state.scope.$consent;
@@ -37,7 +34,7 @@ class HTMLElementEmbed extends Page.Element {
 
 		const opts = this.options;
 		const prev = Page.parse(this.currentSrc);
-		const cur = Page.parse(this.dataset.src || "about:blank");
+		const cur = Page.parse(this.dataset.source || this.options.src || "about:blank");
 		cur.hash = opts.hash;
 		const curSrc = cur.toString();
 
@@ -66,8 +63,8 @@ class HTMLElementEmbed extends Page.Element {
 		this.classList.add('error');
 	}
 	handleAllMessage(e, state) {
-		if (!e.origin || !this.options.source) return;
-		if (this.options.source.startsWith(e.origin) == false) return;
+		if (!e.origin || !this.currentSrc) return;
+		if (this.currentSrc?.startsWith(e.origin) == false) return;
 		if (this.receiveMessage) this.receiveMessage(e.data ?? {});
 	}
 	close() {

package/ui/fieldset-list.js

@@ -138,6 +138,13 @@ class HTMLElementFieldsetList extends Page.Element {
 		for (const node of inputs) {
 			const name = this.#incrementkey('[fielditem.index]', node.name);
 			if (name != null) {
+				const id = node.id;
+				if (id?.startsWith(`for-${node.name}`)) {
+					node.id = id.replace(node.name, name);
+				}
+				if (node.nextElementSibling?.htmlFor == id) {
+					node.nextElementSibling.htmlFor = node.id;
+				}
 				node.name = name;
 			}
 		}

package/ui/form.js

@@ -299,7 +299,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		if (loc.samePathname(state)) {
 			loc.query = { ...state.query, ...loc.query };
 		}
-		const nstate = this.ignoreInputChange
+		const nstate = this.ignoreInputChange && state.referrer
 			? state.replace(loc)
 			: state.push(loc);
 		nstate.catch(state => {

package/ui/media.js

@@ -34,14 +34,11 @@ class HTMLElementVideo extends HTMLElementMediaConstructor(Page.create(HTMLVideo
 	patch(state) {
 		super.patch(state);
 		const { url } = this.options;
-		const meta = state.scope.$hrefs?.[url];
-		if (meta) {
-			this.title = meta.title;
-			this.width = meta.width;
-			this.height = meta.height;
-		} else {
-			console.warn("Missing href", url);
-		}
+		if (!url) return;
+		const { title, width, height } = state.scope.$hrefs?.[url] ?? {};
+		if (title) this.title = title;
+		if (width) this.width = width;
+		if (height) this.height = height;
 	}
 }
 Page.define('element-video', HTMLElementVideo, 'video');