cabloy 5.1.41 → 5.1.43

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

@@ -0,0 +1,39 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerLayoutWebProps } from '../../component/layoutWeb/controller.jsx';
+
+import { ControllerLayoutWeb } from '../../component/layoutWeb/controller.jsx';
+import { RenderLayoutWeb } from '../../component/layoutWeb/render.jsx';
+export type ZLayoutWebProps = {
+  controllerRef?: (ref: ControllerLayoutWeb) => void;
+} & ControllerLayoutWebProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerLayoutWebProps,
+  keyof typeof ControllerLayoutWeb.$propsDefault
+>;
+declare module 'zova-module-home-layoutweb' {
+  export interface ControllerLayoutWeb {
+    $props: ControllerInnerProps;
+  }
+}
+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 const ZLayoutWeb = defineComponent((_props: ZLayoutWebProps) => {
+  useController(ControllerLayoutWeb, RenderLayoutWeb, undefined);
+  return () => {};
+}, prepareComponentOptions());
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'home-layoutweb:layoutWeb': ControllerLayoutWebProps;
+  }
+}

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

@@ -0,0 +1,200 @@
+// eslint-disable
+/** model: begin */
+export * from '../model/layout.js';
+export * from '../model/menu.js';
+import { IModelOptionsLayout } from '../model/layout.js';
+import { IModelOptionsMenu } from '../model/menu.js';
+import 'zova-module-a-model';
+declare module 'zova-module-a-model' {
+  
+    export interface IModelRecord {
+      'home-layoutweb:layout': IModelOptionsLayout;
+'home-layoutweb:menu': IModelOptionsMenu;
+    }
+
+  
+}
+declare module 'zova-module-home-layoutweb' {
+  
+        export interface ModelLayout {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface ModelLayout {
+          get $beanFullName(): 'home-layoutweb.model.layout';
+          get $onionName(): 'home-layoutweb:layout';
+          get $onionOptions(): IModelOptionsLayout;
+        }
+
+        export interface ModelMenu {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface ModelMenu {
+          get $beanFullName(): 'home-layoutweb.model.menu';
+          get $onionName(): 'home-layoutweb:menu';
+          get $onionOptions(): IModelOptionsMenu;
+        } 
+}
+/** model: end */
+/** model: begin */
+import { ModelLayout } from '../model/layout.js';
+import { ModelMenu } from '../model/menu.js';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordGeneral {
+    'home-layoutweb.model.layout': ModelLayout;
+'home-layoutweb.model.menu': ModelMenu;
+  }
+}
+/** model: end */
+/** controller: begin */
+export * from '../component/layoutWeb/controller.jsx';
+
+import 'zova';
+declare module 'zova' {
+  
+  
+}
+declare module 'zova-module-home-layoutweb' {
+  
+        export interface ControllerLayoutWeb {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        } 
+}
+/** controller: end */
+/** controller: begin */
+import { ControllerLayoutWeb } from '../component/layoutWeb/controller.jsx';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordLocal {
+    'home-layoutweb.controller.layoutWeb': ControllerLayoutWeb;
+  }
+}
+/** controller: end */
+
+/** components: begin */
+export * from './component/layoutWeb.js';
+import { ZLayoutWeb } from './component/layoutWeb.js';
+export const components = {
+  'layoutWeb': ZLayoutWeb,
+};
+import 'zova';
+declare module 'zova' {
+export interface IComponentRecord {
+  'home-layoutweb:layoutWeb': ControllerLayoutWeb;
+}
+export interface IZovaComponentRecord {
+  'home-layoutweb:layoutWeb': typeof ZLayoutWeb;
+}
+}
+/** components: end */
+/** render: begin */
+export * from '../component/layoutWeb/render.content.jsx';
+export * from '../component/layoutWeb/render.header.jsx';
+export * from '../component/layoutWeb/render.locale.jsx';
+export * from '../component/layoutWeb/render.tabs.jsx';
+export * from '../component/layoutWeb/render.theme.jsx';
+export * from '../component/layoutWeb/render.jsx';
+
+import 'zova';
+declare module 'zova' {
+  
+  
+}
+declare module 'zova-module-home-layoutweb' {
+  
+        export interface RenderContent {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface RenderHeader {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface RenderLocale {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface RenderTabs {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface RenderTheme {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        }
+
+        export interface RenderLayoutWeb {
+          /** @internal */
+          get scope(): ScopeModuleHomeLayoutweb;
+        } 
+}
+/** render: end */
+/** render: begin */
+import { RenderContent } from '../component/layoutWeb/render.content.jsx';
+import { RenderHeader } from '../component/layoutWeb/render.header.jsx';
+import { RenderLocale } from '../component/layoutWeb/render.locale.jsx';
+import { RenderTabs } from '../component/layoutWeb/render.tabs.jsx';
+import { RenderTheme } from '../component/layoutWeb/render.theme.jsx';
+import { RenderLayoutWeb } from '../component/layoutWeb/render.jsx';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordLocal {
+    'home-layoutweb.render.content': RenderContent;
+'home-layoutweb.render.header': RenderHeader;
+'home-layoutweb.render.locale': RenderLocale;
+'home-layoutweb.render.tabs': RenderTabs;
+'home-layoutweb.render.theme': RenderTheme;
+'home-layoutweb.render.layoutWeb': RenderLayoutWeb;
+  }
+}
+/** render: end */
+/** config: begin */
+export * from '../config/config.js';
+import { config } from '../config/config.js';
+/** config: end */
+/** locale: begin */
+import { locales } from './locales.js';
+/** locale: end */
+/** scope: begin */
+import { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig, TypeModuleLocales, TypeLocaleBase } from 'zova';
+import { Scope } from 'zova-module-a-bean';
+
+@Scope()
+export class ScopeModuleHomeLayoutweb extends BeanScopeBase {}
+
+export interface ScopeModuleHomeLayoutweb {
+  util: BeanScopeUtil;
+config: TypeModuleConfig<typeof config>;
+locale: TypeModuleLocales<(typeof locales)[TypeLocaleBase]>;
+}
+
+import 'zova';
+declare module 'zova' {
+  export interface IBeanScopeRecord {
+    'home-layoutweb': ScopeModuleHomeLayoutweb;
+  }
+  
+  export interface IBeanScopeConfig {
+    'home-layoutweb': ReturnType<typeof config>;
+  }
+
+  export interface IBeanScopeLocale {
+    'home-layoutweb': (typeof locales)[TypeLocaleBase];
+  }
+
+  
+}
+
+export function locale<K extends keyof (typeof locales)[TypeLocaleBase]>(key: K): `home-layoutweb::${K}` {
+  return `home-layoutweb::${key}`;
+}  
+/** scope: end */

package/zova/src/suite/a-home/modules/{home-layouttabs → home-layoutweb}/src/.metadata/locales.ts

@@ -15,7 +15,7 @@ export function $useLocale<K extends keyof (typeof locales)[TypeLocaleBase]>(
   ...args: any[]
 ) {
   const app = useApp();
-  const str = `home-layouttabs::${key}`;
+  const str = `home-layoutweb::${key}`;
   return useComputed(() => {
     return app.meta.text(str, ...args);
   });

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

@@ -0,0 +1,2 @@
+export const __ThisModule__ = 'home-layoutweb';
+export { ScopeModuleHomeLayoutweb as ScopeModule } from './index.js';

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

@@ -0,0 +1,112 @@
+import { BeanControllerBase, Use, useComputed, UseScope } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { $QueryAutoLoad } from 'zova-module-a-model';
+import { ModelTabs, ModelTabsOptions, RouteTabInitial } from 'zova-module-a-routertabs';
+import { ScopeModuleASsr } from 'zova-module-a-ssr';
+import { IServiceSsrLayoutOptions, ServiceLocale, ServiceSsrLayout } from 'zova-module-home-base';
+
+import { ModelLayout } from '../../model/layout.js';
+import { ModelMenu } from '../../model/menu.js';
+
+export interface ControllerLayoutWebProps {}
+
+@Controller()
+export class ControllerLayoutWeb extends BeanControllerBase {
+  static $propsDefault = {};
+
+  $$modelTabs: ModelTabs;
+
+  @Use()
+  $$modelMenu: ModelMenu;
+
+  @Use()
+  $$modelLayout: ModelLayout;
+
+  @UseScope()
+  $$scopeSsr: ScopeModuleASsr;
+
+  @Use({ init: { arg: { sidebarLeftOpenPC: false } as IServiceSsrLayoutOptions } })
+  $$serviceSsrLayout: ServiceSsrLayout;
+
+  @Use()
+  $$serviceLocale: ServiceLocale;
+
+  leftDrawerOpen: boolean;
+  leftDrawerOpenMobile: boolean = false;
+  belowBreakpoint: boolean;
+
+  protected async __init__() {
+    // belowBreakpoint
+    this.belowBreakpoint = useComputed(() => {
+      let width;
+      if (process.env.SERVER) {
+        width = 0;
+      } else {
+        width = document.documentElement.clientWidth;
+      }
+      return width <= this.sys.config.layout.sidebar.breakpoint;
+    });
+    // leftDrawerOpen
+    this.leftDrawerOpen = this.$customRef(() => {
+      const self = this;
+      return {
+        get() {
+          return self.belowBreakpoint
+            ? self.leftDrawerOpenMobile
+            : self.$$modelLayout.leftDrawerOpenPC;
+        },
+        set(value) {
+          if (self.belowBreakpoint) {
+            self.leftDrawerOpenMobile = value;
+          } else {
+            self.$$modelLayout.leftDrawerOpenPC = value;
+          }
+        },
+      };
+    });
+    // menu
+    await $QueryAutoLoad(() => this.$$modelMenu.retrieveMenus());
+    // tabs
+    await this._initTabs();
+  }
+
+  private async _initTabs() {
+    const configTabs = this.scope.config.tabs;
+    const tabsOptions: ModelTabsOptions = {
+      max: configTabs.max,
+      maxItems: configTabs.maxItems,
+      cache: configTabs.cache,
+      getInitialTabs: () => {
+        return this._getInitialTabs();
+      },
+    };
+    this.$$modelTabs = await this.bean._getBeanSelector(
+      'a-routertabs.model.tabs',
+      true,
+      configTabs.scene,
+      tabsOptions,
+    );
+    // watch menus
+    this.$watch(
+      () => {
+        return this.$$modelMenu.retrieveMenus().data;
+      },
+      () => {
+        this.$$modelTabs.updateAllTabInfos(this._getInitialTabs());
+      },
+    );
+  }
+
+  private _getInitialTabs() {
+    return this.$$modelMenu.menuTree?.map(item => {
+      return {
+        tabKey: item.folder ? item.name : item.link,
+        info: item,
+      } as RouteTabInitial;
+    });
+  }
+
+  toggleLeftDrawer() {
+    this.leftDrawerOpen = !this.leftDrawerOpen;
+  }
+}

package/zova/src/suite/a-home/modules/{home-layouttabs/src/component/layoutTabs → home-layoutweb/src/component/layoutWeb}/render.content.tsx

@@ -1,12 +1,12 @@
 import { BeanRenderBase, Use } from 'zova';
 import { Render } from 'zova-module-a-bean';
 
-import type { RenderLayoutTabs } from './render.jsx';
+import type { RenderLayoutWeb } from './render.jsx';
 
 @Render()
 export class RenderContent extends BeanRenderBase {
   @Use()
-  $$r: RenderLayoutTabs;
+  $$r: RenderLayoutWeb;
 
   public render() {
     return this.$$r.$$renderTabs._renderRouterViewTabs();

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

@@ -0,0 +1,39 @@
+import { BeanRenderBase, Use } from 'zova';
+import { Render } from 'zova-module-a-bean';
+import { ZIcon } from 'zova-module-a-icon';
+
+import type { RenderLayoutWeb } from './render.jsx';
+
+@Render()
+export class RenderHeader extends BeanRenderBase {
+  @Use()
+  $$r: RenderLayoutWeb;
+
+  public render() {
+    return (
+      <>
+        <div class="navbar bg-base-300 w-full">
+          <div class="flex-none">
+            <button
+              class="btn btn-square btn-ghost"
+              onClick={() => {
+                this.app.$gotoHome();
+              }}
+            >
+              <ZIcon name=":social:cabloy" width={24}></ZIcon>
+            </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="hidden flex-none lg:block">
+            <ul class="menu menu-horizontal">
+              {this.$$r.$$renderLocale.render()}
+              {this.$$r.$$renderTheme.renderThemeDark()}
+              {this.sys.config.ssr.cookie && this.$$r.$$renderTheme.renderThemeName()}
+            </ul>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,50 @@
+import { BeanRenderBase, ClientOnly } from 'zova';
+import { Render } from 'zova-module-a-bean';
+import { $icon } from 'zova-module-a-icon';
+import { closeNearestDetails } from 'zova-module-home-base';
+
+@Render()
+export class RenderLocale extends BeanRenderBase {
+  public render() {
+    const currentRoute = this.$currentRoute;
+    const metaLocale = currentRoute?.meta?.locale;
+    const locales = currentRoute?.meta?.locales ?? this.sys.config.locale.items;
+    return (
+      <li>
+        <details>
+          <summary>{$icon('::language', 24)}</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 => {
+                        if (metaLocale) {
+                          const fullPath = this.$router.resolveName(currentRoute.name as any, {
+                            params: Object.assign({}, currentRoute.params, {
+                              locale: key === this.sys.config.locale.default ? '' : key,
+                            }),
+                            query: currentRoute.query,
+                          });
+                          this.$router.push(fullPath);
+                        } else {
+                          this.$$serviceLocale.setLocale(key as any);
+                        }
+                        closeNearestDetails(event);
+                      }}
+                    >
+                      {$icon(this.app.meta.locale.current === key ? '::done' : '::none', 24)}
+                      {title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </ClientOnly>
+        </details>
+      </li>
+    );
+  }
+}

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

@@ -0,0 +1,95 @@
+import type { VNode } from 'vue';
+import type { RouteTab } from 'zova-module-a-routertabs';
+
+import { BeanRenderBase, ClientOnly } from 'zova';
+import { Render } from 'zova-module-a-bean';
+import { $iconName, ZIcon } from 'zova-module-a-icon';
+import { ZRouterViewTabs } from 'zova-module-a-routertabs';
+import { closeNearestDetails, ZItemLink } from 'zova-module-home-base';
+
+@Render()
+export class RenderTabs extends BeanRenderBase {
+  public renderTabs(): VNode | undefined {
+    const $$modelTabs = this.$$modelTabs;
+    if (!$$modelTabs) return;
+
+    const domTabs = $$modelTabs.tabs.map(tab => this._renderTab(tab));
+    const domWrapper = (
+      <div role="tablist" class="tabs tabs-lifted">
+        {domTabs}
+      </div>
+    );
+    if (!$$modelTabs.cache) return domWrapper;
+
+    return <ClientOnly>{domWrapper}</ClientOnly>;
+  }
+
+  private _renderTab(tab: RouteTab): VNode {
+    const $$modelTabs = this.$$modelTabs;
+    const { tabKey, info } = tab;
+    const titleLocale = this.$text(info?.title || '');
+    const tabIcon = this.getTabIcon(tab);
+    if (info.folder) {
+      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?.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>
+      );
+    }
+    // not external
+    if (!info.external) {
+      const className = tabKey === $$modelTabs.tabKeyCurrent ? 'text-primary' : '';
+
+      return (
+        <a
+          key={tabKey}
+          role="tab"
+          class={`tab ${className}`}
+          onClick={() => {
+            $$modelTabs.activeTab(tabKey);
+          }}
+        >
+          {!!tabIcon && <ZIcon name={tabIcon as any} width="24"></ZIcon>}
+          {titleLocale}
+        </a>
+      );
+    }
+    // external
+    return (
+      <ZItemLink
+        key={tabKey}
+        title={titleLocale}
+        icon={info.icon as any}
+        href={info.link}
+      ></ZItemLink>
+    );
+  }
+
+  public getTabIcon(tab: RouteTab) {
+    const { info } = tab;
+    return info?.icon ? info?.icon : '';
+  }
+
+  _renderRouterViewTabs() {
+    return <ZRouterViewTabs></ZRouterViewTabs>;
+  }
+}

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

@@ -0,0 +1,98 @@
+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 { closeNearestDetails } from 'zova-module-home-base';
+
+@Render()
+export class RenderTheme extends BeanRenderBase {
+  renderThemeDark() {
+    const themes = [
+      {
+        mode: false,
+        title: this.scope.locale.ThemeLight(),
+      },
+      {
+        mode: true,
+        title: this.scope.locale.ThemeDark(),
+      },
+      {
+        mode: 'auto',
+        title: this.scope.locale.ThemeAuto(),
+      },
+    ];
+    return (
+      <li>
+        <details>
+          <summary>{$icon('::dark-theme', 24)}</summary>
+          <ClientOnly>
+            <ul class="bg-base-100 rounded-t-none p-2 w-48">
+              {themes.map(item => {
+                return (
+                  <li
+                    key={item.mode.toString()}
+                    class={this.$theme.darkMode === item.mode ? 'disabled' : ''}
+                  >
+                    <a
+                      onClick={event => {
+                        this.$theme.darkMode = item.mode as any;
+                        closeNearestDetails(event);
+                      }}
+                    >
+                      {$icon(this.$theme.darkMode === item.mode ? '::done' : '::none', 24)}
+                      {item.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </ClientOnly>
+        </details>
+      </li>
+    );
+  }
+
+  renderThemeName() {
+    const themes = this.getThemeNames();
+    return (
+      <li>
+        <details>
+          <summary>{$icon(':outline:theme-outline', 24)}</summary>
+          <ClientOnly>
+            <ul class="bg-base-100 rounded-t-none p-2 w-48">
+              {themes.map(item => {
+                return (
+                  <li key={item.name} class={this.$theme.name === item.name ? 'disabled' : ''}>
+                    <a
+                      onClick={event => {
+                        this.$theme.name = item.name as keyof IThemeRecord;
+                        closeNearestDetails(event);
+                      }}
+                    >
+                      {$icon(this.$theme.name === item.name ? '::done' : '::none', 24)}
+                      {item.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </ClientOnly>
+        </details>
+      </li>
+    );
+  }
+
+  getThemeNames() {
+    return [
+      {
+        name: 'home-theme:orange' satisfies keyof IThemeRecord,
+        title: this.scope.locale.ThemeOrange(),
+      },
+      {
+        name: 'home-theme:default' satisfies keyof IThemeRecord,
+        title: this.scope.locale.ThemeBlue(),
+      },
+    ];
+  }
+}