BootstrapToast.vue

<script setup lang="ts">
import { useSlots, computed, type PropType } from "vue";
import type { Colors } from "@/types/PropTypes";

const slots = useSlots();
const props = defineProps({
  colorClass: {
    type: String as PropType<Colors>,
    required: false,
    default: "success",
  },
  toastId: { type: String, required: true },
});

const colorClassName = computed<string>(() => {
  return `text-bg-${props.colorClass}`;
});
</script>

<template>
  <Teleport to="#global-toast-container">
    <div
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      class="toast align-items-center border-0"
      :class="colorClassName"
      data-bs-autohide="true"
      :id="props.toastId"
    >
      <div class="toast-body">
        <div class="d-flex justify-content-between fs-6">
          <div class="flex-fill">
            <slot></slot>
          </div>
          <button
            type="button"
            class="btn-close btn-close-white me-2"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="mt-2 pt-2 border-top" v-if="slots.body">
          <slot name="body"></slot>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped></style>