@pageboard/html 0.12.10 → 0.12.12

package/elements/embed.js

@@ -3,6 +3,16 @@ exports.embed = {
 	menu: "media",
 	icon: '<i class="external square alternate icon"></i>',
 	properties: {
+		id: {
+			nullable: true,
+			type: 'string',
+			pattern: /^[a-z0-9-]*$/.source
+		},
+		linkable: {
+			title: 'Show hash link',
+			type: 'boolean',
+			default: false
+		},
 		url: {
 			title: 'Address',
 			description: 'The iframe src URL',
@@ -16,16 +26,6 @@ exports.embed = {
 				}
 			}
 		},
-		linkable: {
-			title: 'Show hash link',
-			type: 'boolean',
-			default: false
-		},
-		id: {
-			nullable: true,
-			type: 'string',
-			pattern: /^[a-z0-9-]*$/.source
-		},
 		query: {
 			title: 'Additional query parameters',
 			type: 'object',

package/elements/heading.js

@@ -31,16 +31,16 @@ exports.heading = {
 				icon: '<i class="icon align justify"></i>'
 			}]
 		},
-		linkable: {
-			title: 'Show hash link',
-			type: 'boolean',
-			default: false
-		},
 		id: {
 			nullable: true,
 			type: 'string',
 			pattern: /^[a-z0-9-]*$/.source
 		},
+		linkable: {
+			title: 'Show hash link',
+			type: 'boolean',
+			default: false
+		},
 		entitled: {
 			title: 'H1 is a page title',
 			type: 'boolean',

package/elements/input-date.js

@@ -3,7 +3,7 @@ exports.input_date_time = {
 	icon: '<i class="calendar outline icon"></i>',
 	menu: "form",
 	required: ["name"],
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	properties: {
 		name: {

package/elements/input-file.js

@@ -3,7 +3,7 @@ exports.input_file = {
 	icon: '<i class="upload icon"></i>',
 	menu: "form",
 	required: ["name"],
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	properties: {
 		name: {

package/elements/inputs.js

@@ -2,7 +2,7 @@ exports.input_button = {
 	title: 'Button',
 	icon: '<i class="hand pointer icon"></i>',
 	menu: "form",
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	contents: {
 		nodes: "inline*",
@@ -68,7 +68,7 @@ exports.input_fields = {
 			default: false
 		}
 	},
-	contents: "(input_text|input_range|input_checkbox|input_radio|input_select|input_button)+",
+	contents: "input_field+",
 	html: `<div class="[inline] fields"></div>`
 };
 
@@ -77,7 +77,7 @@ exports.input_text = {
 	icon: '<i class="text cursor icon"></i>',
 	menu: "form",
 	required: ["name"],
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	properties: {
 		name: {
@@ -186,7 +186,7 @@ exports.input_number = {
 	icon: '<i class="text cursor icon"></i>',
 	menu: "form",
 	required: ["name"],
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	properties: {
 		name: exports.input_text.properties.name,
@@ -232,7 +232,7 @@ exports.input_range = {
 	title: 'Range',
 	icon: '<i class="options icon"></i>',
 	menu: "form",
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	properties: Object.assign({}, exports.input_number.properties, {
 		multiple: {
@@ -279,7 +279,7 @@ exports.input_checkbox = {
 	title: 'Checkbox',
 	icon: '<i class="checkmark box icon"></i>',
 	menu: "form",
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	required: ["name"],
 	properties: {
@@ -336,7 +336,7 @@ exports.input_radio = {
 	title: 'Radio',
 	icon: '<i class="selected radio icon"></i>',
 	menu: "form",
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	required: ["name"],
 	properties: {
@@ -360,6 +360,11 @@ exports.input_radio = {
 			title: "Disabled",
 			type: "boolean",
 			default: false
+		},
+		required: {
+			title: 'Required',
+			type: 'boolean',
+			default: false
 		}
 	},
 	contents: {
@@ -368,7 +373,7 @@ exports.input_radio = {
 	},
 	html: `<div class="field">
 		<div class="ui radio checkbox">
-			<input type="radio" disabled="[disabled]"
+			<input type="radio" disabled="[disabled]" required="[required]"
 				name="[name]" value="[value|or:]" checked="[checked]"
 				id="for-[name][value|pre:-]" />
 			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
@@ -384,7 +389,7 @@ exports.input_select = {
 	icon: '<i class="caret down icon"></i>',
 	menu: "form",
 	required: ["name"],
-	group: "block",
+	group: "block input_field",
 	context: 'form//',
 	properties: {
 		name: {

package/elements/layout.js

@@ -1,6 +1,9 @@
 exports.layout = {
 	title: "Layout",
 	icon: '<i class="icon move"></i>',
+	upgrade: {
+		'data.invert': 'data.background.invert'
+	},
 	properties: {
 		horizontal: {
 			title: 'Horizontal',
@@ -121,17 +124,23 @@ exports.layout = {
 				}
 			}
 		},
-		invert: {
-			title: 'Invert',
-			description: 'Invert background',
-			default: false,
-			type: 'boolean'
-		},
 		background: {
 			title: 'Background',
 			type: 'object',
 			nullable: true,
 			properties: {
+				invert: {
+					title: 'Invert',
+					description: 'Invert background',
+					default: false,
+					type: 'boolean'
+				},
+				color: {
+					title: 'Color',
+					type: 'string',
+					format: 'hex-color',
+					$helper: 'color'
+				},
 				image: {
 					title: 'Image',
 					description: 'Local or remote URL',
@@ -285,17 +294,18 @@ exports.layout = {
 		[horizontal]
 		[vertical]
 		[direction]
-		[invert|alt:inverted]"
+		[background.invert|alt:inverted]"
 		is="element-layout"
+		data-src="[background.image]"
+		data-crop="[background.crop.x];[background.crop.y];[background.crop.width];[background.crop.height];[background.crop.zoom]"
 		style-margin-block="[margins.block|fail:][margins.blockUnits]"
 		style-margin-inline="[margins.inline|fail:][margins.inlineUnits]"
 		style-height="[height|fail:][heightUnits]"
-		data-src="[background.image]"
-		data-crop="[background.crop.x];[background.crop.y];[background.crop.width];[background.crop.height];[background.crop.zoom]"
-		data-size="[background.size]"
-		data-repeat="[background.repeat]"
-		data-attachment="[background.attachment]"
-		data-position="[background.position]"
+		style-background-color="[background.color]"
+		style-background-size="[background.size]"
+		style-background-repeat="[background.repeat]"
+		style-background-attachment="[background.attachment]"
+		style-background-position="[background.position]"
 	></div>`,
 	stylesheets: [
 		'../lib/components/container.css',

package/elements/menu.js

@@ -29,8 +29,8 @@ exports.menu = {
 };
 
 exports.menu_group = {
-	title: 'Menu Group',
-	icon: '<b class="icon">Group</b>',
+	title: 'Group',
+	icon: '<b class="icon">Menu</b>',
 	menu: "link",
 	context: "menu//",
 	properties: {

package/package.json

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

package/ui/form.js

@@ -168,6 +168,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				case "file":
 					query[name] = val;
 					break;
+				case "textarea":
+					query[name] = val;
+					break;
 				case "radio":
 					if (!withDefaults && node.checked == node.defaultChecked) {
 						if (query[name] == val) {

package/ui/image.js

@@ -162,6 +162,7 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		const curSrc = loc.toString();
 		if (curSrc != this.currentSrc) {
 			this.classList.add('loading');
+			this.#defer?.reject();
 			this.#defer = new Deferred();
 			img.setAttribute('src', curSrc);
 			return this.#defer;
@@ -181,6 +182,9 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	placeholder(error) {
 		this.image.removeAttribute('src');
 	}
+	close() {
+		this.#defer?.reject();
+	}
 };
 
 const HTMLElementImage = HTMLElementImageConstructor(Page.Element);

package/ui/layout.js

@@ -1,23 +1,15 @@
 class HTMLElementLayout extends Page.create(HTMLDivElement) {
 	static defaults = {
 		dataSrc: null,
-		dataCrop: null,
-		dataRepeat: null,
-		dataSize: null,
-		dataAttachment: null,
-		dataPosition:null
+		dataCrop: null
 	};
 
 	#defer;
 
 	get fit() {
-		return this.options.size || 'none';
+		return this.style.backgroundSize || 'none';
 	}
 	reveal(state) {
-		this.style.backgroundRepeat = this.options.repeat;
-		this.style.backgroundSize = this.options.size;
-		this.style.backgroundAttachment = this.options.attachment;
-		this.style.backgroundPosition = this.options.position;
 		if (!this.options.src) {
 			this.style.backgroundImage = '';
 			return;
@@ -64,15 +56,19 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 			} catch(e) {
 				// pass
 			}
-			this.style.backgroundImage = `url(${curSrc})`;
+			this.#defer?.reject();
 			this.#defer = new Deferred();
 			const img = new Image();
 			img.addEventListener('load', this.#defer.resolve);
 			img.addEventListener('error', this.#defer.resolve);
 			img.src = curSrc;
+			this.style.backgroundImage = `url("${curSrc}")`;
 			return this.#defer;
 		}
 	}
+	close() {
+		this.#defer?.reject();
+	}
 }
 
 (function(HTMLElementImage) {