@navette-js/support 0.0.0-stage → 1.0.0-beta.1

package/views/components/pagination.ejs

@@ -0,0 +1,88 @@
+<%# Pagination — port de la vue Blade filament::components.pagination.
+    Options : simple (précédent / suivant seulement), extremeLinks (premier / dernier), property (propriété liée au nombre par page). Sans curseur. %>
+<% const simple = locals.simple === true, extremeLinks = locals.extremeLinks === true, property = locals.property ?? 'tableRecordsPerPage'; %>
+<% const perPageSelect = () => { %>
+    <select class="fi-select-input" wire:model.live="<%= property %>">
+        <% for (const option of pageOptions) { %>
+            <option value="<%- option %>">
+                <%= option === 'all' ? t('filament::components/pagination.fields.records_per_page.options.all') : option %>
+            </option>
+        <% } %>
+    </select>
+<% } %>
+<% const item = (o) => { %>
+    <li class="<%- cls(['fi-pagination-item', { 'fi-active': o.active, 'fi-disabled': o.disabled }]) %>"<% if (o.rel) { %> rel="<%- o.rel %>"<% } %><% if (o.key) { %> wire:key="<%= id %>.pagination.<%- o.key %>"<% } %>>
+        <button<% if (o.ariaLabel) { %> aria-label="<%= o.ariaLabel %>"<% } %><% if (o.active) { %> aria-current="page"<% } %><% if (o.disabled) { %> aria-hidden="true" disabled<% } %> data-prevent-disabled-clicks type="button" class="fi-pagination-item-btn"<% if (o.click) { %> wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" wire:target="<%- targets %>" wire:click="<%= o.click %>"<% } %>>
+            <% if (o.icon) { %>
+                <%- icon(o.icon, { attributes: attrs({ 'aria-hidden': 'true', class: 'fi-pagination-item-icon' }) }) %>
+            <% } else { %>
+                <span class="fi-pagination-item-label">
+                    <%= o.label %>
+                </span>
+            <% } %>
+        </button>
+    </li>
+<% } %>
+<nav aria-label="<%= t('filament::components/pagination.label') %>" class="<%- cls(['fi-pagination', { 'fi-simple': simple }]) %>">
+    <% if (page.page > 1) { %>
+        <button class="fi-btn fi-size-md  fi-pagination-previous-btn" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" wire:target="<%- targets %>" rel="prev" wire:click="previousPage('page')" wire:key="<%= id %>.pagination.previous">
+            <%- loadingIndicator(attrs({ 'wire:loading.delay.default': '', 'wire:target': "previousPage('page')" })) %>
+            <%= t('filament::components/pagination.actions.previous.label') %>
+        </button>
+    <% } %>
+
+    <% if (!simple) { %>
+    <span class="fi-pagination-overview">
+        <%= tc('filament::components/pagination.overview', page.total, { first: number(page.from ?? 0), last: number(page.to ?? 0), total: number(page.total) }) %>
+    </span>
+    <% } %>
+
+    <% if (pageOptions.length > 1) { %>
+        <div class="fi-pagination-records-per-page-select-ctn">
+            <label class="fi-pagination-records-per-page-select fi-compact">
+                <div class="fi-input-wrp">
+                    <div class="fi-input-wrp-content-ctn">
+                        <% perPageSelect() %>
+                    </div>
+                </div>
+
+                <span class="fi-sr-only">
+                    <%= t('filament::components/pagination.fields.records_per_page.label') %>
+                </span>
+            </label>
+
+            <label class="fi-pagination-records-per-page-select">
+                <div class="fi-input-wrp">
+                    <div x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')" class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-input-wrp-prefix-has-label">
+                        <span class="fi-input-wrp-label">
+                            <%= t('filament::components/pagination.fields.records_per_page.label') %>
+                        </span>
+                    </div>
+
+                    <div class="fi-input-wrp-content-ctn">
+                        <% perPageSelect() %>
+                    </div>
+                </div>
+            </label>
+        </div>
+    <% } %>
+
+    <% if (page.page < page.lastPage) { %>
+        <button class="fi-btn fi-size-md  fi-pagination-next-btn" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" wire:target="<%- targets %>" rel="next" wire:click="nextPage('page')" wire:key="<%= id %>.pagination.next">
+            <%- loadingIndicator(attrs({ 'wire:loading.delay.default': '', 'wire:target': "nextPage('page')" })) %>
+            <%= t('filament::components/pagination.actions.next.label') %>
+        </button>
+    <% } %>
+
+    <% if (!simple && page.lastPage > 1) { %>
+        <ol class="fi-pagination-items">
+            <% if (extremeLinks && page.page > 1) { item({ rel: 'first', key: 'first', ariaLabel: t('filament::components/pagination.actions.first.label'), click: "gotoPage(1, 'page')", icon: 'm-chevron-double-left' }) } %>
+            <% if (page.page > 1) { item({ rel: 'prev', key: 'previous', ariaLabel: t('filament::components/pagination.actions.previous.label'), click: "previousPage('page')", icon: 'm-chevron-left' }) } %>
+            <% for (const element of elements) { %>
+                <% if (element === '...') { item({ disabled: true, label: '...' }) } else { item({ active: element === page.page, key: 'page.' + element, ariaLabel: t('filament::components/pagination.actions.go_to_page.label', { page: element }), click: 'gotoPage(' + element + ", 'page')", label: element }) } %>
+            <% } %>
+            <% if (page.page < page.lastPage) { item({ rel: 'next', key: 'next', ariaLabel: t('filament::components/pagination.actions.next.label'), click: "nextPage('page')", icon: 'm-chevron-right' }) } %>
+            <% if (extremeLinks && page.page < page.lastPage) { item({ rel: 'last', key: 'last', ariaLabel: t('filament::components/pagination.actions.last.label'), click: `gotoPage(${page.lastPage}, 'page')`, icon: 'm-chevron-double-right' }) } %>
+        </ol>
+    <% } %>
+</nav>