cabloy 5.1.98 → 5.1.99

package/zova/src/suite/cabloy-basic/modules/basic-image/src/apiSchema/image.ts

@@ -4,15 +4,21 @@ import { BeanBase } from 'zova';
 import { ApiSchema } from 'zova-module-a-api';
 
 import {
+  ApiApiImagegetUploadPolicyPath,
   ApiApiImagecreateUploadTokenPath,
   ApiApiImageuploadPath,
   ApiApiImagecreateDirectUploadPath,
+  ApiApiImagefinalizeDirectUploadPath,
   ApiApiImageuploadUrlPath,
   ApiApiImagedeliveryPath,
 } from '../api/image.js';
 
 @ApiSchema()
 export class ApiSchemaImage extends BeanBase {
+  getUploadPolicy(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiImagegetUploadPolicyPath, 'post', options);
+  }
+
   createUploadToken(options?: IApiSchemaOptions) {
     return this.$sdk.createApiSchemas(ApiApiImagecreateUploadTokenPath, 'post', options);
   }
@@ -25,6 +31,10 @@ export class ApiSchemaImage extends BeanBase {
     return this.$sdk.createApiSchemas(ApiApiImagecreateDirectUploadPath, 'post', options);
   }
 
+  finalizeDirectUpload(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiImagefinalizeDirectUploadPath, 'post', options);
+  }
+
   uploadUrl(options?: IApiSchemaOptions) {
     return this.$sdk.createApiSchemas(ApiApiImageuploadUrlPath, 'post', options);
   }

package/zova/src/suite/cabloy-basic/modules/basic-image/src/apiSchema/imageNativeImage.ts

@@ -0,0 +1,13 @@
+import type { IApiSchemaOptions } from 'zova-module-a-api';
+
+import { BeanBase } from 'zova';
+import { ApiSchema } from 'zova-module-a-api';
+
+import { ApiApiImageNativeImagedirectUploadPath } from '../api/imageNativeImage.js';
+
+@ApiSchema()
+export class ApiSchemaImageNativeImage extends BeanBase {
+  directUpload(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiImageNativeImagedirectUploadPath, 'post', options);
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-image/src/component/formFieldImage/controller.tsx

@@ -9,6 +9,7 @@ import { CircleStencil, Cropper, RectangleStencil } from 'vue-advanced-cropper';
 import { BeanControllerBase, ClientOnly, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { ZFormField } from 'zova-module-a-form';
+import { $QueryEnsureLoaded } from 'zova-module-a-model';
 import {
   buildImagePreviewTitle,
   inferImageRelationName,
@@ -17,6 +18,8 @@ import {
 } from 'zova-module-basic-image';
 
 import type { IImageTransformOptions } from '../../types/image.js';
+
+import { ModelImage } from '../../model/image.js';
 import 'vue-advanced-cropper/dist/style.css';
 
 declare module 'zova-module-a-openapi' {
@@ -55,6 +58,12 @@ export interface ControllerFormFieldImageProps extends IFormFieldComponentOption
   options?: IResourceFormFieldImageOptions;
 }
 
+interface IUploadPolicyState {
+  acceptAttr: string;
+  multiple: boolean;
+  pending: boolean;
+}
+
 interface IImagePreviewItem {
   id: TableIdentity;
   url?: string;
@@ -67,7 +76,6 @@ interface IImagePreviewItem {
 export class ControllerFormFieldImage extends BeanControllerBase {
   static $propsDefault = {
     options: {
-      accept: ['image/png', 'image/jpeg', 'image/webp'],
       maxCount: 1,
       enableCrop: true,
       cropAspectRatio: 1,
@@ -90,6 +98,10 @@ export class ControllerFormFieldImage extends BeanControllerBase {
   currentValue?: TableIdentity | TableIdentity[] | string;
   currentOptions: IResourceFormFieldImageOptions = {};
   $$formField?: ControllerFormField;
+
+  @Use()
+  $$modelImage: ModelImage;
+
   uploadedPreviewMap: Record<string, IImagePreviewItem> = {};
 
   @Use({ injectionScope: 'host' })
@@ -108,7 +120,9 @@ export class ControllerFormFieldImage extends BeanControllerBase {
           this.$$formField = $$formField;
           this.currentValue = propsBucket.value as any;
           this.currentOptions = propsBucket.options ?? {};
-          const items = this._getPreviewItems(propsBucket.value);
+          const uploadPolicyState = this._getUploadPolicyState(this.currentOptions);
+          const items = this._getPreviewItems(propsBucket.value, uploadPolicyState.multiple);
+          const maxCount = this._getMaxCount(this.currentOptions);
           const hasValidationError = !$$formField.field.state.meta.isValid;
           const cardClass = classes(
             'rounded-box border border-base-300 bg-base-100 p-4',
@@ -117,29 +131,38 @@ export class ControllerFormFieldImage extends BeanControllerBase {
           );
           return (
             <div class={cardClass}>
-              <input
-                ref={ref => {
-                  this.fileInputRef = ref as HTMLInputElement;
-                }}
-                class="hidden"
-                type="file"
-                accept={this._getAcceptAttr(propsBucket.options)}
-                multiple={!!propsBucket.options?.multiple}
-                onChange={event => {
-                  void this._handleFileChange(event, propsBucket.disableNotifyChanged);
-                }}
-              />
-              <div class="flex flex-wrap items-center gap-3">
-                <button
-                  type="button"
-                  class={classes('btn btn-primary', this.isUploading && 'btn-disabled')}
-                  onClick={() => {
-                    if (this.isUploading) return;
-                    this.fileInputRef?.click();
+              <ClientOnly>
+                <input
+                  ref={ref => {
+                    this.fileInputRef = ref as HTMLInputElement;
+                  }}
+                  class="hidden"
+                  type="file"
+                  accept={uploadPolicyState.acceptAttr}
+                  multiple={uploadPolicyState.multiple}
+                  onChange={event => {
+                    void this._handleFileChange(event, propsBucket.disableNotifyChanged);
                   }}
-                >
-                  {this._getUploadButtonText(items.length)}
-                </button>
+                />
+              </ClientOnly>
+              <div class="flex flex-wrap items-center gap-3">
+                {items.length < maxCount && (
+                  <button
+                    type="button"
+                    disabled={this.isUploading || uploadPolicyState.pending}
+                    class={classes(
+                      'btn btn-primary',
+                      (this.isUploading || uploadPolicyState.pending) && 'btn-disabled',
+                    )}
+                    onClick={() => {
+                      if (this.isUploading || uploadPolicyState.pending) return;
+                      this._applyInputPolicy(uploadPolicyState);
+                      this.fileInputRef?.click();
+                    }}
+                  >
+                    {this._getUploadButtonText(items.length, uploadPolicyState.multiple)}
+                  </button>
+                )}
                 {this.isUploading && (
                   <span class="inline-flex items-center gap-2 text-sm text-base-content/70">
                     <span class="loading loading-spinner loading-sm text-primary"></span>
@@ -266,14 +289,51 @@ export class ControllerFormFieldImage extends BeanControllerBase {
     );
   }
 
-  private _getUploadButtonText(itemCount: number) {
-    const options = this.currentOptions ?? {};
-    if (options.multiple) {
+  private _getUploadButtonText(
+    itemCount: number,
+    multiple = this._getEffectiveMultiple(this.currentOptions),
+  ) {
+    if (multiple) {
       return itemCount > 0 ? this.scope.locale.AddImage() : this.scope.locale.SelectImage();
     }
     return itemCount > 0 ? this.scope.locale.ReplaceImage() : this.scope.locale.SelectImage();
   }
 
+  private _getUploadPolicyQuery(options?: IResourceFormFieldImageOptions) {
+    return this.$$modelImage.getUploadPolicy(options?.imageScene as string | undefined);
+  }
+
+  private _getUploadPolicyState(options?: IResourceFormFieldImageOptions): IUploadPolicyState {
+    const query = this._getUploadPolicyQuery(options);
+    const policy = query?.data;
+    return {
+      acceptAttr: this._getAcceptAttr(options, policy),
+      multiple: this._getEffectiveMultiple(options, policy),
+      pending: query ? query.data === undefined && !!(query.isPending || query.isFetching) : false,
+    };
+  }
+
+  private _getCachedUploadPolicy(options?: IResourceFormFieldImageOptions) {
+    return this._getUploadPolicyQuery(options)?.data;
+  }
+
+  private async _waitForUploadPolicy(options?: IResourceFormFieldImageOptions) {
+    await $QueryEnsureLoaded(() => this._getUploadPolicyQuery(options));
+  }
+
+  private _getEffectiveMultiple(
+    options?: IResourceFormFieldImageOptions,
+    policy = this._getCachedUploadPolicy(options),
+  ) {
+    return !!(options?.multiple ?? policy?.multiple);
+  }
+
+  private _applyInputPolicy(uploadPolicyState: IUploadPolicyState) {
+    if (!this.fileInputRef) return;
+    this.fileInputRef.accept = uploadPolicyState.acceptAttr;
+    this.fileInputRef.multiple = uploadPolicyState.multiple;
+  }
+
   private async _handleFileChange(event: Event, disableNotifyChanged?: boolean) {
     const input = event.target as HTMLInputElement;
     const files = Array.from(input.files ?? []);
@@ -281,20 +341,21 @@ export class ControllerFormFieldImage extends BeanControllerBase {
     if (files.length === 0) return;
     this.errorMessage = undefined;
     const options = this.currentOptions ?? {};
-    const multiple = !!options.multiple;
-    const currentIds = this._normalizeValueToImageIds(this.currentValue, multiple);
-    const filesToHandle = options.multiple ? files : files.slice(0, 1);
-    const maxCount = this._getMaxCount(options);
-    const nextCountCandidate = options.multiple
-      ? currentIds.length + filesToHandle.length
-      : filesToHandle.length;
-    if (nextCountCandidate > maxCount) {
-      this.errorMessage = this.scope.locale.TooManyImages(maxCount);
-      return;
-    }
     const uploadTarget = this._resolveUploadTarget();
     this.isUploading = true;
     try {
+      await this._waitForUploadPolicy(options);
+      const multiple = this._getEffectiveMultiple(options);
+      const currentIds = this._normalizeValueToImageIds(this.currentValue, multiple);
+      const filesToHandle = multiple ? files : files.slice(0, 1);
+      const maxCount = this._getMaxCount(options);
+      const nextCountCandidate = multiple
+        ? currentIds.length + filesToHandle.length
+        : filesToHandle.length;
+      if (nextCountCandidate > maxCount) {
+        this.errorMessage = this.scope.locale.TooManyImages(maxCount);
+        return;
+      }
       const uploadedItems: IImagePreviewItem[] = [];
       for (const file of filesToHandle) {
         const validationMessage = this._validateFile(file, options);
@@ -324,7 +385,7 @@ export class ControllerFormFieldImage extends BeanControllerBase {
         uploadedItems.push(item);
       }
       if (uploadedItems.length === 0) return;
-      const nextIds = options.multiple
+      const nextIds = multiple
         ? [...currentIds, ...uploadedItems.map(item => item.id)]
         : [uploadedItems[uploadedItems.length - 1].id];
       this._setFieldValue(nextIds, disableNotifyChanged, multiple);
@@ -347,7 +408,7 @@ export class ControllerFormFieldImage extends BeanControllerBase {
   }
 
   private _removeItem(imageId: TableIdentity, disableNotifyChanged?: boolean) {
-    const multiple = !!this.currentOptions?.multiple;
+    const multiple = this._getEffectiveMultiple(this.currentOptions);
     const currentIds = this._normalizeValueToImageIds(this.currentValue, multiple);
     const nextIds = currentIds.filter(item => String(item) !== String(imageId));
     delete this.uploadedPreviewMap[String(imageId)];
@@ -362,12 +423,12 @@ export class ControllerFormFieldImage extends BeanControllerBase {
   ) {
     const nextValue = multiple ? imageIds : (imageIds[0] ?? '');
     this.currentValue = nextValue as any;
-    this._syncRelationField(imageIds);
+    this._syncRelationField(imageIds, multiple);
     this.$$formField?.setValue(nextValue, disableNotifyChanged);
     this.$$formField?.handleBlur();
   }
 
-  private _syncRelationField(imageIds: TableIdentity[]) {
+  private _syncRelationField(imageIds: TableIdentity[], multiple: boolean) {
     const relationName = this._getRelationName();
     if (!relationName) return;
     const relationMap = this._getRelationPreviewMap();
@@ -375,14 +436,14 @@ export class ControllerFormFieldImage extends BeanControllerBase {
       const key = String(imageId);
       return this.uploadedPreviewMap[key] ?? relationMap[key] ?? { id: imageId };
     });
-    const relationValue = this.currentOptions?.multiple
-      ? relationItems
-      : (relationItems[0] ?? undefined);
+    const relationValue = multiple ? relationItems : (relationItems[0] ?? undefined);
     this.$$renderContext.$$form.setFieldValue(relationName as never, relationValue, true);
   }
 
-  private _getPreviewItems(value: unknown) {
-    const multiple = !!this.currentOptions?.multiple;
+  private _getPreviewItems(
+    value: unknown,
+    multiple = this._getEffectiveMultiple(this.currentOptions),
+  ) {
     const imageIds = this._normalizeValueToImageIds(value, multiple);
     const relationMap = this._getRelationPreviewMap();
     if (imageIds.length === 0) {
@@ -434,15 +495,21 @@ export class ControllerFormFieldImage extends BeanControllerBase {
   }
 
   private _getMaxCount(options: IResourceFormFieldImageOptions) {
-    if (!options.multiple) return 1;
+    if (!this._getEffectiveMultiple(options)) return 1;
     return Math.max(options.maxCount ?? 1, 1);
   }
 
-  private _getAcceptAttr(options?: IResourceFormFieldImageOptions) {
+  private _getAcceptAttr(
+    options?: IResourceFormFieldImageOptions,
+    policy = this._getCachedUploadPolicy(options),
+  ) {
     if (!options) return 'image/*';
     if (typeof options.accept === 'string') return options.accept;
     if (options.accept?.length) return options.accept.join(',');
-    const parts = [...(options.mimeTypes ?? []), ...(options.extensions ?? [])];
+    const parts = [
+      ...(options.mimeTypes ?? policy?.mimeTypes ?? []),
+      ...(options.extensions ?? policy?.extensions ?? []),
+    ];
     return parts.length > 0 ? parts.join(',') : 'image/*';
   }
 
@@ -451,8 +518,9 @@ export class ControllerFormFieldImage extends BeanControllerBase {
     if (acceptTokens.length > 0 && !this._matchesAccept(file, acceptTokens)) {
       return this.scope.locale.InvalidImageType();
     }
-    if (options.maxSize && file.size > options.maxSize) {
-      return this.scope.locale.ImageTooLarge(this._formatBytes(options.maxSize));
+    const maxSize = options.maxSize ?? this._getCachedUploadPolicy(options)?.maxSize;
+    if (typeof maxSize === 'number' && file.size > maxSize) {
+      return this.scope.locale.ImageTooLarge(this._formatBytes(maxSize));
     }
     if (options.minSize && file.size < options.minSize) {
       return this.scope.locale.ImageTooSmall(this._formatBytes(options.minSize));
@@ -466,7 +534,12 @@ export class ControllerFormFieldImage extends BeanControllerBase {
         ? options.accept
         : options.accept.split(',')
       : [];
-    return [...accept, ...(options.mimeTypes ?? []), ...(options.extensions ?? [])]
+    const policy = this._getCachedUploadPolicy(options);
+    return [
+      ...accept,
+      ...(options.mimeTypes ?? policy?.mimeTypes ?? []),
+      ...(options.extensions ?? policy?.extensions ?? []),
+    ]
       .map(item => item.trim().toLowerCase())
       .filter(item => !!item);
   }

package/zova/src/suite/cabloy-basic/modules/basic-image/src/model/image.ts

@@ -0,0 +1,23 @@
+import type { IDecoratorModelOptions } from 'zova-module-a-model';
+
+import { BeanModelBase, Model } from 'zova-module-a-model';
+
+import type { ApiApiImagegetUploadPolicyResponseBody } from '../api/image.js';
+
+export interface IModelOptionsImage extends IDecoratorModelOptions {}
+
+@Model<IModelOptionsImage>()
+export class ModelImage extends BeanModelBase {
+  getUploadPolicy(imageScene?: string) {
+    if (!imageScene) return undefined;
+    return this.$useStateData<ApiApiImagegetUploadPolicyResponseBody>({
+      queryKey: ['uploadPolicy', 'image', imageScene],
+      queryFn: async () => {
+        return this.scope.api.image.getUploadPolicy({ imageScene });
+      },
+      meta: {
+        disableSuspenseOnInit: true,
+      },
+    });
+  }
+}

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

@@ -14,7 +14,7 @@ import { VNode } from 'vue';
 import { BeanControllerBase, deepEqual } from 'zova';
 import { ZovaJsx } from 'zova-jsx';
 import { Controller } from 'zova-module-a-bean';
-import { $QueriesAutoLoad } from 'zova-module-a-model';
+import { $QueriesEnsureLoaded } from 'zova-module-a-model';
 import { BeanControllerTableBase } from 'zova-module-a-table';
 import { ModelResource } from 'zova-module-rest-resource';
 
@@ -38,7 +38,9 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
 
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
 
-  tableRef: BeanControllerTableBase<TData>;
+  tableRef: BeanControllerTableBase<TData> | undefined;
+  private _tableMetaRefreshPending = false;
+  private _tableMetaRefreshTask: Promise<void> | undefined;
 
   jsxZova: ZovaJsx;
   jsxCelScope: IPageScope;
@@ -65,7 +67,7 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
       return Object.assign({}, this.queryFilterData, this.queryPaged);
     });
     // load schema/data
-    await $QueriesAutoLoad(
+    await $QueriesEnsureLoaded(
       () => this.$$modelResource.apiSchemasSelect.sdk,
       () => this.queryData,
     );
@@ -74,7 +76,7 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
       () => this.permissions,
       async (newValue, oldValue) => {
         if (deepEqual(newValue, oldValue)) return;
-        await this.tableRef?.refreshMeta();
+        await this._requestTableMetaRefresh();
       },
     );
   }
@@ -123,6 +125,44 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
     this.queryFilterData = data;
   }
 
+  public setTableRef(tableRef: BeanControllerTableBase<TData> | undefined) {
+    this.tableRef = tableRef;
+    if (!tableRef || !this._tableMetaRefreshPending) return;
+    this._scheduleTableMetaRefresh();
+  }
+
+  private _scheduleTableMetaRefresh() {
+    void this._flushTableMetaRefresh().catch(err => {
+      this.$errorHandler(err, 'ControllerBlockPage.setTableRef');
+    });
+  }
+
+  private async _requestTableMetaRefresh() {
+    this._tableMetaRefreshPending = true;
+    await this._flushTableMetaRefresh();
+  }
+
+  private async _flushTableMetaRefresh() {
+    if (this._tableMetaRefreshTask) return await this._tableMetaRefreshTask;
+    const task = (async () => {
+      while (this._tableMetaRefreshPending) {
+        const tableRef = this.tableRef;
+        if (!tableRef) return;
+        this._tableMetaRefreshPending = false;
+        await tableRef.refreshMeta();
+      }
+    })();
+    this._tableMetaRefreshTask = task;
+    try {
+      await task;
+    } finally {
+      this._tableMetaRefreshTask = undefined;
+      if (this._tableMetaRefreshPending && this.tableRef) {
+        this._scheduleTableMetaRefresh();
+      }
+    }
+  }
+
   private _prepareJsx() {
     const jsxCelEnv = celEnvBase.clone();
     this.jsxZova = this.bean._newBeanSimple(ZovaJsx, false, undefined, jsxCelEnv);

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

@@ -3,7 +3,8 @@ import type { IJsxRenderContextPage, IResourceBlockOptionsBase } from 'zova-modu
 
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
-import { BeanControllerTableBase, ZTable } from 'zova-module-a-table';
+import { BeanControllerTableBase } from 'zova-module-a-table';
+import { ZTable } from 'zova-module-basic-table';
 
 declare module 'zova-module-a-openapi' {
   export interface IResourceBlockRecord {
@@ -15,7 +16,10 @@ export interface ControllerBlockTableProps extends IResourceBlockOptionsBase {}
 
 @Controller()
 export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerBase {
-  static $propsDefault = {};
+  static $propsDefault = {
+    class: 'overflow-x-auto rounded-box border border-base-content/15 bg-base-100',
+  };
+
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
 
   tableRef: BeanControllerTableBase<TData>;
@@ -32,16 +36,17 @@ export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerB
   protected render() {
     const { $$page } = this.$$renderContext;
     return (
-      <ZTable<TData>
-        class={this.$props.class}
-        controllerRef={ref => {
-          this.tableRef = ref;
-          $$page.tableRef = ref as unknown as BeanControllerTableBase<{}>;
-        }}
-        data={$$page.data as unknown as TData[]}
-        schema={$$page.schemaRow}
-        tableScope={$$page.jsxCelScope}
-      ></ZTable>
+      <div class={this.$props.class}>
+        <ZTable<TData>
+          tableRef={ref => {
+            this.tableRef = ref;
+            $$page.setTableRef(ref as unknown as BeanControllerTableBase<{}> | undefined);
+          }}
+          data={$$page.data as unknown as TData[]}
+          schema={$$page.schemaRow}
+          tableScope={$$page.jsxCelScope}
+        ></ZTable>
+      </div>
     );
   }
 }

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

@@ -22,7 +22,7 @@ import {
   formMetaFromFormScene,
   TypeFormOnSubmitData,
 } from 'zova-module-a-form';
-import { $QueriesAutoLoad } from 'zova-module-a-model';
+import { $QueriesEnsureLoaded } from 'zova-module-a-model';
 import { ModelResource } from 'zova-module-rest-resource';
 
 declare module 'zova-module-a-openapi' {
@@ -81,7 +81,7 @@ export class ControllerBlockPageEntry<TData extends {} = {}> extends BeanControl
     // jsx
     this._prepareJsx();
     // load schema/data
-    await $QueriesAutoLoad(
+    await $QueriesEnsureLoaded(
       () => this.$$modelResource.getFormApiSchemas(this.formMeta)?.sdk,
       () => this.queryData,
     );

package/zova/src/suite/cabloy-basic/modules/basic-resource/src/component/formFieldResourcePicker/controller.tsx

@@ -6,7 +6,7 @@ import { classes } from 'typestyle';
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { ZFormField, ZFormFieldPreset } from 'zova-module-a-form';
-import { $QueryAutoLoad } from 'zova-module-a-model';
+import { $QueryEnsureLoaded } from 'zova-module-a-model';
 import { ZSelect, ZSelectProps } from 'zova-module-basic-select';
 import { ModelResource } from 'zova-module-rest-resource';
 
@@ -52,7 +52,7 @@ export class ControllerFormFieldResourcePicker extends BeanControllerBase {
       this.resource,
     );
     // load data
-    await $QueryAutoLoad(() => this.queryData);
+    await $QueryEnsureLoaded(() => this.queryData);
   }
 
   get resource() {

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

@@ -1,11 +1,16 @@
-import type { ControllerTableProps as ControllerTablePropsSuper } from 'zova-module-a-table';
+import type {
+  BeanControllerTableBase,
+  ControllerTableProps as ControllerTablePropsSuper,
+} from 'zova-module-a-table';
 
 import { BeanControllerBase } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 
 export interface ControllerTableProps<
   TData extends {} = {},
-> extends ControllerTablePropsSuper<TData> {}
+> extends ControllerTablePropsSuper<TData> {
+  tableRef?: (ref: BeanControllerTableBase<TData>) => void;
+}
 
 @Controller()
 export class ControllerTable extends BeanControllerBase {

package/zova/src/suite/cabloy-basic/modules/basic-table/src/component/table/render.tsx

@@ -9,6 +9,9 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
     return (
       <ZTable
         {...this.$props}
+        controllerRef={ref => {
+          this.$props?.tableRef?.(ref);
+        }}
         slotDefault={$$table => {
           return this._renderTable($$table);
         }}
@@ -19,42 +22,40 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
   public _renderTable($$table: ControllerTable<TData>) {
     const table = $$table.table;
     return (
-      <div class="overflow-x-auto">
-        <table class="table">
-          <thead>
-            <tr>
-              {table.getFlatHeaders().map(header => {
-                return (
-                  <th key={header.id}>
-                    <FlexRender
-                      render={header.column.columnDef.header}
-                      props={header.getContext()}
-                    ></FlexRender>
-                  </th>
-                );
-              })}
-            </tr>
-          </thead>
-          <tbody>
-            {table.getRowModel().rows.map(row => {
+      <table class="table">
+        <thead>
+          <tr>
+            {table.getFlatHeaders().map(header => {
               return (
-                <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => {
-                    return (
-                      <td key={cell.id}>
-                        <FlexRender
-                          render={cell.column.columnDef.cell}
-                          props={cell.getContext()}
-                        ></FlexRender>
-                      </td>
-                    );
-                  })}
-                </tr>
+                <th key={header.id}>
+                  <FlexRender
+                    render={header.column.columnDef.header}
+                    props={header.getContext()}
+                  ></FlexRender>
+                </th>
               );
             })}
-          </tbody>
-        </table>
-      </div>
+          </tr>
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map(row => {
+            return (
+              <tr key={row.id}>
+                {row.getVisibleCells().map(cell => {
+                  return (
+                    <td key={cell.id}>
+                      <FlexRender
+                        render={cell.column.columnDef.cell}
+                        props={cell.getContext()}
+                      ></FlexRender>
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
     );
   }
 }

package/zova/src/suite/cabloy-basic/package.json

@@ -15,6 +15,7 @@
     "zova-module-basic-currency": "^5.1.15",
     "zova-module-basic-date": "^5.0.6",
     "zova-module-basic-details": "^5.0.0",
+    "zova-module-basic-file": "^5.0.0",
     "zova-module-basic-form": "^5.0.7",
     "zova-module-basic-image": "^5.0.0",
     "zova-module-basic-input": "^5.0.7",

package/zova/src/suite-vendor/a-cabloy/modules/rest-resource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-rest-resource",
-  "version": "5.1.40",
+  "version": "5.1.41",
   "gitHead": "4dece229b6d3f4735930e833afcb4b95ec51bf86",
   "description": "",
   "keywords": [