@pageboard/html 0.15.0 → 0.15.1

package/elements/form.js

@@ -103,16 +103,62 @@ exports.api_form = {
 		},
 		request: {
 			title: 'Map inputs',
+			description: `
+				expr is supposed to be used to merge stuff into html,
+				not really to merge stuff into methods parameters
+				Also expr has a bad design because
+			  - it can be replaced by a binding element inside the block
+				- it forces the expression to be in a specific attribute,
+				  and mostly when a block has no content (so a binding cannot be used)
+				- the editor is ugly and shows fields that might not even be merged into html
+				Use cases
+				- links in anchors, images
+				- input or buttons values, checked attributes
+				- hidden attributes
+				- show/hide blocks depending on response
+				The "expr" mecanism could instead be a list of expressions like
+				[url|as:url|assign:.query.reservation:$query.reservation]
+				[url][$query|pick:text:cover|as:query]
+
+				Things to solve:
+				- do we want expr to be able to do changes outside the DOM of the block itself ? (no, this should be done by a binding element)
+				- do we want expr to change only data before merge - outside of any dom context ? Possibly ! In which case the current system is not that bad,
+				but it should not use matchdom dom plugin at all
+				- how to deal with "template" expressions when one cannot insert a binding
+				element ? Is it really something that happens ?
+
+
+
+			`,
 			type: 'object',
 			nullable: true
 		},
 		response: {
 			title: 'Map outputs',
+			description: `
+				'item.id': '[item.data.id]'
+				'item.title': '[item.content.title]'
+				// etc...
+			`,
 			type: 'object',
 			nullable: true
 		},
 		redirection: {
 			title: 'Success',
+			description: `
+				redirection can be used by client,
+				to change the page state. In which case the "url" is not an api url.
+				It can be used by the server, in which case the "url" is an api url.
+				The parameters for a page url make the query, and $query, $request, $response are available.
+				The parameters for a user api call are...?
+				The user api endpoint is a real url (/@api/xxx) that can expect
+				a body ($request) and a query ($query) too.
+				Currently client pages use a trick to redirect and submit: a specific parameter triggers a form submit on the redirected page. This makes sense in the context of page navigation - the body is filled by the form that is triggered by the parameters.
+				How can that be transposed for internal user api redirection ?
+				1. since it redirects, output mapping can be done to format the $response
+				2. in the next api call, parameters mean $query, $response becomes $request ?
+				3. this works if output can merge $query, $request as well
+			`,
 			type: 'object',
 			properties: {
 				url: {

package/elements/input-otp.js

@@ -0,0 +1,56 @@
+exports.input_otp = {
+	title: 'OTP',
+	icon: '<i class="icons"><i class="text cursor icon"></i><i class="corner lock icon"></i></i>',
+	menu: "form",
+	required: ["name"],
+	group: "block input_field",
+	context: 'form//',
+	properties: {
+		name: {
+			title: "Name",
+			description: "The form object key",
+			type: "string",
+			format: "singleline",
+			$helper: 'element-property'
+		},
+		value: {
+			title: "Default value",
+			nullable: true,
+			type: "string",
+			format: "singleline"
+		},
+		required: {
+			title: 'Required',
+			type: 'boolean',
+			default: false
+		},
+		disabled: {
+			title: 'Disabled',
+			type: 'boolean',
+			default: false
+		},
+		readonly: {
+			title: 'Read only',
+			type: 'boolean',
+			default: false
+		}
+	},
+	contents: {
+		id: 'label',
+		nodes: 'inline*'
+	},
+	html: `<div class="otp field">
+		<label block-content="label">Label</label>
+		<input is="element-input-otp" name="[name]"
+			required="[required]"
+			readonly="[readonly]"
+			disabled="[disabled]"
+			value="[value]"
+			inputmode="numeric"
+			maxlength="6"
+			pattern="\\d{6}"
+			autocomplete="off" />
+	</div>`,
+	stylesheets: ['../ui/otp.css'],
+	scripts: ['../ui/otp.js']
+};

package/package.json

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

package/ui/otp.css

@@ -0,0 +1,28 @@
+form .otp.field > input[is="element-input-otp"] {
+	--otp-digits: 6;
+	--otp-ls: 2ch;
+	--otp-gap: 1.25;
+	--otp-fz: 1.5em;
+	--otp-pb: 0.5ch;
+
+	/* private consts */
+	--otp-bgsz: calc(var(--otp-ls) + 1ch);
+	--otp-digit: 0;
+
+	all: unset;
+	background:
+		linear-gradient(90deg, var(--otp-bg, #BBB) calc(var(--otp-gap) * var(--otp-ls)),
+		transparent 0),
+		linear-gradient(90deg, var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
+		transparent 0) !important;
+	background-position: calc(var(--otp-digit) * var(--otp-bgsz)) 0, 0 0 !important;
+	background-repeat: no-repeat, repeat-x !important;
+	background-size: var(--otp-bgsz) 100% !important;
+	caret-color: var(--otp-cc, #222);
+	clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
+	font-size: var(--otp-fz, 2.5em);
+	inline-size: calc(var(--otp-digits) * var(--otp-bgsz));
+	letter-spacing: var(--otp-ls);
+	padding-block: var(--otp-pb, 1ch);
+	padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
+}

package/ui/otp.js

@@ -0,0 +1,13 @@
+class HTMLElementInputOtp extends Page.create(HTMLInputElement) {
+	handleInput() {
+		this.style.setProperty('--otp-digit', this.selectionStart);
+	}
+	handleFocus() {
+		this.value = "";
+	}
+	paint() {
+		this.focus();
+	}
+}
+
+Page.define('element-input-otp', HTMLElementInputOtp, 'input');