@optionfactory/ful 6.0.4 → 6.0.6

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) {
@@ -1471,6 +1471,20 @@ 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) {
@@ -2123,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 => {
@@ -2149,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');
@@ -2224,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>
@@ -2338,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;
                 }
@@ -2356,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();
@@ -2630,7 +2642,7 @@ class Checkbox extends ParsedElement {
     static template = `
         <div data-tpl-class="klass">
             <div class="input-container">
-                <input class="form-check-input" type="checkbox" role="switch" form="" placeholder=" ">
+                <input class="form-check-input" type="checkbox" data-tpl-role="isSwitch ? 'switch' : false" form="" placeholder=" ">
             </div>
             <div class="form-check-label">
                 <label>{{{{ slots.default }}}}</label>
@@ -2649,8 +2661,9 @@ class Checkbox extends ParsedElement {
         this.internals.role = 'presentation';
     }
     render({ slots, observed, disabled }) {
-        const klass = this.getAttribute('type') == 'switch' ? "form-check form-switch" : "form-check";
-        const fragment = this.template().withOverlay({ slots, klass }).render();
+        const isSwitch = this.getAttribute('type') == 'switch';
+        const klass = isSwitch ? "form-check form-switch" : "form-check";
+        const fragment = this.template().withOverlay({ slots, klass, isSwitch }).render();
         this.#container = fragment.firstElementChild;
         this.#input = fragment.querySelector("input");
         Attributes.forward('input-', this, this.#input);