From c7fa4ad29193cd40b2be209bb98d282c3edddcc4 Mon Sep 17 00:00:00 2001 From: David Date: Sat, 17 Oct 2026 15:48:54 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20indicador=20de=20posici=C3=B3?= =?UTF-8?q?n=20en=20campos=20de=20secciones=20y=20actualizar=20documentaci?= =?UTF-8?q?=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/componentes-de-interfaz.md | 2 +- docs/patron-de-dialogos.md | 4 ++++ packages/rdx-ui/src/components/template-section-fields.tsx | 6 ++++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/componentes-de-interfaz.md b/docs/componentes-de-interfaz.md index fbd2ab7..b0ccd8c 100644 --- a/docs/componentes-de-interfaz.md +++ b/docs/componentes-de-interfaz.md @@ -590,7 +590,7 @@ URLs de vista previa se liberan al cambiar de archivo o desmontar el componente. El alta y la edición de plantillas de activos y recursos agrupan los datos generales con `FormSection` e incorporan campos desde las cabeceras de sus grupos. `TemplateSectionsEditor` permite secciones apiladas o una cuadrícula responsive mediante `sectionLayout="stack" | "responsive"`, con una cabecera numerada sobre fondo diferenciado que contiene el input del nombre, el asa de arrastre y las acciones de orden y eliminación. El cuerpo conserva la descripción y un área de campos separada por un borde. `TemplateSectionEditor` encapsula cada sección con `Collapsible`: todas empiezan abiertas y un botón de cabecera permite plegarlas con ratón o teclado. El nombre, el asa y las acciones siguen visibles al plegar. El contenido permanece montado para conservar los controles; si la validación nativa detecta un control inválido oculto, la sección se abre antes de que el navegador lo enfoque. La apertura se conserva por identidad al reordenar y no se guarda como parte de la plantilla. Los editores de activos y recursos usan la cuadrícula responsive: una columna hasta 1.000 px de ancho disponible y dos a partir de ese umbral, con separación de 16 px y tarjetas de igual altura en cada fila, determinada por la sección más alta. El orden recorre cada fila de izquierda a derecha y se conserva en el DOM, la numeración, el teclado y el arrastre; la altura de cada fila se recalcula al plegar o desplegar sus secciones, manteniendo ambas tarjetas con la misma altura. El bloque «Sin sección» permanece debajo, a ancho completo. -`TemplateSectionFields` muestra un título traducido y el número de campos. Cada campo tiene fondo propio. En la presentación `cards`, separa su nombre y acciones de la configuración de obligatoriedad y asignación, cuyo selector conserva una etiqueta visible; los editores de plantillas de activos y recursos utilizan la presentación `compact` descrita más abajo. Los campos se distribuyen en dos columnas a partir de 700 px de su propio grupo y en una para anchos menores; cada grupo establece su contenedor para evitar columnas demasiado estrechas cuando las secciones se muestran en paralelo. El bloque «Sin sección» se diferencia con borde discontinuo; las secciones vacías conservan un mensaje explícito. Se reutilizan los colores semánticos del tema para mantener el contraste en modo claro y oscuro. +`TemplateSectionFields` muestra un título traducido y el número de campos. Cada fila presenta un indicador compacto de posición y total (`1/3`, `2/3`, etc.), junto al asa de ordenación. Se calcula dentro de cada sección o bloque «Sin sección» y se actualiza al reordenar, añadir, mover o quitar campos, tanto en `cards` como en `compact`. La misma información forma parte del nombre accesible del asa. Cada campo tiene fondo propio. En la presentación `cards`, separa su nombre y acciones de la configuración de obligatoriedad y asignación, cuyo selector conserva una etiqueta visible; los editores de plantillas de activos y recursos utilizan la presentación `compact` descrita más abajo. Los campos se distribuyen en dos columnas a partir de 700 px de su propio grupo y en una para anchos menores; cada grupo establece su contenedor para evitar columnas demasiado estrechas cuando las secciones se muestran en paralelo. El bloque «Sin sección» se diferencia con borde discontinuo; las secciones vacías conservan un mensaje explícito. Se reutilizan los colores semánticos del tema para mantener el contraste en modo claro y oscuro. ### Orden mediante arrastre y teclado diff --git a/docs/patron-de-dialogos.md b/docs/patron-de-dialogos.md index 3c5c569..f4f7d3a 100644 --- a/docs/patron-de-dialogos.md +++ b/docs/patron-de-dialogos.md @@ -56,6 +56,10 @@ estable y la ayuda inmediatamente encima del pie del modal. - Mantener más separación entre grupos principales que entre controles relacionados. En el patrón de plantillas, `TemplateMetadataSection` deja 36 px antes del grupo de secciones (20 px del cuerpo y 16 px adicionales); las columnas y tarjetas se separan 16 px. +- En editores de campos agrupados por secciones, mostrar en cada fila su posición + dentro del grupo como `1/3`, `2/3`, etc. Reiniciar la numeración en cada sección + y en «Sin sección», y derivarla del orden actual, también después de mover, + añadir o quitar campos. Mantener esta información en el nombre accesible del asa. - Situar las acciones locales en la cabecera del grupo al que afectan. Por ejemplo, «Añadir campo» se ofrece en «Campos» y lleva implícita la sección de destino. diff --git a/packages/rdx-ui/src/components/template-section-fields.tsx b/packages/rdx-ui/src/components/template-section-fields.tsx index cf70bb0..a1c9683 100644 --- a/packages/rdx-ui/src/components/template-section-fields.tsx +++ b/packages/rdx-ui/src/components/template-section-fields.tsx @@ -162,6 +162,12 @@ export function TemplateSectionFields({ aria-describedby={`${prefix}-reorder-help`} label={`${labels.reorder}: ${name} (${index + 1}/${grouped.length})`} /> + {layout === "compact" && requiredSwitch}