@optionfactory/ful 0.34.0 → 0.36.0

package/dist/ful.mjs

@@ -70,38 +70,6 @@ class Hex {
     }
 }
 
-const Observable = (SuperClass) => class extends SuperClass {
-    constructor(...args) {
-        super(...args);
-        this.listeners = {};
-    }
-    fireSync(event, data, initialAcc) {
-        const listeners = this.listeners[event] || [];
-        let acc = initialAcc;
-        for (const l of listeners) {
-            acc = l(data, this, acc);
-        }
-        return acc;
-    }
-    async fire(event, data, initialAcc) {
-        const listeners = this.listeners[event] || [];
-        let acc = initialAcc;
-        for (const l of listeners) {
-            acc = await l(data, this, acc);
-        }
-        return acc;
-    }
-    on(event, listener) {
-        this.listeners[event] = this.listeners[event] || [];
-        this.listeners[event].push(listener);
-    }
-    un(event, listener) {
-        const listeners = this.listeners[event] || [];
-        const idx = listeners.indexOf(listener);
-        return idx === -1 ? [] : listeners.splice(idx, 1);
-    }    
-};
-
 class ContextInterceptor {
     constructor() {
         const context = document.querySelector("meta[name='context']").getAttribute("content");
@@ -727,35 +695,14 @@ const Stateful = (SuperClass, flags, others) => {
     };
 };
 
-class FieldError extends Templated(HTMLElement) {
-    render(slotted, template) {
-        this.classList.add('invalid-feedback');
-    }
-    static configure() {
-        customElements.define('ful-field-error', FieldError);
-    }
-}
-
-class Errors extends Templated(HTMLElement) {
-    render(slotted, template) {
-        this.classList.add('alert', 'alert-danger', 'd-none');
-    }
-    static configure() {
-        customElements.define('ful-errors', Errors);
-    }
-
-}
-
 /* global Infinity, CSS */
 
-class Form extends Templated(Observable(HTMLElement)) {
-    constructor({ mutators, extractors, valueHoldersSelector, ignoredChildrenSelector }) {
-        super();
-        this.mutators = mutators || {};
-        this.extractors = extractors || {};
-        this.valueHoldersSelector = valueHoldersSelector || '[name]';
-        this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none, [hidden]';
-    }
+class Form extends Templated(HTMLElement) {
+    static MUTATORS = {};
+    static EXTRACTORS = {};
+    static VALUE_HOLDERS_SELECTOR = '[name]';
+    static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
+
     render(slotted, template) {
         const form = document.createElement('form');
         form.append(slotted.default);
@@ -763,7 +710,9 @@ class Form extends Templated(Observable(HTMLElement)) {
             e.preventDefault();
             this.spinner(true);
             try {
-                await this.fire('submit', this.getValues(), this);
+                if(this.submitter) {
+                    await this.submitter(this.getValues(), this);
+                }
             } catch (e) {
                 if (e instanceof Failure) {
                     this.setErrors(e.problems);
@@ -790,20 +739,20 @@ class Form extends Templated(Observable(HTMLElement)) {
                 continue;
             }
             Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
-                Form.mutate(this.mutators, el, values[k], k, values);
+                Form.mutate(Form.MUTATORS, el, values[k], k, values);
             });
         }
     }
     getValues() {
-        return Array.from(this.querySelectorAll(this.valueHoldersSelector))
+        return Array.from(this.querySelectorAll(Form.VALUE_HOLDERS_SELECTOR))
             .filter((el) => {
                 if (el.dataset['fulBindInclude'] === 'never') {
                     return false;
                 }
-                return el.dataset['fulBindInclude'] === 'always' || el.closest(this.ignoredChildrenSelector) === null;
+                return el.dataset['fulBindInclude'] === 'always' || el.closest(Form.IGNORED_CHILDREN_SELECTOR) === null;
             })
             .reduce((result, el) => {
-                return Form.providePath(result, el.getAttribute('name'), Form.extract(this.extractors, el));
+                return Form.providePath(result, el.getAttribute('name'), Form.extract(Form.EXTRACTORS, el));
             }, {});
     }
     setErrors(errors, scroll) {
@@ -812,13 +761,10 @@ class Form extends Templated(Observable(HTMLElement)) {
             .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
             .forEach((e) => {
                 const name = e.context.replace("[", ".").replace("].", ".");
+                //TODO: match [name=] ful-validation-target and [name=]:not(:has(ful-validation-target))
+                //
                 this.querySelectorAll(`[name='${CSS.escape(name)}']`)
-                    .forEach(input => {
-                        input.classList.add('is-invalid');
-                        if (input.parentElement.classList.contains("form-floating")) {
-                            input.parentElement.classList.add('is-invalid');
-                        }
-                    });
+                    .forEach(input => input.classList.add('is-invalid'));
                 this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
                     .forEach(el => el.innerText = e.reason);
             });
@@ -827,14 +773,14 @@ class Form extends Templated(Observable(HTMLElement)) {
                 const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
                 el.innerHTML = globalErrors.map(e => e.reason).join("\n");
                 if (globalErrors.length !== 0) {
-                    el.classList.remove('d-none');
+                    el.removeAttribute('hidden');
                 }
             });
 
         if (!scroll) {
             return;
         }
-        const ys = Array.from(this.querySelectorAll('ful-field-error:not(.d-none)'))
+        const ys = Array.from(this.querySelectorAll('ful-field-error'))
             .map(el => el.getBoundingClientRect().y + window.scrollY);
         const miny = Math.min(...ys);
         if (miny !== Infinity) {
@@ -842,12 +788,12 @@ class Form extends Templated(Observable(HTMLElement)) {
         }
     }
     clearErrors() {
-        this.querySelectorAll('[name].is-invalid, .form-floating.is-invalid')
+        this.querySelectorAll('.is-invalid')
             .forEach(el => el.classList.remove('is-invalid'));
         this.querySelectorAll("ful-errors")
             .forEach(el => {
                 el.innerHTML = '';
-                el.classList.add('d-none');
+                el.setAttribute('hidden', '');
             });
     }
     static extract(extractors, el) {
@@ -867,9 +813,6 @@ class Form extends Templated(Observable(HTMLElement)) {
         if (el.dataset['fulBindType'] === 'boolean') {
             return !el.value ? null : el.value === 'true';
         }
-        if (el.getValue) {
-            return el.getValue();
-        }
         return el.value || null;
     }
     static mutate(mutators, el, raw, key, values) {
@@ -886,10 +829,6 @@ class Form extends Templated(Observable(HTMLElement)) {
             el.checked = raw;
             return;
         }
-        if (el.setValue) {
-            el.setValue(raw);
-            return;
-        }
         el.value = raw;
     }
 
@@ -933,35 +872,19 @@ const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({
 });
 
 const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHtml(`
-    <div data-tpl-if="floating" class="input-group has-validation">
+    <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
+    <div class="input-group">
         <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
         <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
-        <div class="form-floating">
-            {{{{ slotted.input }}}} 
-            <label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
-        </div>
+        {{{{ slotted.input }}}} 
         <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
         <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
-        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-    </div>
-    <div data-tpl-if="!floating" data-tpl-remove="tag">
-        <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
-        <div class="input-group has-validation">
-            <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
-            <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
-            {{{{ slotted.input }}}} 
-            <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
-            <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
-            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-        </div>
     </div>
+    <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
 `, ful_input_ec);
 
-
-
 class Input extends Templated(HTMLElement, ful_input_template_) {
     render(slotted, template) {
-        const floating = this.hasAttribute('floating');
         const input = slotted.input = slotted.input || (() => {
             const el = document.createElement("input");
             el.classList.add("form-control");
@@ -973,7 +896,7 @@ class Input extends Templated(HTMLElement, ful_input_template_) {
         Attributes.defaultValue(slotted.input, "type", "text");
         Attributes.defaultValue(slotted.input, "placeholder", " ");
         const name = input.getAttribute('name');
-        return template.render({ id, name, floating, slotted });
+        return template.render({ id, name, slotted });
     }
     static configure() {
         customElements.define('ful-input', Input);
@@ -989,28 +912,16 @@ const ful_select_ec = globalThis.ec || ftl.EvaluationContext.configure({
 });
 
 const ful_select_template_ = globalThis.ful_select_template || ftl.Template.fromHtml(`
-    <div data-tpl-if="floating" class="input-group has-validation">
+    <label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
+    {{{{ input }}}}
+    <div class="input-group">
         <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
         <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
-        <div class="form-floating">
-            {{{{ slotted.input }}}} 
-            <label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
-        </div>
+        {{{{ slotted.input }}}} 
         <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
         <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
-        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-    </div>
-    <div data-tpl-if="!floating" data-tpl-remove="tag">
-        <label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
-        <div class="input-group has-validation">
-            <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
-            <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
-            {{{{ slotted.input }}}} 
-            <div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
-            <span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
-            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
-        </div>
     </div>
+    <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
 `, ful_select_ec);
 
 
@@ -1020,8 +931,6 @@ class Select extends Templated(HTMLElement, ful_select_template_) {
         this.tsConfig = tsConfig;
     }
     render(slotted, template) {
-        const floating = this.hasAttribute('floating');
-
         const type = this.getAttribute("type") || 'local';
         const remote = type != 'local';
         const loadOnce = this.getAttribute('load') != 'always';
@@ -1030,6 +939,7 @@ class Select extends Templated(HTMLElement, ful_select_template_) {
             return document.createElement("select");
         })();
         const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-select');
+        const tsId = `${id}-ts-control`;
         Attributes.forward('input-', this, input);
         Attributes.defaultValue(input, "id", id);
         Attributes.defaultValue(input, "placeholder", " ");
@@ -1049,31 +959,42 @@ class Select extends Templated(HTMLElement, ful_select_template_) {
             }
         };
 
+
+        this._remote = remote;
+        // we need to await this load in setValue when remote is configured and the option
+        // is not loaded yet.
+        // tomselect settings.load does not retun a promise as it wraps the configured load function
+        // with a debouncer
+        this._unwrappedRemoteLoad = async (query, callback) => {
+
+            if (!remote || remote && loadOnce && this.loaded) {
+                callback();
+                return;
+            }
+            const type = query && query.hasOwnProperty('byId') ? 'id' : 'query';
+            const qvalue = type === 'id' ? query.byId : query;
+            const data = await (this.loader ? this.loader(qvalue, type) : []);
+            if(type !== 'id'){
+                this.loaded = true;
+            }
+            callback(data);
+        };
+
+
         this.ts = new TomSelect(input, Object.assign(remote ? {
             preload: 'focus',
-            load: async (query, callback) => {
-                if (!remote || remote && loadOnce && this.loaded) {
-                    callback();
-                    return;
-                }
-                const data = await this.load(query);
-                this.loaded = true;
-                callback(data);
-            },
-            shouldLoad: (query) => this.shouldLoad(query)
+            load: this._unwrappedRemoteLoad,
+            shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
         } : {}, tsDefaultConfig, this.tsConfig));
+        console.log("ts created");
+        //we remove the input to move it
+        input.remove();
 
-        return template.render({ id, name, floating, slotted });
-    }
-    shouldLoad(q){
-        return true;
-    }
-    load(q){
-        return []
+        return template.render({ id, tsId, name, input, slotted });
     }
     async setValue(v) {
-        if (!this.loaded) {
-            await this.ts.load();
+        if(this._remote){
+            await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
         }
         this.ts.setValue(v);
     }
@@ -1244,31 +1165,5 @@ class Wizard extends HTMLElement {
     }
 }
 
-class App {
-    constructor() {
-        this.configurers = [];
-        this.initializers = [];
-        this.handlers = [];
-        this.running = false;
-        document.addEventListener("DOMContentLoaded", async () => {
-            await Promise.all(this.configurers);
-            await Promise.all(this.initializers.map(h => Promise.resolve(h())));
-            await Promise.all(this.handlers.map(h => Promise.resolve(h())));
-        });
-    }
-    configure(cb) {
-        this.configurers.push(Promise.resolve(cb()));
-        return this;
-    }
-    initialize(cb) {
-        this.initializers.push(cb);
-        return this;
-    }
-    ready(cb) {
-        this.handlers.push(cb);
-        return this;
-    }
-}
-
-export { App, Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Errors, Failure, FieldError, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Observable, RadioGroup, Select, SessionStorage, Slots, Spinner, Stateful, Templated, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, RadioGroup, Select, SessionStorage, Slots, Spinner, Stateful, Templated, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, timing };
 //# sourceMappingURL=ful.mjs.map