@redneckz/wildless-cms-uni-blocks 0.14.335 → 0.14.337

package/bundle/bundle.umd.js

@@ -4677,17 +4677,7 @@
         return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', align) }), rightImage: img, buttons: renderButtonsSection(buttons, { className: 'flex-wrap' }), children: [description ? (jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description })) : null, jsxs("div", { className: style('gap-m', 'flex flex-1 flex-col', 'flex-col items-start @xl:flex-row @xl:items-center'), children: [jsx(List, { items: items, listItemSize: "M" }), jsx(Text, { size: "text-m", "font-weight": "font-light", color: "text-secondary-text", children: additionalDescription }), qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md @xl:-order-1', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
-    const badgeBgStyleMap = {
-        primary: 'bg-white/30',
-        secondary: 'bg-main-divider',
-    };
-    const badgeTextColorStyleMap = {
-        primary: 'text-white',
-        secondary: 'text-secondary-text',
-    };
-    const Badge$1 = JSX(({ count, version = 'secondary' }) => {
-        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyleMap[version]), role: "status", children: jsx(Text, { size: "text-xs", color: badgeTextColorStyleMap[version], children: count }) }));
-    });
+    const getVersion = (isPrimary) => (isPrimary ? 'primary' : 'secondary');
 
     const getBadgeCount = (blocks = [], filter = {}) => blocks.filter(({ content = {} }) => targetMatchPattern(filter, content)).length;
 
@@ -4710,7 +4700,8 @@
         const activeItemIndex = useMemo(() => Math.max(0, hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState))), [hotFilters, filtrationState]);
         const items = useMemo(() => hotFilters.map((_) => ({
             text: _.text,
-            appendRight: (jsx(Badge$1, { version: _ === hotFilters[activeItemIndex] ? 'primary' : 'secondary', count: getBadgeCount(blocks, _.filter) })),
+            count: getBadgeCount(blocks, _.filter),
+            version: getVersion(_ === hotFilters[activeItemIndex]),
         })), [hotFilters, blocks, activeItemIndex]);
         const handleChange = useCallback((_) => {
             onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
@@ -4722,6 +4713,16 @@
         };
     };
 
+    const badgeBgStyleMap = {
+        primary: 'bg-white/30',
+        secondary: 'bg-main-divider',
+    };
+    const badgeTextColorStyleMap = {
+        primary: 'text-white',
+        secondary: 'text-secondary-text',
+    };
+    const Badge$1 = JSX(({ count, version = 'secondary' }) => (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyleMap[version]), role: "status", children: jsx(Text, { size: "text-xs", color: badgeTextColorStyleMap[version], children: count }) })));
+
     const getButtonClassNames = (isActive) => ({
         btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
         text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
@@ -4762,14 +4763,14 @@
     };
     const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
         const Tag = tag;
-        const { text, description, icon, appendRight, ...link } = item;
+        const { text, description, icon, count, ...link } = item;
         return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tablist", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [renderTabItemInner({
                         text,
                         description,
                         icon,
                         isActive,
                         type,
-                    }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
+                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", children: jsx(Badge$1, { count: count, version: getVersion(isActive) }) })) : null] }) }));
     });
 
     const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
@@ -5028,8 +5029,8 @@
         return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [title, lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: ` (${lengthItems})` })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] }));
     });
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
-        const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
-        const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
+        const allButtonVersion = getVersion(activeButton === 'all');
+        const businessButtonVersion = getVersion(activeButton === 'business');
         const handleClick = (e, key, branches) => {
             if (e.currentTarget === e.target && key === 'business') {
                 branches.filter((branch) => branch.workSchedule &&
@@ -5655,14 +5656,19 @@
     const SwipeListControlBlock = UniBlock(({ listType, showDots, options, version, ...rest }) => (jsx(BlockWrapper, { version: version, defaultPadding: "p-0", ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) })), { childrenTypes: { exclude: ['SwipeListControlBlock'] } });
 
     const scrollButtonStyle = 'hidden sm:flex absolute z-40';
-    const scrollStyleType = {
+    const scrollStyle = {
+        default: {
+            item: 'flex-1',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
         animated: {
-            itemClassName: 'flex',
+            item: 'flex',
             gap: 8,
             buttonTop: 'top-5',
         },
         underlined: {
-            itemClassName: '',
+            item: '',
             gap: 0,
             buttonTop: 'top-0',
         },
@@ -5671,7 +5677,7 @@
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: items?.length || 0,
         });
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyleType[tabsType].itemClassName, gap: scrollStyleType[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
 
     const renderTabs = ({ tabsMode, ...props }) => {
@@ -5748,32 +5754,41 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
-    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => {
-        switch (tabsType) {
-            case 'default':
-                return jsx(TabsControl, { ...props });
-            case 'underlined':
-                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
-            case 'animated':
-                return (jsx("div", { className: "border-b-8 border-primary-main", children: jsx(ScrollableTabsControl, { className: "m-auto", ...props, tabsType: "animated" }) }));
-            default:
-                return null;
-        }
+    const tabsStyle = {
+        default: {
+            wrapper: '',
+            component: '',
+        },
+        animated: {
+            wrapper: 'border-b-8 border-primary-main bg-white',
+            component: 'm-auto',
+        },
+        underlined: {
+            wrapper: 'flex',
+            component: 'm-auto',
+        },
     };
+    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: tabsStyle[tabsType].wrapper, children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
 
     const TAB_QUERY_PARAM_KEY = 'tab';
-    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, ...rest }) => {
+    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
         const router = useRouter();
+        const tabsCounted = showCounter
+            ? tabs.map((_) => ({
+                ..._,
+                count: block?.slots?.[_?.text ?? '']?.length ?? 0,
+            }))
+            : tabs;
         const { isReady } = router;
-        const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
-        const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+        const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
+        const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
         useEffect(() => {
             const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-                ? tabs.findIndex((_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY])
+                ? tabsCounted.findIndex((_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY])
                 : defaultSelectedTab;
             setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
         }, [isReady, defaultSelectedTab]);
-        const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+        const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
         const updateUrlSearchTabParam = (_, index) => {
             const searchParams = new URLSearchParams(router.query);
             if (_.text) {
@@ -5785,16 +5800,16 @@
             router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
         };
         const handleChange = useCallback((_) => {
-            const index = tabs.indexOf(_);
-            const tab = tabs[index];
+            const index = tabsCounted.indexOf(_);
+            const tab = tabsCounted[index];
             setActiveTabIndex(index);
             if (tab.type === 'group') {
                 updateUrlSearchTabParam(_, index);
             }
-        }, [tabs]);
+        }, [tabsCounted]);
         return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [renderTabsLayout({
-                    items: tabs,
-                    value: tabs[activeTabIndex],
+                    items: tabsCounted,
+                    value: tabsCounted[activeTabIndex],
                     tabsType,
                     onChange: handleChange,
                 }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: renderBlocksList(block?.slots?.[slotName], {
@@ -6242,7 +6257,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.334";
+    const packageVersion = "0.14.336";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;