cabloy 5.1.107 → 5.1.109

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockFilter/controller.tsx

@@ -4,12 +4,16 @@ import type {
   IJsxRenderContextPage,
   IResourceBlockOptionsBase,
   IResourceFormFieldLayoutOptions,
+  IResourceRenderBlockOptionsBlock,
 } from 'zova-module-a-openapi';
 
 import { isNilOrEmptyString } from '@cabloy/utils';
-import { BeanControllerBase, Use } from 'zova';
+import { VNode } from 'vue';
+import { BeanControllerBase, objectAssignReactive, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
-import { TypeFormOnSubmitData, ZForm } from 'zova-module-a-form';
+import { ControllerForm, TypeFormOnSubmitData, ZForm } from 'zova-module-a-form';
+
+import { IPageFilterScope } from '../../types/page.js';
 
 declare module 'zova-module-a-openapi' {
   export interface IResourceBlockRecord {
@@ -17,22 +21,29 @@ declare module 'zova-module-a-openapi' {
   }
 }
 
-export interface ControllerBlockFilterProps extends IResourceBlockOptionsBase {}
+export interface ControllerBlockFilterProps extends IResourceBlockOptionsBase {
+  blocks?: IResourceRenderBlockOptionsBlock[];
+  formFieldLayout?: IResourceFormFieldLayoutOptions;
+}
 
 @Controller()
 export class ControllerBlockFilter extends BeanControllerBase {
-  static $propsDefault = {};
+  static $propsDefault = {
+    formFieldLayout: { inline: true },
+  };
+
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
 
   formMeta: IFormMeta;
-  formFieldLayout: IResourceFormFieldLayoutOptions;
+  formRef: ControllerForm | undefined;
+  formScope: IPageFilterScope;
 
   @Use({ injectionScope: 'host' })
   $$renderContext: IJsxRenderContextPage;
 
   protected async __init__() {
     this.formMeta = { formMode: 'edit' };
-    this.formFieldLayout = { inline: true };
+    this.formScope = this._prepareFormScope();
   }
 
   get schemaFilter() {
@@ -48,6 +59,16 @@ export class ControllerBlockFilter extends BeanControllerBase {
     this._onFilter(data);
   }
 
+  public submitFilter() {
+    return this.formRef?.submit() ?? Promise.resolve(false);
+  }
+
+  public resetFilter() {
+    if (!this.formRef) return;
+    const data = this.formRef.reset();
+    this.resetData(data);
+  }
+
   _onFilter(dataOld: any) {
     const { $$page } = this.$$renderContext;
     const dataNew = {};
@@ -62,40 +83,49 @@ export class ControllerBlockFilter extends BeanControllerBase {
 
   protected render() {
     const { $$page } = this.$$renderContext;
+    const blocks = this.$props.blocks;
+    const hasBlocks = !!blocks && blocks.length > 0;
+    const formFieldLayout = this.$props.formFieldLayout;
     return (
       <ZForm
         class={this.$props.class}
-        inline={true}
+        controllerRef={ref => {
+          this.formRef = ref;
+        }}
         data={$$page.queryFilterData}
         schema={this.schemaFilter}
         schemaScene="filter"
         formMeta={this.formMeta}
-        formFieldLayout={this.formFieldLayout}
+        formFieldLayout={formFieldLayout}
+        blocks={blocks}
+        formScope={this.formScope}
         onSubmitData={data => this.submitData(data as never)}
-        slotFooter={$$form => {
-          return (
-            <>
-              <button
-                class="btn btn-primary"
-                onClick={() => {
-                  $$form.submit();
-                }}
-              >
-                {this.scope.locale.Search()}
-              </button>
-              <button
-                class="btn btn-warning"
-                onClick={() => {
-                  const data = $$form.reset();
-                  this.resetData(data);
-                }}
-              >
-                {this.scope.locale.Reset()}
-              </button>
-            </>
-          );
-        }}
+        slotFooter={hasBlocks ? undefined : $$form => this._renderActions($$form)}
       ></ZForm>
     );
   }
+
+  private _prepareFormScope(): IPageFilterScope {
+    // eslint-disable-next-line
+    const self = this;
+    const $$filter = this.$customRef(() => {
+      return {
+        get() {
+          return self;
+        },
+        set(_value) {},
+      };
+    }) as any;
+    return objectAssignReactive({}, this.$$renderContext.$$page.jsxCelScope, { $$filter });
+  }
+
+  private _renderActions($$form: ControllerForm): VNode {
+    const jsxRenderContext = $$form.getFormJsxRenderContext(this.formScope);
+    return $$form.zovaJsx.render(
+      'basic-page:blockFilterActions',
+      {},
+      this.formScope,
+      jsxRenderContext,
+    ) as VNode;
+  }
 }

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockFilterActions/controller.tsx

@@ -0,0 +1,51 @@
+import type { IComponentOptions } from 'zova';
+import type { IJsxRenderContextForm } from 'zova-module-a-form';
+import type { IResourceBlockOptionsBase } from 'zova-module-a-openapi';
+
+import { BeanControllerBase, Use } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceBlockRecord {
+    'basic-page:blockFilterActions'?: ControllerBlockFilterActionsProps;
+  }
+}
+
+export interface ControllerBlockFilterActionsProps extends IResourceBlockOptionsBase {}
+
+@Controller()
+export class ControllerBlockFilterActions extends BeanControllerBase {
+  static $propsDefault = {};
+  static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
+
+  @Use({ injectionScope: 'host' })
+  $$renderContext: IJsxRenderContextForm;
+
+  protected async __init__() {}
+
+  protected render() {
+    const { $$filter } = this.$$renderContext.$celScope;
+    return (
+      <div class={this.$props.class}>
+        <button
+          class="btn btn-primary"
+          type="button"
+          onClick={() => {
+            $$filter?.submitFilter();
+          }}
+        >
+          {this.scope.locale.Search()}
+        </button>
+        <button
+          class="btn btn-warning"
+          type="button"
+          onClick={() => {
+            $$filter?.resetFilter();
+          }}
+        >
+          {this.scope.locale.Reset()}
+        </button>
+      </div>
+    );
+  }
+}

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

@@ -1,15 +1,25 @@
 import type { IPageScope } from 'zova-module-a-openapi';
 
+import 'zova-module-a-form';
 import 'zova-module-a-table';
 import 'zova-module-a-openapi';
+import { ControllerBlockFilter } from '../component/blockFilter/controller.jsx';
 import { ControllerBlockPage } from '../component/blockPage/controller.jsx';
 
+export interface IPageFilterScope extends IPageScope {
+  $$filter?: ControllerBlockFilter;
+}
+
 declare module 'zova-module-a-openapi' {
   export interface IJsxRenderContextPage<TData extends {} = {}> {
     $$page: ControllerBlockPage<TData>;
   }
 }
 
+declare module 'zova-module-a-form' {
+  export interface IFormScope extends IPageScope, IPageFilterScope {}
+}
+
 declare module 'zova-module-a-table' {
   export interface ITableScope extends IPageScope {}
 }

package/zova/src/suite/cabloy-basic/modules/basic-pageentry/src/component/blockForm/controller.tsx

@@ -1,5 +1,9 @@
 import type { IComponentOptions } from 'zova';
-import type { IJsxRenderContextPageEntry, IResourceBlockOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextPageEntry,
+  IResourceBlockOptionsBase,
+  IResourceRenderBlockOptionsBlock,
+} from 'zova-module-a-openapi';
 
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
@@ -11,7 +15,9 @@ declare module 'zova-module-a-openapi' {
   }
 }
 
-export interface ControllerBlockFormProps extends IResourceBlockOptionsBase {}
+export interface ControllerBlockFormProps extends IResourceBlockOptionsBase {
+  blocks?: IResourceRenderBlockOptionsBlock[];
+}
 
 @Controller()
 export class ControllerBlockForm extends BeanControllerBase {
@@ -40,6 +46,7 @@ export class ControllerBlockForm extends BeanControllerBase {
         schemaScene={$$pageEntry.schemaScene}
         formMeta={$$pageEntry.formMeta}
         formProvider={$$pageEntry.formProvider}
+        blocks={this.$props.blocks}
         formScope={$$pageEntry.jsxCelScope}
         onSubmitData={data => $$pageEntry.submitData(data)}
         onShowError={async ({ error }) => {

package/zova/src/suite-vendor/a-zova/modules/a-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-form",
-  "version": "5.1.43",
+  "version": "5.1.44",
   "gitHead": "09d901d17140a80ee0764211b441cda72fd94663",
   "description": "",
   "keywords": [
@@ -34,7 +34,8 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^1.32.0"
+    "@tanstack/vue-form": "^1.33.2",
+    "@tanstack/vue-store": "^0.11.0"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",
@@ -54,7 +55,8 @@
   "title": "a-form",
   "zovaModule": {
     "globalDependencies": {
-      "@tanstack/vue-form": true
+      "@tanstack/vue-form": true,
+      "@tanstack/vue-store": true
     },
     "bundle": {
       "vendors": [

package/zova/src/suite-vendor/a-zova/modules/a-form/src/component/form/controller.tsx

@@ -7,10 +7,10 @@ import {
   getBy,
   isGlobalFormValidationError,
   revalidateLogic,
-  useStore,
   ValidationCause,
   ValidationError,
 } from '@tanstack/vue-form';
+import { useSelector } from '@tanstack/vue-store';
 import { SchemaObject } from 'openapi3-ts/oas31';
 import { VNode } from 'vue';
 import { z } from 'zod';
@@ -22,6 +22,7 @@ import {
   IFormMeta,
   IFormProvider,
   IResourceFormFieldLayoutOptions,
+  IResourceRenderBlockOptionsBlock,
   ISchemaObjectExtensionField,
   renderFormFieldTopPropsSystem,
   ScopeModuleAOpenapi,
@@ -30,6 +31,8 @@ import {
   TypeFormSchemaScene,
 } from 'zova-module-a-openapi';
 
+import type { IResolvedFormLayoutNode, IResolvedFormLayoutTab } from '../../types/formLayout.js';
+
 import { BeanControllerFormBase } from '../../lib/beanControllerFormBase.js';
 import {
   IFormScope,
@@ -43,13 +46,13 @@ import {
   IFormFieldOptions,
   IFormFieldRenderContextPropsBucket,
   IFormFieldScope,
+  IJsxRenderContextForm,
   IJsxRenderContextFormField,
 } from '../../types/formField.js';
 import { ControllerFormField } from '../formField/controller.jsx';
 
 export interface ControllerFormProps<TFormData extends {} = {}, TSubmitMeta = never> {
   formTag?: string;
-  inline?: boolean;
   data?: TFormData;
   schema?: SchemaObject;
   schemaScene?: TypeFormSchemaScene;
@@ -60,6 +63,7 @@ export interface ControllerFormProps<TFormData extends {} = {}, TSubmitMeta = ne
   formProvider?: IFormProvider;
   formScope?: IFormScope;
   formFieldLayout?: IResourceFormFieldLayoutOptions;
+  blocks?: IResourceRenderBlockOptionsBlock[];
   onFormSubmit?: (e: SubmitEvent, form: ControllerForm<TFormData, TSubmitMeta>) => any;
   onSubmitInvalid?: TypeFormOnSubmitInvalid<TFormData, TSubmitMeta>;
   onSubmitData?: TypeFormOnSubmit<TFormData, TSubmitMeta>;
@@ -94,7 +98,7 @@ export class ControllerForm<
   protected async __init__() {
     this.bean._setBean('$$form', this);
     this.form = this._createForm();
-    this.formState = useStore(this.form.store, state => state) as any;
+    this.formState = useSelector(this.form.store, state => state) as any;
     this.formProvider = this.$computed(() => {
       const formProvider = this.$$scopeOpenapi.config.formProvider;
       return this.$props.formProvider
@@ -143,6 +147,14 @@ export class ControllerForm<
     return this.$props.formMeta;
   }
 
+  public hasErrors(node: IResolvedFormLayoutNode | IResolvedFormLayoutTab) {
+    return this.getErrorFieldCount(node) > 0;
+  }
+
+  public getErrorFieldCount(node: IResolvedFormLayoutNode | IResolvedFormLayoutTab) {
+    return this._getFormLayoutErrorFieldCount(node);
+  }
+
   public getFieldValue<K extends DeepKeys<TFormData>>(name: K) {
     return getBy(this.formState.values, name) ?? null;
   }
@@ -195,6 +207,12 @@ export class ControllerForm<
     });
   }
 
+  public getFormScope(scopeExtra?: {}): IFormScope {
+    return objectAssignReactive({}, this.$props.formScope, {
+      ...scopeExtra,
+    });
+  }
+
   public getFieldJsxRenderContext(
     $$formField: ControllerFormField<TFormData> | undefined,
     celScope: IFormFieldScope<TFormData>,
@@ -211,6 +229,20 @@ export class ControllerForm<
     };
   }
 
+  public getFormJsxRenderContext(
+    celScope: IFormScope,
+  ): IJsxRenderContextForm<TFormData, TSubmitMeta> {
+    return {
+      app: this.app,
+      ctx: this.ctx,
+      $scene: 'form',
+      $host: this,
+      $celScope: celScope,
+      $jsx: this.zovaJsx,
+      $$form: this,
+    };
+  }
+
   public getFieldComponentPropsTop<K extends DeepKeys<TFormData>>(
     name: K,
     celScope: IFormFieldScope<TFormData>,
@@ -375,6 +407,15 @@ export class ControllerForm<
     return typeof renderProvider === 'string' && renderProvider.includes(':formField');
   }
 
+  private _getFormLayoutErrorFieldCount(node: IResolvedFormLayoutNode | IResolvedFormLayoutTab) {
+    if (node.type === 'field') {
+      return this.formState.fieldMeta[node.name]?.errors?.length ? 1 : 0;
+    }
+    return node.children.reduce((count, child) => {
+      return count + this._getFormLayoutErrorFieldCount(child);
+    }, 0);
+  }
+
   private _handleError422(error: Error, cause: ValidationCause = 'submit') {
     const formApi = this.form;
 

package/zova/src/suite-vendor/a-zova/modules/a-form/src/component/form/render.tsx

@@ -33,13 +33,34 @@ export class RenderForm extends BeanRenderBase {
     return children;
   }
 
+  private _renderFromBlocks() {
+    const blocks = this.$props.blocks;
+    if (!blocks || blocks.length === 0) {
+      return this._renderSchema();
+    }
+    const celScope = this.getFormScope();
+    const jsxRenderContext = this.getFormJsxRenderContext(celScope);
+    const domBlocks: VNode[] = [];
+    blocks.forEach((block, index) => {
+      const options = Object.assign({ key: index }, block.options);
+      const domBlock = this.zovaJsx.render(block.render!, options, celScope, jsxRenderContext);
+      if (!domBlock) return;
+      if (Array.isArray(domBlock)) {
+        domBlocks.push(...domBlock);
+      } else {
+        domBlocks.push(domBlock);
+      }
+    });
+    return domBlocks;
+  }
+
   private _renderBodyInner() {
     const FormTag = this.$props.formTag;
     return this.$slotDefault ? (
       this.$slotDefault(this)
     ) : (
       <>
-        {this._renderSchema()}
+        {this.$props.blocks ? this._renderFromBlocks() : this._renderSchema()}
         {FormTag === 'form' && <button type="submit" style={{ display: 'none' }}></button>}
       </>
     );
@@ -48,9 +69,6 @@ export class RenderForm extends BeanRenderBase {
   private _renderProps() {
     const FormTag = this.$props.formTag;
     const props: any = {};
-    if (this.$props.inline) {
-      props.class = 'inline';
-    }
     if (FormTag === 'form') {
       props.onSubmit = (e: SubmitEvent) => {
         if (this.$props.onFormSubmit) {

package/zova/src/suite-vendor/a-zova/modules/a-form/src/component/formField/controller.tsx

@@ -1,5 +1,6 @@
 import { isNil } from '@cabloy/utils';
-import { useField, useStore } from '@tanstack/vue-form';
+import { useField } from '@tanstack/vue-form';
+import { useSelector } from '@tanstack/vue-store';
 import { markRaw } from 'vue';
 import z from 'zod';
 import { BeanControllerBase, deepEqual, IComponentOptions, Use } from 'zova';
@@ -139,7 +140,7 @@ export class ControllerFormField<TParentData extends {} = {}> extends BeanContro
   private _createField() {
     const options = this._getFormFieldOptions();
     const field = markRaw(useField(options as any)) as any;
-    const fieldState = useStore(field.api.store, state => state) as any;
+    const fieldState = useSelector(field.api.store, state => state) as any;
     return { api: field.api, state: fieldState };
   }
 

package/zova/src/suite-vendor/a-zova/modules/a-form/src/lib/formLayout.ts

@@ -0,0 +1,203 @@
+import type {
+  IFormLayout,
+  IFormLayoutField,
+  IFormLayoutNode,
+  IFormLayoutTab,
+  IFormLayoutTabs,
+  ISchemaObjectExtensionField,
+} from 'zova-module-a-openapi';
+
+import type {
+  IFormLayoutDiagnostic,
+  IResolvedFormLayout,
+  IResolvedFormLayoutField,
+  IResolvedFormLayoutGroup,
+  IResolvedFormLayoutNode,
+  IResolvedFormLayoutSection,
+  IResolvedFormLayoutTab,
+  IResolvedFormLayoutTabs,
+} from '../types/formLayout.js';
+
+export function resolveFormLayout(
+  layout: IFormLayout,
+  properties: ISchemaObjectExtensionField[] | undefined,
+): IResolvedFormLayout {
+  const propertyNames = new Set(
+    properties
+      ?.filter(item => item.rest?.visible !== false)
+      .map(item => item.key)
+      .filter(Boolean) as string[],
+  );
+  const fieldNames = new Set<string>();
+  const nodeIds = new Set<string>();
+  const diagnostics: IFormLayoutDiagnostic[] = [];
+  const fieldTabPaths: IResolvedFormLayout['fieldTabPaths'] = {};
+  const children = layout.children
+    .map((node, index) =>
+      resolveNode(
+        node,
+        [index],
+        [],
+        propertyNames,
+        fieldNames,
+        nodeIds,
+        diagnostics,
+        fieldTabPaths,
+      ),
+    )
+    .filter(Boolean) as IResolvedFormLayoutNode[];
+  for (const property of properties ?? []) {
+    const name = property.key;
+    if (!name || !propertyNames.has(name) || fieldNames.has(name)) continue;
+    fieldNames.add(name);
+    children.push({ type: 'field', name });
+  }
+  return { children, fieldTabPaths, diagnostics };
+}
+
+function resolveNode(
+  node: IFormLayoutNode,
+  indexPath: number[],
+  tabPath: IResolvedFormLayout['fieldTabPaths'][string],
+  propertyNames: Set<string>,
+  fieldNames: Set<string>,
+  nodeIds: Set<string>,
+  diagnostics: IFormLayoutDiagnostic[],
+  fieldTabPaths: IResolvedFormLayout['fieldTabPaths'],
+): IResolvedFormLayoutNode | undefined {
+  if (node.type === 'field') {
+    return resolveField(node, tabPath, propertyNames, fieldNames, diagnostics, fieldTabPaths);
+  }
+  if (node.type === 'tabs') {
+    return resolveTabs(
+      node,
+      indexPath,
+      propertyNames,
+      fieldNames,
+      nodeIds,
+      diagnostics,
+      fieldTabPaths,
+    );
+  }
+  const id = resolveId(node, indexPath);
+  if (!registerId(id, nodeIds, diagnostics)) return;
+  if (node.type === 'section') {
+    const children = node.children
+      .map(item =>
+        resolveField(item, tabPath, propertyNames, fieldNames, diagnostics, fieldTabPaths),
+      )
+      .filter(Boolean) as IResolvedFormLayoutField[];
+    return children.length ? { ...node, id, children } : undefined;
+  }
+  const children = node.children
+    .map((item, index) =>
+      resolveNode(
+        item,
+        [...indexPath, index],
+        tabPath,
+        propertyNames,
+        fieldNames,
+        nodeIds,
+        diagnostics,
+        fieldTabPaths,
+      ),
+    )
+    .filter(Boolean) as Array<
+    IResolvedFormLayoutField | IResolvedFormLayoutGroup | IResolvedFormLayoutSection
+  >;
+  return children.length ? { ...node, id, children } : undefined;
+}
+
+function resolveTabs(
+  node: IFormLayoutTabs,
+  indexPath: number[],
+  propertyNames: Set<string>,
+  fieldNames: Set<string>,
+  nodeIds: Set<string>,
+  diagnostics: IFormLayoutDiagnostic[],
+  fieldTabPaths: IResolvedFormLayout['fieldTabPaths'],
+): IResolvedFormLayoutTabs | undefined {
+  const id = resolveId(node, indexPath);
+  if (!registerId(id, nodeIds, diagnostics)) return;
+  const children = node.children
+    .map((tab, index) =>
+      resolveTab(
+        tab,
+        [...indexPath, index],
+        id,
+        propertyNames,
+        fieldNames,
+        nodeIds,
+        diagnostics,
+        fieldTabPaths,
+      ),
+    )
+    .filter(Boolean) as IResolvedFormLayoutTab[];
+  return children.length ? { ...node, id, children } : undefined;
+}
+
+function resolveTab(
+  node: IFormLayoutTab,
+  indexPath: number[],
+  tabsId: string,
+  propertyNames: Set<string>,
+  fieldNames: Set<string>,
+  nodeIds: Set<string>,
+  diagnostics: IFormLayoutDiagnostic[],
+  fieldTabPaths: IResolvedFormLayout['fieldTabPaths'],
+): IResolvedFormLayoutTab | undefined {
+  const id = resolveId(node, indexPath);
+  if (!registerId(id, nodeIds, diagnostics)) return;
+  const tabPath = [{ tabsId, tabId: id }];
+  const children = node.children
+    .map((item, index) =>
+      resolveNode(
+        item,
+        [...indexPath, index],
+        tabPath,
+        propertyNames,
+        fieldNames,
+        nodeIds,
+        diagnostics,
+        fieldTabPaths,
+      ),
+    )
+    .filter(Boolean) as Array<
+    IResolvedFormLayoutField | IResolvedFormLayoutGroup | IResolvedFormLayoutSection
+  >;
+  return children.length ? { ...node, id, children } : undefined;
+}
+
+function resolveField(
+  node: IFormLayoutField,
+  tabPath: IResolvedFormLayout['fieldTabPaths'][string],
+  propertyNames: Set<string>,
+  fieldNames: Set<string>,
+  diagnostics: IFormLayoutDiagnostic[],
+  fieldTabPaths: IResolvedFormLayout['fieldTabPaths'],
+): IResolvedFormLayoutField | undefined {
+  if (!propertyNames.has(node.name)) {
+    diagnostics.push({ type: 'unknownField', value: node.name });
+    return;
+  }
+  if (fieldNames.has(node.name)) {
+    diagnostics.push({ type: 'duplicateField', value: node.name });
+    return;
+  }
+  fieldNames.add(node.name);
+  fieldTabPaths[node.name] = tabPath;
+  return node;
+}
+
+function resolveId(node: { type: string; id?: string }, indexPath: number[]) {
+  return node.id || `${node.type}-${indexPath.join('-')}`;
+}
+
+function registerId(id: string, ids: Set<string>, diagnostics: IFormLayoutDiagnostic[]) {
+  if (!ids.has(id)) {
+    ids.add(id);
+    return true;
+  }
+  diagnostics.push({ type: 'duplicateId', value: id });
+  return false;
+}

package/zova/src/suite-vendor/a-zova/modules/a-form/src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from './beanControllerFormBase.js';
 export * from './beanControllerPageFormBase.js';
 export * from './utils.js';
+export * from './formLayout.js';