feat: use form-data-utils to get form data

README.md

@@ -10,7 +10,7 @@ A modern, accessible, and extensible component library for Ember.js, built with
 
 ## 🚀 Features
 
-- _Fully Customizable_ – Uses Tailwind Variants for styling.
+- _Fully Customizable_ – Uses Tailwind CSS with Tailwind Variants for styling.
 - _Accessible Components_ – Follows best practices for a11y.
 - _Composable & Extensible_ – Designed to be customized and extended to fit any design system.
 - _Built for Ember_ – Seamless integration with Ember Octane & Glimmer components.

packages/forms/package.json

@@ -60,7 +60,8 @@
     "@frontile/theme": "workspace:0.17.0-beta.10",
     "@frontile/utilities": "workspace:0.17.0-beta.10",
     "@glint/template": "1.5.2",
-    "ember-modifier": "^4.1.0"
+    "ember-modifier": "^4.1.0",
+    "form-data-utils": "^0.6.0"
   },
   "devDependencies": {
     "@babel/core": "7.26.7",

packages/forms/src/components/form.gts

@@ -1,8 +1,8 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
+import { dataFrom } from 'form-data-utils';
 
-type FormDataEntryValue = NonNullable<ReturnType<FormData['get']>>;
-type FormResultData = Record<string, FormDataEntryValue>;
+type FormResultData = ReturnType<typeof dataFrom>;
 
 interface FormSignature {
   Element: HTMLFormElement;
@@ -25,24 +25,7 @@ class Form extends Component<FormSignature> {
   ) => {
     const form = event.currentTarget;
     if (form instanceof HTMLFormElement) {
-      let formData = new FormData(form);
-
-      for (let i = 0; i < form.elements.length; i++) {
-        const element = form.elements[i] as HTMLSelectElement;
-        if (element.type === 'select-multiple') {
-          const selectedValues = [];
-          for (let j = 0; j < element.options.length; j++) {
-            const option = element.options[j];
-            if (option && option.selected) {
-              selectedValues.push(option.value);
-            }
-          }
-          formData.append(element.name, selectedValues.join(','));
-        }
-      }
-
-      let data = Object.fromEntries(formData.entries());
-
+      const data = dataFrom(event);
       this.args.onChange(data, eventType, event);
     }
   };