@brytdesigns/web-component-form-sync 3.3.1 → 3.3.3

package/dist/esm/index.js

@@ -0,0 +1,151 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
+import { createMemo, createEffect, on, onCleanup } from 'solid-js';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/form-sync.ts
+var form_sync_exports = {};
+__export(form_sync_exports, {
+  Component: () => Component,
+  Name: () => Name
+});
+
+// src/utils.ts
+function handleRadioOrCheckboxChange(form, input) {
+  const element = Array.from(form.elements).find((elem) => {
+    return (
+      //@ts-ignore
+      elem.name === input.name && elem.value === input.value && !elem.checked
+    );
+  });
+  if (!element) return;
+  element.checked = true;
+  element.dispatchEvent(new Event("change", { bubbles: true }));
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+  return true;
+}
+function handleDefaultChange(form, input) {
+  const element = Array.from(form.elements).find(
+    //@ts-ignore
+    (elem) => elem.name === input.name && elem.value !== input.value
+  );
+  if (!element) return;
+  element.value = input.value;
+  element.dispatchEvent(new Event("change", { bubbles: true }));
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+  return true;
+}
+function receiveUpdate(form) {
+  return function(event) {
+    if (event.detail.relatedTarget === form) return;
+    const input = event.detail.changedTarget;
+    if (input.type === "checkbox")
+      return handleRadioOrCheckboxChange(form, input);
+    if (input.type === "radio") return handleRadioOrCheckboxChange(form, input);
+    return handleDefaultChange(form, input);
+  };
+}
+function receiveReset(form) {
+  return function(event) {
+    if (event.detail.relatedForm === form) return;
+    const isReset = Array.from(form.elements).filter(
+      // @ts-ignore
+      (elem) => elem.checked && !elem.hasAttribute("checked")
+    ).length === 0;
+    if (isReset) return;
+    if (typeof form.reset === "function") form.reset();
+    else form.reset.click();
+  };
+}
+
+// src/components/form-sync.ts
+var Name = `form-sync`;
+var Component = (props, { element }) => {
+  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}`)
+  );
+  const UPDATE = createMemo(() => `form.update.${props.name}`);
+  const RESET = createMemo(() => `form.reset.${props.name}`);
+  const handleUpdate = (form2) => (event) => {
+    dispatchEvent(
+      new CustomEvent(UPDATE(), {
+        detail: {
+          relatedTarget: form2,
+          changedTarget: event.target
+        }
+      })
+    );
+  };
+  const handleReset = (form2) => (event) => {
+    setTimeout(() => {
+      dispatchEvent(
+        new CustomEvent(RESET(), {
+          detail: {
+            relatedForm: form2,
+            resetForm: event.target
+          }
+        })
+      );
+    });
+  };
+  createEffect(
+    on(form, (form2) => {
+      if (!form2 || !props.name) return;
+      const controller = new AbortController();
+      const handleFormUpdate = handleUpdate(form2);
+      const handleReceiveUpdate = receiveUpdate(form2);
+      const handleFormReset = handleReset(form2);
+      const handleReceiveReset = receiveReset(form2);
+      element.addEventListener("input", handleFormUpdate, {
+        signal: controller.signal
+      });
+      element.addEventListener("change", handleFormUpdate, {
+        signal: controller.signal
+      });
+      element.addEventListener("reset", handleFormReset, {
+        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
+      });
+      onCleanup(() => {
+        controller.abort("Resetting event listeners");
+      });
+    })
+  );
+};
+
+// src/index.ts
+customShadowlessElement(
+  form_sync_exports.Name,
+  {
+    name: "",
+    formId: "",
+    includedFieldNames: []
+  },
+  correctElementType(form_sync_exports.Component)
+);
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -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\";\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-form-sync",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "Web component for syncing the values of multiple forms",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -19,7 +19,7 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
-    "@brytdesigns/web-component-core": "3.3.1",
+    "@brytdesigns/web-component-core": "3.3.3",
     "component-register": "0.8.7",
     "solid-js": "2.0.0-rc.14"
   },