From eac7e5b6fd9444638d935f579e37270607e6efe0 Mon Sep 17 00:00:00 2001 From: what1s1ove Date: Fri, 8 Dec 2023 14:53:12 +0200 Subject: [PATCH 1/4] docs: update examples in readme fp-63 --- eslint.config.js | 6 + readme.md | 142 +++++++----------- src/libs/enums/control-type.enum.js | 49 +++--- .../get-form-control-payload.js | 40 ++--- 4 files changed, 108 insertions(+), 129 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index e351658..ad15cec 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -171,6 +171,12 @@ const overridesConfigs = [ 'perfectionist/sort-imports': ['off'], }, }, + { + files: ['src/libs/enums/control-type.enum.js'], + rules: { + 'perfectionist/sort-objects': ['off'], + }, + }, ]; /** @type {import('eslint').Linter.FlatConfig[]} */ diff --git a/readme.md b/readme.md index 70b3f81..0bec11a 100644 --- a/readme.md +++ b/readme.md @@ -3,7 +3,7 @@ [![Continuous Integration](https://github.com/what1s1ove/whatislove.dev/actions/workflows/ci.yml/badge.svg)](https://github.com/what1s1ove/whatislove.dev/actions/workflows/ci.yml) [![Continuous Delivery](https://github.com/what1s1ove/whatislove.dev/actions/workflows/cd.yml/badge.svg)](https://github.com/what1s1ove/whatislove.dev/actions/workflows/cd.yml) -Gets form-payload (or payload for a named form field) - via `form.elements`. +Gets _proper_ form payload – via `form.elements`. ## Install @@ -14,116 +14,80 @@ npm install form-payload ## Usage ```html -
- -
- Friend - -
-... -
-``` -```js -// index.js -import { getFormPayload, getFormControlPayload } from 'form-payload'; + ``` -## MIT Licensed +PS. _The library works perfectly with any framework. It doesn't matter which framework is used; Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)._ + +## Value Correspondence Table + +| HTMLElement | Attributes | Included | Value | +| ------------------------------------------------------------------------------------------- | ---------------------------- | -------- | ----------------------------------------------------------------------------------------------- | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="text"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="password"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="email"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="search"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="url"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="tel"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="color"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="radio"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="hidden"` | ✅ | `string` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="number"` | ✅ | `number` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="range"` | ✅ | `number` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="checkbox"` | ✅ | `boolean` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="date"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="time"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="datetime-local"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="month"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="week"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` | ✅ | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | Array<[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)> | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="button"` | ❌ | – | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="submit"` | ❌ | – | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="reset"` | ❌ | – | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="image"` | ❌ | – | +| [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextareaElement) | – | ✅ | `string` | +| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | – | ✅ | `string` | +| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | `multiple` | ✅ | Array<`string`> | +| [HTMLOutputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement) | – | ✅ | `string` | +| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | – | ✅ | `Object` (recursive values of nested elements) | +| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | `type="button"` | ❌ | – | +| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | `type="submit"` | ❌ | – | +| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | `type="reset"` | ❌ | – | +| [HTMLObjectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement) | – | ❌ | – | diff --git a/src/libs/enums/control-type.enum.js b/src/libs/enums/control-type.enum.js index e5e64d2..418fd2e 100644 --- a/src/libs/enums/control-type.enum.js +++ b/src/libs/enums/control-type.enum.js @@ -1,31 +1,40 @@ const ControlType = /** @type {const} */ ({ - BUTTON: 'button', - CHECKBOX: 'checkbox', - COLOR: 'color', - DATE: 'date', - DATETIME_LOCAL: 'datetime-local', + TEXT: 'text', + PASSWORD: 'password', EMAIL: 'email', - FIELDSET: 'fieldset', - FILE: 'file', + SEARCH: 'search', + URL: 'url', + TEL: 'tel', + COLOR: 'color', + RADIO: 'radio', HIDDEN: 'hidden', - IMAGE: 'image', - MONTH: 'month', + NUMBER: 'number', - OUTPUT: 'output', - PASSWORD: 'password', - RADIO: 'radio', RANGE: 'range', + + CHECKBOX: 'checkbox', + + DATE: 'date', + TIME: 'time', + DATETIME_LOCAL: 'datetime-local', + MONTH: 'month', + WEEK: 'week', + + FILE: 'file', + + BUTTON: 'button', + SUBMIT: 'submit', RESET: 'reset', - SEARCH: 'search', + IMAGE: 'image', + + TEXTAREA: 'textarea', + SELECT_MULTIPLE: 'select-multiple', SELECT_ONE: 'select-one', - SUBMIT: 'submit', - TEL: 'tel', - TEXT: 'text', - TEXTAREA: 'textarea', - TIME: 'time', - URL: 'url', - WEEK: 'week', + + OUTPUT: 'output', + + FIELDSET: 'fieldset', }); export { ControlType }; diff --git a/src/packages/get-form-control-payload/get-form-control-payload.js b/src/packages/get-form-control-payload/get-form-control-payload.js index ce482d9..1c1524f 100644 --- a/src/packages/get-form-control-payload/get-form-control-payload.js +++ b/src/packages/get-form-control-payload/get-form-control-payload.js @@ -50,18 +50,18 @@ const getFormControlsPayload = (...controlElements) => { */ const getFormControlPayload = (controlNode) => { switch (controlNode.type) { - case ControlType.COLOR: - case ControlType.EMAIL: - case ControlType.HIDDEN: + case ControlType.TEXT: case ControlType.PASSWORD: - case ControlType.RADIO: + case ControlType.EMAIL: case ControlType.SEARCH: - case ControlType.TEL: - case ControlType.TEXT: case ControlType.URL: - case ControlType.OUTPUT: + case ControlType.TEL: + case ControlType.COLOR: + case ControlType.RADIO: + case ControlType.HIDDEN: case ControlType.TEXTAREA: - case ControlType.SELECT_ONE: { + case ControlType.SELECT_ONE: + case ControlType.OUTPUT: { return getFormControlValue( /** * @type {HTMLInputElement @@ -71,15 +71,6 @@ const getFormControlPayload = (controlNode) => { */ (controlNode), ); } - case ControlType.DATE: - case ControlType.DATETIME_LOCAL: - case ControlType.MONTH: - case ControlType.TIME: - case ControlType.WEEK: { - return getInputDateValue( - /** @type {HTMLInputElement} */ (controlNode), - ); - } case ControlType.NUMBER: case ControlType.RANGE: { return getInputNumericValue( @@ -91,9 +82,13 @@ const getFormControlPayload = (controlNode) => { /** @type {HTMLInputElement} */ (controlNode), ); } - case ControlType.SELECT_MULTIPLE: { - return getMultiSelectValues( - /** @type {HTMLSelectElement} */ (controlNode), + case ControlType.DATE: + case ControlType.TIME: + case ControlType.DATETIME_LOCAL: + case ControlType.MONTH: + case ControlType.WEEK: { + return getInputDateValue( + /** @type {HTMLInputElement} */ (controlNode), ); } case ControlType.FILE: { @@ -101,6 +96,11 @@ const getFormControlPayload = (controlNode) => { /** @type {HTMLInputElement} */ (controlNode), ); } + case ControlType.SELECT_MULTIPLE: { + return getMultiSelectValues( + /** @type {HTMLSelectElement} */ (controlNode), + ); + } case ControlType.FIELDSET: { const elements = [ .../** @type {HTMLFieldSetElement} */ (controlNode).elements, From dcbee56033d1069081f5a0e524847198e17b012a Mon Sep 17 00:00:00 2001 From: what1s1ove Date: Fri, 8 Dec 2023 14:56:22 +0200 Subject: [PATCH 2/4] docs: update examples in readme fp-63 --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 0bec11a..521ebdc 100644 --- a/readme.md +++ b/readme.md @@ -77,14 +77,14 @@ PS. _The library works perfectly with any framework. It doesn't matter which fra | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="month"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="week"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` | ✅ | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null` | -| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | Array<[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)> | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | `Array<`[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)`>` | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="button"` | ❌ | – | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="submit"` | ❌ | – | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="reset"` | ❌ | – | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="image"` | ❌ | – | | [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextareaElement) | – | ✅ | `string` | | [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | – | ✅ | `string` | -| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | `multiple` | ✅ | Array<`string`> | +| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | `multiple` | ✅ | `Array` | | [HTMLOutputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement) | – | ✅ | `string` | | [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | – | ✅ | `Object` (recursive values of nested elements) | | [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | `type="button"` | ❌ | – | From 1402fe373a6b466973c0105d716ac67dda3cd09b Mon Sep 17 00:00:00 2001 From: what1s1ove Date: Fri, 8 Dec 2023 19:10:41 +0200 Subject: [PATCH 3/4] docs: add demos to readme fp-63 --- readme.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 521ebdc..582d2d4 100644 --- a/readme.md +++ b/readme.md @@ -11,6 +11,14 @@ Gets _proper_ form payload – via `form.elements`. npm install form-payload ``` +## Demo + +- [Basic (JavaScript)](https://stackblitz.com/edit/form-payload-basic?file=index.js) +- [Advanced (TypeScript + Validation)](https://stackblitz.com/edit/form-payload-advanced?file=index.ts,get-form-payload.ts) +- [Framework (React + TypeScript)](https://stackblitz.com/edit/form-payload-framework?file=src%2FApp.tsx) + +PS. _The library works perfectly with any framework. It doesn't matter which framework is used; Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement). The same applies to validations and any other libraries. Just create your own wrappers on top of the functions exported by form-payload library._ + ## Usage ```html @@ -29,7 +37,7 @@ npm install form-payload
@@ -46,15 +54,13 @@ npm install form-payload // => { name: 'John', birthday: 'Sat Mar 27 2021 02:00:00 GMT+0200' } }); - mailingFormNode.addEventListener('change', (evt) => { + mailingFormNode.addEventListener('input', (evt) => { const formControlPayload = getFormControlPayload(evt.target); // => 'example@mail.com' }); ``` -PS. _The library works perfectly with any framework. It doesn't matter which framework is used; Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)._ - ## Value Correspondence Table | HTMLElement | Attributes | Included | Value | From 5255692418b502c2ca7b3e3b704d96a99ddf61b3 Mon Sep 17 00:00:00 2001 From: what1s1ove Date: Fri, 8 Dec 2023 19:22:25 +0200 Subject: [PATCH 4/4] docs: edit description in readme fp-63 --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 582d2d4..69f7db1 100644 --- a/readme.md +++ b/readme.md @@ -17,7 +17,7 @@ npm install form-payload - [Advanced (TypeScript + Validation)](https://stackblitz.com/edit/form-payload-advanced?file=index.ts,get-form-payload.ts) - [Framework (React + TypeScript)](https://stackblitz.com/edit/form-payload-framework?file=src%2FApp.tsx) -PS. _The library works perfectly with any framework. It doesn't matter which framework is used; Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement). The same applies to validations and any other libraries. Just create your own wrappers on top of the functions exported by form-payload library._ +PS. _The library works perfectly with any framework. Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement). The same applies to validations and any other libraries. Just create your own wrappers on top of the functions exported by form-payload library._ ## Usage @@ -83,7 +83,7 @@ PS. _The library works perfectly with any framework. It doesn't matter which fra | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="month"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="week"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` | ✅ | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null` | -| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | `Array<`[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)`>` | +| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | Array<[File](https://developer.mozilla.org/en-US/docs/Web/API/File)> | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="button"` | ❌ | – | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="submit"` | ❌ | – | | [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="reset"` | ❌ | – |