@chinggis.systems/collection-ui 1.0.3 → 1.0.5
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/dist/CollectionRenderer.js +111 -24
- package/dist/CollectionRenderer.js.map +1 -1
- package/dist/createAdapters.d.ts +1 -0
- package/dist/createAdapters.d.ts.map +1 -1
- package/dist/createAdapters.js +3 -1
- package/dist/createAdapters.js.map +1 -1
- package/dist/layoutPresets.d.ts.map +1 -1
- package/dist/layoutPresets.js +4 -3
- package/dist/layoutPresets.js.map +1 -1
- package/dist/primitives/BookSpine.d.ts.map +1 -1
- package/dist/primitives/BookSpine.js +14 -3
- package/dist/primitives/BookSpine.js.map +1 -1
- package/dist/primitives/CollectionCarousel.d.ts.map +1 -1
- package/dist/primitives/CollectionCarousel.js +26 -5
- package/dist/primitives/CollectionCarousel.js.map +1 -1
- package/dist/styles.css +858 -124
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +6 -4
- package/dist/assets/spine/BurnBlend.png +0 -0
- package/dist/assets/spine/FlatEdges.webp +0 -0
- package/dist/assets/spine/FlatShadow.webp +0 -0
- package/dist/assets/spine/NormalBlend.webp +0 -0
- package/dist/assets/spine/SoftLightBlend.webp +0 -0
|
@@ -1,17 +1,38 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useId } from "react";
|
|
3
|
-
import { Autoplay, EffectCoverflow, Navigation } from "swiper";
|
|
2
|
+
import { useId, useRef } from "react";
|
|
3
|
+
import { Autoplay, EffectCoverflow, Navigation, Pagination } from "swiper/modules";
|
|
4
4
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
5
|
+
function AutoplayProgress({ progressCircleRef, progressContentRef, }) {
|
|
6
|
+
return (_jsxs("div", { className: "collection-ui-slide__autoplay-progress", "aria-hidden": "true", children: [_jsxs("svg", { viewBox: "0 0 44 44", children: [_jsx("circle", { className: "collection-ui-slide__autoplay-track", cx: "22", cy: "22", r: "18" }), _jsx("circle", { className: "collection-ui-slide__autoplay-value", ref: progressCircleRef, cx: "22", cy: "22", r: "18", pathLength: 1, strokeDasharray: 1, style: { strokeDashoffset: 1 } })] }), _jsx("span", { ref: progressContentRef })] }));
|
|
7
|
+
}
|
|
5
8
|
export function CollectionCarousel({ id, slides, className, slideClassName, previousLabel, nextLabel, showControls, effect, centeredSlides, loop, autoplay, speed, slidesPerView, slidesPerGroupAuto, spaceBetween, draggable, breakpoints, }) {
|
|
6
9
|
const fallbackId = useId().replaceAll(":", "");
|
|
7
10
|
const carouselId = id || `collection-carousel-${fallbackId}`;
|
|
8
11
|
const isGridTitle = slideClassName?.includes("grid-title");
|
|
9
12
|
const isBanner = className?.includes("collection-ui-banner-carousel");
|
|
13
|
+
const isSlide = className?.includes("collection-ui-slide");
|
|
14
|
+
const showPagination = isSlide || isBanner;
|
|
10
15
|
const canDrag = draggable ?? true;
|
|
11
|
-
|
|
16
|
+
const shouldRewind = Boolean(loop && slides.length < 3);
|
|
17
|
+
const shouldLoop = Boolean(loop && !shouldRewind);
|
|
18
|
+
const progressCircleRef = useRef(null);
|
|
19
|
+
const progressContentRef = useRef(null);
|
|
20
|
+
const handleAutoplayTimeLeft = (_swiper, timeLeft, progress) => {
|
|
21
|
+
const safeProgress = Math.min(1, Math.max(0, progress || 0));
|
|
22
|
+
const safeTimeLeft = Math.max(0, timeLeft || 0);
|
|
23
|
+
progressCircleRef.current?.style.setProperty("stroke-dashoffset", String(safeProgress));
|
|
24
|
+
if (progressContentRef.current) {
|
|
25
|
+
progressContentRef.current.textContent = `${Math.ceil(safeTimeLeft / 1000)}s`;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
return (_jsxs("div", { className: "collection-ui-carousel", children: [showControls ? (_jsxs("div", { className: "collection-ui-carousel__controls", children: [_jsx("button", { type: "button", "aria-controls": carouselId, "aria-label": previousLabel, className: `collection-ui-carousel__prev-${carouselId}`, children: "<" }), _jsx("button", { type: "button", "aria-controls": carouselId, "aria-label": nextLabel, className: `collection-ui-carousel__next-${carouselId}`, children: ">" })] })) : null, _jsx(Swiper, { id: carouselId, modules: [Navigation, EffectCoverflow, Autoplay, Pagination], cssMode: !isBanner && !isSlide && !effect && canDrag, effect: effect, navigation: {
|
|
12
29
|
prevEl: `.collection-ui-carousel__prev-${carouselId}`,
|
|
13
30
|
nextEl: `.collection-ui-carousel__next-${carouselId}`,
|
|
14
|
-
}, centeredSlides: centeredSlides, loop:
|
|
31
|
+
}, centeredSlides: centeredSlides, loop: shouldLoop, rewind: shouldRewind, autoplay: autoplay, speed: speed, spaceBetween: spaceBetween ?? (isGridTitle ? 24 : 20), edgeSwipeDetection: "prevent", allowTouchMove: canDrag, simulateTouch: canDrag, slidesPerView: slidesPerView ?? (isGridTitle ? 1 : "auto"), slidesPerGroup: 1, slidesPerGroupAuto: slidesPerGroupAuto ?? !isGridTitle, pagination: showPagination
|
|
32
|
+
? {
|
|
33
|
+
clickable: true,
|
|
34
|
+
}
|
|
35
|
+
: undefined, onAutoplayTimeLeft: handleAutoplayTimeLeft, coverflowEffect: effect === "coverflow"
|
|
15
36
|
? {
|
|
16
37
|
rotate: 0,
|
|
17
38
|
stretch: 0,
|
|
@@ -20,6 +41,6 @@ export function CollectionCarousel({ id, slides, className, slideClassName, prev
|
|
|
20
41
|
modifier: 1,
|
|
21
42
|
slideShadows: false,
|
|
22
43
|
}
|
|
23
|
-
: undefined, className: className ?? "collection-ui-carousel__track", breakpoints: breakpoints, children: slides.map((slide, index) => (_jsx(SwiperSlide, { className: slideClassName ?? "collection-ui-carousel__slide", children: slide }, index))) })] }));
|
|
44
|
+
: undefined, className: className ?? "collection-ui-carousel__track", breakpoints: breakpoints, children: slides.map((slide, index) => (_jsx(SwiperSlide, { className: slideClassName ?? "collection-ui-carousel__slide", children: slide }, index))) }), isSlide && autoplay ? (_jsx(AutoplayProgress, { progressCircleRef: progressCircleRef, progressContentRef: progressContentRef })) : null] }));
|
|
24
45
|
}
|
|
25
46
|
//# sourceMappingURL=CollectionCarousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionCarousel.js","sourceRoot":"","sources":["../../src/primitives/CollectionCarousel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CollectionCarousel.js","sourceRoot":"","sources":["../../src/primitives/CollectionCarousel.tsx"],"names":[],"mappings":"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"}
|