@edc-motor/ui 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/components/_form-field.scss

@@ -87,6 +87,23 @@ $icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
     cursor: pointer;
   }
 
+  // MITIGACIÓN del «baile» al hover en el modal de bloque (DPI fraccionario):
+  // dentro de un modal, el realce de hover/focus es INSTANTÁNEO. La
+  // transición de border-color/box-shadow fuerza ~10 repintados seguidos con
+  // un área de invalidación mayor que el propio input (el box-shadow pinta
+  // fuera de su caja) y, con las filas del esquema en columnas de ancho
+  // fraccional (auto-fit 1fr) y un devicePixelRatio no entero (125%/150%),
+  // esa re-rasterización repetida puede hacer temblar los campos VECINOS.
+  // Un único repintado por cambio de estado elimina el tembleque sin tocar
+  // la geometría ni el aspecto final.
+  .modal & {
+    &__input,
+    &__textarea,
+    &__select {
+      transition: none;
+    }
+  }
+
   &--error &__input,
   &--error &__textarea,
   &--error &__select {

package/scss/components/_form-row.scss

@@ -0,0 +1,125 @@
+@use "tokens" as *;
+
+// =========================================================
+// Sistema COMPARTIDO de filas y grupos de formulario
+// =========================================================
+// Un único lenguaje para TODOS los formularios modales del admin:
+// sustituye a los layouts ad hoc que había repartidos (el `__common-row` de
+// PageBlocks y las filas `--pair`/`--row`/`--image-group` de SchemaFields).
+//
+// PROHIBIDO auto-fit/auto-fill en todo el sistema: columnas FIJAS + cortes
+// EXPLÍCITOS de container query. Con auto-fit las pistas se re-resolvían
+// contra el ancho de `modal-body` (que depende de si hay scrollbar),
+// quedaban pistas fantasma a 0px y los `1fr` resultaban fraccionales
+// desiguales: al repintar con hover a DPI 125 %/150 % los campos vecinos
+// temblaban («baile» en modales largos). Con pistas fijas el layout es
+// idéntico en cada repintado.
+//
+// El contenedor `modal-body` lo define _modal.scss sobre el cuerpo del
+// modal: el patrón funciona en CUALQUIER modal y los cortes miden el ancho
+// REAL del formulario, no el del viewport.
+.form-row {
+  display: grid;
+  // Base: dos columnas fijas iguales.
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: $space-3;
+  align-items: start;
+
+  > * { min-width: 0; }
+
+  // Un checkbox como celda: flex para que se comporte como bloque de su
+  // celda junto a sus compañeros de fila.
+  > .checkbox { display: flex; }
+
+  // Tres columnas fijas iguales, para filas de 3 campos pequeños.
+  &--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+  // Columna izquierda MUCHO más ancha que la derecha (2:1): un textarea o
+  // wysiwyg a la izquierda con su campo pequeño natural al lado (p. ej. el
+  // select de alineación). 2fr y no 2.5fr: en el modal `md` (~520px útiles)
+  // 2:1 deja ~170px a la derecha — lo justo para un select con su etiqueta
+  // («Alineación del subtítulo»…) sin cortarse; con 2.5fr quedaría corto.
+  &--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+
+  // Fila de imagen (especial): la celda izquierda (el input de imagen, con
+  // su etiqueta) es UNA sola celda que llena TODO el alto de la fila; la
+  // derecha es una pila de filas (.form-row__stack) con los ajustes
+  // (posición, escalado, reparto de columnas…). El cuadro de arrastre NO se
+  // estira con la celda: conserva su tamaño natural y se centra en el
+  // espacio (margin-block auto en _image-upload.scss).
+  &--media {
+    align-items: stretch;
+
+    > :first-child {
+      display: flex;
+      flex-direction: column;
+      gap: $space-1;
+      min-width: 0;
+      min-height: 0;
+
+      // El input crece para llenar la celda (envoltorios de etiqueta
+      // incluidos: .form-field de TranslatableImage, etc.).
+      .image-upload {
+        flex: 1;
+        min-height: 0;
+      }
+    }
+  }
+
+  // Pila de filas apiladas dentro de una celda (la columna derecha de
+  // --media): mismo ritmo que la propia fila.
+  &__stack {
+    display: grid;
+    gap: $space-3;
+    align-content: start;
+  }
+
+  // Cortes explícitos (en vez del auto-fit):
+  // — la fila de 3 apila ANTES que el resto: por debajo de ~564px de
+  //   modal-body (3 campos de 180px mínimos cómodos + 2 gaps) ya no caben
+  //   tres columnas. Pasa DIRECTA a una columna, sin estadio intermedio
+  //   2+1 que dejaría una celda huérfana descolgada.
+  @container modal-body (max-width: 563px) {
+    &--3 { grid-template-columns: minmax(0, 1fr); }
+  }
+
+  // — TODAS las variantes apilan a una columna en el modal angosto.
+  @container modal-body (max-width: #{$bp-sm - 1px}) {
+    &,
+    &--3,
+    &--wide-left,
+    &--media {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}
+
+// Separador de grupos de campos relacionados dentro de un formulario:
+//   <fieldset class="form-fieldset"><legend>…</legend>…</fieldset>
+// Raya superior dashed (el mismo lenguaje que tenía la divisoria de la
+// sección General del form de bloque); el navegador corta la raya donde
+// asienta el legend (comportamiento nativo de fieldset+legend).
+.form-fieldset {
+  margin: 0;
+  padding: $space-3 0 0; // aire entre la raya y el primer campo
+  border: 0;
+  border-top: 1px dashed $border;
+  min-width: 0; // los fieldset traen min-width min-content; aquí estorba
+  display: grid;
+  gap: $space-4; // el mismo ritmo que .edit-modal__body
+
+  // Legend discreto asentado sobre la raya: pegado al borde izquierdo y
+  // con un poco de aire antes de que sigan los guiones.
+  > legend {
+    padding-inline: 0 $space-2;
+    font-size: $fs-13;
+    color: $text-2;
+  }
+
+  // El PRIMER grupo del formulario no lleva raya superior (el formulario
+  // empieza directamente con él; su legend hace de título).
+  &:first-child {
+    border-top: 0;
+    padding-top: 0;
+  }
+}

package/scss/components/_index.scss

@@ -3,6 +3,7 @@
 @use "icon-button";
 @use "motor-badge";
 @use "form-field";
+@use "form-row";
 @use "base-select";
 @use "base-pagination";
 @use "search-select";

package/src/components/AppRightSidebar.vue

@@ -59,10 +59,17 @@ const { hasContent, collapsed, mobileOpen, overlay, title, isOpen, toggle, close
 const OVERLAY_BREAKPOINT = 900
 
 function checkOverlay() {
-  overlay.value = props.overlayAlways || window.innerWidth < OVERLAY_BREAKPOINT
+  overlay.value =
+    props.overlayAlways || (typeof window !== 'undefined' && window.innerWidth < OVERLAY_BREAKPOINT)
   if (!overlay.value) mobileOpen.value = false
 }
 
+// EAGER, en el propio setup (no esperar a mounted): que no exista NI UN
+// frame en el que overlayAlways pudiera pintarse como columna atracada
+// (p. ej. si el singleton del composable se recrea en caliente con HMR y
+// `overlay` vuelve a su valor inicial `false`).
+checkOverlay()
+
 // Si el consumidor cambia el modo en caliente, el estado se recalcula.
 watch(() => props.overlayAlways, checkOverlay)
 
@@ -87,8 +94,13 @@ const handleLabel = computed(() => (isOpen.value ? props.closeLabel : props.open
 
 // Desplegada en ANCHO: el cascarón le hace hueco (body:has en su scss).
 // hasContent va en la clase porque v-show (display: none) no saca al aside
-// de los selectores :has.
-const docked = computed(() => hasContent.value && !overlay.value && !collapsed.value)
+// de los selectores :has. Con `overlayAlways`, `--docked` es imposible por
+// construcción (aunque `overlay` aún no se hubiera recalculado): el
+// cascarón no puede hacerle hueco JAMÁS y el drawer estrecho es la única
+// versión que existe.
+const docked = computed(
+  () => !props.overlayAlways && hasContent.value && !overlay.value && !collapsed.value,
+)
 </script>
 
 <template>