diff --git a/docs/componentes-de-interfaz.md b/docs/componentes-de-interfaz.md index 2f45ca9..9c224e5 100644 --- a/docs/componentes-de-interfaz.md +++ b/docs/componentes-de-interfaz.md @@ -285,3 +285,13 @@ contrae el menú y conservan la selección y las ayudas del botón de navegació Componentes de @repo/rdx-ui independientes de los DTO, consultas y endpoints de Metis Desk. FieldSections recibe secciones, elementos con sectionId opcional y renderItem; presenta una cuadrícula plana cuando no hay secciones, o bloques desplegables accesibles con descripción y «Sin sección». Admite presentación de valores como listas de descripción y apertura ante errores externos. TemplateSectionsEditor recibe secciones, referencias de campos, nombres, textos traducidos, generador de identidad y onChange. Permite ordenar secciones/campos, editar nombre/descripción, asignar campos y mantener su obligatoriedad mediante SwitchField. El módulo consumidor conserva el estado en React Hook Form y genera UUID v7. Los helpers removeTemplateSection y copyTemplateLayout conservan referencias y remapean identidades respectivamente. No se modifican los componentes vendor. + +## Formularios modales adaptativos + +`FormDialog` admite `size="small" | "medium" | "large"`. Los formularios sencillos mantienen el tamaño pequeño; personas y usuarios emplean el intermedio. `wide` sigue siendo un alias del tamaño grande: 90 % del ancho disponible, con máximo de 1.200 px y márgenes en móvil. No se ensanchan automáticamente las altas sencillas. + +La cabecera permanece visible. Un formulario modal utiliza una raíz flex con altura mínima cero, `FormBody` para campos, errores y ayuda, y `FormActions` como hermano final fuera del cuerpo desplazable. Los botones permanecen dentro del formulario HTML original: se conservan envío por teclado, validación nativa, estados pendientes y cancelación. La ayuda queda al final del cuerpo, inmediatamente antes de las acciones. Los diálogos de consulta conservan el cuerpo desplazable y su pie externo. + +`FormSection` agrupa datos relacionados mediante título accesible y un borde discreto. Activos, recursos y plantillas lo utilizan para sus datos principales. Las características y las secciones del editor se distribuyen en dos bloques por fila cuando el contenedor dispone de al menos 900 px; los controles dentro de cada bloque mantienen una o dos columnas según el espacio. Una plantilla sin secciones puede aprovechar hasta tres columnas de características. Observaciones y ayuda ocupan toda la fila. La disposición responde al espacio del modal, no solo al ancho del navegador. + +El desplazamiento vertical se conserva cuando el contenido supera la altura disponible; no se ocultan campos ni se reduce artificialmente su tamaño para eliminarlo. No se introducen pestañas ni páginas nuevas sin una necesidad específica del formulario. diff --git a/modules/assets/src/common/locales/en.json b/modules/assets/src/common/locales/en.json index ee1db54..8f7c8dd 100644 --- a/modules/assets/src/common/locales/en.json +++ b/modules/assets/src/common/locales/en.json @@ -299,5 +299,9 @@ "assign": "Section", "help": "Organize fields without changing their values or requirements. Removing a section moves its fields to Unsectioned.", "empty": "This section has no fields yet." + }, + "formLayout": { + "identity": "Identification and assignment", + "template": "Template details" } } diff --git a/modules/assets/src/common/locales/es.json b/modules/assets/src/common/locales/es.json index 802892f..4a1a15b 100644 --- a/modules/assets/src/common/locales/es.json +++ b/modules/assets/src/common/locales/es.json @@ -299,5 +299,9 @@ "assign": "Sección", "help": "Organiza los campos sin cambiar sus valores ni su obligatoriedad. Al eliminar una sección, sus campos pasan a «Sin sección».", "empty": "Esta sección aún no tiene campos." + }, + "formLayout": { + "identity": "Identificación y asignación", + "template": "Datos de la plantilla" } } diff --git a/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx b/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx index e6db3c5..6929b1c 100644 --- a/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx +++ b/modules/assets/src/web/asset-relationships/end/ui/end-relationship-dialog.tsx @@ -1,4 +1,4 @@ -import { FormActions, FormDialog } from "@repo/rdx-ui/components/form-dialog"; +import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog"; import { Button } from "@repo/shadcn-ui/components/button"; import { useTranslation } from "react-i18next"; @@ -22,11 +22,13 @@ export function EndRelationshipDialog(props: EndRelationshipDialogProps) { open title={t("endRelationship")} > -
- {relationship.values.name} · {sourceName} → {targetName} -
-{t("endRelationshipConfirm")}
-+ {relationship.values.name} · {sourceName} → {targetName} +
+{t("endRelationshipConfirm")}
+