Methods

<template>
 <Toast show>
  <ToastHeader>
   <b-img
    src="https://dummyimage.com/20x20/007aff/007aff"
    rounded
    margin="e-2"
    alt="Card image cap"
   />
   <strong class="me-auto">Bootstrap</strong>
   <small>11 mins ago</small>
   <CloseButton dismiss="toast" />
  </ToastHeader>
  <ToastBody>Hello, world! This is a toast message.</ToastBody>
 </Toast>
</template>

<template>
 <!-- Button trigger modal -->
 <b-button
  color="primary"
  toggle="modal"
  target="#exampleModal"
 >
  Launch demo modal
 </b-button>
 <!-- Modal -->
 <Modal id="exampleModal">
  <ModalDialog>
   <ModalContent>
    <ModalHeader>
     <ModalTitle>Modal title</ModalTitle>
     <CloseButton dismiss="modal" />
    </ModalHeader>
    <ModalBody>...</ModalBody>
    <ModalFooter>
     <b-button
      color="secondary"
      dismiss="modal"
     >
      Close
     </b-button>
     <b-button color="primary">
      Save changes
     </b-button>
    </ModalFooter>
   </ModalContent>
  </ModalDialog>
 </Modal>
</template>

<template>
 <!-- Button trigger modal -->
 <b-button
  color="primary"
  @click="clicked"
 >
  Launch demo modal
 </b-button>
 <EventViewer :raised="raised" />
 <!-- Modal -->
 <Modal
  ref="demoModal"
  @hide="onHide"
  @hidden="onHidden"
  @show="onShow"
  @shown="onShown"
 >
  <ModalDialog>
   <ModalContent>
    <ModalHeader>
     <ModalTitle>Modal title</ModalTitle>
     <CloseButton dismiss="modal" />
    </ModalHeader>
    <ModalBody>...</ModalBody>
    <ModalFooter>
     <b-button
      color="secondary"
      dismiss="modal"
     >
      Close
     </b-button>
     <b-button color="primary">
      Save changes
     </b-button>
    </ModalFooter>
   </ModalContent>
  </ModalDialog>
 </Modal>
</template>

<script setup lang="ts">
import { delay } from 'es-toolkit/compat';

const demoModal = ref(null);
const raised = ref({ name: '', event: '' });

const clicked = () => {
 delay(() => {
  if (demoModal.value) {
   demoModal.value.show();
  }
 }, 1000);
};

const onHide = () => {
 raised.value = { name: 'Modal', event: 'Hide' };
};
const onHidden = () => {
 raised.value = { name: 'Modal', event: 'Hidden' };
};
const onShow = () => {
 raised.value = { name: 'Modal', event: 'Show' };
};
const onShown = () => {
 raised.value = { name: 'Modal', event: 'Shown' };
};
</script>