@pageboard/html 0.16.13 → 0.16.15

package/elements/consent.js

@@ -20,7 +20,7 @@ exports.consent_form = {
 		<template block-content="content"></template>
 		<div class="view"></div>
 	</form>`,
-	scripts: ['../ui/storage.js', '../ui/consent.js'],
+	scripts: ['../ui/consent.js'],
 	stylesheets: ['../ui/consent.css']
 };
 

package/elements/embed.js

@@ -32,6 +32,15 @@ exports.embed = {
 			title: 'Additional query parameters',
 			type: 'object',
 			nullable: true
+		},
+		ratio: {
+			title: 'Default height/width',
+			description: 'Inverse of ratio in percents',
+			type: 'number',
+			minimum: 10,
+			maximum: 500,
+			multipleOf: 0.01,
+			nullable: true
 		}
 	},
 	group: "block",
@@ -42,7 +51,7 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed data-src="[url]" data-query="[query|as:query]" id="[id]">
+	html: `<element-embed data-src="[url]" data-query="[query|as:query]" id="[id]" style-padding-bottom="[ratio|fail:]%">
 		<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/fieldsets.js

@@ -130,7 +130,7 @@ exports.fieldlist_button = {
 		float: {
 			title: 'Float',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'No'
 			}, {
 				const: 'left',

package/elements/grid.js

@@ -7,7 +7,7 @@ exports.grid = {
 		width: {
 			title: 'Width',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'normal'
 			}, {
 				const: "min",
@@ -24,7 +24,7 @@ exports.grid = {
 			title: 'Responsive',
 			anyOf: [{
 				title: 'No',
-				type: 'null'
+				const: null
 			}, {
 				title: 'Stackable',
 				const: 'stackable'
@@ -76,7 +76,7 @@ exports.grid_row = {
 			title: 'Responsive',
 			anyOf: [{
 				title: 'No',
-				type: 'null'
+				const: null
 			}, {
 				title: 'Stackable',
 				const: 'stackable'

package/elements/inputs.js

@@ -70,7 +70,7 @@ exports.input_button = {
 		float: {
 			title: 'Float',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'No'
 			}, {
 				const: 'left',
@@ -157,7 +157,7 @@ exports.input_submit = {
 		float: {
 			title: 'Float',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'No'
 			}, {
 				const: 'left',
@@ -458,8 +458,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|pre:-]" />
-			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
+				id="for-[name]" />
+			<label block-content="label" for="for-[name]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [
@@ -516,8 +516,8 @@ exports.input_radio = {
 		<div class="ui radio [button|alt::checkbox]">
 			<input type="radio" disabled="[disabled]" required="[required]"
 				name="[name]" value="[value]" checked="[checked]"
-				id="for-[name][value|pre:-]" />
-			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
+				id="for-[name]" />
+			<label block-content="label" for="for-[name]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [

package/elements/layout.js

@@ -89,7 +89,7 @@ exports.layout = {
 		wrap: {
 			title: 'Wrap',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'No wrap'
 			}, {
 				const: 'wrap',
@@ -102,7 +102,7 @@ exports.layout = {
 		width: {
 			title: 'Width',
 			anyOf: [{
-				type: "null",
+				const: null,
 				title: "None"
 			}, {
 				const: "full",
@@ -160,7 +160,7 @@ exports.layout = {
 				fill: {
 					title: 'Fill',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Auto'
 					}, {
 						const: 'balance',

package/elements/link.js

@@ -100,7 +100,7 @@ exports.link_button = {
 		float: {
 			title: 'Float',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'No'
 			}, {
 				const: 'left',

package/elements/paragraph.js

@@ -50,7 +50,7 @@ exports.segment = {
 				const: 'mini',
 				title: 'Mini'
 			}, {
-				type: 'null',
+				const: null,
 				title: 'Normal'
 			}, {
 				const: 'large',

package/elements/statistic.js

@@ -21,7 +21,7 @@ exports.statistic = {
 		size: {
 			title: 'Size',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'Default'
 			}, {
 				const: 'mini',

package/elements/storage.js

@@ -0,0 +1,5 @@
+exports.storage = {
+	priority: -1,
+	group: "block",
+	scripts: ['../ui/storage.js']
+};

package/package.json

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

package/ui/fieldset-list.js

@@ -137,7 +137,11 @@ class HTMLElementFieldsetList extends Page.Element {
 			}
 		}
 
+		const view = this.ownView;
+		view.textContent = '';
+
 		const subtpl = inputs.map(node => node.closest('.fields') ?? node).ancestor();
+		if (!subtpl) return;
 		subtpl.appendChild(
 			subtpl.ownerDocument.createTextNode(
 				`[$fields|at:${this.dataset.at || '*'}|repeat:field|const:]`
@@ -186,8 +190,6 @@ class HTMLElementFieldsetList extends Page.Element {
 			node.disabled = list.length >= max;
 		});
 
-		const view = this.ownView;
-		view.textContent = '';
 		view.appendChild(tpl);
 	}
 

package/ui/form.css

@@ -59,3 +59,6 @@ element-select.active.ui.dropdown .menu {
 .ui.form .field :disabled {
 	pointer-events:initial;
 }
+.ui.form .layout > .field {
+	margin:0;
+}

package/ui/form.js

@@ -20,15 +20,13 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 
 	static patch(state) {
 		state.finish(() => {
-			let index = 0;
-			for (const node of document.querySelectorAll('label[for]')) {
-				const prev = node.previousElementSibling;
-				if (prev?.nodeName != "INPUT") continue;
-				const others = document.querySelectorAll(`input[id="${node.htmlFor}"]`);
-				if (others.length > 1) {
-					node.htmlFor += `-${index++}`;
-					prev.id = node.htmlFor;
-				}
+			const indexes = {};
+			for (const label of document.querySelectorAll('input+label[for^="for-"]')) {
+				const { previousElementSibling: input, htmlFor } = label;
+				const [pre, name] = htmlFor.split('-');
+				if (input.name != name) continue;
+				const index = indexes[name] = (indexes[name] ?? 0) + 1;
+				input.id = label.htmlFor = `${pre}-${name}-${index}`;
 			}
 		});
 	}

package/ui/input_radio.css

@@ -1,5 +1,8 @@
 .field.button > .radio > input {
-	display:none;
+	/* none or hidden doesn't allow focus when validating form */
+	position: absolute;
+	height:0px;
+	opacity:0;
 }
 .field.button > .radio > input + label {
 	opacity: 0.5;