@optionfactory/ful 0.72.0 → 0.74.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 {
     /**
      * 
@@ -855,7 +821,9 @@ const upgradeQueue = new UpgradeQueue();
 const mappers = {
     'string': attr => attr,
     'number': attr => attr === null ? null : Number(attr),
-    'bool': attr => attr !== null,
+    'presence': attr => attr !== null,
+    'state': attr => attr !== null,
+    'bool': attr => attr === 'true',
     'json': attr => JSON.parse(attr)
 };
 
@@ -950,7 +918,7 @@ const ParsedElement = (conf) => {
         }
     };
 
-    for (const [attr, type] of attrsAndTypes.filter(([a, t]) => t === 'bool')) {
+    for (const [attr, type] of attrsAndTypes.filter(([a, t]) => t === 'state')) {
         Object.defineProperty(k.prototype, attr, {
             enumerable: true,
             configurable: true,
@@ -958,18 +926,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));
             }
         });
     }
@@ -1031,7 +989,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) {
@@ -1165,9 +1123,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);
@@ -1191,9 +1147,6 @@ class Input extends ParsedElement({
         return this.input.value;
     }
     set value(value) {
-        if(!Events.dispatchChange(this, value)){
-            return;
-        }
         this.input.value = value;
     }
 }
@@ -1272,13 +1225,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();
@@ -1287,10 +1241,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");
         }
     }
@@ -1299,20 +1253,18 @@ 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);
         })();
     }
 }
 
 class RadioGroup extends ParsedElement({
-    observed: ['value', 'disabled:bool'],
+    observed: ['value', 'disabled:state'],
     slots: true,
     template: `
         <fieldset ful-validated-field>
@@ -1348,12 +1300,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];
         });
@@ -1387,77 +1338,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