innoboxrr-form-core 2.5.0 → 2.6.0

package/README.md

@@ -65,7 +65,8 @@ setTheme({
 | Menús | `menu`, `menuList`, `menuItem`, `menuItemDanger`, `menuSeparator`, `menuLabel` |
 | Paleta de comandos | `command`, `commandInput`, `commandList`, `commandGroup`, `commandItem`, `commandEmpty` |
 | Avisos | `toast`, `toastSuccess`, `toastDanger`, `toastWarning`, `toastTitle`, `toastClose`, `toastRegion` |
-| Tabla | `table`, `tableNumeric`, `tableSticky`, `tableSelect`, `tableResizer`, `tableEmpty`, `bulkBar`, `bulkCount` |
+| Tabla | `table`, `tableNumeric`, `tableSticky`, `tableSelect`, `tableResizer`, `tableEmpty`, `bulkBar`, `bulkCount`, `tableSort`, `tableContainer`, `tableFooter`, `tablePager` |
+| Listado | `datatable`, `datatableFilters`, `toolbarSpacer` |
 | Edición en línea | `editable` |
 | Shell de aplicación | `shell`, `shellHeader`, `shellSidebar`, `shellMain` |
 
@@ -113,7 +114,16 @@ Los componentes de Vue y React envuelven exactamente este marcado.
 - **Menús**: `fe-menu` con `popover`, colocado con Floating UI.
 - **Tabla**: `fe-table-select` para la columna de casillas, `data-selected` en
   la fila, `fe-bulk-bar` para lo que se hace con la selección y
-  `fe-table-resizer` para cambiar el ancho de una columna.
+  `fe-table-resizer` para cambiar el ancho de una columna. Una columna
+  ordenable lleva `aria-sort` en el `<th>` y dentro un `<button
+  class="fe-table-sort">`, para que se ordene también con el teclado.
+- **Listado**: `fe-datatable` agrupa la `fe-toolbar` (con un
+  `fe-toolbar-spacer` que empuja lo que va a la derecha), el panel
+  `fe-datatable-filters`, la tabla dentro de un `fe-table-container` y el
+  `fe-table-footer` con el resumen y el `fe-table-pager`. El contenedor se
+  desplaza en horizontal cuando la tabla no cabe; para que además la cabecera
+  fija funcione al bajar, dale una altura máxima con
+  `--fe-table-max-height: 70vh`.
 
 Un `<dialog>` cerrado está oculto porque el navegador le pone `display: none`;
 por eso ninguna regla fija `display` fuera del estado `[open]`. Las capas que no

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-form-core",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "El nucleo agnostico de la interfaz innoboxrr: tema, iconos, estilos, archivos y zonas horarias.",
   "type": "module",
   "main": "index.js",

package/src/components.css

@@ -172,6 +172,10 @@
 .fe-select,
 .fe-textarea,
 .fe-file {
+    /* Con width: 100% y padding, sin border-box el control mide más que su
+       contenedor. Una aplicación que ya pone border-box a todo no lo nota; una
+       que no, ve una barra de desplazamiento en cada drawer. */
+    box-sizing: border-box;
     width: 100%;
     min-height: var(--fe-control-height);
     padding: 0 var(--fe-control-padding-x);
@@ -271,6 +275,7 @@
 .fe-button-secondary,
 .fe-button-danger,
 .fe-button-link {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -332,6 +337,7 @@
 /* Un botón que solo lleva un icono: cerrar un diálogo, abrir el menú de una
    fila. Cuadrado, para que el objetivo no dependa del ancho del glifo. */
 .fe-icon-button {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -625,6 +631,7 @@
 }
 
 .fe-dialog {
+    box-sizing: border-box;
     width: min(var(--fe-dialog-width), calc(100vw - 2 * var(--fe-space-4)));
     max-height: 85vh;
     padding: 0;
@@ -694,6 +701,7 @@
 /* Un drawer es un <dialog> pegado a un borde. El formulario de crear o
    editar se abre aquí y la tabla sigue a la vista, detrás. */
 .fe-drawer {
+    box-sizing: border-box;
     width: min(var(--fe-drawer-width), 100vw);
     max-width: 100vw;
     height: 100dvh;
@@ -803,6 +811,7 @@
 }
 
 .fe-menu-item {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: var(--fe-space-2);
@@ -892,6 +901,7 @@
 }
 
 .fe-command-input {
+    box-sizing: border-box;
     width: 100%;
     min-height: calc(var(--fe-control-height) * 1.4);
     padding: 0 var(--fe-space-5);
@@ -928,6 +938,7 @@
 }
 
 .fe-command-item {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: var(--fe-space-3);
@@ -1155,6 +1166,94 @@
     font-variant-numeric: tabular-nums;
 }
 
+/*
+ * Ordenar tiene que poderse hacer con el teclado, así que dentro del <th> va
+ * un botón. Hereda todo de la cabecera para no parecer un botón del navegador.
+ */
+.fe-table-sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fe-space-1);
+    padding: 0;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+.fe-table-sort:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 2px;
+    border-radius: var(--fe-radius-sm);
+}
+
+/* Mientras llega la página siguiente, la actual se sigue viendo, atenuada. */
+.fe-table[aria-busy='true'] tbody {
+    opacity: 0.6;
+}
+
+/*
+ * Una tabla más ancha que la pantalla se desplaza dentro de su contenedor, no
+ * ensancha la página. Con una altura máxima, la cabecera fija también funciona
+ * al bajar por un listado largo.
+ */
+.fe-table-container {
+    max-width: 100%;
+    max-height: var(--fe-table-max-height);
+    overflow: auto;
+}
+
+/* ============================================================
+   LISTADO
+   ============================================================ */
+
+/* Barra, filtros, tabla y pie de un listado, uno debajo de otro. */
+.fe-datatable {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* Lo que va detrás del separador en una barra se queda a la derecha. */
+.fe-toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+.fe-datatable > .fe-bulk-bar {
+    margin: var(--fe-space-2);
+}
+
+.fe-datatable-filters {
+    padding: var(--fe-space-4);
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-table-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--fe-space-3);
+    padding: var(--fe-space-2) var(--fe-space-4);
+    font-size: var(--fe-text-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--fe-text-muted);
+}
+
+.fe-table-pager {
+    display: flex;
+    align-items: center;
+    gap: var(--fe-space-2);
+}
+
+/* En un formulario ocupa todo el ancho; aquí empujaría las flechas fuera. */
+.fe-table-pager .fe-select {
+    width: auto;
+}
+
 /* ============================================================
    EDICION EN LINEA
    ============================================================ */
@@ -1168,6 +1267,14 @@
     min-height: 1.5em;
     padding: 0 var(--fe-space-1);
     margin: 0 calc(-1 * var(--fe-space-1));
+    /* Es un <button> para que se alcance con teclado, pero tiene que leerse
+       como el texto que muestra: sin el fondo, el borde ni la fuente que el
+       navegador le pone a un botón. */
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    background: none;
+    border: none;
     border-radius: var(--fe-radius-sm);
     border-bottom: 1px dashed transparent;
     cursor: text;

package/src/theme.js

@@ -128,6 +128,13 @@ export const defaultTheme = {
     tableEmpty: 'fe-table-empty',
     bulkBar: 'fe-bulk-bar',
     bulkCount: 'fe-bulk-count',
+    tableSort: 'fe-table-sort',
+    tableContainer: 'fe-table-container',
+    tableFooter: 'fe-table-footer',
+    tablePager: 'fe-table-pager',
+    datatable: 'fe-datatable',
+    datatableFilters: 'fe-datatable-filters',
+    toolbarSpacer: 'fe-toolbar-spacer',
 
     // EDICION EN LINEA
     editable: 'fe-editable',

package/src/tokens.css

@@ -128,6 +128,9 @@
     --fe-drawer-width: 32rem;
     --fe-command-width: 40rem;
     --fe-sidebar-width: 15rem;
+    /* Sin límite, la tabla crece con sus filas; con uno, la cabecera fija
+       funciona también al bajar por el listado. */
+    --fe-table-max-height: none;
 }
 
 /* La elección explícita de claro gana sobre un sistema en oscuro, de ahí el