@brytdesigns/web-component-form-sync 1.1.4 → 1.2.1

package/dist/esm/index.js

@@ -65,7 +65,11 @@ function receiveReset(form) {
 // src/components/form-sync.ts
 var Name = `form-sync`;
 var Component = (props, { element }) => {
-  if (!props.name && !props.formId) return;
+  if (!props.name && !props.formId)
+    return console.warn(
+      `${Name}: component requires either a 'name' or 'formId' prop.`,
+      element
+    );
   const form = createMemo(
     () => element.querySelector(`#${props.formId}`)
   );
@@ -110,9 +114,19 @@ var Component = (props, { element }) => {
       element.addEventListener("reset", handleFormReset, {
         signal: controller.signal
       });
-      addEventListener(UPDATE(), handleReceiveUpdate, {
-        signal: controller.signal
-      });
+      addEventListener(
+        UPDATE(),
+        (event) => {
+          if (props.includedFieldNames && props.includedFieldNames.length) {
+            const name = event.detail.changedTarget.name;
+            if (name && !props.includedFieldNames.includes(name)) return;
+          }
+          handleReceiveUpdate(event);
+        },
+        {
+          signal: controller.signal
+        }
+      );
       addEventListener(RESET(), handleReceiveReset, {
         signal: controller.signal
       });
@@ -128,7 +142,8 @@ customShadowlessElement(
   form_sync_exports.Name,
   {
     name: "",
-    formId: ""
+    formId: "",
+    includedFieldNames: []
   },
   correctElementType(form_sync_exports.Component)
 );

package/dist/esm/index.js.map

@@ -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 { 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"]}
+{"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;;;ADxDO,IAAM,IAAO,GAAA,CAAA,SAAA,CAAA;AAEb,IAAM,SAAiD,GAAA,CAC7D,KACA,EAAA,EAAE,SACE,KAAA;AACJ,EAAA,IAAI,CAAC,KAAA,CAAM,IAAQ,IAAA,CAAC,KAAM,CAAA,MAAA;AACzB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACd,GAAG,IAAI,CAAA,sDAAA,CAAA;AAAA,MACP;AAAA,KACD;AACD,EAAA,MAAM,IAAO,GAAA,UAAA;AAAA,IAAW,MACvB,OAAQ,CAAA,aAAA,CAA+B,CAAI,CAAA,EAAA,KAAA,CAAM,MAAM,CAAE,CAAA;AAAA,GAC1D;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;AACjE,IAAA,aAAA;AAAA,MACC,IAAI,WAAY,CAAA,MAAA,EAAU,EAAA;AAAA,QACzB,MAAQ,EAAA;AAAA,UACP,aAAeA,EAAAA,KAAAA;AAAA,UACf,eAAe,KAAM,CAAA;AAAA;AACtB,OACA;AAAA,KACF;AAAA,GACD;AAEA,EAAA,MAAM,WAAc,GAAA,CAACA,KAA0B,KAAA,CAAC,KAAiB,KAAA;AAChE,IAAA,UAAA,CAAW,MAAM;AAChB,MAAA,aAAA;AAAA,QACC,IAAI,WAAY,CAAA,KAAA,EAAS,EAAA;AAAA,UACxB,MAAQ,EAAA;AAAA,YACP,WAAaA,EAAAA,KAAAA;AAAA,YACb,WAAW,KAAM,CAAA;AAAA;AAClB,SACA;AAAA,OACF;AAAA,KACA,CAAA;AAAA,GACF;AAEA,EAAA,YAAA;AAAA,IACC,EAAA,CAAG,IAAM,EAAA,CAACA,KAAS,KAAA;AAClB,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,QACnD,QAAQ,UAAW,CAAA;AAAA,OACnB,CAAA;AACD,MAAQ,OAAA,CAAA,gBAAA,CAAiB,UAAU,gBAAkB,EAAA;AAAA,QACpD,QAAQ,UAAW,CAAA;AAAA,OACnB,CAAA;AACD,MAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,eAAiB,EAAA;AAAA,QAClD,QAAQ,UAAW,CAAA;AAAA,OACnB,CAAA;AAGD,MAAA,gBAAA;AAAA,QACC,MAAO,EAAA;AAAA,QACP,CAAC,KAA+B,KAAA;AAC/B,UAAA,IAAI,KAAM,CAAA,kBAAA,IAAsB,KAAM,CAAA,kBAAA,CAAmB,MAAQ,EAAA;AAChE,YAAM,MAAA,IAAA,GAAO,KAAM,CAAA,MAAA,CAAO,aAAc,CAAA,IAAA;AACxC,YAAA,IAAI,QAAQ,CAAC,KAAA,CAAM,kBAAmB,CAAA,QAAA,CAAS,IAAI,CAAG,EAAA;AAAA;AAEvD,UAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,SAC1B;AAAA,QACA;AAAA,UACC,QAAQ,UAAW,CAAA;AAAA;AACpB,OACD;AAEA,MAAiB,gBAAA,CAAA,KAAA,IAAS,kBAAoB,EAAA;AAAA,QAC7C,QAAQ,UAAW,CAAA;AAAA,OACnB,CAAA;AAED,MAAA,SAAA,CAAU,MAAM;AACf,QAAA,UAAA,CAAW,MAAM,2BAA2B,CAAA;AAAA,OAC5C,CAAA;AAAA,KACD;AAAA,GACF;AACD,CAAA;;;AE/FA,uBAAA;AAAA,EACC,iBAAS,CAAA,IAAA;AAAA,EACT;AAAA,IACC,IAAM,EAAA,EAAA;AAAA,IACN,MAAQ,EAAA,EAAA;AAAA,IACR,oBAAoB;AAAC,GACtB;AAAA,EACA,kBAAA,CAAmB,kBAAS,SAAS;AACtC,CAAA","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\ntype FormSyncProps = {\n\tname: string;\n\tformId: string;\n\tincludedFieldNames: string[];\n};\n\nexport const Name = `form-sync`;\n\nexport const Component: CorrectComponentType<FormSyncProps> = (\n\tprops,\n\t{ element },\n) => {\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\ncustomShadowlessElement(\n\tFormSync.Name,\n\t{\n\t\tname: \"\",\n\t\tformId: \"\",\n\t\tincludedFieldNames: [],\n\t},\n\tcorrectElementType(FormSync.Component),\n);\n"]}

package/dist/main/components/form-sync.js

@@ -3,7 +3,11 @@ import { receiveUpdate, receiveReset } from '../utils.js';
 
 const Name = `form-sync`;
 const Component = (props, { element }) => {
-  if (!props.name && !props.formId) return;
+  if (!props.name && !props.formId)
+    return console.warn(
+      `${Name}: component requires either a 'name' or 'formId' prop.`,
+      element
+    );
   const form = createMemo(
     () => element.querySelector(`#${props.formId}`)
   );
@@ -48,9 +52,19 @@ const Component = (props, { element }) => {
       element.addEventListener("reset", handleFormReset, {
         signal: controller.signal
       });
-      addEventListener(UPDATE(), handleReceiveUpdate, {
-        signal: controller.signal
-      });
+      addEventListener(
+        UPDATE(),
+        (event) => {
+          if (props.includedFieldNames && props.includedFieldNames.length) {
+            const name = event.detail.changedTarget.name;
+            if (name && !props.includedFieldNames.includes(name)) return;
+          }
+          handleReceiveUpdate(event);
+        },
+        {
+          signal: controller.signal
+        }
+      );
       addEventListener(RESET(), handleReceiveReset, {
         signal: controller.signal
       });

package/dist/main/components/form-sync.js.map

@@ -1 +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"]}
+{"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\ntype FormSyncProps = {\n\tname: string;\n\tformId: string;\n\tincludedFieldNames: string[];\n};\n\nexport const Name = `form-sync`;\n\nexport const Component: CorrectComponentType<FormSyncProps> = (\n\tprops,\n\t{ element },\n) => {\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.js

@@ -5,7 +5,8 @@ customShadowlessElement(
   FormSync.Name,
   {
     name: "",
-    formId: ""
+    formId: "",
+    includedFieldNames: []
   },
   correctElementType(FormSync.Component)
 );

package/dist/main/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,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\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

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-form-sync",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "Web component for syncing the values of multiple forms",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",