feat: form events (#359)

Co-authored-by: salihuDickson <salihudickson@gmail.com>
Co-authored-by: Salihu <91833785+SalihuDickson@users.noreply.github.com>

apps/documentation/pages/design/_meta.json

@@ -1,6 +1,5 @@
 {
   "introduction": "Introduction",
   "installation": "Installation",
-  "components": "Design (UI) components",
-  "utilities": "Utilities"
+  "components": "Design (UI) components"
 }

packages/ecc-utils-design/demo/form/index.html

@@ -245,6 +245,9 @@
                 .error({ message: "Error fetching data" });
             }
           }}
+          @ecc-utils-change=${(e) => {
+            console.log("form - changed", e.detail);
+          }}
         >
         </ecc-utils-design-form> `,
         document.querySelector("#demo")

packages/ecc-utils-design/package.json

@@ -15,8 +15,7 @@
     "./dist/index.js": "./dist/index.js",
     "./dist/components/*": "./dist/components/*",
     "./dist/react": "./dist/react/index.js",
-    "./dist/react/*": "./dist/react/*",
-    "./dist/utilities/*": "./dist/utilities/*"
+    "./dist/react/*": "./dist/react/*"
   },
   "type": "module",
   "repository": {

packages/ecc-utils-design/src/components/form/form.ts

@@ -93,6 +93,19 @@ export default class EccUtilsDesignForm extends LitElement {
     }
   }
 
+  private alertFieldChange(key: string, value: any) {
+    this.dispatchEvent(
+      new CustomEvent("ecc-utils-change", {
+        detail: {
+          key,
+          value,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private renderSwitchTemplate(field: Field, path: string): TemplateResult {
     if (field.type !== "switch") return html``;
 
@@ -127,8 +140,10 @@ export default class EccUtilsDesignForm extends LitElement {
           ?required=${field.fieldOptions?.required}
           ?checked=${_.get(this.form, path)}
           @sl-change=${(e: Event) => {
-            _.set(this.form, path, (e.target as HTMLInputElement).checked);
+            const value = (e.target as HTMLInputElement).checked;
+            _.set(this.form, path, value);
             this.requestUpdate();
+            this.alertFieldChange(field.key, value);
           }}
         >
         </sl-switch>
@@ -176,6 +191,7 @@ export default class EccUtilsDesignForm extends LitElement {
               const { files } = e.target as HTMLInputElement;
               _.set(this.form, path, files);
               this.requestUpdate();
+              this.alertFieldChange(field.key, files);
             }}
           />
         </div>
@@ -216,9 +232,11 @@ export default class EccUtilsDesignForm extends LitElement {
             value=${_.get(this.form, path)?.label || ""}
             @sl-change=${(e: Event) => {
               const selectElement = e.target as HTMLSelectElement;
-              const label = selectElement.selectedOptions[0].textContent;
+              const label =
+                selectElement.selectedOptions[0].textContent?.trim();
               _.set(this.form, path, label);
               this.requestUpdate();
+              this.alertFieldChange(field.key, label);
             }}
           >
             ${field.selectOptions?.map(
@@ -247,8 +265,8 @@ export default class EccUtilsDesignForm extends LitElement {
           } else {
             _.set(this.form, path, value);
           }
-
           this.requestUpdate();
+          this.alertFieldChange(field.key, value);
         }}
       >
         <label slot="label">

packages/ecc-utils-design/src/index.ts

@@ -1,5 +1,4 @@
 import "./components/index.js";
 import "./events/index.js";
-import "./utilities/index.js";
 
 export * from "./components/index.js";

scripts/build.js

@@ -120,7 +120,6 @@ nextTask("Building source", async () => {
         ignore: ["**/tests/**"],
       })),
       ...(await fg(normalizePath(`${sourceDir}/react/**/*.ts`))),
-      ...(await fg(normalizePath(`${sourceDir}/utilities/**/*.ts`))),
     ],
     splitting: true,
     treeshake: true,