@edc-motor/admin-kit 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "EdC Motor — kit del panel de administración: layout, gestores CRUD, imágenes, PDF, páginas, configuración, usuarios y copias (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edc-motor/ui": "^0.5.3",
+    "@edc-motor/ui": "^0.5.5",
     "axios": "^1.7.0"
   },
   "peerDependencies": {

package/scss/components/_manager-card.scss

@@ -368,40 +368,50 @@
 
   // Campos del bloque seleccionado: etiqueta + valor; los valores largos se
   // recortan a unas pocas líneas.
-  // Campo del panel de bloque: «Label: valor» EN LÍNEA; las imágenes van
-  // apiladas (is-stacked), con la miniatura debajo del label.
+  // Campo del panel de bloque: «Label: valor» como UN ÚNICO PÁRRAFO corrido
+  // — dt y dd van en línea, el valor arranca tras los dos puntos y, al
+  // envolver, ocupa el ancho completo bajo el label (nada de dos columnas).
+  // El clamp de líneas vive ahora en el PÁRRAFO entero (el -webkit-box no
+  // convive con hijos inline sueltos, así que recorta label+valor juntos:
+  // con labels de una palabra, en la práctica es el mismo recorte de antes).
+  // Las imágenes van apiladas (is-stacked), con la miniatura bajo el label.
   &__field {
-    display: flex;
-    align-items: baseline;
-    gap: $space-1;
     min-width: 0;
     font-size: $fs-13;
+    overflow-wrap: anywhere;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    overflow: hidden;
 
     dt {
-      flex: none;
+      display: inline;
       color: $text-3;
       font-size: $fs-12;
       text-transform: uppercase;
       letter-spacing: 0.04em;
 
-      &::after { content: ':'; }
+      // El hueco tras los dos puntos va en margen: Vue condensa el
+      // whitespace entre <dt> y <dd> y en línea quedarían pegados.
+      &::after {
+        content: ':';
+        margin-inline-end: 0.4em;
+      }
     }
 
     dd {
+      display: inline;
       margin: 0;
-      min-width: 0;
       color: $text-2;
-      overflow-wrap: anywhere;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 4;
-      line-clamp: 4;
-      overflow: hidden;
     }
 
     &.is-stacked {
       display: grid;
       gap: 2px;
+      -webkit-line-clamp: none;
+      line-clamp: none;
+      overflow: visible;
 
       dt::after { content: none; }
     }

package/scss/components/_page-blocks.scss

@@ -208,6 +208,20 @@
   // cortarse (180px sobraba de aire).
   &__field-align { flex: 0 0 140px; }
 
+  // Fila declarada en el esquema (Field::row): el grupo baja por recursión
+  // como un .schema-fields anidado — aquí solo se reparte en columnas
+  // iguales MIENTRAS QUEPAN (auto-fit: con poco ancho van cayendo solas);
+  // el checkbox se centra en vertical junto a sus compañeros de fila.
+  &__field--pair > .schema-fields {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: $space-3;
+    align-items: start;
+
+    > .schema-fields__field:has(> .schema-fields__field-main > .checkbox) {
+      align-self: center;
+    }
+  }
+
   // Imagen a dos columnas: el input a la izquierda, sus ajustes (posición,
   // escalado, reparto de columnas) apilados a la derecha. `stretch` para que
   // la columna de la imagen llene el alto de la fila; el cuadro de arrastre
@@ -253,6 +267,9 @@
     &__field-align { flex-basis: auto; }
 
     &__field--image-group { grid-template-columns: 1fr; }
+
+    // Las filas declaradas (Field::row) apilan en el modal angosto.
+    &__field--pair > .schema-fields { grid-template-columns: 1fr; }
   }
 
   &__color,

package/src/content/SchemaFields.vue

@@ -43,6 +43,8 @@ export interface FieldSchema {
   fields?: FieldSchema[] | null
   /** Para entity: endpoint de opciones del admin. */
   options_url?: string | null
+  /** Fila declarada en el esquema (Field::row): mismo nombre = misma fila. */
+  row?: string | null
 }
 
 const props = withDefaults(
@@ -76,6 +78,13 @@ const emit = defineEmits<{ 'update:modelValue': [value: Record<string, unknown>]
 //    (`image_position`, `image_fit`, `image_columns`) en la misma lista se
 //    agrupa con ellos — columna 1 la imagen, columna 2 los ajustes
 //    apilados.
+// 3) Filas DECLARADAS en el esquema (Field::row('nombre')): los campos que
+//    comparten `row` van juntos en una fila de columnas iguales mientras
+//    quepan (auto-fit; en un modal angosto apilan). Se pintan por RECURSIÓN
+//    sobre este mismo componente (los compañeros pierden su `row` al bajar,
+//    para no re-agrupar en bucle). La fila declarada es intención EXPLÍCITA
+//    del esquema: gana a las convenciones 1 y 2 — un campo con `row` queda
+//    fuera del emparejado implícito (tanto de origen como de destino).
 const IMAGE_SETTING_KEYS = ['image_position', 'image_fit', 'image_columns']
 
 interface LayoutItem {
@@ -84,6 +93,8 @@ interface LayoutItem {
   align?: FieldSchema
   /** Ajustes de imagen (image_position/fit/columns) que viajan con `field`. */
   imageSettings?: FieldSchema[]
+  /** Campos de una fila declarada (Field::row), este incluido y sin `row`. */
+  rowFields?: FieldSchema[]
 }
 
 const layout = computed<LayoutItem[]>(() => {
@@ -92,32 +103,52 @@ const layout = computed<LayoutItem[]>(() => {
   const consumed = new Set<string>() // claves ya emparejadas con otro campo
 
   for (const field of props.fields) {
-    if (field.type !== 'select' || !field.key.endsWith('_align')) continue
+    if (field.type !== 'select' || !field.key.endsWith('_align') || field.row) continue
     const base = field.key.slice(0, -'_align'.length)
     if (!base) continue // el "align" general no tiene prefijo
     const baseKey = byKey.has(base) ? base : byKey.has(`${base}_text`) ? `${base}_text` : null
-    if (!baseKey) continue
+    if (!baseKey || byKey.get(baseKey)?.row) continue // el base va en fila declarada
     alignOf.set(baseKey, field)
     consumed.add(field.key)
   }
 
   const imageSettingsOf = new Map<string, FieldSchema[]>()
   for (const field of props.fields) {
-    if (field.key !== 'image' || field.type !== 'image') continue
+    if (field.key !== 'image' || field.type !== 'image' || field.row) continue
     const settings = IMAGE_SETTING_KEYS.map((key) => byKey.get(key)).filter(
-      (f): f is FieldSchema => !!f,
+      (f): f is FieldSchema => !!f && !f.row,
     )
     if (!settings.length) continue
     imageSettingsOf.set(field.key, settings)
     settings.forEach((f) => consumed.add(f.key))
   }
 
+  // Filas declaradas: agrupa por nombre de fila los campos aún libres (sin
+  // pareja de align/imagen). El grupo se pinta donde va su PRIMER campo.
+  const rowGroups = new Map<string, FieldSchema[]>()
+  for (const field of props.fields) {
+    if (!field.row) continue
+    const group = rowGroups.get(field.row) ?? []
+    group.push(field)
+    rowGroups.set(field.row, group)
+  }
+  const rowFieldsOf = new Map<string, FieldSchema[]>()
+  for (const group of rowGroups.values()) {
+    if (group.length < 2) continue // solo, se pinta como siempre
+    rowFieldsOf.set(
+      group[0].key,
+      group.map((f) => ({ ...f, row: null })),
+    )
+    group.slice(1).forEach((f) => consumed.add(f.key))
+  }
+
   return props.fields
     .filter((f) => !consumed.has(f.key))
     .map((f) => ({
       field: f,
       align: alignOf.get(f.key),
       imageSettings: imageSettingsOf.get(f.key),
+      rowFields: rowFieldsOf.get(f.key),
     }))
 })
 
@@ -211,8 +242,23 @@ function addLabel(): string {
 
 <template>
   <div class="schema-fields">
-    <template v-for="{ field, align, imageSettings } in layout" :key="field.key">
+    <template v-for="{ field, align, imageSettings, rowFields } in layout" :key="field.key">
+      <!-- Fila declarada (Field::row): los campos del grupo por recursión,
+           en columnas iguales (los compañeros bajan sin `row`) -->
+      <div v-if="rowFields" class="schema-fields__field schema-fields__field--pair">
+        <SchemaFields
+          :fields="rowFields"
+          :model-value="modelValue"
+          :locales="locales"
+          :api="api"
+          :icons="icons"
+          :rich-labels="richLabels"
+          :translate="translate"
+          @update:model-value="(v) => emit('update:modelValue', v)"
+        />
+      </div>
       <div
+        v-else
         class="schema-fields__field"
         :class="{
           'schema-fields__field--row': !!align,