autocasting-ui-library-padimasso 1.7.7 → 1.7.8
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.
|
@@ -32,14 +32,14 @@ function ImageCarousel({ images, className, isDesktop, isDesktopXL, enablePhotoZ
|
|
|
32
32
|
const wrapperClass = desktopLayout
|
|
33
33
|
? `grid ${gridCols} gap-3 h-full min-h-0 items-stretch`
|
|
34
34
|
: 'flex flex-col gap-3 w-full';
|
|
35
|
-
return (jsxs("div", { className: `w-full ${desktopLayout ? 'h-full min-h-0' : 'h-auto'} ${className ?? ''}`, children: [jsxs("div", { className: wrapperClass, children: [jsxs("div", { className: desktopLayout ? 'col-[1] h-full min-h-0 flex flex-col' : 'flex flex-col gap-2', children: [jsx("button", { type: "button", onClick: () => handleOpenZoom(0), className: `relative overflow-hidden rounded-xl text-left ${figureClass}`, "aria-label": "Ver imagen 1", children: jsx("img", { src: selectedImage, alt: "Imagen principal", className: "absolute inset-0 w-full h-full object-cover" }) }), !desktopLayout && finalImages.length > 1 && (jsx("div", { className: "flex gap-2 overflow-x-auto w-full", children: finalImages.slice(1).map((img, i) => {
|
|
35
|
+
return (jsxs("div", { className: `w-full ${desktopLayout ? 'h-full min-h-0' : 'h-auto'} ${className ?? ''}`, children: [jsxs("div", { className: wrapperClass, children: [jsxs("div", { className: desktopLayout ? 'col-[1] h-full min-h-0 flex flex-col' : 'flex flex-col gap-2', children: [jsx("button", { type: "button", onClick: () => handleOpenZoom(0), className: `relative overflow-hidden rounded-xl text-left ${figureClass}`, "aria-label": "Ver imagen 1", children: jsx("img", { src: selectedImage, alt: "Imagen principal", loading: "eager", fetchPriority: "high", decoding: "async", className: "absolute inset-0 w-full h-full object-cover" }) }), !desktopLayout && finalImages.length > 1 && (jsx("div", { className: "flex gap-2 overflow-x-auto w-full", children: finalImages.slice(1).map((img, i) => {
|
|
36
36
|
const index = i + 1;
|
|
37
37
|
const isPlaceholder = index >= zoomImages.length;
|
|
38
|
-
return (jsx("button", { type: "button", "aria-label": `Ver imagen ${index + 1}`, onClick: () => handleOpenZoom(index), disabled: isPlaceholder, className: "w-[120px] aspect-[8/10] flex-shrink-0 rounded-lg overflow-hidden border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50", children: jsx("img", { src: img, alt: `Miniatura ${i + 1}`, className: "w-full h-full object-cover" }) }, `thumb-m-${index}`));
|
|
38
|
+
return (jsx("button", { type: "button", "aria-label": `Ver imagen ${index + 1}`, onClick: () => handleOpenZoom(index), disabled: isPlaceholder, className: "w-[120px] aspect-[8/10] flex-shrink-0 rounded-lg overflow-hidden border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50", children: jsx("img", { src: img, alt: `Miniatura ${i + 1}`, loading: "lazy", decoding: "async", className: "w-full h-full object-cover" }) }, `thumb-m-${index}`));
|
|
39
39
|
}) }))] }), showDesktopThumbs && (jsx("div", { className: "col-[2] h-full min-h-0 flex flex-col gap-2 items-stretch justify-center", style: { ['--g']: '12px' }, children: rightThumbIndices.map((idx) => {
|
|
40
40
|
const img = finalImages[idx];
|
|
41
41
|
const isPlaceholder = idx >= zoomImages.length;
|
|
42
|
-
return (jsx("button", { type: "button", "aria-label": `Ver imagen ${idx + 1}`, onClick: () => handleOpenZoom(idx), disabled: isPlaceholder, style: { height: 'calc((100% - 2*var(--g)) / 3)' }, className: "relative w-full aspect-[4/5] rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0 disabled:cursor-not-allowed disabled:opacity-50", children: jsx("img", { src: img, alt: `Miniatura ${idx + 1}`, className: "absolute inset-0 w-full h-full object-cover" }) }, `thumb-d-${idx}`));
|
|
42
|
+
return (jsx("button", { type: "button", "aria-label": `Ver imagen ${idx + 1}`, onClick: () => handleOpenZoom(idx), disabled: isPlaceholder, style: { height: 'calc((100% - 2*var(--g)) / 3)' }, className: "relative w-full aspect-[4/5] rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0 disabled:cursor-not-allowed disabled:opacity-50", children: jsx("img", { src: img, alt: `Miniatura ${idx + 1}`, loading: "lazy", decoding: "async", className: "absolute inset-0 w-full h-full object-cover" }) }, `thumb-d-${idx}`));
|
|
43
43
|
}) }))] }), jsx(PhotoZoomOverlay, { open: enablePhotoZoomOverlay && zoomIndex !== null && zoomImages.length > 0, images: zoomImages, initialIndex: zoomIndex ?? 0, onClose: () => setZoomIndex(null) })] }));
|
|
44
44
|
}
|
|
45
45
|
|
package/package.json
CHANGED
|
@@ -66,7 +66,14 @@ export default function ImageCarousel({
|
|
|
66
66
|
className={`relative overflow-hidden rounded-xl text-left ${figureClass}`}
|
|
67
67
|
aria-label="Ver imagen 1"
|
|
68
68
|
>
|
|
69
|
-
<img
|
|
69
|
+
<img
|
|
70
|
+
src={selectedImage}
|
|
71
|
+
alt="Imagen principal"
|
|
72
|
+
loading="eager"
|
|
73
|
+
fetchPriority="high"
|
|
74
|
+
decoding="async"
|
|
75
|
+
className="absolute inset-0 w-full h-full object-cover"
|
|
76
|
+
/>
|
|
70
77
|
</button>
|
|
71
78
|
|
|
72
79
|
{/* Thumbs mobile (scroll horizontal) */}
|
|
@@ -85,7 +92,13 @@ export default function ImageCarousel({
|
|
|
85
92
|
disabled={isPlaceholder}
|
|
86
93
|
className="w-[120px] aspect-[8/10] flex-shrink-0 rounded-lg overflow-hidden border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50"
|
|
87
94
|
>
|
|
88
|
-
<img
|
|
95
|
+
<img
|
|
96
|
+
src={img}
|
|
97
|
+
alt={`Miniatura ${i + 1}`}
|
|
98
|
+
loading="lazy"
|
|
99
|
+
decoding="async"
|
|
100
|
+
className="w-full h-full object-cover"
|
|
101
|
+
/>
|
|
89
102
|
</button>
|
|
90
103
|
);
|
|
91
104
|
})}
|
|
@@ -112,7 +125,13 @@ export default function ImageCarousel({
|
|
|
112
125
|
style={{ height: 'calc((100% - 2*var(--g)) / 3)' }}
|
|
113
126
|
className="relative w-full aspect-[4/5] rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0 disabled:cursor-not-allowed disabled:opacity-50"
|
|
114
127
|
>
|
|
115
|
-
<img
|
|
128
|
+
<img
|
|
129
|
+
src={img}
|
|
130
|
+
alt={`Miniatura ${idx + 1}`}
|
|
131
|
+
loading="lazy"
|
|
132
|
+
decoding="async"
|
|
133
|
+
className="absolute inset-0 w-full h-full object-cover"
|
|
134
|
+
/>
|
|
116
135
|
</button>
|
|
117
136
|
);
|
|
118
137
|
})}
|