@brytdesigns/web-component-form-sync 1.0.7 → 1.1.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/dist/esm/index.js +20 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/main/components/form-sync.js +6 -2
- package/dist/main/components/form-sync.js.map +1 -1
- package/dist/main/components/index.js +2 -1
- package/dist/main/index.js +3 -3
- package/dist/main/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
|
-
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
|
|
1
|
+
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
|
|
2
2
|
import { createMemo, createEffect, on, onCleanup } from 'solid-js';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// src/components/form-sync.ts
|
|
11
|
+
var form_sync_exports = {};
|
|
12
|
+
__export(form_sync_exports, {
|
|
13
|
+
Component: () => Component,
|
|
14
|
+
Name: () => Name
|
|
15
|
+
});
|
|
5
16
|
|
|
6
17
|
// src/utils.ts
|
|
7
18
|
function handleRadioOrCheckboxChange(form, input) {
|
|
@@ -52,7 +63,8 @@ function receiveReset(form) {
|
|
|
52
63
|
}
|
|
53
64
|
|
|
54
65
|
// src/components/form-sync.ts
|
|
55
|
-
var
|
|
66
|
+
var Name = `form-sync`;
|
|
67
|
+
var Component = (props, { element }) => {
|
|
56
68
|
if (!props.name && !props.formId) return;
|
|
57
69
|
const form = createMemo(
|
|
58
70
|
() => element.querySelector(`#${props.formId}`)
|
|
@@ -92,6 +104,9 @@ var FormSync = (props, { element }) => {
|
|
|
92
104
|
element.addEventListener("input", handleFormUpdate, {
|
|
93
105
|
signal: controller.signal
|
|
94
106
|
});
|
|
107
|
+
element.addEventListener("change", handleFormUpdate, {
|
|
108
|
+
signal: controller.signal
|
|
109
|
+
});
|
|
95
110
|
element.addEventListener("reset", handleFormReset, {
|
|
96
111
|
signal: controller.signal
|
|
97
112
|
});
|
|
@@ -110,12 +125,12 @@ var FormSync = (props, { element }) => {
|
|
|
110
125
|
|
|
111
126
|
// src/index.ts
|
|
112
127
|
customShadowlessElement(
|
|
113
|
-
|
|
128
|
+
form_sync_exports.Name,
|
|
114
129
|
{
|
|
115
130
|
name: "",
|
|
116
131
|
formId: ""
|
|
117
132
|
},
|
|
118
|
-
correctElementType(
|
|
133
|
+
correctElementType(form_sync_exports.Component)
|
|
119
134
|
);
|
|
120
135
|
//# sourceMappingURL=index.js.map
|
|
121
136
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/
|
|
1
|
+
{"version":3,"sources":["../../src/components/form-sync.ts","../../src/utils.ts","../../src/index.ts"],"names":["form"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, createMemo, on, onCleanup } from \"solid-js\";\n\nimport { receiveUpdate, receiveReset } from \"../utils.js\";\n\ntype FormSyncProps = {\n name: string;\n formId: string;\n};\n\nexport const Name = `form-sync`;\n\nexport const Component: CorrectComponentType<FormSyncProps> = (\n props,\n { element },\n) => {\n if (!props.name && !props.formId) return;\n const form = createMemo(() =>\n element.querySelector<HTMLFormElement>(`#${props.formId}`),\n );\n const UPDATE = createMemo(() => `form.update.${props.name}`);\n const RESET = createMemo(() => `form.reset.${props.name}`);\n\n const handleUpdate = (form: HTMLFormElement) => (event: Event) => {\n dispatchEvent(\n new CustomEvent(UPDATE(), {\n detail: {\n relatedTarget: form,\n changedTarget: event.target,\n },\n }),\n );\n };\n\n const handleReset = (form: HTMLFormElement) => (event: Event) => {\n setTimeout(() => {\n dispatchEvent(\n new CustomEvent(RESET(), {\n detail: {\n relatedForm: form,\n resetForm: event.target,\n },\n }),\n );\n });\n };\n\n createEffect(\n on(form, (form) => {\n if (!form || !props.name) return;\n const controller = new AbortController();\n const handleFormUpdate = handleUpdate(form);\n const handleReceiveUpdate = receiveUpdate(form);\n\n const handleFormReset = handleReset(form);\n const handleReceiveReset = receiveReset(form);\n\n element.addEventListener(\"input\", handleFormUpdate, {\n signal: controller.signal,\n });\n element.addEventListener(\"change\", handleFormUpdate, {\n signal: controller.signal,\n });\n element.addEventListener(\"reset\", handleFormReset, {\n signal: controller.signal,\n });\n\n //@ts-ignore\n addEventListener(UPDATE(), handleReceiveUpdate, {\n signal: controller.signal,\n });\n //@ts-ignore\n addEventListener(RESET(), handleReceiveReset, {\n signal: controller.signal,\n });\n\n onCleanup(() => {\n controller.abort(\"Resetting event listeners\");\n });\n }),\n );\n};\n","export type FormSyncUpdateEvent = CustomEvent<{\n relatedTarget: HTMLFormElement;\n changedTarget: HTMLInputElement;\n}>;\n\nexport type FormSyncResetEvent = CustomEvent<{\n relatedForm: HTMLFormElement;\n resetForm: HTMLFormElement;\n}>;\n\nexport function handleRadioOrCheckboxChange(\n form: HTMLFormElement,\n input: HTMLInputElement\n) {\n const element = Array.from(form.elements).find((elem) => {\n return (\n //@ts-ignore\n elem.name === input.name && elem.value === input.value && !elem.checked\n );\n }) as HTMLInputElement;\n if (!element) return;\n element.checked = true;\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n element.dispatchEvent(new Event(\"input\", { bubbles: true }));\n return true;\n}\n\nexport function handleDefaultChange(\n form: HTMLFormElement,\n input: HTMLInputElement\n) {\n const element = Array.from(form.elements).find(\n //@ts-ignore\n (elem) => elem.name === input.name && elem.value !== input.value\n ) as HTMLInputElement;\n if (!element) return;\n element.value = input.value;\n\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\n element.dispatchEvent(new Event(\"input\", { bubbles: true }));\n return true;\n}\n\nexport function receiveUpdate(form: HTMLFormElement) {\n return function (event: FormSyncUpdateEvent) {\n if (event.detail.relatedTarget === form) return;\n const input = event.detail.changedTarget;\n\n if (input.type === \"checkbox\")\n return handleRadioOrCheckboxChange(form, input);\n if (input.type === \"radio\") return handleRadioOrCheckboxChange(form, input);\n\n return handleDefaultChange(form, input);\n };\n}\n\nexport function receiveReset(form: HTMLFormElement) {\n return function (event: FormSyncResetEvent) {\n if (event.detail.relatedForm === form) return;\n const isReset =\n Array.from(form.elements).filter(\n // @ts-ignore\n (elem) => elem.checked && !elem.hasAttribute(\"checked\")\n ).length === 0;\n\n if (isReset) return;\n\n if (typeof form.reset === \"function\") form.reset();\n // If reset button is present, trigger its click event\n // @ts-ignore\n else form.reset.click();\n };\n}\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { FormSync } from \"./components/index.js\";\n\ncustomShadowlessElement(\n FormSync.Name,\n {\n name: \"\",\n formId: \"\",\n },\n correctElementType(FormSync.Component),\n);\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { createMemo, createEffect, on, onCleanup } from 'solid-js';
|
|
2
2
|
import { receiveUpdate, receiveReset } from '../utils.js';
|
|
3
3
|
|
|
4
|
-
const
|
|
4
|
+
const Name = `form-sync`;
|
|
5
|
+
const Component = (props, { element }) => {
|
|
5
6
|
if (!props.name && !props.formId) return;
|
|
6
7
|
const form = createMemo(
|
|
7
8
|
() => element.querySelector(`#${props.formId}`)
|
|
@@ -41,6 +42,9 @@ const FormSync = (props, { element }) => {
|
|
|
41
42
|
element.addEventListener("input", handleFormUpdate, {
|
|
42
43
|
signal: controller.signal
|
|
43
44
|
});
|
|
45
|
+
element.addEventListener("change", handleFormUpdate, {
|
|
46
|
+
signal: controller.signal
|
|
47
|
+
});
|
|
44
48
|
element.addEventListener("reset", handleFormReset, {
|
|
45
49
|
signal: controller.signal
|
|
46
50
|
});
|
|
@@ -57,6 +61,6 @@ const FormSync = (props, { element }) => {
|
|
|
57
61
|
);
|
|
58
62
|
};
|
|
59
63
|
|
|
60
|
-
export {
|
|
64
|
+
export { Component, Name };
|
|
61
65
|
//# sourceMappingURL=form-sync.js.map
|
|
62
66
|
//# sourceMappingURL=form-sync.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/form-sync.ts"],"names":["form"],"mappings":";;;AAWO,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/form-sync.ts"],"names":["form"],"mappings":";;;AAWO,MAAM,IAAO,GAAA,CAAA,SAAA;AAEb,MAAM,SAAiD,GAAA,CAC5D,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAA,CAAM,IAAQ,IAAA,CAAC,MAAM,MAAQ,EAAA;AAClC,EAAA,MAAM,IAAO,GAAA,UAAA;AAAA,IAAW,MACtB,OAAQ,CAAA,aAAA,CAA+B,CAAI,CAAA,EAAA,KAAA,CAAM,MAAM,CAAE,CAAA;AAAA,GAC3D;AACA,EAAA,MAAM,SAAS,UAAW,CAAA,MAAM,CAAe,YAAA,EAAA,KAAA,CAAM,IAAI,CAAE,CAAA,CAAA;AAC3D,EAAA,MAAM,QAAQ,UAAW,CAAA,MAAM,CAAc,WAAA,EAAA,KAAA,CAAM,IAAI,CAAE,CAAA,CAAA;AAEzD,EAAA,MAAM,YAAe,GAAA,CAACA,KAA0B,KAAA,CAAC,KAAiB,KAAA;AAChE,IAAA,aAAA;AAAA,MACE,IAAI,WAAY,CAAA,MAAA,EAAU,EAAA;AAAA,QACxB,MAAQ,EAAA;AAAA,UACN,aAAeA,EAAAA,KAAAA;AAAA,UACf,eAAe,KAAM,CAAA;AAAA;AACvB,OACD;AAAA,KACH;AAAA,GACF;AAEA,EAAA,MAAM,WAAc,GAAA,CAACA,KAA0B,KAAA,CAAC,KAAiB,KAAA;AAC/D,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,aAAA;AAAA,QACE,IAAI,WAAY,CAAA,KAAA,EAAS,EAAA;AAAA,UACvB,MAAQ,EAAA;AAAA,YACN,WAAaA,EAAAA,KAAAA;AAAA,YACb,WAAW,KAAM,CAAA;AAAA;AACnB,SACD;AAAA,OACH;AAAA,KACD,CAAA;AAAA,GACH;AAEA,EAAA,YAAA;AAAA,IACE,EAAA,CAAG,IAAM,EAAA,CAACA,KAAS,KAAA;AACjB,MAAA,IAAI,CAACA,KAAAA,IAAQ,CAAC,KAAA,CAAM,IAAM,EAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AACvC,MAAM,MAAA,gBAAA,GAAmB,aAAaA,KAAI,CAAA;AAC1C,MAAM,MAAA,mBAAA,GAAsB,cAAcA,KAAI,CAAA;AAE9C,MAAM,MAAA,eAAA,GAAkB,YAAYA,KAAI,CAAA;AACxC,MAAM,MAAA,kBAAA,GAAqB,aAAaA,KAAI,CAAA;AAE5C,MAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,gBAAkB,EAAA;AAAA,QAClD,QAAQ,UAAW,CAAA;AAAA,OACpB,CAAA;AACD,MAAQ,OAAA,CAAA,gBAAA,CAAiB,UAAU,gBAAkB,EAAA;AAAA,QACnD,QAAQ,UAAW,CAAA;AAAA,OACpB,CAAA;AACD,MAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,eAAiB,EAAA;AAAA,QACjD,QAAQ,UAAW,CAAA;AAAA,OACpB,CAAA;AAGD,MAAiB,gBAAA,CAAA,MAAA,IAAU,mBAAqB,EAAA;AAAA,QAC9C,QAAQ,UAAW,CAAA;AAAA,OACpB,CAAA;AAED,MAAiB,gBAAA,CAAA,KAAA,IAAS,kBAAoB,EAAA;AAAA,QAC5C,QAAQ,UAAW,CAAA;AAAA,OACpB,CAAA;AAED,MAAA,SAAA,CAAU,MAAM;AACd,QAAA,UAAA,CAAW,MAAM,2BAA2B,CAAA;AAAA,OAC7C,CAAA;AAAA,KACF;AAAA,GACH;AACF","file":"form-sync.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, createMemo, on, onCleanup } from \"solid-js\";\n\nimport { receiveUpdate, receiveReset } from \"../utils.js\";\n\ntype FormSyncProps = {\n name: string;\n formId: string;\n};\n\nexport const Name = `form-sync`;\n\nexport const Component: CorrectComponentType<FormSyncProps> = (\n props,\n { element },\n) => {\n if (!props.name && !props.formId) return;\n const form = createMemo(() =>\n element.querySelector<HTMLFormElement>(`#${props.formId}`),\n );\n const UPDATE = createMemo(() => `form.update.${props.name}`);\n const RESET = createMemo(() => `form.reset.${props.name}`);\n\n const handleUpdate = (form: HTMLFormElement) => (event: Event) => {\n dispatchEvent(\n new CustomEvent(UPDATE(), {\n detail: {\n relatedTarget: form,\n changedTarget: event.target,\n },\n }),\n );\n };\n\n const handleReset = (form: HTMLFormElement) => (event: Event) => {\n setTimeout(() => {\n dispatchEvent(\n new CustomEvent(RESET(), {\n detail: {\n relatedForm: form,\n resetForm: event.target,\n },\n }),\n );\n });\n };\n\n createEffect(\n on(form, (form) => {\n if (!form || !props.name) return;\n const controller = new AbortController();\n const handleFormUpdate = handleUpdate(form);\n const handleReceiveUpdate = receiveUpdate(form);\n\n const handleFormReset = handleReset(form);\n const handleReceiveReset = receiveReset(form);\n\n element.addEventListener(\"input\", handleFormUpdate, {\n signal: controller.signal,\n });\n element.addEventListener(\"change\", handleFormUpdate, {\n signal: controller.signal,\n });\n element.addEventListener(\"reset\", handleFormReset, {\n signal: controller.signal,\n });\n\n //@ts-ignore\n addEventListener(UPDATE(), handleReceiveUpdate, {\n signal: controller.signal,\n });\n //@ts-ignore\n addEventListener(RESET(), handleReceiveReset, {\n signal: controller.signal,\n });\n\n onCleanup(() => {\n controller.abort(\"Resetting event listeners\");\n });\n }),\n );\n};\n"]}
|
package/dist/main/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
|
|
1
|
+
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
|
|
2
2
|
import { FormSync } from './components/index.js';
|
|
3
3
|
|
|
4
4
|
customShadowlessElement(
|
|
5
|
-
|
|
5
|
+
FormSync.Name,
|
|
6
6
|
{
|
|
7
7
|
name: "",
|
|
8
8
|
formId: ""
|
|
9
9
|
},
|
|
10
|
-
correctElementType(FormSync)
|
|
10
|
+
correctElementType(FormSync.Component)
|
|
11
11
|
);
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,QAAS,CAAA,IAAA;AAAA,EACT;AAAA,IACE,IAAM,EAAA,EAAA;AAAA,IACN,MAAQ,EAAA;AAAA,GACV;AAAA,EACA,kBAAA,CAAmB,SAAS,SAAS;AACvC,CAAA","file":"index.js","sourcesContent":["import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { FormSync } from \"./components/index.js\";\n\ncustomShadowlessElement(\n FormSync.Name,\n {\n name: \"\",\n formId: \"\",\n },\n correctElementType(FormSync.Component),\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-form-sync",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Web component for syncing the values of multiple forms",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"component-register": "^0.8.7",
|
|
23
23
|
"solid-element": "^1.9.1",
|
|
24
24
|
"solid-js": "^1.9.7",
|
|
25
|
-
"@brytdesigns/web-component-
|
|
25
|
+
"@brytdesigns/web-component-core": "1.1.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"dts-bundle-generator": "^9.5.1",
|