From dc8de338c49910114c8bdaec5f52d3da6ca23091 Mon Sep 17 00:00:00 2001 From: Vladyslav Zubko <42296182+what1s1ove@users.noreply.github.com> Date: Fri, 8 Dec 2023 19:18:08 +0200 Subject: [PATCH] docs: prettify readme fp-63 (#82) * docs: update examples in readme fp-63 * docs: update examples in readme fp-63 * docs: add demos to readme fp-63 --- eslint.config.js | 6 + readme.md | 152 +++++++----------- src/libs/enums/control-type.enum.js | 49 +++--- .../get-form-control-payload.js | 40 ++--- 4 files changed, 116 insertions(+), 131 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..582d2d4 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 @@ -11,119 +11,89 @@ Gets form-payload (or payload for a named form field) - 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 -
- -
- Friend - -
-... -
-``` - -```js -// index.js -import { getFormPayload, getFormControlPayload } from 'form-payload'; - -const { general: generalFormNode, mailing: mailingFormNode } = document.forms; - -generalFormNode.addEventListener('submit', (evt) => { - evt.preventDefault(); - - console.log(getFormPayload(generalFormNode)); - // { - // name: 'Jon', - // birthday: Sat Mar 27 2021 18:06:42 GMT+0200 (Eastern European Standard Time), - // friendsCount: 1, - // friend: { - // friendName: 'Kate', - // }, - // } -}); - -mailingFormNode.addEventListener('change', (evt) => { - console.log(getFormControlPayload(evt.target)); - // 'example@mail.com' -}); -``` -## With Frameworks + ``` -## MIT Licensed +## 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` | +| [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,