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

package/dist/components/content-builders/article4/article4cora/article4cora-roots.d.ts

@@ -0,0 +1,4 @@
+declare const Article4CoraRoots: React.FC<any>;
+export declare const mediaTestData: {};
+export declare const mediaTestData2: {};
+export default Article4CoraRoots;

package/dist/components/content-builders/article4/article4cora/article4cora-roots.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shadcns/index.js";
+import { MediaEmblaRoot } from "./media-embla";
+import { MediaBaseRoot } from "./media-base";
+const Article4CoraRoots = ({ data }) => {
+    return (_jsx("div", { className: cn("mt-19", "py-20"), children: _jsxs("div", { className: cn("mx-auto", "px-20", "py-20", "max-w-[80%]", "bg-[#f7f7f7]", "space-y-20", "@container"), children: [_jsx(MediaBaseRoot, { ...mediaTestData }), _jsx(MediaEmblaRoot, { ...mediaTestData2 })] }) }));
+};
+// 假資料 - 一般圖文
+export const mediaTestData = {
+// row: 2,
+// merge: true,
+// firstBig: true,
+// imgSize: "x11",
+// imgFlex: "center",
+// imgWidthFull: false,
+// mobileImgSingle: true,
+// descriptionColor: "#f00",
+// descriptionAlign: 'center',
+// datas: [
+// 	{
+// 		type: "image",
+// 		img: "https://picsum.photos/id/986/1000/200",
+// 		imgAlt: "123",
+// 		href: 'https://picsum.photos/id/986/700/400',
+// 		target: true,
+// 		description: "有設定外連結+_blank",
+// 	},
+// 	{
+// 	},
+// 	{
+// 		type: "video",
+// 	},
+// ],
+};
+// 假資料 - 輪播
+export const mediaTestData2 = {
+// row: 3,
+// merge: true,
+// navigation: 'center',
+// pagination: false,
+// slidesToScroll: 2,
+// autoplay: false,
+// autoplayDelay = 2000,
+// duration: 25,
+// loop: false,
+// imgSize: "x11",
+// imgFlex: "center",
+// imgWidthFull:false,
+// navigationColor:'#f00',
+// paginationColor:'#f00',
+// descriptionColor:'#f00',
+// descriptionAlign:'center',
+// datas: [
+// 	{
+// 		type: "image",
+// 		img: "https://picsum.photos/id/986/500/400",
+// 		imgAlt: "123",
+// 		href: 'https://picsum.photos/id/986/500/400',
+// 		target: true,
+// 		description: "有設定外連結+_blank",
+// 	},
+// 	{
+// 		type: "image",
+// 		img: "https://picsum.photos/id/986/200/100",
+// 		imgAlt: "123",
+// 		href: 'https://picsum.photos/id/986/200/400',
+// 		description: "有設定外連結，沒有_blank",
+// 	},
+// 	{
+// 		type: "video",
+// 		img: "https://picsum.photos/id/986/700/400",
+// 		imgAlt: "123",
+// 		description: "影片樣式",
+// 	},
+// ],
+};
+Article4CoraRoots.displayName = "Article4CoraRoots";
+export default Article4CoraRoots;

package/dist/components/content-builders/article4/article4cora/media-base/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MediaBaseRoot } from "./media-base-root";
+export * from "./media-base-root";

package/dist/components/content-builders/article4/article4cora/media-base/index.js

@@ -0,0 +1,2 @@
+export { default as MediaBaseRoot } from "./media-base-root";
+export * from "./media-base-root";

package/dist/components/content-builders/article4/article4cora/media-base/media-base-root.d.ts

@@ -0,0 +1,15 @@
+import { MediaCoverProps } from "../media-cover";
+export interface MediaBaseRootProps {
+    row?: number;
+    merge?: boolean;
+    firstBig?: boolean;
+    imgSize?: "x11" | "x34" | "x43" | "x169" | 'custom';
+    imgFlex?: "top" | "center" | "bottom";
+    imgWidthFull?: boolean;
+    mobileImgSingle?: boolean;
+    descriptionColor?: string;
+    descriptionAlign?: string;
+    datas?: MediaCoverProps[];
+}
+export declare const MediaBaseRoot: React.FC<MediaBaseRootProps>;
+export default MediaBaseRoot;

package/dist/components/content-builders/article4/article4cora/media-base/media-base-root.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../../shadcns/index.js";
+import { MediaCover } from "../media-cover";
+// 主件
+export const MediaBaseRoot = (props) => {
+    // default options
+    const { row = 1, merge = false, firstBig = false, imgSize = 'x43', imgFlex = "top", imgWidthFull = true, mobileImgSingle = false, descriptionColor, descriptionAlign = "left", datas = [{
+            type: 'video',
+        }], } = props;
+    const imgSizeStyle = {
+        "x11": "1/1",
+        "x34": "3/4",
+        "x43": "4/3",
+        "x169": "16/9",
+        'custom': false
+    }[imgSize || ""];
+    // 變數們  （ 放外層讓裡面繼承 ）
+    const rootStyle = {
+        "--desktop-row-number": row, // 電腦版每列顯示數量
+        "--description-color": descriptionColor, // 圖片敘述顏色
+        "--img-size": imgSizeStyle // 圖片比例
+    };
+    const isSingleRow = row === 1;
+    // 文字對齊
+    const descriptionAlignClassName = `text-${descriptionAlign || "left"}`;
+    // 圖片對齊
+    const emblaContainerImgFlex = {
+        top: "items-start",
+        center: "items-center",
+        bottom: "items-end",
+    }[imgFlex] || "items-start";
+    return (_jsx("div", { "data-component": "media-cover-root", className: cn("w-full", "grid", "gap-x-5", "gap-y-5", "grid-cols-2", // 手機版預設 2 張
+        descriptionAlignClassName, "**:data-[component='media-cover']:text-(--description-color)", `**:data-[component='media-cover-photo']:aspect-(--img-size)`, "@4xl:grid-cols-[repeat(var(--desktop-row-number),1fr)]", 
+        // 拼圖模式
+        merge && [
+            "gap-0",
+        ], 
+        // 每列設置1張或是手機版設置單張圖時，手機顯示 1 張
+        (isSingleRow || mobileImgSingle) && [
+            "grid-cols-1",
+        ], !imgWidthFull && [
+            "**:data-[component='media-cover-photo']:w-auto",
+        ], emblaContainerImgFlex), style: rootStyle, children: datas.map((data, index) => {
+            // firstBig 判斷
+            const isfirstBig = firstBig && index === 0;
+            return (_jsx(MediaCover, { merge: merge, style: {
+                    gridColumn: isfirstBig ? `1 / span ${row}` : 'auto',
+                }, ...data }, index));
+        }) }));
+};
+MediaBaseRoot.displayName = "MediaBaseRoot";
+export default MediaBaseRoot;

package/dist/components/content-builders/article4/article4cora/media-cover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MediaCover } from "./media-cover-root";
+export * from "./media-cover-root";

package/dist/components/content-builders/article4/article4cora/media-cover/index.js

@@ -0,0 +1,2 @@
+export { default as MediaCover } from "./media-cover-root";
+export * from "./media-cover-root";

package/dist/components/content-builders/article4/article4cora/media-cover/media-cover-root.d.ts

@@ -0,0 +1,15 @@
+export interface MediaCoverProps {
+    type?: "image" | "video" | "youtube";
+    merge?: boolean;
+    img?: string;
+    imgAlt?: string;
+    description?: string;
+    href?: string;
+    target?: boolean;
+    className?: string;
+    style?: any;
+}
+export declare const MediaCover: React.FC<MediaCoverProps>;
+export declare const MediaCoverPhoto: React.FC<MediaCoverProps>;
+export declare const MediaCoverVideo: React.FC<MediaCoverProps>;
+export default MediaCover;

package/dist/components/content-builders/article4/article4cora/media-cover/media-cover-root.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../shadcns/index.js";
+// 1.殼
+export const MediaCover = (props) => {
+    const { type = "image", merge, href, target, description = "圖片說明文字", style, } = props;
+    // 只有 target 才要 _blank
+    const linkProps = target
+        ? { target: "_blank" }
+        : {};
+    return (_jsxs("figure", { "data-component": "media-cover", style: style, children: [type === "image" && (href ? (_jsx("a", { href: href, ...linkProps, children: _jsx(MediaCoverPhoto, { ...props }) })) : (_jsx(MediaCoverPhoto, { ...props }))), type === "video" && _jsx(MediaCoverVideo, { ...props }), !merge && description && (_jsx("figcaption", { "data-component": "media-cover-description", className: cn("mt-2.5", "text-sm"), children: description }))] }));
+};
+// 1-1.圖
+export const MediaCoverPhoto = (props) => {
+    const { img = "https://picsum.photos/id/986/700/400", imgAlt = "imgAlt" } = props;
+    return (_jsx("img", { "data-component": "media-cover-photo", className: cn("w-full", "h-auto", "object-cover", "block"), src: img, alt: imgAlt || "" }));
+};
+// 1-2.影片
+export const MediaCoverVideo = (props) => {
+    const { img = "https://picsum.photos/id/986/700/400", } = props;
+    return (_jsx("div", { "data-component": "media-cover-video", className: cn("relative"), children: _jsxs("div", { children: [img && _jsx(MediaCoverPhoto, { ...props }), _jsx("div", { className: cn("absolute", "top-1/2", "left-1/2", "-translate-x-1/2", "-translate-y-1/2", "w-full", "h-full", "flex", "justify-center", "items-center", "after:absolute", "after:top-1/2", "after:left-1/2", "after:-translate-x-1/2", "after:-translate-y-1/2", "after:w-full", "after:h-full", "after:z-0", "after:bg-black", "after:opacity-50"), children: _jsx("div", { className: cn("relative", "w-[min(24%,60px)]", "aspect-square", "flex", "justify-center", "items-center", "bg-white", "rounded-full", "cursor-pointer", "z-1"), children: _jsx("div", { className: cn("border-solid", "border-[6px_0_6px_9px]", "border-transparent", "border-l-black", "z-1", "@4xl:border-[8px_0_8px_13px]") }) }) })] }) }));
+};
+MediaCover.displayName = "MediaCover";
+export default MediaCover;

package/dist/components/content-builders/article4/article4cora/media-embla/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MediaEmblaRoot } from "./media-embla-root";
+export * from "./media-embla-root";

package/dist/components/content-builders/article4/article4cora/media-embla/index.js

@@ -0,0 +1,2 @@
+export { default as MediaEmblaRoot } from "./media-embla-root";
+export * from "./media-embla-root";

package/dist/components/content-builders/article4/article4cora/media-embla/media-embla-root.d.ts

@@ -0,0 +1,25 @@
+import { MediaCoverProps } from "../media-cover";
+export interface MediaEmblaRootProps {
+    row?: number;
+    merge?: boolean;
+    navigation?: "bottom" | "center" | boolean;
+    pagination?: boolean;
+    slidesToScroll?: number;
+    autoplay?: boolean;
+    autoplayDelay?: number;
+    duration?: number;
+    loop?: boolean;
+    imgSize?: "x11" | "x34" | "x43" | "x169" | string;
+    imgFlex?: "top" | "center" | "bottom";
+    imgWidthFull?: boolean;
+    navigationColor?: string;
+    paginationColor?: string;
+    descriptionColor?: string;
+    descriptionAlign?: "left" | "center" | "right";
+    datas?: MediaCoverProps[];
+}
+export declare const MediaEmblaRoot: React.FC<MediaEmblaRootProps>;
+export declare const MediaEmblaSlides: React.FC<any>;
+export declare const MediaEmblaNavigation: React.FC<any>;
+export declare const MediaEmblaPagination: React.FC<any>;
+export default MediaEmblaRoot;

package/dist/components/content-builders/article4/article4cora/media-embla/media-embla-root.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../shadcns/index.js";
+import { Embla, EmblaPagination, EmblaContainer, useCarouselContext } from "../../../../index.js";
+import { MediaCover } from "../media-cover";
+// 輪播樣式
+export const MediaEmblaRoot = (props) => {
+    // default options
+    const { row = 2, merge = false, navigation = false, pagination = true, slidesToScroll = 1, autoplay = true, autoplayDelay = 4000, duration = 25, loop = true, imgSize, imgFlex = "top", imgWidthFull = true, navigationColor, paginationColor, descriptionColor, descriptionAlign = "left", datas = [{}, {}, {}], } = props;
+    // navigation 模式
+    const navigationIsCenter = navigation === 'center';
+    // 電腦版，row 的數量 === datas 輪播數量時，不會啟動按鈕，故不調整整體寬度
+    const isControllerHide = row === datas.length || row > datas.length;
+    // embla 總寬度計算
+    const emblaClassName = navigationIsCenter
+        ? cn(
+        // 左右箭頭啟動，且置中時會縮短整體寬度
+        "w-[calc(100%-40px-20px*2)]", "mx-auto", isControllerHide ? "@4xl:w-[calc(100%+20px)] -ml-2.5" : "@4xl:w-[calc(100%-60px-30px*2)]") : cn(
+    // 左右箭頭置下或隱藏，寬度撐滿
+    merge
+        ? "ml-0 w-full" // 啟動拼圖，不用計算圖片左右間距
+        : "w-[calc(100%+20px)] -ml-2.5" // base，
+    );
+    // navigation 樣式
+    const navigationClassName = navigationIsCenter ? cn(
+    // navigation = 'center' 置中
+    "absolute", "justify-between", "top-1/2", "-translate-y-1/2", "w-full") : cn(
+    // navigation = 'bottom' 置底 || false 移除
+    "mt-2.5", "justify-center", "gap-x-5", "@4xl:mt-7.5");
+    // 圖片比例
+    const imgSizeStyle = {
+        "x11": "1/1",
+        "x34": "3/4",
+        "x43": "4/3",
+        "x169": "16/9",
+    }[imgSize || ""];
+    // 變數們  （ 放外層讓裡面繼承 ）
+    const rootStyle = {
+        "--navigation-color": navigationColor ? navigationColor : "#000", // 左右箭頭顏色
+        "--description-color": descriptionColor, // 圖片敘述顏色
+        "--slide-basis": row ? `${100 / row}%` : "100%", // slide 寬度變數
+        "--img-size": imgSizeStyle // 圖片比例
+    };
+    // 圖片對齊
+    const emblaContainerImgFlex = {
+        top: "items-start",
+        center: "items-center",
+        bottom: "items-end",
+    }[imgFlex] || "items-start";
+    // 文字對齊
+    const descriptionAlignClassName = `text-${descriptionAlign || "left"}`;
+    // slide 樣式計算
+    const mediaEmblaSlidesClassName = row ? cn("flex-[0_0_100%]", "@4xl:flex-[0_0_var(--slide-basis)]", merge ? "pl-0" : "pl-2.5", merge ? "pr-0" : "pr-2.5") : cn("flex-[0_0_100%]", "px-2.5");
+    return (_jsx("div", { "data-component": "media-embla-root", className: cn("relative", "overflow-hidden", !imgWidthFull && [
+            "**:data-[component='media-cover-photo']:w-auto",
+        ], descriptionAlignClassName, "**:data-[component='media-cover']:text-(--description-color)", `**:data-[component='media-cover-photo']:aspect-(--img-size)`), style: rootStyle, children: _jsx(Embla, { options: {
+                align: "start",
+                duration: duration,
+                loop: loop,
+                breakpoints: {
+                    '(min-width: 768px)': { slidesToScroll: slidesToScroll },
+                },
+            }, autoplayEnabled: autoplay, autoplayOptions: {
+                delay: autoplayDelay,
+                stopOnMouseEnter: true, // 滑鼠移入後暫停
+            }, className: cn("w-[calc(100%+20px)]", "-ml-2.5", emblaClassName), 
+            // pagination & navigation
+            controls: [
+                pagination && _jsx(MediaEmblaPagination, { paginationColor: paginationColor }),
+                navigation && _jsx(MediaEmblaNavigation, { className: navigationClassName })
+            ], children: _jsx(EmblaContainer, { className: cn(emblaContainerImgFlex), children: datas.map((data, index) => {
+                    return (_jsx(MediaEmblaSlides, { className: mediaEmblaSlidesClassName, ...data }, index));
+                }) }) }) }));
+};
+// slide 卡片
+export const MediaEmblaSlides = ({ className, ...props }) => {
+    return (_jsx("div", { "data-component": "media-embla-slides", className: cn("relative", "shrink-0", className), children: _jsx(MediaCover, { ...props }) }));
+};
+// navigation 左右箭頭
+export const MediaEmblaNavigation = ({ className, svgIcon }) => {
+    const { scrollSnaps, nextScroll, prevScroll, emblaApi } = useCarouselContext();
+    const canScrollNext = emblaApi?.canScrollNext();
+    const canScrollPrev = emblaApi?.canScrollPrev();
+    const isSingle = scrollSnaps.length < 2;
+    const svgIcon2 = svgIcon ? svgIcon :
+        _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", height: "12", viewBox: "0 0 30 12", fill: "none", children: [_jsx("g", { clipPath: "url(#clip0_5_91)", children: _jsx("path", { d: "M6.55801 0.496948L0.980469 5.99166M0.980469 5.99166L6.55801 11.5002M0.980469 5.99166H30.0003", strokeWidth: "2", strokeMiterlimit: "10" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_5_91", children: _jsx("rect", { width: "30", height: "11.9972", fill: "white" }) }) })] });
+    return (_jsxs("div", { "data-component": "media-embla-navigation", className: cn("flex", "z-9", isSingle && [
+            "hidden"
+        ], "[&_svg]:stroke-(--navigation-color)", className), children: [_jsx("div", { onClick: () => { prevScroll(); }, className: cn("[&_svg]:w-5", "pointer-events-none", "@4xl:[&_svg]:w-7.5", "opacity-20", canScrollPrev && [
+                    "pointer-events-auto",
+                    "cursor-pointer",
+                    "opacity-100",
+                ]), children: svgIcon2 }), _jsx("div", { onClick: () => { nextScroll(); }, className: cn("[&_svg]:w-5", "pointer-events-none", "opacity-20", "-scale-x-100", "@4xl:[&_svg]:w-7.5", canScrollNext && [
+                    "pointer-events-auto",
+                    "cursor-pointer",
+                    "opacity-100",
+                ]), children: svgIcon2 })] }));
+};
+// Pagination 輪播點點
+export const MediaEmblaPagination = ({ swiperNumberShow = false, dynamicLimit = false, paginationColor = "#000", }) => {
+    const { scrollSnaps } = useCarouselContext();
+    const isSingle = scrollSnaps.length < 2;
+    return (_jsx("div", { "data-component": "media-embla-pagination", className: cn("flex", "justify-center", "px-5", "mt-2.5", "w-full", "@4xl:mt-7.5", isSingle && [
+            "hidden",
+        ]), children: _jsx(EmblaPagination, { swiperNumber: swiperNumberShow, dynamic: dynamicLimit, color: paginationColor }) }));
+};
+MediaEmblaRoot.displayName = "MediaEmblaRoot";
+export default MediaEmblaRoot;

package/dist/components/content-builders/article4/baseBlock.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentConfig, PuckComponent } from "@puckeditor/core";
+type HeadingData = {
+    title?: string;
+    titleTag?: any;
+    titleColor?: string;
+    titleAlign?: "left" | "center" | "right";
+};
+type ContentBlockData = {
+    option?: {
+        rwdReverse?: 'normal' | 'reverse';
+    };
+    config?: any;
+};
+export declare const BaseBlockSue: PuckComponent<ContentBlockData>;
+export declare const RenderHeading: React.FC<HeadingData>;
+export declare const BaseBlockSueConfigs: ComponentConfig;
+export {};

package/dist/components/content-builders/article4/baseBlock.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderBtn } from "./commonComponents";
+import { BuilderBlocksComponent } from "../content-builder-blocks";
+export const BaseBlockSue = ({ option, config, puck, ...props }) => {
+    // 引入樣式
+    // const { type1Block } = config || {}
+    const { rwdReverse = "normal" } = option || {};
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(BuilderBlocksComponent, { name: "BaseBlockSue", puck: puck, children: _jsx("div", { "data-component": "BaseBlock", className: cn("@container", "w-full", "max-w-full", "py-15", config), ...props, children: _jsxs("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto", "grid", "grid-rows-[auto_auto]", "gap-5"), children: [_jsx("div", { className: cn("w-full", "order-0"), children: _jsx(RenderHeading, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-1", isRWDReverse && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-2", isRWDReverse && "order-1"), children: _jsx(RenderText, {}) })] }) }) }));
+};
+export const RenderHeading = (props) => {
+    const { title = '標題', titleTag: TitleComponent = "h2", titleColor, titleAlign = "left", } = props;
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { className: cn("w-full"), style: {
+                "--title-color": titleColor,
+            }, children: title &&
+                _jsx(TitleComponent, { "data-component": "article-item-title", className: cn("text-xl", "@4xl:text-3xl", "font-bold", "text-(--title-color)", titleAlign && alignMap[titleAlign]), children: title }) }) }));
+};
+const RenderText = (props) => {
+    const { subTitle = '副標題', paragraph = '內文', subTitleAlign = "left", paragraphAlign = "left", buttonAlign = "left", buttonData = [
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:',
+        },
+    ], subTitleColor, paragraphColor } = props;
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-component": "article-text-content", className: cn("w-full"), style: {
+                "--subTitle-color": subTitleColor,
+                "--paragraph-color": paragraphColor,
+            }, children: [_jsxs("div", { className: cn("space-y-5"), children: [subTitle &&
+                            _jsx("p", { "data-component": "article-text-subtitle", className: cn("text-m", "@4xl:text-xl", "text-gray-600", "text-(--subTitle-color)", subTitleAlign && alignMap[subTitleAlign]), children: subTitle }), paragraph &&
+                            _jsx("p", { "data-component": "article-text-paragraph", className: cn("text-sm", "text-gray-700", "text-(--paragraph-color)", paragraphAlign && alignMap[paragraphAlign]), children: paragraph })] }), buttonData && _jsx(RenderBtn, { buttonData: buttonData, buttonAlign: buttonAlign })] }) }));
+};
+export const BaseBlockSueConfigs = {
+    label: "BaseBlockSue",
+    fields: {
+        // slotTextBlock: { type: "slot", allow: ["TextContent"] },
+        // slotMediaBlock: { type: "slot", allow: ["MediaContent"] },
+        option: {
+            label: "Contetn Options",
+            type: "object",
+            objectFields: {
+                rwdReverse: {
+                    label: "Content Align",
+                    type: "radio",
+                    options: [
+                        { label: "Normal", value: "normal" },
+                        { label: "Reverse", value: "reverse" },
+                    ],
+                },
+                textAlign2: {
+                    label: "Content Vertical",
+                    type: "radio",
+                    options: [
+                        { label: "Top", value: "top" },
+                        { label: "Middle", value: "middle" },
+                        { label: "Bottom", value: "bottom" },
+                    ],
+                },
+            },
+        },
+        // background: {
+        // 	label: "Background Setting",
+        // 	type: "object",
+        // 	objectFields: {
+        // 		isImage: {
+        // 			label: "Use Image",
+        // 			type: "radio",
+        // 			options: [
+        // 				{ label: "Yes", value: "yes" },
+        // 				{ label: "No", value: "no" },
+        // 			],
+        // 		},
+        // 		imageAddress: {
+        // 			label: "Image Address",
+        // 			type: "text"
+        // 		},
+        // 		color: {
+        // 			label: "Color",
+        // 			type: "text"
+        // 		},
+        // 	},
+        // },
+    },
+    // defaultProps: {
+    // 	options: {
+    // 		textAlign: "left",
+    // 		textAlign2: "top"
+    // 	},
+    // 	background: {
+    // 		isImage: "no"
+    // 	},
+    // 	configs: {
+    // 		className: ""
+    // 	}
+    // },
+    render: BaseBlockSue
+};

package/dist/components/content-builders/article4/commonComponents.d.ts

@@ -0,0 +1,53 @@
+export type MediaData = {
+    row?: number;
+    firstbig?: boolean;
+    merge?: boolean;
+    gapY?: number;
+    gapX?: number;
+    datas?: MediaItem[];
+};
+export type TextBoxData = {
+    title?: string;
+    subtitle?: string;
+    paragraph?: string;
+    titleAlign?: "left" | "center" | "right";
+    subTitleAlign?: "left" | "center" | "right";
+    paragraphAlign?: "left" | "center" | "right";
+    buttonAlign?: "left" | "center" | "right";
+    buttonData?: ButtonItem[];
+    titleTag?: any;
+    titleColor?: string;
+    subTitleColor?: string;
+    paragraphColor?: string;
+};
+export type ButtonItem = {
+    buttonText?: string;
+    buttonLink?: string;
+    option?: ButtonOptions;
+};
+export type ButtonOptions = {
+    bgColor?: string;
+    textColor?: string;
+    hoverBgColor?: string;
+    hoverTextColor?: string;
+};
+export type MediaItem = {
+    type?: "image" | "video" | "youtube";
+    merge?: boolean;
+    img?: string;
+    img_alt?: string;
+    description?: string;
+    href?: string;
+    target?: boolean;
+    className?: string;
+    style?: any;
+};
+export declare const RenderText: React.FC<TextBoxData>;
+export declare const RenderBtn: React.FC<{
+    buttonAlign?: string;
+    buttonData?: ButtonItem[];
+}>;
+export declare const RenderImage: React.FC<{
+    props?: any;
+    type?: "picture" | "embla";
+}>;

package/dist/components/content-builders/article4/commonComponents.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MediaBaseRoot } from "./article4cora/media-base";
+import { MediaEmblaRoot } from "./article4cora/media-embla";
+import { cn } from "../../../shadcns/index.js";
+export const RenderText = (props) => {
+    const { title = '標題', subtitle = '副標題', paragraph = '內文', titleAlign = "left", subTitleAlign = "left", paragraphAlign = "left", buttonAlign = "left", buttonData = [
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+    ], titleTag: TitleComponent = "h2", titleColor, subTitleColor, paragraphColor, } = props;
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-component": "article-text-content", className: cn("w-full"), style: {
+                "--title-color": titleColor,
+                "--subTitle-color": subTitleColor,
+                "--paragraph-color": paragraphColor,
+            }, children: [_jsxs("div", { className: cn("space-y-5"), children: [_jsxs("hgroup", { className: cn("space-y-5"), children: [title &&
+                                    _jsx(TitleComponent, { "data-component": "article-text-title", className: cn("text-xl", "font-bold", "@4xl:text-3xl", "text-(--title-color)", titleAlign && alignMap[titleAlign]), children: title }), subtitle &&
+                                    _jsx("p", { "data-component": "article-text-subtitle", className: cn("text-m", "@4xl:text-xl", "text-gray-600", "text-(--subTitle-color)", subTitleAlign && alignMap[subTitleAlign]), children: subtitle })] }), paragraph &&
+                            _jsx("p", { "data-component": "article-text-paragraph", className: cn("text-sm", "text-gray-700", "text-(--paragraph-color)", paragraphAlign && alignMap[paragraphAlign]), children: paragraph })] }), buttonData && _jsx(RenderBtn, { buttonData: buttonData, buttonAlign: buttonAlign })] }) }));
+};
+export const RenderBtn = ({ buttonAlign, buttonData }) => {
+    // 按鈕對齊
+    const buttonAlignClassName = {
+        "left": "justify-start",
+        "center": "justify-center",
+        "right": "justify-end",
+    }[buttonAlign || ""];
+    return (_jsx(_Fragment, { children: _jsx("div", { className: cn("flex", "gap-2", "flex-wrap", "mt-5", buttonAlignClassName), children: buttonData?.map((item, i) => (_jsx("a", { href: item.buttonLink, "data-component": "article-button", className: cn("inline-block", "px-4", "py-2", "text-sm", "font-semibold", "leading-[1.8]", "tracking-[0.8px]", "transition", "duration-500", "bg-(--bg-color)", "text-(--T-color)", "hover:bg-(--hoverBG-color)", "hover:text-(--hoverT-color)"), style: {
+                    "--T-color": item.option?.textColor || "#FFF",
+                    "--bg-color": item.option?.bgColor || "#000",
+                    "--hoverT-color": item.option?.hoverTextColor || "#000",
+                    "--hoverBG-color": item.option?.hoverBgColor || "#F1F1f1",
+                }, children: item.buttonText }, i))) }) }));
+};
+export const RenderImage = ({ props = {
+    row: 2,
+    // merge: true,
+    // navigation: 'center',
+    // pagination: false,
+    // slidesToScroll: 1,
+    // autoplay: false,
+    // duration: 25,
+    // loop: true,
+    // navigationColor: '#0ff',
+    // paginationColor: '#f0f',
+    // descriptionColor: '#ff0',
+    // descriptionAlign: 'center',
+    // imgWidthFull: false,
+    datas: [
+        {
+            // type: "image",
+            // img: "https://picsum.photos/id/986/700/400",
+            // imgAlt: "123",
+            href: 'https://picsum.photos/id/986/700/400',
+            target: true,
+            description: "有設定外連結+_blank",
+        },
+        {
+            // type: "image",
+            // img: "https://picsum.photos/id/986/700/400",
+            // imgAlt: "123",
+            href: 'https://picsum.photos/id/986/700/400',
+            description: "有設定外連結，沒有_blank",
+        },
+        {
+            type: "video",
+            // img: "https://picsum.photos/id/986/700/400",
+            // imgAlt: "123",
+            description: "影片樣式",
+        },
+    ]
+}, type = "embla", }) => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-component": "article-media", className: cn("w-full"), children: [type === "picture" &&
+                    _jsx(MediaBaseRoot, { ...props }), type === "embla" &&
+                    _jsx(MediaEmblaRoot, { ...props })] }) }));
+};

package/dist/components/content-builders/article4/config.d.ts

@@ -0,0 +1,4 @@
+declare const config: {
+    type1Block: string[];
+};
+export default config;

package/dist/components/content-builders/article4/config.js

@@ -0,0 +1,6 @@
+const config = {
+    type1Block: [
+        "**:text-blue-500"
+    ]
+};
+export default config;