@optionfactory/ful 0.48.0 → 0.50.0

package/dist/ful.mjs

@@ -562,7 +562,7 @@ const timing = {
 class SyncEvent extends CustomEvent {
     #results;
     constructor(type, options) {
-        super(type, options);
+        super(type, {...options, cancelable: true});
         this.#results = [];
     }
 
@@ -571,9 +571,11 @@ class SyncEvent extends CustomEvent {
         // event handlers asynchronously via the event loop, dispatchEvent() 
         // invokes event handlers synchronously. 
         // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
-        const success = el.dispatchEvent(this);
+        el.dispatchEvent(this);
+        //we ignore the result of dispatchEvent and use defaultPrevented instead
+        //because handlers can be async
         const results = await Promise.all(this.#results);
-        return [success, results];
+        return [!this.defaultPrevented, results];
     }
 
     static on(el, type, h, useCapture) {
@@ -585,6 +587,11 @@ class SyncEvent extends CustomEvent {
 }
 
 class Fragments {
+    /**
+     * 
+     * @param  {...string} html 
+     * @returns 
+     */
     static fromHtml(...html) {
         const el = document.createElement("div");
         el.innerHTML = html.join("");
@@ -592,16 +599,31 @@ class Fragments {
         fragment.append(...el.childNodes);
         return fragment;
     }
+    /**
+     * 
+     * @param {DocumentFragment} fragment 
+     * @returns 
+     */
     static toHtml(fragment) {
         var r = document.createElement("div");
         r.appendChild(fragment);
         return r.innerHTML;
     }
+    /**
+     * 
+     * @param  {...Node} nodes 
+     * @returns 
+     */
     static from(...nodes) {
         const fragment = new DocumentFragment();
         fragment.append(...nodes);
         return fragment;
     }
+    /**
+     * 
+     * @param {HTMLElement} el 
+     * @returns 
+     */
     static fromChildNodes(el) {
         const fragment = new DocumentFragment();
         fragment.append(...el.childNodes);
@@ -611,18 +633,41 @@ class Fragments {
 
 class Attributes {
     static id = 0;
+    /**
+     * 
+     * @param {string} prefix 
+     * @returns 
+     */
     static uid(prefix) {
         return `${prefix}-${++Attributes.id}`;
     }
+    /**
+     * 
+     * @param {any} value 
+     * @returns 
+     */
     static asBoolean(value) {
         return value !== null && value !== undefined && value !== false;
     }
+    /**
+     * 
+     * @param {HTMLElement} el 
+     * @param {string} k 
+     * @param {string} v 
+     * @returns 
+     */
     static defaultValue(el, k, v) {
         if (!el.hasAttribute(k)) {
             el.setAttribute(k, v);
         }
         return el.getAttribute(k);
     }
+    /**
+     * 
+     * @param {string} prefix 
+     * @param {HTMLElement} from 
+     * @param {HTMLElement} to 
+     */
     static forward(prefix, from, to) {
         from.getAttributeNames()
             .filter(a => a.startsWith(prefix))
@@ -637,7 +682,12 @@ class Attributes {
     }
 }
 
-class Slots {
+class LightSlots {
+    /**
+     * 
+     * @param {HTMLElement} el 
+     * @returns the slots
+     */
     static from(el) {
         const namedSlots = Array.from(el.childNodes)
             .filter(el => el.matches && el.matches('[slot]'))
@@ -647,10 +697,10 @@ class Slots {
                 el.removeAttribute("slot");
                 return [slot, el];
             });
-        const slotted = Object.fromEntries(namedSlots);
-        slotted.default = new DocumentFragment();
-        slotted.default.append(...el.childNodes);
-        return slotted;
+        const slots = Object.fromEntries(namedSlots);
+        slots.default = new DocumentFragment();
+        slots.default.append(...el.childNodes);
+        return slots;
     }
 }
 
@@ -665,20 +715,20 @@ class Nodes {
     }
 }
 
-class TemplateRegistry {
+class TemplatesRegistry {
     #idToFragment = {};
     #idToTemplate = {};
     #ec;
     put(k, fragment) {
         if (this.#ec) {
-            this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
+            this.#idToTemplate[k] = Template.fromFragment(fragment, ec);
             return;
         }
         this.#idToFragment[k] = fragment;
     }
     get(k) {
         if (!this.#ec) {
-            throw new Error("evaluationContext is not configured");
+            throw new Error("TemplatesRegistry is not configured");
         }
         const tpl = this.#idToTemplate[k];
         if (!tpl) {
@@ -695,7 +745,50 @@ class TemplateRegistry {
     }
 }
 
-const templates = new TemplateRegistry();
+
+class ElementsRegistry {
+    #templates;
+    #tagToclass;
+    #configured;
+    #id = 0;
+    constructor(){
+        this.#templates = new TemplatesRegistry();
+        this.#tagToclass = {};
+    }
+    defineTemplate(html){
+        if(html === null || html === undefined){
+            return undefined;
+        }
+        const name = `unnamed-${++this.#id}`;
+        this.#templates.put(name, Fragments.fromHtml(html));
+        return name;
+    }
+    template(k){
+        if(k === null || k === undefined){
+            return undefined;
+        }
+        return this.#templates.get(k);
+    }
+    define(tag, klass){
+        if(!this.#configured){
+            this.#tagToclass[tag] = klass;
+            return this;
+        }
+        customElements.define(tag, klass);        
+        return this;
+    }
+    configure(ec) {
+        this.#templates.configure(ec);
+        for(const [tag, klass] of Object.entries(this.#tagToclass)) {
+            customElements.define(tag, klass);            
+            delete this.#tagToclass[tag];
+        }
+        this.#configured = true;
+    }
+}
+
+const elements = new ElementsRegistry();
+
 
 class UpgradeQueue {
     #q = [];
@@ -715,22 +808,29 @@ class UpgradeQueue {
 
 const upgradeQueue = new UpgradeQueue();
 
-const ParsedElement = (flags, others) => {
+const ParsedElement = (conf) => {
+    const {flags, attrs, template, slots} = conf || {};
 
     const observed_flags = flags || [];
-    const observed_others = others || [];    
+    const observed_others = attrs || [];
     const observed = [].concat(observed_flags).concat(observed_others);
 
+    const templateId = elements.defineTemplate(template);
+
     const k = class extends HTMLElement {
         static get observedAttributes() {
             return observed;
         }
         #parsed;
+        #initialized;
         #internals;
         constructor(...args) {
             super(...args);
             this.#internals = this.attachInternals();
         }
+        get initialized(){
+            return this.#initialized;
+        }
         get internals() {
             return this.#internals;
         }
@@ -766,34 +866,50 @@ const ParsedElement = (flags, others) => {
                 return;
             }
             this.#parsed = true;
-            await this.render();
+            await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
             for (const flag of observed_flags) {
-                if(this.hasAttribute(flag)){
+                if (this.hasAttribute(flag)) {
                     this[flag] = true;
                 }
             }
             for (const other of observed_others) {
-                if(this.hasAttribute(other)){
+                if (this.hasAttribute(other)) {
                     this[other] = this.getAttribute(other);
                 }
             }
-        }        
+            this.#initialized = true;
+        }
     };
 
     for (const flag of observed_flags) {
+        const state = `--${flag};`;
         Object.defineProperty(k.prototype, flag, {
             enumerable: true,
             configurable: true,
             get() {
-                return this.internals.states.has(`--${flag}`);
+                return this.internals.states.has(state);
             },
             set(value) {
-                //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
-                if (Attributes.asBoolean(value)) {
-                    this.internals.states.add(`--${flag}`);
-                    return;
-                }
-                this.internals.states.delete(`--${flag}`);
+                const v = Attributes.asBoolean(value);
+                const et = this.initialized ? 'changed' : 'init';
+                const event = new SyncEvent(`${flag}:${et}`, {
+                    detail: { 
+                        target: this,
+                        value: v 
+                    }
+                });
+                (async () => {
+                    const [success, results] = await event.dispatchTo(this);
+                    if (!success) {
+                        return;
+                    }
+                    if (v) {
+                        //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
+                        this.internals.states.add(state);
+                        return;
+                    }
+                    this.internals.states.delete(state);
+                })();
             }
         });
     }
@@ -950,21 +1066,8 @@ class Form extends ParsedElement() {
     }
 }
 
-templates.put('ful-input', Fragments.fromHtml(`
-    <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>
-        {{{{ 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>
-    </div>
-    <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-`));
-
-
-const makeInputFragment = (el, slotted) => {
-    const input = el.input = slotted.input = slotted.input || (() => {
+const makeInputFragment = (el, template, slots) => {
+    const input = el.input = slots.input = slots.input || (() => {
         const el = document.createElement("input");
         el.classList.add("form-control");
         return el;
@@ -972,18 +1075,32 @@ const makeInputFragment = (el, slotted) => {
     input.setAttribute('ful-validation-target', '');
 
     const id = input.getAttribute('id') || el.getAttribute('input-id') || Attributes.uid('ful-input');
-    Attributes.forward('input-', el, slotted.input);
-    Attributes.defaultValue(slotted.input, "id", id);
-    Attributes.defaultValue(slotted.input, "type", "text");
-    Attributes.defaultValue(slotted.input, "placeholder", " ");
+    Attributes.forward('input-', el, slots.input);
+    Attributes.defaultValue(slots.input, "id", id);
+    Attributes.defaultValue(slots.input, "type", "text");
+    Attributes.defaultValue(slots.input, "placeholder", " ");
     const name = el.getAttribute('name');
-    return templates.get('ful-input').render(el, { id, name, slotted });
+    return template.render(el, { id, name, slots });
 };
 
-class Input extends ParsedElement([], ['value']) {
-    render() {
-        const slotted = Slots.from(el);
-        const fragment = makeInputFragment(this, slotted);
+class Input extends ParsedElement({
+    flags: [], 
+    attrs: ['value'],
+    slots: true,
+    template: `
+        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+            {{{{ slots.input }}}} 
+            <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+    `
+}){
+    render(template, slots) {
+        const fragment = makeInputFragment(this, template, slots);
         this.replaceChildren(fragment);
     }
     get value() {
@@ -999,33 +1116,33 @@ class Input extends ParsedElement([], ['value']) {
  * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
  */
 
-templates.put('ful-select', Fragments.fromHtml(`
-    <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>
-        {{{{ 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>
-    </div>
-    <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
-`));
-
-
-class Select extends ParsedElement([], ["value"]) {
+class Select extends ParsedElement({
+    flags: [], 
+    attrs: ["value"],
+    slots: true,
+    template: `
+        <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
+        {{{{ input }}}}
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+            {{{{ slots.input }}}} 
+            <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
+    `
+}) {
     constructor(tsConfig) {
         super();
         this.tsConfig = tsConfig;
     }
-    render() {
-        const slotted = Slots.from(this);
-
+    render(template, slots) {
         const type = this.getAttribute("type") || 'local';
         const remote = type != 'local';
         const loadOnce = this.getAttribute('load') != 'always';
         const name = this.getAttribute('name');
-        const input = slotted.input = slotted.input || (() => {
+        const input = slots.input = slots.input || (() => {
             return document.createElement("select");
         })();
         input.setAttribute('ful-validation-target', '');
@@ -1038,7 +1155,7 @@ class Select extends ParsedElement([], ["value"]) {
 
         //tomselect needs the input to have a parent.
         //se we move the input to a fragment
-        slotted.input = Fragments.from(input);
+        slots.input = Fragments.from(input);
 
         this.loaded = !remote;
 
@@ -1061,7 +1178,7 @@ class Select extends ParsedElement([], ["value"]) {
             }
             const type = query && query.hasOwnProperty('byId') ? 'id' : 'query';
             const qvalue = type === 'id' ? query.byId : query;
-            const data = await (this.loader ? this.loader(qvalue, type) : []);
+            const data = await (this.#loader ? this.#loader(qvalue, type) : []);
             if (type !== 'id') {
                 this.loaded = true;
             }
@@ -1076,7 +1193,15 @@ class Select extends ParsedElement([], ["value"]) {
         } : {}, tsDefaultConfig, this.tsConfig));
         //we remove the input to move it
         input.remove();
-        templates.get('ful-select').renderTo(this, { id, tsId, name, input, slotted });
+        template.renderTo(this, { id, tsId, name, input, slots });
+    }
+    #loader;
+    set loader(l){
+        this.#loader = l;
+        // loader can be configured later so we load now
+        if(this.hasAttribute('value')){
+            this.value = this.getAttribute("value");
+        }
     }
     set value(v) {
         (async () => {
@@ -1092,33 +1217,34 @@ class Select extends ParsedElement([], ["value"]) {
     }
 }
 
-templates.put('ful-radio-group', Fragments.fromHtml(`
-    <fieldset>
-        <legend class="form-label">
-            {{{{ slotted.default }}}}
-        </legend>
-        <header data-tpl-if="slotted.header">
-            {{{{ slotted.header }}}}
-        </header>
-        <section>
-            <label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
-                {{{{ ial[0] }}}}
-                {{{{ ial[1] }}}}
-            </label>
-        </section>
-        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-        <footer data-tpl-if="slotted.footer">
-            {{{{ slotted.footer }}}}
-        </footer>
-    </fieldset>
-`));
-
-
-class RadioGroup extends ParsedElement(['disabled'], ['value']) {
-    render() {
-        const slotted = Slots.from(this);
+class RadioGroup extends ParsedElement({
+    flags: ['disabled'], 
+    attrs: ['value'],
+    slots: true,
+    template: `
+        <fieldset>
+            <legend class="form-label">
+                {{{{ slots.default }}}}
+            </legend>
+            <header data-tpl-if="slots.header">
+                {{{{ slots.header }}}}
+            </header>
+            <section>
+                <label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
+                    {{{{ ial[0] }}}}
+                    {{{{ ial[1] }}}}
+                </label>
+            </section>
+            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+            <footer data-tpl-if="slots.footer">
+                {{{{ slots.footer }}}}
+            </footer>
+        </fieldset>
+    `
+}) {
+    render(template, slots) {
         const name = this.getAttribute('name') || Attributes.uid('ful-radiogroup');
-        const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
+        const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
         const inputsAndLabels = radioEls.map(el => {
             const input = document.createElement('input');
             input.setAttribute('type', 'radio');
@@ -1131,11 +1257,7 @@ class RadioGroup extends ParsedElement(['disabled'], ['value']) {
             return [input, label];
         });
         radioEls.forEach(el => el.remove());
-        templates.get('ful-radio-group').renderTo(this, {
-            name: name,
-            slotted: slotted,
-            inputsAndLabels: inputsAndLabels
-        });
+        template.renderTo(this, {name, slots, inputsAndLabels});
     }
     get value() {
         const checked = this.querySelector('input[type=radio]:checked');
@@ -1146,17 +1268,17 @@ class RadioGroup extends ParsedElement(['disabled'], ['value']) {
     }
 }
 
-templates.put('ful-spinner', Fragments.fromHtml(`
-    <div class="ful-spinner-wrapper">
-        <div class="ful-spinner-text">{{{{ slotted.default }}}}</div>
-        <div class="ful-spinner-icon"></div>
-    </div>
-`));
-
-class Spinner extends ParsedElement() {
-    render() {
-        const slotted = Slots.from(this);
-        templates.get('ful-spinner').renderTo(this, { slotted });
+class Spinner extends ParsedElement({
+    slots: true,
+    template: `
+        <div class="ful-spinner-wrapper">
+            <div class="ful-spinner-text">{{{{ slots.default }}}}</div>
+            <div class="ful-spinner-icon"></div>
+        </div>
+    `
+}) {
+    render(template, slots) {
+        template.renderTo(this, { slots });
     }
 }
 
@@ -1232,16 +1354,5 @@ class Wizard extends HTMLElement {
     }
 }
 
-class CustomElements {
-    static configure(ec) {
-        templates.configure(ec);
-        customElements.define('ful-spinner', Spinner);
-        customElements.define('ful-input', Input);
-        customElements.define('ful-radio-group', RadioGroup);
-        customElements.define('ful-select', Select);
-        customElements.define('ful-form', Form);
-    }
-}
-
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, CustomElements, Failure, Form, Fragments, Hex, HttpClient, Input, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Slots, Spinner, SyncEvent, TemplateRegistry, VersionedStorage, Wizard, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, templates, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, SyncEvent, TemplatesRegistry, VersionedStorage, Wizard, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
 //# sourceMappingURL=ful.mjs.map