@edc-motor/admin-kit 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "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.6",
+    "@edc-motor/ui": "^0.5.8",
     "axios": "^1.7.0"
   },
   "peerDependencies": {

package/scss/components/_page-blocks.scss

@@ -143,36 +143,10 @@
 
   &__flags { grid-area: flags; display: flex; gap: $space-1; }
 
-  // Sección "General": ARRIBA del formulario (antes al fondo, como "Ajustes
-  // comunes", y pasaba desapercibida), con su titulito discreto — fila 1:
-  // anchura + bloque padre; fila 2: los interruptores; fila 3: color de
-  // fondo + alineación general del bloque. Los campos del TIPO van después.
-  &__common {
-    border-bottom: 1px dashed $border;
-    padding-bottom: $space-4;
-    display: grid;
-    gap: $space-3;
-
-    &-title {
-      color: $text-2;
-      font-size: $fs-13;
-    }
-  }
-
-  // Cada fila de General: dos columnas iguales, apiladas en un modal
-  // angosto (container query sobre el cuerpo del modal, no el viewport).
-  &__common-row {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: $space-3;
-    align-items: start;
-
-    > .checkbox { display: flex; }
-
-    @container modal-body (max-width: #{$bp-sm - 1px}) {
-      grid-template-columns: 1fr;
-    }
-  }
+  // La sección "General" del modal de bloque y los campos del tipo van
+  // ahora en fieldsets del sistema compartido del ui (.form-fieldset con
+  // legend + filas .form-row): mismo lenguaje que el resto de formularios
+  // del admin. Aquí ya no queda CSS propio para ello.
 
   // Bloques anidados (parent_id, sin límite de niveles): sangría por
   // profundidad REAL — `--depth` lo pone el componente en línea.
@@ -190,88 +164,6 @@
 
   &__field-main { min-width: 0; }
 
-  // Alineación junto a su campo: input flexible + select de ancho
-  // contenido (~180px). En un modal angosto (container query sobre el
-  // cuerpo del modal, no el viewport) se apilan, el select debajo.
-  &__field--row {
-    display: flex;
-    // ARRIBA (no al fondo): con un textarea alto (p. ej. el subtítulo) el
-    // select de alineación debe quedar a la altura de las etiquetas, no
-    // descolgado al fondo de la fila.
-    align-items: flex-start;
-    gap: $space-3;
-
-    .schema-fields__field-main { flex: 1 1 0; }
-  }
-
-  // Ancho justo para "Centrado"/"Izquierda" + etiqueta en es/en/eu sin
-  // 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
-  // YA NO se estira con ella (0.4.28): conserva su tamaño natural (160×160)
-  // y se centra en el espacio — el centrado vive en el componente
-  // (_image-upload.scss de @edc-motor/ui), común a todos los inputs.
-  &__field--image-group {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: $space-3;
-    align-items: stretch;
-
-    .schema-fields__field-main {
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-    }
-
-    .schema-fields__image {
-      display: flex;
-      flex-direction: column;
-      gap: $space-1;
-      flex: 1;
-      min-height: 0;
-    }
-
-    .image-upload {
-      flex: 1;
-      min-height: 0;
-    }
-  }
-
-  &__field-image-settings {
-    display: grid;
-    gap: $space-3;
-  }
-
-  @container modal-body (max-width: #{$bp-sm - 1px}) {
-    &__field--row {
-      flex-direction: column;
-      align-items: stretch;
-    }
-    &__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,
   &__image {
     display: grid;
@@ -319,3 +211,17 @@
     font-weight: 600;
   }
 }
+
+// Encaje de SchemaFields con las filas del sistema compartido (.form-row,
+// @edc-motor/ui). Un .schema-fields que llega como HIJO directo de una fila
+// (la recursión de las filas declaradas Field::row, o los mini-SchemaFields
+// de la sección General de PageBlocks) se DISUELVE (display: contents): sus
+// campos pasan a ser celdas directas de la fila — sin envoltorios que
+// rompan el grid ni re-aniden gaps.
+.form-row > .schema-fields { display: contents; }
+
+// El checkbox de un campo del esquema se centra en vertical junto a sus
+// compañeros de fila (que llevan etiqueta encima y quedarían descolgados).
+.form-row .schema-fields__field:has(> .schema-fields__field-main > .checkbox) {
+  align-self: center;
+}

package/src/content/PageBlocks.vue

@@ -660,13 +660,14 @@ defineExpose({ reload: load })
     >
       <template v-if="modalType">
         <!-- General ARRIBA del todo (antes iba al fondo, como "Ajustes
-             comunes", y pasaba desapercibida): anchura + bloque padre;
-             los interruptores; color de fondo + alineación general del
-             bloque. Los campos del tipo van DESPUÉS. -->
-        <div class="page-blocks__common">
-          <span class="page-blocks__common-title">{{ L.common }}</span>
-
-          <div class="page-blocks__common-row">
+             comunes", y pasaba desapercibida), como fieldset del sistema
+             compartido (mismo lenguaje que el resto de formularios; el
+             primero no lleva raya): anchura + bloque padre; los
+             interruptores; color de fondo + alineación general. -->
+        <fieldset class="form-fieldset">
+          <legend>{{ L.common }}</legend>
+
+          <div class="form-row">
             <SchemaFields
               v-model="form"
               :fields="generalWidthFields"
@@ -682,12 +683,12 @@ defineExpose({ reload: load })
             />
           </div>
 
-          <div class="page-blocks__common-row">
+          <div class="form-row">
             <BaseCheckbox v-model="formPrintable" :label="L.printable" />
             <BaseCheckbox v-model="formIndexable" :label="L.indexable" />
           </div>
 
-          <div class="page-blocks__common-row">
+          <div class="form-row">
             <SchemaFields
               v-model="form"
               :fields="generalBackgroundFields"
@@ -703,17 +704,22 @@ defineExpose({ reload: load })
               :translate="translate"
             />
           </div>
-        </div>
-
-        <SchemaFields
-          v-model="form"
-          :fields="typeFieldsWithAligns"
-          :locales="locales"
-          :api="api"
-          :icons="icons"
-          :rich-labels="richLabels"
-          :translate="translate"
-        />
+        </fieldset>
+
+        <!-- Los campos del TIPO, en su propio fieldset (la raya dashed
+             separa General del contenido, como antes). -->
+        <fieldset class="form-fieldset">
+          <legend>{{ L.panelContent }}</legend>
+          <SchemaFields
+            v-model="form"
+            :fields="typeFieldsWithAligns"
+            :locales="locales"
+            :api="api"
+            :icons="icons"
+            :rich-labels="richLabels"
+            :translate="translate"
+          />
+        </fieldset>
       </template>
     </EditModal>
 

package/src/content/SchemaFields.vue

@@ -15,6 +15,7 @@ import {
   RichTextInput,
   TranslatableImage,
   TranslatableInput,
+  type ColorPreset,
   type RichIcon,
   type RichTextLabels,
   type SelectOption,
@@ -67,24 +68,30 @@ const emit = defineEmits<{ 'update:modelValue': [value: Record<string, unknown>]
 
 // Convenciones genéricas de agrupado (doc 03 ampliado):
 //
+// El layout se pinta con las filas del sistema compartido del ui
+// (.form-row y variantes: columnas FIJAS + cortes de container query sobre
+// modal-body; nada de auto-fit):
+//
 // 1) Alineaciones junto a su campo: un select `<base>_align` cuyo campo
 //    `<base>` (o `<base>_text`, caso de `button_align`/`button_text`) esté
-//    en la MISMA lista se pinta junto a él, en una fila de dos columnas
-//    (PageBlocks inyecta title_align/subtitle_align —comunes del motor—
-//    junto a title/subtitle antes de pasar la lista aquí). El `align`
-//    general del bloque no tiene campo objetivo ("align" no acaba en
-//    "_align" con un prefijo no vacío) y se queda fuera de esta pareja.
-// 2) Imagen a dos columnas: el campo `image` con alguno de sus ajustes
-//    (`image_position`, `image_fit`, `image_columns`) en la misma lista se
-//    agrupa con ellos — columna 1 la imagen, columna 2 los ajustes
-//    apilados.
+//    en la MISMA lista se pinta junto a él en una .form-row--wide-left —
+//    el campo (input/textarea/wysiwyg) ancho a la izquierda, el select
+//    estrecho a la derecha (PageBlocks inyecta title_align/subtitle_align
+//    —comunes del motor— junto a title/subtitle antes de pasar la lista
+//    aquí). El `align` general del bloque no tiene campo objetivo ("align"
+//    no acaba en "_align" con un prefijo no vacío) y queda fuera.
+// 2) Imagen a dos columnas (.form-row--media): el campo `image` con alguno
+//    de sus ajustes (`image_position`, `image_fit`, `image_columns`) en la
+//    misma lista se agrupa con ellos — la celda izquierda (el input) llena
+//    todo el alto de la fila; la derecha es la pila de ajustes.
 // 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).
+//    comparten `row` van juntos en una .form-row (--3 si son 3+; 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; el .schema-fields anidado se disuelve por CSS).
+//    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 {
@@ -196,6 +203,16 @@ function selectOptions(field: FieldSchema): SelectOption[] {
   }))
 }
 
+/** Presets DINÁMICOS de un campo color (sus options, valores token:* — hoy
+ *  solo el `background` común de los bloques los declara): mismas etiquetas
+ *  y mismo camino i18n que las opciones de un select. */
+function colorPresets(field: FieldSchema): ColorPreset[] {
+  return Object.entries(field.options ?? {}).map(([value, text]) => ({
+    value,
+    label: props.translate?.(`blockOptions.${field.key}.${value}`, text) ?? text,
+  }))
+}
+
 // --- Anidados (group / repeater) ---
 
 function groupValue(field: FieldSchema): Record<string, unknown> {
@@ -243,9 +260,15 @@ function addLabel(): string {
 <template>
   <div class="schema-fields">
     <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">
+      <!-- Fila declarada (Field::row): los campos del grupo por recursión
+           sobre una .form-row del ui (columnas fijas: 2, o 3 si la fila trae
+           3+ campos; el .schema-fields anidado se disuelve por CSS y los
+           compañeros bajan sin `row`) -->
+      <div
+        v-if="rowFields"
+        class="schema-fields__field form-row"
+        :class="{ 'form-row--3': rowFields.length >= 3 }"
+      >
         <SchemaFields
           :fields="rowFields"
           :model-value="modelValue"
@@ -257,14 +280,45 @@ function addLabel(): string {
           @update:model-value="(v) => emit('update:modelValue', v)"
         />
       </div>
-      <div
-        v-else
-        class="schema-fields__field"
-        :class="{
-          'schema-fields__field--row': !!align,
-          'schema-fields__field--image-group': !!imageSettings,
-        }"
-      >
+
+      <!-- Fila de imagen (convención 2), el caso especial del sistema: el
+           input de imagen es UNA sola celda a todo el alto (izquierda) y los
+           ajustes (posición, escalado, reparto de columnas) van apilados en
+           la columna derecha (.form-row__stack) -->
+      <div v-else-if="imageSettings" class="schema-fields__field form-row form-row--media">
+        <TranslatableImage
+          v-if="field.translatable"
+          :model-value="imageTranslations(field)"
+          :locales="locales"
+          :label="label(field)"
+          :required="field.required"
+          @update:model-value="(v) => set(field.key, v)"
+        />
+        <div v-else class="schema-fields__image">
+          <span class="form-field__label">{{ label(field) }}</span>
+          <ImageUpload
+            :model-value="imageFile(field)"
+            :current-url="imageCurrentUrl(field)"
+            @update:model-value="(f: File | null) => set(field.key, f)"
+            @remove="set(field.key, null)"
+          />
+        </div>
+        <div class="form-row__stack">
+          <BaseSelect
+            v-for="setting in imageSettings"
+            :key="setting.key"
+            :model-value="(modelValue[setting.key] as string) ?? (setting.default as string) ?? ''"
+            :label="label(setting)"
+            :options="selectOptions(setting)"
+            @update:model-value="(v) => set(setting.key, v)"
+          />
+        </div>
+      </div>
+
+      <!-- Campo suelto — o, con su select de alineación al lado (convención
+           1), fila ancha-izquierda del ui: el campo (input/textarea/wysiwyg)
+           a la izquierda y el select pequeño a la derecha -->
+      <div v-else class="schema-fields__field" :class="{ 'form-row form-row--wide-left': !!align }">
         <div class="schema-fields__field-main">
           <!-- Traducibles: text / textarea / richtext van al TranslatableInput -->
           <TranslatableInput
@@ -336,6 +390,7 @@ function addLabel(): string {
             <span class="form-field__label">{{ label(field) }}</span>
             <PaletteColorPicker
               :model-value="(modelValue[field.key] as string) ?? null"
+              :presets="colorPresets(field)"
               @update:model-value="(v) => set(field.key, v)"
             />
           </div>
@@ -433,28 +488,14 @@ function addLabel(): string {
         </div>
 
         <!-- Alineación del campo (title_align/subtitle_align/author_align/…),
-         en la misma fila que su campo (columna de ancho contenido). -->
+         en la misma fila que su campo (columna derecha, estrecha). -->
         <BaseSelect
           v-if="align"
-          class="schema-fields__field-align"
           :model-value="(modelValue[align.key] as string) ?? (align.default as string) ?? ''"
           :label="label(align)"
           :options="selectOptions(align)"
           @update:model-value="(v) => set(align!.key, v)"
         />
-
-        <!-- Ajustes de la imagen (image_position/image_fit/image_columns),
-         apilados en la segunda columna junto al input de imagen. -->
-        <div v-if="imageSettings" class="schema-fields__field-image-settings">
-          <BaseSelect
-            v-for="setting in imageSettings"
-            :key="setting.key"
-            :model-value="(modelValue[setting.key] as string) ?? (setting.default as string) ?? ''"
-            :label="label(setting)"
-            :options="selectOptions(setting)"
-            @update:model-value="(v) => set(setting.key, v)"
-          />
-        </div>
       </div>
     </template>
   </div>