@brytdesigns/web-component-form-sync 1.2.5 → 3.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/main/components/form-sync.js +54 -77
- package/dist/main/components/form-sync.js.map +1 -1
- package/dist/main/components/index.js +1 -4
- package/dist/main/index.d.ts +5 -0
- package/dist/main/index.js +10 -12
- package/dist/main/index.js.map +1 -1
- package/dist/main/utils.js +30 -40
- package/dist/main/utils.js.map +1 -1
- package/package.json +7 -8
- package/dist/esm/index.js +0 -151
- package/dist/esm/index.js.map +0 -1
- package/dist/main/components/index.js.map +0 -1
|
@@ -1,80 +1,57 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
signal: controller.signal
|
|
54
|
-
});
|
|
55
|
-
addEventListener(
|
|
56
|
-
UPDATE(),
|
|
57
|
-
(event) => {
|
|
58
|
-
if (props.includedFieldNames && props.includedFieldNames.length) {
|
|
59
|
-
const name = event.detail.changedTarget.name;
|
|
60
|
-
if (name && !props.includedFieldNames.includes(name)) return;
|
|
61
|
-
}
|
|
62
|
-
handleReceiveUpdate(event);
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
signal: controller.signal
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
addEventListener(RESET(), handleReceiveReset, {
|
|
69
|
-
signal: controller.signal
|
|
70
|
-
});
|
|
71
|
-
onCleanup(() => {
|
|
72
|
-
controller.abort("Resetting event listeners");
|
|
73
|
-
});
|
|
74
|
-
})
|
|
75
|
-
);
|
|
1
|
+
import { receiveReset, receiveUpdate } from "../utils.js";
|
|
2
|
+
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
3
|
+
import { createMemo, untrack } from "solid-js";
|
|
4
|
+
//#region src/components/form-sync.ts
|
|
5
|
+
var Name = `form-sync`;
|
|
6
|
+
var Component = (props, { element }) => {
|
|
7
|
+
if (!props.name && !props.formId) return console.warn(`${Name}: component requires either a 'name' or 'formId' prop.`, element);
|
|
8
|
+
const form = createMemo(() => element.querySelector(`#${props.formId}`));
|
|
9
|
+
const UPDATE = createMemo(() => `form.update.${props.name}`);
|
|
10
|
+
const RESET = createMemo(() => `form.reset.${props.name}`);
|
|
11
|
+
const handleUpdate = (form) => (event) => {
|
|
12
|
+
dispatchEvent(new CustomEvent(UPDATE(), { detail: {
|
|
13
|
+
relatedTarget: form,
|
|
14
|
+
changedTarget: event.target
|
|
15
|
+
} }));
|
|
16
|
+
};
|
|
17
|
+
const handleReset = (form) => (event) => {
|
|
18
|
+
setTimeout(() => {
|
|
19
|
+
dispatchEvent(new CustomEvent(RESET(), { detail: {
|
|
20
|
+
relatedForm: form,
|
|
21
|
+
resetForm: event.target
|
|
22
|
+
} }));
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
createGuardedEffect(() => ({
|
|
26
|
+
form: form(),
|
|
27
|
+
name: props.name,
|
|
28
|
+
update: UPDATE(),
|
|
29
|
+
reset: RESET()
|
|
30
|
+
}), ({ form, name, update, reset }) => {
|
|
31
|
+
if (!form || !name) return;
|
|
32
|
+
const controller = new AbortController();
|
|
33
|
+
const handleFormUpdate = handleUpdate(form);
|
|
34
|
+
const handleReceiveUpdate = receiveUpdate(form);
|
|
35
|
+
const handleFormReset = handleReset(form);
|
|
36
|
+
const handleReceiveReset = receiveReset(form);
|
|
37
|
+
element.addEventListener("input", handleFormUpdate, { signal: controller.signal });
|
|
38
|
+
element.addEventListener("change", handleFormUpdate, { signal: controller.signal });
|
|
39
|
+
element.addEventListener("reset", handleFormReset, { signal: controller.signal });
|
|
40
|
+
addEventListener(update, (event) => {
|
|
41
|
+
const included = untrack(() => props.includedFieldNames);
|
|
42
|
+
if (included?.length) {
|
|
43
|
+
const changed = event.detail.changedTarget.name;
|
|
44
|
+
if (changed && !included.includes(changed)) return;
|
|
45
|
+
}
|
|
46
|
+
handleReceiveUpdate(event);
|
|
47
|
+
}, { signal: controller.signal });
|
|
48
|
+
addEventListener(reset, handleReceiveReset, { signal: controller.signal });
|
|
49
|
+
return () => {
|
|
50
|
+
controller.abort("Resetting event listeners");
|
|
51
|
+
};
|
|
52
|
+
});
|
|
76
53
|
};
|
|
77
|
-
|
|
54
|
+
//#endregion
|
|
78
55
|
export { Component, Name };
|
|
79
|
-
|
|
56
|
+
|
|
80
57
|
//# sourceMappingURL=form-sync.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"form-sync.js","names":[],"sources":["../../../src/components/form-sync.ts"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createMemo, untrack } from \"solid-js\";\n\nimport {\n\ttype FormSyncUpdateEvent,\n\treceiveReset,\n\treceiveUpdate,\n} from \"../utils.js\";\n\nexport type Props = {\n\tname: string;\n\tformId: string;\n\tincludedFieldNames: string[];\n};\n\nexport const Name = `form-sync`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tif (!props.name && !props.formId)\n\t\treturn console.warn(\n\t\t\t`${Name}: component requires either a 'name' or 'formId' prop.`,\n\t\t\telement,\n\t\t);\n\tconst form = createMemo(() =>\n\t\telement.querySelector<HTMLFormElement>(`#${props.formId}`),\n\t);\n\tconst UPDATE = createMemo(() => `form.update.${props.name}`);\n\tconst RESET = createMemo(() => `form.reset.${props.name}`);\n\n\tconst handleUpdate = (form: HTMLFormElement) => (event: Event) => {\n\t\tdispatchEvent(\n\t\t\tnew CustomEvent(UPDATE(), {\n\t\t\t\tdetail: {\n\t\t\t\t\trelatedTarget: form,\n\t\t\t\t\tchangedTarget: event.target,\n\t\t\t\t},\n\t\t\t}),\n\t\t);\n\t};\n\n\tconst handleReset = (form: HTMLFormElement) => (event: Event) => {\n\t\tsetTimeout(() => {\n\t\t\tdispatchEvent(\n\t\t\t\tnew CustomEvent(RESET(), {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\trelatedForm: form,\n\t\t\t\t\t\tresetForm: event.target,\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t);\n\t\t});\n\t};\n\n\t// v2 splits `createEffect` into (compute, apply). The compute phase is the\n\t// explicit-dependency list that `on()` used to express, and apply runs\n\t// untracked.\n\t//\n\t// The event names belong in the dependency list, not read from the apply\n\t// phase. They derive from `props.name`, and this component's entire job is\n\t// to pair forms by that name — a listener left registered for the previous\n\t// one is the same defect as `product-variant-input` writing the wrong\n\t// variant, just quieter. The cleanup aborts the old controller, so\n\t// re-running re-registers cleanly.\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tform: form(),\n\t\t\tname: props.name,\n\t\t\tupdate: UPDATE(),\n\t\t\treset: RESET(),\n\t\t}),\n\t\t({ form, name, update, reset }) => {\n\t\t\tif (!form || !name) return;\n\t\t\tconst controller = new AbortController();\n\t\t\tconst handleFormUpdate = handleUpdate(form);\n\t\t\tconst handleReceiveUpdate = receiveUpdate(form);\n\n\t\t\tconst handleFormReset = handleReset(form);\n\t\t\tconst handleReceiveReset = receiveReset(form);\n\n\t\t\telement.addEventListener(\"input\", handleFormUpdate, {\n\t\t\t\tsignal: controller.signal,\n\t\t\t});\n\t\t\telement.addEventListener(\"change\", handleFormUpdate, {\n\t\t\t\tsignal: controller.signal,\n\t\t\t});\n\t\t\telement.addEventListener(\"reset\", handleFormReset, {\n\t\t\t\tsignal: controller.signal,\n\t\t\t});\n\n\t\t\t//@ts-expect-error\n\t\t\taddEventListener(\n\t\t\t\tupdate,\n\t\t\t\t(event: FormSyncUpdateEvent) => {\n\t\t\t\t\t// Read when the event fires, deliberately: the filter should\n\t\t\t\t\t// reflect the attribute as it stands now, not as it stood when\n\t\t\t\t\t// the listener was registered. `untrack` says that rather than\n\t\t\t\t\t// leaving it as a bare read Solid has to guess about.\n\t\t\t\t\tconst included = untrack(() => props.includedFieldNames);\n\t\t\t\t\tif (included?.length) {\n\t\t\t\t\t\tconst changed = event.detail.changedTarget.name;\n\t\t\t\t\t\tif (changed && !included.includes(changed)) return;\n\t\t\t\t\t}\n\t\t\t\t\thandleReceiveUpdate(event);\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t},\n\t\t\t);\n\t\t\t//@ts-expect-error\n\t\t\taddEventListener(reset, handleReceiveReset, {\n\t\t\t\tsignal: controller.signal,\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tcontroller.abort(\"Resetting event listeners\");\n\t\t\t};\n\t\t},\n\t);\n};\n"],"mappings":";;;;AAiBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,IAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,QACzB,OAAO,QAAQ,KACd,GAAG,KAAK,yDACR,OACD;CACD,MAAM,OAAO,iBACZ,QAAQ,cAA+B,IAAI,MAAM,QAAQ,CAC1D;CACA,MAAM,SAAS,iBAAiB,eAAe,MAAM,MAAM;CAC3D,MAAM,QAAQ,iBAAiB,cAAc,MAAM,MAAM;CAEzD,MAAM,gBAAgB,UAA2B,UAAiB;EACjE,cACC,IAAI,YAAY,OAAO,GAAG,EACzB,QAAQ;GACP,eAAe;GACf,eAAe,MAAM;EACtB,EACD,CAAC,CACF;CACD;CAEA,MAAM,eAAe,UAA2B,UAAiB;EAChE,iBAAiB;GAChB,cACC,IAAI,YAAY,MAAM,GAAG,EACxB,QAAQ;IACP,aAAa;IACb,WAAW,MAAM;GAClB,EACD,CAAC,CACF;EACD,CAAC;CACF;CAYA,2BACQ;EACN,MAAM,KAAK;EACX,MAAM,MAAM;EACZ,QAAQ,OAAO;EACf,OAAO,MAAM;CACd,KACC,EAAE,MAAM,MAAM,QAAQ,YAAY;EAClC,IAAI,CAAC,QAAQ,CAAC,MAAM;EACpB,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,mBAAmB,aAAa,IAAI;EAC1C,MAAM,sBAAsB,cAAc,IAAI;EAE9C,MAAM,kBAAkB,YAAY,IAAI;EACxC,MAAM,qBAAqB,aAAa,IAAI;EAE5C,QAAQ,iBAAiB,SAAS,kBAAkB,EACnD,QAAQ,WAAW,OACpB,CAAC;EACD,QAAQ,iBAAiB,UAAU,kBAAkB,EACpD,QAAQ,WAAW,OACpB,CAAC;EACD,QAAQ,iBAAiB,SAAS,iBAAiB,EAClD,QAAQ,WAAW,OACpB,CAAC;EAGD,iBACC,SACC,UAA+B;GAK/B,MAAM,WAAW,cAAc,MAAM,kBAAkB;GACvD,IAAI,UAAU,QAAQ;IACrB,MAAM,UAAU,MAAM,OAAO,cAAc;IAC3C,IAAI,WAAW,CAAC,SAAS,SAAS,OAAO,GAAG;GAC7C;GACA,oBAAoB,KAAK;EAC1B,GACA,EACC,QAAQ,WAAW,OACpB,CACD;EAEA,iBAAiB,OAAO,oBAAoB,EAC3C,QAAQ,WAAW,OACpB,CAAC;EAED,aAAa;GACZ,WAAW,MAAM,2BAA2B;EAC7C;CACD,CACD;AACD"}
|
package/dist/main/index.d.ts
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
import { ICustomElement } from 'component-register';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* `component-register` types `options.element` as a bare `ICustomElement`, but
|
|
7
|
+
* at runtime it is always also an `HTMLElement`. Every component in this repo
|
|
8
|
+
* needs the DOM half.
|
|
9
|
+
*/
|
|
5
10
|
export type CorrectComponentOptions = {
|
|
6
11
|
element: HTMLElement & ICustomElement;
|
|
7
12
|
};
|
package/dist/main/index.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { Component, Name } from "./components/form-sync.js";
|
|
2
|
+
import "./components/index.js";
|
|
3
|
+
import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
|
|
4
|
+
//#region src/index.ts
|
|
5
|
+
customShadowlessElement(Name, {
|
|
6
|
+
name: "",
|
|
7
|
+
formId: "",
|
|
8
|
+
includedFieldNames: []
|
|
9
|
+
}, Component);
|
|
10
|
+
//#endregion
|
|
3
11
|
|
|
4
|
-
customShadowlessElement(
|
|
5
|
-
FormSync.Name,
|
|
6
|
-
{
|
|
7
|
-
name: "",
|
|
8
|
-
formId: "",
|
|
9
|
-
includedFieldNames: []
|
|
10
|
-
},
|
|
11
|
-
correctElementType(FormSync.Component)
|
|
12
|
-
);
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
|
14
12
|
//# sourceMappingURL=index.js.map
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\nimport { FormSync } from \"./components/index.js\";\n\nexport type FormSyncProps = FormSync.Props;\n\ncustomShadowlessElement(\n\tFormSync.Name,\n\t{\n\t\tname: \"\",\n\t\tformId: \"\",\n\t\tincludedFieldNames: [],\n\t},\n\tFormSync.Component,\n);\n"],"mappings":";;;;AAKA,wBACC,MACA;CACC,MAAM;CACN,QAAQ;CACR,oBAAoB,CAAC;AACtB,GACA,SACD"}
|
package/dist/main/utils.js
CHANGED
|
@@ -1,50 +1,40 @@
|
|
|
1
|
+
//#region src/utils.ts
|
|
1
2
|
function handleRadioOrCheckboxChange(form, input) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
11
|
-
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
12
|
-
return true;
|
|
3
|
+
const element = Array.from(form.elements).find((elem) => {
|
|
4
|
+
return elem.name === input.name && elem.value === input.value && !elem.checked;
|
|
5
|
+
});
|
|
6
|
+
if (!element) return;
|
|
7
|
+
element.checked = true;
|
|
8
|
+
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
9
|
+
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
10
|
+
return true;
|
|
13
11
|
}
|
|
14
12
|
function handleDefaultChange(form, input) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
22
|
-
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
23
|
-
return true;
|
|
13
|
+
const element = Array.from(form.elements).find((elem) => elem.name === input.name && elem.value !== input.value);
|
|
14
|
+
if (!element) return;
|
|
15
|
+
element.value = input.value;
|
|
16
|
+
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
17
|
+
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
18
|
+
return true;
|
|
24
19
|
}
|
|
25
20
|
function receiveUpdate(form) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
21
|
+
return (event) => {
|
|
22
|
+
if (event.detail.relatedTarget === form) return;
|
|
23
|
+
const input = event.detail.changedTarget;
|
|
24
|
+
if (input.type === "checkbox") return handleRadioOrCheckboxChange(form, input);
|
|
25
|
+
if (input.type === "radio") return handleRadioOrCheckboxChange(form, input);
|
|
26
|
+
return handleDefaultChange(form, input);
|
|
27
|
+
};
|
|
34
28
|
}
|
|
35
29
|
function receiveReset(form) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
if (isReset) return;
|
|
43
|
-
if (typeof form.reset === "function") form.reset();
|
|
44
|
-
else form.reset.click();
|
|
45
|
-
};
|
|
30
|
+
return (event) => {
|
|
31
|
+
if (event.detail.relatedForm === form) return;
|
|
32
|
+
if (Array.from(form.elements).filter((elem) => elem.checked && !elem.hasAttribute("checked")).length === 0) return;
|
|
33
|
+
if (typeof form.reset === "function") form.reset();
|
|
34
|
+
else form.reset.click();
|
|
35
|
+
};
|
|
46
36
|
}
|
|
47
|
-
|
|
37
|
+
//#endregion
|
|
48
38
|
export { handleDefaultChange, handleRadioOrCheckboxChange, receiveReset, receiveUpdate };
|
|
49
|
-
|
|
39
|
+
|
|
50
40
|
//# sourceMappingURL=utils.js.map
|
package/dist/main/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["export type FormSyncUpdateEvent = CustomEvent<{\n\trelatedTarget: HTMLFormElement;\n\tchangedTarget: HTMLInputElement;\n}>;\n\nexport type FormSyncResetEvent = CustomEvent<{\n\trelatedForm: HTMLFormElement;\n\tresetForm: HTMLFormElement;\n}>;\n\nexport function handleRadioOrCheckboxChange(\n\tform: HTMLFormElement,\n\tinput: HTMLInputElement,\n) {\n\tconst element = Array.from(form.elements).find((elem) => {\n\t\treturn (\n\t\t\t//@ts-expect-error\n\t\t\telem.name === input.name && elem.value === input.value && !elem.checked\n\t\t);\n\t}) as HTMLInputElement;\n\tif (!element) return;\n\telement.checked = true;\n\telement.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\telement.dispatchEvent(new Event(\"input\", { bubbles: true }));\n\treturn true;\n}\n\nexport function handleDefaultChange(\n\tform: HTMLFormElement,\n\tinput: HTMLInputElement,\n) {\n\tconst element = Array.from(form.elements).find(\n\t\t//@ts-expect-error\n\t\t(elem) => elem.name === input.name && elem.value !== input.value,\n\t) as HTMLInputElement;\n\tif (!element) return;\n\telement.value = input.value;\n\n\telement.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\telement.dispatchEvent(new Event(\"input\", { bubbles: true }));\n\treturn true;\n}\n\nexport function receiveUpdate(form: HTMLFormElement) {\n\treturn (event: FormSyncUpdateEvent) => {\n\t\tif (event.detail.relatedTarget === form) return;\n\t\tconst input = event.detail.changedTarget;\n\n\t\tif (input.type === \"checkbox\")\n\t\t\treturn handleRadioOrCheckboxChange(form, input);\n\t\tif (input.type === \"radio\") return handleRadioOrCheckboxChange(form, input);\n\n\t\treturn handleDefaultChange(form, input);\n\t};\n}\n\nexport function receiveReset(form: HTMLFormElement) {\n\treturn (event: FormSyncResetEvent) => {\n\t\tif (event.detail.relatedForm === form) return;\n\t\tconst isReset =\n\t\t\tArray.from(form.elements).filter(\n\t\t\t\t// @ts-expect-error\n\t\t\t\t(elem) => elem.checked && !elem.hasAttribute(\"checked\"),\n\t\t\t).length === 0;\n\n\t\tif (isReset) return;\n\n\t\tif (typeof form.reset === \"function\") form.reset();\n\t\t// If reset button is present, trigger its click event\n\t\t// @ts-expect-error\n\t\telse form.reset.click();\n\t};\n}\n"],"mappings":";AAUA,SAAgB,4BACf,MACA,OACC;CACD,MAAM,UAAU,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,MAAM,SAAS;EACxD,OAEC,KAAK,SAAS,MAAM,QAAQ,KAAK,UAAU,MAAM,SAAS,CAAC,KAAK;CAElE,CAAC;CACD,IAAI,CAAC,SAAS;CACd,QAAQ,UAAU;CAClB,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC5D,QAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CAC3D,OAAO;AACR;AAEA,SAAgB,oBACf,MACA,OACC;CACD,MAAM,UAAU,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,MAExC,SAAS,KAAK,SAAS,MAAM,QAAQ,KAAK,UAAU,MAAM,KAC5D;CACA,IAAI,CAAC,SAAS;CACd,QAAQ,QAAQ,MAAM;CAEtB,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC5D,QAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CAC3D,OAAO;AACR;AAEA,SAAgB,cAAc,MAAuB;CACpD,QAAQ,UAA+B;EACtC,IAAI,MAAM,OAAO,kBAAkB,MAAM;EACzC,MAAM,QAAQ,MAAM,OAAO;EAE3B,IAAI,MAAM,SAAS,YAClB,OAAO,4BAA4B,MAAM,KAAK;EAC/C,IAAI,MAAM,SAAS,SAAS,OAAO,4BAA4B,MAAM,KAAK;EAE1E,OAAO,oBAAoB,MAAM,KAAK;CACvC;AACD;AAEA,SAAgB,aAAa,MAAuB;CACnD,QAAQ,UAA8B;EACrC,IAAI,MAAM,OAAO,gBAAgB,MAAM;EAOvC,IALC,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,QAExB,SAAS,KAAK,WAAW,CAAC,KAAK,aAAa,SAAS,CACvD,CAAC,CAAC,WAAW,GAED;EAEb,IAAI,OAAO,KAAK,UAAU,YAAY,KAAK,MAAM;OAG5C,KAAK,MAAM,MAAM;CACvB;AACD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-form-sync",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "3.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",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"types": "./dist/main/index.d.ts",
|
|
12
|
-
"
|
|
12
|
+
"default": "./dist/main/index.js"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
@@ -19,17 +19,16 @@
|
|
|
19
19
|
"author": "Bryt Designs",
|
|
20
20
|
"license": "ISC",
|
|
21
21
|
"dependencies": {
|
|
22
|
+
"@brytdesigns/web-component-core": "3.1.0",
|
|
22
23
|
"component-register": "0.8.7",
|
|
23
|
-
"solid-
|
|
24
|
-
"solid-js": "^1.9.9",
|
|
25
|
-
"@brytdesigns/web-component-core": "1.1.7"
|
|
24
|
+
"solid-js": "2.0.0-rc.14"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
|
-
"
|
|
29
|
-
"
|
|
27
|
+
"@repo/vite-config": "0.0.0",
|
|
28
|
+
"vite": "^8.2.2"
|
|
30
29
|
},
|
|
31
30
|
"scripts": {
|
|
32
|
-
"build": "
|
|
31
|
+
"build": "vite build",
|
|
33
32
|
"typecheck": "tsc --noEmit"
|
|
34
33
|
}
|
|
35
34
|
}
|
package/dist/esm/index.js
DELETED
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
|
|
2
|
-
import { createMemo, createEffect, on, onCleanup } from 'solid-js';
|
|
3
|
-
|
|
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
|
-
});
|
|
16
|
-
|
|
17
|
-
// src/utils.ts
|
|
18
|
-
function handleRadioOrCheckboxChange(form, input) {
|
|
19
|
-
const element = Array.from(form.elements).find((elem) => {
|
|
20
|
-
return (
|
|
21
|
-
//@ts-ignore
|
|
22
|
-
elem.name === input.name && elem.value === input.value && !elem.checked
|
|
23
|
-
);
|
|
24
|
-
});
|
|
25
|
-
if (!element) return;
|
|
26
|
-
element.checked = true;
|
|
27
|
-
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
28
|
-
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
29
|
-
return true;
|
|
30
|
-
}
|
|
31
|
-
function handleDefaultChange(form, input) {
|
|
32
|
-
const element = Array.from(form.elements).find(
|
|
33
|
-
//@ts-ignore
|
|
34
|
-
(elem) => elem.name === input.name && elem.value !== input.value
|
|
35
|
-
);
|
|
36
|
-
if (!element) return;
|
|
37
|
-
element.value = input.value;
|
|
38
|
-
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
39
|
-
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
40
|
-
return true;
|
|
41
|
-
}
|
|
42
|
-
function receiveUpdate(form) {
|
|
43
|
-
return function(event) {
|
|
44
|
-
if (event.detail.relatedTarget === form) return;
|
|
45
|
-
const input = event.detail.changedTarget;
|
|
46
|
-
if (input.type === "checkbox")
|
|
47
|
-
return handleRadioOrCheckboxChange(form, input);
|
|
48
|
-
if (input.type === "radio") return handleRadioOrCheckboxChange(form, input);
|
|
49
|
-
return handleDefaultChange(form, input);
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function receiveReset(form) {
|
|
53
|
-
return function(event) {
|
|
54
|
-
if (event.detail.relatedForm === form) return;
|
|
55
|
-
const isReset = Array.from(form.elements).filter(
|
|
56
|
-
// @ts-ignore
|
|
57
|
-
(elem) => elem.checked && !elem.hasAttribute("checked")
|
|
58
|
-
).length === 0;
|
|
59
|
-
if (isReset) return;
|
|
60
|
-
if (typeof form.reset === "function") form.reset();
|
|
61
|
-
else form.reset.click();
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// src/components/form-sync.ts
|
|
66
|
-
var Name = `form-sync`;
|
|
67
|
-
var Component = (props, { element }) => {
|
|
68
|
-
if (!props.name && !props.formId)
|
|
69
|
-
return console.warn(
|
|
70
|
-
`${Name}: component requires either a 'name' or 'formId' prop.`,
|
|
71
|
-
element
|
|
72
|
-
);
|
|
73
|
-
const form = createMemo(
|
|
74
|
-
() => element.querySelector(`#${props.formId}`)
|
|
75
|
-
);
|
|
76
|
-
const UPDATE = createMemo(() => `form.update.${props.name}`);
|
|
77
|
-
const RESET = createMemo(() => `form.reset.${props.name}`);
|
|
78
|
-
const handleUpdate = (form2) => (event) => {
|
|
79
|
-
dispatchEvent(
|
|
80
|
-
new CustomEvent(UPDATE(), {
|
|
81
|
-
detail: {
|
|
82
|
-
relatedTarget: form2,
|
|
83
|
-
changedTarget: event.target
|
|
84
|
-
}
|
|
85
|
-
})
|
|
86
|
-
);
|
|
87
|
-
};
|
|
88
|
-
const handleReset = (form2) => (event) => {
|
|
89
|
-
setTimeout(() => {
|
|
90
|
-
dispatchEvent(
|
|
91
|
-
new CustomEvent(RESET(), {
|
|
92
|
-
detail: {
|
|
93
|
-
relatedForm: form2,
|
|
94
|
-
resetForm: event.target
|
|
95
|
-
}
|
|
96
|
-
})
|
|
97
|
-
);
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
createEffect(
|
|
101
|
-
on(form, (form2) => {
|
|
102
|
-
if (!form2 || !props.name) return;
|
|
103
|
-
const controller = new AbortController();
|
|
104
|
-
const handleFormUpdate = handleUpdate(form2);
|
|
105
|
-
const handleReceiveUpdate = receiveUpdate(form2);
|
|
106
|
-
const handleFormReset = handleReset(form2);
|
|
107
|
-
const handleReceiveReset = receiveReset(form2);
|
|
108
|
-
element.addEventListener("input", handleFormUpdate, {
|
|
109
|
-
signal: controller.signal
|
|
110
|
-
});
|
|
111
|
-
element.addEventListener("change", handleFormUpdate, {
|
|
112
|
-
signal: controller.signal
|
|
113
|
-
});
|
|
114
|
-
element.addEventListener("reset", handleFormReset, {
|
|
115
|
-
signal: controller.signal
|
|
116
|
-
});
|
|
117
|
-
addEventListener(
|
|
118
|
-
UPDATE(),
|
|
119
|
-
(event) => {
|
|
120
|
-
if (props.includedFieldNames && props.includedFieldNames.length) {
|
|
121
|
-
const name = event.detail.changedTarget.name;
|
|
122
|
-
if (name && !props.includedFieldNames.includes(name)) return;
|
|
123
|
-
}
|
|
124
|
-
handleReceiveUpdate(event);
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
signal: controller.signal
|
|
128
|
-
}
|
|
129
|
-
);
|
|
130
|
-
addEventListener(RESET(), handleReceiveReset, {
|
|
131
|
-
signal: controller.signal
|
|
132
|
-
});
|
|
133
|
-
onCleanup(() => {
|
|
134
|
-
controller.abort("Resetting event listeners");
|
|
135
|
-
});
|
|
136
|
-
})
|
|
137
|
-
);
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
// src/index.ts
|
|
141
|
-
customShadowlessElement(
|
|
142
|
-
form_sync_exports.Name,
|
|
143
|
-
{
|
|
144
|
-
name: "",
|
|
145
|
-
formId: "",
|
|
146
|
-
includedFieldNames: []
|
|
147
|
-
},
|
|
148
|
-
correctElementType(form_sync_exports.Component)
|
|
149
|
-
);
|
|
150
|
-
//# sourceMappingURL=index.js.map
|
|
151
|
-
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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\";\r\n\r\nimport { createEffect, createMemo, on, onCleanup } from \"solid-js\";\r\n\r\nimport {\r\n\treceiveUpdate,\r\n\treceiveReset,\r\n\ttype FormSyncUpdateEvent,\r\n} from \"../utils.js\";\r\n\r\nexport type Props = {\r\n\tname: string;\r\n\tformId: string;\r\n\tincludedFieldNames: string[];\r\n};\r\n\r\nexport const Name = `form-sync`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\r\n\tif (!props.name && !props.formId)\r\n\t\treturn console.warn(\r\n\t\t\t`${Name}: component requires either a 'name' or 'formId' prop.`,\r\n\t\t\telement,\r\n\t\t);\r\n\tconst form = createMemo(() =>\r\n\t\telement.querySelector<HTMLFormElement>(`#${props.formId}`),\r\n\t);\r\n\tconst UPDATE = createMemo(() => `form.update.${props.name}`);\r\n\tconst RESET = createMemo(() => `form.reset.${props.name}`);\r\n\r\n\tconst handleUpdate = (form: HTMLFormElement) => (event: Event) => {\r\n\t\tdispatchEvent(\r\n\t\t\tnew CustomEvent(UPDATE(), {\r\n\t\t\t\tdetail: {\r\n\t\t\t\t\trelatedTarget: form,\r\n\t\t\t\t\tchangedTarget: event.target,\r\n\t\t\t\t},\r\n\t\t\t}),\r\n\t\t);\r\n\t};\r\n\r\n\tconst handleReset = (form: HTMLFormElement) => (event: Event) => {\r\n\t\tsetTimeout(() => {\r\n\t\t\tdispatchEvent(\r\n\t\t\t\tnew CustomEvent(RESET(), {\r\n\t\t\t\t\tdetail: {\r\n\t\t\t\t\t\trelatedForm: form,\r\n\t\t\t\t\t\tresetForm: event.target,\r\n\t\t\t\t\t},\r\n\t\t\t\t}),\r\n\t\t\t);\r\n\t\t});\r\n\t};\r\n\r\n\tcreateEffect(\r\n\t\ton(form, (form) => {\r\n\t\t\tif (!form || !props.name) return;\r\n\t\t\tconst controller = new AbortController();\r\n\t\t\tconst handleFormUpdate = handleUpdate(form);\r\n\t\t\tconst handleReceiveUpdate = receiveUpdate(form);\r\n\r\n\t\t\tconst handleFormReset = handleReset(form);\r\n\t\t\tconst handleReceiveReset = receiveReset(form);\r\n\r\n\t\t\telement.addEventListener(\"input\", handleFormUpdate, {\r\n\t\t\t\tsignal: controller.signal,\r\n\t\t\t});\r\n\t\t\telement.addEventListener(\"change\", handleFormUpdate, {\r\n\t\t\t\tsignal: controller.signal,\r\n\t\t\t});\r\n\t\t\telement.addEventListener(\"reset\", handleFormReset, {\r\n\t\t\t\tsignal: controller.signal,\r\n\t\t\t});\r\n\r\n\t\t\t//@ts-ignore\r\n\t\t\taddEventListener(\r\n\t\t\t\tUPDATE(),\r\n\t\t\t\t(event: FormSyncUpdateEvent) => {\r\n\t\t\t\t\tif (props.includedFieldNames && props.includedFieldNames.length) {\r\n\t\t\t\t\t\tconst name = event.detail.changedTarget.name;\r\n\t\t\t\t\t\tif (name && !props.includedFieldNames.includes(name)) return;\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleReceiveUpdate(event);\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tsignal: controller.signal,\r\n\t\t\t\t},\r\n\t\t\t);\r\n\t\t\t//@ts-ignore\r\n\t\t\taddEventListener(RESET(), handleReceiveReset, {\r\n\t\t\t\tsignal: controller.signal,\r\n\t\t\t});\r\n\r\n\t\t\tonCleanup(() => {\r\n\t\t\t\tcontroller.abort(\"Resetting event listeners\");\r\n\t\t\t});\r\n\t\t}),\r\n\t);\r\n};\r\n","export type FormSyncUpdateEvent = CustomEvent<{\r\n relatedTarget: HTMLFormElement;\r\n changedTarget: HTMLInputElement;\r\n}>;\r\n\r\nexport type FormSyncResetEvent = CustomEvent<{\r\n relatedForm: HTMLFormElement;\r\n resetForm: HTMLFormElement;\r\n}>;\r\n\r\nexport function handleRadioOrCheckboxChange(\r\n form: HTMLFormElement,\r\n input: HTMLInputElement\r\n) {\r\n const element = Array.from(form.elements).find((elem) => {\r\n return (\r\n //@ts-ignore\r\n elem.name === input.name && elem.value === input.value && !elem.checked\r\n );\r\n }) as HTMLInputElement;\r\n if (!element) return;\r\n element.checked = true;\r\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n element.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n return true;\r\n}\r\n\r\nexport function handleDefaultChange(\r\n form: HTMLFormElement,\r\n input: HTMLInputElement\r\n) {\r\n const element = Array.from(form.elements).find(\r\n //@ts-ignore\r\n (elem) => elem.name === input.name && elem.value !== input.value\r\n ) as HTMLInputElement;\r\n if (!element) return;\r\n element.value = input.value;\r\n\r\n element.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n element.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n return true;\r\n}\r\n\r\nexport function receiveUpdate(form: HTMLFormElement) {\r\n return function (event: FormSyncUpdateEvent) {\r\n if (event.detail.relatedTarget === form) return;\r\n const input = event.detail.changedTarget;\r\n\r\n if (input.type === \"checkbox\")\r\n return handleRadioOrCheckboxChange(form, input);\r\n if (input.type === \"radio\") return handleRadioOrCheckboxChange(form, input);\r\n\r\n return handleDefaultChange(form, input);\r\n };\r\n}\r\n\r\nexport function receiveReset(form: HTMLFormElement) {\r\n return function (event: FormSyncResetEvent) {\r\n if (event.detail.relatedForm === form) return;\r\n const isReset =\r\n Array.from(form.elements).filter(\r\n // @ts-ignore\r\n (elem) => elem.checked && !elem.hasAttribute(\"checked\")\r\n ).length === 0;\r\n\r\n if (isReset) return;\r\n\r\n if (typeof form.reset === \"function\") form.reset();\r\n // If reset button is present, trigger its click event\r\n // @ts-ignore\r\n else form.reset.click();\r\n };\r\n}\r\n","import {\r\n\tcustomShadowlessElement,\r\n\tcorrectElementType,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\nimport { FormSync } from \"./components/index.js\";\r\n\r\nexport type FormSyncProps = FormSync.Props;\r\n\r\ncustomShadowlessElement(\r\n\tFormSync.Name,\r\n\t{\r\n\t\tname: \"\",\r\n\t\tformId: \"\",\r\n\t\tincludedFieldNames: [],\r\n\t},\r\n\tcorrectElementType(FormSync.Component),\r\n);\r\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|