@empathyco/x-components
Version:
Empathy X Components
92 lines (68 loc) • 2.65 kB
Markdown
---
title: BaseIdModalOpen
---
# BaseIdModalOpen
Component that allows to open a modal by emitting XEventsTypes.UserClickedOpenModal
with the modalId as payload. It allows full customization with the 'opening-element' slot and
exposes the 'openModal' function.
## Props
| Name | Description | Type | Default |
| -------------------- | --------------------------------------------- | ------------------- | ------------- |
| <code>modalId</code> | The modalId of the modal that will be opened. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None |
## Events
A list of events that the component will emit:
- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks the button. The event payload is the id of the modal
that is going to be opened.
## Examples
Component containing an event button that emits `UserClickedOpenModal` when it is clicked with the
modalId as payload. It has a default slot to customize its contents and can also be fully
customized, replacing the default button with any other element.
### Basic example
The component rendering content passed to the default slot inside the button and opening the modal
with modalId `my-modal`.
```vue
<template>
<BaseIdModalOpen modalId="my-modal">
<img src="./open-button-icon.svg" />
<span>Open</span>
</BaseIdModalOpen>
</template>
<script>
import { BaseIdModalOpen } from '@empathyco/x-components'
export default {
name: 'BaseIdModalOpenTest',
components: {
BaseIdModalOpen,
},
}
</script>
```
### Replacing the default button
The component renders whatever element is passed, replacing the default button and exposing the
function to open the modal with modalId `my-modal`.
```vue
<template>
<BaseIdModalOpen modalId="my-modal">
<template #opening-element="{ openModal }">
<ul>
<li @click="openModal">Open here</li>
<li>Not here</li>
</ul>
</template>
</BaseIdModalOpen>
</template>
<script>
import { BaseIdModalOpen } from '@empathyco/x-components'
export default {
name: 'BaseIdModalOpenTest',
components: {
BaseIdModalOpen,
},
}
</script>
```