@empathyco/x-components
Version:
Empathy X Components
108 lines (82 loc) • 4.62 kB
Markdown
---
title: MainModal
---
# MainModal
A specialised version of a modal component, made to contain a full search application.
## Props
| Name | Description | Type | Default |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------- |
| <code>animation</code> | Animation to use for opening/closing the modal. | <code>AnimationProp</code> | <code></code> |
| <code>closeEvents</code> | Events to listen for closing the main modal. | <code>XEvent[]</code> | <code>() => ['UserClickedCloseX', 'UserClickedOutOfMainModal']</code> |
| <code>focusOnOpen</code> | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element. | <code>boolean</code> | <code>false</code> |
| <code>openEvents</code> | Events to listen for opening the main modal. | <code>XEvent[]</code> | <code>() => ['UserClickedOpenX', 'UserOpenXProgrammatically']</code> |
| <code>outOfModalClickEvent</code> | Event to be emitted by the modal when clicked out of its content. | <code>(String as PropType<XEvent>) \|\| null</code> | <code>'UserClickedOutOfMainModal'</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | None |
## Events
This component emits the following events:
- [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
## Examples
A basic example of how the main modal works:
```vue live
<template>
<OpenMainModal>Open X</OpenMainModal>
<MainModal>
<CloseMainModal>Close X</CloseMainModal>
</MainModal>
</template>
<script setup>
import {
MainModal,
CloseMainModal,
OpenMainModal,
} from "@empathyco/x-components";
</script>
```
### Customizing the content with classes
The `contentClass` prop can be used to add classes to the modal content.
```vue live
<template>
<OpenMainModal>Open X</OpenMainModal>
<MainModal contentClass="x-bg-neutral-75">
<CloseMainModal>Close X</CloseMainModal>
</MainModal>
</template>
<script setup>
import {
MainModal,
CloseMainModal,
OpenMainModal,
} from "@empathyco/x-components";
</script>
```
### Customizing the modal events
The modal events can be customized by changing its props values:
- To add or subtract events to open or close the modal,
- To modify or remove the default [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts) that the modal emits.
In this example, we are changing the `openEvents` prop to add another event, and removing the event
that the modal would emit when the user clicks out of the modal.
```vue live
<template>
<OpenMainModal>Open X</OpenMainModal>
<MainModal
:openEvents="[
'UserClickedOpenX',
'UserOpenXProgrammatically',
'MyCustomXEvent',
]"
:outOfModalClickEvent="null"
>
<CloseMainModal>Close X</CloseMainModal>
</MainModal>
</template>
<script setup>
import {
MainModal,
CloseMainModal,
OpenMainModal,
} from "@empathyco/x-components";
</script>
```