@empathyco/x-components
Version:
Empathy X Components
101 lines (76 loc) • 3.16 kB
Markdown
---
title: BaseIdModal
---
# BaseIdModal
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.
## Props
| Name | Description | Type | Default |
| ---------------------- | ---------------------------------------------------------- | -------------------------- | ------------- |
| <code>animation</code> | Animation to use for opening/closing the modal. | <code>AnimationProp</code> | <code></code> |
| <code>modalId</code> | The modalId to use for the open and close event listeners. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | None |
## Events
A list of events that the component will emit:
- [`UserClickedOutOfModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks outside the modal. The event payload is the id of the
modal and a metadata with the target element that emitted it.
## Examples
The `BaseIdModal` component reacts to the `UserClickedOpenModal`, `UserClickedCloseModal` and
`UserClickedOutOfModal` to handle its open/close state. The component filters out the events which
payload doesn't match its `modalId` prop and reacts only to those who match this criteria.
### Basic usage
The component interacts with both `BaseIdModalOpen` and `BaseIdModalClose` components, which have to
share the same value in their `modalId` prop to work:
```vue
<template>
<div>
<BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
<BaseIdModal modalId="myModal">
<img src="success.png" />
<BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
</BaseIdModal>
</div>
</template>
<script>
import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components'
export default {
name: 'TestModal',
components: {
BaseIdModalOpen,
BaseIdModal,
BaseIdModalClose,
},
}
</script>
```
### Customized usage
#### Customizing the content with classes
The `contentClass` prop can be used to add classes to the modal content.
```vue
<template>
<div>
<BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
<BaseIdModal modalId="myModal" contentClass="x-bg-neutral-75">
<img src="success.png" />
<BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
</BaseIdModal>
</div>
</template>
<script>
import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components'
export default {
name: 'TestModal',
components: {
BaseIdModalOpen,
BaseIdModal,
BaseIdModalClose,
},
}
</script>
```