@brytdesigns/web-component-form-sync 1.2.0 → 1.2.2
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
CHANGED
|
@@ -76,10 +76,6 @@ var Component = (props, { element }) => {
|
|
|
76
76
|
const UPDATE = createMemo(() => `form.update.${props.name}`);
|
|
77
77
|
const RESET = createMemo(() => `form.reset.${props.name}`);
|
|
78
78
|
const handleUpdate = (form2) => (event) => {
|
|
79
|
-
if (props.includedFieldNames && props.includedFieldNames.length) {
|
|
80
|
-
const name = event.target.getAttribute("name");
|
|
81
|
-
if (name && !props.includedFieldNames.includes(name)) return;
|
|
82
|
-
}
|
|
83
79
|
dispatchEvent(
|
|
84
80
|
new CustomEvent(UPDATE(), {
|
|
85
81
|
detail: {
|
|
@@ -109,26 +105,28 @@ var Component = (props, { element }) => {
|
|
|
109
105
|
const handleReceiveUpdate = receiveUpdate(form2);
|
|
110
106
|
const handleFormReset = handleReset(form2);
|
|
111
107
|
const handleReceiveReset = receiveReset(form2);
|
|
112
|
-
element.addEventListener(
|
|
113
|
-
"input",
|
|
114
|
-
(event) => handleFormUpdate(event),
|
|
115
|
-
{
|
|
116
|
-
signal: controller.signal
|
|
117
|
-
}
|
|
118
|
-
);
|
|
119
|
-
element.addEventListener(
|
|
120
|
-
"change",
|
|
121
|
-
(event) => handleFormUpdate(event),
|
|
122
|
-
{
|
|
123
|
-
signal: controller.signal
|
|
124
|
-
}
|
|
125
|
-
);
|
|
126
|
-
element.addEventListener("reset", handleFormReset, {
|
|
108
|
+
element.addEventListener("input", handleFormUpdate, {
|
|
127
109
|
signal: controller.signal
|
|
128
110
|
});
|
|
129
|
-
addEventListener(
|
|
111
|
+
element.addEventListener("change", handleFormUpdate, {
|
|
130
112
|
signal: controller.signal
|
|
131
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
|
+
);
|
|
132
130
|
addEventListener(RESET(), handleReceiveReset, {
|
|
133
131
|
signal: controller.signal
|
|
134
132
|
});
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/form-sync.ts","../../src/utils.ts","../../src/index.ts"],"names":["form"],"mappings":";;;;;;;;;;AAAA,IAAA,iBAAA,GAAA,EAAA;AAAA,QAAA,CAAA,iBAAA,EAAA;AAAA,EAAA,SAAA,EAAA,MAAA,SAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA;;;ACUO,SAAS,2BAAA,CACd,MACA,KACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,MAAM,IAAK,CAAA,IAAA,CAAK,QAAQ,CAAE,CAAA,IAAA,CAAK,CAAC,IAAS,KAAA;AACvD,IAAA;AAAA;AAAA,MAEE,IAAA,CAAK,SAAS,KAAM,CAAA,IAAA,IAAQ,KAAK,KAAU,KAAA,KAAA,CAAM,KAAS,IAAA,CAAC,IAAK,CAAA;AAAA;AAAA,GAEnE,CAAA;AACD,EAAA,IAAI,CAAC,OAAS,EAAA;AACd,EAAA,OAAA,CAAQ,OAAU,GAAA,IAAA;AAClB,EAAQ,OAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,QAAA,EAAU,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAC5D,EAAQ,OAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,OAAA,EAAS,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAC3D,EAAO,OAAA,IAAA;AACT;AAEO,SAAS,mBAAA,CACd,MACA,KACA,EAAA;AACA,EAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAK,QAAQ,CAAE,CAAA,IAAA;AAAA;AAAA,IAExC,CAAC,SAAS,IAAK,CAAA,IAAA,KAAS,MAAM,IAAQ,IAAA,IAAA,CAAK,UAAU,KAAM,CAAA;AAAA,GAC7D;AACA,EAAA,IAAI,CAAC,OAAS,EAAA;AACd,EAAA,OAAA,CAAQ,QAAQ,KAAM,CAAA,KAAA;AAEtB,EAAQ,OAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,QAAA,EAAU,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAC5D,EAAQ,OAAA,CAAA,aAAA,CAAc,IAAI,KAAM,CAAA,OAAA,EAAS,EAAE,OAAS,EAAA,IAAA,EAAM,CAAC,CAAA;AAC3D,EAAO,OAAA,IAAA;AACT;AAEO,SAAS,cAAc,IAAuB,EAAA;AACnD,EAAA,OAAO,SAAU,KAA4B,EAAA;AAC3C,IAAI,IAAA,KAAA,CAAM,MAAO,CAAA,aAAA,KAAkB,IAAM,EAAA;AACzC,IAAM,MAAA,KAAA,GAAQ,MAAM,MAAO,CAAA,aAAA;AAE3B,IAAA,IAAI,MAAM,IAAS,KAAA,UAAA;AACjB,MAAO,OAAA,2BAAA,CAA4B,MAAM,KAAK,CAAA;AAChD,IAAA,IAAI,MAAM,IAAS,KAAA,OAAA,EAAgB,OAAA,2BAAA,CAA4B,MAAM,KAAK,CAAA;AAE1E,IAAO,OAAA,mBAAA,CAAoB,MAAM,KAAK,CAAA;AAAA,GACxC;AACF;AAEO,SAAS,aAAa,IAAuB,EAAA;AAClD,EAAA,OAAO,SAAU,KAA2B,EAAA;AAC1C,IAAI,IAAA,KAAA,CAAM,MAAO,CAAA,WAAA,KAAgB,IAAM,EAAA;AACvC,IAAA,MAAM,OACJ,GAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAK,QAAQ,CAAE,CAAA,MAAA;AAAA;AAAA,MAExB,CAAC,IAAS,KAAA,IAAA,CAAK,WAAW,CAAC,IAAA,CAAK,aAAa,SAAS;AAAA,MACtD,MAAW,KAAA,CAAA;AAEf,IAAA,IAAI,OAAS,EAAA;AAEb,IAAA,IAAI,OAAO,IAAA,CAAK,KAAU,KAAA,UAAA,OAAiB,KAAM,EAAA;AAAA,SAG5C,IAAA,CAAK,MAAM,KAAM,EAAA;AAAA,GACxB;AACF;;;
|
|
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 {\n\treceiveUpdate,\n\treceiveReset,\n\ttype FormSyncUpdateEvent,\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\tcreateEffect(\n\t\ton(form, (form) => {\n\t\t\tif (!form || !props.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-ignore\n\t\t\taddEventListener(\n\t\t\t\tUPDATE(),\n\t\t\t\t(event: FormSyncUpdateEvent) => {\n\t\t\t\t\tif (props.includedFieldNames && props.includedFieldNames.length) {\n\t\t\t\t\t\tconst name = event.detail.changedTarget.name;\n\t\t\t\t\t\tif (name && !props.includedFieldNames.includes(name)) 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-ignore\n\t\t\taddEventListener(RESET(), handleReceiveReset, {\n\t\t\t\tsignal: controller.signal,\n\t\t\t});\n\n\t\t\tonCleanup(() => {\n\t\t\t\tcontroller.abort(\"Resetting event listeners\");\n\t\t\t});\n\t\t}),\n\t);\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\tcustomShadowlessElement,\n\tcorrectElementType,\n} 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\tcorrectElementType(FormSync.Component),\n);\n"]}
|
|
@@ -14,10 +14,6 @@ const Component = (props, { element }) => {
|
|
|
14
14
|
const UPDATE = createMemo(() => `form.update.${props.name}`);
|
|
15
15
|
const RESET = createMemo(() => `form.reset.${props.name}`);
|
|
16
16
|
const handleUpdate = (form2) => (event) => {
|
|
17
|
-
if (props.includedFieldNames && props.includedFieldNames.length) {
|
|
18
|
-
const name = event.target.getAttribute("name");
|
|
19
|
-
if (name && !props.includedFieldNames.includes(name)) return;
|
|
20
|
-
}
|
|
21
17
|
dispatchEvent(
|
|
22
18
|
new CustomEvent(UPDATE(), {
|
|
23
19
|
detail: {
|
|
@@ -47,26 +43,28 @@ const Component = (props, { element }) => {
|
|
|
47
43
|
const handleReceiveUpdate = receiveUpdate(form2);
|
|
48
44
|
const handleFormReset = handleReset(form2);
|
|
49
45
|
const handleReceiveReset = receiveReset(form2);
|
|
50
|
-
element.addEventListener(
|
|
51
|
-
"input",
|
|
52
|
-
(event) => handleFormUpdate(event),
|
|
53
|
-
{
|
|
54
|
-
signal: controller.signal
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
element.addEventListener(
|
|
58
|
-
"change",
|
|
59
|
-
(event) => handleFormUpdate(event),
|
|
60
|
-
{
|
|
61
|
-
signal: controller.signal
|
|
62
|
-
}
|
|
63
|
-
);
|
|
64
|
-
element.addEventListener("reset", handleFormReset, {
|
|
46
|
+
element.addEventListener("input", handleFormUpdate, {
|
|
65
47
|
signal: controller.signal
|
|
66
48
|
});
|
|
67
|
-
addEventListener(
|
|
49
|
+
element.addEventListener("change", handleFormUpdate, {
|
|
68
50
|
signal: controller.signal
|
|
69
51
|
});
|
|
52
|
+
element.addEventListener("reset", handleFormReset, {
|
|
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
|
+
);
|
|
70
68
|
addEventListener(RESET(), handleReceiveReset, {
|
|
71
69
|
signal: controller.signal
|
|
72
70
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/form-sync.ts"],"names":["form"],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/form-sync.ts"],"names":["form"],"mappings":"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","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 {\n\treceiveUpdate,\n\treceiveReset,\n\ttype FormSyncUpdateEvent,\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\tcreateEffect(\n\t\ton(form, (form) => {\n\t\t\tif (!form || !props.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-ignore\n\t\t\taddEventListener(\n\t\t\t\tUPDATE(),\n\t\t\t\t(event: FormSyncUpdateEvent) => {\n\t\t\t\t\tif (props.includedFieldNames && props.includedFieldNames.length) {\n\t\t\t\t\t\tconst name = event.detail.changedTarget.name;\n\t\t\t\t\t\tif (name && !props.includedFieldNames.includes(name)) 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-ignore\n\t\t\taddEventListener(RESET(), handleReceiveReset, {\n\t\t\t\tsignal: controller.signal,\n\t\t\t});\n\n\t\t\tonCleanup(() => {\n\t\t\t\tcontroller.abort(\"Resetting event listeners\");\n\t\t\t});\n\t\t}),\n\t);\n};\n"]}
|
package/dist/main/index.d.ts
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
1
|
// Generated by dts-bundle-generator v9.5.1
|
|
2
2
|
|
|
3
|
+
import { ICustomElement } from 'component-register';
|
|
4
|
+
|
|
5
|
+
export type CorrectComponentOptions = {
|
|
6
|
+
element: HTMLElement & ICustomElement;
|
|
7
|
+
};
|
|
8
|
+
export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
|
|
9
|
+
export type Props = {
|
|
10
|
+
name: string;
|
|
11
|
+
formId: string;
|
|
12
|
+
includedFieldNames: string[];
|
|
13
|
+
};
|
|
14
|
+
declare const Name = "form-sync";
|
|
15
|
+
declare const Component: CorrectComponentType<Props>;
|
|
16
|
+
export type FormSyncProps = FormSync.Props;
|
|
17
|
+
|
|
18
|
+
declare namespace FormSync {
|
|
19
|
+
export { Component, Name, Props };
|
|
20
|
+
}
|
|
21
|
+
|
|
3
22
|
export {};
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAQA,uBAAA;AAAA,EACC,QAAS,CAAA,IAAA;AAAA,EACT;AAAA,IACC,IAAM,EAAA,EAAA;AAAA,IACN,MAAQ,EAAA,EAAA;AAAA,IACR,oBAAoB;AAAC,GACtB;AAAA,EACA,kBAAA,CAAmB,SAAS,SAAS;AACtC,CAAA","file":"index.js","sourcesContent":["import {\n\tcustomShadowlessElement,\n\tcorrectElementType,\n} 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\tcorrectElementType(FormSync.Component),\n);\n"]}
|
package/package.json
CHANGED