advent22/ui/src/components/bulma/Toast.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="display: none">
    <div v-bind="$attrs" ref="message">
      <slot name="default" />
    </div>
  </div>
</template>

<script setup lang="ts">
import * as bulmaToast from "bulma-toast";
import { onMounted, ref } from "vue";

const emit = defineEmits<{
  (
    event: "handle",
    show: (options: bulmaToast.Options) => void,
    hide: () => void,
  ): void;
}>();

const message = ref<HTMLDivElement | null>(null);

onMounted(() =>
  emit(
    "handle",
    (options: bulmaToast.Options = {}) => {
      if (!(message.value instanceof HTMLElement)) return;

      bulmaToast.toast({
        ...options,
        single: true,
        message: message.value,
      });
    },
    () => {
      if (!(message.value instanceof HTMLElement)) return;

      const toast_div = message.value.parentElement;
      if (!(toast_div instanceof HTMLDivElement)) return;

      const dbutton = toast_div.querySelector("button.delete");
      if (!(dbutton instanceof HTMLButtonElement)) return;

      dbutton.click();
    },
  ),
);
</script>