@thi.ng/rdom-forms 0.3.0 → 0.3.1
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/CHANGELOG.md +7 -1
- package/README.md +63 -3
- package/compile.js +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
- **Last updated**: 2024-03-
|
|
3
|
+
- **Last updated**: 2024-03-28T10:57:28Z
|
|
4
4
|
- **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
|
|
5
5
|
|
|
6
6
|
All notable changes to this project will be documented in this file.
|
|
@@ -9,6 +9,12 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
|
|
|
9
9
|
**Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
|
|
10
10
|
and/or version bumps of transitive dependencies.
|
|
11
11
|
|
|
12
|
+
### [0.3.1](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.3.1) (2024-03-28)
|
|
13
|
+
|
|
14
|
+
#### 🩹 Bug fixes
|
|
15
|
+
|
|
16
|
+
- fix multiFile() handling/detection ([5339339](https://github.com/thi-ng/umbrella/commit/5339339))
|
|
17
|
+
|
|
12
18
|
## [0.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.3.0) (2024-03-27)
|
|
13
19
|
|
|
14
20
|
#### 🚀 Features
|
package/README.md
CHANGED
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
> GitHub](https://github.com/sponsors/postspectacular). Thank you! ❤️
|
|
16
16
|
|
|
17
17
|
- [About](#about)
|
|
18
|
+
- [Examples](#examples)
|
|
19
|
+
- [Login form](#login-form)
|
|
18
20
|
- [Status](#status)
|
|
19
21
|
- [Related packages](#related-packages)
|
|
20
22
|
- [Installation](#installation)
|
|
@@ -38,9 +40,67 @@ can then be used with
|
|
|
38
40
|
for static (or SSR) HTML generation via
|
|
39
41
|
[thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup).
|
|
40
42
|
|
|
41
|
-
All generated form elements are unstyled by default, but can be fully customized
|
|
43
|
+
All generated form elements are unstyled by default, but can be fully customized
|
|
44
|
+
(in various stages) via user-provided options.
|
|
45
|
+
|
|
46
|
+
## Examples
|
|
47
|
+
|
|
48
|
+
Please see the [rdom-formgen example
|
|
49
|
+
project](https://github.com/thi-ng/umbrella/blob/develop/examples/rdom-formgen),
|
|
50
|
+
which demonstrates **all** supported elements and various customization
|
|
51
|
+
options...
|
|
52
|
+
|
|
53
|
+
### Login form
|
|
54
|
+
|
|
55
|
+
```ts tangle:export/readme1.ts
|
|
56
|
+
import {
|
|
57
|
+
compileForm, form, hidden, password, str, submit
|
|
58
|
+
} from "@thi.ng/rdom-forms";
|
|
59
|
+
|
|
60
|
+
// compile form from given field descriptions
|
|
61
|
+
const loginForm = compileForm(
|
|
62
|
+
form({ action: "/login", method: "post" },
|
|
63
|
+
// string input
|
|
64
|
+
str({ id: "user", label: "Username", desc: "or email address" }),
|
|
65
|
+
// password
|
|
66
|
+
password({ id: "pass", label: "Password", desc: "min. 8 characters", min: 8 }),
|
|
67
|
+
// hidden form value
|
|
68
|
+
hidden({ name: "target", value: "user-home" }),
|
|
69
|
+
submit({ title: "Login", label: "" })
|
|
70
|
+
),
|
|
71
|
+
{
|
|
72
|
+
// disable reactive value subscriptions
|
|
73
|
+
behaviors: { values: false },
|
|
74
|
+
// customize attribs for label descriptions
|
|
75
|
+
descAttribs: { class: "desc" }
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
// use thi.ng/hiccup to serialize as HTML
|
|
80
|
+
import { serialize } from "@thi.ng/hiccup";
|
|
81
|
+
|
|
82
|
+
console.log(serialize(loginForm));
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Resulting output (reformatted):
|
|
42
86
|
|
|
43
|
-
|
|
87
|
+
```html
|
|
88
|
+
<form action="/login" method="post">
|
|
89
|
+
<div>
|
|
90
|
+
<label for="user">Username<span class="desc">or email address</span></label>
|
|
91
|
+
<input type="text" id="user" name="user" />
|
|
92
|
+
</div>
|
|
93
|
+
<div>
|
|
94
|
+
<label for="pass">Password<span class="desc">min. 8 characters</span></label>
|
|
95
|
+
<input type="password" autocomplete minlength="8" id="pass" name="pass" />
|
|
96
|
+
</div>
|
|
97
|
+
<input type="hidden" id="target" name="target" value="user-home" />
|
|
98
|
+
<div>
|
|
99
|
+
<label for="submit-0"></label>
|
|
100
|
+
<input type="submit" value="Login" id="submit-0" name="submit-0" />
|
|
101
|
+
</div>
|
|
102
|
+
</form>
|
|
103
|
+
```
|
|
44
104
|
|
|
45
105
|
## Status
|
|
46
106
|
|
|
@@ -72,7 +132,7 @@ For Node.js REPL:
|
|
|
72
132
|
const rdomForms = await import("@thi.ng/rdom-forms");
|
|
73
133
|
```
|
|
74
134
|
|
|
75
|
-
Package sizes (brotli'd, pre-treeshake): ESM: 2.
|
|
135
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 2.28 KB
|
|
76
136
|
|
|
77
137
|
## Dependencies
|
|
78
138
|
|
package/compile.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/rdom-forms",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Data-driven declarative & extensible HTML form generation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"@thi.ng/checks": "^3.5.5",
|
|
41
41
|
"@thi.ng/defmulti": "^3.0.34",
|
|
42
42
|
"@thi.ng/hiccup-html": "^2.5.0",
|
|
43
|
-
"@thi.ng/rdom": "^1.1.
|
|
44
|
-
"@thi.ng/rstream": "^8.3.
|
|
43
|
+
"@thi.ng/rdom": "^1.1.20",
|
|
44
|
+
"@thi.ng/rstream": "^8.3.18"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@microsoft/api-extractor": "^7.43.0",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"status": "alpha",
|
|
98
98
|
"year": 2023
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "db5f5a5d1b223a8e6b4999d67836678038fd3560\n"
|
|
101
101
|
}
|