@esportsplus/ui 0.35.8 → 0.35.9

package/package.json

@@ -42,7 +42,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.35.8",
+  "version": "0.35.9",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/form/action.ts

@@ -1,15 +1,9 @@
 import response, { Response } from '@esportsplus/action';
-import { html, Attributes, Element } from '@esportsplus/template';
+import { html, Attributes, Element, Renderable } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import input from './input';
 
 
-type A = {
-    action: (data: { input: Record<string, any>, response: typeof response }) => (Promise<Errors> | Errors),
-    state?: { processing: boolean }
-} & Attributes;
-
 type Errors = { errors: Response<unknown>['errors'] };
 
 
@@ -46,59 +40,63 @@ function parse(input: ReturnType<FormData['entries']>) {
 };
 
 
-export default template.factory<A>(
-    (attributes, content) => {
-        let { action, state } = attributes;
-
-        return html`
-            <form
-                ${omit(attributes, OMIT)}
-                ${{
-                    onclick: function(event) {
-                        let trigger = event.target as HTMLButtonElement;
-
-                        if (trigger?.type !== 'submit') {
-                            return;
-                        }
-
-                        // On initial page load both events will be dispatched without preventDefault
-                        event.preventDefault();
+export default <T extends Record<string, any>>(
+    attributes: {
+        action: (data: { input: T, response: typeof response }) => (Promise<Errors> | Errors),
+        state?: { processing: boolean }
+    } & Attributes,
+    content: Renderable<any>
+) => {
+    let { action, state } = attributes;
+
+    return html`
+        <form
+            ${omit(attributes, OMIT)}
+            ${{
+                onclick: function(event) {
+                    let trigger = event.target as HTMLButtonElement;
+
+                    if (trigger?.type !== 'submit') {
+                        return;
+                    }
 
-                        this.dispatchEvent(
-                            new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
-                        );
-                    },
-                    onsubmit: async function(event) {
-                        event.preventDefault();
+                    // On initial page load both events will be dispatched without preventDefault
+                    event.preventDefault();
 
-                        if (state) {
-                            state.processing = true;
-                        }
+                    this.dispatchEvent(
+                        new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
+                    );
+                },
+                onsubmit: async function(event) {
+                    event.preventDefault();
 
-                        let { errors } = await action({
-                            input: parse( new FormData( this as any as HTMLFormElement ).entries() ),
-                            response
-                        });
+                    if (state) {
+                        state.processing = true;
+                    }
 
-                        for (let i = 0, n = errors.length; i < n; i++) {
-                            let { message, path } = errors[i],
-                                reactive = input.get( (this as any as HTMLFormElement)[path!] as Element | undefined );
+                    let { errors } = await action({
+                        input: parse( new FormData( this as any as HTMLFormElement ).entries() ) as T,
+                        response
+                    });
 
-                            if (!reactive) {
-                                continue;
-                            }
+                    for (let i = 0, n = errors.length; i < n; i++) {
+                        let { message, path } = errors[i],
+                            reactive = input.get( (this as any as HTMLFormElement)[path!] as Element | undefined );
 
-                            reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+                        if (!reactive) {
+                            continue;
                         }
 
-                        if (state) {
-                            state.processing = false;
-                        }
+                        reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
                     }
-                }}
-            >
-                ${content}
-            </form>
-        `;
-    }
-);
+
+                    if (state) {
+                        state.processing = false;
+                    }
+                }
+            }}
+        >
+            ${content}
+        </form>
+    `;
+};