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
animation	Animation to use for opening/closing the modal.	AnimationProp
modalId	The modalId to use for the open and close event listeners.	string

Slots

Name	Description	Bindings (name - type - description)
default		None

Events

A list of events that the component will emit:

• UserClickedOutOfModal (opens new window): 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:

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

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