@pageboard/html 0.14.18 → 0.14.19

package/elements/card.js

@@ -10,7 +10,7 @@ exports.cards = {
 	properties: {
 		columns: {
 			title: 'Column count',
-			description: 'How many cards should exist in a row - zero for unknown',
+			description: 'How many cards should exist in a row\nzero for unknown',
 			type: 'integer',
 			minimum: 0,
 			default: 0

package/elements/form.js

@@ -1,6 +1,6 @@
 exports.query_form = {
-	priority: 0, // scripts must run before 'query' scripts
 	title: 'Form Query',
+	priority: 0, // scripts must run before 'query' scripts
 	icon: '<i class="write icon"></i>',
 	group: 'block form',
 	menu: "form",
@@ -66,8 +66,8 @@ exports.query_form = {
 };
 
 exports.api_form = {
-	priority: 0, // scripts must run before 'query' scripts
 	title: 'Form Submit',
+	priority: 0, // scripts must run before 'query' scripts
 	icon: '<i class="write icon"></i>',
 	group: 'block form',
 	menu: "form",
@@ -79,7 +79,7 @@ exports.api_form = {
 	properties: {
 		name: {
 			title: 'Name',
-			description: 'Trigger query submit|toggle=<name>\nExpose endpoint /.api/form/<name>',
+			description: "Used by query 'submit' or 'toggle'\nExposes /.api/form/$name",
 			type: 'string',
 			format: 'id',
 			nullable: true

package/elements/grid.js

@@ -36,7 +36,7 @@ exports.grid = {
 		},
 		columns: {
 			title: 'Columns Count',
-			description: 'Between 1 and 16, set to 0 to unknown - works well with doubling',
+			description: 'Between 1 and 16, 0 for auto\nworks well with doubling',
 			type: "integer",
 			default: 0,
 			minimum: 0,
@@ -88,7 +88,7 @@ exports.grid_row = {
 		},
 		columns: {
 			title: 'Columns Count',
-			description: 'Between 1 and 16, set to 0 to unknown - works well with doubling',
+			description: 'Between 1 and 16, 0 for auto\nworks well with doubling',
 			type: "integer",
 			default: 0,
 			minimum: 0,

package/elements/image.js

@@ -6,7 +6,7 @@ exports.image = {
 	properties: {
 		alt: {
 			title: 'Alternative text',
-			description: 'Short contextual description. Leave empty when used in links.',
+			description: 'Short contextual description.\nLeave empty when used in links.',
 			type: "string"
 		},
 		url: {
@@ -145,8 +145,8 @@ exports.image = {
 };
 
 exports.inlineImage = {
-	priority: 12,
 	title: "Icon",
+	priority: 12,
 	icon: '<i class="icon image"></i>',
 	properties: {
 		url: {

package/elements/inlines.js

@@ -1,6 +1,6 @@
 exports.strong = {
-	priority: 100,
 	title: "Strong",
+	priority: 100,
 	contents: "text*",
 	inplace: true,
 	inline: true,
@@ -11,8 +11,8 @@ exports.strong = {
 };
 
 exports.em = {
-	priority: 101,
 	title: "Emphasize",
+	priority: 101,
 	contents: "text*",
 	inline: true,
 	inplace: true,
@@ -23,8 +23,8 @@ exports.em = {
 };
 
 exports.i = {
-	priority: 102,
 	title: "Italic",
+	priority: 102,
 	contents: "text*",
 	inline: true,
 	inplace: true,
@@ -35,8 +35,8 @@ exports.i = {
 };
 
 exports.light = {
-	priority: 103,
 	title: "Light",
+	priority: 103,
 	icon: '<i class="icon" style="font-weight:lighter">L</i>',
 	contents: "text*",
 	inline: true,
@@ -46,8 +46,8 @@ exports.light = {
 };
 
 exports.sup = {
-	priority: 104,
 	title: "Sup",
+	priority: 104,
 	icon: '<i class="superscript icon"></i>',
 	contents: "text*",
 	inline: true,
@@ -58,8 +58,8 @@ exports.sup = {
 };
 
 exports.sub = {
-	priority: 105,
 	title: "Inf",
+	priority: 105,
 	icon: '<i class="subscript icon"></i>',
 	contents: "text*",
 	inline: true,
@@ -70,8 +70,8 @@ exports.sub = {
 };
 
 exports.strike = {
-	priority: 106,
 	title: "Strike",
+	priority: 106,
 	icon: '<i class="strikethrough icon"></i>',
 	contents: "text*",
 	inline: true,
@@ -82,8 +82,8 @@ exports.strike = {
 };
 
 exports.style = {
-	priority: 99,
 	title: "Style",
+	priority: 99,
 	icon: '<i class="paint brush icon"></i>',
 	contents: "text*",
 	inline: true,

package/elements/layout.js

@@ -1,3 +1,33 @@
+exports.units = {
+	properties: {
+		inline: {
+			title: 'Inline units',
+			anyOf: [
+				{ const: 'em' },
+				{ const: 'ch' },
+				{ const: 'vw' },
+				{ const: 'rem' },
+				{ const: 'px' }
+			],
+			default: 'em',
+			$helper: 'units'
+		},
+		block: {
+			title: 'Block units',
+			anyOf: [
+				{ const: 'rem' },
+				{ const: 'ex' },
+				{ const: 'vh' },
+				{ const: '%' },
+				{ const: 'em' },
+				{ const: 'px' }
+			],
+			default: 'rem',
+			$helper: 'units'
+		}
+	}
+};
+
 exports.layout = {
 	title: "Layout",
 	icon: '<i class="icon move"></i>',
@@ -91,24 +121,7 @@ exports.layout = {
 			default: 0
 		},
 		heightUnits: {
-			title: 'Height units',
-			default: 'em',
-			anyOf: [{
-				title: 'em',
-				const: 'em'
-			}, {
-				title: 'rem',
-				const: 'rem'
-			}, {
-				title: 'px',
-				const: 'px'
-			}, {
-				title: 'vh',
-				const: 'vh'
-			}, {
-				title: '%',
-				const: '%'
-			}]
+			$ref: "#/definitions/units/properties/data/properties/block"
 		},
 		margins: {
 			title: 'Margins',
@@ -117,25 +130,23 @@ exports.layout = {
 			properties: {
 				inline: {
 					title: 'Inline',
-					description: 'Units: em',
 					type: 'number',
 					default: 0,
 					multipleOf: 0.01,
 					nullable: true
 				},
 				inlineUnits: {
-					const: 'em'
+					$ref: "#/definitions/units/properties/data/properties/inline"
 				},
 				block: {
 					title: 'Block',
-					description: 'Units: rem',
 					type: 'number',
 					default: 0,
 					multipleOf: 0.01,
 					nullable: true
 				},
 				blockUnits: {
-					const: 'rem'
+					$ref: "#/definitions/units/properties/data/properties/block"
 				}
 			}
 		},
@@ -146,7 +157,6 @@ exports.layout = {
 			properties: {
 				inline: {
 					title: 'Inline',
-					description: 'Units: em',
 					type: 'number',
 					default: 0,
 					minimum: 0,
@@ -154,11 +164,10 @@ exports.layout = {
 					nullable: true
 				},
 				inlineUnits: {
-					const: 'em'
+					$ref: "#/definitions/units/properties/data/properties/inline"
 				},
 				block: {
 					title: 'Block',
-					description: 'Units: rem',
 					type: 'number',
 					default: 0,
 					minimum: 0,
@@ -166,7 +175,21 @@ exports.layout = {
 					nullable: true
 				},
 				blockUnits: {
-					const: 'rem'
+					$ref: "#/definitions/units/properties/data/properties/block"
+				}
+			}
+		},
+		overlay: {
+			title: 'Overlay',
+			nullable: true,
+			properties: {
+				inline: {
+					title: 'Inline',
+					anyOf: [{ const: 'start', title: 'Start' }, { const: 'end', title: 'End' }]
+				},
+				block: {
+					title: 'Block',
+					anyOf: [{ const: 'start', title: 'Start' }, { const: 'end', title: 'End' }]
 				}
 			}
 		},
@@ -337,6 +360,7 @@ exports.layout = {
 	contents: "block+",
 	group: 'block',
 	html: `<div class="layout
+		[overlay.block|pre:overlay block-] [overlay.inline|pre:overlay inline-]
 		[width|switch:full:fullwidth:contained:ui container]
 		[horizontal]
 		[vertical]

package/elements/link.js

@@ -44,8 +44,8 @@ exports.link = {
 };
 
 exports.link_button = {
-	priority: 11,
 	title: "Link Btn",
+	priority: 11,
 	icon: '<i class="icons"><i class="linkify icon"></i><i class="corner hand pointer icon"></i></i>',
 	properties: {
 		url: {

package/elements/medialist.js

@@ -1,6 +1,6 @@
 exports.medialist = {
-	priority: 20,
 	title: "List",
+	priority: 20,
 	group: "block",
 	icon: '<i class="list icon"></i>',
 	menu: "widget",

package/elements/menu.js

@@ -79,8 +79,8 @@ exports.menu_group = {
 };
 
 exports.menu_item_link = {
-	priority: 10,
 	title: "Inline",
+	priority: 10,
 	icon: '<b class="icon">Link</b>',
 	menu: "link",
 	context: "menu//",
@@ -133,8 +133,8 @@ exports.menu_item_block = { ...exports.menu_item_link,
 };
 
 exports.menu_item_text = {
-	priority: 11,
 	title: 'Text',
+	priority: 11,
 	icon: '<b class="icon">Item</b>',
 	menu: "link",
 	context: "menu//",
@@ -154,8 +154,8 @@ exports.menu_item_text = {
 };
 
 exports.menu_item_dropdown = {
-	priority: 11,
 	title: "Dropdown",
+	priority: 11,
 	icon: '<b class="icon">Drop</b>',
 	menu: "link",
 	context: "menu//",
@@ -197,8 +197,8 @@ exports.menu_item_dropdown = {
 };
 
 exports.menu_item_popup = {
-	priority: 11,
 	title: "Popup",
+	priority: 11,
 	icon: '<b class="icon">Pop</b>',
 	menu: "link",
 	context: "menu//",

package/elements/pagination.js

@@ -1,6 +1,6 @@
 exports.pagination = {
-	priority: 13, // after fetch and after menu items
 	title: "Pagination",
+	priority: 13, // after fetch and after menu items
 	icon: '<b class="icon">±N</b>',
 	menu: "link",
 	group: "block",

package/package.json

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

package/ui/image.js

@@ -153,11 +153,11 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		}
 	}
 	captureLoad() {
-		this.#defer.resolve();
+		this.#defer?.resolve();
 		this.classList.remove('loading');
 	}
 	captureError(e) {
-		this.#defer.reject(e);
+		this.#defer?.reject(e);
 		this.classList.remove('loading');
 		this.classList.add('error');
 		this.placeholder(true);

package/ui/layout.css

@@ -1,71 +1,94 @@
 .layout {
 	display:flex;
 	flex: 0 0 auto;
-}
-.ui.container.layout {
-	display:flex;
-	flex: 1 0 auto;
-}
-.layout.wrap {
-	flex-wrap:wrap;
-}
-.layout.wrap-reverse {
-	flex-wrap:wrap-reverse;
-}
-.layout.column {
-	flex-direction: column;
-	align-items:stretch;
-}
-.layout.top {
-	align-items: flex-start;
-}
-.layout.vcenter {
-	align-items: center;
-}
-.layout.vbaseline {
-	align-items: baseline;
-}
-.layout.vstretch {
-	align-items: stretch;
-}
-.layout.bottom {
-	align-items: flex-end;
-}
-.layout.left {
-	justify-content: flex-start;
-}
-.layout.hcenter {
-	justify-content: center;
-}
-.layout.hbetween {
-	justify-content: space-between;
-}
-.layout.haround {
-	justify-content: space-around;
-}
-.layout.right {
-	justify-content: flex-end;
-}
-.layout.column > img,
-.layout.column.left > img {
-	align-self:flex-start;
-}
-.layout.column.hcenter > img {
-	align-self:center;
-}
-.layout.column.right > img {
-	align-self:flex-end;
-}
+	position:relative;
 
-.layout.fullwidth {
-	width:100%;
-}
+	&.overlay {
+		position:absolute;
+		&.block-start {
+			top: 0;
+		}
+		&.block-end {
+			bottom: 0;
+		}
+		&.inline-start {
+			left: 0;
+		}
+		&.inline-end {
+			right: 0;
+		}
+	}
 
-.inverted.layout {
-	background: rgb(0 0 0 / 80%);
-}
+	&.ui.container {
+		flex: 1 0 auto;
+	}
 
-.inverted.layout p {
-	color: white;
-}
+	&.wrap {
+		flex-wrap:wrap;
+	}
 
+	&.wrap-reverse {
+		flex-wrap:wrap-reverse;
+	}
+
+	&.column {
+		flex-direction: column;
+		align-items:stretch;
+	}
+
+	&.top {
+		align-items: flex-start;
+	}
+	&.vcenter {
+		align-items: center;
+	}
+	&.vbaseline {
+		align-items: baseline;
+	}
+	&.vstretch {
+		align-items: stretch;
+	}
+	&.bottom {
+		align-items: flex-end;
+	}
+	&.left {
+		justify-content: flex-start;
+	}
+	&.hcenter {
+		justify-content: center;
+	}
+	&.hbetween {
+		justify-content: space-between;
+	}
+	&.haround {
+		justify-content: space-around;
+	}
+	&.right {
+		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%;
+	}
+
+	&.inverted {
+		background: rgb(0 0 0 / 80%);
+
+		p {
+			color: white;
+		}
+	}
+}

package/ui/textarea.js

@@ -13,8 +13,10 @@ class HTMLElementTextArea extends Page.create(HTMLTextAreaElement) {
 			delete this.style.height;
 			return;
 		}
-		this.style.height = 0;
-		this.style.height = `calc(${this.scrollHeight}px + 1em)`;
+		requestAnimationFrame(() => {
+			this.style.height = 0;
+			this.style.height = `calc(${this.scrollHeight}px + 1em)`;
+		});
 	}
 }