Namespace

This functionality goes beyond the use of modal windows. However, this mechanism allows you to implement new interface elements, such as notifications, error display, etc. Using namespace you can easily implement components with similar functionality of modal windows.

This article will tell you how to use namespace, as well as An example of creating notifications based on a modal window container will be given.

Initialization

By default, we create a container without specifying a namespace, but we nothing prevent you from creating a named container:

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

Here we have created a container in which all modal windows will be placed with namespace set to errors.

Addition

Methods openModal, pushModal, promptModal are also expanded. In the option you can indicate the namespace that will be used:

import Modal from "my-modal.vue"
import {pushModal} from "jenesius-vue-modal"

pushModal(Modal, {}, { namespace: 'errors' })

This modal window will be added to the errors space and will be displayed in the appropriate container.

Closing

Of course, now you need the ability to close not the last modal window, and the last window from the desired container. Methods closeModal, popModal have been expanded. Now in the options, passed as the first parameter, you can specify namespace:

import {closeModal} from "jenesius-vue-modal"
closeModal({namespace: 'errors'})

Standard interaction

What you need to understand is that when we don't specify namespace, we are working with namespace = default. I recommend not specifying it at all if The namespace used is assumed to be the default.

It is important to clarify that only for namespace equal to default The Esc handler is installed. At the moment the implementation forces It’s up to you to take care of closing modal windows in containers other than default.

Modal

In the object returned by the pushModal, openModal, promptModal methods a namespace field has appeared, which will be set automatically and store the name of the container.

const modal = await pushModal(Modal, {}, { namespace: 'notification' });
modal.namespace // 'notification'

Gets the current modal window.

The getCurrentModal method has been extended. Now first and optional the parameter is the name namespace for which you want to find the last one open modal window.

getCurrentModal() // Return last opened modal from default namespace
getCurrentModal("notifications") // From namespace: "notifications"

Getting the current queue

In practice, using the second modal-container does not represent many amenities. Other interface elements are very different from the dialog ones (modal) windows. Therefore, it will be more convenient for you to use a queue that stores an array of current elements:

import {getQueueByNamespace} from "jenesius-vue-modal"

const notifications = getQueueByNamespace("notifications");

Options

• namespace Optional parameter specifying the name namespace.

Return

The method returns a reactive array that stores modal windows.

Example

Let's look at an example of how you can use this library create notifications. We will add a container that will show elements from namespace with name notification.

Container

Let's create the following component:

<!--notification-container.vue-->
<template>
	<div>
		<p
			v-for="item in notificationQueue"
			:key="item.id"
		>{{item.props.value.message}}</p> 
	</div>
</template>

<script setup>
import {getQueueByNamespace} from "jenesius-vue-modal";

const notificationQueue = getQueueByNamespace("notification")
</script>

Let us immediately pay attention to:

• getting a queue for notification.
• display messages in v-for.
• We take the message text from props. It's important to remember that props are ComputedRef.

INFO

If instead of p you use your own component, then I recommend use the following:

<template>
    ...
       <your-component
		   v-for="item in notificationQueue"
		   :key="item.id"
           v-bind = "item.props" /> 
    ...
</template>

This completes the notification functionality. It remains to connect this container in your component, for example App.vue and call one of methods for opening a modal window with namespace: 'notification'.