libreria-astro-lefebvre 0.1.65 → 0.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "libreria-astro-lefebvre",
3
- "version": "0.1.65",
3
+ "version": "0.1.66",
4
4
  "description": "Librería de componentes Astro, React y Vue para Lefebvre",
5
5
  "author": "Equipo web desarrollo Lefebvre",
6
6
  "type": "module",
@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
4
4
  component_name: 'Contenido_2025_Malaga',
5
5
  category: 'Contenido de Imagen',
6
6
  name: 'Sección hiper-configurable con texto, imagen o vídeo lateral, botón y modal LF2 2025',
7
- description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen o vídeo MP4 lateral opcional (posicionable a izquierda o derecha, mutuamente excluyentes: si se rellena el vídeo, la imagen se ignora), botón primario y botón secundario que abre un modal con formulario LF2 inyectado dinámicamente. Ofrece controles finos de alineación vertical, tamaño de fuente del texto, padding horizontal, ancho del contenedor (full/3-5/7xl) y variantes de orientación icono-texto',
7
+ description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen o vídeo MP4 lateral opcional (posicionable a izquierda o derecha, mutuamente excluyentes: solo se muestra uno de los dos), botón primario y botón secundario que abre un modal con formulario LF2 inyectado dinámicamente. Ofrece controles finos de alineación vertical, tamaño de fuente del texto, padding horizontal, ancho del contenedor (full/3-5/7xl) y variantes de orientación icono-texto',
8
8
  framework: 'Astro',
9
9
  priority: 1,
10
10
  tags: ['contenido', 'imagen', 'video', 'icono', 'texto', 'modal', 'formulario', 'lf2', 'cta', 'boton'],
@@ -135,7 +135,7 @@ export const metadata: ComponentMetadata = {
135
135
  name: 'showImage',
136
136
  type: 'boolean',
137
137
  help: 'Si está activado, se renderiza el layout con media lateral (texto + imagen o vídeo). Si está desactivado, se renderiza un layout alternativo solo con texto (con más padding)',
138
- label: 'Mostrar imagen',
138
+ label: 'Mostrar imagen/vídeo',
139
139
  mandatory: false,
140
140
  options: ['false', 'true'],
141
141
  options_labels: ['Falso', 'Verdadero'],
@@ -144,7 +144,7 @@ export const metadata: ComponentMetadata = {
144
144
  {
145
145
  name: 'image',
146
146
  type: 'image',
147
- help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con el vídeo: si se rellena "URL del video", este campo se ignora',
147
+ help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con el vídeo: rellena solo uno de los dos',
148
148
  label: 'Src de la imagen',
149
149
  mandatory: false,
150
150
  exclusive_group: 'media',
@@ -154,7 +154,7 @@ export const metadata: ComponentMetadata = {
154
154
  {
155
155
  name: 'iframeSrc',
156
156
  type: 'video',
157
- help: 'URL del vídeo MP4 lateral (se reproduce con autoplay, muted y loop). Solo se renderiza si "Mostrar imagen" está activado. Tiene prioridad sobre la imagen: si se rellena, la imagen se ignora',
157
+ help: 'URL del vídeo MP4 lateral (se reproduce con autoplay, muted y loop). Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con la imagen: rellena solo uno de los dos',
158
158
  label: 'URL del video',
159
159
  mandatory: false,
160
160
  exclusive_group: 'media',
@@ -47,7 +47,11 @@ const imageSkyscraper = crops['skyscraper'] || ''; // Disponible para uso en el
47
47
  // Fallback: si solo viene una URL directa, usar extractImageUrl.
48
48
  // Si no hay imagen configurada, se muestra una imagen por defecto
49
49
  const DEFAULT_IMAGE = 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png';
50
+ const hasImage = !!(imageBase || extractImageUrl(image));
50
51
  const imageUrl = imageBase || extractImageUrl(image) || DEFAULT_IMAGE;
52
+ // Imagen y vídeo son excluyentes (toggle en Mecano): el vídeo solo se
53
+ // renderiza si es el único campo relleno; en cualquier otro caso, imagen
54
+ const videoUrl = !hasImage && iframeSrc ? iframeSrc : '';
51
55
  ---
52
56
 
53
57
  <section class="w-full flex items-center justify-center">
@@ -125,9 +129,9 @@ const imageUrl = imageBase || extractImageUrl(image) || DEFAULT_IMAGE;
125
129
  )}
126
130
 
127
131
  <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
128
- {iframeSrc ? (
132
+ {videoUrl ? (
129
133
  <video autoplay loop muted playsinline preload="metadata" width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto">
130
- <source src={iframeSrc} type="video/mp4" />
134
+ <source src={videoUrl} type="video/mp4" />
131
135
  </video>
132
136
  ) : (
133
137
  <img src={imageUrl} alt={title} width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto" loading={loading} />