cabloy 5.1.108 → 5.1.109

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;

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;