@optionfactory/ful 4.0.10 → 4.0.12

package/dist/ful.mjs

@@ -1683,6 +1683,246 @@ class InputInstant extends Input {
     }
 }
 
+class InputFile extends Input {
+    static l10n = {
+        en: {
+            '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}"
+        },
+        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}"
+        }
+    }
+    static observed = ['value', 'readonly:presence', "accept:csv", 'multiple:presence', "itemlist:presence", "dropzone:presence", "maxfilesize:number", "maxtotalsize:number"];
+    #accept;
+    #items;
+    #dropzone;
+    #warnings;
+    _type() {
+        return 'file';
+    }
+    static template = `
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
+            {{{{ slots.info }}}}
+        </div>
+        <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
+            <input class="form-control" data-tpl-type="type" placeholder=" " form="">
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        </div>
+        <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">
+            {{ #l10n:t('dropzonelabel') }}
+        </div>
+        <div data-ref="items" class="items"></div>
+        <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>
+        `,
+        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.#dropzone = this.querySelector("[data-ref=dropzone]");
+        this.#warnings = this.querySelector("ful-field-warnings");
+        this.accept = observed.accept;
+        this.multiple = observed.multiple;
+        this.itemlist = observed.itemlist;
+        this.dropzone = observed.dropzone;
+        this.maxfilesize = observed.maxfilesize;
+        this.maxtotalsize = observed.maxtotalsize;
+        this.#warnings.addEventListener('animationend', e => {
+            e.target.remove();
+        });
+        this.#items.addEventListener('click', (e) => {
+            if (!e.target.closest("button")) {
+                return;
+            }
+            const fileName = e.target.closest(".item").dataset.name;
+            const dt = new DataTransfer();
+            [...this.files].filter(f => f.name !== fileName).forEach(f => dt.items.add(f));
+            this.files = dt.files;
+            this.#update();
+        });
+        this.#dropzone.addEventListener("click", (e) => {
+            this.querySelector('input')?.click();
+        });
+
+        this.#dropzone.addEventListener("dragover", (e) => {
+            e.preventDefault();
+        });
+        this.#dropzone.addEventListener("drop", (e) => {
+            e.preventDefault();
+            const dt = new DataTransfer();
+            [...e.dataTransfer.items].filter(i => i.kind === 'file').forEach(i => dt.items.add(i.getAsFile()));
+            this.files = dt.files;
+            this.#update();
+        });
+        this._input.addEventListener("change", (e) => {
+            this.#update();
+        });
+    }
+    #formatByteSize(v) {
+        return (v > 1024 * 1024) ? `${Math.round(v / 1024 / 1024 * 100) / 100}MiB` : (v > 1024 ? `${Math.round(v / 1024 * 100) / 100}KiB` : `${v}B`);
+    }
+    #update() {
+        this.setCustomValidity();
+        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();
+        }
+    }
+    warning(key, args) {
+        this.template('warning').withOverlay({ key, args }).renderTo(this.#warnings);
+    }
+    #ensureAcceptable() {
+        if (!this.#accept) {
+            return;
+        }
+        const unacceptable = [...this.files]
+            .filter(file => this.#accept.some(type => !file.name.toLowerCase().endsWith(type.toLowerCase())));
+
+        if (unacceptable.length === 0) {
+            return;
+        }
+        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;
+    }
+    #ensureFileSizes() {
+        if (this.#maxfilesize === null) {
+            return;
+        }
+        const oversized = [...this.files]
+            .filter(file => file.size > this.#maxfilesize);
+        if (oversized.length === 0) {
+            return;
+        }
+        this.warning('maxfilesizeexceeded', this.#formatByteSize(this.#maxfilesize));
+        const dt = new DataTransfer();
+        [...this.files].filter(f => !oversized.includes(f)).forEach(f => dt.items.add(f));
+        this.files = dt.files;
+    }
+    #ensureTotalSize() {
+        if (this.#maxtotalsize === null) {
+            return;
+        }
+        const totalSize = [...this.files].reduce((acc, file) => acc + file.size, 0);
+        if (totalSize <= this.#maxtotalsize) {
+            return;
+        }
+        this.warning('maxtotalsizeexceeded', this.#formatByteSize(this.#maxtotalsize));
+        this.files = new DataTransfer().files;
+    }
+    get accept() {
+        return this.#accept;
+    }
+    set accept(vs) {
+        this._input.accept = vs.join(",");
+        this.#accept = vs;
+        this.reflect(() => {
+            this.setAttribute('accept', this._input.accept);
+        });
+    }
+    get multiple() {
+        return this._input.multiple;
+    }
+    set multiple(v) {
+        this._input.multiple = v;
+        this.reflect(() => {
+            this.setAttribute('multiple', this._input.multiple);
+        });
+    }
+    get files() {
+        return this._input.files;
+    }
+    set files(vs) {
+        this._input.files = vs;
+    }
+    get file() {
+        return this.files[0] ?? null;
+    }
+    set file(v) {
+        const dt = new DataTransfer();
+        dt.items.add(v);
+        this.files = dt.files;
+    }
+    get value() {
+        const names = Array.from(this._input.files).map(f => f.name);
+        return this.multiple ? names : (names[0] ?? null);
+    }
+    set value(v) {
+        //TODO:
+    }
+    #maxfilesize;
+    get maxfilesize() {
+        return this.#maxfilesize;
+    }
+    set maxfilesize(v) {
+        this.#maxfilesize = v;
+        this.reflect(() => {
+            this.setAttribute('maxfilesize', v);
+        });
+
+    }
+    #maxtotalsize;
+    get maxtotalsize() {
+        return this.#maxtotalsize;
+    }
+    set maxtotalsize(v) {
+        this.#maxtotalsize = v;
+        this.reflect(() => {
+            this.setAttribute('maxtotalsize', v);
+        });
+    }
+    #useItemlist;
+    get itemlist() {
+        return this.#useItemlist;
+    }
+    set itemlist(v) {
+        this.#useItemlist = v;
+        Attributes.toggle(this.#items, "hidden", !v);
+        this.reflect(() => {
+            Attributes.toggle(this, "itemlist", v);
+        });
+    }
+    #useDropzone;
+    get dropzone() {
+        return this.#useDropzone;
+    }
+    set dropzone(v) {
+        this.#useDropzone = v;
+        Attributes.toggle(this.#dropzone, "hidden", !v);
+        this.reflect(() => {
+            Attributes.toggle(this, "dropzone", v);
+        });
+    }    
+}
+
 class RemoteLoader {
     #http;
     #url;
@@ -1995,7 +2235,9 @@ class Select extends ParsedElement {
             this.#changed();
             this.#syncBadges();
         });
-
+        this.#input.addEventListener('change', e => {
+            e.stopPropagation();
+        });
         this.#input.addEventListener('blur', e => {
             e.stopPropagation();
             if (e.relatedTarget && this.contains(e.relatedTarget)) {
@@ -2061,6 +2303,7 @@ class Select extends ParsedElement {
             this.#syncBadges();
             this.#input.focus();
             this.#ddmenu.hide();
+            this.#input.value = '';
         });
         this.replaceChildren(fragment);
     }
@@ -2084,7 +2327,7 @@ class Select extends ParsedElement {
             b.innerText = v[0];
             return b;
         });
-        this.#badges.innerHTML = '';
+        this.#badges.replaceChildren();
         this.#badges.append(...badges);
     }
     set value(vs) {
@@ -2577,7 +2820,7 @@ class RemoteTableLoader {
         return await this.#http.request(this.#method, this.#url)
             .param("page", pageRequest.page)
             .param("size", pageRequest.size)
-            .param("sort", sortRequest.order ? `${sortRequest.sorter},${sortRequest.order}` : null)
+            .param("sort", sortRequest ? `${sortRequest.sorter},${sortRequest.order}` : null)
             .param("filters", filters.length > 0 ? JSON.stringify(Object.fromEntries(filters)) : null)
             .fetchJson();
     }
@@ -2723,7 +2966,7 @@ class Table extends ParsedElement {
         return await this.load(this.#latestRequest.pageRequest, this.#latestRequest.sortRequest, this.#latestRequest.filterRequest);
     }
     async load(pageRequest, sortRequest, filterRequest) {
-        this.#body.innerHTML = "";
+        this.#body.replaceChildren();
         this.#loading.removeAttribute("hidden", "");
         this.#feedback.setAttribute("hidden", "");
         this.#noAutoload.setAttribute("hidden", "");
@@ -3042,6 +3285,23 @@ class TextFilter extends ParsedElement {
     }
 }
 
+class LocalizationModule {
+    static t(k, ...args) {
+        //@ts-ignore
+        const format = this.l10n[this.language][k] ?? this.l10n['en'][k] ?? k;
+        if (args.length === 0) {
+            return format;
+        }
+        return format.replace(/{(\d+)}/g, (m, is) => {
+            return args[Number(is)];
+        });
+    }
+    static tl(k, args) {
+        return LocalizationModule.t(k, ...args);
+    }
+
+}
+
 class Plugin {
     configure(registry) {
         const httpClient = HttpClient.builder()
@@ -3049,22 +3309,13 @@ class Plugin {
             .withRedirectOnUnauthorized("/")
             .build();
         registry
-            .defineModule("l10n", {
-                t: function (k, ...args) {
-                    const format = this.l10n[this.language][k] ?? this.l10n['en'][k] ?? k;
-                    if (args.length === 0) {
-                        return format;
-                    }
-                    return format.replace(/{(\d+)}/g, (m, is) => {
-                        return args[Number(is)];
-                    });
-                }
-            })
+            .defineModule("l10n", LocalizationModule)
             .defineComponent('http-client', httpClient)
             .defineElement('ful-spinner', Spinner)
             .defineElement('ful-form', Form)
             .defineElement('ful-checkbox', Checkbox)
             .defineElement('ful-input', Input)
+            .defineElement('ful-input-file', InputFile)
             .defineElement('ful-local-date', LocalDate)
             .defineElement('ful-instant', Instant)
             .defineElement('ful-input-local-date', InputLocalDate)
@@ -3088,5 +3339,5 @@ class Plugin {
     }
 }
 
-export { AsyncEvents, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, Loaders, LocalDate, LocalDateFilter, LocalStorage, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage };
+export { AsyncEvents, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, Loaders, LocalDate, LocalDateFilter, LocalStorage, LocalizationModule, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage };
 //# sourceMappingURL=ful.mjs.map