@brytdesigns/web-component-form-sync 1.2.4 → 1.2.5
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.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
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 +1 @@
|
|
|
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"]}
|
|
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\";\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"]}
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
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 {\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"]}
|
package/dist/main/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAUO,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","file":"utils.js","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAUO,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","file":"utils.js","sourcesContent":["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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-form-sync",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
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.9",
|
|
25
|
-
"@brytdesigns/web-component-core": "1.1.
|
|
25
|
+
"@brytdesigns/web-component-core": "1.1.7"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"dts-bundle-generator": "^9.5.1",
|