@optionfactory/ful 4.0.13 → 4.0.14

package/dist/ful.mjs

@@ -1724,24 +1724,24 @@ class InputFile extends Input {
         <div data-ref="dropzone" class="dropzone" data-tpl-if="!slots.dropzone">
             {{ #l10n:t('dropzonelabel') }}
         </div>
-        <div data-ref="items" class="items"></div>
+        <ful-item-list></ful-item-list>
         <ful-field-warnings></ful-field-warnings>
         <ful-field-error></ful-field-error>
     `;
     static templates = {
         items: `
-            <div class="item" data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
-                <div class="filename"><span>{{ file.name }}</span></div>
-                <div class="size">{{ #bytes:format(file.size) }}</div>
-                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button>
-            </div>
+            <ful-item data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
+                <div>{{ file.name }}</div>
+                <div>{{ #bytes:format(file.size) }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
         `,
         warning: `<ful-field-warning>{{ #l10n:t(key, args) }}</ful-field-warning>`
     }
     render(conf) {
         const { observed } = conf;
         super.render(conf);
-        this.#items = this.querySelector("[data-ref=items]");
+        this.#items = this.querySelector("ful-item-list");
         this.#dropzone = this.querySelector("[data-ref=dropzone]");
         this.#warnings = this.querySelector("ful-field-warnings");
         this.accept = observed.accept;
@@ -1757,7 +1757,7 @@ class InputFile extends Input {
             if (!e.target.closest("button")) {
                 return;
             }
-            const fileName = e.target.closest(".item").dataset.name;
+            const fileName = e.target.closest("ful-item").dataset.name;
             const dt = new DataTransfer();
             [...this.files].filter(f => f.name !== fileName).forEach(f => dt.items.add(f));
             this.files = dt.files;
@@ -1789,11 +1789,7 @@ class InputFile extends Input {
         this.#ensureAcceptable();
         this.#ensureFileSizes();
         this.#ensureTotalSize();
-        if(this.#useItemlist){
-            this.template('items').withOverlay({ files: this.files }).withModule('bytes', { format: this.#formatByteSize }).renderTo(this.#items);
-        }else {
-            this.#items.replaceChildren();
-        }
+        this.template('items').withOverlay({ files: this.files }).withModule('bytes', { format: this.#formatByteSize }).renderTo(this.#items);
     }
     warning(key, args) {
         this.template('warning').withOverlay({ key, args }).renderTo(this.#warnings);
@@ -1854,7 +1850,7 @@ class InputFile extends Input {
     set multiple(v) {
         this._input.multiple = v;
         this.reflect(() => {
-            this.setAttribute('multiple', this._input.multiple);
+            Attributes.toggle(this, "multiple", v);
         });
     }
     get files() {
@@ -1887,7 +1883,6 @@ class InputFile extends Input {
         this.reflect(() => {
             this.setAttribute('maxfilesize', v);
         });
-
     }
     #maxtotalsize;
     get maxtotalsize() {
@@ -1905,7 +1900,6 @@ class InputFile extends Input {
     }
     set itemlist(v) {
         this.#useItemlist = v;
-        Attributes.toggle(this.#items, "hidden", !v);
         this.reflect(() => {
             Attributes.toggle(this, "itemlist", v);
         });
@@ -1916,7 +1910,6 @@ class InputFile extends Input {
     }
     set dropzone(v) {
         this.#useDropzone = v;
-        Attributes.toggle(this.#dropzone, "hidden", !v);
         this.reflect(() => {
             Attributes.toggle(this, "dropzone", v);
         });
@@ -2145,7 +2138,7 @@ class Dropdown extends ParsedElement {
 }
 
 class Select extends ParsedElement {
-    static observed = ['value:csvm', 'readonly:presence']
+    static observed = ['value:csvm', 'readonly:presence', 'itemlist:presence']
     static slots = true
     static template = `
         <div class="form-label">
@@ -2165,8 +2158,17 @@ class Select extends ParsedElement {
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
+        <ful-item-list></ful-item-list>
         <ful-field-error></ful-field-error>
     `;
+    static templates = {
+        items: `
+            <ful-item data-tpl-each="entries" data-tpl-var="entry" data-tpl-data-key="entry[0]">
+                <div>{{ entry[1] }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
+        `
+    }    
     static mappers = {
         "csvm": (v, name, el) => {
             if (el.hasAttribute("multiple")) {
@@ -2181,6 +2183,7 @@ class Select extends ParsedElement {
     #badges
     #ddmenu
     #input
+    #items;
     #multiple
     #fieldError
     #values = new Map()
@@ -2196,12 +2199,14 @@ class Select extends ParsedElement {
         await this.#loader.prefetch?.();
         const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
+        this.#items = fragment.querySelector("ful-item-list");
         Attributes.forward('input-', this, this.#input);
         this.#badges = fragment.querySelector('badges');
 
         this.value = observed.value;
         this.disabled = disabled;
         this.readonly = observed.readonly;
+        this.itemlist = observed.itemlist;
 
         this.#ddmenu = fragment.querySelector('ful-dropdown');
         const label = fragment.querySelector('label');
@@ -2226,6 +2231,22 @@ class Select extends ParsedElement {
             this.#input.focus();
             dload();
         });
+        this.#items.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (!e.target.closest("button")) {
+                return;
+            }
+            if(this.disabled || this.readonly){
+                return;
+            }            
+            const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
+            if (idx === -1) {
+                return;
+            }
+            this.#values.delete(Array.from(this.#values.keys()).pop());
+            this.#changed();
+            this.#syncBadges();
+        });
         this.#badges.addEventListener('click', (e) => {
             e.stopPropagation();
             if(this.disabled || this.readonly){
@@ -2333,6 +2354,8 @@ class Select extends ParsedElement {
         });
         this.#badges.replaceChildren();
         this.#badges.append(...badges);
+        this.#items.replaceChildren();
+        this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
     }
     set value(vs) {
         if(vs === null){
@@ -2374,6 +2397,16 @@ class Select extends ParsedElement {
             Attributes.toggle(this, 'readonly', v);
         });
     }
+    #useItemlist;
+    get itemlist() {
+        return this.#useItemlist;
+    }
+    set itemlist(v) {
+        this.#useItemlist = v;
+        this.reflect(() => {
+            Attributes.toggle(this, "itemlist", v);
+        });
+    }
     focus(options) {
         this.#input.focus(options);
     }