cabloy 5.1.107 → 5.1.109

package/vona/src/suite/a-training/modules/training-student/src/dto/studentView.tsx

@@ -17,7 +17,53 @@ export interface IDtoOptionsStudentView extends IDecoratorDtoOptions {}
   blocks: [
     ZovaRender.block('basic-pageentry:blockPageEntry', {
       blocks: [
-        ZovaRender.block('basic-pageentry:blockForm'),
+        ZovaRender.block('basic-pageentry:blockForm', {
+          blocks: [
+            ZovaRender.block('basic-form:blockFormLayout', {
+              formLayout: {
+                children: [
+                  {
+                    type: 'tabs',
+                    children: [
+                      {
+                        type: 'tab',
+                        title: $locale('BasicInformation'),
+                        children: [
+                          {
+                            type: 'group',
+                            title: $locale('StudentProfile'),
+                            children: [
+                              {
+                                type: 'section',
+                                columns: { default: 1, md: 2 },
+                                children: [
+                                  { type: 'field', name: 'name' },
+                                  { type: 'field', name: 'mobile' },
+                                  { type: 'field', name: 'imageId' },
+                                ],
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                      {
+                        type: 'tab',
+                        title: $locale('TrainingRecords'),
+                        children: [
+                          { type: 'field', name: 'level' },
+                          {
+                            type: 'section',
+                            children: [{ type: 'field', name: 'trainingRecords' }],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            }),
+          ],
+        }),
         ZovaRender.block('basic-pageentry:blockToolbarRow', {
           actions: [
             ZovaRender.formActionRow('basic-form:actionBack', { permission: { public: true } }),

package/vona/src/suite/a-training/modules/training-student/test/student.test.ts

@@ -1,16 +1,74 @@
 import type {
-  DtoStudentCreate,
   DtoStudentSelectRes,
   DtoStudentSummary,
-  DtoStudentUpdate,
   EntityStudent,
 } from 'vona-module-training-student';
 
 import assert from 'node:assert';
 import { describe, it } from 'node:test';
 import { app } from 'vona-mock';
+import {
+  DtoStudentCreate,
+  DtoStudentSelectResItem,
+  DtoStudentUpdate,
+  DtoStudentView,
+} from 'vona-module-training-student';
 
 describe('student.test.ts', () => {
+  it('action:student:formLayoutMetadata', async () => {
+    await app.bean.executor.mockCtx(async () => {
+      for (const DtoClass of [DtoStudentCreate, DtoStudentUpdate, DtoStudentView]) {
+        const apiJson = await app.bean.openapi.generateJsonOfClass(DtoClass);
+        const component = Object.values(apiJson.components!.schemas as any).find(item => {
+          return (item as any).properties?.trainingRecords;
+        });
+        const blocks = (component as any)?.rest?.blocks;
+        const formLayout =
+          blocks?.[0]?.options?.blocks?.[0]?.options?.blocks?.[0]?.options?.formLayout;
+        const tabs = formLayout?.children[0];
+        const profileSection = tabs?.children[0]?.children[0]?.children[0];
+        const trainingRecordsSection = tabs?.children[1]?.children[1];
+        assert.equal(tabs?.type, 'tabs');
+        assert.equal(tabs?.id, undefined);
+        assert.equal(tabs?.children[1]?.type, 'tab');
+        assert.equal(tabs?.children[1]?.id, undefined);
+        assert.deepEqual(profileSection?.columns, { default: 1, md: 2 });
+        assert.deepEqual(
+          profileSection?.children.map(item => item.name),
+          ['name', 'mobile', 'imageId'],
+        );
+        assert.equal(tabs?.children[1]?.children[0]?.name, 'level');
+        assert.deepEqual(
+          trainingRecordsSection?.children.map(item => item.name),
+          ['trainingRecords'],
+        );
+      }
+    });
+  });
+
+  it('action:student:filterFormLayoutMetadata', async () => {
+    await app.bean.executor.mockCtx(async () => {
+      const apiJson = await app.bean.openapi.generateJsonOfClass(DtoStudentSelectResItem);
+      const component = Object.values(apiJson.components!.schemas as any).find(item => {
+        return (item as any).properties?._operationsRow;
+      });
+      const filterBlock = (component as any)?.rest?.blocks?.[0]?.options?.blocks?.[0];
+      assert.equal(filterBlock?.render, 'basic-page:blockFilter');
+      assert.equal(filterBlock?.options?.formFieldLayout?.inline, false);
+      assert.deepEqual(
+        filterBlock?.options?.blocks?.map(item => item.render),
+        ['basic-form:blockFormLayout', 'basic-page:blockFilterActions'],
+      );
+      const formLayout = filterBlock?.options?.blocks?.[0]?.options?.formLayout;
+      assert.deepEqual(formLayout?.children[0]?.columns, { default: 1, md: 2 });
+      assert.deepEqual(
+        formLayout?.children[0]?.children.map(item => item.name),
+        ['name', 'level', 'createdAt'],
+      );
+      assert.deepEqual(formLayout?.children[0]?.children[2]?.span, { default: 1, md: 2 });
+    });
+  });
+
   it('action:student', async () => {
     await app.bean.executor.mockCtx(async () => {
       // data

package/zova/packages-zova/zova/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova",
-  "version": "5.1.136",
+  "version": "5.1.137",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A vue3 framework with ioc",
   "keywords": [
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "zova-core": "^5.1.78",
-    "zova-suite-a-zova": "^5.1.135"
+    "zova-suite-a-zova": "^5.1.136"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",

package/zova/pnpm-lock.yaml

@@ -1093,8 +1093,11 @@ importers:
   src/suite-vendor/a-zova/modules/a-form:
     dependencies:
       '@tanstack/vue-form':
-        specifier: ^1.32.0
-        version: 1.33.0(vue@3.5.38(typescript@5.9.3))
+        specifier: ^1.33.2
+        version: 1.33.2(vue@3.5.38(typescript@5.9.3))
+      '@tanstack/vue-store':
+        specifier: ^0.11.0
+        version: 0.11.0(vue@3.5.38(typescript@5.9.3))
     devDependencies:
       clean-package:
         specifier: ^2.2.0
@@ -3931,6 +3934,9 @@ packages:
   '@tanstack/form-core@1.33.0':
     resolution: {integrity: sha512-AV4Pw9Dk4orFsuPBcDssfWMJFs+yMYBae7zZ4oTqrCf4ftNGQKxvrQRZeqKHG6A4TkiLeSvf2kzIjcVkrW7E6w==}
 
+  '@tanstack/form-core@1.33.2':
+    resolution: {integrity: sha512-F60zJd15bGrXKonc1kpRYnNRNfiES7F+hgvrPMrsZznPLqZtO2DIg76OU6R25kCYkqYQY5xvuKteuWcUsc587A==}
+
   '@tanstack/match-sorter-utils@8.19.4':
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
@@ -3957,6 +3963,11 @@ packages:
     peerDependencies:
       vue: ^3.4.0
 
+  '@tanstack/vue-form@1.33.2':
+    resolution: {integrity: sha512-yolxEs4XSQu2RhBpM48YgqmmpftR4v28XniH5UjGg9/Z3WOJAv+COSmWwC64ozs2OZIKF+j5ufu1ki62jtP6nA==}
+    peerDependencies:
+      vue: ^3.4.0
+
   '@tanstack/vue-query@5.101.1':
     resolution: {integrity: sha512-w36v/HlCF2xRpdDCz7cygk99AwBWhZaT5No1dJOwqIZ1AR8q7tiovRyPFID/49gkjXG7KgXs/nHfRg+eCydH4Q==}
     peerDependencies:
@@ -9729,6 +9740,12 @@ snapshots:
       '@tanstack/pacer-lite': 0.1.1
       '@tanstack/store': 0.11.0
 
+  '@tanstack/form-core@1.33.2':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.4
+      '@tanstack/pacer-lite': 0.1.1
+      '@tanstack/store': 0.11.0
+
   '@tanstack/match-sorter-utils@8.19.4':
     dependencies:
       remove-accents: 0.5.0
@@ -9753,6 +9770,14 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  '@tanstack/vue-form@1.33.2(vue@3.5.38(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/form-core': 1.33.2
+      '@tanstack/vue-store': 0.11.0(vue@3.5.38(typescript@5.9.3))
+      vue: 3.5.38(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   '@tanstack/vue-query@5.101.1(vue@3.5.38(typescript@5.9.3))':
     dependencies:
       '@tanstack/match-sorter-utils': 8.19.4

package/zova/src/suite/cabloy-basic/modules/basic-form/src/.metadata/component/blockFormLayout.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerBlockFormLayoutProps } from '../../component/blockFormLayout/controller.jsx';
+
+import { ControllerBlockFormLayout } from '../../component/blockFormLayout/controller.jsx';
+export type ZBlockFormLayoutProps = {
+  controllerRef?: (ref: ControllerBlockFormLayout) => void;
+} & ControllerBlockFormLayoutProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerBlockFormLayoutProps,
+  keyof typeof ControllerBlockFormLayout.$propsDefault
+>;
+declare module 'zova-module-basic-form' {
+  export interface ControllerBlockFormLayout {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZBlockFormLayout = defineComponent((_props: ZBlockFormLayoutProps) => {
+  useController(ControllerBlockFormLayout, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerBlockFormLayout.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-form:blockFormLayout': ControllerBlockFormLayoutProps;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-form/src/.metadata/index.ts

@@ -2,6 +2,7 @@
 /** controller: begin */
 export * from '../component/actionBack/controller.jsx';
 export * from '../component/actionSubmit/controller.jsx';
+export * from '../component/blockFormLayout/controller.jsx';
 
 import 'zova';
 declare module 'zova' {
@@ -18,17 +19,24 @@ declare module 'zova-module-basic-form' {
         export interface ControllerActionSubmit {
           /** @internal */
           get scope(): ScopeModuleBasicForm;
+        }
+
+        export interface ControllerBlockFormLayout {
+          /** @internal */
+          get scope(): ScopeModuleBasicForm;
         } 
 }
 /** controller: end */
 /** controller: begin */
 import { ControllerActionBack } from '../component/actionBack/controller.jsx';
 import { ControllerActionSubmit } from '../component/actionSubmit/controller.jsx';
+import { ControllerBlockFormLayout } from '../component/blockFormLayout/controller.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
     'basic-form.controller.actionBack': ControllerActionBack;
 'basic-form.controller.actionSubmit': ControllerActionSubmit;
+'basic-form.controller.blockFormLayout': ControllerBlockFormLayout;
   }
 }
 /** controller: end */
@@ -38,19 +46,24 @@ export * from './component/actionBack.js';
 import { ZActionBack } from './component/actionBack.js';
 export * from './component/actionSubmit.js';
 import { ZActionSubmit } from './component/actionSubmit.js';
+export * from './component/blockFormLayout.js';
+import { ZBlockFormLayout } from './component/blockFormLayout.js';
 export const components = {
   'actionBack': ZActionBack,
 'actionSubmit': ZActionSubmit,
+'blockFormLayout': ZBlockFormLayout,
 };
 import 'zova';
 declare module 'zova' {
 export interface IComponentRecord {
   'basic-form:actionBack': ControllerActionBack;
 'basic-form:actionSubmit': ControllerActionSubmit;
+'basic-form:blockFormLayout': ControllerBlockFormLayout;
 }
 export interface IZovaComponentRecord {
   'basic-form:actionBack': typeof ZActionBack;
 'basic-form:actionSubmit': typeof ZActionSubmit;
+'basic-form:blockFormLayout': typeof ZBlockFormLayout;
 }
 }
 /** components: end */

package/zova/src/suite/cabloy-basic/modules/basic-form/src/component/blockFormLayout/controller.tsx

@@ -0,0 +1,165 @@
+import type { IComponentOptions } from 'zova';
+import type {
+  IJsxRenderContextForm,
+  IResolvedFormLayout,
+  IResolvedFormLayoutField,
+  IResolvedFormLayoutGroup,
+  IResolvedFormLayoutNode,
+  IResolvedFormLayoutSection,
+  IResolvedFormLayoutTab,
+  IResolvedFormLayoutTabs,
+} from 'zova-module-a-form';
+import type { IFormLayout, IResourceBlockOptionsBase } from 'zova-module-a-openapi';
+
+import { classes } from 'typestyle';
+import { useId } from 'vue';
+import { BeanControllerBase, Use } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { resolveFormLayout } from 'zova-module-a-form';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceBlockRecord {
+    'basic-form:blockFormLayout'?: ControllerBlockFormLayoutProps;
+  }
+}
+
+export interface ControllerBlockFormLayoutProps extends IResourceBlockOptionsBase {
+  formLayout: IFormLayout;
+}
+
+@Controller()
+export class ControllerBlockFormLayout extends BeanControllerBase {
+  static $propsDefault = {};
+  static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
+
+  private formLayoutPlan: IResolvedFormLayout | undefined;
+  private formLayoutActiveTabs: Record<string, string | undefined> = {};
+  private formLayoutDomIdPrefix: string;
+
+  @Use({ injectionScope: 'host' })
+  $$renderContext: IJsxRenderContextForm;
+
+  protected async __init__() {
+    this.formLayoutDomIdPrefix = `basic-form-layout-${useId()}`;
+    this.formLayoutPlan = this.$computed(() => {
+      const { $$form } = this.$$renderContext;
+      const formLayout = this.$props.formLayout;
+      return resolveFormLayout(formLayout, $$form.properties);
+    });
+  }
+
+  protected render() {
+    const plan = this.formLayoutPlan!;
+    return <>{plan.children.map(node => this._renderNode(node))}</>;
+  }
+
+  private _renderNode(node: IResolvedFormLayoutNode) {
+    switch (node.type) {
+      case 'field':
+        return this._renderField(node);
+      case 'group':
+        return this._renderGroup(node);
+      case 'section':
+        return this._renderSection(node);
+      case 'tabs':
+        return this._renderTabs(node);
+    }
+  }
+
+  private _renderField(node: IResolvedFormLayoutField) {
+    const { $$form } = this.$$renderContext;
+    const span = this._gridClasses('col-span', node.span);
+    return <div class={span}>{$$form.renderField(node.name)}</div>;
+  }
+
+  private _renderGroup(node: IResolvedFormLayoutGroup) {
+    return (
+      <fieldset class="fieldset mb-6 rounded-box border border-base-300 p-4">
+        {!!node.title && <legend class="fieldset-legend">{node.title}</legend>}
+        {!!node.description && <p class="mb-4 text-sm text-base-content/70">{node.description}</p>}
+        {node.children.map(child => this._renderNode(child))}
+      </fieldset>
+    );
+  }
+
+  private _renderSection(node: IResolvedFormLayoutSection) {
+    const className = classes('mb-6 grid gap-4', this._gridClasses('grid-cols', node.columns));
+    return (
+      <section>
+        {!!node.title && <h3 class="mb-1 text-lg font-semibold">{node.title}</h3>}
+        {!!node.description && <p class="mb-4 text-sm text-base-content/70">{node.description}</p>}
+        <div class={className}>{node.children.map(child => this._renderField(child))}</div>
+      </section>
+    );
+  }
+
+  private getActiveTabId(node: IResolvedFormLayoutTabs) {
+    const activeTabId = this.formLayoutActiveTabs[node.id];
+    if (node.children.some(tab => tab.id === activeTabId)) return activeTabId;
+    const fallbackTabId = node.children[0]?.id;
+    this.formLayoutActiveTabs[node.id] = fallbackTabId;
+    return fallbackTabId;
+  }
+
+  private setActiveTab(tabsId: string, tabId: string) {
+    this.formLayoutActiveTabs[tabsId] = tabId;
+  }
+
+  private _renderTabs(node: IResolvedFormLayoutTabs) {
+    const { $$form } = this.$$renderContext;
+    const activeTabId = this.getActiveTabId(node);
+    const domIdBase = `${this.formLayoutDomIdPrefix}-${node.id}`;
+    return (
+      <div class="mb-6">
+        <div role="tablist" class="tabs tabs-lifted">
+          {node.children.map(tab => {
+            const active = tab.id === activeTabId;
+            const errorFieldCount = $$form.getErrorFieldCount(tab);
+            const invalid = errorFieldCount > 0;
+            return (
+              <button
+                id={`${domIdBase}-${tab.id}-tab`}
+                role="tab"
+                type="button"
+                class={classes('tab', active && 'tab-active')}
+                aria-selected={active}
+                aria-controls={`${domIdBase}-${tab.id}-panel`}
+                onClick={() => this.setActiveTab(node.id, tab.id)}
+              >
+                {tab.title}
+                {invalid && <span class="badge badge-error badge-sm ml-1">{errorFieldCount}</span>}
+              </button>
+            );
+          })}
+        </div>
+        {node.children.map(tab => this._renderTabPanel(domIdBase, tab, tab.id === activeTabId))}
+      </div>
+    );
+  }
+
+  private _renderTabPanel(domIdBase: string, tab: IResolvedFormLayoutTab, active: boolean) {
+    return (
+      <div
+        id={`${domIdBase}-${tab.id}-panel`}
+        role="tabpanel"
+        aria-labelledby={`${domIdBase}-${tab.id}-tab`}
+        hidden={!active}
+        class="rounded-box border border-base-300 bg-base-100 p-4"
+      >
+        {tab.children.map(child => this._renderNode(child))}
+      </div>
+    );
+  }
+
+  private _gridClasses(
+    prefix: 'grid-cols' | 'col-span',
+    columns?: { default?: number; md?: number; lg?: number },
+  ) {
+    const classes: string[] = [];
+    const valueDefault = columns?.default ?? (prefix === 'grid-cols' ? 1 : undefined);
+    if (valueDefault) classes.push(`${prefix}-${valueDefault}`);
+    if (columns?.md) classes.push(`md:${prefix}-${columns.md}`);
+    if (columns?.lg) classes.push(`lg:${prefix}-${columns.lg}`);
+    return classes.join(' ');
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-page/src/.metadata/component/blockFilterActions.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerBlockFilterActionsProps } from '../../component/blockFilterActions/controller.jsx';
+
+import { ControllerBlockFilterActions } from '../../component/blockFilterActions/controller.jsx';
+export type ZBlockFilterActionsProps = {
+  controllerRef?: (ref: ControllerBlockFilterActions) => void;
+} & ControllerBlockFilterActionsProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerBlockFilterActionsProps,
+  keyof typeof ControllerBlockFilterActions.$propsDefault
+>;
+declare module 'zova-module-basic-page' {
+  export interface ControllerBlockFilterActions {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZBlockFilterActions = defineComponent((_props: ZBlockFilterActionsProps) => {
+  useController(ControllerBlockFilterActions, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerBlockFilterActions.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-page:blockFilterActions': ControllerBlockFilterActionsProps;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-page/src/.metadata/index.ts

@@ -1,6 +1,7 @@
 // eslint-disable
 /** controller: begin */
 export * from '../component/blockFilter/controller.jsx';
+export * from '../component/blockFilterActions/controller.jsx';
 export * from '../component/blockPage/controller.jsx';
 export * from '../component/blockPager/controller.jsx';
 export * from '../component/blockTable/controller.jsx';
@@ -18,6 +19,11 @@ declare module 'zova-module-basic-page' {
           get scope(): ScopeModuleBasicPage;
         }
 
+        export interface ControllerBlockFilterActions {
+          /** @internal */
+          get scope(): ScopeModuleBasicPage;
+        }
+
         export interface ControllerBlockPage {
           /** @internal */
           get scope(): ScopeModuleBasicPage;
@@ -41,6 +47,7 @@ declare module 'zova-module-basic-page' {
 /** controller: end */
 /** controller: begin */
 import { ControllerBlockFilter } from '../component/blockFilter/controller.jsx';
+import { ControllerBlockFilterActions } from '../component/blockFilterActions/controller.jsx';
 import { ControllerBlockPage } from '../component/blockPage/controller.jsx';
 import { ControllerBlockPager } from '../component/blockPager/controller.jsx';
 import { ControllerBlockTable } from '../component/blockTable/controller.jsx';
@@ -49,6 +56,7 @@ import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
     'basic-page.controller.blockFilter': ControllerBlockFilter;
+'basic-page.controller.blockFilterActions': ControllerBlockFilterActions;
 'basic-page.controller.blockPage': ControllerBlockPage;
 'basic-page.controller.blockPager': ControllerBlockPager;
 'basic-page.controller.blockTable': ControllerBlockTable;
@@ -60,6 +68,8 @@ declare module 'zova' {
 /** components: begin */
 export * from './component/blockFilter.js';
 import { ZBlockFilter } from './component/blockFilter.js';
+export * from './component/blockFilterActions.js';
+import { ZBlockFilterActions } from './component/blockFilterActions.js';
 export * from './component/blockPage.js';
 import { ZBlockPage } from './component/blockPage.js';
 export * from './component/blockPager.js';
@@ -70,6 +80,7 @@ export * from './component/blockToolbarBulk.js';
 import { ZBlockToolbarBulk } from './component/blockToolbarBulk.js';
 export const components = {
   'blockFilter': ZBlockFilter,
+'blockFilterActions': ZBlockFilterActions,
 'blockPage': ZBlockPage,
 'blockPager': ZBlockPager,
 'blockTable': ZBlockTable,
@@ -79,6 +90,7 @@ import 'zova';
 declare module 'zova' {
 export interface IComponentRecord {
   'basic-page:blockFilter': ControllerBlockFilter;
+'basic-page:blockFilterActions': ControllerBlockFilterActions;
 'basic-page:blockPage': ControllerBlockPage;
 'basic-page:blockPager': ControllerBlockPager;
 'basic-page:blockTable': ControllerBlockTable;
@@ -86,6 +98,7 @@ export interface IComponentRecord {
 }
 export interface IZovaComponentRecord {
   'basic-page:blockFilter': typeof ZBlockFilter;
+'basic-page:blockFilterActions': typeof ZBlockFilterActions;
 'basic-page:blockPage': typeof ZBlockPage;
 'basic-page:blockPager': typeof ZBlockPager;
 'basic-page:blockTable': typeof ZBlockTable;