@edc-motor/ui 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "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/_block-related.scss

@@ -0,0 +1,42 @@
+@use "tokens" as *;
+
+// Bloque `related` (BlockRelated.vue): cabecera en rejilla (títulos + botón
+// al índice a la derecha en ≥sm, patrón del relateds de CDL) sobre una
+// PreviewGrid compacta.
+.block--related {
+  .block__related-header {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $space-4;
+
+    @media (min-width: $bp-sm) {
+      grid-template-columns: 1fr auto;
+      align-items: center;
+    }
+  }
+
+  .block__related-titles {
+    min-width: 0; // que los títulos largos no desborden la rejilla
+    display: grid;
+    gap: $space-2;
+  }
+
+  .block__related-button {
+    justify-self: start;
+
+    @media (min-width: $bp-sm) {
+      justify-self: end;
+    }
+  }
+
+  // Centrado/derecha del campo común `align`: la cabecera acompaña.
+  &.block--align-center .block__related-header {
+    @media (min-width: $bp-sm) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &.block--align-center .block__related-button {
+    justify-self: center;
+  }
+}

package/scss/components/_index.scss

@@ -5,6 +5,8 @@
 @use "form-field";
 @use "search-select";
 @use "blocks";
+@use "block-related";
+@use "preview-grid";
 @use "page-background";
 @use "numeric-input";
 @use "checkbox";

package/scss/components/_preview-grid.scss

@@ -0,0 +1,126 @@
+@use "tokens" as *;
+
+// Rejilla de previews del catálogo público (PreviewGrid.vue). Mobile-first:
+// 2 columnas → 3 → 4 (patrón CDL). Media queries y no container queries:
+// también se monta fuera de las páginas del CRM (índices, singles).
+.preview-grid {
+  display: grid;
+  gap: $space-5;
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: $space-4;
+
+    @media (min-width: $bp-md) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    @media (min-width: $bp-lg) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  &--loading &__grid {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  // Hueco de un ítem: la tarjeta + acciones opcionales (slot actions)
+  // superpuestas en la esquina.
+  &__slot {
+    position: relative;
+    min-width: 0;
+  }
+
+  // Tarjeta (enlace o div): hover suave con elevación y halo de acento.
+  &__item {
+    display: block;
+    width: 100%;
+    color: inherit;
+    text-decoration: none;
+    border-radius: $radius-md;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+  }
+
+  a.preview-grid__item:hover,
+  a.preview-grid__item:focus-visible {
+    transform: translateY(-2px);
+    box-shadow: 0 0 0 2px color-mix(in srgb, $accent-500 55%, transparent), $shadow-md;
+    outline: none;
+  }
+
+  // El PNG de la preview marca su propia proporción; el fallback (sin PNG
+  // generado) reserva proporción de carta (~63×88 mm ⇒ 5/7) con el nombre.
+  &__image {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  &__fallback {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 5 / 7;
+    padding: $space-3;
+    text-align: center;
+    font-weight: $k-fw-semibold;
+    color: $text-2;
+    background: color-mix(in srgb, $surface 65%, transparent);
+    border: 1px dashed $border-strong;
+    border-radius: $radius-md;
+  }
+
+  &__empty {
+    margin: 0;
+    padding: $space-6 0;
+    text-align: center;
+    color: $text-2;
+  }
+
+  // Paginación: prev / "x de y" / next.
+  &__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $space-3;
+  }
+
+  &__page-btn {
+    padding: $space-2 $space-4;
+    font-size: $fs-14;
+    font-weight: $k-fw-semibold;
+    color: $text-1;
+    background: color-mix(in srgb, $surface 65%, transparent);
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease;
+
+    &:hover:not(:disabled) {
+      border-color: $accent-500;
+      color: $accent-500;
+    }
+
+    &:disabled {
+      opacity: $disabled-opacity;
+      cursor: default;
+    }
+  }
+
+  &__page-state {
+    color: $text-2;
+    font-size: $fs-14;
+    white-space: nowrap;
+  }
+
+  // Variante compacta (bloque related): tarjetas y huecos más contenidos.
+  &--compact &__grid {
+    gap: $space-3;
+  }
+
+  &--compact &__fallback {
+    font-size: $fs-14;
+  }
+}

package/src/blocks/BlockRelated.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import BlockShell from './BlockShell.vue'
+import PreviewGrid, { type PreviewGridItem } from '../components/PreviewGrid.vue'
+import { catalogRoutesKey, type CatalogItem } from './catalogRoutes'
+
+// Bloque `related` (categoría data): título/subtítulo + rejilla compacta de
+// previews relacionadas (data.items del catálogo) + botón opcional al índice.
+// El paquete ui no conoce las rutas del juego: la app las provee con
+// `app.provide(catalogRoutesKey, mapa)`; sin entrada para data.key los ítems
+// se pintan sin enlace y el botón no aparece. Agnóstico de i18n (DC-29): el
+// texto por defecto del botón llega por prop (castellano).
+const props = withDefaults(
+  defineProps<{
+    settings: Record<string, unknown>
+    data?: { key?: string | null; items?: CatalogItem[] }
+    /** Texto del botón si el bloque no trae `button_label`. */
+    defaultButtonLabel?: string
+  }>(),
+  { data: () => ({}), defaultButtonLabel: 'Ver todos' },
+)
+
+const route = useRoute()
+const routes = inject(catalogRoutesKey, {})
+
+const locale = computed(() => String(route.params.locale ?? ''))
+const entry = computed(() => (props.data?.key ? routes[props.data.key] : undefined))
+
+const items = computed<PreviewGridItem[]>(() =>
+  (props.data?.items ?? []).map((item) => ({
+    ...item,
+    to: entry.value?.single?.(item, locale.value) ?? undefined,
+  })),
+)
+
+const indexRoute = computed(() =>
+  props.settings.with_button && entry.value?.index ? entry.value.index(locale.value) : null,
+)
+
+const buttonLabel = computed(
+  () => String(props.settings.button_label ?? '') || props.defaultButtonLabel,
+)
+</script>
+
+<template>
+  <BlockShell :settings="settings" class="block--related">
+    <div class="block__related-header">
+      <div class="block__related-titles">
+        <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+        <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+      </div>
+      <RouterLink
+        v-if="indexRoute"
+        class="block-button block-button--secondary block__related-button"
+        :to="indexRoute"
+      >
+        {{ buttonLabel }}
+      </RouterLink>
+    </div>
+    <PreviewGrid :items="items" compact />
+  </BlockShell>
+</template>

package/src/blocks/catalogRoutes.ts

@@ -0,0 +1,26 @@
+import type { InjectionKey } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+// Resolución de enlaces del catálogo público: el paquete ui no conoce las
+// rutas del juego, así que la app PROVEE este mapa (clave del PreviewRegistry
+// => fábricas de ruta) con `app.provide(catalogRoutesKey, mapa)`. BlockRelated
+// lo inyecta; sin mapa (o sin entrada) los ítems se pintan sin enlace.
+
+/** Ítem del catálogo público del motor (`GET /api/catalog/{key}`). */
+export interface CatalogItem {
+  id: number
+  name: string
+  slug: string | null
+  preview: string | null
+}
+
+export interface CatalogRouteEntry {
+  /** Ruta del índice de la entidad (botón "ver todos"). */
+  index?: (locale: string) => RouteLocationRaw
+  /** Ruta del detalle de un ítem; null = ese ítem no enlaza. */
+  single?: (item: CatalogItem, locale: string) => RouteLocationRaw | null
+}
+
+export type CatalogRoutes = Record<string, CatalogRouteEntry>
+
+export const catalogRoutesKey: InjectionKey<CatalogRoutes> = Symbol('catalogRoutes')

package/src/blocks/index.ts

@@ -6,14 +6,31 @@ import BlockFaq from './BlockFaq.vue'
 import BlockHeader from './BlockHeader.vue'
 import BlockIndex from './BlockIndex.vue'
 import BlockQuote from './BlockQuote.vue'
+import BlockRelated from './BlockRelated.vue'
 import BlockText from './BlockText.vue'
 import BlockTextCard from './BlockTextCard.vue'
 
-export { BlockCta, BlockFaq, BlockHeader, BlockIndex, BlockQuote, BlockText, BlockTextCard }
+export {
+  BlockCta,
+  BlockFaq,
+  BlockHeader,
+  BlockIndex,
+  BlockQuote,
+  BlockRelated,
+  BlockText,
+  BlockTextCard,
+}
 export { default as BlockShell } from './BlockShell.vue'
 export { default as PageBackground } from './PageBackground.vue'
+// Mapa de rutas del catálogo (BlockRelated): la app lo provee por inject.
+export {
+  catalogRoutesKey,
+  type CatalogItem,
+  type CatalogRouteEntry,
+  type CatalogRoutes,
+} from './catalogRoutes'
 
-/** Clave del BlockType => componente (los cinco de presentación). */
+/** Clave del BlockType => componente. */
 export const motorBlockComponents: Record<string, Component> = {
   header: BlockHeader,
   text: BlockText,
@@ -22,4 +39,5 @@ export const motorBlockComponents: Record<string, Component> = {
   index: BlockIndex,
   cta: BlockCta,
   faq: BlockFaq,
+  related: BlockRelated,
 }

package/src/components/PreviewGrid.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
+import type { CatalogItem } from '../blocks/catalogRoutes'
+
+// Rejilla PRESENTACIONAL de previews del catálogo público: el fetch lo hace
+// la vista del juego (o el bloque `related` con sus datos ya resueltos).
+// Los ítems con `to` son RouterLink. La tarjeta por defecto es el PNG de la
+// preview con proporción de carta; si no hay PNG (el motor no genera
+// placeholder), fallback con el nombre. Agnóstico de i18n (DC-29): textos
+// por prop, defaults en castellano.
+export interface PreviewGridItem extends CatalogItem {
+  to?: RouteLocationRaw | null
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: PreviewGridItem[]
+    loading?: boolean
+    /** Página actual y total (meta del catálogo). Sin `pages` (o con una
+     *  sola página) no se pinta la paginación. */
+    page?: number
+    pages?: number
+    /** Variante compacta (bloque `related`): tarjetas más pequeñas. */
+    compact?: boolean
+    emptyText?: string
+    prevLabel?: string
+    nextLabel?: string
+  }>(),
+  {
+    loading: false,
+    page: 1,
+    pages: 0,
+    compact: false,
+    emptyText: 'No hay resultados.',
+    prevLabel: 'Anterior',
+    nextLabel: 'Siguiente',
+  },
+)
+
+const emit = defineEmits<{ (e: 'page', page: number): void }>()
+
+function go(page: number) {
+  if (props.loading || page < 1 || page > props.pages || page === props.page) return
+  emit('page', page)
+}
+</script>
+
+<template>
+  <div
+    class="preview-grid"
+    :class="{ 'preview-grid--compact': compact, 'preview-grid--loading': loading }"
+  >
+    <p v-if="!loading && !items.length" class="preview-grid__empty">
+      <slot name="empty">{{ emptyText }}</slot>
+    </p>
+
+    <div v-else class="preview-grid__grid">
+      <div v-for="item in items" :key="item.id" class="preview-grid__slot">
+        <component
+          :is="item.to ? RouterLink : 'div'"
+          class="preview-grid__item"
+          v-bind="item.to ? { to: item.to } : {}"
+        >
+          <slot name="item" :item="item">
+            <img
+              v-if="item.preview"
+              class="preview-grid__image"
+              :src="item.preview"
+              :alt="item.name"
+              loading="lazy"
+            />
+            <span v-else class="preview-grid__fallback">{{ item.name }}</span>
+          </slot>
+        </component>
+        <!-- Acciones por ítem (p. ej. añadir a la colección) -->
+        <slot name="actions" :item="item" />
+      </div>
+    </div>
+
+    <nav v-if="pages > 1" class="preview-grid__pagination">
+      <button
+        type="button"
+        class="preview-grid__page-btn"
+        :disabled="loading || page <= 1"
+        @click="go(page - 1)"
+      >
+        {{ prevLabel }}
+      </button>
+      <span class="preview-grid__page-state">{{ page }} / {{ pages }}</span>
+      <button
+        type="button"
+        class="preview-grid__page-btn"
+        :disabled="loading || page >= pages"
+        @click="go(page + 1)"
+      >
+        {{ nextLabel }}
+      </button>
+    </nav>
+  </div>
+</template>

package/src/index.ts

@@ -29,6 +29,7 @@ export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
 export { default as ThemeSelector } from './components/ThemeSelector.vue'
 export { default as LocaleSelector } from './components/LocaleSelector.vue'
 export { default as AppBreadcrumbs, type Crumb } from './components/AppBreadcrumbs.vue'
+export { default as PreviewGrid, type PreviewGridItem } from './components/PreviewGrid.vue'
 export { createApi, type CreateApiOptions } from './lib/createApi'
 export { useToast, type Toast } from './composables/useToast'
 export { useConfirm, type ConfirmOptions } from './composables/useConfirm'