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

package/mobile/lib/ui-kit/TabsControl/ScrollableTabsControl.js

@@ -6,14 +6,19 @@ import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer.js';
 import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll.js';
 import { renderTab } from './renderTab.js';
 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',
     },
@@ -22,6 +27,6 @@ export const ScrollableTabsControl = JSX(({ className, items = [], value, onChan
     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] }));
 });
 //# sourceMappingURL=ScrollableTabsControl.js.map

package/mobile/lib/ui-kit/TabsControl/ScrollableTabsControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableTabsControl.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/ScrollableTabsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,MAAM,iBAAiB,GAAG,8BAA8B,CAAC;AAEzD,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE;QACR,aAAa,EAAE,MAAM;QACrB,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO;KACnB;IACD,UAAU,EAAE;QACV,aAAa,EAAE,EAAE;QACjB,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CACtC,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAAE,EAAE,EAAE;IACnE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAAiB;QAChE,SAAS,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAE,KAAK,CAAC,uCAAuC,EAAE,SAAS,CAAC,aACvE,KAAC,kBAAkB,IACjB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,YAAY,EACtB,sBAAsB,EAAE,MAAM,CAAC,0BAA0B,EACzD,aAAa,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,aAAa,EACtD,GAAG,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,GAAG,YAEjC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAC7B,EACpB,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CACtB,KAAC,gBAAgB,IACf,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,iBAAiB,EACjB,eAAe,CAAC,QAAQ,CAAC,CAAC,SAAmB,CAC9C,EACD,OAAO,EAAE,MAAM,CAAC,UAAU,GAC1B,CACH,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CACvB,KAAC,iBAAiB,IAChB,SAAS,EAAE,KAAK,CACd,SAAS,EACT,iBAAiB,EACjB,eAAe,CAAC,QAAQ,CAAC,CAAC,SAAmB,CAC9C,EACD,OAAO,EAAE,MAAM,CAAC,WAAW,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"ScrollableTabsControl.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/ScrollableTabsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,MAAM,iBAAiB,GAAG,8BAA8B,CAAC;AAEzD,MAAM,WAAW,GAAuE;IACtF,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO;KACnB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CACtC,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAAE,EAAE,EAAE;IACnE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAAiB;QAChE,SAAS,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAE,KAAK,CAAC,uCAAuC,EAAE,SAAS,CAAC,aACvE,KAAC,kBAAkB,IACjB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,YAAY,EACtB,sBAAsB,EAAE,MAAM,CAAC,0BAA0B,EACzD,aAAa,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,EACzC,GAAG,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG,YAE7B,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAC7B,EACpB,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CACtB,KAAC,gBAAgB,IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,iBAAiB,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAC9E,OAAO,EAAE,MAAM,CAAC,UAAU,GAC1B,CACH,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CACvB,KAAC,iBAAiB,IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,iBAAiB,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAC/E,OAAO,EAAE,MAAM,CAAC,WAAW,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/TabsControl/TabItem.d.ts

@@ -1,11 +1,10 @@
 import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
-import { type VNode } from '../../model/VNode';
 import { type TabsControlProps, type TabsType } from './TabsControlProps';
 export interface TabItemBase extends LinkProps, TitleProps, DescriptionProps, IconProps {
     name?: string;
-    appendRight?: VNode;
+    count?: number;
 }
 export interface TabItemProps {
     item?: TabItemBase;

package/mobile/lib/ui-kit/TabsControl/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAK9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAc9C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE,CACjD,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAC,WAAW,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAC,aAAa,OAAK,KAAK,GAAI,CAC9E,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE;IAC9C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;IAE3E,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,aAAa,GAAG,GAAG,CAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1E,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,KAAM,IAAI,GAAI,CAAC;AACtE,CAAC,CAAC,CAAC"}
+{"version":3,"file":"TabItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAI9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAc9C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE,CACjD,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAC,WAAW,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAC,aAAa,OAAK,KAAK,GAAI,CAC9E,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE;IAC9C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;IAE3E,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,aAAa,GAAG,GAAG,CAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1E,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,KAAM,IAAI,GAAI,CAAC;AACtE,CAAC,CAAC,CAAC"}

package/mobile/lib/ui-kit/TabsControl/TabItemInner.d.ts

@@ -1,6 +1,7 @@
 import { type TabItemProps } from './TabItem';
 interface TabItemInnerProps extends TabItemProps {
     tag?: string;
+    count?: number;
 }
 export declare const TabItemInner: import("@redneckz/uni-jsx").UNIComponent<TabItemInnerProps, any, any>;
 export {};

package/mobile/lib/ui-kit/TabsControl/TabItemInner.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
+import { getVersion } from '../../utils/getVersion.js';
 import { style } from '../../utils/style.js';
+import { Badge } from '../Badge/Badge.js';
 import { renderTabItemInner } from './renderTabItemInner.js';
 const tabPaddingStyleMap = {
     default: 'px-xs',
@@ -25,13 +27,13 @@ const activeTabBgStyleMap = {
 };
 export 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, { count: count, version: getVersion(isActive) }) })) : null] }) }));
 });
 //# sourceMappingURL=TabItemInner.js.map

package/mobile/lib/ui-kit/TabsControl/TabItemInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItemInner.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItemInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,MAAM,kBAAkB,GAA6B;IACnD,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,kFAAkF;CAC7F,CAAC;AAEF,MAAM,YAAY,GAAG,6CAA6C,CAAC;AAEnE,MAAM,qBAAqB,GAA6B;IACtD,OAAO,EAAE,0BAA0B;IACnC,UAAU,EAAE,8BAA8B;IAC1C,QAAQ,EAAE,0BAA0B;CACrC,CAAC;AAEF,MAAM,aAAa,GAA6B;IAC9C,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,mEAAmE;CAC9E,CAAC;AAEF,MAAM,mBAAmB,GAA6B;IACpD,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,sDAAsD;CACjE,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1E,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAE/D,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,kBAAkB,CAAC,IAAI,CAAC,EACxB,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3D,EACD,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,KACZ,IAAI,YAER,eACE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,kCAAkC,EAClC,+BAA+B,EAC/B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CACtD,aAEA,kBAAkB,CAAC;oBAClB,IAAI;oBACJ,WAAW;oBACX,IAAI;oBACJ,QAAQ;oBACR,IAAI;iBACL,CAAC,EACD,WAAW,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,OAAO,YAAE,WAAW,GAAO,CAAC,CAAC,CAAC,IAAI,IAC5D,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"TabItemInner.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItemInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,MAAM,kBAAkB,GAA6B;IACnD,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,kFAAkF;CAC7F,CAAC;AAEF,MAAM,YAAY,GAAG,6CAA6C,CAAC;AAEnE,MAAM,qBAAqB,GAA6B;IACtD,OAAO,EAAE,0BAA0B;IACnC,UAAU,EAAE,8BAA8B;IAC1C,QAAQ,EAAE,0BAA0B;CACrC,CAAC;AAEF,MAAM,aAAa,GAA6B;IAC9C,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,mEAAmE;CAC9E,CAAC;AAEF,MAAM,mBAAmB,GAA6B;IACpD,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,sDAAsD;CACjE,CAAC;AAOF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1E,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAEzD,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,kBAAkB,CAAC,IAAI,CAAC,EACxB,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3D,EACD,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,KACZ,IAAI,YAER,eACE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,kCAAkC,EAClC,+BAA+B,EAC/B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CACtD,aAEA,kBAAkB,CAAC;oBAClB,IAAI;oBACJ,WAAW;oBACX,IAAI;oBACJ,QAAQ;oBACR,IAAI;iBACL,CAAC,EACD,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACzB,cAAK,SAAS,EAAC,OAAO,YACpB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAI,GAClD,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/utils/getVersion.d.ts

@@ -0,0 +1 @@
+export declare const getVersion: (isPrimary: boolean) => "primary" | "secondary";

package/mobile/lib/utils/getVersion.js

@@ -0,0 +1,2 @@
+export const getVersion = (isPrimary) => (isPrimary ? 'primary' : 'secondary');
+//# sourceMappingURL=getVersion.js.map

package/mobile/lib/utils/getVersion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVersion.js","sourceRoot":"","sources":["../../src/utils/getVersion.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAkB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC"}

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -7,6 +7,7 @@ import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
@@ -117,9 +118,9 @@ const renderButtonsGroup = (
   activeButton: string,
   onButtonClick: (item: string) => void,
 ) => {
-  const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
+  const allButtonVersion = getVersion(activeButton === 'all');
 
-  const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
+  const businessButtonVersion = getVersion(activeButton === 'business');
 
   const handleClick = (e: any, key: string, branches: Branch[]) => {
     if (e.currentTarget === e.target && key === 'business') {

package/mobile/src/components/TabsLayout/TabsLayout.tsx

@@ -11,21 +11,31 @@ import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
 
 const TAB_QUERY_PARAM_KEY = 'tab';
 
+type TabCountedProps = Tab & {
+  count?: number;
+};
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
     const router = useRouter();
 
+    const tabsCounted: TabCountedProps[] = showCounter
+      ? tabs.map((_) => ({
+          ..._,
+          count: block?.slots?.[_?.text ?? '']?.length ?? 0,
+        }))
+      : tabs;
+
     const { isReady } = router;
 
-    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
 
-    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+    const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
 
     useEffect(() => {
       const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-        ? tabs.findIndex(
+        ? tabsCounted.findIndex(
             (_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY],
           )
         : defaultSelectedTab;
@@ -33,7 +43,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
       setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
     }, [isReady, defaultSelectedTab]);
 
-    const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+    const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
 
     const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
       const searchParams = new URLSearchParams(router.query as Record<string, string>);
@@ -47,8 +57,8 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
 
     const handleChange = useCallback(
       (_: TabItemBase) => {
-        const index = tabs.indexOf(_ as Tab);
-        const tab = tabs[index];
+        const index = tabsCounted.indexOf(_ as Tab);
+        const tab = tabsCounted[index];
 
         setActiveTabIndex(index);
 
@@ -56,14 +66,14 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
           updateUrlSearchTabParam(_, index);
         }
       },
-      [tabs],
+      [tabsCounted],
     );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
         {renderTabsLayout({
-          items: tabs,
-          value: tabs[activeTabIndex],
+          items: tabsCounted,
+          value: tabsCounted[activeTabIndex],
           tabsType,
           onChange: handleChange,
         })}

package/mobile/src/components/TabsLayout/renderTabsLayout.tsx

@@ -1,6 +1,5 @@
 import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
 import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
-import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 
 interface RenderTabsProps {
@@ -10,23 +9,28 @@ interface RenderTabsProps {
   tabsType?: TabsType;
 }
 
-export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) => {
-  switch (tabsType) {
-    case 'default':
-      return <TabsControl {...props} />;
-    case 'underlined':
-      return (
-        <div className="flex">
-          <TabsControl className="m-auto" tabsType="underlined" {...props} />
-        </div>
-      );
-    case 'animated':
-      return (
-        <div className="border-b-8 border-primary-main">
-          <ScrollableTabsControl className="m-auto" {...props} tabsType="animated" />
-        </div>
-      );
-    default:
-      return null;
-  }
+const tabsStyle: Record<TabsType, { wrapper: string; component: string }> = {
+  default: {
+    wrapper: '',
+    component: '',
+  },
+  animated: {
+    wrapper: 'border-b-8 border-primary-main bg-white',
+    component: 'm-auto',
+  },
+  underlined: {
+    wrapper: 'flex',
+    component: 'm-auto',
+  },
 };
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) =>
+  tabsType ? (
+    <div className={tabsStyle[tabsType].wrapper}>
+      <ScrollableTabsControl
+        className={tabsStyle[tabsType].component}
+        tabsType={tabsType}
+        {...props}
+      />
+    </div>
+  ) : null;

package/mobile/src/ui-kit/Badge/Badge.tsx

@@ -18,18 +18,16 @@ const badgeTextColorStyleMap: Record<string, TextColor> = {
   secondary: 'text-secondary-text',
 };
 
-export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => {
-  return (
-    <div
-      className={style(
-        'w-6 h-6 rounded-full flex items-center justify-center',
-        badgeBgStyleMap[version],
-      )}
-      role="status"
-    >
-      <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
-        {count}
-      </Text>
-    </div>
-  );
-});
+export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => (
+  <div
+    className={style(
+      'w-6 h-6 rounded-full flex items-center justify-center',
+      badgeBgStyleMap[version],
+    )}
+    role="status"
+  >
+    <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
+      {count}
+    </Text>
+  </div>
+));

package/mobile/src/ui-kit/BaseFiltration/useHotFilters.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { type BlockDef } from '../../model/ContentPageDef';
-import { Badge } from '../Badge/Badge';
+import { getVersion } from '../../utils/getVersion';
 import { type TabItemBase } from '../TabsControl/TabItem';
 import { type TabsControlProps } from '../TabsControl/TabsControlProps';
 import { getBadgeCount } from './getBadgeCount';
@@ -40,12 +40,8 @@ export const useHotFilters = ({
     () =>
       hotFilters.map((_) => ({
         text: _.text,
-        appendRight: (
-          <Badge
-            version={_ === hotFilters[activeItemIndex] ? 'primary' : 'secondary'}
-            count={getBadgeCount(blocks, _.filter)}
-          />
-        ),
+        count: getBadgeCount(blocks, _.filter),
+        version: getVersion(_ === hotFilters[activeItemIndex]),
       })),
     [hotFilters, blocks, activeItemIndex],
   );

package/mobile/src/ui-kit/TabsControl/ScrollableTabsControl.tsx

@@ -4,18 +4,23 @@ import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton';
 import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll';
 import { renderTab } from './renderTab';
-import { type TabsControlProps } from './TabsControlProps';
+import { type TabsControlProps, type TabsType } from './TabsControlProps';
 
 const scrollButtonStyle = 'hidden sm:flex absolute z-40';
 
-const scrollStyleType = {
+const scrollStyle: Record<TabsType, { item: string; gap: number; buttonTop: string }> = {
+  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',
   },
@@ -33,28 +38,20 @@ export const ScrollableTabsControl = JSX<TabsControlProps>(
           containerRef={containerRef}
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-          itemClassName={scrollStyleType[tabsType].itemClassName}
-          gap={scrollStyleType[tabsType].gap}
+          itemClassName={scrollStyle[tabsType].item}
+          gap={scrollStyle[tabsType].gap}
         >
           {items.map(renderTab(value, onChange, tabsType))}
         </SwipeListContainer>
         {scroll.canScrollLeft ? (
           <ScrollLeftButton
-            className={style(
-              'left-6',
-              scrollButtonStyle,
-              scrollStyleType[tabsType].buttonTop as string,
-            )}
+            className={style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop)}
             onClick={scroll.scrollLeft}
           />
         ) : null}
         {scroll.canScrollRight ? (
           <ScrollRightButton
-            className={style(
-              'right-6',
-              scrollButtonStyle,
-              scrollStyleType[tabsType].buttonTop as string,
-            )}
+            className={style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop)}
             onClick={scroll.scrollRight}
           />
         ) : null}

package/mobile/src/ui-kit/TabsControl/TabItem.tsx

@@ -4,12 +4,11 @@ import { useLink } from '../../hooks/useLink';
 import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
-import { type VNode } from '../../model/VNode';
 import { TabItemInner } from './TabItemInner';
 import { type TabsControlProps, type TabsType } from './TabsControlProps';
 export interface TabItemBase extends LinkProps, TitleProps, DescriptionProps, IconProps {
   name?: string;
-  appendRight?: VNode;
+  count?: number;
 }
 
 export interface TabItemProps {

package/mobile/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
+import { Badge } from '../Badge/Badge';
 import { renderTabItemInner } from './renderTabItemInner';
 import { type TabItemProps } from './TabItem';
 import { type TabsType } from './TabsControlProps';
@@ -32,13 +34,14 @@ const activeTabBgStyleMap: Record<TabsType, string> = {
 
 interface TabItemInnerProps extends TabItemProps {
   tag?: string;
+  count?: number;
 }
 
 export const TabItemInner = JSX<TabItemInnerProps>(
   ({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
     const Tag: any = tag;
 
-    const { text, description, icon, appendRight, ...link } = item;
+    const { text, description, icon, count, ...link } = item;
 
     return (
       <Tag
@@ -68,7 +71,11 @@ export const TabItemInner = JSX<TabItemInnerProps>(
             isActive,
             type,
           })}
-          {appendRight ? <div className="ml-xs">{appendRight}</div> : null}
+          {Number.isInteger(count) ? (
+            <div className="ml-xs">
+              <Badge count={count} version={getVersion(isActive)} />
+            </div>
+          ) : null}
         </div>
       </Tag>
     );

package/mobile/src/utils/getVersion.ts

@@ -0,0 +1 @@
+export const getVersion = (isPrimary: boolean) => (isPrimary ? 'primary' : 'secondary');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.336",
+  "version": "0.14.337",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -7,6 +7,7 @@ import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
@@ -117,9 +118,9 @@ const renderButtonsGroup = (
   activeButton: string,
   onButtonClick: (item: string) => void,
 ) => {
-  const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
+  const allButtonVersion = getVersion(activeButton === 'all');
 
-  const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
+  const businessButtonVersion = getVersion(activeButton === 'business');
 
   const handleClick = (e: any, key: string, branches: Branch[]) => {
     if (e.currentTarget === e.target && key === 'business') {

package/src/components/TabsLayout/TabsLayout.fixture.mobile.tsx

@@ -9,8 +9,40 @@ const options: BlockRendererOptions = {
 };
 
 const TABS: Tab[] = [
-  { text: 'Первый таб', description: 'Описание первого таба', type: 'group' },
-  { text: 'Второй таб', description: 'Описание второго таба', type: 'group' },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Первый таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Второй таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Третий таб и с очень длинным текстом',
+    selected: false,
+  },
+];
+const TabsWithIcon: Tab[] = [
+  {
+    type: 'group',
+    description: 'Описание первого таба',
+    text: 'Первый таб',
+    selected: false,
+    icon: { icon: 'CalendarIcon' },
+  },
+  {
+    type: 'group',
+    description: 'Описание второго таба',
+    text: 'Второй таб',
+    selected: false,
+    icon: { icon: 'BankIcon' },
+  },
 ];
 
 const TEXT_BLOCK_DESCRIPTION = {
@@ -22,52 +54,66 @@ const TEXT_BLOCK_DESCRIPTION = {
   style: ['col-span-12'],
 };
 
+const slots = {
+  'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+  'Второй таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+  'Третий таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="default"
         options={options}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  animated: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
         tabsType="animated"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        options={options}
+        block={{ slots }}
       />
     </div>
   ),
-  wide: (
+  underlined: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="underlined"
         options={options}
-        tabsType="default"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  animatedIcons: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TabsWithIcon}
+        tabsType="animated"
+        options={options}
+        block={{ slots }}
       />
     </div>
   ),
-  scrollable: (
+  defaultCounter: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="default"
         options={options}
-        tabsType="underlined"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+        showCounter={true}
       />
     </div>
   ),