@pageboard/html 0.12.20 → 0.12.21

package/elements/form.js

@@ -12,6 +12,12 @@ exports.query_form = {
 			format: 'id',
 			nullable: true
 		},
+		masked: {
+			title: 'Masked',
+			description: 'Hidden and disabled, unmasked by $query.toggle',
+			type: 'boolean',
+			default: false
+		},
 		type: {
 			title: 'Bind to element',
 			description: 'Checks schema and helps adding form controls',
@@ -46,8 +52,8 @@ exports.query_form = {
 	},
 	contents: 'block+',
 	tag: 'form[method="get"]',
-	html: `<form is="element-form" method="get" name="[name]"
-		action="[redirection|urltpl:url:parameters]"
+	html: `<form is="element-form" method="get" name="[name]" masked="[masked]"
+		action="[redirection.url][redirection.parameters|as:query]"
 		autocomplete="off" class="ui form"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',
@@ -72,18 +78,24 @@ exports.api_form = {
 		'data.action.parameters': 'webmaster'
 	},
 	properties: {
+		name: {
+			title: 'Name',
+			description: '<action>=<name> where action=submit or toggle',
+			type: 'string',
+			format: 'id',
+			nullable: true
+		},
 		hidden: {
 			title: 'Hidden',
 			type: 'boolean',
 			default: false,
 			context: 'template'
 		},
-		name: {
-			title: 'Name',
-			description: 'Use with form.submit=name to autosubmit',
-			type: 'string',
-			format: 'id',
-			nullable: true
+		masked: {
+			title: 'Masked',
+			description: 'Hidden and disabled, unmasked by $query.toggle',
+			type: 'boolean',
+			default: false
 		},
 		action: {
 			title: 'Action',
@@ -166,13 +178,13 @@ exports.api_form = {
 	},
 	contents: 'block+',
 	tag: 'form[method="post"]',
-	html: `<form is="element-form" method="post" name="[name]"
+	html: `<form is="element-form" method="post" name="[name]" masked="[masked]"
 		action="/.api/form/[$id]"
 		parameters="[$expr?.action?.parameters|templates:$query]"
-		success="[redirection|urltpl:url:parameters]"
-		badrequest="[badrequest|urltpl:url:parameters]"
-		unauthorized="[unauthorized|urltpl:url:parameters]"
-		notfound="[notfound|urltpl:url:parameters]"
+		success="[redirection.url][redirection.parameters|as:query]"
+		badrequest="[badrequest.url][badrequest.parameters|as:query]"
+		unauthorized="[unauthorized.url][unauthorized.parameters|as:query]"
+		notfound="[notfound.url][notfound.parameters|as:query]"
 		class="ui form [hidden]"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',

package/package.json

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

package/ui/form.css

@@ -37,6 +37,11 @@ element-select {
 	position:relative;
 }
 
-.ui.form[method="post"]:not(.unsaved,:hover) button[type="submit"] {
-	opacity:0.2;
+.ui.form[method="post"].unsaved button[type="submit"] {
+	text-decoration:underline;
+}
+
+[contenteditable] form[hidden] {
+	display: block !important;
+	opacity:0.5;
 }

package/ui/form.js

@@ -103,10 +103,17 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	}
 	patch(state) {
 		if (state.scope.$write) return;
+		const { submit, toggle } = state.query;
+		const toggles = [];
+		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
-			const name = state.query.submit;
-			if (name && name == this.name) {
+			if (submit && submit == this.name) {
+				if (masked) toggles.push(submit);
 				state.vars.submit = true;
 			}
 			const vars = state.templatesQuery(this) || {};
@@ -120,6 +127,13 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				state.vars[name] = true;
 			}
 		}
+		if (toggles.includes(this.name)) {
+			// ?toggle=<name> for toggling hidden state
+			if (toggle) state.vars.toggle = true;
+			this.disabled = this.hidden = !masked;
+		} else if (this.name) {
+			this.disabled = this.hidden = masked;
+		}
 	}
 	paint(state) {
 		// ?submit=<name> for auto-submit
@@ -355,14 +369,15 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		form.classList.remove('loading');
 
 		// messages shown inside form, no navigation
-		const hasMsg = form.toggleMessages(res.status);
+		const msg = form.toggleMessages(res.status);
+		if (msg) msg.fuse({}, scope);
 		const ok = res.status >= 200 && res.status < 300;
 		let redirect = form.getRedirect(res.status);
 
 		if (ok) {
 			form.forget();
 			form.save();
-			if (!redirect && form.closest('element-template') && !hasMsg) {
+			if (!redirect && form.closest('element-template') && !msg) {
 				redirect = state.toString();
 			}
 		}