cabloy 5.1.64 → 5.1.66

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

@@ -11,7 +11,8 @@
     "dist",
     "src",
     "icons",
-    "assets"
+    "assets",
+    "cli"
   ],
   "type": "module",
   "exports": {

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

@@ -10,7 +10,10 @@ import {
   IModalAlertOptions,
   IModalConfirmOptionsInner,
   IModalDialogOptions,
+  IModalDialogRenderContext,
+  IModalDialogRenderOptions,
   IModalItem,
+  IModalMessageOptions,
   IModalPromptOptionsInner,
   ModalType,
 } from '../types/appModal.js';
@@ -27,7 +30,8 @@ interface IRenderDialogBaseOptions {
   iconName?: keyof IIconRecord;
   title: string;
   body?: VNode;
-  actions: VNode;
+  actions?: VNode;
+  showCloseButton?: boolean;
   onClose: () => void;
 }
 
@@ -37,6 +41,51 @@ export class BehaviorAppModal extends BeanBehaviorBase<
   IBehaviorPropsInputAppModal,
   IBehaviorPropsOutputAppModal
 > {
+  private _windowKeydownHandler?: (event: KeyboardEvent) => void;
+
+  protected async __init__() {
+    if (!process.env.CLIENT) return;
+    this._windowKeydownHandler = event => {
+      if (event.key !== 'Escape' || event.defaultPrevented) return;
+      const modalItems = this.$appModal.modalItems;
+      if (modalItems.length === 0) return;
+      const modalItem = modalItems[modalItems.length - 1];
+      if (!modalItem) return;
+      const dialogOptions = this._prepareDialogOptions(modalItem.type, modalItem.dialogOptions);
+      if (!dialogOptions.closeOnEscape) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this._closeModalByEscape(modalItem);
+    };
+    window.addEventListener('keydown', this._windowKeydownHandler);
+  }
+
+  protected __dispose__() {
+    if (this._windowKeydownHandler) {
+      window.removeEventListener('keydown', this._windowKeydownHandler);
+    }
+  }
+
+  private _closeModalByEscape(modalItem: IModalItem) {
+    if (modalItem.type === 'alert') {
+      this.$appModal.close(modalItem.id);
+      return;
+    }
+    if (modalItem.type === 'confirm') {
+      const options = modalItem.options as IModalConfirmOptionsInner | undefined;
+      this.$appModal.close(modalItem.id);
+      options?.onCallback?.(false);
+      return;
+    }
+    if (modalItem.type === 'prompt') {
+      const options = modalItem.options as IModalPromptOptionsInner | undefined;
+      this.$appModal.close(modalItem.id);
+      options?.onCallback?.(undefined);
+      return;
+    }
+    this.$appModal.close(modalItem.id);
+  }
+
   protected render(
     _props: IBehaviorPropsInputAppModal,
     next: NextBehavior<IBehaviorPropsOutputAppModal>,
@@ -58,7 +107,8 @@ export class BehaviorAppModal extends BeanBehaviorBase<
   private _renderAppModal(modalItem: IModalItem) {
     if (modalItem.type === 'alert') return this._renderAppModalAlert(modalItem);
     if (modalItem.type === 'confirm') return this._renderAppModalConfirm(modalItem);
-    return this._renderAppModalPrompt(modalItem);
+    if (modalItem.type === 'prompt') return this._renderAppModalPrompt(modalItem);
+    return this._renderAppModalDialog(modalItem);
   }
 
   private _renderAppModalAlert(modalItem: IModalItem) {
@@ -85,6 +135,7 @@ export class BehaviorAppModal extends BeanBehaviorBase<
           {this.scope.locale.Close()}
         </button>
       ),
+      showCloseButton: dialogOptions.showCloseButton,
       onClose: () => {
         this.$appModal.close(modalItem.id);
       },
@@ -127,6 +178,7 @@ export class BehaviorAppModal extends BeanBehaviorBase<
           </button>
         </>
       ),
+      showCloseButton: dialogOptions.showCloseButton,
       onClose: () => {
         this.$appModal.close(modalItem.id);
         options?.onCallback?.(false);
@@ -189,6 +241,7 @@ export class BehaviorAppModal extends BeanBehaviorBase<
           </button>
         </>
       ),
+      showCloseButton: dialogOptions.showCloseButton,
       onClose: () => {
         this.$appModal.close(modalItem.id);
         options?.onCallback?.(undefined);
@@ -196,6 +249,25 @@ export class BehaviorAppModal extends BeanBehaviorBase<
     });
   }
 
+  private _renderAppModalDialog(modalItem: IModalItem) {
+    const options = modalItem.options as IModalDialogRenderOptions | undefined;
+    const dialogOptions = this._prepareDialogOptions(modalItem.type, modalItem.dialogOptions);
+    const dialog = this._createDialogRenderContext(modalItem);
+    const title = options?.title ?? this.sys.env.APP_TITLE ?? '';
+    return this._renderDialogBase({
+      modalItem,
+      dialogOptions,
+      iconName: options?.icon,
+      title,
+      body: options?.slotDefault?.(dialog),
+      actions: options?.slotActions?.(dialog),
+      showCloseButton: dialogOptions.showCloseButton,
+      onClose: () => {
+        this.$appModal.close(modalItem.id);
+      },
+    });
+  }
+
   private _renderDialogBase({
     modalItem,
     dialogOptions,
@@ -203,6 +275,7 @@ export class BehaviorAppModal extends BeanBehaviorBase<
     title,
     body,
     actions,
+    showCloseButton,
     onClose,
   }: IRenderDialogBaseOptions) {
     const style = this._dialogStyle(dialogOptions);
@@ -216,38 +289,83 @@ export class BehaviorAppModal extends BeanBehaviorBase<
             }
           }}
         ></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">
+        <div
+          class="card bg-base-100 shadow-2xl relative w-full max-h-[calc(100vh-2rem)]"
+          style={style}
+        >
+          <div class="card-body flex max-h-full min-h-0 flex-col gap-4">
+            <div class="flex items-start gap-3 shrink-0">
               {!!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>
+              {!!showCloseButton && (
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-sm btn-circle shrink-0 transition-colors hover:bg-base-300"
+                  onClick={() => {
+                    onClose();
+                  }}
+                >
+                  <ZIcon name="::close" width={18} height={18}></ZIcon>
+                </button>
+              )}
             </div>
-            <div class="card-actions justify-end">{actions}</div>
+            {!!body && <div class="min-h-0 flex-1 overflow-y-auto p-2">{body}</div>}
+            {!!actions && <div class="card-actions justify-end shrink-0">{actions}</div>}
           </div>
         </div>
       </div>
     );
   }
 
-  private _prepareDialogOptions(type: ModalType, dialogOptions?: IModalDialogOptions) {
-    const defaults = this.scope.config.model[type].default;
+  private _createDialogRenderContext(modalItem: IModalItem): IModalDialogRenderContext {
     return {
+      id: modalItem.id,
+      close: () => {
+        this.$appModal.close(modalItem.id);
+      },
+    };
+  }
+
+  private _prepareDialogOptions(
+    type: ModalType,
+    dialogOptions?: IModalDialogOptions | IModalMessageOptions,
+  ) {
+    const defaults = this.scope.config.model[type].default as
+      | IModalDialogOptions
+      | IModalMessageOptions;
+    const options = {
       maxWidth: dialogOptions?.maxWidth ?? defaults.maxWidth,
+      maxHeight: dialogOptions?.maxHeight ?? defaults.maxHeight,
       closeOnBackdrop: dialogOptions?.closeOnBackdrop ?? defaults.closeOnBackdrop,
+      closeOnEscape: dialogOptions?.closeOnEscape ?? defaults.closeOnEscape,
+      showCloseButton: false,
+    };
+    if (type !== 'dialog') return options;
+    const defaultsDialog = defaults as IModalDialogOptions;
+    return {
+      ...options,
+      showCloseButton:
+        (dialogOptions as IModalDialogOptions | undefined)?.showCloseButton ??
+        defaultsDialog.showCloseButton ??
+        false,
     };
   }
 
   private _dialogStyle(dialogOptions: IModalDialogOptions) {
+    const style = {} as Record<string, string>;
     const maxWidth = dialogOptions.maxWidth;
-    if (!maxWidth) return undefined;
-    return {
-      maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
-    };
+    const maxHeight = dialogOptions.maxHeight;
+    if (maxWidth) {
+      style.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+    }
+    if (maxHeight) {
+      style.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
   }
 
   private _getButtonClass(type: AlertType, primary?: boolean) {

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

@@ -14,6 +14,8 @@ export const config = (_sys: ZovaSys) => {
         default: {
           maxWidth: 360,
           closeOnBackdrop: true,
+          closeOnEscape: true,
+          showCloseButton: false,
         },
       },
       confirm: {
@@ -23,6 +25,8 @@ export const config = (_sys: ZovaSys) => {
         default: {
           maxWidth: 360,
           closeOnBackdrop: true,
+          closeOnEscape: true,
+          showCloseButton: false,
         },
       },
       prompt: {
@@ -32,6 +36,17 @@ export const config = (_sys: ZovaSys) => {
         default: {
           maxWidth: 360,
           closeOnBackdrop: true,
+          closeOnEscape: true,
+          showCloseButton: false,
+        },
+      },
+      dialog: {
+        default: {
+          maxWidth: 640,
+          maxHeight: 'calc(100vh - 2rem)',
+          closeOnBackdrop: false,
+          closeOnEscape: true,
+          showCloseButton: true,
         },
       },
     },

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

@@ -6,7 +6,9 @@ import {
   IModalAlertOptions,
   IModalConfirmOptions,
   IModalDialogOptions,
+  IModalDialogRenderOptions,
   IModalItem,
+  IModalMessageOptions,
   IModalPromptOptions,
 } from '../types/appModal.js';
 
@@ -21,7 +23,7 @@ export class ServiceAppModal extends BeanBase {
     return ++this.modalItemIdCounter;
   }
 
-  public alert(options?: IModalAlertOptions, dialogOptions?: IModalDialogOptions) {
+  public alert(options?: IModalAlertOptions, dialogOptions?: IModalMessageOptions) {
     const id = this.newModalItemId();
     const modalItem: IModalItem = {
       id,
@@ -35,7 +37,7 @@ export class ServiceAppModal extends BeanBase {
 
   public confirm(
     options?: IModalConfirmOptions,
-    dialogOptions?: IModalDialogOptions,
+    dialogOptions?: IModalMessageOptions,
   ): Promise<boolean> {
     return new Promise(resolve => {
       const id = this.newModalItemId();
@@ -56,7 +58,7 @@ export class ServiceAppModal extends BeanBase {
 
   public prompt(
     options?: IModalPromptOptions,
-    dialogOptions?: IModalDialogOptions,
+    dialogOptions?: IModalMessageOptions,
   ): Promise<string | undefined> {
     return new Promise(resolve => {
       const id = this.newModalItemId();
@@ -75,10 +77,26 @@ export class ServiceAppModal extends BeanBase {
     });
   }
 
+  public dialog(options?: IModalDialogRenderOptions, dialogOptions?: IModalDialogOptions) {
+    const id = this.newModalItemId();
+    const modalItem: IModalItem = {
+      id,
+      type: 'dialog',
+      options,
+      dialogOptions,
+    };
+    this.modalItems.push(modalItem);
+    return new AppModalItem(this, modalItem);
+  }
+
   public close(id: number) {
-    const [index] = this.findModalItem(id);
-    if (index === -1) return;
+    const [index, modalItem] = this.findModalItem(id);
+    if (index === -1 || !modalItem) return;
     this.modalItems.splice(index, 1);
+    if (modalItem.type === 'dialog') {
+      const options = modalItem.options as IModalDialogRenderOptions | undefined;
+      options?.onClose?.();
+    }
   }
 
   protected findModalItem(id: number): [number, IModalItem | undefined] {

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

@@ -1,13 +1,35 @@
+import type { VNode } from 'vue';
 import type { IIconRecord } from 'zova-module-a-icon';
 
 import type { ServiceAppModal } from '../service/appModal.js';
 
-export type ModalType = 'alert' | 'confirm' | 'prompt';
+export type ModalType = 'alert' | 'confirm' | 'prompt' | 'dialog';
 export type AlertType = 'success' | 'info' | 'warning' | 'error';
 
-export interface IModalDialogOptions {
+export interface IModalBaseOptions {
   maxWidth?: number | string;
+  maxHeight?: number | string;
   closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+}
+
+export interface IModalDialogOptions extends IModalBaseOptions {
+  showCloseButton?: boolean;
+}
+
+export interface IModalMessageOptions extends IModalBaseOptions {}
+
+export interface IModalDialogRenderContext {
+  id: number;
+  close: () => void;
+}
+
+export interface IModalDialogRenderOptions {
+  icon?: keyof IIconRecord;
+  title?: string;
+  slotDefault?: (dialog: IModalDialogRenderContext) => VNode;
+  slotActions?: (dialog: IModalDialogRenderContext) => VNode;
+  onClose?: () => void;
 }
 
 export interface IModalAlertOptions {
@@ -41,8 +63,12 @@ export interface IModalPromptOptionsInner extends IModalPromptOptions {
 export interface IModalItem {
   id: number;
   type: ModalType;
-  options?: IModalAlertOptions | IModalConfirmOptionsInner | IModalPromptOptionsInner;
-  dialogOptions?: IModalDialogOptions;
+  options?:
+    | IModalAlertOptions
+    | IModalConfirmOptionsInner
+    | IModalPromptOptionsInner
+    | IModalDialogRenderOptions;
+  dialogOptions?: IModalDialogOptions | IModalMessageOptions;
 }
 
 declare module 'zova' {

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

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

package/zova/src/suite/cabloy-basic/modules/basic-details/src/.metadata/component/blockForm.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerBlockFormProps } from '../../component/blockForm/controller.jsx';
+
+import { ControllerBlockForm } from '../../component/blockForm/controller.jsx';
+export type ZBlockFormProps = {
+  controllerRef?: (ref: ControllerBlockForm) => void;
+} & ControllerBlockFormProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerBlockFormProps,
+  keyof typeof ControllerBlockForm.$propsDefault
+>;
+declare module 'zova-module-basic-details' {
+  export interface ControllerBlockForm {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZBlockForm = defineComponent((_props: ZBlockFormProps) => {
+  useController(ControllerBlockForm, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerBlockForm.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-details:blockForm': ControllerBlockFormProps;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/.metadata/component/blockTable.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerBlockTableProps } from '../../component/blockTable/controller.jsx';
+
+import { ControllerBlockTable } from '../../component/blockTable/controller.jsx';
+export type ZBlockTableProps = {
+  controllerRef?: (ref: ControllerBlockTable) => void;
+} & ControllerBlockTableProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerBlockTableProps,
+  keyof typeof ControllerBlockTable.$propsDefault
+>;
+declare module 'zova-module-basic-details' {
+  export interface ControllerBlockTable {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZBlockTable = defineComponent((_props: ZBlockTableProps) => {
+  useController(ControllerBlockTable, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerBlockTable.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-details:blockTable': ControllerBlockTableProps;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/.metadata/component/blockToolbarBulk.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerBlockToolbarBulkProps } from '../../component/blockToolbarBulk/controller.jsx';
+
+import { ControllerBlockToolbarBulk } from '../../component/blockToolbarBulk/controller.jsx';
+export type ZBlockToolbarBulkProps = {
+  controllerRef?: (ref: ControllerBlockToolbarBulk) => void;
+} & ControllerBlockToolbarBulkProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerBlockToolbarBulkProps,
+  keyof typeof ControllerBlockToolbarBulk.$propsDefault
+>;
+declare module 'zova-module-basic-details' {
+  export interface ControllerBlockToolbarBulk {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZBlockToolbarBulk = defineComponent((_props: ZBlockToolbarBulkProps) => {
+  useController(ControllerBlockToolbarBulk, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerBlockToolbarBulk.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-details:blockToolbarBulk': ControllerBlockToolbarBulkProps;
+  }
+}