@optionfactory/ful 6.0.3 → 6.0.5

package/dist/ful.mjs

@@ -1,4 +1,4 @@
-import { ParsedElement, Attributes, registry, Fragments, Nodes, Rendering } from '@optionfactory/ftl';
+import { ParsedElement, Attributes, registry, Fragments, Templates, Nodes, Rendering } from '@optionfactory/ftl';
 
 class Base64 {
     static encode(arrayBuffer, dialect) {
@@ -1356,7 +1356,7 @@ class Form extends ParsedElement {
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
             e.stopPropagation();
-            await this.submit(e.submitter);
+            await this.submit(e.submitter ?? undefined);
         });
         if (this.hasAttribute("clear-invalid-on-change")) {
             this.addEventListener('change', (/** @type any */evt) => {
@@ -1377,19 +1377,20 @@ class Form extends ParsedElement {
             const values = Bindings.extractFrom(this.form, submitter);
             let request = await loader.prepare(values, this);
             try {
-                const se = new CustomEvent('submit', { bubbles: true, cancelable: true, detail: { values, request } });
+                const se = new CustomEvent('submit', { bubbles: true, cancelable: true, detail: { submitter, 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} });
+                this.errors = [];
+                const sre = new CustomEvent('submit:requested', { bubbles: true, cancelable: false, detail: { submitter, 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 } }));
+                this.dispatchEvent(new CustomEvent('submit:success', { bubbles: true, cancelable: false, detail: { submitter, values, request, response: mapped } }));
             } catch (e) {
-                this.dispatchEvent(new CustomEvent('submit:failure', { bubbles: true, cancelable: false, detail: { values, request, exception: e } }));
+                this.dispatchEvent(new CustomEvent('submit:failure', { bubbles: true, cancelable: false, detail: { submitter, values, request, exception: e } }));
                 if (e instanceof Failure) {
                     this.errors = e.problems;
                 }
@@ -1470,7 +1471,35 @@ class Input extends ParsedElement {
             this.required = observed.required;
             this.value = observed.value;
         }
-
+        this._input.addEventListener('keydown', (evt) => {
+            if (evt.key !== 'Enter' || this._type() === 'textarea') {
+                return;
+            }
+            const form = this.internals.form;
+            if(!form){
+                return;
+            }
+            const candidates =  /** @type [HTMLButtonElement|HTMLInputElement] */ (Array.from(form.querySelectorAll(
+                'button:not(:disabled), input:not(:disabled)'
+            )));
+            const submitter = candidates.find(el => el.type === 'submit');
+            form.requestSubmit(submitter);
+        });
+        this._input.addEventListener('input', (evt) => {
+            const re = this.getAttribute('mask');
+            if (!re) {
+                return;
+            }
+            const before = evt.target.value;
+            const after = before.replace(new RegExp(re, 'g'), '');
+            if (before === after) {
+                return;
+            }
+            const start = evt.target.selectionStart;
+            const offset = before.length - after.length;
+            evt.target.value = after;
+            evt.target.setSelectionRange(start - offset, start - offset);
+        });
         this._input.addEventListener('change', (evt) => {
             evt.stopPropagation();
             this.dispatchEvent(new CustomEvent('change', {
@@ -1518,7 +1547,7 @@ class Input extends ParsedElement {
         this.reflect(() => {
             Attributes.toggle(this, 'required', d);
         });
-    }    
+    }
     focus(options) {
         this._input.focus(options);
     }
@@ -2108,11 +2137,20 @@ class Dropdown extends ParsedElement {
         <ful-spinner class="centered" hidden></ful-spinner>
         <menu tabindex="-1" hidden></menu>
     `;
+    static templates = {
+        options: `
+            <li data-tpl-each="self" data-tpl-selected="index == 0" data-tpl-value="index">
+                {{ label }}
+            </li>
+        `
+    };
     #spinner;
     #menu;
+    #optionstemplate;
     #options = new Map();
     render({ slots }) {
         const fragment = this.template().render();
+        this.#optionstemplate = Fragments.isBlank(slots.default) ? this.template('options') : Templates.fromFragment(slots.default);
         this.#spinner = fragment.querySelector("ful-spinner");
         this.#menu = fragment.querySelector("menu");
         this.#menu.addEventListener('click', evt => {
@@ -2134,21 +2172,8 @@ class Dropdown extends ParsedElement {
             throw new Error("null data");
         }
         this.#options = new Map(values.map((v, i) => [String(i), v]));
-        if (values.length === 0) {
-            const el = document.createElement('div');
-            el.classList.add('text-center', 'py-2', 'bi', 'bi-database-slash');
-            this.#menu.replaceChildren(el);
-            return;
-        }
-        this.#menu.replaceChildren(...values.map(([k, v, m], i) => {
-            const el = document.createElement('li');
-            if (i === 0) {
-                el.setAttribute("selected", '');
-            }
-            el.setAttribute("value", i);
-            el.innerText = v;
-            return el;
-        }));
+        const data = values.map(([key, label, metadata], index) => ({ index, key, label, metadata}));
+        this.#optionstemplate.withOverlay(data).renderTo(this.#menu);
     }
     #change(target) {
         const index = target.getAttribute('value');
@@ -2209,7 +2234,7 @@ class Select extends ParsedElement {
                     <badges></badges>
                     <input type="text" form="">
                 </div>
-                <ful-dropdown hidden popover="manual"></ful-dropdown>
+                <ful-dropdown hidden popover="manual">{{{{ slots.dropdown }}}}</ful-dropdown>
             </div>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
@@ -2323,16 +2348,17 @@ class Select extends ParsedElement {
             this.#input.value = '';
         });
         this.#input.addEventListener('keydown', e => {
-            e.stopPropagation();
             if (this.disabled || this.readonly) {
                 return;
             }
             switch (e.code) {
                 case 'ArrowUp': {
+                    e.preventDefault();
                     this.#ddmenu.moveOrShow(false, () => self.#loader.load(self.#input.value));
                     break;
                 }
                 case 'ArrowDown': {
+                    e.preventDefault();
                     this.#ddmenu.moveOrShow(true, () => self.#loader.load(self.#input.value));
                     break;
                 }
@@ -2341,12 +2367,13 @@ class Select extends ParsedElement {
                     break;
                 }
                 case 'Enter': {
+                    e.preventDefault();
                     this.#ddmenu.acceptSelection();
                     this.#input.value = '';
                     break;
                 }
                 case 'Backspace': {
-                    //remove last if caret a position 0
+                    //remove last if caret at position 0
                     if (this.#values.size && this.#input.selectionStart === 0 && this.#input.selectionEnd === 0) {
                         this.#values.delete(Array.from(this.#values.keys()).pop());
                         this.#changed();