@pageboard/html 0.15.6 → 0.15.8

package/elements/form.js

@@ -9,12 +9,12 @@ exports.query_form = {
 			title: 'Name',
 			description: 'Useful for query tags',
 			type: 'string',
-			format: 'id',
+			format: 'name',
 			nullable: true
 		},
-		masked: {
-			title: 'Masked',
-			description: 'Hidden and disabled, unmasked by $query.toggle',
+		hidden: {
+			title: 'Hidden',
+			description: 'Hidden and disabled\nShown by $query.toggle',
 			type: 'boolean',
 			default: false
 		},
@@ -52,7 +52,7 @@ exports.query_form = {
 	},
 	contents: 'block+',
 	tag: 'form[method="get"]',
-	html: `<form is="element-form" method="get" name="[name]" masked="[masked]"
+	html: `<form is="element-form" method="get" id="[name|else:$id]" hidden="[hidden]"
 		action="[redirection.url][redirection.parameters|as:query]"
 		autocomplete="off" class="ui form"></form>`,
 	stylesheets: [
@@ -87,16 +87,11 @@ exports.api_form = {
 		},
 		hidden: {
 			title: 'Hidden',
+			description: 'Hidden and disabled\nShown by $query.toggle',
 			type: 'boolean',
 			default: false,
 			context: 'template'
 		},
-		masked: {
-			title: 'Masked',
-			description: 'Hidden and disabled, unmasked by $query.toggle',
-			type: 'boolean',
-			default: false
-		},
 		action: {
 			title: 'Action',
 			description: 'Choose a service',
@@ -178,14 +173,15 @@ exports.api_form = {
 	},
 	contents: 'block+',
 	tag: 'form[method="post"]',
-	html: `<form is="element-form" method="post" name="[name]" masked="[masked]"
-		action="/@api/form/[name|else:$id]"
+	html: `<form is="element-form" method="post" hidden="[hidden]"
+		id="[name|else:$id]"
+		action="/@api/form/[$id]"
 		parameters="[action?.request|as:expressions]"
 		success="[redirection.parameters|as:query]"
 		badrequest="[badrequest.parameters|as:query]"
 		unauthorized="[unauthorized.parameters|as:query]"
 		notfound="[notfound.parameters|as:query]"
-		class="ui form [hidden]"></form>`,
+		class="ui form"></form>`,
 	stylesheets: [
 		'../ui/components/form.css',
 		'../ui/form.css'

package/elements/inputs.js

@@ -38,6 +38,16 @@ exports.input_button = {
 			type: "string",
 			format: "singleline"
 		},
+		form: {
+			title: 'Target form',
+			type: 'string',
+			format: 'name',
+			nullable: true,
+			$filter: {
+				name: 'action',
+				action: 'write'
+			}
+		},
 		disabled: {
 			title: 'Disabled',
 			type: 'boolean',
@@ -73,7 +83,7 @@ exports.input_button = {
 			default: null
 		}
 	},
-	html: '<button type="[type]" disabled="[disabled]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button" name="[name]" value="[value]">[type|schema:title]</button>',
+	html: '<button type="[type]" form="[form]" disabled="[disabled]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button" name="[name]" value="[value]">[type|schema:title]</button>',
 	stylesheets: [
 		'../ui/components/button.css',
 		'../ui/button.css'
@@ -479,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]" required="[required]"
-			multiple="[multiple]"
+			name="[name]" disabled="[disabled|as:batt]" required="[required|as:batt]"
+			multiple="[multiple|as:batt]"
 			value="[value]"
 		>
 			<i class="dropdown icon"></i><div class="text"></div><select></select>

package/elements/pagination.js

@@ -7,9 +7,9 @@ exports.pagination = {
 	isolating: true,
 	properties: {
 		fetch: {
-			title: 'Name of fetch block',
+			title: 'Target fetch',
 			type: 'string',
-			format: 'id',
+			format: 'name',
 			$filter: {
 				name: 'action',
 				action: 'read'

package/package.json

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

package/ui/form.js

@@ -74,12 +74,10 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		if (typeof toggle == "string") toggles.push(...toggle.split('-'));
 		else if (Array.isArray(toggle)) toggles.push(...toggle);
 
-		const masked = this.hasAttribute('masked');
-
 		if (this.method != "get") {
 			// ?submit=<name> for auto-submit
 			if (submit && submit == this.name) {
-				if (masked) toggles.push(submit);
+				if (this.hidden) toggles.push(submit);
 				state.vars.submit = true;
 			}
 			const actionLoc = Page.parse(this.getAttribute('action'));
@@ -94,9 +92,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		if (toggles.includes(this.name)) {
 			// ?toggle=<name> for toggling hidden state
 			if (toggle) state.vars.toggle = true;
-			this.disabled = this.hidden = !masked;
+			this.disabled = !this.hidden;
 		} else {
-			this.disabled = this.hidden = masked;
+			this.disabled = this.hidden;
 		}
 	}
 	paint(state) {
@@ -368,10 +366,10 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		}
 		state.debounce(
 			() => {
-				msg.classList.remove('visible');
+				msg?.classList.remove('visible');
 				return state.push(loc, { vary });
 			},
-			msg.dataset.fading ? 1000 : 100
+			msg?.dataset.fading ? 1000 : 100
 		)();
 	}
 }

package/ui/pagination.js

@@ -9,7 +9,7 @@ class HTMLElementPagination extends Page.create(HTMLAnchorElement) {
 	#update(state) {
 		const { fetch } = this.dataset;
 		const node = this.ownerDocument.querySelector(
-			`element-template[action="/@api/query/${fetch}"]`
+			`element-template[id="${fetch}"]`
 		);
 		if (!node) {
 			console.warn("pagination does not find fetch node", fetch);