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

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,12 +1,12 @@
-import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
   ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
   INACTIVE_TEXT_CLASSES,
   TEXT_CLASSES,
   WHITE_ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
 } from './tabItemClasses';
+import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -15,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,7 +27,7 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, isScrollable)}
+        className={getGroupTabClassName('div', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
@@ -36,21 +36,22 @@ export const renderGroupTab =
           className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
             'text',
             active,
-            isScrollable,
+            tabsMode,
           )}`}
         >
-          {renderTitle(tab.title, active, isScrollable)}
+          {renderTitle(tab.title, active, tabsMode)}
           {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
   const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName = isScrollable
-    ? `${TEXT_CLASSES} ${activeClassName}`
-    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+  const titleClassName =
+    tabsMode === 'scrollable'
+      ? `${TEXT_CLASSES} ${activeClassName}`
+      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
 
   return title ? <h3 className={titleClassName}>{title}</h3> : null;
 };

package/src/components/Tabs/renderTab.tsx

@@ -2,18 +2,18 @@ import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { LinkTab } from './LinkTab';
 import { renderGroupTab } from './renderGroupTab';
-import type { TabData } from './TabsContent';
+import type { TabData, TabsMode } from './TabsContent';
 
 export interface RenderTabProps {
   page?: ContentPageDef;
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
-  isScrollable?: boolean;
+  tabsMode?: TabsMode;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, showCounter, ...rest }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -23,17 +23,9 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
       case 'link': {
-        return (
-          <LinkTab
-            key={String(i)}
-            tab={tab}
-            currentTab={currentTab}
-            isScrollable={isScrollable}
-            onClick={onClick}
-          />
-        );
+        return <LinkTab key={String(i)} tab={tab} {...rest} />;
       }
       default:
         assertUnreachable(type);

package/src/components/Tabs/tabItemClasses.ts

@@ -1,3 +1,5 @@
+import type { TabsMode } from './TabsContent';
+
 export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
@@ -17,7 +19,11 @@ const GROUP_TAB_CLASSES = {
       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`,
     },
@@ -27,7 +33,11 @@ const GROUP_TAB_CLASSES = {
       active: `h-full border-0 border-b-2`,
       default: ``,
     },
-    default: {
+    centered: {
+      active: '',
+      default: '',
+    },
+    wideScreen: {
       active: '',
       default: '',
     },
@@ -39,7 +49,11 @@ const LINK_TAB_CLASSES = {
       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}`,
     },
@@ -49,23 +63,27 @@ const LINK_TAB_CLASSES = {
       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}`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return GROUP_TAB_CLASSES[type][styleType][styleActive];
+  return GROUP_TAB_CLASSES[type][mode][styleActive];
 };
 
-export const getLinkTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][styleType][styleActive];
+  return LINK_TAB_CLASSES[type][mode][styleActive];
 };

package/src/hooks/useLink.ts

@@ -23,7 +23,7 @@ export function useLink(params: UseLinkParams = {}) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...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),
   });

package/src/ui-kit/Sitemap/Sitemap.tsx

@@ -3,6 +3,7 @@ import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { TopMenuItemProps } from '../../services/sitemap/SitemapData';
+import { appendSlash } from '../../utils/appendSlash';
 import { style } from '../../utils/style';
 
 export interface SitemapProps {
@@ -34,7 +35,7 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
         {text || `Раздел ${index}`}
       </a>
       {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {..._} basePath={href} index={i} />
+        <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
       ))}
     </div>
   );

package/src/utils/appendSlash.ts

@@ -0,0 +1,2 @@
+export const appendSlash = (url: string | undefined) =>
+  url && !url.endsWith('/') ? `${url}/` : url;