@optionfactory/ful 5.0.3 → 5.0.4

package/dist/ful.mjs

@@ -1688,16 +1688,18 @@ class InputFile extends Input {
             'dropzonelabel': 'Click or drop your files here',
             'unaccepptablefiletype': "Only files of type {0} are supported",
             'maxfilesizeexceeded': "Maximum supported file size is {0}",
-            'maxtotalsizeexceeded': "Maximum supported total file size is {0}"
+            'maxtotalsizeexceeded': "Maximum supported total file size is {0}",
+            'maxfilesexceeded': "Maximum files count exceeded"
         },
         it: {
             'dropzonelabel': 'Clicca o trascina i file qui',
             'unaccepptablefiletype': "Solo i file di tipo {0} sono supportati",
             'maxfilesizeexceeded': "La dimensione massima di un file è di {0}",
-            'maxtotalsizeexceeded': "La dimensione massima complessiva dei file è di {0}"
+            'maxtotalsizeexceeded': "La dimensione massima complessiva dei file è di {0}",
+            'maxfilesexceeded': "Numero massimo di file superato",
         }
     }
-    static observed = ['value', 'readonly:presence', 'required:presence', "accept:csv", 'multiple:presence', "itemlist:presence", "dropzone:presence", "maxfilesize:number", "maxtotalsize:number"];
+    static observed = ['value', 'readonly:presence', 'required:presence', "accept:csv", 'multiple:presence', "itemlist:presence", "dropzone:presence", "maxfiles:number", "maxfilesize:number", "maxtotalsize:number"];
     #accept;
     #items;
     #dropzone;
@@ -1720,7 +1722,7 @@ class InputFile extends Input {
         <div data-ref="dropzone" class="dropzone" data-tpl-if="slots.dropzone">
             {{{{ slots.dropzone }}}}
         </div>
-        <div data-ref="dropzone" class="dropzone" data-tpl-if="!slots.dropzone">
+        <div data-ref="dropzone" class="default-dropzone" data-tpl-if="!slots.dropzone">
             {{ #l10n:t('dropzonelabel') }}
         </div>
         <ful-item-list></ful-item-list>
@@ -1747,6 +1749,7 @@ class InputFile extends Input {
         this.multiple = observed.multiple;
         this.itemlist = observed.itemlist;
         this.dropzone = observed.dropzone;
+        this.maxfiles = observed.maxfiles;
         this.maxfilesize = observed.maxfilesize;
         this.maxtotalsize = observed.maxtotalsize;
         this.#warnings.addEventListener('animationend', e => {
@@ -1788,13 +1791,14 @@ class InputFile extends Input {
         this.#ensureAcceptable();
         this.#ensureFileSizes();
         this.#ensureTotalSize();
+        this.#ensureFilesCount();
         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);
     }
     #ensureAcceptable() {
-        if (!this.#accept) {
+        if (!this.#accept.length) {
             return;
         }
         const unacceptable = [...this.files]
@@ -1803,11 +1807,23 @@ class InputFile extends Input {
         if (unacceptable.length === 0) {
             return;
         }
-        this.warning('unaccepptablefiletype', this.#accept.join(","));
+        this.warning('unaccepptablefiletype', this.#accept.join(", "));
         const dt = new DataTransfer();
         [...this.files].filter(f => !unacceptable.includes(f)).forEach(f => dt.items.add(f));
         this.files = dt.files;
     }
+    #ensureFilesCount() {
+        if (this.#maxfiles === null) {
+            return;
+        }
+        if (this.files.length <= this.#maxfiles) {
+            return;
+        }
+        this.warning('maxfilesexceeded');
+        const dt = new DataTransfer();
+        this.files = dt.files;
+    }
+
     #ensureFileSizes() {
         if (this.#maxfilesize === null) {
             return;
@@ -1873,6 +1889,19 @@ class InputFile extends Input {
     set value(v) {
         //TODO:
     }
+    get totalsize() {
+        return Array.from(this.files).reduce((a, f) => a + f.size, 0);
+    }
+    #maxfiles;
+    get maxfiles() {
+        return this.#maxfiles;
+    }
+    set maxfiles(v) {
+        this.#maxfiles = v;
+        this.reflect(() => {
+            Attributes.set(this, 'maxfiles', v);
+        });
+    }
     #maxfilesize;
     get maxfilesize() {
         return this.#maxfilesize;
@@ -1880,7 +1909,7 @@ class InputFile extends Input {
     set maxfilesize(v) {
         this.#maxfilesize = v;
         this.reflect(() => {
-            this.setAttribute('maxfilesize', v);
+            Attributes.set(this, 'maxfilesize', v);
         });
     }
     #maxtotalsize;
@@ -1890,7 +1919,7 @@ class InputFile extends Input {
     set maxtotalsize(v) {
         this.#maxtotalsize = v;
         this.reflect(() => {
-            this.setAttribute('maxtotalsize', v);
+            Attributes.set(this, 'maxtotalsize', v);
         });
     }
     #useItemlist;
@@ -1912,7 +1941,7 @@ class InputFile extends Input {
         this.reflect(() => {
             Attributes.toggle(this, "dropzone", v);
         });
-    }    
+    }
 }
 
 class RemoteLoader {
@@ -2344,7 +2373,7 @@ class Select extends ParsedElement {
         this.replaceChildren(fragment);
     }
     async withLoader(fn) {
-        await fn(this.#loader);
+        return await fn(this.#loader);
     }
     #changed() {
         const selection = [...this.#values.entries()].map(e => ({ key: e[0], label: e[1][0], metadata: e[1].slice(1) }));
@@ -2840,8 +2869,8 @@ class TableSchemaParser {
             rowsTr.setAttribute(attr, value ?? '');
         }
         const columns = Nodes.queryChildrenAll(schema, "column");
-        const sort = columns.filter(v => v.hasAttribute('order')).map(v => ({sorter: v.getAttribute("sorter"), order: v.getAttribute("order")}))[0] ?? null;
-        for(var column of columns){
+        const sort = columns.filter(v => v.hasAttribute('order')).map(v => ({ sorter: v.getAttribute("sorter"), order: v.getAttribute("order") }))[0] ?? null;
+        for (var column of columns) {
             const maybeTitleTag = Nodes.queryChildren(column, 'title');
             const sorter = column.getAttribute("sorter");
             const order = column.getAttribute("order");
@@ -2850,12 +2879,12 @@ class TableSchemaParser {
             column.removeAttribute("sorter");
             column.removeAttribute("order");
             column.removeAttribute("title");
-            const wrappedTitleNode = (!sorter &&  !order ) ? titleNode : (() => {
+            const wrappedTitleNode = (!sorter && !order) ? titleNode : (() => {
                 const fulSorter = document.createElement("ful-sorter");
-                if(sorter){
+                if (sorter) {
                     fulSorter.setAttribute("sorter", sorter);
                 }
-                if(order){
+                if (order) {
                     fulSorter.setAttribute("order", order);
                 }
                 fulSorter.append(titleNode);
@@ -2875,14 +2904,32 @@ class TableSchemaParser {
         }
 
         return {
-            headersTemplate: template.withOverlay({inHeaders: true, inRows: false}).withFragment(Fragments.from(headersTr)),
-            rowsTemplate: template.withOverlay({inHeaders: false, inRows: true}).withFragment(Fragments.from(rowsTr)),
+            headersTemplate: template.withOverlay({ inHeaders: true, inRows: false }).withFragment(Fragments.from(headersTr)),
+            rowsTemplate: template.withOverlay({ inHeaders: false, inRows: true }).withFragment(Fragments.from(rowsTr)),
             sort: sort,
             length: columns.length
         }
     }
 }
 
+
+
+class InMemoryTableLoader {
+    #data
+    constructor(data) {
+        this.#data = data;
+    }
+    async load(pageRequest, sortRequest, filterRequest) {
+        return { 
+            page: this.#data, 
+            size: this.#data.length 
+        };
+    }
+    update(data) {
+        this.#data = data;
+    }
+}
+
 class RemoteTableLoader {
     #http;
     #url;
@@ -2906,10 +2953,13 @@ class RemoteTableLoader {
 
 class TableLoader {
     static create(el, conf) {
-        const http = registry.component("http-client");
         const url = el.getAttribute("src");
-        const method = el.getAttribute("method") ?? 'GET';
-        return new RemoteTableLoader(http, url, method);
+        if (url) {
+            const http = registry.component("http-client");
+            const method = el.getAttribute("method") ?? 'GET';
+            return new RemoteTableLoader(http, url, method);
+        }
+        return new InMemoryTableLoader([]);
     }
 }
 
@@ -2983,6 +3033,7 @@ class Table extends ParsedElement {
             {{{{ schema.rowsTemplate.withOverlay({'rows': pageResponse.data}).render() }}}}
         `
     };
+    #loader;
     #schema;
     #body;
     #loading;
@@ -2998,6 +3049,8 @@ class Table extends ParsedElement {
         const tableWrapper = /** @type HTMLTableElement */ (Nodes.queryChildren(fragment, '.table-wrapper'));
         const table = /** @type HTMLTableElement */ (tableWrapper.querySelector("table"));
         Attributes.forward('table-', this, table);
+        this.#loader = registry.component(this.getAttribute("loader") ?? 'loaders:table').create(this);
+
         this.#schema = schema;
         this.#body = table.querySelector(':scope > tbody');
         this.#loading = table.querySelector(":scope > tbody[data-ref=loading]");
@@ -3050,8 +3103,7 @@ class Table extends ParsedElement {
         this.#feedback.setAttribute("hidden", "");
         this.#noAutoload.setAttribute("hidden", "");
         try {
-            const loader = registry.component(this.getAttribute("loader") ?? 'loaders:table').create(this);
-            const pageResponse = await loader.load(pageRequest, sortRequest, filterRequest);
+            const pageResponse = await this.#loader.load(pageRequest, sortRequest, filterRequest);
             this.#latestRequest = { pageRequest, sortRequest, filterRequest };
             this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
         } catch (/** @type any */error) {
@@ -3065,14 +3117,15 @@ class Table extends ParsedElement {
             throw error;
         }
     }
-
+    async withLoader(fn) {
+        return await fn(this.#loader);
+    }
     async resetWithFilter(filterRequest) {
         return await this.load({
             page: 0,
             size: this.#latestRequest.pageRequest.size
         }, this.#latestRequest.sortRequest, filterRequest);
     }
-
     #update(pageRequest, sortRequest, filterRequest, pageResponse) {
         this.#loading.setAttribute("hidden", "");
         this.#body.replaceChildren(this.template('row').withOverlay({