@redneckz/wildless-cms-uni-blocks 0.10.7 → 0.10.8

package/bundle/bundle.umd.js

@@ -556,7 +556,7 @@
         const { close } = useDialog();
         return (props) => ({
             ...props,
-            href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+            href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
             'aria-label': props.text,
             onClick: handlerDecorator(handleHref(props), props),
         });
@@ -1814,7 +1814,7 @@
             visibleItemCount: COLUMNS_FOR_SCROLL,
         });
         return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative w-100', className), ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
-                            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
+                            ? renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
                             : null, renderArrows({
                             ...controls,
                             btnClass: ['left-3', 'right-3'],
@@ -1837,7 +1837,7 @@
                         iconVersion: iconVersion ?? activeIconStyle,
                     }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
     }
-    function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }) {
+    function renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
         return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$3({
                             tab,
@@ -2351,6 +2351,7 @@
     const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-1 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) }), jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: children })] })));
 
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
         return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
@@ -2385,7 +2386,7 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
-    const getPaddingStyle = (isHighlighting) => isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';
+    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';
 
     const descriptionSize = 'text-h6';
 
@@ -4424,7 +4425,11 @@
                 active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
                 default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
             },
-            default: {
+            centered: {
+                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+            },
+            wideScreen: {
                 active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
                 default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
             },
@@ -4434,7 +4439,11 @@
                 active: `h-full border-0 border-b-2`,
                 default: ``,
             },
-            default: {
+            centered: {
+                active: '',
+                default: '',
+            },
+            wideScreen: {
                 active: '',
                 default: '',
             },
@@ -4446,7 +4455,11 @@
                 active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
                 default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
             },
-            default: {
+            centered: {
+                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+            },
+            wideScreen: {
                 active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
                 default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
             },
@@ -4456,25 +4469,29 @@
                 active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
-            default: {
+            centered: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            wideScreen: {
                 active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
         },
     };
-    const getGroupTabClassName = (type, active, isScrollable) => {
-        const styleType = isScrollable ? 'scrollable' : 'default';
+    const getGroupTabClassName = (type, active, tabsMode) => {
         const styleActive = active ? 'active' : 'default';
-        return GROUP_TAB_CLASSES[type][styleType][styleActive];
+        const mode = tabsMode || 'wideScreen';
+        return GROUP_TAB_CLASSES[type][mode][styleActive];
     };
-    const getLinkTabClassName = (type, active, isScrollable) => {
-        const styleType = isScrollable ? 'scrollable' : 'default';
+    const getLinkTabClassName = (type, active, tabsMode) => {
         const styleActive = active ? 'active' : 'default';
-        return LINK_TAB_CLASSES[type][styleType][styleActive];
+        const mode = tabsMode || 'wideScreen';
+        return LINK_TAB_CLASSES[type][mode][styleActive];
     };
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab, onClick, isScrollable = false } = props;
+        const { tab, currentTab, onClick, tabsMode } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
         const link = useLink();
         const adjustedProps = link(tab);
@@ -4482,22 +4499,22 @@
             adjustedProps.onClick(ev);
             onClick(tab);
         };
-        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
+        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, tabsMode), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, tabsMode), children: tab.text }) }));
     });
 
     const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
     const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
-    const renderGroupTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
+    const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle$1(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+        return (jsx("div", { className: getGroupTabClassName('div', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, tabsMode)}`, children: [renderTitle$1(tab.title, active, tabsMode), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
     };
-    const renderTitle$1 = (title, active, isScrollable) => {
+    const renderTitle$1 = (title, active, tabsMode) => {
         const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-        const titleClassName = isScrollable
+        const titleClassName = tabsMode === 'scrollable'
             ? `${TEXT_CLASSES} ${activeClassName}`
             : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
         return title ? jsx("h3", { className: titleClassName, children: title }) : null;
@@ -4506,16 +4523,16 @@
         return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
     };
 
-    const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
+    const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
         const type = tab.type;
         if (!(type === 'group' || type === 'link')) {
             return null;
         }
         switch (type) {
             case 'group':
-                return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+                return renderGroupTab({ page, showCounter, ...rest })(tab, i);
             case 'link': {
-                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable, onClick: onClick }, String(i)));
+                return jsx(LinkTab, { tab: tab, ...rest }, String(i));
             }
             default:
                 assertUnreachable(type);
@@ -4523,24 +4540,20 @@
         return null;
     };
 
+    const CenteredTabs = JSX(({ tabs, ...rest }) => (jsx("div", { className: "flex p-1 m-auto bg-main-gray rounded-md", children: tabs?.map(renderTab({ ...rest })) })));
+
     const scrollButtonStyle = 'absolute z-40 top-0';
     const ScrollableTabs = JSX((props) => {
-        const { tabs, onClick, currentTab, page, showCounter } = props;
+        const { tabs, ...rest } = props;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: tabs?.length || 0,
             isCyclic: false,
         });
-        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({
-                            onClick,
-                            currentTab,
-                            showCounter,
-                            page,
-                            isScrollable: true,
-                        })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({ ...rest })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
     });
 
     const Tabs = JSX((props) => {
-        const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
+        const { className = '', tabs, isSticky, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => {
             if (!tabs || !tabs[0]) {
@@ -4557,13 +4570,19 @@
             fireTabEvent(selectedTab);
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
-                onClick: handleClick,
-                currentTab,
-                showCounter,
-                ...rest,
-            }))) }));
-    });
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+    });
+    const renderTabs = ({ tabsMode, tabs, ...rest }) => {
+        switch (tabsMode) {
+            case 'wideScreen':
+                return tabs?.map(renderTab({ tabsMode, ...rest }));
+            case 'centered':
+                return jsx(CenteredTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
+            case 'scrollable':
+                return jsx(ScrollableTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
+        }
+        return null;
+    };
     const fireTabEvent = (tab) => {
         if (tab.type === 'group') {
             defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
@@ -5006,7 +5025,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.10.7";
+    const packageVersion = "0.10.8";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;