@xwadex/fesd-next 0.3.4-7.21 → 0.3.4-7.23

package/dist/components/emblas/embla-container.d.ts

@@ -0,0 +1,8 @@
+type PropsTypes = {
+    className?: string;
+    slide?: React.FC<any>;
+    children?: any;
+    style?: any;
+};
+declare const EmblaContainer: React.FC<PropsTypes>;
+export default EmblaContainer;

package/dist/components/emblas/embla-container.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../shadcns/index.js";
+import { useCarouselContext } from "./embla-context";
+const EmblaContainer = ({ slide: SlideComponent, className, children, style, ...props }) => {
+    const { datas, emblaApi } = useCarouselContext();
+    const cantSlide = !emblaApi?.canScrollNext() && !emblaApi?.canScrollPrev();
+    return (_jsxs("div", { "data-component": "embla-container", className: cn("flex", className, cantSlide && [
+            "transform-[unset!important]"
+        ]), style: { ...style }, children: [SlideComponent && datas?.map((item, index) => (_jsx(SlideComponent, { ...item, index: index, ...props }, item?.multipurpose?.key ?? item?.id ?? index))), children] }));
+};
+EmblaContainer.displayName = "EmblaContainer";
+export default EmblaContainer;

package/dist/components/emblas/embla-context.d.ts

@@ -0,0 +1,21 @@
+import type { EmblaViewportRefType } from "embla-carousel-react";
+import type { EmblaCarouselType } from 'embla-carousel';
+interface CarouselContextTypes {
+    datas: [];
+    emblaRef?: EmblaViewportRefType;
+    emblaApi?: EmblaCarouselType | null;
+    selectIndex: number;
+    scrollSnaps: number[];
+    nextScroll: () => void;
+    prevScroll: () => void;
+    scrollToIndex: (index: number) => void;
+    autoPlayReset: () => void;
+    autoPlayStop: () => void;
+    autoPlayPlay: () => void;
+}
+export declare const CarouselContextProvider: (props: {
+    children: React.ReactNode;
+    value: CarouselContextTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useCarouselContext: () => CarouselContextTypes;
+export {};

package/dist/components/emblas/embla-context.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+const CarouselContext = createContext(null);
+export const CarouselContextProvider = (props) => {
+    return _jsx(CarouselContext, { ...props });
+};
+export const useCarouselContext = () => {
+    const context = use(CarouselContext);
+    if (!context)
+        throw new Error("useCMSData must be used inside CMSProvider");
+    return context;
+};

package/dist/components/emblas/embla.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { EmblaOptionsType } from "embla-carousel";
+import type { AutoplayOptionsType } from "embla-carousel-autoplay";
+export interface PropsTypes extends EmblaOptionsType {
+    children?: React.ReactNode;
+    className?: string;
+    options?: EmblaOptionsType;
+    datas?: any;
+    autoplayEnabled?: boolean;
+    autoplayOptions?: AutoplayOptionsType;
+    setApi?: any;
+    setMethods?: any;
+    setRef?: any;
+    style?: any;
+    controls?: any;
+    plugins?: any;
+    onScrolled?: (index: number) => void;
+}
+declare const Embla: React.FC<PropsTypes>;
+export default Embla;

package/dist/components/emblas/embla.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { cn } from "../../shadcns/index.js";
+import { CarouselContextProvider } from "./embla-context";
+import Autoplay from "embla-carousel-autoplay";
+const Embla = ({ children, className, options, datas, autoplayEnabled = true, autoplayOptions, setApi, setMethods, setRef, style, controls, onScrolled }) => {
+    const { loop, duration = 40 } = options || {};
+    const autoplaySetting = useMemo(() => {
+        if (!autoplayEnabled)
+            return;
+        return [Autoplay({ playOnInit: true, delay: 5000, stopOnInteraction: false, ...autoplayOptions })];
+    }, [autoplayEnabled, autoplayOptions]);
+    const [emblaRef, emblaApi] = useEmblaCarousel({ ...options, loop, duration }, autoplaySetting);
+    const [selectIndex, setSelectIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+    const nextScroll = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const { canScrollNext, scrollNext } = emblaApi;
+        canScrollNext() && scrollNext() && autoPlayReset();
+    }, [emblaApi]);
+    const prevScroll = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const { canScrollPrev, scrollPrev } = emblaApi;
+        canScrollPrev() && scrollPrev() && autoPlayReset();
+    }, [emblaApi]);
+    const scrollToIndex = useCallback((index) => {
+        if (!emblaApi || typeof index !== "number")
+            return;
+        emblaApi.scrollTo(index);
+    }, [emblaApi]);
+    // 自動輪播啟動
+    const autoPlayReset = useCallback(() => {
+        if (!emblaApi)
+            return;
+        // console.log("autoplay.reset");
+        const autoplay = emblaApi?.plugins()?.autoplay;
+        autoplay && autoplay.reset();
+    }, [emblaApi]);
+    const autoPlayPlay = useCallback(() => {
+        if (!emblaApi)
+            return;
+        // console.log("autoplay.play");
+        if (!emblaApi.canScrollNext())
+            return; // 防呆
+        const autoplay = emblaApi?.plugins()?.autoplay;
+        autoplay && autoplay.play();
+    }, [emblaApi]);
+    // 自動輪播暫停
+    const autoPlayStop = useCallback(() => {
+        if (!emblaApi)
+            return;
+        // console.log("autoplay.stop");
+        const autoplay = emblaApi?.plugins()?.autoplay;
+        autoplay && autoplay.stop();
+    }, [emblaApi]);
+    const contextValue = useMemo(() => ({
+        datas,
+        emblaRef,
+        emblaApi,
+        selectIndex,
+        scrollSnaps,
+        nextScroll,
+        prevScroll,
+        scrollToIndex,
+        autoPlayReset,
+        autoPlayStop,
+        autoPlayPlay
+    }), [
+        datas,
+        emblaRef,
+        emblaApi,
+        selectIndex,
+        scrollSnaps,
+        nextScroll,
+        prevScroll,
+        scrollToIndex,
+        autoPlayReset,
+        autoPlayStop,
+        autoPlayPlay
+    ]);
+    const onInit = useCallback((emblaApi) => {
+        const snapList = emblaApi.scrollSnapList();
+        setScrollSnaps(snapList);
+    }, []);
+    const onSelectEvent = (emblaApi) => {
+        emblaApi.on("select", () => {
+            onScrolled?.(emblaApi.selectedScrollSnap());
+            setSelectIndex(emblaApi.selectedScrollSnap());
+        });
+    };
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        setRef?.(emblaRef);
+        setApi?.(emblaApi);
+        setMethods?.({});
+        onInit(emblaApi);
+        onSelectEvent(emblaApi);
+    }, [emblaApi]);
+    return (_jsx(CarouselContextProvider, { value: contextValue, children: _jsxs("div", { "data-component": "embla-root", className: cn("relative w-full"), children: [_jsx("div", { className: cn("overflow-hidden", "w-full", className), ref: emblaRef, style: style, children: children }), Array.isArray(controls) ? controls.map((ctrl, i) => (_jsx(React.Fragment, { children: ctrl }, i))) : controls] }) })
+    // <CarouselContextProvider
+    // 	value={contextValue}
+    // >
+    // 	<div
+    // 		data-component="embla-root"
+    // 		className={cn(
+    // 			"overflow-hidden",
+    // 			"relative",
+    // 			"w-full",
+    // 			className
+    // 		)}
+    // 		ref={emblaRef}
+    // 		style={style}
+    // 	>
+    // 		{children}
+    // 	</div>
+    // </CarouselContextProvider>
+    );
+};
+Embla.displayName = "Embla";
+export default Embla;

package/dist/components/emblas/emblas-pagination.d.ts

@@ -0,0 +1,11 @@
+type EmblaPaginationPropsTypes = {
+    color?: "black" | "white" | string;
+    align?: "start" | "center" | "end";
+    className?: string;
+    maxDots?: number;
+    dynamic?: boolean;
+    swiperNumber?: boolean;
+    style?: string;
+};
+export declare const EmblaPagination: React.FC<EmblaPaginationPropsTypes>;
+export default EmblaPagination;

package/dist/components/emblas/emblas-pagination.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../shadcns/index.js";
+import { useCarouselContext } from "./embla-context";
+import { useEffect, useState } from "react";
+export const EmblaPagination = ({ color = "black", align, className, maxDots = 5, dynamic = true, swiperNumber = true, }) => {
+    const { selectIndex, scrollToIndex, scrollSnaps, autoPlayReset, emblaApi } = useCarouselContext();
+    // 點點計算
+    const total = scrollSnaps?.length ?? 0;
+    const active = Math.max(0, Math.min(selectIndex ?? 0, Math.max(0, total - 1)));
+    // 顯示數字
+    const paginationNumber = `${Number(active + 1) < 10 ? "0" + Number(active + 1) : Number(active + 1)}`;
+    const isWhite = color === "white";
+    // 點擊事件
+    const clickEvent = (index) => {
+        scrollToIndex(index); // 移動到當澤輪播
+        autoPlayReset(); // 如果有開啟自動輪播要重置輪播時間
+    };
+    // 點點是否為當前
+    const isSelected = (index) => {
+        return index === selectIndex;
+    };
+    // -- 動態點點 Start --
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [slideCount, setSlideCount] = useState(0);
+    useEffect(() => {
+        if (!emblaApi || !dynamic)
+            return;
+        const update = () => {
+            setSelectedIndex(emblaApi.selectedScrollSnap());
+            setSlideCount(emblaApi.scrollSnapList().length);
+        };
+        emblaApi.on('select', update);
+        emblaApi.on('reInit', update); // 重新初始化時也更新
+        update();
+        return () => {
+            emblaApi.off('select', update);
+            emblaApi.off('reInit', update);
+        };
+    }, [emblaApi, dynamic]);
+    const getVisibleBullets = () => {
+        const total = slideCount ?? 0;
+        if (total === 0)
+            return [];
+        const limit = Math.max(1, Number(maxDots));
+        const windowSize = Math.min(total, limit);
+        const left = Math.floor((windowSize - 1) / 2);
+        const right = windowSize - left - 1;
+        let start = selectedIndex - left;
+        let end = selectedIndex + right;
+        if (start < 0) {
+            end = Math.min(end - start, total - 1);
+            start = 0;
+        }
+        if (end > total - 1) {
+            start = Math.max(0, start - (end - (total - 1)));
+            end = total - 1;
+        }
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    };
+    const visibleRange = getVisibleBullets();
+    // -- 動態點點 End --
+    // 是否開啟動態點點決定點點跑陣列的方式
+    const dots = dynamic ? visibleRange : scrollSnaps?.map((_, i) => i) ?? [];
+    // WE - 頁碼
+    const swiperSnap = [
+        "text-[16px]",
+        "font-semibold",
+        " leading-[1.4]",
+    ];
+    const paginationColorStyle = {
+        "black": "#000",
+        "white": "#fff",
+    }[color] || `${color}`;
+    const paginationColorStyle2 = {
+        "--pagination-color": paginationColorStyle,
+    };
+    return (_jsxs("div", { "data-compoents": "emblas-pagination", className: cn("flex", "items-center", "gap-7.25", align === "center" && [
+            "justify-center",
+        ], className), style: paginationColorStyle2, children: [swiperNumber &&
+                _jsx("div", { className: cn(swiperSnap, "relative", "after:absolute", "after:top-1/2", "after:right-[-15px]", "after:-translate-y-1/2", "after:block", 
+                    // "after:bg-black",
+                    "after:bg-(--pagination-color)", "after:w-0.5", "after:h-3.75", "after:opacity-20", isWhite && [
+                        "after:bg-white",
+                    ]), children: paginationNumber }), _jsx("div", { className: cn("flex", "flex-wrap", "justify-end", "items-center", "gap-y-0", "gap-x-2.5", "**:data-[component='emblas-pagination-dots']:bg-(--pagination-color)", isWhite && [
+                    "**:data-[component='emblas-pagination-dots']:bg-white",
+                ]), children: dots.map((index) => (_jsx("div", { "data-component": "emblas-pagination-dots", onClick: () => clickEvent(index), className: cn("w-1.5", "h-1.5", "rounded-full", "cursor-pointer", "opacity-30", isSelected(index) && ("opacity-100")) }, index))) })] }));
+};
+EmblaPagination.displayName = "EmblaPagination";
+export default EmblaPagination;

package/dist/components/emblas/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./embla-context";
+export { default as Embla } from "./embla";
+export { default as EmblaContainer } from "./embla-container";
+export { default as EmblaPagination } from "./emblas-pagination";

package/dist/components/emblas/index.js

@@ -0,0 +1,4 @@
+export * from "./embla-context";
+export { default as Embla } from "./embla";
+export { default as EmblaContainer } from "./embla-container";
+export { default as EmblaPagination } from "./emblas-pagination";

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./anchors";
 export * from "./puck-contents";
+export * from "./content-builders";
 export * from "./scroll-containers";
 export * from "./embla-carousels";
+export * from "./emblas";
 export * from "./tests";

package/dist/components/index.js

@@ -1,5 +1,7 @@
 export * from "./anchors";
 export * from "./puck-contents";
+export * from "./content-builders";
 export * from "./scroll-containers";
 export * from "./embla-carousels";
+export * from "./emblas";
 export * from "./tests";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.4-7.21",
+	"version": "0.3.4-7.23",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",