Namespace

Данный функционал выходит за рамки использования модальных окон. Однако этот механизм позволяет реализовать новые элементы интерфейса, такие как уведомления, отображение ошибок и т.д. Используя namespace можно легко реализовать компоненты со схожим функционалом модальных окон.

В данной статье будет рассказано, как пользоваться namespace, а также будет приведён пример создания уведомлений на базе контейнера модальных окон.

Инициализация

По умолчанию мы создаём контейнер не указывая namespace, однако нам ничего не мешает создать именованный контейнер:

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

Здесь мы создали контейнер, в который будут помещаться все модальные окна с установленным namespace в errors.

Добавление

Методы openModal, pushModal, promptModal также расширены. В опции можно указать тот namespace, которые будет использован:

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

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

Данное модальное окно будет добавлено в пространство errors и будет отображаться в соответствующем контейнере.

Закрытие

Разумеется теперь необходима возможность закрыть не последнее модальное окно, а последнее окно из нужного контейнера. Методы closeModal, popModal были расширены. Теперь в опциях, передаваемых первым параметром, можно указать namespace:

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

Стандартное взаимодействие

Нужно понимать то, что когда мы не указываем namespace, мы работаем с namespace = default. Я рекомендую не указывать его вовсе, если используемый namespace предполагается, как по умолчанию.

Важно уточнить то, что только для namespace равный default устанавливается обработчик Esc. На данный момент реализация вынуждает вас самим позаботиться про закрытие модальных окон в контейнерах отличных от default.

Modal

В объекте возвращаемом методами pushModal, openModal, promptModal появилось поле namespace, которое будет устанавливаться автоматически и хранить название контейнера.

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

Получение текущего модального окна.

Метод getCurrentModal был расширен. Теперь первый и необязательный параметр является название namespace для которого нужно найти последнее открытое модальное окно.

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

Получение текущей очереди

В практике использование второго modal-container не представляет много удобств. Другие элементы интерфейса сильно отличаются от диалоговых (модальных) окон. По этому вам будет удобнее использовать очередь, которая хранит массив текущих элементов:

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

const notifications = getQueueByNamespace("notifications");

Параметры

• namespace Необязательный параметр, указывающий название namespace.

Return

Метод возвращает reactive массив, который хранит в себе модальные окна.

Пример

Давайте рассмотрим пример того, как можно на базе данной библиотеке создать уведомления. Мы добавим контейнер, которые будет показывать элементы из namespace с именем notification.

Контейнер

Создадим следующую компоненту:

<!--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>

Сразу же обращаем внимание на:

• получение очереди для notification.
• выводим сообщения в v-for.
• Текст сообщений берём из props. Важно помнить, что props является ComputedRef.

INFO

Если вместо p вы будете использовать свою компоненту, то я рекомендую использовать следующее:

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

На этом функционал notification реализован. Осталось подключить этот контейнер в вашей компоненте, например App.vue и вызвать один из методов открытия модального окна с namespace: 'notification'.