Add support for nested dialogs

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 2,
+    "useTabs": false
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "files.exclude": {},
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#1C303E",
+    "titleBar.activeBackground": "#274356",
+    "titleBar.activeForeground": "#FAFCFD"
+  }
+}

README.md

@@ -12,19 +12,19 @@ let data = await openMyDialog();
 
 ## Installation
 
-```
+```sh
 npm i vue3-promise-dialog
 ```
 
 ## Demos
 
 Showcases the small dialog collection included in this repository as examples :
 
-https://rlemaigre.github.io/vue3-promise-dialog/
+<https://rlemaigre.github.io/vue3-promise-dialog/>
 
 A Vite + Vue 3 + Typescript project on Stackblitz featuring a confirm dialog which is probably the simplest use case of the library :
 
-https://stackblitz.com/edit/vitejs-vite-nzzfdg?&terminal=dev
+<https://stackblitz.com/edit/vitejs-vite-nzzfdg?&terminal=dev>
 
 ## Introduction
 
@@ -52,9 +52,9 @@ That approach has several disadvantages :
 * There is no symmetry between requesting data from the user and from the server, yet it is the same kind of
   asynchronous process that yields a value.
 * Everywhere you need to use the dialog, you need to set up some logic in the parent component :
-    * The dialog tag in the template
-    * A ref that controls the dialog visibility
-    * Callbacks that handle clicks on dialog buttons
+  * The dialog tag in the template
+  * A ref that controls the dialog visibility
+  * Callbacks that handle clicks on dialog buttons
 * Things get nasty when a parent component needs to use several dialogs.
 
 ### Dialogs using promises
@@ -189,4 +189,4 @@ resolves to true if the user clicks OK and to null if the use clicks CANCEL.
 ### TextDialog.vue
 
 A TextBox is an OkCancelBox with a text field and a `returnValue` function that returns the content of the text field.
-If the text field is empty, the valid prop is set to false on OkCancelBox.
+If the text field is empty, the valid prop is set to false on OkCancelBox.

lib/components/DialogWrapper.vue

@@ -1,43 +1,36 @@
 <template>
-  <transition v-bind="transitionAttrs">
-    <component :is="dialogRef.dialog" v-if="dialogRef && dialogRef.wrapper === name"
-               v-bind="dialogRef.props"
-               ref="dialogInstance"></component>
-  </transition>
+  <template v-for="(dialogRef, index) in dialogRefs" :key="index">
+    <transition v-bind="transitionAttrs">
+      <component
+        :is="dialogRef.dialog"
+        v-if="dialogRef && dialogRef.wrapper === name"
+        v-bind="dialogRef.props as any"
+        :ref="(ref: any) => (dialogRef.comp = ref)"
+      ></component>
+    </transition>
+  </template>
 </template>
 
 <script lang="ts">
-
-import { ComponentPublicInstance, defineComponent, ref, watch } from "vue";
-import { dialogRef } from "../ts/lib";
+import { defineComponent } from "vue";
+import { dialogRefs } from "../ts/lib";
 
 export default defineComponent({
-  name: 'DialogWrapper',
+  name: "DialogWrapper",
   components: {},
   props: {
     name: {
       type: String,
-      default: 'default'
+      default: "default",
     },
-    transitionAttrs: Object
+    transitionAttrs: Object,
   },
   setup() {
-    const dialogInstance = ref<ComponentPublicInstance<typeof dialogRef.value.dialog>>();
-
-    watch(dialogInstance, () => {
-      if (dialogRef.value) {
-        dialogRef.value.comp = dialogInstance.value
-      }
-    })
-
     return {
-      dialogRef,
-      dialogInstance
-    }
-  }
-})
+      dialogRefs,
+    };
+  },
+});
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

lib/index.ts

@@ -1,9 +1,4 @@
-import DialogWrapper from "./components/DialogWrapper.vue"
-import {openDialog, closeDialog, PromiseDialog} from "./ts/lib";
+import DialogWrapper from "./components/DialogWrapper.vue";
+import { openDialog, closeDialog, PromiseDialog } from "./ts/lib";
 
-export {
-    DialogWrapper,
-    PromiseDialog,
-    openDialog,
-    closeDialog
-}
+export { DialogWrapper, PromiseDialog, openDialog, closeDialog };

lib/ts/lib.ts

@@ -1,51 +1,61 @@
-import {Component, shallowRef} from "vue";
-import {DefineComponent} from "@vue/runtime-core";
+import {
+  AllowedComponentProps,
+  Component,
+  ShallowUnwrapRef,
+  VNodeProps,
+  shallowReactive,
+} from "vue";
 
 export interface DialogInstance {
-    comp?: any;
-    dialog: Component;
-    wrapper: string;
-    props: any;
-    resolve: (data: any) => void;
+  comp?: any;
+  dialog: Component;
+  wrapper: string;
+  props: unknown;
+  resolve: (data: unknown) => void;
 }
 
-export const dialogRef = shallowRef<DialogInstance>();
+export const dialogRefs = shallowReactive<DialogInstance[]>([]);
 
 /**
- * Closes the currently opened dialog, resolving the promise with the return value of the dialog, or with the given
+ * Closes last opened dialog, resolving the promise with the return value of the dialog, or with the given
  * data if any.
  */
-export function closeDialog(data?: any) {
-    if (data === undefined) {
-        data = dialogRef.value.comp.returnValue();
-    }
-    dialogRef.value.resolve(data);
-    dialogRef.value = null;
+export function closeDialog(data?: unknown) {
+  const lastDialog = dialogRefs.pop();
+  if (data === undefined) {
+    data = lastDialog.comp.returnValue();
+  }
+  lastDialog.resolve(data);
 }
 
 /**
  * Extracts the type of props from a component definition.
  */
-type PropsType<C extends DefineComponent<any, any, any>> = InstanceType<C>["$props"];
+type PropsType<C extends Component> = C extends new (...args: any) => any
+  ? Omit<
+      InstanceType<C>["$props"],
+      keyof VNodeProps | keyof AllowedComponentProps
+    >
+  : C extends (__VLS_props: infer U) => any
+  ? Omit<U, keyof VNodeProps | keyof AllowedComponentProps>
+  : never;
 
 /**
  * Extracts the return type of the dialog from the setup function.
  */
-type BindingReturnType<C extends DefineComponent<any, any, any>> = C extends DefineComponent<any, infer X, any> ?
-    (X extends { returnValue: () => infer Y } ? Y : never)
-    : never;
-
-/**
- * Extracts the return type of the dialog from the methods.
- */
-type MethodReturnType<C extends DefineComponent<any, any, any, any, any>> = C extends DefineComponent<any, any, any, any, infer X> ?
-    (X extends { returnValue: () => infer Y } ? Y : never)
-    : never;
-
-/**
- * Extracts the return type of the dialog either from the setup method or from the methods.
- */
-type ReturnType<C extends DefineComponent<any, any, any, any, any>> = BindingReturnType<C> extends never ? MethodReturnType<C> : BindingReturnType<C>;
+type BindingReturnType<C extends Component> = C extends new (
+  ...args: any
+) => any
+  ? InstanceType<C> extends { returnValue: () => infer Y }
+    ? Y
+    : never
+  : C extends (__VLS_props: any, __VLS_ctx: any, __VLS_setup: infer Y) => any
+  ? Y extends { expose: (exposed: { returnValue: () => infer Q }) => any }
+    ? Q
+    : Y extends (exposed: { returnValue: () => infer Q }) => any
+    ? Q
+    : never
+  : never;
 
 /**
  * Opens a dialog.
@@ -54,21 +64,25 @@ type ReturnType<C extends DefineComponent<any, any, any, any, any>> = BindingRet
  * @param wrapper The dialog wrapper you want the dialog to open into.
  * @return A promise that resolves when the dialog is closed
  */
-export function openDialog<C extends DefineComponent<any, any, any, any, any>>(dialog: C, props?: PropsType<C>, wrapper: string = 'default'): Promise<ReturnType<C>> {
-    return new Promise(resolve => {
-        dialogRef.value = {
-            dialog,
-            props,
-            wrapper,
-            resolve
-        }
+export function openDialog<C extends Component>(
+  dialog: C,
+  props?: PropsType<C>,
+  wrapper: string = "default"
+): Promise<BindingReturnType<C>> {
+  return new Promise((resolve) => {
+    dialogRefs.push({
+      dialog,
+      props,
+      wrapper,
+      resolve,
     });
+  });
 }
 
 export const PromiseDialog = {
-    install: (app, options) => {
-        app.config.globalProperties.$close = (comp, alternateValue) => {
-            closeDialog(alternateValue);
-        }
-    }
-}
+  install: (app) => {
+    app.config.globalProperties.$close = (comp, alternateValue) => {
+      closeDialog(alternateValue);
+    };
+  },
+};