form-payload 1.5.0 → 1.7.0
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/package.json +1 -1
- package/readme.md +191 -59
- package/src/index.d.ts +1 -1
- package/src/index.js +1 -1
- package/src/libs/constants/banned-control-element-types.constant.d.ts +2 -0
- package/src/libs/constants/banned-control-element-types.constant.d.ts.map +1 -0
- package/src/libs/constants/banned-control-element-types.constant.js +10 -0
- package/src/libs/constants/constants.d.ts +2 -2
- package/src/libs/constants/constants.js +2 -2
- package/src/libs/constants/value-as-array-custom-control-element-types.constant.d.ts +2 -0
- package/src/libs/constants/value-as-array-custom-control-element-types.constant.d.ts.map +1 -0
- package/src/libs/constants/value-as-array-custom-control-element-types.constant.js +8 -0
- package/src/libs/constants/value-as-array-identifier.constant.d.ts.map +1 -1
- package/src/libs/constants/value-as-array-identifier.constant.js +1 -1
- package/src/libs/enums/{control-type.enum.d.ts → control-element-type.enum.d.ts} +2 -2
- package/src/libs/enums/control-element-type.enum.d.ts.map +1 -0
- package/src/libs/enums/{control-type.enum.js → control-element-type.enum.js} +2 -2
- package/src/libs/enums/enums.d.ts +1 -1
- package/src/libs/enums/enums.js +1 -1
- package/src/packages/get-form-control-payload/get-form-control-payload.d.ts +4 -11
- package/src/packages/get-form-control-payload/get-form-control-payload.d.ts.map +1 -1
- package/src/packages/get-form-control-payload/get-form-control-payload.js +62 -101
- package/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.d.ts.map +1 -1
- package/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js +9 -6
- package/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.d.ts +9 -0
- package/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js +23 -0
- package/src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/{get-checkbox-value/get-checkbox-value.helper.js → get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js} +2 -2
- package/src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.d.ts +9 -0
- package/src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/{get-control-value/get-control-value.helper.js → get-control-element-value/get-control-element-value.helper.js} +2 -2
- package/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js +9 -0
- package/src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/{get-input-date-value/get-input-date-value.helper.js → get-date-control-element-value/get-date-value-control-element.helper.js} +2 -2
- package/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js +20 -0
- package/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.d.ts +14 -0
- package/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js +30 -0
- package/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js +16 -0
- package/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.d.ts +14 -0
- package/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js +69 -0
- package/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js +9 -0
- package/src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.d.ts +6 -0
- package/src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/{get-input-numeric-value/get-input-numeric-value.helper.js → get-numeric-control-element-value/get-numeric-control-element-value.helper.js} +2 -2
- package/src/packages/get-form-control-payload/helpers/{get-allowed-elements/get-allowed-elements.helper.d.ts → get-operational-control-elements/get-operational-control-elements.helper.d.ts} +2 -2
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js +36 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.d.ts +8 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js +11 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.d.ts +8 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js +19 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.d.ts +8 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js +17 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.d.ts +4 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js +3 -0
- package/src/packages/get-form-control-payload/helpers/helpers.d.ts +13 -11
- package/src/packages/get-form-control-payload/helpers/helpers.js +13 -11
- package/src/packages/get-form-control-payload/helpers/{get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.d.ts → normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.d.ts} +2 -2
- package/src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.d.ts.map +1 -0
- package/src/packages/get-form-control-payload/helpers/{get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js → normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js} +2 -2
- package/src/packages/get-form-payload/get-form-payload.d.ts +2 -2
- package/src/packages/get-form-payload/get-form-payload.d.ts.map +1 -1
- package/src/packages/get-form-payload/get-form-payload.js +8 -5
- package/src/libs/constants/banned-control-types.constant.d.ts +0 -2
- package/src/libs/constants/banned-control-types.constant.d.ts.map +0 -1
- package/src/libs/constants/banned-control-types.constant.js +0 -10
- package/src/libs/constants/value-as-array-custom-control-types.constant.d.ts +0 -2
- package/src/libs/constants/value-as-array-custom-control-types.constant.d.ts.map +0 -1
- package/src/libs/constants/value-as-array-custom-control-types.constant.js +0 -5
- package/src/libs/enums/control-type.enum.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.d.ts +0 -10
- package/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js +0 -24
- package/src/packages/get-form-control-payload/helpers/get-allowed-elements/get-allowed-elements.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-allowed-elements/get-allowed-elements.helper.js +0 -61
- package/src/packages/get-form-control-payload/helpers/get-checkbox-value/get-checkbox-value.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-checkbox-value/get-checkbox-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-control-value/get-control-value.helper.d.ts +0 -9
- package/src/packages/get-form-control-payload/helpers/get-control-value/get-control-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.js +0 -9
- package/src/packages/get-form-control-payload/helpers/get-input-date-value/get-input-date-value.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-input-date-value/get-input-date-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js +0 -20
- package/src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.js +0 -16
- package/src/packages/get-form-control-payload/helpers/get-input-numeric-value/get-input-numeric-value.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-input-numeric-value/get-input-numeric-value.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.d.ts +0 -6
- package/src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.d.ts.map +0 -1
- package/src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.js +0 -9
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -13,87 +13,219 @@ npm install form-payload
|
|
|
13
13
|
|
|
14
14
|
## Demo
|
|
15
15
|
|
|
16
|
-
- [
|
|
17
|
-
- [Advanced (TypeScript + Validation)](https://stackblitz.com/edit/form-payload-advanced?file=index.ts,get-form-payload.ts)
|
|
18
|
-
- [Framework (React + TypeScript)](https://stackblitz.com/edit/form-payload-framework?file=src%2FApp.tsx)
|
|
16
|
+
The library works perfectly with any framework. Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) and [form elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements). The same applies to validations and any other libraries. Create your own wrappers on top of the functions exported by **form-payload** library.
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
- [Pure JavaScript](https://stackblitz.com/edit/form-payload-javascript?file=index.js)
|
|
19
|
+
- [TypeScript + Validation](https://stackblitz.com/edit/form-payload-typescript?file=index.ts,get-form-payload.ts)
|
|
20
|
+
- [React + TypeScript](https://stackblitz.com/edit/form-payload-react?file=src%2FApp.tsx)
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
23
23
|
|
|
24
|
+
<!-- prettier-ignore-start -->
|
|
24
25
|
```html
|
|
25
|
-
<form name="
|
|
26
|
-
<label>
|
|
27
|
-
Name
|
|
28
|
-
<input type="text" name="name" value="John" />
|
|
29
|
-
</label>
|
|
30
|
-
<label>
|
|
31
|
-
Birthday
|
|
32
|
-
<input type="date" name="birthday" value="2021-03-27" />
|
|
33
|
-
</label>
|
|
34
|
-
<button type="submit">Submit</button>
|
|
26
|
+
<form name="resume">
|
|
27
|
+
<label>CV: <input type="file" name="resume"></label>
|
|
35
28
|
</form>
|
|
36
29
|
|
|
37
30
|
<form name="mailing">
|
|
38
|
-
<label>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
<label>Email: <input type="email" name="mail" value="e@mail.com"></label>
|
|
32
|
+
</form>
|
|
33
|
+
|
|
34
|
+
<form name="general">
|
|
35
|
+
<label>Name: <input type="text" name="name" value="John"></label>
|
|
36
|
+
<label>DOB: <input type="date" name="dob" value="2021-03-27"></label>
|
|
37
|
+
<button type="submit">Submit</button>
|
|
42
38
|
</form>
|
|
43
39
|
|
|
44
40
|
<script>
|
|
45
41
|
import { getFormPayload, getFormControlPayload } from 'form-payload';
|
|
46
42
|
|
|
47
|
-
const
|
|
48
|
-
|
|
43
|
+
const {
|
|
44
|
+
resume: resumeFormNode,
|
|
45
|
+
mailing: mailingFormNode,
|
|
46
|
+
general: generalFormNode,
|
|
47
|
+
} = document.forms;
|
|
49
48
|
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
resumeFormNode.addEventListener('change', (evt) => {
|
|
50
|
+
// ❌ bad (hard to read, magic numbers, bulky, outdated approach)
|
|
51
|
+
const file = evt.target.files?.[0] || null;
|
|
52
52
|
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
// 🟡 better (modern, clear, but repetitive approach – violates DRY)
|
|
54
|
+
const [file = null] = env.target.files ?? [];
|
|
55
|
+
|
|
56
|
+
// ✅ ideal
|
|
57
|
+
const file = getFormControlPayload(evt.target);
|
|
55
58
|
});
|
|
56
59
|
|
|
57
60
|
mailingFormNode.addEventListener('input', (evt) => {
|
|
58
61
|
const formControlPayload = getFormControlPayload(evt.target);
|
|
59
|
-
// => '
|
|
62
|
+
// => 'e@mail.com'
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
generalFormNode.addEventListener('submit', (evt) => {
|
|
66
|
+
evt.preventDefault();
|
|
67
|
+
|
|
68
|
+
const formPayload = getFormPayload(generalFormNode);
|
|
69
|
+
// => { name: 'John', dob: 'Sat Mar 27 2021 02:00:00 GMT+0200' }
|
|
60
70
|
});
|
|
61
71
|
</script>
|
|
62
72
|
```
|
|
73
|
+
<!-- prettier-ignore-end -->
|
|
63
74
|
|
|
64
75
|
## Value Correspondence Table
|
|
65
76
|
|
|
66
|
-
| HTMLElement | Attributes
|
|
67
|
-
| ------------------------------------------------------------------------------------------- |
|
|
68
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="text"`
|
|
69
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="password"`
|
|
70
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="search"`
|
|
71
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="url"`
|
|
72
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="tel"`
|
|
73
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="color"`
|
|
74
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="radio"`
|
|
75
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="hidden"`
|
|
76
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="email"`
|
|
77
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="email"` and `multiple`
|
|
78
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="number"`
|
|
79
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="range"`
|
|
80
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="checkbox"`
|
|
81
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="checkbox"` and `[]` in `name`
|
|
82
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="date"`
|
|
83
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="time"`
|
|
84
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="month"`
|
|
85
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="week"`
|
|
86
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="datetime-local"`
|
|
87
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"`
|
|
88
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple`
|
|
89
|
-
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="button"`
|
|
90
|
-
| [
|
|
91
|
-
| [
|
|
92
|
-
| [
|
|
93
|
-
| [
|
|
94
|
-
| [
|
|
95
|
-
| [
|
|
96
|
-
| [
|
|
97
|
-
| [
|
|
98
|
-
|
|
99
|
-
|
|
77
|
+
| HTMLElement | Attributes | Included | Return Value |
|
|
78
|
+
| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------- |
|
|
79
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="text"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) | ✅ | `string` |
|
|
80
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="password"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) | ✅ | `string` |
|
|
81
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="search"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) | ✅ | `string` |
|
|
82
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="url"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url) | ✅ | `string` |
|
|
83
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="tel"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) | ✅ | `string` |
|
|
84
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="color"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) | ✅ | `string` |
|
|
85
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="radio"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) | ✅ | `string` |
|
|
86
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="hidden"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden) | ✅ | `string` |
|
|
87
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="email"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email) | ✅ | `string` |
|
|
88
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="email"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email) and [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) | ✅ | `Array<string>` |
|
|
89
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="number"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) | ✅ | `number` |
|
|
90
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="range"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) | ✅ | `number` |
|
|
91
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="checkbox"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) | ✅ | `boolean` |
|
|
92
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="checkbox"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) and with `[]` in [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) | ✅ | `Array<string>` (See [advanced usage](#htmlinputelement-with-typecheckbox-as-array)) |
|
|
93
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="date"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
|
|
94
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="time"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
|
|
95
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="month"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month) | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
|
|
96
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="week"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week) | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
|
|
97
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="datetime-local"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
|
|
98
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) | ✅ | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null` |
|
|
99
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) and [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) | ✅ | <code>Array<[File](https://developer.mozilla.org/en-US/docs/Web/API/File)></code> |
|
|
100
|
+
| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | [`type="button"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) or [`type="submit"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) or [`type="reset"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset) or [`type="image"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) | ❌ | – |
|
|
101
|
+
| [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextareaElement) | – | ✅ | `string` |
|
|
102
|
+
| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | – | ✅ | `string` |
|
|
103
|
+
| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) | ✅ | `Array<string>` |
|
|
104
|
+
| [HTMLOutputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement) | – | ✅ | `string` |
|
|
105
|
+
| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | – | ✅ | `Object<name: string, value: unknown>` (See [advanced usage](#htmlfieldsetelement-as-object)) |
|
|
106
|
+
| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | with `[]` in [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#name) | ✅ | `Array<Object<name: string, value: unknown>>` (See [advanced usage](#htmlfieldsetelement-as-array)) |
|
|
107
|
+
| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | – | ❌ | – |
|
|
108
|
+
| [HTMLObjectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement) | – | ❌ | – |
|
|
109
|
+
|
|
110
|
+
## Advanced Usage
|
|
111
|
+
|
|
112
|
+
### HTMLInputElement with type="checkbox" as array
|
|
113
|
+
|
|
114
|
+
`getFormPayload` returns an array of values for checked elements when using `<input>` with `type="checkbox"` and the `[]` symbol at the end of the `name` attribute of the `<input>` element itself.
|
|
115
|
+
|
|
116
|
+
<!-- prettier-ignore-start -->
|
|
117
|
+
```html
|
|
118
|
+
<form name="shop">
|
|
119
|
+
<label>Shop name: <input name="name" type="text" value="Shop #1"></label>
|
|
120
|
+
<label>Apple <input name="fruits[]" type="checkbox" value="apple" checked></label>
|
|
121
|
+
<label>Orange <input name="fruits[]" type="checkbox" value="orange"></label>
|
|
122
|
+
<label>Banana <input name="fruits[]" type="checkbox" value="banana" checked></label>
|
|
123
|
+
<button type="submit">Submit</button>
|
|
124
|
+
</form>
|
|
125
|
+
|
|
126
|
+
<script>
|
|
127
|
+
import { getFormPayload } from 'form-payload';
|
|
128
|
+
|
|
129
|
+
const { shop: shopFormNode } = document.forms;
|
|
130
|
+
|
|
131
|
+
shopFormNode.addEventListener('submit', (evt) => {
|
|
132
|
+
evt.preventDefault();
|
|
133
|
+
|
|
134
|
+
const formPayload = getFormPayload(shopFormNode);
|
|
135
|
+
// =>
|
|
136
|
+
// {
|
|
137
|
+
// name: 'Shop #1',
|
|
138
|
+
// fruits: ['apple', 'banana'],
|
|
139
|
+
// }
|
|
140
|
+
})
|
|
141
|
+
</script>
|
|
142
|
+
```
|
|
143
|
+
<!-- prettier-ignore-end -->
|
|
144
|
+
|
|
145
|
+
### HTMLFieldsetElement as object
|
|
146
|
+
|
|
147
|
+
`getFormPayload`/`getFormControlPayload` returns a nested objects when using the `<fieldset>` element. The key name will be based on the `name` attribute of the `<fieldset>` element itself. Nesting of `<fieldset>` elements within each other can be infinite. `getFormPayload`/`getFormControlPayload` collects all values recursively.
|
|
148
|
+
|
|
149
|
+
<!-- prettier-ignore-start -->
|
|
150
|
+
```html
|
|
151
|
+
<form name="company">
|
|
152
|
+
<label>Company name: <input name="name" type="text" value="FreshHarvest Hub"></label>
|
|
153
|
+
<fieldset name="shop">
|
|
154
|
+
<label>Shop name: <input name="name" type="text" value="Shop #1"></label>
|
|
155
|
+
<label>Open: <input name="isOpen" type="checkbox" checked></label>
|
|
156
|
+
</fieldset>
|
|
157
|
+
<button type="submit">Submit</button>
|
|
158
|
+
</form>
|
|
159
|
+
|
|
160
|
+
<script>
|
|
161
|
+
import { getFormPayload } from 'form-payload';
|
|
162
|
+
|
|
163
|
+
const { company: companyFormNode } = document.forms;
|
|
164
|
+
|
|
165
|
+
companyFormNode.addEventListener('submit', (evt) => {
|
|
166
|
+
evt.preventDefault();
|
|
167
|
+
|
|
168
|
+
const formPayload = getFormPayload(companyFormNode);
|
|
169
|
+
// =>
|
|
170
|
+
// {
|
|
171
|
+
// name: 'FreshHarvest Hub',
|
|
172
|
+
// shop: {
|
|
173
|
+
// name: 'Shop #1',
|
|
174
|
+
// isOpen: true,
|
|
175
|
+
// },
|
|
176
|
+
// }
|
|
177
|
+
})
|
|
178
|
+
</script>
|
|
179
|
+
```
|
|
180
|
+
<!-- prettier-ignore-end -->
|
|
181
|
+
|
|
182
|
+
### HTMLFieldsetElement as array
|
|
183
|
+
|
|
184
|
+
`getFormPayload`/`getFormControlPayload` returns an array of objects when using the `<fieldset>` element and the `[]` symbol at the end of the `name` attribute of the `<fieldset>` elements. The functionality of recursively collecting values from nested `<fieldset>` elements is preserved.
|
|
185
|
+
|
|
186
|
+
<!-- prettier-ignore-start -->
|
|
187
|
+
```html
|
|
188
|
+
<form name="company">
|
|
189
|
+
<label>Company name: <input name="name" type="text" value="FreshHarvest Hub"></label>
|
|
190
|
+
<fieldset name="shops[]">
|
|
191
|
+
<label>Shop name: <input name="name" type="text" value="Shop #1"></label>
|
|
192
|
+
<label>Open: <input name="isOpen" type="checkbox" checked></label>
|
|
193
|
+
</fieldset>
|
|
194
|
+
<fieldset name="shops[]">
|
|
195
|
+
<label>Shop name: <input name="name" type="text" value="Shop #2"></label>
|
|
196
|
+
<label>Open: <input name="isOpen" type="checkbox"></label>
|
|
197
|
+
</fieldset>
|
|
198
|
+
<button type="submit">Submit</button>
|
|
199
|
+
</form>
|
|
200
|
+
|
|
201
|
+
<script>
|
|
202
|
+
import { getFormPayload } from 'form-payload';
|
|
203
|
+
|
|
204
|
+
const { company: companyFormNode } = document.forms;
|
|
205
|
+
|
|
206
|
+
companyFormNode.addEventListener('submit', (evt) => {
|
|
207
|
+
evt.preventDefault();
|
|
208
|
+
|
|
209
|
+
const formPayload = getFormPayload(companyFormNode);
|
|
210
|
+
// =>
|
|
211
|
+
// {
|
|
212
|
+
// name: 'FreshHarvest Hub',
|
|
213
|
+
// shops: [
|
|
214
|
+
// {
|
|
215
|
+
// name: 'Shop #1',
|
|
216
|
+
// isOpen: true,
|
|
217
|
+
// },
|
|
218
|
+
// {
|
|
219
|
+
// name: 'Shop #2',
|
|
220
|
+
// isOpen: false,
|
|
221
|
+
// },
|
|
222
|
+
// ],
|
|
223
|
+
// }
|
|
224
|
+
})
|
|
225
|
+
</script>
|
|
226
|
+
```
|
|
227
|
+
<!-- prettier-ignore-end -->
|
|
228
|
+
|
|
229
|
+
---
|
|
230
|
+
|
|
231
|
+
Inspired by [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and Web-platform in general ♡.
|
package/src/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ControlElementType } from "./libs/enums/enums.js";
|
|
2
2
|
export { FormPayloadError } from "./libs/exceptions/exceptions.js";
|
|
3
3
|
export { getFormControlPayload } from "./packages/get-form-control-payload/get-form-control-payload.js";
|
|
4
4
|
export { getFormPayload } from "./packages/get-form-payload/get-form-payload.js";
|
package/src/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ControlElementType } from './libs/enums/enums.js';
|
|
2
2
|
export { FormPayloadError } from './libs/exceptions/exceptions.js';
|
|
3
3
|
export { getFormControlPayload } from './packages/get-form-control-payload/get-form-control-payload.js';
|
|
4
4
|
export { getFormPayload } from './packages/get-form-payload/get-form-payload.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banned-control-element-types.constant.d.ts","sourceRoot":"","sources":["../../../../src/libs/constants/banned-control-element-types.constant.js"],"names":[],"mappings":"AAEA,2FAKG"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ControlElementType } from '../enums/enums.js';
|
|
2
|
+
|
|
3
|
+
const BANNED_CONTROL_ELEMENT_TYPES = /** @type {const} */ ([
|
|
4
|
+
ControlElementType.BUTTON,
|
|
5
|
+
ControlElementType.RESET,
|
|
6
|
+
ControlElementType.SUBMIT,
|
|
7
|
+
ControlElementType.IMAGE,
|
|
8
|
+
]);
|
|
9
|
+
|
|
10
|
+
export { BANNED_CONTROL_ELEMENT_TYPES };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { BANNED_CONTROL_ELEMENT_TYPES } from "./banned-control-element-types.constant.js";
|
|
2
|
+
export { VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES } from "./value-as-array-custom-control-element-types.constant.js";
|
|
3
3
|
export { VALUE_AS_ARRAY_IDENTIFIER } from "./value-as-array-identifier.constant.js";
|
|
4
4
|
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { BANNED_CONTROL_ELEMENT_TYPES } from './banned-control-element-types.constant.js';
|
|
2
|
+
export { VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES } from './value-as-array-custom-control-element-types.constant.js';
|
|
3
3
|
export { VALUE_AS_ARRAY_IDENTIFIER } from './value-as-array-identifier.constant.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"value-as-array-custom-control-element-types.constant.d.ts","sourceRoot":"","sources":["../../../../src/libs/constants/value-as-array-custom-control-element-types.constant.js"],"names":[],"mappings":"AAEA,4FAGG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"value-as-array-identifier.constant.d.ts","sourceRoot":"","sources":["../../../../src/libs/constants/value-as-array-identifier.constant.js"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"value-as-array-identifier.constant.d.ts","sourceRoot":"","sources":["../../../../src/libs/constants/value-as-array-identifier.constant.js"],"names":[],"mappings":"AAAA,6CAA8D"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export namespace
|
|
1
|
+
export namespace ControlElementType {
|
|
2
2
|
let TEXT: "text";
|
|
3
3
|
let PASSWORD: "password";
|
|
4
4
|
let SEARCH: "search";
|
|
@@ -27,4 +27,4 @@ export namespace ControlType {
|
|
|
27
27
|
let OUTPUT: "output";
|
|
28
28
|
let FIELDSET: "fieldset";
|
|
29
29
|
}
|
|
30
|
-
//# sourceMappingURL=control-type.enum.d.ts.map
|
|
30
|
+
//# sourceMappingURL=control-element-type.enum.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"control-element-type.enum.d.ts","sourceRoot":"","sources":["../../../../src/libs/enums/control-element-type.enum.js"],"names":[],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const ControlElementType = /** @type {const} */ ({
|
|
2
2
|
TEXT: 'text',
|
|
3
3
|
PASSWORD: 'password',
|
|
4
4
|
SEARCH: 'search',
|
|
@@ -39,4 +39,4 @@ const ControlType = /** @type {const} */ ({
|
|
|
39
39
|
FIELDSET: 'fieldset',
|
|
40
40
|
});
|
|
41
41
|
|
|
42
|
-
export {
|
|
42
|
+
export { ControlElementType };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ControlElementType } from "./control-element-type.enum.js";
|
|
2
2
|
//# sourceMappingURL=enums.d.ts.map
|
package/src/libs/enums/enums.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ControlElementType } from './control-element-type.enum.js';
|
|
@@ -1,18 +1,11 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { getFormControlElementsPayload } from "./helpers/helpers.js";
|
|
2
2
|
export type HTMLFormOperationalControlElement = import('../../libs/types/types.js').HTMLFormOperationalControlElement;
|
|
3
|
+
/** @typedef {import('../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */
|
|
3
4
|
/**
|
|
4
5
|
* @template {unknown} T
|
|
5
|
-
* @param {HTMLFormOperationalControlElement}
|
|
6
|
+
* @param {HTMLFormOperationalControlElement} controlElement
|
|
6
7
|
* @returns {T}
|
|
7
8
|
* @throws {FormPayloadError}
|
|
8
9
|
*/
|
|
9
|
-
export function getFormControlPayload<T extends unknown>(
|
|
10
|
-
/** @typedef {import('../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */
|
|
11
|
-
/** @typedef {import('../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */
|
|
12
|
-
/**
|
|
13
|
-
* @template {Record<string, unknown>} T
|
|
14
|
-
* @param {...HTMLFormControlElement} controlElements
|
|
15
|
-
* @returns {T}
|
|
16
|
-
*/
|
|
17
|
-
export function getFormControlsPayload<T extends Record<string, unknown>>(...controlElements: HTMLFormControlElement[]): T;
|
|
10
|
+
export function getFormControlPayload<T extends unknown>(controlElement: HTMLFormOperationalControlElement): T;
|
|
18
11
|
//# sourceMappingURL=get-form-control-payload.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-form-control-payload.d.ts","sourceRoot":"","sources":["../../../../src/packages/get-form-control-payload/get-form-control-payload.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"get-form-control-payload.d.ts","sourceRoot":"","sources":["../../../../src/packages/get-form-control-payload/get-form-control-payload.js"],"names":[],"mappings":";gDAcc,OAAO,2BAA2B,EAAE,iCAAiC;AAAnF,yHAAyH;AAEzH;;;;;GAKG;AACH,yEAJW,iCAAiC,KAsG3C"}
|