libreria-astro-lefebvre 0.1.83 → 0.1.84
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.
|
|
3
|
+
"version": "0.1.84",
|
|
4
4
|
"description": "Librería de componentes Astro, React y Vue para Lefebvre",
|
|
5
5
|
"author": "Equipo web desarrollo Lefebvre",
|
|
6
6
|
"type": "module",
|
|
@@ -42,4 +42,3 @@
|
|
|
42
42
|
"typescript": "^5.8.3"
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
|
|
@@ -16,13 +16,18 @@ const {
|
|
|
16
16
|
fontSize = 'base',
|
|
17
17
|
alignItems = 'center',
|
|
18
18
|
h2Size = 'default',
|
|
19
|
+
h2SizeBreakpoint = 'lg',
|
|
19
20
|
h2MarginBottom = 'mb-8',
|
|
20
21
|
h2AlignClass = 'text-center lg:text-left',
|
|
21
22
|
h2TrackingClass = '',
|
|
22
|
-
imageAspectClass = '',
|
|
23
|
+
imageAspectClass = 'h-auto',
|
|
23
24
|
imageSizeClass = 'md:max-w-xl w-full md:w-[75%]',
|
|
24
25
|
columnGapClass = 'gap-6',
|
|
25
26
|
contentPaddingClass = 'p-4 pr-4',
|
|
27
|
+
rowBreakpoint = 'md',
|
|
28
|
+
contentWidthBreakpoint = 'lg',
|
|
29
|
+
outerPaddingClass = '',
|
|
30
|
+
rowMaxWidthClass = '',
|
|
26
31
|
loading = 'lazy' as 'lazy' | 'eager',
|
|
27
32
|
|
|
28
33
|
showBtn = false,
|
|
@@ -41,6 +46,23 @@ const {
|
|
|
41
46
|
const imageModalUrl = extractImageUrl(imageModal);
|
|
42
47
|
const randomId = Math.floor(Math.random() * 1000);
|
|
43
48
|
|
|
49
|
+
// Tailwind necesita ver cada clase completa de forma literal en el código para
|
|
50
|
+
// generarla — no puede resolver un prefijo de breakpoint interpolado en runtime
|
|
51
|
+
// (`${breakpoint}:utilidad`). Por eso aquí se enumeran las dos combinaciones
|
|
52
|
+
// posibles (md/lg) en vez de construir el prefijo dinámicamente.
|
|
53
|
+
const rowFlexClass = rowBreakpoint === 'lg' ? 'lg:flex' : 'md:flex';
|
|
54
|
+
const rowWidthClass = rowBreakpoint === 'lg' ? 'lg:w-4/5' : 'md:w-4/5';
|
|
55
|
+
const rowFlex1Class = rowBreakpoint === 'lg' ? 'lg:flex-1' : 'md:flex-1';
|
|
56
|
+
const rowMinW0Class = rowBreakpoint === 'lg' ? 'lg:min-w-0' : 'md:min-w-0';
|
|
57
|
+
const contentFlex1Class = contentWidthBreakpoint === 'lg' ? 'lg:flex-1' : 'md:flex-1';
|
|
58
|
+
const contentMinW0Class = contentWidthBreakpoint === 'lg' ? 'lg:min-w-0' : 'md:min-w-0';
|
|
59
|
+
const h2AltSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[40px]' : 'md:text-[40px]';
|
|
60
|
+
const h2AltLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[48px]' : 'md:leading-[48px]';
|
|
61
|
+
const h2IcoSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[46px]' : 'md:text-[46px]';
|
|
62
|
+
const h2IcoLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[54px]' : 'md:leading-[54px]';
|
|
63
|
+
const h2LargeSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[56px]' : 'md:text-[56px]';
|
|
64
|
+
const h2LargeLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[64px]' : 'md:leading-[64px]';
|
|
65
|
+
|
|
44
66
|
// Extraer todos los crops definidos en el carbin (base, skyscraper)
|
|
45
67
|
// Funciona igual con JSON de PageBuilder o con objeto simple { base: "url", skyscraper: "url" }
|
|
46
68
|
const crops = extractAllCrops(image) as Record<string, string>;
|
|
@@ -63,7 +85,7 @@ const videoUrl = iframeSrc || '';
|
|
|
63
85
|
<section class="w-full flex items-center justify-center">
|
|
64
86
|
{showImage ? (
|
|
65
87
|
<article class={`w-${width} flex flex-col items-center justify-center py-6`}>
|
|
66
|
-
<div class={`flex-col
|
|
88
|
+
<div class={`flex-col ${rowFlexClass} ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full ${rowWidthClass} ${rowMaxWidthClass} items-${alignItems} ${columnGapClass} ${outerPaddingClass}`}>
|
|
67
89
|
{showIco ? (
|
|
68
90
|
<div class={`flex ${flexOrientation === 'row' ? 'flex-row' : 'flex-col'} w-full md:w-1/2 gap-6 p-4`}>
|
|
69
91
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[30px]">
|
|
@@ -76,7 +98,7 @@ const videoUrl = iframeSrc || '';
|
|
|
76
98
|
</svg>
|
|
77
99
|
<div class={`w-full ${orientation === 'left' ? `pl-[${paddingLeft}px]` : `pr-[${paddingLeft}px]`}`}>
|
|
78
100
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
79
|
-
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ?
|
|
101
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2IcoSizeClass} leading-[44px] ${h2IcoLeadingClass}`}`} set:html={subtitle}></h2>
|
|
80
102
|
|
|
81
103
|
<div
|
|
82
104
|
class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
|
|
@@ -110,10 +132,10 @@ const videoUrl = iframeSrc || '';
|
|
|
110
132
|
}
|
|
111
133
|
}
|
|
112
134
|
</style>
|
|
113
|
-
<div class={`w-full
|
|
135
|
+
<div class={`w-full ${contentFlex1Class} ${contentMinW0Class} ${contentPaddingClass} ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
|
|
114
136
|
style={{ 'padding-left': `${paddingLeft}px` }}>
|
|
115
137
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
116
|
-
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ?
|
|
138
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
|
|
117
139
|
<div
|
|
118
140
|
class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
|
|
119
141
|
set:html={description}
|
|
@@ -134,13 +156,13 @@ const videoUrl = iframeSrc || '';
|
|
|
134
156
|
|
|
135
157
|
)}
|
|
136
158
|
|
|
137
|
-
<div class={`w-full
|
|
159
|
+
<div class={`w-full ${rowFlex1Class} ${rowMinW0Class} p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
|
|
138
160
|
{videoUrl ? (
|
|
139
161
|
<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">
|
|
140
162
|
<source src={videoUrl} type="video/mp4" />
|
|
141
163
|
</video>
|
|
142
164
|
) : (
|
|
143
|
-
<img src={imageUrl} alt={title} width="600" height="450" class={`${imageSizeClass}
|
|
165
|
+
<img src={imageUrl} alt={title} width="600" height="450" class={`${imageSizeClass} object-cover rounded-lg m-auto ${imageAspectClass}`} loading={loading} />
|
|
144
166
|
)}
|
|
145
167
|
</div>
|
|
146
168
|
|
|
@@ -165,7 +187,7 @@ const videoUrl = iframeSrc || '';
|
|
|
165
187
|
|
|
166
188
|
<div class="w-1/2 p-4 flex flex-col flex-wrap ">
|
|
167
189
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
168
|
-
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ?
|
|
190
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
|
|
169
191
|
<div
|
|
170
192
|
class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
|
|
171
193
|
set:html={description}
|
|
@@ -188,7 +210,7 @@ const videoUrl = iframeSrc || '';
|
|
|
188
210
|
) : (
|
|
189
211
|
<div class="w-1/2 p-4 flex flex-col flex-wrap ">
|
|
190
212
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
191
|
-
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ?
|
|
213
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
|
|
192
214
|
<div
|
|
193
215
|
class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
|
|
194
216
|
set:html={description}
|