Multiple Instances

[Jenesius]

Main idea: Add levels (namespace) for displaying modal windows. This approach can help unify this library. For example, I thought a lot about displaying notifications, like in the following screenshot:

To some extent, this is also a set of components that are shown in a *separate layout, but with a slightly different specification, a slightly different display. But this can be changed more easily via css.

As a result:

• develop the namespace mechanism
• develop a mechanism for mulltiple containers
• tests for window display namespace and multiple containes
• documentation

[Jenesius]

<template>
  <container namespace = "notification"/>
  <container /> <!--Default container-->
</template>
<script setup>
import {container} from "jenesius-vue-modal"

</script>

For container i think its more simple solution.
If we say about push, prompt, open - its more hard.

namespace("notification").pushModal(modal)
pushModal(Modal)

Or

pushModal(modal, {}, { namespace: "notification" }) // Looks more better

One of the options I suggested.

[Jenesius]

Also we need to create analog for modalQueue.

const queue = getQueueByNamespace("notification"); // reactive []

So, in result we can create our own layout.
Also in addModal this line should be updated:
From:

modalQueue.value.push(markRaw(modal));

To:

const modalQueue = getQueueByNamespace(options.namespace):
modalQueue.value.push(markRaw(modal));

[Jenesius]

Don't forgot about getCurrentModal. We can pass namespace name as second param.

[anshirko]

As a result:

• implement a method for receiving a queue via namespace
• add namespace option for AddModalOptions
• add option for ModalContainer, namespace: string
• separate tests for namespace
• documentation for namespace
• demo for notification based on namespace

[Jenesius]

I believe that on the basis of this task it is possible to implement adequate storage of modal windows. Also in the modal window you need to specify the namespace to which it belongs.

[Jenesius]

The error blocks is also ModalInstance but with namespace: "notification".
So, now we can create our own container-queue.

[Jenesius]

Now there is a problem with storing modal windows. We store in both modalQueue and Store. It is not right. Removing a modal window from storage should automatically remove it from the queue.

[Jenesius]

I think that for this particular task you can change ref -> reactive. Or implement a singly linked list in which modal windows will be stored.