Add support for nested dialogs

[mlesin]

Addresses #9

Please do not afraid lots of changes, most of them are related to formatting. I've added basic prettier settings to be sure that wouldn't happen again, if all developers will be using single settings directly from repository.

most of important changes are related to changing

dialogRef = shallowRef<DialogInstance>();

to

dialogRefs = shallowReactive<DialogInstance[]>([]);

in lib.ts and DialogWrapper.vue

[rlemaigre]

I'm sorry I didn't react to this yet, I'll try to get to it soon

[suzumejakku]

Hi, Is there any change this will be merged ?

[rlemaigre]

@suzumejakku I don't have time to work on this anymore and at the moment I'm not doing any frontend work so I don't need this library myself. If people tell me this PR is fine and it doesn't break anything, I'll merge it and make this version 0.4.0. Sorry if this isn't a very responsible attitude but unless someone volunteers to maintain this project it's how it's going to be :-(

[suzumejakku]

@rlemaigre thanks for your prompt answer, really appreciate it. I can unfortunately not take the time to maintain this library. So in the end I guess I will have to use something else. I am struggling quite hard in my migration from Vue 2 with bootstrap-vue to Vue 3 and bootstrap-vue-next, as promise-based modals have been removed in bootstrap-vue-next. Your solution (with the nested dialogs of this PR) looked promising, but if it is not maintained I will refrain from using it.

May I suggest to add a comment on the main page of this library indicating that it is not maintained anymore ?

[danjarvis]

Hey there. Excellent work thus far on this PR. Looks like its not actually going to be merged and released. I have been testing it and I am seeing one issue: my custom dialog animations are no longer working.

I've got everything wrapped in a <DialogContainer /> component that looks like this...

<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
.dialog-container {
  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s;
  .dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.25s;
  }
}
.dialog-enter-from.dialog-container, .dialog-leave-to.dialog-container {
  opacity: 0;
  .dialog-content {
    transform: translate(-50%, -50%) scale(0.5);
  }
}
.v-theme--light {
  .dialog-container {
    background-color: rgba(0, 0, 0, 0.32);
  }
}
.v-theme--dark {
  .dialog-container {
    background-color: rgba(255, 255, 255, 0.32);
  }
}
</style>

And in my `App.vue' file I've got this, just like the docs:

<dialog-wrapper :transition-attrs="{name: 'dialog'}"></dialog-wrapper>

Watching the dialogs open and close it shows that the classes for enter and leave are not properly being applied...