@redneckz/wildless-cms-uni-blocks 0.4.2 → 0.4.3

package/bundle/bundle.umd.js

@@ -261,13 +261,22 @@
         const { IntersectionObserverTag } = context;
         const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
-            setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+            if (event.type === 'group') {
+                setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+            }
+            else {
+                setShouldRenderBlock(true);
+                scrollToBlock(event.label);
+            }
         }), [labels]);
         if (!shouldRenderBlock) {
             return null;
         }
         return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: changeHashOnObserve, observerOptions: { threshold: 1 }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
     });
+    function scrollToBlock(label) {
+        setTimeout(() => globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }));
+    }
 
     const HEADING_STYLE_MAP = {
         h0: 'text-h0',
@@ -1993,9 +2002,9 @@
         transparent: 'text-white',
     };
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', hideTitle, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'Logo' }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle(children, bgColor, logo?.title)] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'Logo' }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle$1(children, bgColor, logo?.title)] }));
     });
-    const renderTitle = (children, bgColor, title) => {
+    const renderTitle$1 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
         return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
     };
@@ -2194,12 +2203,12 @@
         const { className = '', tabs, currentTag, isShowCounter = false, onTabClick } = props;
         return (jsx("div", { className: `box-border flex gap-x-1 h-14 ${className}`, role: "tablist", children: tabs?.map(renderTab$2({ currentTag, isShowCounter, onTabClick })) }));
     });
-    const badgeStyle$1 = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
+    const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
     const renderTab$2 = ({ currentTag, isShowCounter, onTabClick }) => (tab, i) => {
         const isActive = currentTag === tab.tag;
         const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
         const tabText = `text-m-light ${isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'}`;
-        const counterBlockStyle = `${badgeStyle$1}
+        const counterBlockStyle = `${badgeStyle}
       ${isActive
         ? 'bg-white/30 text-white'
         : 'bg-main-divider text-secondary-text group-hover:text-primary-main'}`;
@@ -2230,22 +2239,22 @@
         isHrefActive(topItem.href, router) ||
         checkIsHrefSameOrigin(topItem.href, router);
 
-    const TEXT_CLASSES$2 = 'font-sans text-s-light';
-    const LINK_CLASSES$1 = 'inline-block border border-solid bg-transparent text-center no-underline';
+    const TEXT_CLASSES$3 = 'font-sans text-s-light';
+    const LINK_CLASSES$2 = 'inline-block border border-solid bg-transparent text-center no-underline';
     const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (jsx("a", { className: `${getLinkClasses$1(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$2(bgColor, active, flat), children: text || children }) })));
     const getLinkClasses$1 = (bgColor, active = false, flat = false) => {
         let classes = 'border-transparent';
         if (active) {
             classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
         }
-        return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
+        return `${classes} ${LINK_CLASSES$2} ${flat ? '' : 'px-4 py-2'}`;
     };
     const getTextClasses$2 = (bgColor, active = false, flat = false) => {
         if (bgColor !== 'bg-white') {
-            return `text-white ${TEXT_CLASSES$2}`;
+            return `text-white ${TEXT_CLASSES$3}`;
         }
         const nonActiveAtoms = `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
-        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$2}`;
+        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$3}`;
     };
 
     const DaData = DaDataAPI('https://10.80.4.9');
@@ -2292,7 +2301,7 @@
             : undefined;
     };
 
-    const TEXT_CLASSES$1 = 'font-sans text-l-light';
+    const TEXT_CLASSES$2 = 'font-sans text-l-light';
     const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
     const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white', dataItemName, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, "data-item-name": dataItemName, children: [jsx("span", { className: getTextClasses$1(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
     const getTextClasses$1 = (bgColor, active = false) => {
@@ -2300,7 +2309,7 @@
         if (bgColor === 'bg-white') {
             classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
         }
-        return `${classes} ${TEXT_CLASSES$1}`;
+        return `${classes} ${TEXT_CLASSES$2}`;
     };
     const getBorderClasses = (bgColor, active = false) => {
         if (!active) {
@@ -2469,16 +2478,16 @@
                         .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
     });
 
-    const TEXT_CLASSES = 'font-sans text-m';
-    const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
+    const TEXT_CLASSES$1 = 'font-sans text-m';
+    const LINK_CLASSES$1 = 'flex-1 flex items-center justify-center cursor-pointer';
     const NavigatorTabItem = JSX(({ className = '', text, active, onClick, href, target = '_self', children }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: text || children }) })));
     const getLinkClasses = (className, active = false) => {
         const classes = active ? 'bg-primary-main' : 'group bg-white';
-        return `${classes} ${LINK_CLASSES} ${className}`;
+        return `${classes} ${LINK_CLASSES$1} ${className}`;
     };
     const getTextClasses = (active = false) => {
         const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
-        return `${classes} ${TEXT_CLASSES}`;
+        return `${classes} ${TEXT_CLASSES$1}`;
     };
 
     const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, ...rest }) => {
@@ -2876,30 +2885,49 @@
         return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px]\n        whitespace-pre-line overflow-hidden", children: [step?.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step?.description ? (jsx("div", { className: `text-l-light ${styleMap.description} ${additionalMarginClass}`, children: step.description })) : null, step.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", ...useLink({ router, handlerDecorator }, step.button), version: version, children: step.button.text })) : null] }, String(i)));
     };
 
-    const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-    const renderTab = ({ onClick, currentTab, showCounter, page }) => (tab, i) => {
-        const isActive = currentTab === tab;
-        const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-        const tabText = `text-m-light ${isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'}`;
-        const counterBlockStyle = `${badgeStyle}
-      ${isActive
-        ? 'bg-white/30 text-white'
-        : 'bg-main-divider text-secondary-text group-hover:text-primary-main'}`;
-        const count = tab.id
-            ? page?.blocks?.filter((block) => block?.labels?.includes(tab.id)).length
+    const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
+    const ACTIVE_LINK_CLASSES = 'bg-primary-main';
+    const INACTIVE_LINK_CLASSES = 'group bg-white';
+    const TEXT_CLASSES = 'font-sans text-m';
+    const ACTIVE_TEXT_CLASSES = 'text-white';
+    const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
+
+    const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+    const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
+    const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+    const renderGroupTab = ({ onClick, currentTab, showCounter, page }) => (tab, i) => {
+        const active = currentTab === tab;
+        const count = tab.ref
+            ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref)).length
             : page?.blocks?.length;
-        return (jsx("div", { className: `flex h-12 w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", "aria-selected": isActive, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, showCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: count })) : null] }) }, String(i)));
+        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+    };
+    const renderTitle = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
+    const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
+
+    const renderLinkTab = ({ text, onClick, href, target = '_self', i }) => (jsx("a", { className: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`, target: target, href: href, onClick: onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`, children: text }) }, String(i)));
+
+    const renderTab = ({ onClick, currentTab, showCounter, page, context }) => (tab, i) => {
+        const { useRouter, handlerDecorator } = context;
+        const router = useRouter();
+        if (isURL(tab?.ref)) {
+            return renderLinkTab({
+                ...useLink({ router, handlerDecorator }, { href: tab.ref, text: tab.title }),
+                i,
+            });
+        }
+        return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
     };
 
     const Tabs = JSX((props) => {
         const { context, className, tabs, page, showCounter } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
-        useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+        useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.ref }), [currentTab]);
         const handleClick = (selectedTab) => {
-            EventBus.inst.fire('tab', { label: selectedTab.id });
+            EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
             setCurrentTab(selectedTab);
         };
-        return (jsx(BlockWrapper, { context: context, className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter })) }));
+        return (jsx(BlockWrapper, { context: context, className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context })) }));
     });
 
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';