@pageboard/html 0.15.8 → 0.15.10

package/elements/image.js

@@ -4,11 +4,6 @@ exports.image = {
 	menu: 'media',
 	icon: '<i class="icon image"></i>',
 	properties: {
-		alt: {
-			title: 'Alternative text',
-			description: 'Short contextual description.\nLeave empty when used in links.',
-			type: "string"
-		},
 		url: {
 			title: 'Address',
 			anyOf: [{
@@ -126,14 +121,20 @@ exports.image = {
 	},
 	group: "block media",
 	tag: 'element-image',
-	contents: {
+	contents: [{
 		id: 'legend',
 		title: 'legend',
 		nodes: "inline*"
-	},
+	}, {
+		id: 'alt',
+		title: 'Alternative Text',
+		name: 'data-alt',
+		$helper: {
+			name: 'describe'
+		}
+	}],
 	html: `<element-image
 		class="[display.fit|or:none] [display.horizontal?] [display.vertical?]"
-		alt="[alt]"
 		data-src="[url]"
 		data-crop="[crop.x|or:50];[crop.y|or:50];[crop.width|or:100];[crop.height|or:100];[crop.zoom|or:100]"
 	>

package/elements/inputs.js

@@ -489,8 +489,8 @@ exports.input_select = {
 	html: `<div class="field">
 		<label block-content="label">Label</label>
 		<element-select class="ui selection dropdown [multiple]"
-			name="[name]" disabled="[disabled|as:batt]" required="[required|as:batt]"
-			multiple="[multiple|as:batt]"
+			name="[name]" disabled="[disabled|alt:]" required="[required|alt:]"
+			multiple="[multiple|alt:]"
 			value="[value]"
 		>
 			<i class="dropdown icon"></i><div class="text"></div><select></select>

package/elements/link.js

@@ -29,7 +29,7 @@ exports.link = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/@api/languages'
+				url: '/@api/translate/languages'
 			}
 		},
 		id: {
@@ -75,7 +75,7 @@ exports.link_button = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/@api/languages'
+				url: '/@api/translate/languages'
 			}
 		},
 		full: {

package/elements/menu.js

@@ -105,7 +105,7 @@ exports.menu_item_link = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/@api/languages'
+				url: '/@api/translate/languages'
 			}
 		},
 		labeled: {

package/package.json

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

package/ui/image.js

@@ -1,7 +1,8 @@
 const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	static defaults = {
 		src: null,
-		crop: null
+		crop: null,
+		alt: null
 	};
 
 	static defaultWidth = 240;
@@ -66,26 +67,33 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	}
 
 	patch(state) {
+		const {
+			dataset: d,
+			image,
+			dimensions: { w, h },
+			constructor,
+			currentSrc
+		} = this;
 		this.classList.remove('loading');
-		if (this.currentSrc != this.options.src) {
+		if (currentSrc != this.options.src) {
 			this.classList.remove('error');
 		}
-		const d = this.dataset;
+
 		if (d.width == null || d.height == null) {
 			const meta = state.scope.$hrefs?.[this.options.src];
 			if (meta?.width) d.width = meta.width;
 			if (meta?.height) d.height = meta.height;
 		}
-		d.width ??= this.constructor.defaultWidth || "";
-		d.height ??= this.constructor.defaultHeight || "";
-		const { w, h } = this.dimensions;
-		if (w) this.image.width = w || d.width;
-		if (h) this.image.height = h || d.height;
-		const cur = this.currentSrc;
+		d.width ??= constructor.defaultWidth || "";
+		d.height ??= constructor.defaultHeight || "";
+		image.width = w || d.width;
+		image.height = h || d.height;
+		image.alt = d.alt ?? "";
+		const cur = currentSrc;
 		if (!cur) {
 			this.placeholder();
 		} else if (cur.startsWith('data:')) {
-			this.image.setAttribute('src', cur);
+			image.setAttribute('src', cur);
 		}
 	}