@empathyco/x-components
Version:
Empathy X Components
107 lines (104 loc) • 3.77 kB
JavaScript
import { defineComponent, ref } from 'vue';
import '../../composables/create-use-device.js';
import 'vuex';
import '@vue/devtools-api';
import '../../plugins/devtools/timeline.devtools.js';
import '@empathyco/x-utils';
import 'rxjs/operators';
import 'rxjs';
import '../../plugins/devtools/colors.utils.js';
import '../../plugins/x-bus.js';
import '../../plugins/x-plugin.js';
import { useXBus } from '../../composables/use-x-bus.js';
import '@vueuse/core';
import { AnimationProp } from '../../types/animation-prop.js';
import { isElementEqualOrContained, getTargetElement } from '../../utils/html.js';
import BaseModal from './base-modal.vue.js';
/**
* Component containing a modal expecting a required prop, named `modalId`. It reacts to
* `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their
* payload matches the component's 'modalId' prop, to handle its open/close state. The default
* slot offers the possibility to customise the modal content.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'BaseIdModal',
components: { BaseModal },
props: {
/**
* Animation to use for opening/closing the modal.
*/
animation: {
type: AnimationProp,
},
/**
* The modalId to use for the open and close event listeners.
*/
modalId: {
type: String,
required: true,
},
},
setup(props) {
/** The element that opened the modal. */
let openerElement;
/** Whether the modal is open or not. */
const isOpen = ref(false);
const el = ref();
const closeModalEvents = ['UserClickedCloseModal', 'UserClickedOutOfModal'];
const xBus = useXBus();
/**
* Opens the modal.
*
* @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
* @param metadata - The metadata of the emitted event.
* @public
*/
function openModal(modalId, metadata) {
if (!isOpen.value && props.modalId === modalId) {
openerElement = metadata.target;
isOpen.value = true;
}
}
/**
* Closes the modal.
*
* @param payload - The payload of the closing events:
* {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
*
* @public
*/
function closeModal(payload) {
if (isOpen.value && props.modalId === payload) {
isOpen.value = false;
}
}
/**
* Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
* is the button that opened the modal.
*
* @param event - The event that triggered the close attempt.
* @public
*/
function emitClickOutOfModal(event) {
// Prevents clicking the open button when the panel is already open to close the panel.
if (!openerElement || !isElementEqualOrContained(openerElement, getTargetElement(event))) {
xBus.emit('UserClickedOutOfModal', props.modalId, { target: el.value });
}
}
xBus
.on('UserClickedOpenModal', true)
.subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));
closeModalEvents.forEach(event => {
xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload));
});
return {
el,
isOpen,
emitClickOutOfModal,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=base-id-modal.vue2.js.map