cabloy 5.1.174 → 5.1.175

package/vona/packages-vona/vona-core/src/lib/utils/util.ts

@@ -183,6 +183,7 @@ export class AppUtil extends BeanSimple {
   createError(data, returnObject?: boolean) {
     const error = returnObject ? ({} as any) : new Error();
     error.code = data.code !== undefined ? data.code : 500;
+    if (data.status !== undefined) error.status = data.status;
     if (data.message && typeof data.message === 'object') {
       error.message = JSON.stringify(data.message, null, 2);
     } else {

package/vona/packages-vona/vona-mock/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-mock",
-  "version": "6.1.38",
+  "version": "6.1.39",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona mock",
   "keywords": [

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

@@ -541,7 +541,7 @@ describe('student.test.ts', { concurrency: false }, () => {
         const deleted = await app.bean.executor.performAction(
           'post',
           '/training/student/bulk/delete',
-          { body: { ids: [studentId, studentId, '__missing-student__'] } },
+          { body: { ids: [studentId, studentId, '-1'] } },
         );
         assert.equal(deleted, null);
         assert.equal(

package/vona/src/suite-vendor/a-cabloy/modules/a-layoutprofile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-module-a-layoutprofile",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "",
   "keywords": [
     "Vona Module"

package/vona/src/suite-vendor/a-cabloy/modules/a-layoutprofile/test/layoutprofile.test.ts

@@ -4,6 +4,7 @@ import { catchError } from '@cabloy/utils';
 import assert from 'node:assert';
 import { randomUUID } from 'node:crypto';
 import { describe, it } from 'node:test';
+import { isDeepStrictEqual } from 'node:util';
 import { app } from 'vona-mock';
 
 import type { ILayoutProfile } from '../src/types/layoutprofile.ts';
@@ -200,9 +201,7 @@ describe('layoutprofile.test.ts', { concurrency: false }, () => {
         });
       });
       assert.equal(persisted.length, 1);
-      assert.ok(
-        profiles.some(profile => JSON.stringify(profile) === JSON.stringify(persisted[0].profile)),
-      );
+      assert.ok(profiles.some(profile => isDeepStrictEqual(profile, persisted[0].profile)));
 
       const loaded = await app.bean.executor.mockCtx(async () => {
         return await performAs(fixture.token, 'get', `${actionPath}/load`, {

package/vona/src/suite-vendor/a-cabloy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-suite-a-cabloy",
-  "version": "5.1.53",
+  "version": "5.1.54",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "author": "",
@@ -8,7 +8,7 @@
   "type": "module",
   "dependencies": {
     "vona-module-a-cabloy": "workspace:^",
-    "vona-module-a-layoutprofile": "^5.0.1",
+    "vona-module-a-layoutprofile": "^5.0.2",
     "vona-module-a-markdown": "^5.0.3",
     "vona-module-a-rbac": "^5.0.6",
     "vona-module-a-socket": "workspace:^",

package/vona/src/suite-vendor/a-vona/modules/a-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-module-a-core",
-  "version": "5.1.52",
+  "version": "5.1.53",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "keywords": [

package/vona/src/suite-vendor/a-vona/modules/a-executor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-module-a-executor",
-  "version": "5.1.16",
+  "version": "5.1.17",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "keywords": [

package/vona/src/suite-vendor/a-vona/modules/a-executor/src/service/executor.ts

@@ -64,10 +64,15 @@ export class ServiceExecutor extends BeanBase {
             throw app.util.createError(ctx.body);
           }
           if (ctx.body && typeof ctx.body === 'object') {
-            throw app.util.createError(ctx.body);
+            throw app.util.createError({
+              ...ctx.body,
+              status: ctx.status,
+              code: (ctx.body as { code?: unknown }).code ?? ctx.status,
+            });
           }
           throw app.util.createError({
             code: ctx.status,
+            status: ctx.status,
             message: ctx.message,
           });
         },

package/vona/src/suite-vendor/a-vona/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-suite-a-vona",
-  "version": "5.1.86",
+  "version": "5.1.87",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "author": "",

package/zova/package.original.json

@@ -74,7 +74,7 @@
     "zova": "workspace:^"
   },
   "devDependencies": {
-    "@cabloy/lint": "^5.1.33",
+    "@cabloy/lint": "^5.1.35",
     "@cabloy/openapi-typescript": "^7.9.2",
     "@quasar/app-vite": "npm:@cabloy/quasar-app-vite@^2.5.10",
     "@types/node": "^22.19.17",

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

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

package/zova/src/suite/a-commerce/modules/commerce-catalog/src/page/product/controller.tsx

@@ -5,6 +5,7 @@ import { z } from 'zod';
 import { BeanControllerPageBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ZButton } from 'zova-module-basic-button';
 import { ZMarkdownHtml } from 'zova-module-basic-markdown';
 import { ZPage } from 'zova-module-home-base';
 
@@ -88,12 +89,12 @@ export class ControllerPageProduct extends BeanControllerPageBase {
                       <span class="badge badge-success">
                         {this.scope.locale.AvailableCount(sku.available)}
                       </span>
-                      <button
+                      <ZButton
                         class="btn btn-primary btn-sm"
-                        onClick={() => this.addItem(String(sku.id))}
+                        onPerform={() => this.addItem(String(sku.id))}
                       >
                         {this.scope.locale.AddToCart()}
-                      </button>
+                      </ZButton>
                     </div>
                   ))}
                 </div>

package/zova/src/suite/a-commerce/modules/commerce-member/src/page/address/controller.tsx

@@ -7,6 +7,7 @@ import { BeanControllerPageBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { ZForm } from 'zova-module-a-form';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ZButton } from 'zova-module-basic-button';
 import { ZPage } from 'zova-module-home-base';
 
 import type {
@@ -127,12 +128,12 @@ export class ControllerPageAddress extends BeanControllerPageBase {
                         <button class="btn btn-outline btn-sm" onClick={() => this.edit(item)}>
                           {this.scope.locale.EditAddress()}
                         </button>
-                        <button
+                        <ZButton
                           class="btn btn-error btn-outline btn-sm"
-                          onClick={() => this.delete(item)}
+                          onPerform={() => this.delete(item)}
                         >
                           {this.scope.locale.DeleteAddress()}
-                        </button>
+                        </ZButton>
                       </div>
                     </div>
                     <p>{item.addressLine1}</p>

package/zova/src/suite/a-commerce/modules/commerce-trade/src/component/tableCellActionAdjustStock/controller.tsx

@@ -7,6 +7,7 @@ import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { ZForm } from 'zova-module-a-form';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ZButton } from 'zova-module-basic-button';
 
 import type { ApiApiCommerceTradeStockBalanceadjustStockRequestBody } from '../../api/commerceTradeStockBalance.js';
 import type { ITableCellOptionsActionAdjustStock } from '../../bean/tableCell.actionAdjustStock.js';
@@ -130,9 +131,9 @@ export class ControllerTableCellActionAdjustStock extends BeanControllerBase {
   protected render() {
     const props = this.$props as ControllerTableCellActionAdjustStockProps;
     return (
-      <button class={props.class} type="button" onClick={() => this._openDialog()}>
+      <ZButton class={props.class} onPerform={() => this._openDialog()}>
         {this.scope.locale.AdjustStock()}
-      </button>
+      </ZButton>
     );
   }
 }

package/zova/src/suite/a-commerce/modules/commerce-trade/src/component/tableCellActionRefund/controller.tsx

@@ -4,6 +4,7 @@ import type { ModelPayMockPayment } from 'zova-module-pay-mock';
 
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
+import { ZButton } from 'zova-module-basic-button';
 
 import type {
   ApiSchemaCommerceTradeDtoOrderSelectResItem,
@@ -118,22 +119,20 @@ export class ControllerTableCellActionRefund extends BeanControllerBase {
               <button class="btn btn-ghost" type="button" onClick={dialog.close}>
                 {this.scope.locale.Cancel()}
               </button>
-              <button
+              <ZButton
                 class="btn btn-error"
-                type="button"
                 disabled={disabled}
-                onClick={() => this._submitDecision(false, dialog.close)}
+                onPerform={() => this._submitDecision(false, dialog.close)}
               >
                 {this.scope.locale.RejectRefund()}
-              </button>
-              <button
+              </ZButton>
+              <ZButton
                 class="btn btn-warning"
-                type="button"
                 disabled={disabled}
-                onClick={() => this._submitDecision(true, dialog.close)}
+                onPerform={() => this._submitDecision(true, dialog.close)}
               >
                 {this.scope.locale.ApproveRefund()}
-              </button>
+              </ZButton>
             </>
           );
         },
@@ -397,14 +396,13 @@ export class ControllerTableCellActionRefund extends BeanControllerBase {
                           )}
                         {(recoveryData.recoveryDisposition === 'query_only' ||
                           recoveryData.recoveryDisposition === 'reconcile_only') && (
-                          <button
+                          <ZButton
                             class="btn btn-outline btn-sm mt-2"
-                            type="button"
                             disabled={this._recoveryActionPending}
-                            onClick={() => this._reconcile()}
+                            onPerform={() => this._reconcile()}
                           >
                             {this.scope.locale.ReconcileProviderRefund()}
-                          </button>
+                          </ZButton>
                         )}
                         {recoveryData.recoveryDisposition === 'retry_same_key' && (
                           <>
@@ -419,14 +417,13 @@ export class ControllerTableCellActionRefund extends BeanControllerBase {
                                 {this.scope.locale.AcknowledgeRefundRetryRisk()}
                               </span>
                             </label>
-                            <button
+                            <ZButton
                               class="btn btn-warning btn-sm"
-                              type="button"
                               disabled={this._recoveryActionPending}
-                              onClick={() => this._retry()}
+                              onPerform={() => this._retry()}
                             >
                               {this.scope.locale.RetryRefund()}
-                            </button>
+                            </ZButton>
                           </>
                         )}
                       </>
@@ -444,14 +441,13 @@ export class ControllerTableCellActionRefund extends BeanControllerBase {
               <button class="btn btn-ghost" type="button" onClick={dialog.close}>
                 {this.scope.locale.Cancel()}
               </button>
-              <button
+              <ZButton
                 class="btn btn-warning"
-                type="button"
                 disabled={disabled}
-                onClick={() => this._execute(dialog.close)}
+                onPerform={() => this._execute(dialog.close)}
               >
                 {this.scope.locale.ExecuteRefund()}
-              </button>
+              </ZButton>
             </>
           );
         },

package/zova/src/suite/a-commerce/modules/commerce-trade/src/component/tableCellActionShip/controller.tsx

@@ -3,6 +3,7 @@ import type { IJsxRenderContextTableCell } from 'zova-module-a-table';
 
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
+import { ZButton } from 'zova-module-basic-button';
 
 import type { ITableCellOptionsActionShip } from '../../bean/tableCell.actionShip.js';
 import type { ModelOrder } from '../../model/order.js';
@@ -57,9 +58,9 @@ export class ControllerTableCellActionShip extends BeanControllerBase {
           />
           <span class="label-text text-xs">{this.scope.locale.Confirm()}</span>
         </label>
-        <button class={props.class} type="button" onClick={() => this._ship()}>
+        <ZButton class={props.class} onPerform={() => this._ship()}>
           {this.scope.locale.ShipOrder()}
-        </button>
+        </ZButton>
       </div>
     );
   }

package/zova/src/suite/a-commerce/modules/commerce-trade/src/page/cart/controller.tsx

@@ -3,6 +3,7 @@ import { z } from 'zod';
 import { BeanControllerPageBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ZButton } from 'zova-module-basic-button';
 import { ZPage } from 'zova-module-home-base';
 
 import { ModelCart } from '../../model/cart.js';
@@ -62,9 +63,9 @@ export class ControllerPageCart extends BeanControllerPageBase {
                   <RouterLink class="btn btn-primary btn-sm" to={this._getCheckoutPagePath()}>
                     {this.scope.locale.Checkout()}
                   </RouterLink>
-                  <button class="btn btn-outline btn-sm" onClick={() => this.clear()}>
+                  <ZButton class="btn btn-outline btn-sm" onPerform={() => this.clear()}>
                     {this.scope.locale.ClearCart()}
-                  </button>
+                  </ZButton>
                 </>
               )}
             </div>
@@ -93,12 +94,12 @@ export class ControllerPageCart extends BeanControllerPageBase {
                           onChange={(event: Event) => this.updateQuantity(String(item.id), event)}
                         />
                       </label>
-                      <button
+                      <ZButton
                         class="btn btn-error btn-outline btn-sm"
-                        onClick={() => this.deleteItem(String(item.id))}
+                        onPerform={() => this.deleteItem(String(item.id))}
                       >
                         {this.scope.locale.RemoveCartItem()}
-                      </button>
+                      </ZButton>
                     </div>
                   </div>
                 </article>

package/zova/src/suite/a-commerce/modules/commerce-trade/src/page/checkout/controller.tsx

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { BeanControllerPageBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { $QueriesEnsureLoaded } from 'zova-module-a-model';
+import { ZButton } from 'zova-module-basic-button';
 import { ModelAddressMine } from 'zova-module-commerce-member';
 import { ModelCoupon } from 'zova-module-commerce-promotion';
 import { ZPage } from 'zova-module-home-base';
@@ -57,7 +58,7 @@ export class ControllerPageCheckout extends BeanControllerPageBase {
         correlationId: `${Date.now()}-${Math.random().toString(36).slice(2, 12)}`,
         providerCandidateKey: this.providerCandidateKey,
       });
-      this.$router.push(
+      await this.$router.push(
         this.$router.getPagePath('/commerce/trade/payment/:paymentSessionId/:orderId', {
           params: {
             paymentSessionId: String(result.paymentSessionId),
@@ -139,13 +140,13 @@ export class ControllerPageCheckout extends BeanControllerPageBase {
                 </label>
               ))}
             </fieldset>
-            <button
+            <ZButton
               class="btn btn-primary"
               disabled={!this.addressId || !this.providerCandidateKey || this.submitting}
-              onClick={() => this.checkout()}
+              onPerform={() => this.checkout()}
             >
               {this.scope.locale.CreateOrder()}
-            </button>
+            </ZButton>
           </div>
         </section>
       </ZPage>

package/zova/src/suite/a-commerce/modules/commerce-trade/src/page/order/controller.tsx

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { BeanControllerPageBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
+import { ZButton } from 'zova-module-basic-button';
 import { ZPage } from 'zova-module-home-base';
 
 import { ModelOrderMine } from '../../model/orderMine.js';
@@ -101,14 +102,13 @@ export class ControllerPageOrder extends BeanControllerPageBase {
                       placeholder={this.scope.locale.RefundReason()}
                       v-model={this.refundReason}
                     />
-                    <button
+                    <ZButton
                       class="btn btn-outline btn-warning self-start"
-                      type="button"
                       disabled={!this.refundReason.trim() || this.mutationRequestRefund.isPending}
-                      onClick={() => this._requestRefund()}
+                      onPerform={() => this._requestRefund()}
                     >
                       {this.scope.locale.RequestRefund()}
-                    </button>
+                    </ZButton>
                   </div>
                 </article>
               )}

package/zova/src/suite/a-demo/modules/demo-basic/src/page/controllerBoundary/controller.tsx

@@ -74,12 +74,12 @@ export class ControllerPageControllerBoundary extends BeanControllerPageBase {
   }
 
   mountOverrideFailingProbe() {
-    this.overrideProbe = { mode: 'failure', delayMs: 800 };
+    this.overrideProbe = { mode: 'failure', delayMs: 2_000 };
     this.overrideProbeKey++;
   }
 
   recoverOverrideWithDelayedSuccess() {
-    this.overrideProbe = { mode: 'success', delayMs: 800 };
+    this.overrideProbe = { mode: 'success', delayMs: 2_000 };
     this.overrideProbeKey++;
   }
 

package/zova/src/suite/a-training/modules/training-student/src/bean/tableCell.actionDeleteForce.tsx

@@ -8,6 +8,7 @@ import type {
 import { TableIdentity } from 'table-identity';
 import { BeanBase } from 'zova';
 import { TableCell } from 'zova-module-a-table';
+import { ZButton } from 'zova-module-basic-button';
 
 import type { ModelStudent } from '../model/student.js';
 
@@ -30,10 +31,9 @@ export class TableCellActionDeleteForce extends BeanBase implements ITableCellRe
   ) {
     const { $host, cellContext, ctx } = renderContext;
     return (
-      <button
+      <ZButton
         class={options.class}
-        type="button"
-        onClick={async () => {
+        onPerform={async () => {
           const confirmed = await $host.$performCommand('basic-commands:confirm', {
             text: this.scope.locale.ForceDeleteConfirm(),
           });
@@ -47,7 +47,7 @@ export class TableCellActionDeleteForce extends BeanBase implements ITableCellRe
         }}
       >
         {this.scope.locale.ForceDelete()}
-      </button>
+      </ZButton>
     );
   }
 }

package/zova/src/suite/a-training/modules/training-student/src/bean/tableCell.actionSummary.tsx

@@ -9,6 +9,7 @@ import type { ModelStudent } from 'zova-module-training-student';
 
 import { BeanBase } from 'zova';
 import { TableCell } from 'zova-module-a-table';
+import { ZButton } from 'zova-module-basic-button';
 import { ZMarkdownHtml } from 'zova-module-basic-markdown';
 
 declare module 'zova-module-a-openapi' {
@@ -30,10 +31,9 @@ export class TableCellActionSummary extends BeanBase implements ITableCellRender
   ) {
     const { $host, cellContext, ctx } = renderContext;
     return (
-      <button
+      <ZButton
         class={options.class}
-        type="button"
-        onClick={async () => {
+        onPerform={async () => {
           const id = cellContext.row.id as TableIdentity;
           const modelStudent = (await ctx.bean._getBean(
             'training-student.model.student',
@@ -84,7 +84,7 @@ export class TableCellActionSummary extends BeanBase implements ITableCellRender
         }}
       >
         {this.scope.locale.Summary()}
-      </button>
+      </ZButton>
     );
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-app/src/monkey.ts

@@ -4,6 +4,9 @@ import type { BeanBase, BeanContainer, IMonkeyBeanInit, IMonkeyModule } from 'zo
 import { BeanSimple } from 'zova';
 
 import type { ServiceAppModal } from './service/appModal.js';
+import type { IRoutedDialogContext } from './types/appModal.js';
+
+import { routedDialogContextKey } from './types/appModal.js';
 
 export class Monkey extends BeanSimple implements IMonkeyModule, IMonkeyBeanInit {
   private _moduleSelf: IModule;
@@ -30,6 +33,14 @@ export class Monkey extends BeanSimple implements IMonkeyModule, IMonkeyBeanInit
         return self._serviceAppModal;
       },
     });
+    Object.defineProperty(beanInstance, '$routedDialog', {
+      enumerable: false,
+      configurable: true,
+      get: () =>
+        bean._getBeanFromHost<IRoutedDialogContext>({
+          name: routedDialogContextKey,
+        }),
+    });
   }
 
   private async _loadServiceAppModal() {

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

@@ -188,5 +188,6 @@ export type IModalItem =
 declare module 'zova' {
   export interface BeanBase {
     $appModal: ServiceAppModal;
+    $routedDialog: IRoutedDialogContext | undefined;
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-app/test/lib/routedDialogContext.test.ts

@@ -0,0 +1,60 @@
+import type { IModule } from '@cabloy/module-info';
+import type { BeanBase, BeanContainer } from 'zova';
+
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import type { IRoutedDialogContext } from '../../src/types/appModal.js';
+
+import { Monkey } from '../../src/monkey.js';
+import { routedDialogContextKey } from '../../src/types/appModal.js';
+
+function createBean() {
+  const lookups: string[] = [];
+  let context: IRoutedDialogContext | undefined;
+  const beanContainer = {
+    defineProperty<T>(beanInstance: T, prop: string, attributes: PropertyDescriptor) {
+      return Object.defineProperty(beanInstance, prop, attributes);
+    },
+    _getBeanFromHost<T>({ name }: { name: string }) {
+      lookups.push(name);
+      return context as T | undefined;
+    },
+  } as unknown as BeanContainer;
+  const beanInstance = {} as BeanBase;
+  const monkey = new Monkey({} as IModule);
+
+  return {
+    beanInstance,
+    beanContainer,
+    lookups,
+    monkey,
+    setContext(value: IRoutedDialogContext | undefined) {
+      context = value;
+    },
+  };
+}
+
+test('routed dialog bean property always reads the current host context', async () => {
+  const { beanInstance, beanContainer, lookups, monkey, setContext } = createBean();
+  await monkey.beanInit(beanContainer, beanInstance);
+
+  assert.equal(beanInstance.$routedDialog, undefined);
+
+  const firstContext = {} as IRoutedDialogContext;
+  setContext(firstContext);
+  assert.equal(beanInstance.$routedDialog, firstContext);
+
+  const secondContext = {} as IRoutedDialogContext;
+  setContext(secondContext);
+  assert.equal(beanInstance.$routedDialog, secondContext);
+
+  setContext(undefined);
+  assert.equal(beanInstance.$routedDialog, undefined);
+  assert.deepEqual(lookups, [
+    routedDialogContextKey,
+    routedDialogContextKey,
+    routedDialogContextKey,
+    routedDialogContextKey,
+  ]);
+});

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/tableCell.actionUpdate.tsx

@@ -10,6 +10,7 @@ import { BeanBase, deepExtend } from 'zova';
 import { TypeFormOnSubmitData } from 'zova-module-a-form';
 import { IIconRecord, ZIcon } from 'zova-module-a-icon';
 import { TableCell } from 'zova-module-a-table';
+import { ZButton } from 'zova-module-basic-button';
 
 import { ServiceDetail } from '../service/detail.jsx';
 import { IDialogFormOptions } from '../types/dialogForm.js';
@@ -35,10 +36,9 @@ export class TableCellActionUpdate extends BeanBase implements ITableCellRender
   ) {
     const { ctx, $celScope, cellContext } = renderContext;
     return (
-      <button
+      <ZButton
         class={options.class}
-        type="button"
-        onClick={async () => {
+        onPerform={async () => {
           const $$details = $celScope.$$details;
           if (!$$details) throw new Error('should provide $$details in cell scope');
           const detailItem = cellContext.row.original as Record<string, any>;
@@ -68,7 +68,7 @@ export class TableCellActionUpdate extends BeanBase implements ITableCellRender
         }}
       >
         <ZIcon name="::draft" width={24}></ZIcon>
-      </button>
+      </ZButton>
     );
   }
 }