@optionfactory/ful 1.0.1 → 1.0.3

package/dist/ful.iife.js

@@ -491,6 +491,7 @@ var ful = (function (exports, ftl) {
         param(k, ...vs) {
             if (vs.length === 0 || vs[0] === null || vs[0] === undefined) {
                 this.#params.delete(k);
+                return this;
             }
             for (const v of vs) {
                 this.#params.append(k, v);
@@ -949,6 +950,65 @@ var ful = (function (exports, ftl) {
         }
     }
 
+    class AsyncEvents {
+        static async fireAsync(el, evt) {
+            el.dispatchEvent(evt);
+            return await evt.async?.promise;
+        }
+        /**
+         * 
+         * @param {*} el 
+         * @param {*} type 
+         * @param {*} fn returning the result
+         * @param {*} options 
+         * @returns 
+         */
+        static asyncOn(el, type, fn, options) {
+            const listener = async (event) => {
+                let resolve, reject;
+                const promise = new Promise((res, rej) => {
+                    resolve = res;
+                    reject = rej;
+                });
+                event.async = { promise };
+                try {
+                    //@ts-ignore
+                    resolve(await fn(event));
+                } catch (e) {
+                    //@ts-ignore
+                    reject(e);
+                }
+            };
+            el.addEventListener(type, listener, options);
+            return listener;
+        }
+        /**
+         * 
+         * @param {*} el 
+         * @param {*} type 
+         * @param {*} listener the listener returned by asyncOn
+         * @param {*} options 
+         */ 
+        static asyncOff(el, type, listener, options) {
+            el.removeEventListener(type, listener, options);
+        }
+        static mixInto(...classes) {
+            for (const k of classes) {
+                Object.assign(k.prototype, {
+                    async fireAsync(evt) {
+                        return await AsyncEvents.fireAsync(this, evt);
+                    },
+                    asyncOn(type, fn, options) {
+                        return AsyncEvents.asyncOn(this, type, fn, options);
+                    },
+                    asyncOff(type, listener, options) {
+                        return AsyncEvents.asyncOff(this, type, listener, options);
+                    }
+                });
+            }
+        }
+    }
+
     const timing = {
         sleep(ms) {
             return new Promise(resolve => setTimeout(resolve, ms));
@@ -1243,8 +1303,8 @@ var ful = (function (exports, ftl) {
         async prepare(values, form) {
             return await this.#requestMapper(values, form);
         }
-        async submit(values, form) {
-            return values;
+        async submit(values, form, response) {
+            return response;
         }
         async transform(response, form) {
             return await this.#responseMapper(response, form);
@@ -1286,13 +1346,17 @@ var ful = (function (exports, ftl) {
             try {
                 const loader = Loaders.fromAttributes(this, 'loaders:form');
                 const values = this.values;
-                const request = await loader.prepare(values, this);
-                const se = new CustomEvent('submit', { bubbles: true, cancelable: true, detail: { values, request } });
-                if (!this.dispatchEvent(se)) {
-                    return;
-                }
+                let request = await loader.prepare(values, this);
                 try {
-                    const response = await loader.submit(se.detail.request, this);
+                    const se = new CustomEvent('submit', { bubbles: true, cancelable: true, detail: { values, request } });
+                    if (!this.dispatchEvent(se)) {
+                        return;
+                    }
+                    const sre = new CustomEvent('submit:requested', { bubbles: true, cancelable: false, detail: { values: se.detail.values, request: se.detail.request} });
+                    let response = await AsyncEvents.fireAsync(this, sre);
+                    request = sre.detail.request;
+
+                    response = await loader.submit(request, this, response);
                     const mapped = await loader.transform(response, this);
                     this.dispatchEvent(new CustomEvent('submit:success', { bubbles: true, cancelable: false, detail: { values, request, response: mapped } }));
                 } catch (e) {
@@ -1300,12 +1364,13 @@ var ful = (function (exports, ftl) {
                     if (e instanceof Failure) {
                         this.errors = e.problems;
                     }
-                    throw e;
+                    console.warn("failed to submit form", this, "reason:", e);
                 }
             } finally {
                 this.spinner(false);
             }
         }
+
         spinner(spin) {
             this.querySelectorAll('ful-spinner').forEach(el => {
                 const hel = /** @type HTMLElement */ (el);
@@ -2578,6 +2643,7 @@ var ful = (function (exports, ftl) {
         }
     }
 
+    exports.AsyncEvents = AsyncEvents;
     exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
     exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
     exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;