@optionfactory/ful 4.0.5 → 4.0.7

package/dist/ful.mjs

@@ -1951,6 +1951,7 @@ class Select extends ParsedElement {
         await this.#loader.prefetch?.();
         const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
+        Attributes.forward('input-', this, this.#input);
         this.#badges = fragment.querySelector('badges');
 
         this.value = observed.value;
@@ -2399,15 +2400,33 @@ class SortButton extends ParsedElement {
 
 class Pagination extends ParsedElement {
     static observed = ["total:number", "current:number"];
+    static l10n = {
+        en: {
+            'showing': 'Page {0} of {1}',
+            'navigation': "Page navigation",
+            'previous': "Previous",
+            'next': "Next",
+        },
+        it: {
+            'showing': 'Pagina {0} di {1}',
+            'navigation': "Navigazione pagine",
+            'previous': "Precedente",
+            'next': "Successivo",
+        }
+    }
+    static config = {
+        prevIcon: 'bi bi-chevron-left',
+        nextIcon: 'bi bi-chevron-right',
+        reloadIcon: 'bi bi-arrow-clockwise',
+    }
     static template = `
-        <nav aria-label="Page navigation" class="user-select-none">
+        <nav data-tpl-aria-label="#l10n:t('navigation')" class="user-select-none">
             <ul class="pagination">
-                <li class="page-item ms-auto me-2" data-tpl-if="paginationLabel"> Showing page {{ curr.label }} of {{ total }}</li>
-                <li class="page-item ms-auto me-2" data-tpl-if="!paginationLabel"></li>
-                <li class="page-item reload me-2"><a role="button"><i class="bi bi-arrow-clockwise"></i></a></li>                
+                <li class="page-item ms-auto me-2 pagination-index"> {{ #l10n:t('showing', curr.label, total) }}</li>
+                <li class="page-item reload me-2"><a role="button"><i data-tpl-class="config.reloadIcon"></i></a></li>                
                 <li class="page-item prev">
-                    <a data-tpl-class="prev.enabled?'page-link':'page-link disabled'" aria-label="Previous" role="button" data-tpl-data-page="prev.index">
-                        <i aria-hidden="true" class="bi bi-chevron-left"></i>
+                    <a data-tpl-class="prev.enabled?'page-link':'page-link disabled'" data-tpl-aria-label="#l10n:t('previous')" role="button" data-tpl-data-page="prev.index">
+                        <i aria-hidden="true" data-tpl-class="config.prevIcon"></i>
                     </a>
                 </li>
                 <li class="page-item" data-tpl-each="pages" data-tpl-var="page">
@@ -2416,18 +2435,16 @@ class Pagination extends ParsedElement {
                     </a>
                 </li>
                 <li class="page-item next">
-                    <a data-tpl-class="next.enabled?'page-link':'page-link disabled'" aria-label="Next" role="button" data-tpl-data-page="next.index">
-                        <i aria-hidden="true" class="bi bi-chevron-right"></i>
+                    <a data-tpl-class="next.enabled?'page-link':'page-link disabled'" data-tpl-aria-label="#l10n:t('next')" role="button" data-tpl-data-page="next.index">
+                        <i aria-hidden="true" data-tpl-class="config.nextIcon"></i>
                     </a>
                 </li>
             </ul>
         </nav>
     `;
-    #paginationLabel;
     #total = 0;
     #current = 0;
     render({ observed }) {
-        this.#paginationLabel = this.hasAttribute('pagination-label');
         this.update(observed.current ?? 0, observed.total ?? 0);
         this.addEventListener('click', (/** @type any */evt) => {
             const el = evt.target.closest('a');
@@ -2463,8 +2480,7 @@ class Pagination extends ParsedElement {
                 pages.push({ index: n, label: n + 1 });
             }
         }
-        const paginationLabel = this.#paginationLabel;
-        this.template().withOverlay({ total, prev, curr, next, pages, paginationLabel }).renderTo(this);
+        this.template().withOverlay({ total, prev, curr, next, pages }).renderTo(this);
     }
     get total() {
         return this.#total;
@@ -2556,6 +2572,21 @@ class TableLoader{
 
 class Table extends ParsedElement {
     static slots = true;
+    static l10n = {
+        en: {
+            'notloaded': 'Start searching to see results.',
+            'error': 'Error while loading data:',
+            'nodata': 'No elements found.',
+        },
+        it: {
+            'notloaded': 'Avvia la ricerca per visualizzare i risultati.',
+            'error': 'Errore nel caricamento dei dati:',
+            'nodata': 'Nessun elemento trovato.',
+        }
+    }
+    static conf = {
+        sortIcon: '',
+    }
     static template = `
         <ful-form data-tpl-if="slots.filters">
             {{{{ slots.filters }}}}
@@ -2577,7 +2608,7 @@ class Table extends ParsedElement {
                         <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
                             <i class="bi bi-search" style="font-size: 40px; color: #BDC3CA"></i>
                             <p class="mt-3 mb-0" style="color: #BDC3CA">
-                                Avvia la ricerca per visualizzare i risultati...
+                                {{ #l10n:t('notloaded') }}
                             </p>
                         </td>
                     </tr>
@@ -2593,7 +2624,7 @@ class Table extends ParsedElement {
                     <tr>
                         <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
                             <div class="alert alert-danger">
-                                <p>Errore nel caricamento della tabella:</p>
+                                <p>{{ #l10n:t('error') }}</p>
                                 <p class="mb-0" data-ref="feedback-error"></p>
                             </div>
                         </td>
@@ -2610,7 +2641,7 @@ class Table extends ParsedElement {
         row: `
             <tr data-tpl-if="pageResponse.data.length == 0">
                 <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                    Nessun elemento trovato.
+                    {{ #l10n:t('nodata') }}
                 </td>
             </tr>
             <tr data-tpl-each="pageResponse.data" data-tpl-var="row">
@@ -2759,7 +2790,7 @@ class InstantFilter extends ParsedElement {
     render({ slots }) {
         const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
         const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ label, name }).render(this);
+        const fragment = this.template().withOverlay({ slots, label, name  }).render();
         this.#operator = fragment.querySelector('[data-ref=operator]');
         this.#value1 = fragment.querySelector('[data-ref=value1]');
         this.#value2 = fragment.querySelector('[data-ref=value2]');
@@ -2855,7 +2886,7 @@ class LocalDateFilter extends ParsedElement {
     render({ slots }) {
         const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
         const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ label, name }).render(this);
+        const fragment = this.template().withOverlay({ slots, label, name }).render();
         this.#operator = fragment.querySelector('[data-ref=operator]');
         this.#value1 = fragment.querySelector('[data-ref=value1]');
         this.#value2 = fragment.querySelector('[data-ref=value2]');
@@ -2945,7 +2976,7 @@ class TextFilter extends ParsedElement {
     render({ slots }) {
         const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
         const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ label, name }).render(this);
+        const fragment = this.template().withOverlay({ slots, label, name }).render();
         this.#operator = fragment.querySelector('[data-ref=operator]');
         this.#value = fragment.querySelector('[data-ref=value]');
         this.#fieldError = fragment.querySelector('ful-field-error');
@@ -3007,6 +3038,17 @@ 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)];
+                    });
+                }
+            })
             .defineComponent('http-client', httpClient)
             .defineElement('ful-spinner', Spinner)
             .defineElement('ful-form', Form)
@@ -3028,7 +3070,10 @@ class Plugin {
             .defineElement('ful-dropdown', Dropdown)
             .defineComponent("loaders:select", SelectLoader)
             .defineComponent("loaders:form", FormLoader)
-            .defineComponent("loaders:table", TableLoader);
+            .defineComponent("loaders:table", TableLoader)
+            .defineOverlay({
+                language: navigator?.language?.split("-")?.[0] ?? "en"
+            });
     }
 }