chore: move dialog types from frontend api to the dialog component

Author: yaroslav8765

adminforth/spa/src/afcl/Dialog.vue

@@ -61,11 +61,93 @@ import Button from "./Button.vue";
 import { ref, computed, type Ref } from 'vue';
 import { Modal } from '@/afcl'
 import { useI18n } from "vue-i18n";
-import type { IDialogInsideButtonClickHandler, DialogButton, DialogProps } from '@/types/FrontendAPI';
 
 const { t } = useI18n();
 
 
+interface IDialogInsideButtonClickHandler {
+  hide: () => void
+}
+
+
+interface DialogButton {
+  label: string
+  onclick: (dialog: IDialogInsideButtonClickHandler) => void
+  options?: Record<string, any> 
+}
+
+
+interface DialogProps {
+  /**
+   * The header text to display in the dialog. If not provided, no header will be displayed.
+   */
+  header?: string
+
+  /**
+   * If true, a close button will be displayed in the dialog header. Default is true.
+   */
+  headerCloseButton?: boolean
+
+  /**
+   * An array of buttons to display in the dialog footer. 
+   */
+  buttons?: DialogButton[]
+
+  /**
+   * If true, clicking outside the dialog will close it. Default is true.
+   * 
+   * @deprecated Use `closeByClickOutside` instead
+   */
+  clickToCloseOutside?: boolean
+
+  /**
+   * If true, pressing the Esc key will close the dialog. Default is true.
+   */
+  closeByEsc?: boolean
+
+  /**
+   * If true, clicking outside the dialog will close it. Default is true.
+   */
+  closeByClickOutside?: boolean
+
+  /**
+   * Function that will be called before the dialog is closed. 
+   */
+  beforeCloseFunction?: (() => void | Promise<void>) | null
+
+  /**
+   * Function that will be called before the dialog is opened. 
+   */
+  beforeOpenFunction?: (() => void | Promise<void>) | null
+
+  /**
+   * Disables close on Ecs button
+   * 
+   * @deprecated Use `closeByEsc` or  instead
+   */
+  closable?: boolean
+
+  /**
+   * If true, the dialog will ask for confirmation before closing. Default is false.
+   */
+  askForCloseConfirmation?: boolean
+
+  /**
+   * The text to display in the close confirmation dialog. Default is "Are you sure you want to close this dialog?".
+   */
+  closeConfirmationText?: string
+
+  /**
+   * If true, the dialog will be removed from the DOM when closed. Default is false.
+   */
+  removeFromDomOnClose?: boolean
+}
+
+
+
+
+
+
 /**********  for the backward compatibility  ***************/
 class Dialog implements IDialogInsideButtonClickHandler {
   hide: () => void

adminforth/types/FrontendAPI.ts

@@ -213,81 +213,3 @@ export enum AlertVariant {
   }
 
 
-export interface IDialogInsideButtonClickHandler {
-  hide: () => void
-}
-
-
-export interface DialogButton {
-  label: string
-  onclick: (dialog: IDialogInsideButtonClickHandler) => void
-  options?: Record<string, any> 
-}
-export interface DialogProps {
-  /**
-   * The header text to display in the dialog. If not provided, no header will be displayed.
-   */
-  header?: string
-
-  /**
-   * If true, a close button will be displayed in the dialog header. Default is true.
-   */
-  headerCloseButton?: boolean
-
-  /**
-   * An array of buttons to display in the dialog footer. 
-   */
-  buttons?: DialogButton[]
-
-  /**
-   * If true, clicking outside the dialog will close it. Default is true.
-   * 
-   * @deprecated Use `closeByClickOutside` instead
-   */
-  clickToCloseOutside?: boolean
-
-  /**
-   * If true, pressing the Esc key will close the dialog. Default is true.
-   */
-  closeByEsc?: boolean
-
-  /**
-   * If true, clicking outside the dialog will close it. Default is true.
-   */
-  closeByClickOutside?: boolean
-
-  /**
-   * Function that will be called before the dialog is closed. 
-   */
-  beforeCloseFunction?: (() => void | Promise<void>) | null
-
-  /**
-   * Function that will be called before the dialog is opened. 
-   */
-  beforeOpenFunction?: (() => void | Promise<void>) | null
-
-  /**
-   * Disables close on Ecs button
-   * 
-   * @deprecated Use `closeByEsc` or  instead
-   */
-  closable?: boolean
-
-  /**
-   * If true, the dialog will ask for confirmation before closing. Default is false.
-   */
-  askForCloseConfirmation?: boolean
-
-  /**
-   * The text to display in the close confirmation dialog. Default is "Are you sure you want to close this dialog?".
-   */
-  closeConfirmationText?: string
-
-  /**
-   * If true, the dialog will be removed from the DOM when closed. Default is false.
-   */
-  removeFromDomOnClose?: boolean
-}
-
-
-

dev-demo/custom/AfComponents.vue

@@ -137,11 +137,20 @@
     <div class="flex flex-col gap-10 m-10 mt-20">
 
       <Dialog
+        ref="dialogRef"
         class="w-96"
         header="Dialog Header"
+        :buttons="[
+          { label: 'dialog.hide()', options: { variant: 'outline' }, onclick: (dialog) => dialog.hide() },
+        ]"
+        :closeByClickOutside="true"
+        :closeByEsc="true"
+        askForCloseConfirmation
+        :beforeCloseFunction="() => { console.log('Before close'); }"
+        :beforeOpenFunction="() => { console.log('Before open');}"
       >
         <template #trigger>
-          <Button>Dialog Toggle</Button>
+          <Button>Dialog Toggle 2</Button>
         </template>
 
         <div class="space-y-4">
@@ -150,6 +159,11 @@
         </div>
       </Dialog>
 
+      <Button @click="dialogRef?.open()">
+        dialog.open()
+      </Button>
+
+
       <Dropzone
         :extensions="['.jpg', '.jpeg', '.png']"
         :maxSizeBytes="1024 * 1024 * 2"
@@ -301,18 +315,18 @@
     />
 
 
-    <Modal class="w-96" clickToCloseOutside>
+    <Modal class="w-96" :closeByClickOutside="true" :closeByEsc="true" askForCloseConfirmation >
       <template #trigger>
         <Button>Modal Toggle</Button>
       </template>
 
-      <div class="space-y-4">
-        <p>This is the first paragraph of dialog content.</p>
+      <div class="space-y-4 p-4">
+        <p>This is the first paragraph of modal content.</p>
         <p>And this is the second paragraph.</p>
       </div>
     </Modal>
 
-    <Button class="mt-48 ml-48" @click="createJob"> Create Job</Button>
+    <!-- <Button class="mt-48 ml-48" @click="createJob"> Create Job</Button> -->
 
 
 
@@ -367,6 +381,7 @@ const enable = ref(false)
 const selected = ref(null)
 const selected2 = ref([])
 const valueStart = ref()
+const dialogRef = ref()
 
 const deltaToColor = (delta: number) => {
   if (delta < -10) return '#B91C1C' // bright red