@pageboard/html 0.15.0 → 0.15.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/elements/form.js +3 -11
- package/elements/input-otp.js +56 -0
- package/package.json +1 -1
- package/ui/otp.css +28 -0
- package/ui/otp.js +14 -0
package/elements/form.js
CHANGED
|
@@ -72,6 +72,7 @@ exports.api_form = {
|
|
|
72
72
|
group: 'block form',
|
|
73
73
|
menu: "form",
|
|
74
74
|
required: ["action"],
|
|
75
|
+
unique: ["name"],
|
|
75
76
|
expressions: true,
|
|
76
77
|
$lock: {
|
|
77
78
|
'data.action.parameters': 'webmaster'
|
|
@@ -101,18 +102,9 @@ exports.api_form = {
|
|
|
101
102
|
description: 'Choose a service',
|
|
102
103
|
$ref: '/writes'
|
|
103
104
|
},
|
|
104
|
-
request: {
|
|
105
|
-
title: 'Map inputs',
|
|
106
|
-
type: 'object',
|
|
107
|
-
nullable: true
|
|
108
|
-
},
|
|
109
|
-
response: {
|
|
110
|
-
title: 'Map outputs',
|
|
111
|
-
type: 'object',
|
|
112
|
-
nullable: true
|
|
113
|
-
},
|
|
114
105
|
redirection: {
|
|
115
106
|
title: 'Success',
|
|
107
|
+
description: 'Page state or action',
|
|
116
108
|
type: 'object',
|
|
117
109
|
properties: {
|
|
118
110
|
url: {
|
|
@@ -171,7 +163,7 @@ exports.api_form = {
|
|
|
171
163
|
tag: 'form[method="post"]',
|
|
172
164
|
html: `<form is="element-form" method="post" name="[name]" masked="[masked]"
|
|
173
165
|
action="/@api/form/[name|else:$id]"
|
|
174
|
-
parameters="[
|
|
166
|
+
parameters="[action?.request|as:expressions]"
|
|
175
167
|
success="[redirection.url][redirection.parameters|as:query]"
|
|
176
168
|
badrequest="[badrequest.url][badrequest.parameters|as:query]"
|
|
177
169
|
unauthorized="[unauthorized.url][unauthorized.parameters|as:query]"
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
exports.input_otp = {
|
|
2
|
+
title: 'OTP',
|
|
3
|
+
icon: '<i class="icons"><i class="text cursor icon"></i><i class="corner lock icon"></i></i>',
|
|
4
|
+
menu: "form",
|
|
5
|
+
required: ["name"],
|
|
6
|
+
group: "block input_field",
|
|
7
|
+
context: 'form//',
|
|
8
|
+
properties: {
|
|
9
|
+
name: {
|
|
10
|
+
title: "Name",
|
|
11
|
+
description: "The form object key",
|
|
12
|
+
type: "string",
|
|
13
|
+
format: "singleline",
|
|
14
|
+
$helper: 'element-property'
|
|
15
|
+
},
|
|
16
|
+
value: {
|
|
17
|
+
title: "Default value",
|
|
18
|
+
nullable: true,
|
|
19
|
+
type: "string",
|
|
20
|
+
format: "singleline"
|
|
21
|
+
},
|
|
22
|
+
required: {
|
|
23
|
+
title: 'Required',
|
|
24
|
+
type: 'boolean',
|
|
25
|
+
default: false
|
|
26
|
+
},
|
|
27
|
+
disabled: {
|
|
28
|
+
title: 'Disabled',
|
|
29
|
+
type: 'boolean',
|
|
30
|
+
default: false
|
|
31
|
+
},
|
|
32
|
+
readonly: {
|
|
33
|
+
title: 'Read only',
|
|
34
|
+
type: 'boolean',
|
|
35
|
+
default: false
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
contents: {
|
|
39
|
+
id: 'label',
|
|
40
|
+
nodes: 'inline*'
|
|
41
|
+
},
|
|
42
|
+
html: `<div class="otp field">
|
|
43
|
+
<label block-content="label">Label</label>
|
|
44
|
+
<input is="element-input-otp" name="[name]"
|
|
45
|
+
required="[required]"
|
|
46
|
+
readonly="[readonly]"
|
|
47
|
+
disabled="[disabled]"
|
|
48
|
+
value="[value]"
|
|
49
|
+
inputmode="numeric"
|
|
50
|
+
maxlength="6"
|
|
51
|
+
pattern="\\d{6}"
|
|
52
|
+
autocomplete="off" />
|
|
53
|
+
</div>`,
|
|
54
|
+
stylesheets: ['../ui/otp.css'],
|
|
55
|
+
scripts: ['../ui/otp.js']
|
|
56
|
+
};
|
package/package.json
CHANGED
package/ui/otp.css
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
form .otp.field > input[is="element-input-otp"] {
|
|
2
|
+
--otp-digits: 6;
|
|
3
|
+
--otp-ls: 2ch;
|
|
4
|
+
--otp-gap: 1.25;
|
|
5
|
+
--otp-fz: 1.5em;
|
|
6
|
+
--otp-pb: 0.5ch;
|
|
7
|
+
|
|
8
|
+
/* private consts */
|
|
9
|
+
--otp-bgsz: calc(var(--otp-ls) + 1ch);
|
|
10
|
+
--otp-digit: 0;
|
|
11
|
+
|
|
12
|
+
all: unset;
|
|
13
|
+
background:
|
|
14
|
+
linear-gradient(90deg, var(--otp-bg, #BBB) calc(var(--otp-gap) * var(--otp-ls)),
|
|
15
|
+
transparent 0),
|
|
16
|
+
linear-gradient(90deg, var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
|
|
17
|
+
transparent 0) !important;
|
|
18
|
+
background-position: calc(var(--otp-digit) * var(--otp-bgsz)) 0, 0 0 !important;
|
|
19
|
+
background-repeat: no-repeat, repeat-x !important;
|
|
20
|
+
background-size: var(--otp-bgsz) 100% !important;
|
|
21
|
+
caret-color: var(--otp-cc, #222);
|
|
22
|
+
clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
|
|
23
|
+
font-size: var(--otp-fz, 2.5em);
|
|
24
|
+
inline-size: calc(var(--otp-digits) * var(--otp-bgsz));
|
|
25
|
+
letter-spacing: var(--otp-ls);
|
|
26
|
+
padding-block: var(--otp-pb, 1ch);
|
|
27
|
+
padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
|
|
28
|
+
}
|
package/ui/otp.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
class HTMLElementInputOtp extends Page.create(HTMLInputElement) {
|
|
2
|
+
handleInput() {
|
|
3
|
+
this.style.setProperty('--otp-digit', this.selectionStart);
|
|
4
|
+
}
|
|
5
|
+
handleFocus() {
|
|
6
|
+
this.value = "";
|
|
7
|
+
}
|
|
8
|
+
paint() {
|
|
9
|
+
if (this.isContentEditable) return;
|
|
10
|
+
this.focus();
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
Page.define('element-input-otp', HTMLElementInputOtp, 'input');
|