cabloy 5.1.247 → 5.1.249

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/style.ts

@@ -4,8 +4,136 @@ import { Style } from 'zova-module-a-bean';
 @Style()
 export class StyleLayoutAdmin extends BeanStyleBase {
   cTab: string;
+  cHeaderActions: string;
+  cHeader: string;
+  cTabItems: string;
+  cTabItemsMenu: string;
 
   protected async __init__() {
+    this.cHeader = this.$style({
+      $nest: {
+        '& .header-title': { minWidth: 0 },
+        '&:has(.tab-items) .header-title': {
+          flex: '0 1 auto',
+          maxWidth: '10rem',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        },
+        '&:has(.tab-items) .header-navigation': { marginInline: 0, paddingInline: 0 },
+        '@media (width < 600px)': {
+          $nest: { '&:has(.tab-items) .header-title': { display: 'none' } },
+        },
+      },
+    });
+    this.cTabItems = this.$style({
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      height: '48px',
+      $nest: {
+        '& .tab-items-viewport': { position: 'relative', minWidth: 0, flex: '1 1 0' },
+        '& .tab-items-scroll': { overflowX: 'auto', scrollbarWidth: 'none' },
+        '& .tab-items-scroll::-webkit-scrollbar': { display: 'none' },
+        '& .tab-items-content': {
+          display: 'flex',
+          flexWrap: 'nowrap',
+          width: 'max-content',
+          minWidth: '100%',
+        },
+        '& .tab': { flexShrink: 0, height: '48px', gap: '4px' },
+        '& .tab > svg': { flexShrink: 0 },
+        '& .tab > div': { minWidth: 0 },
+        '& .tab .tab-close': { top: '2px', right: '2px' },
+        '& .tab-items-more': { flex: '0 0 40px', width: '40px', height: '40px', fontSize: '20px' },
+        '&.is-compact .tab-items-content': { width: '100%' },
+        '&.is-compact .tab': { minWidth: 0, maxWidth: '100%', paddingInline: '12px' },
+        '&.is-compact .tab-close': { display: 'none' },
+        '& .tab-items-viewport::before, & .tab-items-viewport::after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          width: '16px',
+          zIndex: 1,
+          pointerEvents: 'none',
+          opacity: 0,
+        },
+        '& .tab-items-viewport::before': {
+          left: 0,
+          background: 'linear-gradient(to right, var(--color-base-300), transparent)',
+        },
+        '& .tab-items-viewport::after': {
+          right: 0,
+          background: 'linear-gradient(to left, var(--color-base-300), transparent)',
+        },
+        '& .tab-items-viewport.has-start::before, & .tab-items-viewport.has-end::after': {
+          opacity: 1,
+        },
+      },
+    });
+    this.cTabItemsMenu = this.$style({
+      display: 'none',
+      position: 'fixed',
+      inset: 'auto',
+      margin: 0,
+      width: '22rem',
+      maxWidth: 'calc(100vw - 16px)',
+      maxHeight: 'calc(100dvh - 16px)',
+      overflowY: 'auto',
+      $nest: {
+        '&:popover-open': { display: 'flex', flexDirection: 'column', gap: '4px' },
+        '& .tab-items-select': {
+          flex: '1 1 0',
+          minWidth: 0,
+          height: 'auto',
+          minHeight: '40px',
+          justifyContent: 'flex-start',
+          textTransform: 'none',
+          paddingBlock: '8px',
+        },
+        '& .tab-items-select svg': { flexShrink: 0 },
+        '& .tab-items-label': {
+          flex: '1 1 0',
+          minWidth: 0,
+          whiteSpace: 'normal',
+          overflowWrap: 'anywhere',
+          textAlign: 'start',
+        },
+      },
+    });
+    this.cHeaderActions = this.$style({
+      $nest: {
+        '& .header-actions-panel > ul > li > details > ul': {
+          maxHeight: 'calc(100dvh - 5rem)',
+          overflowY: 'auto',
+        },
+        '@media (width < 64rem)': {
+          $nest: {
+            '& .header-actions-panel': {
+              width: '16rem',
+              maxWidth: 'calc(100vw - 1rem)',
+              maxHeight: 'calc(100dvh - 5rem)',
+              overflowY: 'auto',
+            },
+            '& .header-actions-panel > ul > li > details > ul': {
+              width: 'auto',
+              maxWidth: '100%',
+              whiteSpace: 'normal',
+              overflowWrap: 'anywhere',
+            },
+          },
+        },
+        '@media (min-width: 64rem)': {
+          $nest: {
+            '& .header-actions-panel > ul > li > details > ul': {
+              right: 0,
+              maxWidth: 'calc(100vw - 1rem)',
+            },
+          },
+        },
+      },
+    });
     this.cTab = this.$style({
       fontSize: '1.0rem',
       $nest: {

package/zova/src/suite/a-home/modules/home-layoutadmin/src/config/locale/en-us.ts

@@ -1,5 +1,11 @@
 export default {
   'Home': 'Home',
+  'MoreActions': 'More actions',
+  'AllTabs': 'All tabs',
+  'CloseTab': 'Close tab: %s',
+  'Language': 'Language',
+  'ColorMode': 'Color mode',
+  'Theme': 'Theme',
   'Logout': 'Logout',
   'Account Settings': 'Account Settings',
   'LanguageEnglish': 'English',

package/zova/src/suite/a-home/modules/home-layoutadmin/src/config/locale/zh-cn.ts

@@ -1,5 +1,11 @@
 export default {
   'Home': '首页',
+  'MoreActions': '更多操作',
+  'AllTabs': '全部页签',
+  'CloseTab': '关闭页签：%s',
+  'Language': '语言',
+  'ColorMode': '明暗模式',
+  'Theme': '主题',
   'Logout': '退出登录',
   'Account Settings': '账户设置',
   'LanguageEnglish': '英语',

package/zova/src/suite/a-home/modules/home-layoutweb/src/.metadata/component/layoutWeb.ts

@@ -7,6 +7,7 @@ import type { ControllerLayoutWebProps } from '../../component/layoutWeb/control
 
 import { ControllerLayoutWeb } from '../../component/layoutWeb/controller.tsx';
 import { RenderLayoutWeb } from '../../component/layoutWeb/render.tsx';
+import { StyleLayoutWeb } from '../../component/layoutWeb/style.ts';
 export type ZLayoutWebProps = {
   controllerRef?: (ref: ControllerLayoutWeb) => void;
 } & ControllerLayoutWebProps;
@@ -21,16 +22,17 @@ declare module 'zova-module-home-layoutweb' {
   }
 }
 declare module 'zova-module-home-layoutweb' {
-  export interface RenderLayoutWeb extends ControllerLayoutWeb {}
-  export interface RenderContent extends ControllerLayoutWeb {}
-  export interface RenderHeader extends ControllerLayoutWeb {}
-  export interface RenderLocale extends ControllerLayoutWeb {}
-  export interface RenderTabs extends ControllerLayoutWeb {}
-  export interface RenderTheme extends ControllerLayoutWeb {}
-  export interface RenderUser extends ControllerLayoutWeb {}
+  export interface StyleLayoutWeb extends ControllerLayoutWeb {}
+  export interface RenderLayoutWeb extends StyleLayoutWeb {}
+  export interface RenderContent extends StyleLayoutWeb {}
+  export interface RenderHeader extends StyleLayoutWeb {}
+  export interface RenderLocale extends StyleLayoutWeb {}
+  export interface RenderTabs extends StyleLayoutWeb {}
+  export interface RenderTheme extends StyleLayoutWeb {}
+  export interface RenderUser extends StyleLayoutWeb {}
 }
 export const ZLayoutWeb = defineComponent((_props: ZLayoutWebProps) => {
-  useController(ControllerLayoutWeb, RenderLayoutWeb, undefined);
+  useController(ControllerLayoutWeb, RenderLayoutWeb, StyleLayoutWeb);
   return () => {};
 }, prepareComponentOptions());
 declare module 'zova-module-a-bean' {

package/zova/src/suite/a-home/modules/home-layoutweb/src/.metadata/index.ts

@@ -165,6 +165,31 @@ declare module 'zova' {
   }
 }
 /** render: end */
+/** style: begin */
+export * from '../component/layoutWeb/style.ts';
+
+import 'zova';
+declare module 'zova' {
+
+
+}
+declare module 'zova-module-home-layoutweb' {
+
+        export interface StyleLayoutWeb {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+}
+/** style: end */
+/** style: begin */
+import type { StyleLayoutWeb } from '../component/layoutWeb/style.ts';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordLocal {
+    'home-layoutweb.style.layoutWeb': StyleLayoutWeb;
+  }
+}
+/** style: end */
 /** config: begin */
 export * from '../config/config.ts';
 import { config } from '../config/config.ts';

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

@@ -39,14 +39,28 @@ export class ControllerLayoutWeb extends BeanControllerBase {
   private viewportWidth: number = 0;
   private _windowResizeHandler?: () => void;
 
+  headerActionsOpen = false;
+  headerActionsId = 'home-layoutweb-header-actions';
+  private _headerActionsElement?: HTMLDivElement;
+  private _headerOutsideHandler: (event: PointerEvent) => void;
+  private _headerClickHandler: (event: MouseEvent) => void;
+
   protected async __init__() {
+    this._headerClickHandler = event => this.onHeaderActionsClick(event);
+    this._headerOutsideHandler = event => {
+      if (event.target instanceof Node && !this._headerActionsElement?.contains(event.target)) {
+        this.closeHeaderActions();
+      }
+    };
     // viewport
     if (process.env.CLIENT) {
       this._windowResizeHandler = () => {
         this.viewportWidth = document.documentElement.clientWidth;
+        this.closeHeaderActions();
       };
       this._windowResizeHandler();
       window.addEventListener('resize', this._windowResizeHandler);
+      document.addEventListener('pointerdown', this._headerOutsideHandler);
     }
     // belowBreakpoint
     this.belowBreakpoint = this.$computed(() => {
@@ -78,8 +92,77 @@ export class ControllerLayoutWeb extends BeanControllerBase {
   }
 
   protected __dispose__() {
+    this.setHeaderActionsElement();
     if (this._windowResizeHandler) {
       window.removeEventListener('resize', this._windowResizeHandler);
+      document.removeEventListener('pointerdown', this._headerOutsideHandler);
+    }
+  }
+
+  setHeaderActionsElement(element?: HTMLDivElement) {
+    if (element === this._headerActionsElement) return;
+    this._headerActionsElement?.removeEventListener('click', this._headerClickHandler, true);
+    this._headerActionsElement = element;
+    element?.addEventListener('click', this._headerClickHandler, true);
+  }
+
+  toggleHeaderActions() {
+    if (this.headerActionsOpen) {
+      this.closeHeaderActions();
+    } else {
+      this.headerActionsOpen = true;
+    }
+  }
+
+  closeHeaderActions(restoreFocus = false) {
+    this.headerActionsOpen = false;
+    this._headerActionsElement
+      ?.querySelectorAll<HTMLDetailsElement>('details[open]')
+      .forEach(details => {
+        details.open = false;
+      });
+    if (restoreFocus) {
+      this._headerActionsElement?.querySelector<HTMLButtonElement>('button')?.focus();
+    }
+  }
+
+  onHeaderActionsFocusout(event: FocusEvent) {
+    if (
+      this.headerActionsOpen &&
+      (!(event.relatedTarget instanceof Node) ||
+        !this._headerActionsElement?.contains(event.relatedTarget))
+    ) {
+      this.closeHeaderActions();
+    }
+  }
+
+  onHeaderActionsClick(event: MouseEvent) {
+    if (!this.headerActionsOpen || !(event.target instanceof Element)) return;
+    const action = event.target.closest('a, button');
+    if (action?.closest('details') && !action.matches(':disabled, [aria-disabled="true"]')) {
+      this.closeHeaderActions(true);
+    }
+  }
+
+  onHeaderActionsKeydown(event: KeyboardEvent) {
+    if (
+      event.key !== 'Escape' ||
+      event.defaultPrevented ||
+      !(event.target instanceof Element) ||
+      event.target.closest('dialog[open], [role="dialog"]')
+    ) {
+      return;
+    }
+    const details = event.target.closest<HTMLDetailsElement>('details[open]');
+    if (details) {
+      event.preventDefault();
+      event.stopPropagation();
+      details.open = false;
+      details.querySelector<HTMLElement>('summary')?.focus();
+    } else if (this.headerActionsOpen) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.closeHeaderActions(true);
     }
   }
 

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

@@ -1,3 +1,4 @@
+import { classes } from 'typestyle';
 import { BeanRenderBase, Use } from 'zova';
 import { Render } from 'zova-module-a-bean';
 import { ZIcon } from 'zova-module-a-icon';
@@ -12,7 +13,7 @@ export class RenderHeader extends BeanRenderBase {
   public render() {
     return (
       <>
-        <div class="navbar bg-base-300 w-full">
+        <div class="navbar bg-base-300 w-full flex-wrap lg:flex-nowrap">
           <div class="flex-none">
             <button
               class="btn btn-square btn-ghost"
@@ -24,13 +25,41 @@ export class RenderHeader extends BeanRenderBase {
             </button>
           </div>
           <div class="text-xl px-4">{this.sys.env.APP_TITLE}</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()}
-              {this.$$r.$$renderTheme.renderThemeDark()}
-              {this.$$r.$$renderUser.render()}
-            </ul>
+          <div class="order-last mx-2 min-w-0 basis-full px-2 lg:order-none lg:basis-auto lg:flex-1">
+            {this.$$r.$$renderTabs.renderTabs()}
+          </div>
+          <div
+            ref={ref => this.setHeaderActionsElement?.((ref as HTMLDivElement | null) ?? undefined)}
+            class={classes('relative ml-auto flex-none lg:ml-0', this.cHeaderActions)}
+            data-testid="header-actions"
+            onFocusout={event => this.onHeaderActionsFocusout?.(event)}
+            onKeydown={event => this.onHeaderActionsKeydown(event)}
+          >
+            <button
+              type="button"
+              class="btn btn-square btn-ghost lg:hidden"
+              aria-label={this.scope.locale.MoreActions()}
+              title={this.scope.locale.MoreActions()}
+              aria-expanded={this.headerActionsOpen}
+              aria-controls={this.headerActionsId}
+              onClick={() => this.toggleHeaderActions()}
+            >
+              <ZIcon name="::more-horiz" width={24} aria-hidden="true" />
+            </button>
+            <div
+              id={this.headerActionsId}
+              class={classes(
+                'header-actions-panel absolute right-0 top-full z-30 rounded-box bg-base-100 shadow-lg lg:static lg:bg-transparent lg:shadow-none',
+                this.headerActionsOpen ? 'block' : 'hidden',
+                'lg:block',
+              )}
+            >
+              <ul class="menu w-full lg:w-auto lg:menu-horizontal">
+                {this.$$r.$$renderLocale.render()}
+                {this.$$r.$$renderTheme.renderThemeDark()}
+                {this.$$r.$$renderUser.render()}
+              </ul>
+            </div>
           </div>
         </div>
       </>

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

@@ -1,6 +1,7 @@
 import { BeanRenderBase, ClientOnly } from 'zova';
 import { Render } from 'zova-module-a-bean';
 import { $icon } from 'zova-module-a-icon';
+import { ZButton } from 'zova-module-basic-button';
 import { closeNearestDetails } from 'zova-module-home-base';
 
 @Render()
@@ -12,29 +13,45 @@ export class RenderLocale extends BeanRenderBase {
     return (
       <li>
         <details>
-          <summary>{$icon('::language', 24)}</summary>
+          <summary aria-label={this.scope.locale.Language()} title={this.scope.locale.Language()}>
+            {$icon('::language', 24)}
+            <span class="lg:hidden">{this.scope.locale.Language()}</span>
+          </summary>
           <ClientOnly>
             <ul class="bg-base-100 rounded-t-none p-2 w-48">
               {Object.keys(locales).map(key => {
                 const title = this.$scopeBase.locale[locales[key]]();
                 return (
                   <li key={key} class={this.app.meta.locale.current === key ? 'disabled' : ''}>
-                    <a
-                      onClick={event => {
+                    <ZButton
+                      disabled={this.app.meta.locale.current === key}
+                      onPerform={async event => {
+                        closeNearestDetails({ currentTarget: event.target });
                         if (metaLocale) {
-                          this.app.$gotoPage(currentRoute.matched[0].path, {
-                            params: { ...currentRoute.params, locale: key },
+                          const options = {
+                            params: {
+                              ...currentRoute.params,
+                              locale: key === this.sys.config.locale.default ? '' : key,
+                            },
                             query: currentRoute.query,
-                          });
+                          };
+                          const name = this.$router.getRealRouteName(currentRoute.name);
+                          const alias =
+                            name && this.$router.getAliasPath(name as never, options as never);
+                          // A root alias with only a query must not resolve against the current path.
+                          const target = alias?.startsWith('?') ? `/${alias}` : alias;
+                          await this.app.$gotoPage(
+                            target || currentRoute.matched[0].path,
+                            target ? undefined : options,
+                          );
                         } else {
                           this.app.meta.locale.current = key as any;
                         }
-                        closeNearestDetails(event);
                       }}
                     >
                       {$icon(this.app.meta.locale.current === key ? '::done' : '::none', 24)}
                       {title}
-                    </a>
+                    </ZButton>
                   </li>
                 );
               })}

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

@@ -20,7 +20,9 @@ export class RenderTabs extends BeanRenderBase {
       return this._renderMenuItem(tab.info as TypeMenuItem, true, tab.tabKey);
     });
     const domWrapper = (
-      <ul class="menu menu-horizontal w-max min-w-full flex-nowrap gap-1 px-0">{domTabs}</ul>
+      <ul class="menu menu-horizontal w-full flex-wrap gap-1 px-0 lg:w-max lg:min-w-full lg:flex-nowrap">
+        {domTabs}
+      </ul>
     );
     if (!$$modelTabs.cache) return domWrapper;
     return <ClientOnly>{domWrapper}</ClientOnly>;

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

@@ -3,6 +3,7 @@ import type { IThemeRecord } from 'zova-module-a-style';
 import { BeanRenderBase, ClientOnly } from 'zova';
 import { Render } from 'zova-module-a-bean';
 import { $icon } from 'zova-module-a-icon';
+import { ZButton } from 'zova-module-basic-button';
 import { closeNearestDetails } from 'zova-module-home-base';
 
 @Render()
@@ -25,7 +26,10 @@ export class RenderTheme extends BeanRenderBase {
     return (
       <li>
         <details>
-          <summary>{$icon('::dark-theme', 24)}</summary>
+          <summary aria-label={this.scope.locale.ColorMode()} title={this.scope.locale.ColorMode()}>
+            {$icon('::dark-theme', 24)}
+            <span class="lg:hidden">{this.scope.locale.ColorMode()}</span>
+          </summary>
           <ClientOnly>
             <ul class="bg-base-100 rounded-t-none p-2 w-48">
               {themes.map(item => {
@@ -34,15 +38,16 @@ export class RenderTheme extends BeanRenderBase {
                     key={item.mode.toString()}
                     class={this.$theme.darkMode === item.mode ? 'disabled' : ''}
                   >
-                    <a
-                      onClick={event => {
+                    <ZButton
+                      disabled={this.$theme.darkMode === item.mode}
+                      onPerform={event => {
                         this.$theme.darkMode = item.mode as any;
-                        closeNearestDetails(event);
+                        closeNearestDetails({ currentTarget: event.target });
                       }}
                     >
                       {$icon(this.$theme.darkMode === item.mode ? '::done' : '::none', 24)}
                       {item.title}
-                    </a>
+                    </ZButton>
                   </li>
                 );
               })}

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

@@ -8,30 +8,62 @@ import { closeNearestDetails } from 'zova-module-home-base';
 export class RenderUser extends BeanRenderBase {
   public render() {
     return (
-      <ClientOnly>
-        <li>
-          <details>
-            <summary>
-              <img
-                class="h-6 w-6 rounded-full object-cover"
-                alt="avatar"
-                src={
-                  resolveImagePreviewUrl(
-                    this.$passport.user?.avatar,
-                    this.sys.config.api.baseURL,
-                  ) || this.$scopeBase.config.avatar.empty
-                }
+      <li class="min-w-0">
+        <details>
+          <summary aria-label={this.scope.locale.Account()} title={this.scope.locale.Account()}>
+            <ClientOnly
+              v-slots={{
+                placeholder: () => (
+                  <img
+                    class="h-6 w-6 shrink-0 rounded-full object-cover"
+                    alt=""
+                    src={this.$scopeBase.config.avatar.empty}
+                  />
+                ),
+                default: () => (
+                  <img
+                    class="h-6 w-6 shrink-0 rounded-full object-cover"
+                    alt=""
+                    src={
+                      resolveImagePreviewUrl(
+                        this.$passport.user?.avatar,
+                        this.sys.config.api.baseURL,
+                      ) || this.$scopeBase.config.avatar.empty
+                    }
+                  />
+                ),
+              }}
+            />
+            <span class="h-lh min-w-0 flex-1 truncate lg:w-32 lg:flex-none">
+              <ClientOnly
+                v-slots={{
+                  placeholder: () => '',
+                  default: () =>
+                    this.$passport.isAuthenticated
+                      ? this.$passport.displayName
+                      : this.scope.locale.NotLoggedIn(),
+                }}
               />
-              {this.$passport.isAuthenticated
-                ? this.$passport.displayName
-                : this.scope.locale.NotLoggedIn()}
-            </summary>
+            </span>
+          </summary>
+          <ClientOnly>
             <ul class="bg-base-100 rounded-t-none p-2 w-40">
               {this.$passport.isAuthenticated ? (
                 <>
                   <li>
                     <a
+                      href={this.$router.getPagePath('/home/user/account')}
                       onClick={event => {
+                        if (
+                          event.button !== 0 ||
+                          event.metaKey ||
+                          event.ctrlKey ||
+                          event.shiftKey ||
+                          event.altKey
+                        ) {
+                          return;
+                        }
+                        event.preventDefault();
                         this.app.$gotoPage('/home/user/account');
                         closeNearestDetails(event);
                       }}
@@ -42,7 +74,7 @@ export class RenderUser extends BeanRenderBase {
                   <li>
                     <ZButton
                       onPerform={async event => {
-                        closeNearestDetails(event);
+                        closeNearestDetails({ currentTarget: event.target });
                         await this.$passport.logout().mutateAsync();
                       }}
                     >
@@ -53,7 +85,18 @@ export class RenderUser extends BeanRenderBase {
               ) : (
                 <li>
                   <a
+                    href={this.app.$getPagePathLogin(true)}
                     onClick={event => {
+                      if (
+                        event.button !== 0 ||
+                        event.metaKey ||
+                        event.ctrlKey ||
+                        event.shiftKey ||
+                        event.altKey
+                      ) {
+                        return;
+                      }
+                      event.preventDefault();
                       this.app.$gotoLogin(true);
                       closeNearestDetails(event);
                     }}
@@ -63,9 +106,9 @@ export class RenderUser extends BeanRenderBase {
                 </li>
               )}
             </ul>
-          </details>
-        </li>
-      </ClientOnly>
+          </ClientOnly>
+        </details>
+      </li>
     );
   }
 }