cabloy 5.1.62 → 5.1.63

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 5.1.63
+
+### Features
+
+- Add the `basic-app` modal module.
+- Add update functionality.
+
+### Improvements
+
+- Update the force-delete action modal flow.
+- Unify modal command usage.
+- Migrate remaining confirmation dialogs to `basic-app`.
+
 ## 5.1.62
 
 ### Features

package/cabloy-docs/frontend/form-guide.md

@@ -276,8 +276,11 @@ Use `onShowError` when you want a centralized user-facing error handler.
 
 ```tsx
 <ZForm
-  onShowError={({ error }) => {
-    window.alert(error.message);
+  onShowError={async ({ error }) => {
+    await this.$performCommand('basic-commands:alert', {
+      type: 'error',
+      text: error.message,
+    });
   }}
 ></ZForm>
 ```
@@ -583,8 +586,11 @@ Once the Student model side is prepared, the render side can stay thin:
   formMeta={this.studentFormMeta}
   formProvider={this.studentFormProvider}
   onSubmitData={data => this.submitStudent(data)}
-  onShowError={({ error }) => {
-    window.alert(error.message);
+  onShowError={async ({ error }) => {
+    await this.$performCommand('basic-commands:alert', {
+      type: 'error',
+      text: error.message,
+    });
   }}
 ></ZForm>
 ```

package/cabloy-docs/frontend/table-cell-cookbook.md

@@ -310,7 +310,10 @@ export class TableCellActionDelete extends BeanBase implements ITableCellRender
         class={options.class}
         type="button"
         onClick={async () => {
-          if (!window.confirm(this.scope.locale.DeleteConfirm())) return;
+          const confirmed = await $host.$performCommand('basic-commands:confirm', {
+            text: this.scope.locale.DeleteConfirm(),
+          });
+          if (!confirmed) return;
           await $host.$performCommand('basic-commands:delete', options, renderContext);
         }}
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabloy",
-  "version": "5.1.62",
+  "version": "5.1.63",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A Node.js fullstack framework",
   "keywords": [

package/zova/pnpm-lock.yaml

@@ -213,6 +213,9 @@ importers:
       zova-module-basic-adapter:
         specifier: workspace:^
         version: link:src/suite/cabloy-basic/modules/basic-adapter
+      zova-module-basic-app:
+        specifier: workspace:^
+        version: link:src/suite/cabloy-basic/modules/basic-app
       zova-module-basic-captcha:
         specifier: workspace:^
         version: link:src/suite/cabloy-basic/modules/basic-captcha
@@ -807,7 +810,7 @@ importers:
         specifier: ^5.1.57
         version: link:../zova-core
       zova-suite-a-zova:
-        specifier: ^5.1.102
+        specifier: ^5.1.103
         version: link:../../src/suite-vendor/a-zova
     devDependencies:
       clean-package:
@@ -986,7 +989,7 @@ importers:
         specifier: ^5.1.29
         version: link:modules/a-style
       zova-module-a-table:
-        specifier: ^5.1.31
+        specifier: ^5.1.32
         version: link:modules/a-table
       zova-module-a-zod:
         specifier: ^5.1.30
@@ -1550,6 +1553,9 @@ importers:
       zova-module-basic-adapter:
         specifier: ^5.0.5
         version: link:modules/basic-adapter
+      zova-module-basic-app:
+        specifier: ^5.0.0
+        version: link:modules/basic-app
       zova-module-basic-captcha:
         specifier: ^5.0.8
         version: link:modules/basic-captcha
@@ -1599,6 +1605,15 @@ importers:
         specifier: ^6.1.3
         version: 6.1.3
 
+  src/suite/cabloy-basic/modules/basic-app:
+    devDependencies:
+      clean-package:
+        specifier: ^2.2.0
+        version: 2.2.0
+      rimraf:
+        specifier: ^6.1.3
+        version: 6.1.3
+
   src/suite/cabloy-basic/modules/basic-captcha:
     devDependencies:
       clean-package:

package/zova/src/suite/a-demo/modules/demo-basic/src/page/toolOne/render.tsx

@@ -17,9 +17,11 @@ export class RenderPageToolOne extends BeanRenderBase {
           schema={this.schemaUpdate}
           formMeta={this.formMeta}
           onSubmitData={data => this.submitData(data)}
-          onShowError={({ error }) => {
-            // eslint-disable-next-line no-alert
-            window.alert(error.message);
+          onShowError={async ({ error }) => {
+            await this.$performCommand('basic-commands:alert', {
+              type: 'error',
+              text: error.message,
+            });
           }}
           slotFooter={$$form => {
             return (

package/zova/src/suite/a-home/modules/home-login/src/page/login/render.tsx

@@ -45,9 +45,11 @@ export class RenderPageLogin extends BeanRenderBase {
         onSubmitData={data => {
           return this.submitLogin(data);
         }}
-        onShowError={({ error }) => {
-          // eslint-disable-next-line no-alert
-          window.alert(error.message);
+        onShowError={async ({ error }) => {
+          await this.$performCommand('basic-commands:alert', {
+            type: 'error',
+            text: error.message,
+          });
         }}
       >
         <ZFormFieldPreset

package/zova/src/suite/a-training/modules/training-student/package.json

@@ -48,5 +48,10 @@
       "exports.\\..import"
     ]
   },
-  "title": "training-student"
+  "title": "training-student",
+  "zovaModule": {
+    "dependencies": {
+      "basic-app": "5.0.0"
+    }
+  }
 }

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

@@ -5,6 +5,7 @@ import type {
   NextTableCellRender,
 } from 'zova-module-a-table';
 
+import { TableIdentity } from 'table-identity';
 import { BeanBase } from 'zova';
 import { TableCell } from 'zova-module-a-table';
 
@@ -27,25 +28,26 @@ export class TableCellActionDeleteForce extends BeanBase implements ITableCellRe
     renderContext: IJsxRenderContextTableCell,
     _next: NextTableCellRender,
   ) {
+    const { $host, cellContext, ctx } = renderContext;
     return (
       <button
         class={options.class}
         type="button"
-        onClick={async e => {
-          e.preventDefault();
-          e.stopPropagation();
-          // eslint-disable-next-line no-alert
-          if (!window.confirm(this.scope.locale.ForceDeleteConfirm())) return;
-          const modelStudent = await this._getModelStudent();
-          await modelStudent.deleteForce(renderContext.cellContext.row.id).mutateAsync();
+        onClick={async () => {
+          const confirmed = await $host.$performCommand('basic-commands:confirm', {
+            text: this.scope.locale.ForceDeleteConfirm(),
+          });
+          if (!confirmed) return;
+          const id = cellContext.row.id as TableIdentity;
+          const modelStudent = (await ctx.bean._getBean(
+            'training-student.model.student',
+            true,
+          )) as ModelStudent;
+          await modelStudent.deleteForce(id).mutateAsync();
         }}
       >
         {this.scope.locale.ForceDelete()}
       </button>
     );
   }
-
-  private async _getModelStudent() {
-    return (await this.bean._getBean('training-student.model.student', true)) as ModelStudent;
-  }
 }

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

@@ -46,7 +46,7 @@ export class TableCellActionSummary extends BeanBase implements ITableCellRender
             `${this.scope.locale.Level()}: ${summary?.level ?? '-'}`,
             `${this.scope.locale.Description()}: ${summary?.description ?? '-'}`,
           ].join('\n');
-          await $host.$performCommand('basic-commands:alert', { message }, renderContext);
+          await $host.$performCommand('basic-commands:alert', { text: message }, renderContext);
         }}
       >
         {this.scope.locale.Summary()}

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

@@ -0,0 +1,60 @@
+{
+  "name": "zova-module-basic-app",
+  "version": "5.0.0",
+  "description": "",
+  "keywords": [
+    "Zova Module"
+  ],
+  "author": "",
+  "files": [
+    "mock",
+    "dist",
+    "src",
+    "icons",
+    "assets"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": [
+        "./src/index.ts",
+        "./dist/index.d.ts"
+      ],
+      "import": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "clean": "rimraf dist tsconfig.build.tsbuildinfo",
+    "tsc:publish": "npm run clean && node ../../../../../packages-cli/cli/src/bin/zova.ts :bin:buildModule --sourcemap && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run tsc:publish",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore && npm run clean"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "clean-package": "^2.2.0",
+    "rimraf": "^6.1.3"
+  },
+  "clean-package": {
+    "indent": 2,
+    "replace": {
+      "exports.\\..types": "./dist/index.d.ts"
+    },
+    "remove": [
+      "clean-package",
+      "devDependencies",
+      "exports.\\..import"
+    ]
+  },
+  "title": "basic-app",
+  "zovaModule": {
+    "capabilities": {
+      "monkey": true
+    },
+    "dependencies": {
+      "a-zova": "5.0.0"
+    }
+  }
+}

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

@@ -0,0 +1,137 @@
+// eslint-disable
+/** service: begin */
+export * from '../service/appModal.js';
+
+import 'zova-module-a-bean';
+declare module 'zova-module-a-bean' {
+  
+    export interface IServiceRecord {
+      'basic-app:appModal': never;
+    }
+
+  
+}
+declare module 'zova-module-basic-app' {
+  
+        export interface ServiceAppModal {
+          /** @internal */
+          get scope(): ScopeModuleBasicApp;
+        }
+
+        export interface ServiceAppModal {
+          get $beanFullName(): 'basic-app.service.appModal';
+          get $onionName(): 'basic-app:appModal';
+          
+        } 
+}
+/** service: end */
+/** service: begin */
+import { ServiceAppModal } from '../service/appModal.js';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordGeneral {
+    'basic-app.service.appModal': ServiceAppModal;
+  }
+}
+/** service: end */
+/** behavior: begin */
+export * from '../bean/behavior.appModal.jsx';
+import { IBehaviorOptionsAppModal } from '../bean/behavior.appModal.jsx';
+import 'zova-module-a-behavior';
+declare module 'zova-module-a-behavior' {
+  
+    export interface IBehaviorRecord {
+      'basic-app:appModal': IBehaviorOptionsAppModal;
+    }
+
+  
+}
+declare module 'zova-module-basic-app' {
+  
+        export interface BehaviorAppModal {
+          /** @internal */
+          get scope(): ScopeModuleBasicApp;
+        }
+
+        export interface BehaviorAppModal {
+          get $beanFullName(): 'basic-app.behavior.appModal';
+          get $onionName(): 'basic-app:appModal';
+          get $onionOptions(): IBehaviorOptionsAppModal;
+        } 
+}
+/** behavior: end */
+/** behavior: begin */
+import { BehaviorAppModal } from '../bean/behavior.appModal.jsx';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordLocal {
+    'basic-app.behavior.appModal': BehaviorAppModal;
+  }
+}
+/** behavior: end */
+/** behaviors: begin */
+import 'vue';
+import 'vue/jsx-runtime';
+
+declare module 'vue' {
+  export interface InputHTMLAttributes {
+    'bs-basic-app-appModal'?: IBehaviorOptionsAppModal | '' | boolean;
+  }
+}
+
+declare module 'vue/jsx-runtime' {
+  namespace JSX {
+    // need define class/style in IntrinsicAttributes
+    export interface IntrinsicAttributes {
+      'bs-basic-app-appModal'?: IBehaviorOptionsAppModal | '' | boolean;
+    }
+  }
+}
+/** behaviors: end */
+/** config: begin */
+export * from '../config/config.js';
+import { config } from '../config/config.js';
+/** config: end */
+/** locale: begin */
+import { locales } from './locales.js';
+/** locale: end */
+/** monkey: begin */
+export * from '../monkey.js';
+/** monkey: end */
+/** monkeySys: begin */
+export * from '../monkeySys.js';
+/** monkeySys: end */
+/** scope: begin */
+import { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig, TypeModuleLocales, TypeLocaleBase } from 'zova';
+import { Scope } from 'zova-module-a-bean';
+
+@Scope()
+export class ScopeModuleBasicApp extends BeanScopeBase {}
+
+export interface ScopeModuleBasicApp {
+  util: BeanScopeUtil;
+config: TypeModuleConfig<typeof config>;
+locale: TypeModuleLocales<(typeof locales)[TypeLocaleBase]>;
+}
+
+import 'zova';
+declare module 'zova' {
+  export interface IBeanScopeRecord {
+    'basic-app': ScopeModuleBasicApp;
+  }
+  
+  export interface IBeanScopeConfig {
+    'basic-app': ReturnType<typeof config>;
+  }
+
+  export interface IBeanScopeLocale {
+    'basic-app': (typeof locales)[TypeLocaleBase];
+  }
+
+  
+}
+
+export function locale<K extends keyof (typeof locales)[TypeLocaleBase]>(key: K): `basic-app::${K}` {
+  return `basic-app::${key}`;
+}  
+/** scope: end */

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

@@ -0,0 +1,7 @@
+import locale_en_us from '../config/locale/en-us.js';
+import locale_zh_cn from '../config/locale/zh-cn.js';
+
+export const locales = {
+  'en-us': locale_en_us,
+  'zh-cn': locale_zh_cn,
+};

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

@@ -0,0 +1,2 @@
+export const __ThisModule__ = 'basic-app';
+export { ScopeModuleBasicApp as ScopeModule } from './index.js';

package/zova/src/suite/cabloy-basic/modules/basic-app/src/bean/behavior.appModal.tsx

@@ -0,0 +1,260 @@
+import type { VNode } from 'vue';
+import type { IDecoratorBehaviorOptions, NextBehavior } from 'zova-module-a-behavior';
+import type { IIconRecord } from 'zova-module-a-icon';
+
+import { BeanBehaviorBase, Behavior } from 'zova-module-a-behavior';
+import { ZIcon } from 'zova-module-a-icon';
+
+import {
+  AlertType,
+  IModalAlertOptions,
+  IModalConfirmOptionsInner,
+  IModalDialogOptions,
+  IModalItem,
+  IModalPromptOptionsInner,
+  ModalType,
+} from '../types/appModal.js';
+
+export interface IBehaviorPropsInputAppModal {}
+
+export interface IBehaviorPropsOutputAppModal extends IBehaviorPropsInputAppModal {}
+
+export interface IBehaviorOptionsAppModal extends IDecoratorBehaviorOptions {}
+
+interface IRenderDialogBaseOptions {
+  modalItem: IModalItem;
+  dialogOptions: IModalDialogOptions;
+  iconName?: keyof IIconRecord;
+  title: string;
+  body?: VNode;
+  actions: VNode;
+  onClose: () => void;
+}
+
+@Behavior<IBehaviorOptionsAppModal>()
+export class BehaviorAppModal extends BeanBehaviorBase<
+  IBehaviorOptionsAppModal,
+  IBehaviorPropsInputAppModal,
+  IBehaviorPropsOutputAppModal
+> {
+  protected render(
+    _props: IBehaviorPropsInputAppModal,
+    next: NextBehavior<IBehaviorPropsOutputAppModal>,
+  ): VNode {
+    const vnodeDefault = next();
+    return (
+      <>
+        {vnodeDefault}
+        {this._renderAppModals()}
+      </>
+    );
+  }
+
+  private _renderAppModals() {
+    if (this.$appModal.modalItems.length === 0) return;
+    return <>{this.$appModal.modalItems.map(modalItem => this._renderAppModal(modalItem))}</>;
+  }
+
+  private _renderAppModal(modalItem: IModalItem) {
+    if (modalItem.type === 'alert') return this._renderAppModalAlert(modalItem);
+    if (modalItem.type === 'confirm') return this._renderAppModalConfirm(modalItem);
+    return this._renderAppModalPrompt(modalItem);
+  }
+
+  private _renderAppModalAlert(modalItem: IModalItem) {
+    const options = modalItem.options as IModalAlertOptions | undefined;
+    const dialogOptions = this._prepareDialogOptions(modalItem.type, modalItem.dialogOptions);
+    const type = options?.type ?? 'info';
+    const iconName = options?.icon ?? this.scope.config.model.alert.icons[type];
+    const title = options?.title ?? this.sys.env.APP_TITLE ?? '';
+    const text = options?.text;
+    return this._renderDialogBase({
+      modalItem,
+      dialogOptions,
+      iconName,
+      title,
+      body: text ? <p class="whitespace-pre-wrap leading-6">{text}</p> : undefined,
+      actions: (
+        <button
+          type="button"
+          class={this._getButtonClass(type, true)}
+          onClick={() => {
+            this.$appModal.close(modalItem.id);
+          }}
+        >
+          {this.scope.locale.Close()}
+        </button>
+      ),
+      onClose: () => {
+        this.$appModal.close(modalItem.id);
+      },
+    });
+  }
+
+  private _renderAppModalConfirm(modalItem: IModalItem) {
+    const options = modalItem.options as IModalConfirmOptionsInner | undefined;
+    const dialogOptions = this._prepareDialogOptions(modalItem.type, modalItem.dialogOptions);
+    const iconName = options?.icon ?? this.scope.config.model.confirm.icons.confirm;
+    const title = options?.title ?? this.sys.env.APP_TITLE ?? '';
+    const text = options?.text;
+    return this._renderDialogBase({
+      modalItem,
+      dialogOptions,
+      iconName,
+      title,
+      body: text ? <p class="whitespace-pre-wrap leading-6">{text}</p> : undefined,
+      actions: (
+        <>
+          <button
+            type="button"
+            class="btn btn-ghost"
+            onClick={() => {
+              this.$appModal.close(modalItem.id);
+              options?.onCallback?.(false);
+            }}
+          >
+            {this.scope.locale.No()}
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            onClick={() => {
+              this.$appModal.close(modalItem.id);
+              options?.onCallback?.(true);
+            }}
+          >
+            {this.scope.locale.Yes()}
+          </button>
+        </>
+      ),
+      onClose: () => {
+        this.$appModal.close(modalItem.id);
+        options?.onCallback?.(false);
+      },
+    });
+  }
+
+  private _renderAppModalPrompt(modalItem: IModalItem) {
+    const options = modalItem.options as IModalPromptOptionsInner | undefined;
+    const dialogOptions = this._prepareDialogOptions(modalItem.type, modalItem.dialogOptions);
+    const iconName = options?.icon ?? this.scope.config.model.prompt.icons.prompt;
+    const title = options?.title ?? this.sys.env.APP_TITLE ?? '';
+    const text = options?.text;
+    return this._renderDialogBase({
+      modalItem,
+      dialogOptions,
+      iconName,
+      title,
+      body: (
+        <fieldset class="fieldset gap-3">
+          {!!text && <legend class="fieldset-legend text-base-content/80">{text}</legend>}
+          <input
+            class="input input-bordered w-full"
+            type="text"
+            autofocus={true}
+            value={options?.defaultValue ?? ''}
+            onInput={event => {
+              options!.defaultValue = (event.target as HTMLInputElement).value;
+            }}
+            onKeydown={event => {
+              if (event.key === 'Enter') {
+                this.$appModal.close(modalItem.id);
+                options?.onCallback?.(options?.defaultValue ?? '');
+              }
+            }}
+          />
+        </fieldset>
+      ),
+      actions: (
+        <>
+          <button
+            type="button"
+            class="btn btn-ghost"
+            onClick={() => {
+              this.$appModal.close(modalItem.id);
+              options?.onCallback?.(undefined);
+            }}
+          >
+            {this.scope.locale.Cancel()}
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            onClick={() => {
+              this.$appModal.close(modalItem.id);
+              options?.onCallback?.(options?.defaultValue ?? '');
+            }}
+          >
+            {this.scope.locale.Ok()}
+          </button>
+        </>
+      ),
+      onClose: () => {
+        this.$appModal.close(modalItem.id);
+        options?.onCallback?.(undefined);
+      },
+    });
+  }
+
+  private _renderDialogBase({
+    modalItem,
+    dialogOptions,
+    iconName,
+    title,
+    body,
+    actions,
+    onClose,
+  }: IRenderDialogBaseOptions) {
+    const style = this._dialogStyle(dialogOptions);
+    return (
+      <div key={modalItem.id} class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          class="absolute inset-0 bg-base-content/30"
+          onClick={() => {
+            if (dialogOptions.closeOnBackdrop) {
+              onClose();
+            }
+          }}
+        ></div>
+        <div class="card bg-base-100 shadow-2xl relative w-full" style={style}>
+          <div class="card-body gap-4">
+            <div class="flex items-start gap-3">
+              {!!iconName && (
+                <ZIcon class="text-primary mt-1 shrink-0" name={iconName} width={24}></ZIcon>
+              )}
+              <div class="flex-1 min-w-0">
+                <h3 class="card-title">{title}</h3>
+                {!!body && <div class="mt-2">{body}</div>}
+              </div>
+            </div>
+            <div class="card-actions justify-end">{actions}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private _prepareDialogOptions(type: ModalType, dialogOptions?: IModalDialogOptions) {
+    const defaults = this.scope.config.model[type].default;
+    return {
+      maxWidth: dialogOptions?.maxWidth ?? defaults.maxWidth,
+      closeOnBackdrop: dialogOptions?.closeOnBackdrop ?? defaults.closeOnBackdrop,
+    };
+  }
+
+  private _dialogStyle(dialogOptions: IModalDialogOptions) {
+    const maxWidth = dialogOptions.maxWidth;
+    if (!maxWidth) return undefined;
+    return {
+      maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+    };
+  }
+
+  private _getButtonClass(type: AlertType, primary?: boolean) {
+    if (!primary) return 'btn btn-ghost';
+    if (type === 'success') return 'btn btn-success';
+    if (type === 'warning') return 'btn btn-warning';
+    if (type === 'error') return 'btn btn-error';
+    return 'btn btn-primary';
+  }
+}

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

@@ -0,0 +1,39 @@
+import type { ZovaSys } from 'zova';
+import type { IIconRecord } from 'zova-module-a-icon';
+
+export const config = (_sys: ZovaSys) => {
+  return {
+    model: {
+      alert: {
+        icons: {
+          success: ':outline:check-circle-outline' as keyof IIconRecord,
+          info: ':outline:alert-outline' as keyof IIconRecord,
+          warning: ':outline:alert-outline' as keyof IIconRecord,
+          error: ':outline:alert-outline' as keyof IIconRecord,
+        },
+        default: {
+          maxWidth: 360,
+          closeOnBackdrop: true,
+        },
+      },
+      confirm: {
+        icons: {
+          confirm: ':outline:alert-outline' as keyof IIconRecord,
+        },
+        default: {
+          maxWidth: 360,
+          closeOnBackdrop: true,
+        },
+      },
+      prompt: {
+        icons: {
+          prompt: ':outline:alert-outline' as keyof IIconRecord,
+        },
+        default: {
+          maxWidth: 360,
+          closeOnBackdrop: true,
+        },
+      },
+    },
+  };
+};

package/zova/src/suite/cabloy-basic/modules/basic-app/src/config/locale/en-us.ts

@@ -0,0 +1,7 @@
+export default {
+  Close: 'Close',
+  Yes: 'Yes',
+  No: 'No',
+  Cancel: 'Cancel',
+  Ok: 'Ok',
+};

package/zova/src/suite/cabloy-basic/modules/basic-app/src/config/locale/zh-cn.ts

@@ -0,0 +1,7 @@
+export default {
+  Close: '关闭',
+  Yes: '是',
+  No: '否',
+  Cancel: '取消',
+  Ok: '确认',
+};

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

@@ -0,0 +1,4 @@
+export * from './.metadata/index.js';
+export * from './.metadata/locales.js';
+export * from './lib/index.js';
+export * from './types/index.js';

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

@@ -0,0 +1,16 @@
+import type { ServiceAppModal } from '../service/appModal.js';
+import type { IModalItem } from '../types/appModal.js';
+
+export class AppModalItem {
+  private serviceAppModal: ServiceAppModal;
+  private modalItem: IModalItem;
+
+  constructor(serviceAppModal: ServiceAppModal, modalItem: IModalItem) {
+    this.serviceAppModal = serviceAppModal;
+    this.modalItem = modalItem;
+  }
+
+  public close() {
+    this.serviceAppModal.close(this.modalItem.id);
+  }
+}

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

@@ -0,0 +1 @@
+export * from './appModalItem.js';

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

@@ -0,0 +1,38 @@
+import type { IModule } from '@cabloy/module-info';
+import type { BeanBase, BeanContainer, IMonkeyBeanInit, IMonkeyModule } from 'zova';
+
+import { BeanSimple } from 'zova';
+
+import type { ServiceAppModal } from './service/appModal.js';
+
+export class Monkey extends BeanSimple implements IMonkeyModule, IMonkeyBeanInit {
+  private _moduleSelf: IModule;
+  private _serviceAppModal: ServiceAppModal;
+
+  constructor(moduleSelf: IModule) {
+    super();
+    this._moduleSelf = moduleSelf;
+  }
+
+  async moduleLoading(_module: IModule) {}
+  async moduleLoaded(module: IModule) {
+    if (this._moduleSelf === module) {
+      await this._loadServiceAppModal();
+    }
+  }
+
+  async beanInit(bean: BeanContainer, beanInstance: BeanBase) {
+    const self = this;
+    bean.defineProperty(beanInstance, '$appModal', {
+      enumerable: false,
+      configurable: true,
+      get() {
+        return self._serviceAppModal;
+      },
+    });
+  }
+
+  private async _loadServiceAppModal() {
+    this._serviceAppModal = await this.app.bean._getBean('basic-app.service.appModal', true);
+  }
+}

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

@@ -0,0 +1,14 @@
+import type { IMonkeySysInitialize } from 'zova';
+import type { IBehaviorItem } from 'zova-module-a-behavior';
+
+import { BeanSimple, deepExtend } from 'zova';
+
+export class MonkeySys extends BeanSimple implements IMonkeySysInitialize {
+  async sysInitialize() {
+    const configCustom: IBehaviorItem = {
+      'basic-app:appModal': {},
+    };
+    const scopeAppConfig = this.sys.util.getModuleConfigSafe('a-app');
+    scopeAppConfig.behaviors = deepExtend({}, scopeAppConfig.behaviors, configCustom);
+  }
+}

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

@@ -0,0 +1,89 @@
+import { BeanBase } from 'zova';
+import { Service } from 'zova-module-a-bean';
+
+import { AppModalItem } from '../lib/appModalItem.js';
+import {
+  IModalAlertOptions,
+  IModalConfirmOptions,
+  IModalDialogOptions,
+  IModalItem,
+  IModalPromptOptions,
+} from '../types/appModal.js';
+
+@Service()
+export class ServiceAppModal extends BeanBase {
+  public modalItems: IModalItem[] = [];
+  private modalItemIdCounter: number = 0;
+
+  protected async __init__() {}
+
+  private newModalItemId() {
+    return ++this.modalItemIdCounter;
+  }
+
+  public alert(options?: IModalAlertOptions, dialogOptions?: IModalDialogOptions) {
+    const id = this.newModalItemId();
+    const modalItem: IModalItem = {
+      id,
+      type: 'alert',
+      options,
+      dialogOptions,
+    };
+    this.modalItems.push(modalItem);
+    return new AppModalItem(this, modalItem);
+  }
+
+  public confirm(
+    options?: IModalConfirmOptions,
+    dialogOptions?: IModalDialogOptions,
+  ): Promise<boolean> {
+    return new Promise(resolve => {
+      const id = this.newModalItemId();
+      const modalItem: IModalItem = {
+        id,
+        type: 'confirm',
+        options: {
+          ...options,
+          onCallback: (yes: boolean) => {
+            return resolve(yes);
+          },
+        },
+        dialogOptions,
+      };
+      this.modalItems.push(modalItem);
+    });
+  }
+
+  public prompt(
+    options?: IModalPromptOptions,
+    dialogOptions?: IModalDialogOptions,
+  ): Promise<string | undefined> {
+    return new Promise(resolve => {
+      const id = this.newModalItemId();
+      const modalItem: IModalItem = {
+        id,
+        type: 'prompt',
+        options: {
+          ...options,
+          onCallback: (res: string | undefined) => {
+            return resolve(res);
+          },
+        },
+        dialogOptions,
+      };
+      this.modalItems.push(modalItem);
+    });
+  }
+
+  public close(id: number) {
+    const [index] = this.findModalItem(id);
+    if (index === -1) return;
+    this.modalItems.splice(index, 1);
+  }
+
+  protected findModalItem(id: number): [number, IModalItem | undefined] {
+    const index = this.modalItems.findIndex(item => item.id === id);
+    if (index === -1) return [index, undefined];
+    return [index, this.modalItems[index]];
+  }
+}

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

@@ -0,0 +1,52 @@
+import type { IIconRecord } from 'zova-module-a-icon';
+
+import type { ServiceAppModal } from '../service/appModal.js';
+
+export type ModalType = 'alert' | 'confirm' | 'prompt';
+export type AlertType = 'success' | 'info' | 'warning' | 'error';
+
+export interface IModalDialogOptions {
+  maxWidth?: number | string;
+  closeOnBackdrop?: boolean;
+}
+
+export interface IModalAlertOptions {
+  type?: AlertType;
+  icon?: keyof IIconRecord;
+  title?: string;
+  text?: string;
+}
+
+export interface IModalConfirmOptions {
+  icon?: keyof IIconRecord;
+  title?: string;
+  text?: string;
+}
+
+export interface IModalConfirmOptionsInner extends IModalConfirmOptions {
+  onCallback?: (yes: boolean) => void;
+}
+
+export interface IModalPromptOptions {
+  icon?: keyof IIconRecord;
+  title?: string;
+  text?: string;
+  defaultValue?: string;
+}
+
+export interface IModalPromptOptionsInner extends IModalPromptOptions {
+  onCallback?: (res: string | undefined) => void;
+}
+
+export interface IModalItem {
+  id: number;
+  type: ModalType;
+  options?: IModalAlertOptions | IModalConfirmOptionsInner | IModalPromptOptionsInner;
+  dialogOptions?: IModalDialogOptions;
+}
+
+declare module 'zova' {
+  export interface BeanBase {
+    $appModal: ServiceAppModal;
+  }
+}

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

@@ -0,0 +1 @@
+export * from './appModal.js';

package/zova/src/suite/cabloy-basic/modules/basic-app/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": false
+  },
+  "include": ["src", "src/.metadata/**/*"]
+}

package/zova/src/suite/cabloy-basic/modules/basic-app/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {},
+  "include": ["src", "src/.metadata/**/*"]
+}

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

@@ -48,5 +48,10 @@
       "exports.\\..import"
     ]
   },
-  "title": "basic-commands"
+  "title": "basic-commands",
+  "zovaModule": {
+    "dependencies": {
+      "basic-app": "5.0.0"
+    }
+  }
 }

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

@@ -6,6 +6,7 @@ export * from '../bean/command.copy.jsx';
 export * from '../bean/command.create.jsx';
 export * from '../bean/command.delete.jsx';
 export * from '../bean/command.edit.jsx';
+export * from '../bean/command.prompt.jsx';
 export * from '../bean/command.setValue.jsx';
 export * from '../bean/command.view.jsx';
 import { ICommandOptionsAlert } from '../bean/command.alert.jsx';
@@ -14,6 +15,7 @@ import { ICommandOptionsCopy } from '../bean/command.copy.jsx';
 import { ICommandOptionsCreate } from '../bean/command.create.jsx';
 import { ICommandOptionsDelete } from '../bean/command.delete.jsx';
 import { ICommandOptionsEdit } from '../bean/command.edit.jsx';
+import { ICommandOptionsPrompt } from '../bean/command.prompt.jsx';
 import { ICommandOptionsSetValue } from '../bean/command.setValue.jsx';
 import { ICommandOptionsView } from '../bean/command.view.jsx';
 import 'zova-module-a-command';
@@ -26,6 +28,7 @@ declare module 'zova-module-a-command' {
 'basic-commands:create': ICommandOptionsCreate;
 'basic-commands:delete': ICommandOptionsDelete;
 'basic-commands:edit': ICommandOptionsEdit;
+'basic-commands:prompt': ICommandOptionsPrompt;
 'basic-commands:setValue': ICommandOptionsSetValue;
 'basic-commands:view': ICommandOptionsView;
     }
@@ -100,6 +103,17 @@ declare module 'zova-module-basic-commands' {
           get $onionOptions(): ICommandOptionsEdit;
         }
 
+        export interface CommandPrompt {
+          /** @internal */
+          get scope(): ScopeModuleBasicCommands;
+        }
+
+        export interface CommandPrompt {
+          get $beanFullName(): 'basic-commands.command.prompt';
+          get $onionName(): 'basic-commands:prompt';
+          get $onionOptions(): ICommandOptionsPrompt;
+        }
+
         export interface CommandSetValue {
           /** @internal */
           get scope(): ScopeModuleBasicCommands;
@@ -130,6 +144,7 @@ import { CommandCopy } from '../bean/command.copy.jsx';
 import { CommandCreate } from '../bean/command.create.jsx';
 import { CommandDelete } from '../bean/command.delete.jsx';
 import { CommandEdit } from '../bean/command.edit.jsx';
+import { CommandPrompt } from '../bean/command.prompt.jsx';
 import { CommandSetValue } from '../bean/command.setValue.jsx';
 import { CommandView } from '../bean/command.view.jsx';
 import 'zova';
@@ -141,6 +156,7 @@ declare module 'zova' {
 'basic-commands.command.create': CommandCreate;
 'basic-commands.command.delete': CommandDelete;
 'basic-commands.command.edit': CommandEdit;
+'basic-commands.command.prompt': CommandPrompt;
 'basic-commands.command.setValue': CommandSetValue;
 'basic-commands.command.view': CommandView;
   }

package/zova/src/suite/cabloy-basic/modules/basic-commands/src/bean/command.alert.tsx

@@ -1,33 +1,27 @@
 import type { ICommandExecute, ICommandOptionsBase } from 'zova-module-a-command';
 import type { NextCommandExecute } from 'zova-module-a-command';
 import type { IJsxRenderContextBase } from 'zova-module-a-openapi';
+import type { IModalAlertOptions, IModalDialogOptions } from 'zova-module-basic-app';
 
 import { BeanBase } from 'zova';
 import { Command } from 'zova-module-a-command';
 
 export type TypeCommandAlertResult = unknown;
 
-export interface ICommandOptionsAlert extends ICommandOptionsBase<TypeCommandAlertResult> {
-  message: string;
-  wait?: boolean;
+export interface ICommandOptionsAlert
+  extends ICommandOptionsBase<TypeCommandAlertResult>, IModalAlertOptions {
+  dialogOptions?: IModalDialogOptions;
 }
 
-@Command<ICommandOptionsAlert>({ wait: true })
+@Command<ICommandOptionsAlert>()
 export class CommandAlert extends BeanBase implements ICommandExecute {
   execute(
     options: ICommandOptionsAlert,
-    _renderContext: IJsxRenderContextBase,
+    renderContext: IJsxRenderContextBase,
     next: NextCommandExecute,
   ) {
-    if (options.wait) {
-      // eslint-disable-next-line no-alert
-      window.alert(options.message);
-    } else {
-      setTimeout(() => {
-        // eslint-disable-next-line no-alert
-        window.alert(options.message);
-      }, 0);
-    }
+    const { $host } = renderContext;
+    $host.$appModal.alert(options, options.dialogOptions);
     return next();
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-commands/src/bean/command.confirm.tsx

@@ -1,3 +1,5 @@
+import type { IModalConfirmOptions, IModalDialogOptions } from 'zova-module-basic-app';
+
 import { BeanBase } from 'zova';
 import {
   Command,
@@ -7,21 +9,22 @@ import {
 } from 'zova-module-a-command';
 import { IJsxRenderContextBase } from 'zova-module-a-openapi';
 
-export type TypeCommandConfirmResult = boolean;
+export type TypeCommandConfirmResult = Promise<boolean>;
 
-export interface ICommandOptionsConfirm extends ICommandOptionsBase<TypeCommandConfirmResult> {
-  message: string;
+export interface ICommandOptionsConfirm
+  extends ICommandOptionsBase<TypeCommandConfirmResult>, IModalConfirmOptions {
+  dialogOptions?: IModalDialogOptions;
 }
 
 @Command<ICommandOptionsConfirm>()
 export class CommandConfirm extends BeanBase implements ICommandExecute {
-  execute(
+  async execute(
     options: ICommandOptionsConfirm,
-    _renderContext: IJsxRenderContextBase,
+    renderContext: IJsxRenderContextBase,
     next: NextCommandExecute,
   ) {
-    // eslint-disable-next-line no-alert
-    const res = window.confirm(options.message);
+    const { $host } = renderContext;
+    const res = await $host.$appModal.confirm(options, options.dialogOptions);
     return next(res);
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-commands/src/bean/command.prompt.tsx

@@ -0,0 +1,30 @@
+import type {
+  ICommandExecute,
+  ICommandOptionsBase,
+  NextCommandExecute,
+} from 'zova-module-a-command';
+import type { IJsxRenderContextBase } from 'zova-module-a-openapi';
+import type { IModalDialogOptions, IModalPromptOptions } from 'zova-module-basic-app';
+
+import { BeanBase } from 'zova';
+import { Command } from 'zova-module-a-command';
+
+export type TypeCommandPromptResult = unknown;
+
+export interface ICommandOptionsPrompt
+  extends ICommandOptionsBase<TypeCommandPromptResult>, IModalPromptOptions {
+  dialogOptions?: IModalDialogOptions;
+}
+
+@Command<ICommandOptionsPrompt>()
+export class CommandPrompt extends BeanBase implements ICommandExecute {
+  async execute(
+    options: ICommandOptionsPrompt,
+    renderContext: IJsxRenderContextBase,
+    next: NextCommandExecute,
+  ) {
+    const { $host } = renderContext;
+    const res = await $host.$appModal.prompt(options, options.dialogOptions);
+    return next(res);
+  }
+}

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

@@ -42,9 +42,11 @@ export class ControllerBlockForm extends BeanControllerBase {
         formProvider={$$pageEntry.formProvider}
         formScope={$$pageEntry.jsxCelScope}
         onSubmitData={data => $$pageEntry.submitData(data)}
-        onShowError={({ error }) => {
-          // eslint-disable-next-line no-alert
-          window.alert(error.message);
+        onShowError={async ({ error }) => {
+          await this.$performCommand('basic-commands:alert', {
+            type: 'error',
+            text: error.message,
+          });
         }}
         onChanged={data => {
           $$pageEntry.setPageMeta(data, true);

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

@@ -48,5 +48,10 @@
       "exports.\\..import"
     ]
   },
-  "title": "basic-table"
+  "title": "basic-table",
+  "zovaModule": {
+    "dependencies": {
+      "basic-app": "5.0.0"
+    }
+  }
 }

package/zova/src/suite/cabloy-basic/modules/basic-table/src/bean/tableCell.actionDelete.tsx

@@ -32,8 +32,10 @@ export class TableCellActionDelete extends BeanBase implements ITableCellRender
         class={options.class}
         type="button"
         onClick={async () => {
-          // eslint-disable-next-line no-alert
-          if (!window.confirm(this.scope.locale.DeleteConfirm())) return;
+          const confirmed = await $host.$performCommand('basic-commands:confirm', {
+            text: this.scope.locale.DeleteConfirm(),
+          });
+          if (!confirmed) return;
           await $host.$performCommand('basic-commands:delete', options, renderContext);
         }}
       >

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

@@ -8,6 +8,7 @@
   "type": "module",
   "dependencies": {
     "zova-module-basic-adapter": "^5.0.5",
+    "zova-module-basic-app": "^5.0.0",
     "zova-module-basic-captcha": "^5.0.8",
     "zova-module-basic-commands": "^5.1.15",
     "zova-module-basic-commandssync": "^5.0.5",