cabloy 5.1.46 → 5.1.47

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 5.1.47
+
+### Bug Fixes
+
+- Fix web header navigation rendering.
+- Prevent web header dropdown menus from being clipped.
+
+### Improvements
+
+- Update internal project dependencies and maintenance changes.
+
 ## 5.1.46
 
 ### Improvements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabloy",
-  "version": "5.1.46",
+  "version": "5.1.47",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A Node.js fullstack framework",
   "keywords": [

package/zova/src/suite/a-home/modules/home-base/src/component/itemLink/controller.tsx

@@ -9,6 +9,7 @@ export interface ControllerItemLinkProps {
   icon?: keyof IIconRecord;
   href?: string;
   to?: string | object;
+  target?: string;
 }
 
 @Controller()
@@ -16,6 +17,7 @@ export class ControllerItemLink extends BeanControllerBase {
   static $propsDefault = {
     description: '',
     icon: '',
+    target: '_blank',
   };
 
   _renderLink() {
@@ -28,7 +30,7 @@ export class ControllerItemLink extends BeanControllerBase {
     ];
     if (this.$props.href) {
       return (
-        <a href={this.$props.href} target="_blank">
+        <a href={this.$props.href} target={this.$props.target}>
           {domContent}
         </a>
       );

package/zova/src/suite/a-home/modules/home-layoutweb/src/component/layoutWeb/render.header.tsx

@@ -24,7 +24,7 @@ export class RenderHeader extends BeanRenderBase {
             </button>
           </div>
           <div class="text-xl px-4">{this.sys.env.APP_TITLE}</div>
-          <div class="mx-2 flex-2 px-2">{this.$$r.$$renderTabs.renderTabs()}</div>
+          <div class="mx-2 min-w-0 flex-1 px-2">{this.$$r.$$renderTabs.renderTabs()}</div>
           <div class="hidden flex-none lg:block">
             <ul class="menu menu-horizontal">
               {this.$$r.$$renderLocale.render()}

package/zova/src/suite/a-home/modules/home-layoutweb/src/component/layoutWeb/render.tabs.tsx

@@ -1,11 +1,15 @@
 import type { VNode } from 'vue';
-import type { RouteTab } from 'zova-module-a-routertabs';
 
+import { RouterLink } from '@cabloy/vue-router';
 import { BeanRenderBase, ClientOnly } from 'zova';
 import { Render } from 'zova-module-a-bean';
-import { $iconName, ZIcon } from 'zova-module-a-icon';
+import { ZIcon } from 'zova-module-a-icon';
 import { ZRouterViewTabs } from 'zova-module-a-routertabs';
-import { closeNearestDetails, ZItemLink } from 'zova-module-home-base';
+import { closeNearestDetails } from 'zova-module-home-base';
+
+import type { TypeMenuGroup, TypeMenuItem } from '../../model/menu.js';
+
+type TypeMenuLeaf = Exclude<TypeMenuItem, TypeMenuGroup>;
 
 @Render()
 export class RenderTabs extends BeanRenderBase {
@@ -13,84 +17,171 @@ export class RenderTabs extends BeanRenderBase {
     const $$modelTabs = this.$$modelTabs;
     if (!$$modelTabs) return;
 
-    const domTabs = $$modelTabs.tabs.map(tab => this._renderTab(tab));
+    const domTabs = $$modelTabs.tabs.map(tab => {
+      return this._renderMenuItem(tab.info as TypeMenuItem, true, tab.tabKey);
+    });
     const domWrapper = (
-      <div role="tablist" class="tabs tabs-lifted">
-        {domTabs}
-      </div>
+      <ul class="menu menu-horizontal w-max min-w-full flex-nowrap gap-1 px-0">{domTabs}</ul>
     );
     if (!$$modelTabs.cache) return domWrapper;
     return <ClientOnly>{domWrapper}</ClientOnly>;
   }
 
-  private _renderTab(tab: RouteTab): VNode {
-    const $$modelTabs = this.$$modelTabs;
-    const { tabKey, info } = tab;
-    const titleLocale = info?.title || '';
-    const tabIcon = this.getTabIcon(tab);
-    if (info.folder) {
+  private _renderMenuItem(item: TypeMenuItem, topLevel: boolean = false, tabKey?: string): VNode {
+    if (item.folder) {
+      return this._renderMenuFolder(item, topLevel);
+    }
+    if (item.separator) {
+      return this._renderMenuSeparator(item, topLevel);
+    }
+    return this._renderMenuLeaf(item, topLevel, tabKey);
+  }
+
+  private _renderMenuFolder(item: TypeMenuGroup, topLevel: boolean): VNode {
+    const isActive = this._hasActiveDescendant(item);
+    const className = this._getMenuItemClassName(isActive);
+    const title = item.title ?? '';
+    const childrenClass = topLevel ? 'w-56' : 'w-52';
+    return (
+      <li key={this._getMenuItemKey(item)}>
+        <details>
+          <summary class={className}>
+            {this._renderItemIcon(item.icon as any)}
+            <span>{title}</span>
+          </summary>
+          <ul class={`bg-base-100 rounded-t-none p-2 shadow ${childrenClass}`}>
+            {item.children.map(child => this._renderMenuItem(child))}
+          </ul>
+        </details>
+      </li>
+    );
+  }
+
+  private _renderMenuLeaf(item: TypeMenuLeaf, topLevel: boolean, tabKey?: string): VNode {
+    const title = item.title ?? '';
+    const key = this._getMenuItemKey(item);
+    const className = this._getMenuItemClassName(this._isMenuLeafActive(item, tabKey));
+    const domContent = this._renderMenuItemContent(item.icon as any, title);
+    const onClick = topLevel ? undefined : closeNearestDetails;
+
+    if (item.external) {
       return (
-        <li>
-          <details>
-            <summary>
-              {!!tabIcon && <ZIcon name={tabIcon as any} width="24"></ZIcon>}
-              {titleLocale}
-            </summary>
-            <ClientOnly>
-              <ul class="bg-base-100 rounded-t-none p-2 w-48">
-                {info.children
-                  ?.filter(item => !item.folder)
-                  .map(item => (
-                    <li key={item.link} onClick={closeNearestDetails}>
-                      <ZItemLink
-                        title={item.title!}
-                        icon={(item.icon as any) ?? $iconName('::none')}
-                        href={item.link && item.external ? item.link : undefined}
-                        to={item.link && !item.external ? item.link : undefined}
-                      ></ZItemLink>
-                    </li>
-                  ))}
-              </ul>
-            </ClientOnly>
-          </details>
+        <li key={key} onClick={onClick}>
+          <a class={className} href={item.link} target={item.target ?? '_blank'}>
+            {domContent}
+          </a>
         </li>
       );
     }
-    // not external
-    if (!info.external) {
-      const className = tabKey === $$modelTabs.tabKeyCurrent ? 'text-primary' : '';
 
+    if (topLevel && tabKey) {
       return (
-        <a
-          key={tabKey}
-          role="tab"
-          class={`tab ${className}`}
-          onClick={() => {
-            $$modelTabs.activeTab(tabKey);
-          }}
-        >
-          {!!tabIcon && <ZIcon name={tabIcon as any} width="24"></ZIcon>}
-          {titleLocale}
-        </a>
+        <li key={key}>
+          <a
+            class={className}
+            onClick={() => {
+              void this.$$modelTabs.activeTab(tabKey);
+            }}
+          >
+            {domContent}
+          </a>
+        </li>
       );
     }
-    // external
+
+    return (
+      <li key={key} onClick={onClick}>
+        <RouterLink class={className} to={this._buildMenuTo(item)}>
+          {domContent}
+        </RouterLink>
+      </li>
+    );
+  }
+
+  private _renderMenuSeparator(item: TypeMenuLeaf, topLevel: boolean): VNode {
+    const key = `${this._getMenuItemKey(item)}:separator`;
+    if (topLevel) {
+      return (
+        <li key={key} class="mx-1 self-center opacity-30">
+          <span class="pointer-events-none px-0">|</span>
+        </li>
+      );
+    }
+    return <li key={key} class="menu-disabled my-1 h-px bg-base-300"></li>;
+  }
+
+  private _buildMenuTo(item: TypeMenuLeaf) {
+    let to: any;
+    if (!item.external) {
+      to = {};
+      if (this.$router.isRouterName(item.link)) {
+        to.name = item.link;
+      } else {
+        to.path = item.link;
+      }
+      if (item.meta?.params && to.name) {
+        to.params = item.meta.params;
+      }
+      if (item.meta?.query) {
+        to.query = item.meta.query;
+      }
+    }
+    return to;
+  }
+
+  private _hasActiveDescendant(item: TypeMenuGroup): boolean {
+    return item.children.some(child => {
+      if (child.folder) return this._hasActiveDescendant(child);
+      return this._isMenuLeafCurrent(child);
+    });
+  }
+
+  private _isMenuLeafActive(item: TypeMenuLeaf, tabKey?: string): boolean {
+    if (item.external || !item.link) return false;
+    if (tabKey && tabKey === this.$$modelTabs.tabKeyCurrent) return true;
+    return this._isMenuLeafCurrent(item);
+  }
+
+  private _isMenuLeafCurrent(item: TypeMenuLeaf): boolean {
+    if (item.external || !item.link) return false;
+    const currentRoute = this.$currentRoute;
+    if (!currentRoute) return false;
+    const fullPath = this.$router.isRouterName(item.link)
+      ? this.$router.resolveName(
+          item.link as never,
+          {
+            params: item.meta?.params,
+            query: item.meta?.query,
+          } as never,
+        )
+      : this.$router.resolvePath(item.link as never, item.meta?.query as never);
+    return currentRoute.fullPath === fullPath;
+  }
+
+  private _getMenuItemKey(item: TypeMenuItem): string {
+    if (item.folder) return item.name || item.title || '';
+    return item.name || item.link || item.title || '';
+  }
+
+  private _getMenuItemClassName(isActive: boolean): string {
+    return isActive ? 'active text-primary' : '';
+  }
+
+  private _renderMenuItemContent(icon: string | undefined, title: string): VNode {
     return (
-      <ZItemLink
-        key={tabKey}
-        title={titleLocale}
-        icon={info.icon as any}
-        href={info.link}
-      ></ZItemLink>
+      <>
+        {this._renderItemIcon(icon)}
+        <span>{title}</span>
+      </>
     );
   }
 
-  public getTabIcon(tab: RouteTab) {
-    const { info } = tab;
-    return info?.icon ? info?.icon : '';
+  private _renderItemIcon(icon?: string): VNode | undefined {
+    if (!icon) return;
+    return <ZIcon name={icon as any} width="20" height="20"></ZIcon>;
   }
 
-  _renderRouterViewTabs() {
+  public _renderRouterViewTabs(): VNode {
     return <ZRouterViewTabs></ZRouterViewTabs>;
   }
 }