rl-core-front 0.11.2 → 0.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_utils/page-range.ts

@@ -0,0 +1,36 @@
+/** Um item da barra de páginas: o número da página, ou o buraco entre elas. */
+export type PageItem = number | "gap";
+
+/** Quantas páginas cabem sem precisar esconder nenhuma. */
+const SEM_BURACO = 7;
+
+/**
+ * A régua de páginas do rodapé: `1 2 3 4 … 18`.
+ *
+ * Primeira e última sempre aparecem — são os dois saltos que mais se usam —, e
+ * no meio fica a vizinhança de onde a pessoa está. Com poucas páginas não há o
+ * que esconder e todas saem; daí em diante a lista tem largura fixa, para o
+ * rodapé não mudar de tamanho a cada clique.
+ *
+ * `pageIndex` é o índice do TanStack (base zero); o que sai já é número de
+ * página (base um), que é o que se lê na tela.
+ */
+export const pageRange = (pageIndex: number, pageCount: number): PageItem[] => {
+  const total = Math.max(1, pageCount);
+  const atual = Math.min(Math.max(1, pageIndex + 1), total);
+
+  if (total <= SEM_BURACO) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  // Nas pontas, a janela se estende para o lado que tem páginas: perto do
+  // começo, mostrar "… 2 3 4 …" desperdiçaria o espaço da esquerda.
+  if (atual <= 3) {
+    return [1, 2, 3, 4, "gap", total];
+  }
+  if (atual >= total - 2) {
+    return [1, "gap", total - 3, total - 2, total - 1, total];
+  }
+
+  return [1, "gap", atual - 1, atual, atual + 1, "gap", total];
+};

package/src/components/ui/data-table.tsx

@@ -33,6 +33,7 @@ import { useMemo, useState } from "react";
 
 import { countConditions } from "#core/_utils/advanced-filter";
 import { activeFilterCount } from "#core/_utils/filter";
+import { pageRange } from "#core/_utils/page-range";
 import { Button } from "#core/components/ui/button";
 import { Card } from "#core/components/ui/card";
 import {
@@ -251,9 +252,20 @@ export function DataTable<T extends RowData>({
 
   return (
     <div>
-      <div className="mb-3 flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">{toolbar}</div>
-        <div className="flex items-center gap-2">
+      {/*
+        A barra quebra em vez de empurrar a página.
+
+        Sem `flex-wrap`, uma busca de 288px ao lado de "Novo" + "Filtros" +
+        "Colunas" passava da largura do celular, e quem rolava para o lado era o
+        documento inteiro: a tabela saía da tela com o cabeçalho junto. O
+        `min-w-0` é o par obrigatório disso — filho de flex não encolhe abaixo
+        do próprio conteúdo sem ele, e o `flex-wrap` sozinho não bastaria.
+      */}
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          {toolbar}
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
           {/* Filtro antes de colunas: filtrar é a ação do dia a dia, escolher
               coluna se faz uma vez e a tela guarda. */}
           {filtersEnabled && (
@@ -366,44 +378,78 @@ export function DataTable<T extends RowData>({
           </TableBody>
         </Table>
 
-        <div className="flex flex-col gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-center gap-3">
-            <select
-              value={pageSize}
-              onChange={(e) => table.setPageSize(Number(e.target.value))}
-              className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
-            >
-              {pageSizeOptions.map((n) => (
-                <option key={n} value={n}>
-                  {n} {t("table.perPage")}
-                </option>
-              ))}
-            </select>
-            <span>
-              {total} {t("table.results")}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
+        {/*
+          Três blocos, e a ordem tem motivo: quantos são à esquerda, para onde
+          ir no meio, e o tamanho da página à direita — o controle que se mexe
+          uma vez fica na ponta, e a navegação, que se usa o tempo todo, no
+          centro. Em tela estreita eles empilham em vez de espremer.
+        */}
+        <div className="flex flex-col items-center gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:flex-row sm:justify-between">
+          <span className="sm:flex-1">
+            {total} {t("table.results")}
+          </span>
+
+          <div className="flex items-center gap-1">
             <Button
-              variant="outline"
+              variant="ghost"
               size="icon"
+              aria-label={t("table.previousPage")}
               disabled={!table.getCanPreviousPage()}
               onClick={() => table.previousPage()}
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
-            <span>
-              {pageIndex + 1} / {Math.max(1, pageCount)}
-            </span>
+
+            {pageRange(pageIndex, pageCount).map((item, posicao) =>
+              item === "gap" ? (
+                // O buraco não é botão: `key` pela posição porque duas elipses
+                // são indistinguíveis entre si.
+                <span
+                  key={`gap-${posicao}`}
+                  className="px-1 text-muted-foreground"
+                >
+                  …
+                </span>
+              ) : (
+                <Button
+                  key={item}
+                  variant={item === pageIndex + 1 ? "default" : "ghost"}
+                  size="icon"
+                  // Quadrado de 40px como base, mas cresce com o número: a
+                  // página 128 não pode vazar do botão.
+                  className="w-auto min-w-10 px-2 tabular-nums"
+                  aria-current={item === pageIndex + 1 ? "page" : undefined}
+                  onClick={() => table.setPageIndex(item - 1)}
+                >
+                  {item}
+                </Button>
+              ),
+            )}
+
             <Button
-              variant="outline"
+              variant="ghost"
               size="icon"
+              aria-label={t("table.nextPage")}
               disabled={!table.getCanNextPage()}
               onClick={() => table.nextPage()}
             >
               <ChevronRight className="h-4 w-4" />
             </Button>
           </div>
+
+          <div className="sm:flex-1 sm:text-right">
+            <select
+              value={pageSize}
+              onChange={(e) => table.setPageSize(Number(e.target.value))}
+              className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
+            >
+              {pageSizeOptions.map((n) => (
+                <option key={n} value={n}>
+                  {n} {t("table.perPage")}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
       </Card>
 

package/src/components/ui/tabs.tsx

@@ -15,7 +15,16 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn("inline-flex", TRACK_CLASS, className)}
+    /*
+     * Seis abas não cabem num celular, e a fila inteira empurrava a página para
+     * o lado. Agora quem rola é a própria fila: `max-w-full` para ela parar na
+     * largura da tela, e `overflow-x-auto` para o resto continuar alcançável.
+     */
+    className={cn(
+      "inline-flex max-w-full overflow-x-auto",
+      TRACK_CLASS,
+      className,
+    )}
     {...props}
   />
 ));

package/src/components/ui/track.styles.ts

@@ -20,7 +20,9 @@ export const TRACK_CLASS =
  * opção selecionada sumir no tema escuro.
  */
 export const TRACK_ITEM_CLASS = [
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5",
+  // `shrink-0`: numa trilha que rola, a opção mantém o tamanho em vez de ser
+  // espremida até o texto virar duas letras.
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5",
   "text-sm font-medium ring-offset-background transition-all",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
   "disabled:pointer-events-none disabled:opacity-50",

package/src/i18n/messages/en.ts

@@ -118,6 +118,8 @@ export const en: Messages = {
     atLeastOne: "At least one column must remain visible",
     results: "results",
     perPage: "per page",
+    previousPage: "Previous page",
+    nextPage: "Next page",
     empty: "No records",
     emptyFiltered: "No records match this filter",
   },

package/src/i18n/messages/pt.ts

@@ -120,6 +120,8 @@ export const pt = {
     atLeastOne: "Pelo menos uma coluna deve permanecer visível",
     results: "resultados",
     perPage: "por página",
+    previousPage: "Página anterior",
+    nextPage: "Próxima página",
     empty: "Nenhum registro",
     emptyFiltered: "Nenhum registro para este filtro",
   },