@optionfactory/ful 0.71.0 → 0.73.0

package/dist/ful.mjs

@@ -566,40 +566,6 @@ class Deferred {
     }
 }
 
-// SyncEvent.on($0, 'asd', async e => { await ful.timing.sleep(10_000); return 3; })
-// const success = await new SyncEvent("asd").dispatchTo($0);
-class SyncEvent extends CustomEvent {
-    #promises;
-    #results;
-    constructor(type, options) {
-        super(type, {...options, cancelable: true});
-        this.#promises = [];
-        this.#results = [];
-    }
-    get results(){
-        return this.#results;
-    }
-
-    async dispatchTo(el) {
-        // unlike "native" events, which are fired by the browser and invoke 
-        // event handlers asynchronously via the event loop, dispatchEvent() 
-        // invokes event handlers synchronously. 
-        // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
-        el.dispatchEvent(this);
-        //we ignore the result of dispatchEvent and use defaultPrevented instead
-        //because handlers can be async
-        this.#results = await Promise.all(this.#promises);
-        return !this.defaultPrevented;
-    }
-
-    static on(el, type, h, useCapture) {
-        el.addEventListener(type, e => {
-            //e *must* be an async event
-            e.#promises.push(h(e));
-        }, useCapture);
-    }
-}
-
 class Fragments {
     /**
      * 
@@ -607,11 +573,9 @@ class Fragments {
      * @returns 
      */
     static fromHtml(...html) {
-        const el = document.createElement("div");
+        const el = document.createElement("template");
         el.innerHTML = html.join("");
-        const fragment = new DocumentFragment();
-        fragment.append(...el.childNodes);
-        return fragment;
+        return el.content;
     }
     /**
      * 
@@ -619,9 +583,9 @@ class Fragments {
      * @returns 
      */
     static toHtml(fragment) {
-        var r = document.createElement("div");
-        r.appendChild(fragment);
-        return r.innerHTML;
+        var el = document.createElement("template");
+        el.content.appendChild(fragment);
+        return el.innerHTML;
     }
     /**
      * 
@@ -960,18 +924,8 @@ const ParsedElement = (conf) => {
                 return this.internals.states.has(`--${attr}`);
             },
             set(value) {
-                const detail = { target: this, value };
-                const before = new SyncEvent(`${attr}:${this.initialized ? 'change' : 'init'}`, { detail });
-                const after = new SyncEvent(`${attr}:${this.initialized ? 'changed' : 'inited'}`, { detail });
-                (async () => {
-                    if (!await before.dispatchTo(this)) {
-                        return;
-                    }
-                    //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
-                    this.internals.states[value ? 'add' : 'delete'](`--${attr}`);
-                    this.reflect(() => Attributes.toggle(this, attr, value));
-                    await after.dispatchTo(this);
-                })();
+                this.internals.states[value ? 'add' : 'delete'](`--${attr}`);
+                this.reflect(() => Attributes.toggle(this, attr, value));
             }
         });
     }
@@ -1033,7 +987,7 @@ function extract(el) {
     if (el.dataset['fulBindType'] === 'boolean') {
         return !el.value ? null : el.value === 'true';
     }
-    return el.value || null;
+    return el.value === '' || el.value === undefined ? null : el.value;
 }
 
 function mutate(el, raw) {
@@ -1167,9 +1121,7 @@ const makeInputFragment = (el, template, slots) => {
     input.setAttribute('ful-validation-target', '');
     input.addEventListener('change', (evt) => {
         evt.stopPropagation();
-        if(!Events.dispatchChange(el, el.value)){
-            evt.preventDefault();
-        }
+        Events.dispatchChange(el, el.value);
     });
     const id = input.getAttribute('id') || el.getAttribute('input-id') || Attributes.uid('ful-input');
     Attributes.forward('input-', el, slots.input);
@@ -1193,9 +1145,6 @@ class Input extends ParsedElement({
         return this.input.value;
     }
     set value(value) {
-        if(!Events.dispatchChange(this, value)){
-            return;
-        }
         this.input.value = value;
     }
 }
@@ -1274,13 +1223,14 @@ class Select extends ParsedElement({
             }
             callback(data);
         };
-
-
         this.ts = new TomSelect(input, Object.assign(remote ? {
             preload: 'focus',
             load: this._unwrappedRemoteLoad,
             shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
         } : {}, tsDefaultConfig, this.tsConfig));
+        this.ts.on('change', value => {
+            Events.dispatchChange(this, this.value);
+        });
         //we remove the input to move it
         input.addEventListener('change', (evt) => {
             evt.stopPropagation();
@@ -1289,10 +1239,10 @@ class Select extends ParsedElement({
         template.renderTo(this, { id, tsId, name, input, slots });
     }
     #loader;
-    set loader(l){
+    set loader(l) {
         this.#loader = l;
         // loader can be configured later so we load now
-        if(this.hasAttribute('value')){
+        if (this.hasAttribute('value')) {
             this.value = this.getAttribute("value");
         }
     }
@@ -1301,14 +1251,12 @@ class Select extends ParsedElement({
         return v === '' ? null : v;
     }
     set value(value) {
-        if(!Events.dispatchChange(this, value)){
-            return;
-        }
         (async () => {
             if (this._remote) {
                 await this._unwrappedRemoteLoad({ byId: value }, this.ts.loadCallback.bind(this.ts));
             }
-            this.ts.setValue(value);
+            const silent = true;
+            this.ts.setValue(value, silent);
         })();
     }
 }
@@ -1350,12 +1298,11 @@ class RadioGroup extends ParsedElement({
             input.setAttribute('name', `${name}-ignore`);
             input.setAttribute('ful-validation-target', '');
             input.dataset['fulBindInclude'] = 'never';
-            input.addEventListener('change', (evt) => evt.stopPropagation());           
-            input.addEventListener('click', (evt) => {
-                if(!Events.dispatchChange(this, this.value)){
-                    evt.preventDefault();
-                }
-            });
+            input.addEventListener('change', evt => {
+                evt.stopPropagation();
+                //change is not cancelable
+                Events.dispatchChange(el, this.value);
+            });           
             const label = Fragments.fromChildNodes(el);
             return [input, label];
         });
@@ -1389,77 +1336,5 @@ class Spinner extends ParsedElement({
     }
 }
 
-class Wizard extends HTMLElement {
-    constructor() {
-        super();
-        this.progress = [...this.children].filter(e => e.matches("header,ol,ul"));
-
-        this.progress.forEach(p => {
-            const children = [...p.children];
-            const current = children.filter(e => e.matches(".active"))[0];
-            if (current === undefined && children.length > 0) {
-                children[0].classList.add('active');
-            }
-        });
-        if (this.querySelector('section.current') === null) {
-            const firstSection = this.querySelector('section:first-of-type');
-            if (firstSection !== null) {
-                firstSection.classList.add('current');
-            }
-        }
-    }
-    next() {
-        this.progress.forEach(p => {
-            const children = [...p.children];
-            const current = children.filter(e => e.matches(".active"))[0];
-            current?.classList.remove('active');
-            current?.nextElementSibling?.classList.add('active');
-        });
-        const currentSection = this.querySelector('section.current');
-        currentSection.classList.remove("current");
-        currentSection.nextElementSibling.classList.add('current');
-
-        this.dispatchEvent(new CustomEvent('wizard:activate', {
-            bubbles: true,
-            cancelable: true
-        }));
-
-    }
-    prev() {
-        this.progress.forEach(p => {
-            const children = [...p.children];
-            const current = children.filter(e => e.matches(".active"))[0];
-            current?.classList.remove('active');
-            current?.previousElementSibling?.classList.add('active');
-        });
-        const currentSection = this.querySelector('section.current');
-        currentSection.classList.remove("current");
-        currentSection.previousElementSibling.classList.add('current');
-        this.dispatchEvent(new CustomEvent('wizard:activate', {
-            bubbles: true,
-            cancelable: true
-        }));
-    }
-    moveTo(n) {
-        this.progress.forEach(p => {
-            const children = [...p.children];
-            const current = children.filter(e => e.matches(".active"))[0];
-            current?.classList.remove('active');
-            p.children[+n]?.classList.add('active');
-        });
-        const currentSection = this.querySelector('section.current');
-        currentSection?.classList.remove("current");
-        const nthSection = this.querySelector(`section:nth-child(${+n})`);
-        nthSection.classList.add('current');
-        this.dispatchEvent(new CustomEvent('wizard:activate', {
-            bubbles: true,
-            cancelable: true
-        }));
-    }
-    static configure() {
-        return Wizard.custom('ful-wizard');
-    }
-}
-
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Deferred, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, SyncEvent, TemplatesRegistry, VersionedStorage, Wizard, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Deferred, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, TemplatesRegistry, VersionedStorage, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
 //# sourceMappingURL=ful.mjs.map