@edc-motor/ui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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/_tokens.scss

@@ -38,7 +38,7 @@ $k-fw-bold: 700;
 $k-lh-tight: 1.15;
 $k-lh-ui: 1.35;
 $k-lh-body: 1.55;
-$fs-11: 11px; $fs-12: 12px; $fs-13: 13px; $fs-14: 14px; $fs-16: 16px; $fs-18: 18px; $fs-20: 20px; $fs-24: 24px; $fs-28: 28px;
+$fs-11: 11px; $fs-12: 12px; $fs-13: 13px; $fs-14: 14px; $fs-16: 16px; $fs-18: 18px; $fs-20: 20px; $fs-24: 24px; $fs-28: 28px; $fs-32: 32px;
 
 // Espaciado (px, como kontuan)
 $space-0: 0;

package/scss/components/_blocks.scss

@@ -7,7 +7,7 @@
   background: var(--block-bg, transparent);
 
   &__inner {
-    max-width: 960px; // 'wide' (por defecto)
+    max-width: 1200px; // 'wide' (por defecto)
     margin: 0 auto;
     padding: 0 $space-4;
     display: grid;
@@ -18,9 +18,14 @@
   &--w-narrow .block__inner { max-width: 680px; }
   &--w-full .block__inner { max-width: none; padding-inline: $space-6; }
 
-  &__title { margin: 0; }
-  &__subtitle { margin: 0; color: $text-2; font-size: $fs-18; }
-  &__text { color: $text-1; }
+  // Tipografía de bloque: texto $fs-16, subtítulo $fs-20, título $fs-28
+  // (la cabecera sube a 32/24). Los títulos nunca se justifican.
+  &__title { margin: 0; font-size: $fs-28; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; }
+  &__text { color: $text-1; font-size: $fs-16; }
+
+  &--align-justify &__title,
+  &--align-justify &__subtitle { text-align: left; }
 
   &__label {
     display: inline-block;
@@ -50,7 +55,8 @@
     .edc-button { justify-self: start; text-decoration: none; }
   }
 
-  &--header .block__title { font-size: $fs-28; }
+  &--header .block__title { font-size: $fs-32; }
+  &--header .block__subtitle { font-size: $fs-24; }
 
   &__media-layout { display: grid; gap: $space-4; }
   &__image {
@@ -62,13 +68,49 @@
   &--image-left .block__media-layout,
   &--image-right .block__media-layout {
     @container content (min-width: #{$bp-sm}) {
-      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
-      align-items: start;
+      // Reparto izquierda:derecha del campo image_columns (--img-cols).
+      grid-template-columns: var(--img-cols, minmax(0, 2fr) minmax(0, 3fr));
+      align-items: stretch;
     }
   }
+  &--image-right .block__media-layout .block__image-frame,
   &--image-right .block__media-layout .block__image { order: 2; }
   &--image-bottom .block__media-layout .block__image { order: 2; }
 
+  // Marco de la imagen en columnas: el ALTO lo marca el texto de al lado
+  // (la imagen absoluta no aporta altura) y el modo de escalado hace el resto.
+  &__image-frame {
+    position: relative;
+    min-height: 200px; // que no colapse con textos muy cortos
+
+    .block__image {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      max-width: none;
+    }
+  }
+
+  &--fit-contain &__image-frame .block__image { object-fit: contain; }
+  &--fit-cover &__image-frame .block__image { object-fit: cover; }
+  &--fit-fill &__image-frame .block__image { object-fit: fill; }
+
+  // En una columna (estrecho) la imagen vuelve al flujo normal.
+  @container content (max-width: #{$bp-sm}) {
+    &__image-frame {
+      position: static;
+      min-height: 0;
+
+      .block__image {
+        position: static;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+      }
+    }
+  }
+
   // Imagen flotada: el texto la rodea y sigue por debajo (cleartext, como
   // CDL). En estrecho la imagen va arriba a lo ancho, sin flotar.
   &--image-clear-left .block__media-layout,
@@ -145,6 +187,9 @@
 
   a { color: $accent-500; text-decoration: none; }
   a:hover { text-decoration: underline; }
+
+  // Entradas de bloques hijos: sangradas bajo su padre.
+  .block__index-child { margin-left: $space-5; }
 }
 
 // FAQ (doc 03): acordeón nativo details/summary del bloque `faq`.

package/scss/components/_index.scss

@@ -10,6 +10,7 @@
 @use "checkbox";
 @use "palette-color-picker";
 @use "rich-text";
+@use "rich-content";
 @use "translatable-input";
 @use "image-upload";
 @use "font-upload";

package/scss/components/_rich-content.scss

@@ -0,0 +1,53 @@
+@use "../tokens" as *;
+
+// Contenido enriquecido renderizado (v-html de los campos richtext): aire
+// entre elementos y escala tipográfica del wysiwyg. Los juegos pueden
+// ampliarlo desde su propio SCSS.
+.rich-content {
+  font-size: $fs-16;
+  line-height: $k-lh-body;
+
+  // Aire entre TODOS los elementos del wysiwyg (párrafos, listas, títulos…).
+  p,
+  ul,
+  ol,
+  blockquote {
+    margin-block: $space-3;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block: $space-5 $space-3;
+    line-height: $k-lh-tight;
+  }
+
+  // Sin huecos extra en los bordes del campo.
+  > :first-child { margin-block-start: 0; }
+  > :last-child { margin-block-end: 0; }
+
+  // Escala del wysiwyg: h2 28 · h3 24 · h4 20 · h5 18 · h6 16.
+  h2 { font-size: $fs-28; }
+  h3 { font-size: $fs-24; }
+  h4 { font-size: $fs-20; }
+  h5 { font-size: $fs-18; }
+  h6 { font-size: $fs-16; }
+
+  ul,
+  ol {
+    padding-left: 1.4em;
+
+    li + li { margin-block-start: $space-1; }
+  }
+
+  // Iconos del juego insertados en línea por el editor (<img class="rt-icon">).
+  img.rt-icon {
+    display: inline-block;
+    width: 1.25em;
+    height: 1.25em;
+    vertical-align: -0.25em;
+    margin: 0 1px;
+  }
+}

package/src/blocks/BlockCta.vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import BlockShell from './BlockShell.vue'
 
-defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+const props = defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+
+const position = computed(() => String(props.settings.image_position || 'top'))
+const inColumns = computed(
+  () => !!props.settings.image && (position.value === 'left' || position.value === 'right'),
+)
+
+const layoutStyle = computed(() => {
+  if (!inColumns.value) return {}
+  const [a, b] = String(props.settings.image_columns || '2:3').split(':')
+  return { '--img-cols': `minmax(0, ${a || 1}fr) minmax(0, ${b || 1}fr)` }
+})
 </script>
 
 <!-- eslint-disable vue/no-v-html -- HTML saneado en servidor (DC-09) -->
@@ -9,12 +21,19 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
   <BlockShell
     :settings="settings"
     class="block--cta"
-    :class="settings.image ? `block--image-${settings.image_position || 'top'}` : ''"
+    :class="[
+      settings.image ? `block--image-${position}` : '',
+      inColumns ? `block--fit-${settings.image_fit || 'contain'}` : '',
+    ]"
   >
     <div class="block__card">
       <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
-      <div class="block__media-layout">
-        <img v-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
+      <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+      <div class="block__media-layout" :style="layoutStyle">
+        <span v-if="settings.image && inColumns" class="block__image-frame">
+          <img class="block__image" :src="String(settings.image)" alt="" />
+        </span>
+        <img v-else-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
         <div class="block__cta-body">
           <div v-if="settings.body" class="block__text rich-content" v-html="settings.body" />
           <a

package/src/blocks/BlockFaq.vue

@@ -17,6 +17,7 @@ defineProps<{
 <template>
   <BlockShell :settings="settings" class="block--faq">
     <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+    <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
     <details v-for="(item, i) in settings.items ?? []" :key="i" class="block__faq-item">
       <summary class="block__faq-question">{{ item.question }}</summary>
       <div v-if="item.answer" class="block__faq-answer rich-content" v-html="item.answer" />

package/src/blocks/BlockHeader.vue

@@ -6,7 +6,7 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
 
 <template>
   <BlockShell :settings="settings" class="block--header">
-    <h1 class="block__title">{{ settings.title }}</h1>
+    <h1 v-if="settings.title" class="block__title">{{ settings.title }}</h1>
     <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
     <img v-if="settings.image" class="block__banner" :src="String(settings.image)" alt="" />
   </BlockShell>

package/src/blocks/BlockIndex.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import BlockShell from './BlockShell.vue'
 
-// Índice automático: enlaces de ancla a los bloques posteriores de la página.
+// Índice automático: enlaces de ancla a los bloques posteriores de la página,
+// con sangría por nivel (bloques hijos → depth 1).
 defineProps<{
   settings: Record<string, unknown>
-  data: { items?: { id: number; label: string }[] }
+  data: { items?: { id: number; label: string; depth?: number }[] }
 }>()
 </script>
 
 <template>
   <BlockShell :settings="settings" class="block--index">
     <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+    <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
     <component :is="settings.numbered ? 'ol' : 'ul'" class="block__index">
-      <li v-for="item in data.items ?? []" :key="item.id">
+      <li
+        v-for="item in data.items ?? []"
+        :key="item.id"
+        :class="{ 'block__index-child': (item.depth ?? 0) > 0 }"
+      >
         <a :href="`#block-${item.id}`">{{ item.label }}</a>
       </li>
     </component>

package/src/blocks/BlockQuote.vue

@@ -7,6 +7,8 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
 <!-- eslint-disable vue/no-v-html -- HTML saneado en servidor (DC-09) -->
 <template>
   <BlockShell :settings="settings" class="block--quote">
+    <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+    <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
     <blockquote class="block__quote">
       <img v-if="settings.image" class="block__avatar" :src="String(settings.image)" alt="" />
       <div class="rich-content" v-html="settings.quote" />

package/src/blocks/BlockShell.vue

@@ -9,6 +9,7 @@ import { computed, type CSSProperties } from 'vue'
 const props = defineProps<{ settings: Record<string, unknown> }>()
 
 const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
+const align = computed(() => `block--align-${(props.settings.align as string) || 'left'}`)
 
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
@@ -22,7 +23,7 @@ const style = computed<CSSProperties>(() => {
 </script>
 
 <template>
-  <section class="block" :class="width" :style="style">
+  <section class="block" :class="[width, align]" :style="style">
     <div class="block__inner">
       <slot />
     </div>

package/src/blocks/BlockText.vue

@@ -1,7 +1,21 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import BlockShell from './BlockShell.vue'
 
-defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+const props = defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+
+const position = computed(() => String(props.settings.image_position || 'top'))
+const inColumns = computed(
+  () => !!props.settings.image && (position.value === 'left' || position.value === 'right'),
+)
+
+// Reparto de columnas izquierda:derecha ("2:3" → 2fr 3fr) para el layout
+// imagen+texto; el modo de escalado (contain/cover/fill) va por clase.
+const layoutStyle = computed(() => {
+  if (!inColumns.value) return {}
+  const [a, b] = String(props.settings.image_columns || '2:3').split(':')
+  return { '--img-cols': `minmax(0, ${a || 1}fr) minmax(0, ${b || 1}fr)` }
+})
 </script>
 
 <!-- eslint-disable vue/no-v-html -- HTML saneado en servidor (DC-09) -->
@@ -9,11 +23,19 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
   <BlockShell
     :settings="settings"
     class="block--text"
-    :class="settings.image ? `block--image-${settings.image_position || 'top'}` : ''"
+    :class="[
+      settings.image ? `block--image-${position}` : '',
+      inColumns ? `block--fit-${settings.image_fit || 'contain'}` : '',
+    ]"
   >
     <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
-    <div class="block__media-layout">
-      <img v-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
+    <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+    <div class="block__media-layout" :style="layoutStyle">
+      <!-- En columnas, el marco fija el alto de la imagen al del texto -->
+      <span v-if="settings.image && inColumns" class="block__image-frame">
+        <img class="block__image" :src="String(settings.image)" alt="" />
+      </span>
+      <img v-else-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
       <div class="block__text rich-content" v-html="settings.body" />
     </div>
   </BlockShell>

package/src/blocks/BlockTextCard.vue

@@ -14,6 +14,7 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
     <div class="block__card">
       <span v-if="settings.label" class="block__label">{{ settings.label }}</span>
       <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+      <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
       <div class="block__media-layout">
         <img v-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
         <div class="block__text rich-content" v-html="settings.body" />