cabloy 5.1.62 → 5.1.64

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
@@ -228,6 +231,9 @@ importers:
       zova-module-basic-date:
         specifier: workspace:^
         version: link:src/suite/cabloy-basic/modules/basic-date
+      zova-module-basic-details:
+        specifier: workspace:^
+        version: link:src/suite/cabloy-basic/modules/basic-details
       zova-module-basic-form:
         specifier: workspace:^
         version: link:src/suite/cabloy-basic/modules/basic-form
@@ -807,7 +813,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 +992,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 +1556,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
@@ -1565,6 +1574,9 @@ importers:
       zova-module-basic-date:
         specifier: ^5.0.6
         version: link:modules/basic-date
+      zova-module-basic-details:
+        specifier: ^5.0.0
+        version: link:modules/basic-details
       zova-module-basic-form:
         specifier: ^5.0.7
         version: link:modules/basic-form
@@ -1599,6 +1611,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:
@@ -1648,6 +1669,15 @@ importers:
         specifier: ^6.1.3
         version: 6.1.3
 
+  src/suite/cabloy-basic/modules/basic-details:
+    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-form:
     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';
+  }
+}